@import 'AtcTrainer.Web.Client.c8bwutm25w.bundle.scp.css';

/* /Components/Account/Pages/Manage/EnableAuthenticator.razor.rz.scp.css */
/* ---------- 2FA authenticator QR code ---------- */
/* The PNG itself already renders on a white background (QRCoder's default),
   but a bit of padding + a border keeps it from looking like a stray image
   pasted onto the dark theme, and guarantees scan-reliable white margin
   ("quiet zone") around the modules regardless of surrounding page background. */
.authenticator-qr[b-fqrza5qgag] {
    display: block;
    background: var(--qr-surface);
    padding: var(--space-3);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin: var(--space-2) 0;
}
/* /Components/Account/Pages/Manage/PersonalData.razor.rz.scp.css */
.danger-zone[b-sgx0gphsdr] {
    margin-top: var(--space-4);
    padding: var(--space-4) var(--space-4);
    border: 1px solid color-mix(in srgb, var(--critical) 40%, transparent);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--critical) 8%, transparent);
}

.danger-zone-banner[b-sgx0gphsdr] {
    display: inline-block;
    margin-bottom: var(--space-3);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--critical);
    color: var(--on-critical);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.danger-zone-actions[b-sgx0gphsdr] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-3);
}

/* Closed, a <details> box is exactly its <summary>'s size — sits compactly
   next to the Download button. [open] forces it to claim the full row
   (flex-wrap turns that into "start a new line") so the confirmation form
   below gets real width instead of being squeezed beside Download. */
.danger-zone-reveal summary[b-sgx0gphsdr] {
    list-style: none;
    cursor: pointer;
}

.danger-zone-reveal summary[b-sgx0gphsdr]::-webkit-details-marker {
    display: none;
}

.danger-zone-reveal[open][b-sgx0gphsdr] {
    flex-basis: 100%;
}

.danger-zone-confirm[b-sgx0gphsdr] {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    max-width: 480px;
    border-top: 1px solid color-mix(in srgb, var(--critical) 30%, transparent);
}

.danger-zone-confirm .form-label[b-sgx0gphsdr] {
    color: var(--text);
}

.danger-zone-confirm-actions[b-sgx0gphsdr] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.danger-zone-confirm .btn-danger:disabled[b-sgx0gphsdr] {
    opacity: 0.45;
    cursor: not-allowed;
}
/* /Components/Account/Shared/ManageLayout.razor.rz.scp.css */
/* ---------- My Account (Identity "Manage" area) ----------
   These pages are ASP.NET Core Identity's scaffolded Razor components —
   they ship with Bootstrap classes baked in, but this app never loads
   Bootstrap (see app.css's auth-* rules for the pages that already got a
   custom pass). Rather than rewrite 13+ scaffolded pages' markup
   (security-sensitive flows: 2FA, passkeys, recovery codes — not worth the
   risk for a visual pass), this gives their existing Bootstrap vocabulary a
   real look instead of the unstyled/default-browser one it was silently
   falling back to.

   Scoped here (not app.css) deliberately: plenty of this app's own pages
   already use identical Bootstrap-style class names themselves (row, mb-3,
   w-100, form-label, col-md-4, btn-lg...) — currently inert everywhere else
   since nothing ever styled them, but a global rule would have started
   styling all of *those* too. ::deep reaches into whatever @Body renders
   (i.e. the actual active Manage/*.razor page) without leaking anywhere
   else in the app, since ManageLayout is only ever used by this section. */

.account-shell[b-rckmcoc8qg] {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--space-5);
    align-items: start;
}

.account-sidebar[b-rckmcoc8qg] {
    position: sticky;
    top: 16px;
}

.account-content[b-rckmcoc8qg] {
    min-width: 0;
    /* Every page is a settings-table (name | control | description), so they
       all share the Settings page's ~2/3 width. No card behind it — just the
       page background. */
    width: 100%;
    max-width: 66%;
}

/* Inputs inside a settings-table row take a fixed, readable width rather than
   stretching the whole (auto-sized) control column. */
.account-content[b-rckmcoc8qg]  .settings-table-control .form-control {
    width: 260px;
    max-width: 100%;
}

.account-content[b-rckmcoc8qg]  .settings-actions {
    margin-top: var(--space-4);
}

/* Stacked FormField rows (Profile, passwords): label above the control, hint and validation message below it,
   the same look as the World Editor and Admin forms (UI-014). */
.account-content[b-rckmcoc8qg]  .account-field {
    margin-bottom: var(--space-4);
    max-width: var(--measure-form);
}

.account-content[b-rckmcoc8qg]  .account-field .form-field {
    margin-bottom: var(--space-1);
}

.account-content[b-rckmcoc8qg]  .account-field-value {
    margin: 0 0 var(--space-1);
}

.account-content[b-rckmcoc8qg]  .account-section {
    margin-top: var(--space-6);
    max-width: var(--measure-form);
}

.account-content[b-rckmcoc8qg]  .account-section h3 {
    margin-bottom: var(--space-1);
}

.account-content[b-rckmcoc8qg]  .settings-table-control form {
    margin: 0;
}

.account-content[b-rckmcoc8qg]  .row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin: 0;
}

.account-content[b-rckmcoc8qg]  [class*="col-"] {
    min-width: 0;
}

.account-content[b-rckmcoc8qg]  .col-lg-3 { flex: 0 0 220px; }
.account-content[b-rckmcoc8qg]  .col-lg-9 { flex: 1 1 auto; }
.account-content[b-rckmcoc8qg]  .col-xl-6 { flex: 1 1 380px; max-width: 480px; }
/* Settings.razor's own wrapper — .col-xl-6's fixed 480px cap squeezed its
   settings-table (whose description column otherwise scales via its own
   1fr) down to well under half the available account-content width on a
   wide viewport. A genuine ~2/3 fraction, not another fixed px cap, so it
   keeps scaling with the viewport instead of hitting the same wall again. */
.account-content[b-rckmcoc8qg]  .col-xl-8 { flex: 1 1 100%; }
.account-content[b-rckmcoc8qg]  .col-md-12 { flex: 1 1 100%; }
.account-content[b-rckmcoc8qg]  .col-md-6 { flex: 1 1 260px; }
.account-content[b-rckmcoc8qg]  .col-md-4 { flex: 1 1 180px; }

/* form-floating ships label-after-input in the DOM (Bootstrap positions the
   label absolutely on top of the input via CSS); column-reverse flips that
   back to this app's normal label-above-input reading order for free, with
   zero markup changes to the scaffolded pages. */
.account-content[b-rckmcoc8qg]  .form-floating {
    display: flex;
    flex-direction: column-reverse;
    margin-bottom: var(--space-3);
}

.account-content[b-rckmcoc8qg]  .form-floating label {
    margin-bottom: var(--space-1);
}

.account-content[b-rckmcoc8qg]  .form-label,
.account-content[b-rckmcoc8qg]  .control-label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-1);
}

.account-content[b-rckmcoc8qg]  .form-text {
    display: block;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin-top: var(--space-1);
}

.account-content[b-rckmcoc8qg]  .form-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.account-content[b-rckmcoc8qg]  .form-check-input {
    width: auto;
}

.account-content[b-rckmcoc8qg]  .form-check-label {
    color: var(--text);
    font-size: var(--fs-md);
}

/* Legacy Bootstrap 3-era markup a couple of the older scaffolded pages
   still carry (ExternalLogins, EnableAuthenticator). */
.account-content[b-rckmcoc8qg]  .checkbox {
    margin-bottom: var(--space-2);
}

.account-content[b-rckmcoc8qg]  .checkbox label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    color: var(--text);
}

.account-content[b-rckmcoc8qg]  .card-body {
    padding: var(--space-1);
}

.account-content[b-rckmcoc8qg]  .card-title {
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--text);
    margin: 0 0 var(--space-1);
}

.account-content[b-rckmcoc8qg]  .card-text {
    color: var(--text-muted);
    font-size: var(--fs-md);
    margin: 0 0 var(--space-3);
}

.account-content[b-rckmcoc8qg]  .btn-lg {
    padding: var(--space-3) var(--space-4);
    font-size: var(--fs-md);
}

.account-content[b-rckmcoc8qg]  .btn-secondary {
    background: var(--surface-3);
}

.account-content[b-rckmcoc8qg]  .btn-link {
    background: transparent;
    border: none;
    color: var(--accent);
    padding: 0;
    text-decoration: underline;
}

.account-content[b-rckmcoc8qg]  .btn-link:hover {
    border-color: transparent;
    color: var(--accent-strong);
}

.account-content[b-rckmcoc8qg]  .alert-info {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
    color: var(--accent-strong);
}

.account-content[b-rckmcoc8qg]  .alert-warning {
    background: color-mix(in srgb, var(--warning) 12%, transparent);
    border-color: color-mix(in srgb, var(--warning) 40%, transparent);
    color: var(--warning);
}

.account-content[b-rckmcoc8qg]  .text-info { color: var(--accent-strong); }
.account-content[b-rckmcoc8qg]  .text-success { color: var(--success); }

.account-content[b-rckmcoc8qg]  .input-group {
    display: flex;
    align-items: stretch;
}

.account-content[b-rckmcoc8qg]  .input-group .form-control {
    flex: 1 1 auto;
}

.account-content[b-rckmcoc8qg]  .input-group-append {
    display: flex;
    align-items: center;
    padding: 0 var(--space-3);
    border: 1px solid var(--border);
    border-left: none;
    border-radius: 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0;
    background: var(--surface-2);
}

.account-content[b-rckmcoc8qg]  .input-group-text {
    color: var(--success);
    font-weight: 700;
}

.account-content[b-rckmcoc8qg]  .recovery-codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-2);
    max-width: 420px;
    margin: var(--space-3) 0;
}

.account-content[b-rckmcoc8qg]  .recovery-code {
    font-family: var(--font-mono);
    font-size: var(--fs-md);
    letter-spacing: 0.04em;
    padding: var(--space-1) var(--space-2);
    text-align: center;
    border: 1px solid var(--border, currentColor);
    border-radius: var(--radius-sm, 4px);
    user-select: all;
}

.account-content[b-rckmcoc8qg]  .recovery-codes-hint {
    color: var(--text-muted, inherit);
}

.account-content[b-rckmcoc8qg]  .mb-3 { margin-bottom: var(--space-3); }
.account-content[b-rckmcoc8qg]  .mt-3 { margin-top: var(--space-3); }
.account-content[b-rckmcoc8qg]  .w-100 { width: 100%; }
.account-content[b-rckmcoc8qg]  .h-100 { height: 100%; }
.account-content[b-rckmcoc8qg]  .font-weight-bold { font-weight: 700; }

/* GenerateRecoveryCodes' scaffolded warning icon — no icon font is loaded,
   so this swaps in a plain glyph instead of leaving an empty, invisible span. */
.account-content[b-rckmcoc8qg]  .glyphicon-warning-sign::before {
    content: "\26A0\FE0F  ";
}

/* Name | control | description needs real width (200px + a 260px input + the
   description) — below that, stack each row instead of overflowing it. */
@media (max-width: 1100px) {
    .account-content[b-rckmcoc8qg]  .settings-table-row {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }
}

@media (max-width: 900px) {
    .account-content[b-rckmcoc8qg] {
        max-width: 100%;
    }
}

@media (max-width: 720px) {
    .account-shell[b-rckmcoc8qg] {
        grid-template-columns: 1fr;
    }

    .account-sidebar[b-rckmcoc8qg] {
        position: static;
    }
}
/* /Components/Account/Shared/ManageNavMenu.razor.rz.scp.css */
.account-nav-group + .account-nav-group[b-dsi1j1blcz] {
    margin-top: var(--space-4);
}

.account-nav-group-title[b-dsi1j1blcz] {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 var(--space-1) var(--space-1);
}

.account-nav-group[b-dsi1j1blcz] {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-1) / 2);
}

/* YouTube-style settings nav: plain text at rest (no chip/background), a
   fully-rounded pill only for the active page, links indented further right
   than their group's title above them.

   ::deep is required here, not optional: NavLink is a framework component
   (Microsoft.AspNetCore.Components.Web), not part of this project, so the
   scope attribute Blazor's CSS isolation relies on never reaches the <a>
   it renders unless the selector explicitly reaches through the component
   boundary. MainLayout.razor.css's ".main-nav ::deep a" is the exact same
   situation, already solved the same way — this file just hadn't followed
   it, which is why these links were rendering with zero scoped styling at
   all (falling through to app.css's global `a` rule) rather than merely
   looking different than intended. */
.account-nav-group[b-dsi1j1blcz]  .account-nav-link {
    display: block;
    margin-left: var(--space-4);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-pill);
    color: var(--text);
    text-decoration: none;
    font-size: var(--fs-md);
}

.account-nav-group[b-dsi1j1blcz]  .account-nav-link:hover {
    background: var(--surface-2);
}

.account-nav-group[b-dsi1j1blcz]  .account-nav-link.active {
    background: var(--surface-3);
    color: var(--accent-strong);
    font-weight: 600;
}
/* /Components/Layout/AuthLayout.razor.rz.scp.css */
.auth-shell[b-66h7vtbdrp] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-6) var(--space-4);
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 45%),
        repeating-linear-gradient(0deg, color-mix(in srgb, var(--accent) 5%, transparent) 0, color-mix(in srgb, var(--accent) 5%, transparent) 1px, transparent 1px, transparent 48px),
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 5%, transparent) 0, color-mix(in srgb, var(--accent) 5%, transparent) 1px, transparent 1px, transparent 48px),
        var(--bg);
}

/* A faint sweeping radar arm behind the card — purely decorative, ties the
   auth screen to the radar-scope subject the rest of the app is built
   around, instead of a generic stock-photo background.

   The bright edge sits at the 100%/0% seam, with the fade ramping *up* to
   it over the preceding 22% rather than ramping *down* away from it — since
   the animation spins the whole gradient clockwise, that puts the fade
   immediately counter-clockwise of the bright edge, i.e. trailing behind
   it (where the beam just was), not leading ahead of it (where it hasn't
   swept yet). Getting these two stops in the other order was the earlier
   bug: it put the fade ahead of the line instead of behind it. */
.auth-radar-sweep[b-66h7vtbdrp] {
    position: absolute;
    top: 50%;
    left: 50%;
    --sweep-size: 1400px;
    width: var(--sweep-size);
    height: var(--sweep-size);
    margin: calc(var(--sweep-size) / -2) 0 0 calc(var(--sweep-size) / -2);
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0%, transparent 78%, color-mix(in srgb, var(--accent) 14%, transparent) 100%);
    animation: auth-sweep-b-66h7vtbdrp 10s linear infinite;
    pointer-events: none;
}

@keyframes auth-sweep-b-66h7vtbdrp {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .auth-radar-sweep[b-66h7vtbdrp] {
        animation: none;
    }
}

.auth-brand[b-66h7vtbdrp] {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    font-weight: 700;
    letter-spacing: 0.08em;
    font-size: var(--fs-xl);
    color: var(--text) !important;
    text-decoration: none;
}

.auth-brand-mark[b-66h7vtbdrp] {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    display: block;
}

.auth-card[b-66h7vtbdrp] {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(6px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-6) var(--space-5);
    box-shadow: var(--shadow-lg);
}

/*
 * Renamed from .auth-footer to .auth-legal: that class name is also used
 * (globally, in app.css) for Login/Register's stacked links list — Blazor
 * CSS isolation only scopes the properties THIS file actually sets, so any
 * property this rule didn't declare (display, flex-direction) fell through
 * to app.css's global .auth-footer rule instead, silently turning this
 * single copyright line into a 7-line vertical stack (one line per text/
 * link/separator fragment). A distinct class name removes the collision
 * outright rather than trying to out-specify the global rule.
 */
.auth-legal[b-66h7vtbdrp] {
    position: relative;
    margin-top: var(--space-5);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    max-width: 100%;
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.auth-legal a[b-66h7vtbdrp] {
    color: var(--accent);
    text-decoration: none;
}

.auth-legal a:hover[b-66h7vtbdrp] {
    text-decoration: underline;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.app-shell[b-skpf3x5z34] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-main:focus[b-skpf3x5z34] {
    outline: none;
}

.topbar[b-skpf3x5z34] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 0 var(--space-4);
    height: 54px;
    flex: 0 0 auto;
    /* Never wrap or grow past the viewport: the nav collapses into the menu button instead (UI-005, UI-025). */
    min-width: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.brand[b-skpf3x5z34] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 700;
    letter-spacing: 0.04em;
    font-size: var(--fs-lg);
    color: var(--text) !important;
    text-decoration: none;
    white-space: nowrap;
}

.brand-mark[b-skpf3x5z34] {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    display: block;
}

/* The light-theme mark is a dark tile; on the dark topbar the variant with a rim is shown (UI-032). */
.brand-mark-dark[b-skpf3x5z34] {
    display: none;
}

:root:not([data-theme="light"]) .brand-mark-light[b-skpf3x5z34] {
    display: none;
}

:root:not([data-theme="light"]) .brand-mark-dark[b-skpf3x5z34] {
    display: block;
}

.nav-toggle-btn[b-skpf3x5z34] {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: var(--fs-xl);
    cursor: pointer;
    user-select: none;
    border: 0;
    background: transparent;
    padding: 0;
}

.nav-toggle-btn:hover[b-skpf3x5z34] {
    color: var(--text);
    background: var(--surface-2);
}

.main-nav[b-skpf3x5z34] {
    display: flex;
    flex: 0 0 auto;
    gap: var(--space-1);
    white-space: nowrap;
}

/* ---------- narrow-viewport nav collapse — button toggle (js/nav-toggle.js).
   MainLayout wraps every page (static-rendered pages included), so this is
   the single fix that unblocks basic mobile usability app-wide, not just for
   any one page. Below this breakpoint the topbar's own horizontal nav row
   would otherwise overflow (confirmed: .topbar has no flex-wrap and .main-nav
   never had responsive handling before 2026-09-07). Submenu taps used to rely
   on .nav-dropdown's :focus-within reveal, a real touch-interaction rough
   edge (tapping a dropdown's own link on a phone typically needed two taps) —
   fixed below by switching to a separate, native <details>/<summary>
   accordion (.nav-dropdown-mobile in MainLayout.razor) at this breakpoint
   instead, the same zero-JS disclosure pattern .account-menu already uses.
   .nav-dropdown-desktop (the original hover-panel structure, unchanged) is
   simply hidden here rather than restyled. ---------- */
@media (max-width: 1399px) {
    .topbar[b-skpf3x5z34] {
        flex-wrap: wrap;
        height: auto;
        min-height: 54px;
        padding: var(--space-2) var(--space-4);
    }

    .nav-toggle-btn[b-skpf3x5z34] {
        display: flex;
    }

    .main-nav[b-skpf3x5z34] {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: calc(var(--space-1) / 2);
        width: 100%;
        order: 3;
        padding-top: var(--space-2);
        margin-top: var(--space-2);
        border-top: 1px solid var(--border);
    }

    .nav-toggle-btn[aria-expanded="true"] ~ .main-nav[b-skpf3x5z34] {
        display: flex;
    }

    .main-nav[b-skpf3x5z34]  a {
        padding: var(--space-2) var(--space-3);
    }

    .nav-dropdown-desktop[b-skpf3x5z34] {
        display: none;
    }

    .nav-dropdown-mobile[b-skpf3x5z34] {
        border-bottom: none;
    }

    /* Matches .account-menu-trigger's own disclosure-marker treatment
       (hide the default triangle, draw the app's own instead) and
       .main-nav ::deep a's padding, so the summary row lines up with every
       plain nav link above/below it in the stacked list. */
    .nav-dropdown-mobile > summary[b-skpf3x5z34] {
        list-style: none;
        cursor: pointer;
        padding: var(--space-2) var(--space-3);
        color: var(--text-muted);
        font-weight: 600;
    }

    .nav-dropdown-mobile > summary[b-skpf3x5z34]::-webkit-details-marker {
        display: none;
    }

    .nav-dropdown-mobile > summary[b-skpf3x5z34]::after {
        content: ' \25BE';
    }

    .nav-dropdown-mobile > summary.active[b-skpf3x5z34] {
        color: var(--accent-strong);
    }

    /* Inline indented block once the native <details> is open — an
       accordion, not a floating panel, matching the rest of the stacked
       mobile nav's own layout. */
    .nav-dropdown-mobile-menu[b-skpf3x5z34] {
        display: flex;
        flex-direction: column;
        padding-left: var(--space-3);
    }

    .nav-dropdown-mobile-menu[b-skpf3x5z34]  a {
        padding: var(--space-2) var(--space-3);
    }

    /* Collapsed topbar: brand + menu button on row 1, the account/status cluster on its own row 2 so
       nothing is wider than the viewport (UI-005); the email truncates, the rest wraps. */
    .brand[b-skpf3x5z34] {
        flex: 1 1 auto;
    }

    .auth-status[b-skpf3x5z34] {
        order: 2;
        flex: 1 0 100%;
        flex-wrap: wrap;
        margin-left: 0;
        min-width: 0;
        justify-content: flex-end;
        gap: var(--space-2) var(--space-3);
    }

    .main-nav[b-skpf3x5z34] {
        order: 3;
    }

    .account-menu[b-skpf3x5z34] {
        min-width: 0;
        max-width: 100%;
    }
}

@media (min-width: 1400px) {
    /* The <details>/<summary> accordion is mobile-only — desktop keeps the
       original hover-panel (.nav-dropdown-desktop) untouched. */
    .nav-dropdown-mobile[b-skpf3x5z34] {
        display: none;
    }
}

.main-nav[b-skpf3x5z34]  a {
    display: inline-block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--fs-md);
    font-weight: 600;
}

.main-nav[b-skpf3x5z34]  a:hover {
    color: var(--text);
    background: var(--surface-2);
}

.main-nav[b-skpf3x5z34]  a.active {
    color: var(--on-accent);
    background: var(--accent);
}

.nav-dropdown[b-skpf3x5z34] {
    position: relative;
}

.dropdown-menu[b-skpf3x5z34] {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: var(--space-1);
    min-width: 180px;
    padding: var(--space-1);
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-1) / 2);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--dur-fast), transform var(--dur-fast), visibility var(--dur-fast);
    z-index: var(--z-dropdown);
}

@media (min-width: 1400px) {
    .nav-dropdown-desktop[b-skpf3x5z34] {
        display: flex;
        align-items: center;
    }
}

/* Chevron button next to the group link: the click/touch/screen-reader path to the menu (js/nav-toggle.js).
   The link and the chevron read as ONE control (a split button): the wrapper carries the hover/active
   background, both children are transparent and abut without overlap. */
.nav-dropdown-desktop[b-skpf3x5z34] {
    border-radius: var(--radius-sm);
}

.nav-dropdown-desktop:hover[b-skpf3x5z34],
.nav-dropdown-desktop:focus-within[b-skpf3x5z34] {
    background: var(--surface-2);
}

.nav-dropdown-desktop:hover a[b-skpf3x5z34],
.nav-dropdown-desktop:focus-within a[b-skpf3x5z34] {
    color: var(--text);
}

.nav-dropdown-desktop > a[b-skpf3x5z34] {
    padding-right: var(--space-1);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.nav-dropdown-desktop > a:hover[b-skpf3x5z34],
.nav-dropdown-desktop > a:focus-visible[b-skpf3x5z34] {
    background: transparent;
}

.nav-dropdown-desktop:has(> a.active)[b-skpf3x5z34] {
    background: var(--accent);
}

.nav-dropdown-desktop:has(> a.active) > a[b-skpf3x5z34],
.nav-dropdown-desktop:has(> a.active) .nav-dropdown-toggle[b-skpf3x5z34] {
    background: transparent;
    color: var(--on-accent);
}

.nav-dropdown-toggle[b-skpf3x5z34] {
    align-self: stretch;
    min-width: 22px;
    padding: 0 var(--space-2) 0 var(--space-1);
    border: 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: transparent;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.nav-dropdown-desktop:hover .nav-dropdown-toggle[b-skpf3x5z34],
.nav-dropdown-toggle:focus-visible[b-skpf3x5z34] {
    color: var(--text);
}

.nav-dropdown-desktop:has(> a.active):hover .nav-dropdown-toggle[b-skpf3x5z34] {
    color: var(--on-accent);
}

.nav-dropdown:hover .dropdown-menu[b-skpf3x5z34],
.nav-dropdown:focus-within .dropdown-menu[b-skpf3x5z34],
.nav-dropdown-toggle[aria-expanded="true"] ~ .dropdown-menu[b-skpf3x5z34] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu[b-skpf3x5z34]  a {
    display: block;
    padding: var(--space-2) var(--space-2);
    border-radius: var(--radius-xs);
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--fs-md);
    font-weight: 600;
    white-space: nowrap;
}

.dropdown-menu[b-skpf3x5z34]  a:hover {
    color: var(--text);
    background: var(--surface-3);
}

.dropdown-menu[b-skpf3x5z34]  a.active {
    color: var(--accent-strong);
    background: transparent;
}

.auth-status[b-skpf3x5z34] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.auth-status form[b-skpf3x5z34] {
    margin: 0;
}

.user-name[b-skpf3x5z34] {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* Click-to-open account menu — <details>/<summary> gives native click-toggle
   disclosure with no interactivity/JS needed, unlike .nav-dropdown above
   (which is deliberately hover-based). */
.account-menu[b-skpf3x5z34] {
    position: relative;
}

.account-menu-trigger[b-skpf3x5z34] {
    display: flex;
    align-items: center;
    max-width: 100%;
    list-style: none;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--text-muted);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius);
    transition: color var(--dur-fast), background var(--dur-fast);
}

.account-menu-trigger[b-skpf3x5z34]::-webkit-details-marker {
    display: none;
}

.account-menu-trigger:hover[b-skpf3x5z34] {
    color: var(--accent-strong);
    background: var(--surface-2);
}

.account-menu-name[b-skpf3x5z34] {
    min-width: 0;
    max-width: clamp(12ch, 12vw, 28ch);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu-trigger[b-skpf3x5z34]::after {
    content: '\25BE';
    flex: none;
    margin-left: var(--space-1);
}

.account-menu-popup[b-skpf3x5z34] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: var(--space-1);
    min-width: 170px;
    padding: var(--space-1);
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-1) / 2);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);
}

.account-menu-popup a[b-skpf3x5z34] {
    display: block;
    padding: var(--space-2) var(--space-2);
    border-radius: var(--radius-xs);
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--fs-md);
    font-weight: 600;
}

.account-menu-popup a:hover[b-skpf3x5z34] {
    color: var(--text);
    background: var(--surface-3);
}

/* Segmented System/Light/Dark control (js/theme.js). The active segment is
   marked by <html data-theme-pref>, so this needs no per-render state. */
.theme-switch[b-skpf3x5z34] {
    display: flex;
    gap: calc(var(--space-1) / 2);
    margin: var(--space-1) 0;
    padding: calc(var(--space-1) / 2);
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
}

.theme-switch button[b-skpf3x5z34] {
    flex: 1;
    min-height: 0;
    height: 26px;
    padding: 0 var(--space-2);
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.theme-switch button:hover[b-skpf3x5z34] {
    color: var(--text);
}

:root[data-theme-pref="system"] .theme-switch [data-theme-choice="system"][b-skpf3x5z34],
:root[data-theme-pref="light"] .theme-switch [data-theme-choice="light"][b-skpf3x5z34],
:root[data-theme-pref="dark"] .theme-switch [data-theme-choice="dark"][b-skpf3x5z34] {
    background: var(--accent-soft);
    color: var(--accent);
}

.account-menu-popup form[b-skpf3x5z34] {
    margin: 0;
}

.account-menu-logout[b-skpf3x5z34] {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--critical);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-md);
    padding: var(--space-2) var(--space-2);
    border-radius: var(--radius-xs);
    cursor: pointer;
}

.account-menu-logout:hover[b-skpf3x5z34] {
    background: color-mix(in srgb, var(--critical) 12%, transparent);
}

.account-menu-bmac[b-skpf3x5z34] {
    display: block;
    margin-top: var(--space-1);
    padding: var(--space-2) var(--space-2) var(--space-2);
    border-top: 1px solid var(--border);
    text-align: center;
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--gold);
    border-radius: var(--radius-xs);
}

.account-menu-bmac:hover[b-skpf3x5z34] {
    background: color-mix(in srgb, var(--gold) 12%, transparent);
}

.account-menu-version[b-skpf3x5z34] {
    margin-top: var(--space-1);
    padding: var(--space-1) var(--space-2) calc(var(--space-1) / 2);
    border-top: 1px solid var(--border);
    font-size: var(--fs-xs);
    font-family: var(--font-mono);
    color: var(--text-muted);
    opacity: 0.7;
    text-align: center;
}

.app-main[b-skpf3x5z34] {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--space-5);
}

.app-footer[b-skpf3x5z34] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-4);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.app-footer a[b-skpf3x5z34] {
    color: var(--text-muted);
}

.app-footer a:hover[b-skpf3x5z34] {
    color: var(--accent-strong);
}

.app-footer-version[b-skpf3x5z34] {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
}
/* /Components/Layout/OrganizationModeToggle.razor.rz.scp.css */
.org-mode-toggle[b-jxkv82bf2v] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    user-select: none;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
}

.org-mode-form[b-jxkv82bf2v] {
    display: inline-flex;
    margin: 0;
}

.org-mode-label[b-jxkv82bf2v] {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color var(--dur-base);
}

.org-mode-label.active[b-jxkv82bf2v] {
    color: var(--accent);
}

.org-mode-switch[b-jxkv82bf2v] {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
    flex: 0 0 auto;
}

.org-mode-slider[b-jxkv82bf2v] {
    position: absolute;
    inset: 0;
    background: var(--surface-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    transition: background var(--dur-base);
}

.org-mode-slider[b-jxkv82bf2v]::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: transform var(--dur-base), background var(--dur-base);
}

.org-mode-switch.on .org-mode-slider[b-jxkv82bf2v] {
    background: var(--surface-2);
    border-color: var(--accent);
}

.org-mode-switch.on .org-mode-slider[b-jxkv82bf2v]::before {
    transform: translateX(16px);
    background: var(--accent);
}