/* /Components/Layout/LoginLayout.razor.rz.scp.css */
/* ── Login Layout Root ────────────────────────────────────────────── */
.login-layout-root[b-v6lk6huz6q] {
    margin: 0;
    padding: 0;
    width: 100vw;
    min-height: 100vh;
    overflow: hidden;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-30t8ueter8] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--page-bg);
    color: var(--page-text);
}

main[b-30t8ueter8] {
    flex: 1;
}

.sidebar[b-30t8ueter8] {
    background: var(--sidebar-bg);
}

.top-row[b-30t8ueter8] {
    background: var(--top-row-bg);
    border-bottom: 1px solid var(--top-row-border);
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
    color: var(--top-row-text);
}

    .top-row[b-30t8ueter8]  a, .top-row[b-30t8ueter8]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-30t8ueter8]  a:hover, .top-row[b-30t8ueter8]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-30t8ueter8]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-30t8ueter8] {
        justify-content: space-between;
    }

    .top-row[b-30t8ueter8]  a, .top-row[b-30t8ueter8]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-30t8ueter8] {
        flex-direction: row;
    }

    .sidebar[b-30t8ueter8] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-30t8ueter8] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-30t8ueter8]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-30t8ueter8], article[b-30t8ueter8] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-30t8ueter8] {
    color-scheme: normal;
    background: var(--error-bg);
    color: var(--error-text);
    bottom: 0;
    box-shadow: 0 -1px 2px var(--error-border);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-30t8ueter8] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-7s4y1rr017] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: var(--sidebar-link);
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid var(--surface-border);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.72%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem color-mix(in srgb, var(--sidebar-link) 12%, transparent);
}

.navbar-toggler:checked[b-7s4y1rr017] {
    background-color: color-mix(in srgb, var(--sidebar-link) 18%, transparent);
}

.top-row[b-7s4y1rr017] {
    min-height: 3.5rem;
    background-color: rgba(0, 0, 0, 0.18);
    color: var(--sidebar-link);
}

.navbar-brand[b-7s4y1rr017] {
    font-size: 1.1rem;
    font-family: 'GDEnochian', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    letter-spacing: 0.06em;
}

/* ── Nav icons ───────────────────────────────────────────────
   Icons are rendered as CSS masks over a solid colour, so every
   glyph inherits the active theme (or its plugin accent) instead
   of being baked to white. */
.bi[b-7s4y1rr017] {
    display: inline-block;
    position: relative;
    flex: 0 0 auto;
    width: 1.4rem;
    height: 1.4rem;
    margin-right: 0.7rem;
    top: -1px;
    background-color: var(--nav-icon-color, currentColor);
    -webkit-mask: var(--nav-icon) no-repeat center / contain;
    mask: var(--nav-icon) no-repeat center / contain;
    opacity: 0.72;
    transform: translateZ(0);
    transition: opacity 0.18s ease, transform 0.18s ease, filter 0.18s ease;
}

.nav-item[b-7s4y1rr017]  .nav-link:hover .bi {
    opacity: 1;
    transform: scale(1.1);
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--nav-icon-color, currentColor) 55%, transparent));
}

.nav-item[b-7s4y1rr017]  a.active .bi {
    opacity: 1;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--nav-icon-color, currentColor) 65%, transparent));
}

@media (prefers-reduced-motion: reduce) {
    .bi[b-7s4y1rr017] {
        transition: none;
    }

    .nav-item[b-7s4y1rr017]  .nav-link:hover .bi {
        transform: none;
    }
}

.nav-item[b-7s4y1rr017] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-7s4y1rr017] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-7s4y1rr017] {
        padding-bottom: 1rem;
    }

    .nav-item[b-7s4y1rr017]  .nav-link {
        color: var(--sidebar-link);
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-7s4y1rr017]  a.active {
    background-color: var(--sidebar-active-bg);
    color: var(--sidebar-link);
}

.nav-item[b-7s4y1rr017]  .nav-link:hover {
    background-color: var(--sidebar-hover-bg);
    color: var(--sidebar-link);
}

.nav-scrollable[b-7s4y1rr017] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-7s4y1rr017] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-7s4y1rr017] {
        display: none;
    }

    .nav-scrollable[b-7s4y1rr017] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}

/* ── Login display (top-row) ── */
[b-7s4y1rr017] .login-display {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: 0 .9rem;
    font-size: .8rem;
}

[b-7s4y1rr017] .login-display__name {
    opacity: .65;
    color: var(--sidebar-link, #ccc);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-7s4y1rr017] .login-display__link {
    color: var(--sidebar-link, #ccc);
    text-decoration: none;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    border-radius: 5px;
    padding: .15rem .55rem;
    transition: background .18s, border-color .18s;
    white-space: nowrap;
}
[b-7s4y1rr017] .login-display__link:hover {
    background: color-mix(in srgb, var(--sidebar-link, #ccc) 15%, transparent);
    border-color: currentColor;
}

/* The `--nav-icon` glyph definitions now live in wwwroot/app.css so that both this menu and the
   Home page cards can draw them. Only the sizing/colour rule above is scoped here, because the
   two call sites want different sizes. */
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-1ycocoktfx],
.components-reconnect-repeated-attempt-visible[b-1ycocoktfx],
.components-reconnect-failed-visible[b-1ycocoktfx],
.components-pause-visible[b-1ycocoktfx],
.components-resume-failed-visible[b-1ycocoktfx],
.components-rejoining-animation[b-1ycocoktfx] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-1ycocoktfx],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-1ycocoktfx],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-1ycocoktfx],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-1ycocoktfx],
#components-reconnect-modal.components-reconnect-retrying[b-1ycocoktfx],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-1ycocoktfx],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-1ycocoktfx],
#components-reconnect-modal.components-reconnect-failed[b-1ycocoktfx],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-1ycocoktfx] {
    display: block;
}


#components-reconnect-modal[b-1ycocoktfx] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-1ycocoktfx 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-1ycocoktfx 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-1ycocoktfx 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-1ycocoktfx]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-1ycocoktfx 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-1ycocoktfx {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-1ycocoktfx {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-1ycocoktfx {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-1ycocoktfx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-1ycocoktfx] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-1ycocoktfx] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-1ycocoktfx] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-1ycocoktfx] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-1ycocoktfx] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-1ycocoktfx] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-1ycocoktfx 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-1ycocoktfx] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-1ycocoktfx {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════
   Home page — echoes the /login portal, then hands off to the
   theme-aware surface for the plugin cards.

   The hero keeps the dark portal palette under every theme (see
   --lp-* in wwwroot/app.css); the cards below use the ordinary theme
   tokens so the page still belongs to whichever theme is selected.
   ══════════════════════════════════════════════════════════════════ */

.home[b-l88a2huc1b] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* ── Hero ─────────────────────────────────────────────────────────── */
.home-hero[b-l88a2huc1b] {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid var(--lp-card-border);
    background: var(--lp-bg);
    box-shadow: 0 18px 48px rgba(4, 4, 12, 0.45);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.home-hero__inner[b-l88a2huc1b] {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 2.5rem;
    padding: 2.75rem 2.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.home-hero__text[b-l88a2huc1b] {
    flex: 1 1 22rem;
    min-width: 0;
}

.home-title[b-l88a2huc1b] {
    font-family: 'GDEnochian', 'Helvetica Neue', sans-serif;
    font-size: 2.9rem;
    line-height: 1.15;
    letter-spacing: 0.14em;
    margin: 0;
    color: var(--lp-teal);
    text-shadow: 0 0 18px var(--lp-teal-glow);
}

.home-subtitle[b-l88a2huc1b] {
    margin: 0.65rem 0 0;
    font-size: 0.82rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--lp-muted);
}

.home-sep[b-l88a2huc1b] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0;
    max-width: 22rem;
}

.home-sep__line[b-l88a2huc1b] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--lp-teal-dim), transparent);
}

.home-sep__glyph[b-l88a2huc1b] {
    color: var(--lp-purple);
    font-size: 0.9rem;
    text-shadow: 0 0 10px var(--lp-purple-dim);
}

.home-greeting[b-l88a2huc1b] {
    margin: 0 0 0.6rem;
    color: var(--lp-text);
    font-size: 0.95rem;
}

.home-greeting strong[b-l88a2huc1b] {
    color: var(--lp-teal);
    font-weight: 600;
}

.home-lead[b-l88a2huc1b] {
    margin: 0;
    max-width: 34rem;
    color: var(--lp-muted);
    font-size: 0.92rem;
    line-height: 1.65;
}

/* ── Plugin cards ─────────────────────────────────────────────────── */
.home-grid[b-l88a2huc1b] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
}

.home-card[b-l88a2huc1b] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1.25rem 1.35rem;
    border-radius: 14px;
    border: 1px solid var(--surface-border);
    background: var(--surface-bg);
    box-shadow: var(--surface-shadow);
    color: var(--page-text);
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.home-card:hover[b-l88a2huc1b],
.home-card:focus-visible[b-l88a2huc1b] {
    transform: translateY(-3px);
    border-color: var(--link-color);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16);
    text-decoration: none;
}

.home-card:focus-visible[b-l88a2huc1b] {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.home-card__icon[b-l88a2huc1b] {
    width: 1.7rem;
    height: 1.7rem;
    background-color: var(--nav-icon-color, var(--link-color));
    -webkit-mask: var(--nav-icon) no-repeat center / contain;
    mask: var(--nav-icon) no-repeat center / contain;
    opacity: 0.85;
}

.home-card__label[b-l88a2huc1b] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--link-color);
}

.home-card__desc[b-l88a2huc1b] {
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--muted-text);
}

.home-card--muted .home-card__label[b-l88a2huc1b] {
    color: var(--page-text);
}

/* ── Narrow viewports ─────────────────────────────────────────────── */
@media (max-width: 640px) {
    .home-hero__inner[b-l88a2huc1b] {
        padding: 2rem 1.35rem;
        gap: 1.75rem;
    }

    .home-title[b-l88a2huc1b] {
        font-size: 2.1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-card[b-l88a2huc1b] {
        transition: none;
    }

    .home-card:hover[b-l88a2huc1b],
    .home-card:focus-visible[b-l88a2huc1b] {
        transform: none;
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════
   Login page — dark plasma occult Enochian theme
   ══════════════════════════════════════════════════════════════════ */

/* Colour tokens live in wwwroot/app.css, not here. Blazor CSS isolation rewrites every
   selector to end in the scope attribute, so a `:root` rule in this file becomes
   `:root[b-xxxxxxxxxx]` — which never matches <html>, leaving every var() undefined. The
   portal palette is shared with the Home hero anyway, so a global home is the right one. */

/* ── Full-screen wrapper ──────────────────────────────────────────── */
.login-bg[b-n07le0z36v] {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    background: var(--lp-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ── Card wrapper / centring ──────────────────────────────────────── */
.login-wrap[b-n07le0z36v] {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    padding: 2rem 1rem;
    box-sizing: border-box;
}

/* ── Glass card ───────────────────────────────────────────────────── */
.login-card[b-n07le0z36v] {
    width: 100%;
    max-width: 440px;
    background: var(--lp-card-bg);
    border: 1px solid var(--lp-card-border);
    border-radius: 16px;
    padding: 2.5rem 2rem 2.25rem;
    text-align: center;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow:
        0 0 0 1px rgba(42,230,200,0.06),
        0 0 40px rgba(42,230,200,0.1),
        0 0 120px rgba(141,75,255,0.08),
        0 30px 80px rgba(0,0,0,0.6);
    animation: card-in-b-n07le0z36v 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes card-in-b-n07le0z36v {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ── Title ────────────────────────────────────────────────────────── */
.login-title[b-n07le0z36v] {
    font-family: 'GDEnochian', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 2.2rem;
    letter-spacing: 0.18em;
    color: var(--lp-teal);
    text-shadow:
        0 0 12px rgba(42,230,200,0.7),
        0 0 32px rgba(42,230,200,0.35);
    margin: 0 0 0.5rem;
    animation: glow-pulse-b-n07le0z36v 4s ease-in-out infinite alternate;
}

@keyframes glow-pulse-b-n07le0z36v {
    from { text-shadow: 0 0 10px rgba(42,230,200,0.6), 0 0 28px rgba(42,230,200,0.3); }
    to   { text-shadow: 0 0 18px rgba(42,230,200,0.9), 0 0 52px rgba(42,230,200,0.5), 0 0 80px rgba(141,75,255,0.25); }
}

/* ── Subtitle ─────────────────────────────────────────────────────── */
.login-subtitle[b-n07le0z36v] {
    font-size: 0.85rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--lp-muted);
    margin: 0 0 1.8rem;
}

/* ── Separator ────────────────────────────────────────────────────── */
.login-sep[b-n07le0z36v] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.login-sep__line[b-n07le0z36v] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--lp-card-border), transparent);
}

.login-sep__glyph[b-n07le0z36v] {
    color: var(--lp-teal);
    font-size: 0.9rem;
    opacity: 0.6;
}

/* ── Action buttons ───────────────────────────────────────────────── */
.login-actions[b-n07le0z36v] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 2rem;
}

.btn-portal[b-n07le0z36v] {
    display: block;
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.22s ease;
    cursor: pointer;
}

.btn-portal--primary[b-n07le0z36v] {
    background: linear-gradient(135deg, #2ae6c8 0%, #18baa3 100%);
    color: #04040c;
    border: 1px solid transparent;
    box-shadow: 0 0 16px rgba(42,230,200,0.4), 0 4px 16px rgba(0,0,0,0.4);
}

.btn-portal--primary:hover[b-n07le0z36v] {
    background: linear-gradient(135deg, #4fffde 0%, #2ae6c8 100%);
    box-shadow: 0 0 28px rgba(42,230,200,0.65), 0 6px 24px rgba(0,0,0,0.5);
    transform: translateY(-2px);
    color: #04040c;
    text-decoration: none;
}

.btn-portal--outline[b-n07le0z36v] {
    background: transparent;
    color: var(--lp-teal);
    border: 1px solid var(--lp-card-border);
    box-shadow: inset 0 0 0 0 var(--lp-teal-dim);
}

.btn-portal--outline:hover[b-n07le0z36v] {
    background: var(--lp-teal-dim);
    border-color: rgba(42,230,200,0.5);
    box-shadow: 0 0 20px rgba(42,230,200,0.2);
    transform: translateY(-2px);
    color: var(--lp-teal);
    text-decoration: none;
}

/* ── Footer caption ───────────────────────────────────────────────── */
.login-caption[b-n07le0z36v] {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lp-muted);
    margin: 0;
    opacity: 0.6;
}

/* Source note for the wind rose. */
.login-attrib[b-n07le0z36v] {
    margin: 0.6rem 0 0;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    color: var(--lp-muted);
    opacity: 0.5;
}

.login-attrib em[b-n07le0z36v] {
    font-style: italic;
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .login-card[b-n07le0z36v] {
        padding: 2.5rem 1.5rem 2rem;
    }

    .login-title[b-n07le0z36v] {
        font-size: 1.75rem;
    }
}
/* /Components/Pages/Settings.razor.rz.scp.css */
.theme-home[b-ps1v3abk9m] {
    display: grid;
    gap: 1.5rem;
    align-items: start;
    max-width: 72rem;
}

.theme-home__intro[b-ps1v3abk9m] {
    padding-top: 0.75rem;
    max-width: 44rem;
}

.theme-kicker[b-ps1v3abk9m] {
    margin: 0 0 0.5rem;
    color: var(--muted-text);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.75rem;
}

.theme-home h1[b-ps1v3abk9m] {
    margin: 0;
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1.05;
}

.theme-lead[b-ps1v3abk9m] {
    margin: 0.9rem 0 0;
    max-width: 36rem;
    color: var(--muted-text);
    font-size: 1rem;
    line-height: 1.6;
}

.theme-panel[b-ps1v3abk9m] {
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    background: var(--surface-bg);
    box-shadow: var(--surface-shadow);
}

.theme-panel__header[b-ps1v3abk9m] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
}

.theme-panel__header h2[b-ps1v3abk9m] {
    margin: 0;
    font-size: 1.1rem;
}

.theme-panel__header p[b-ps1v3abk9m] {
    margin: 0.25rem 0 0;
    color: var(--muted-text);
}

.theme-badge[b-ps1v3abk9m] {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--surface-border);
    background: var(--chip-bg);
    color: var(--page-text);
    font-size: 0.875rem;
}

.theme-switcher[b-ps1v3abk9m] {
    flex-wrap: wrap;
    gap: 0.5rem;
}

.theme-switcher__button[b-ps1v3abk9m] {
    min-width: 7rem;
}

.theme-preview[b-ps1v3abk9m] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.theme-preview__tile[b-ps1v3abk9m] {
    display: grid;
    gap: 0.35rem;
    padding: 0.9rem;
    border-radius: 8px;
    border: 1px solid var(--surface-border);
    background: var(--preview-bg);
}

.theme-preview__tile span[b-ps1v3abk9m] {
    color: var(--muted-text);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.theme-preview__tile strong[b-ps1v3abk9m] {
    font-size: 0.98rem;
    font-weight: 600;
}

@media (max-width: 700px) {
    .theme-preview[b-ps1v3abk9m] {
        grid-template-columns: 1fr;
    }
}
/* /Components/PortalBackdrop.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════
   Portal backdrop — plasma orbs, grid and drifting motes.
   Shared by the login page and the home hero.
   ══════════════════════════════════════════════════════════════════ */

.portal-backdrop[b-3xu4qv1gcj] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* ── Animated plasma orbs ─────────────────────────────────────────── */
.plasma-orb[b-3xu4qv1gcj] {
    position: absolute;
    border-radius: 50%;
    filter: blur(clamp(28px, 8%, 80px));
    will-change: transform, opacity;
}

/* Sizes and offsets are percentages of .portal-backdrop, not viewport units. The login page
   fills the viewport so the two agree there, but the home hero is a few hundred pixels tall —
   a 70vmax orb inside it would be an untextured wash. Percentages keep the composition the
   same at both scales. Translate percentages resolve against the orb's own box, likewise. */
.plasma-orb--1[b-3xu4qv1gcj] {
    width: 90%;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(42,230,200,0.18) 0%, transparent 68%);
    top: -30%;
    left: -20%;
    animation: plasma1-b-3xu4qv1gcj 14s ease-in-out infinite alternate;
}

.plasma-orb--2[b-3xu4qv1gcj] {
    width: 72%;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(141,75,255,0.2) 0%, transparent 65%);
    bottom: -28%;
    right: -16%;
    animation: plasma2-b-3xu4qv1gcj 18s ease-in-out infinite alternate;
}

.plasma-orb--3[b-3xu4qv1gcj] {
    width: 52%;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(0,180,255,0.12) 0%, transparent 70%);
    top: 30%;
    left: 52%;
    animation: plasma3-b-3xu4qv1gcj 22s ease-in-out infinite alternate;
}

@keyframes plasma1-b-3xu4qv1gcj {
    0%   { transform: translate(0,    0)   scale(1);    opacity: 1; }
    33%  { transform: translate(12%,  9%)  scale(1.12); opacity: 0.8; }
    66%  { transform: translate(6%,   20%) scale(0.95); opacity: 0.95; }
    100% { transform: translate(-9%,  12%) scale(1.08); opacity: 0.75; }
}

@keyframes plasma2-b-3xu4qv1gcj {
    0%   { transform: translate(0,    0)    scale(1);    opacity: 1; }
    40%  { transform: translate(-14%, -12%) scale(1.15); opacity: 0.75; }
    70%  { transform: translate(-7%,  -23%) scale(0.9);  opacity: 0.9; }
    100% { transform: translate(10%,  -9%)  scale(1.1);  opacity: 0.8; }
}

@keyframes plasma3-b-3xu4qv1gcj {
    0%   { transform: translate(0,    0)   scale(1); }
    50%  { transform: translate(-12%, 15%) scale(1.2); }
    100% { transform: translate(8%,   8%)  scale(0.88); }
}

/* ── Grid overlay ─────────────────────────────────────────────────── */
.grid-overlay[b-3xu4qv1gcj] {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(42,230,200,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(42,230,200,0.04) 1px, transparent 1px);
    background-size: 48px 48px;
}

/* ── Floating particles ───────────────────────────────────────────── */
.particles[b-3xu4qv1gcj] {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.particle[b-3xu4qv1gcj] {
    position: absolute;
    bottom: -8px;
    left: calc(var(--i) * 5.1%);
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #2ae6c8;
    opacity: 0;
    animation: float-up-b-3xu4qv1gcj calc(6s + var(--i) * 0.7s) ease-in calc(var(--i) * 0.5s) infinite;
}

.particle:nth-child(even)[b-3xu4qv1gcj] {
    background: #8d4bff;
    width: 1.5px;
    height: 1.5px;
}

@keyframes float-up-b-3xu4qv1gcj {
    0%   { transform: translateY(0) translateX(0);       opacity: 0; }
    10%  { opacity: 0.7; }
    80%  { opacity: 0.3; }
    100% { transform: translateY(-100%) translateX(calc((var(--i) - 10) * 3px)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .plasma-orb[b-3xu4qv1gcj],
    .particle[b-3xu4qv1gcj] {
        animation: none;
    }

    .particle[b-3xu4qv1gcj] {
        opacity: 0.35;
    }
}
/* /Components/WindRose.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════════
   Wind rose — the twelve winds of Isidore around the four banners.
   Element accents are declared locally so the rose does not depend on
   the WatchTowers plugin stylesheet, which the login page never loads.
   ══════════════════════════════════════════════════════════════════ */

.wind-rose[b-0hkvwdqxjs] {
    --wr-line: rgba(42, 230, 200, 0.55);
    --wr-faint: rgba(42, 230, 200, 0.18);
    --wr-text: rgba(213, 249, 241, 0.82);
    --wr-muted: rgba(123, 170, 160, 0.75);
    --wr-air: #f0e020;
    --wr-water: #4aa8ff;
    --wr-earth: #4ade9a;
    --wr-fire: #ff6a4a;

    display: flex;
    justify-content: center;
    margin-bottom: 1.4rem;
}

.wind-rose__svg[b-0hkvwdqxjs] {
    width: 340px;
    max-width: 100%;
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 0 10px rgba(42, 230, 200, 0.25));
}

/* ── Rings and spokes ─────────────────────────────────────────────── */
.wr-rim[b-0hkvwdqxjs],
.wr-spoke[b-0hkvwdqxjs],
.wr-wind-mark[b-0hkvwdqxjs],
.wr-tick[b-0hkvwdqxjs] {
    fill: none;
    stroke: var(--wr-line);
    vector-effect: non-scaling-stroke;
}

.wr-rim[b-0hkvwdqxjs] {
    stroke-width: 1.2;
    opacity: 0.65;
}

.wr-rim--inner[b-0hkvwdqxjs] {
    stroke-width: 0.9;
    opacity: 0.4;
}

.wr-rim--faint[b-0hkvwdqxjs] {
    stroke-width: 0.6;
    opacity: 0.22;
}

.wr-spoke[b-0hkvwdqxjs] {
    stroke-width: 0.7;
    opacity: 0.3;
}

.wr-tick[b-0hkvwdqxjs] {
    stroke-width: 0.8;
    opacity: 0.35;
}

.wr-wind-mark[b-0hkvwdqxjs] {
    stroke-width: 1;
    opacity: 0.5;
}

.wr-wind--cardinal .wr-wind-mark[b-0hkvwdqxjs] {
    stroke-width: 1.8;
    opacity: 0.95;
}

/* The tick collar turns once every four minutes — slow enough to read past. */
.wind-rose__orbit[b-0hkvwdqxjs] {
    transform-origin: 170px 170px;
    animation: wr-spin-b-0hkvwdqxjs 240s linear infinite;
}

@keyframes wr-spin-b-0hkvwdqxjs {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Wind names ───────────────────────────────────────────────────── */
.wr-wind-name[b-0hkvwdqxjs],
.wr-wind-compass[b-0hkvwdqxjs],
.wr-banner-word[b-0hkvwdqxjs],
.wr-banner-sigil[b-0hkvwdqxjs] {
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}

.wr-wind-name[b-0hkvwdqxjs] {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 8px;
    letter-spacing: 0.07em;
    fill: var(--wr-text);
}

.wr-wind--cardinal .wr-wind-name[b-0hkvwdqxjs] {
    font-size: 8.8px;
    font-weight: 600;
    letter-spacing: 0.07em;
}

.wr-wind-compass[b-0hkvwdqxjs] {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 6px;
    letter-spacing: 0.16em;
    fill: var(--wr-muted);
}

.wr-wind[b-0hkvwdqxjs] {
    cursor: help;
}

.wr-wind:hover .wr-wind-name[b-0hkvwdqxjs] {
    fill: #eafcf6;
}

/* ── Elemental sectors and banner medallions ──────────────────────── */
.wr-sector[b-0hkvwdqxjs] {
    stroke: none;
    opacity: 0.13;
}

.wr-sector.wt-air[b-0hkvwdqxjs]   { fill: var(--wr-air); }
.wr-sector.wt-water[b-0hkvwdqxjs] { fill: var(--wr-water); }
.wr-sector.wt-earth[b-0hkvwdqxjs] { fill: var(--wr-earth); }
.wr-sector.wt-fire[b-0hkvwdqxjs]  { fill: var(--wr-fire); }

.wr-banner[b-0hkvwdqxjs] {
    cursor: help;
}

.wr-banner-disc[b-0hkvwdqxjs] {
    fill: rgba(4, 6, 14, 0.75);
}

.wr-banner-ring[b-0hkvwdqxjs] {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.3;
    vector-effect: non-scaling-stroke;
    opacity: 0.85;
}

.wr-banner-sigil[b-0hkvwdqxjs] {
    font-size: 15px;
    fill: currentColor;
    opacity: 0.95;
}

.wr-banner-word[b-0hkvwdqxjs] {
    /* Enochian face, matching the title. The Latin reading (ORO / MPH / MOR / OIP)
       stays available in the group's <title> tooltip and the SVG aria-label. */
    font-family: 'GDEnochian', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 0.12em;
    fill: currentColor;
}

.wr-banner.wt-air[b-0hkvwdqxjs]   { color: var(--wr-air); }
.wr-banner.wt-water[b-0hkvwdqxjs] { color: var(--wr-water); }
.wr-banner.wt-earth[b-0hkvwdqxjs] { color: var(--wr-earth); }
.wr-banner.wt-fire[b-0hkvwdqxjs]  { color: var(--wr-fire); }

.wr-banner:hover .wr-banner-ring[b-0hkvwdqxjs] {
    stroke-width: 2;
    opacity: 1;
}

/* ── Centre hub ───────────────────────────────────────────────────── */
.wr-hub[b-0hkvwdqxjs] {
    fill: rgba(4, 6, 14, 0.8);
}

.wr-hub-ring[b-0hkvwdqxjs] {
    fill: none;
    stroke: var(--wr-line);
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
    opacity: 0.8;
}

/* Isidore's two ianuae caeli: the sunrise half lit, the sunset half dark. */
.wr-hub-half[b-0hkvwdqxjs] {
    fill: var(--wr-faint);
}

.wr-hub-dot[b-0hkvwdqxjs] {
    fill: var(--wr-line);
    opacity: 0.95;
}

@media (prefers-reduced-motion: reduce) {
    .wind-rose__orbit[b-0hkvwdqxjs] {
        animation: none;
    }
}

@media (max-width: 460px) {
    .wind-rose__svg[b-0hkvwdqxjs] {
        width: 100%;
    }
}