/* /Components/Layout/AdminLayout.razor.rz.scp.css */
.admin-shell[b-dsk1x468za] {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* ── Top header ── */
.admin-header[b-dsk1x468za] {
    position: sticky;
    top: 0;
    z-index: 200;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--sp-5);
    background: var(--chrome-bg);
    border-bottom: var(--border-1) solid var(--chrome-border);
}

.brand[b-dsk1x468za] {
    color: var(--chrome-text-hi);
    font-size: var(--fs-13);
    letter-spacing: var(--tracking-extra);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.brand-logo[b-dsk1x468za] {
    height: 28px;
    width: auto;
}

.admin-tag[b-dsk1x468za] {
    font-size: var(--fs-10);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--gold);
    border: var(--border-1) solid var(--gold-border);
    border-radius: var(--radius-sm);
    padding: 3px var(--sp-2);
}

.header-right[b-dsk1x468za] {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    font-size: var(--fs-13);
    color: var(--chrome-text);
}

.exit-link[b-dsk1x468za] {
    background: var(--chrome-tile-bg);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--sp-2) var(--sp-3);
    cursor: pointer;
    color: var(--chrome-text-hi);
    font-size: var(--fs-12);
    text-decoration: none;
    transition: background var(--t-fast) var(--ease);
}

.exit-link:hover[b-dsk1x468za] {
    background: var(--chrome-tile-hover-bg);
    text-decoration: none;
}

/* ── Layout ── */
.admin-page[b-dsk1x468za] {
    flex: 1;
    display: flex;
    min-height: calc(100vh - 52px);
}

/* Sidebar chrome lives in AdminNav.razor.css (it owns the nav + the vertical-layout drawer). */

/* ── Main content ── */
.admin-main[b-dsk1x468za] {
    flex: 1;
    min-width: 0;
    padding: var(--sp-7) var(--sp-9) var(--sp-10);
    max-width: 1080px;
}

@media (max-width: 900px) {
    .admin-main[b-dsk1x468za] {
        padding: var(--sp-5) var(--sp-5) var(--sp-9);
    }
}

@media (max-width: 720px) {
    /* Reserve room at the header's left edge for the fixed hamburger (AdminNav.razor.css). */
    .admin-header[b-dsk1x468za] {
        padding-left: 52px;
    }
}
/* /Components/Layout/AdminNav.razor.rz.scp.css */
/* Admin navigation. Desktop: a sticky in-flow sidebar column. Vertical/narrow layouts (≤720px):
   a hamburger in the header slides this same sidebar in over a scrim.

   Note: the open/close is a Blazor re-render toggling the `open` class, so the drawer is shown
   without a CSS transition on transform — transitions on re-render-driven properties freeze at the
   start value (see memory: blazor-transition-stuck), which would leave the drawer stuck hidden. */

/* ── Sidebar (desktop column) ── */
.admin-sidebar[b-i0mqmg16t2] {
    width: 220px;
    flex-shrink: 0;
    background: var(--chrome-bg);
    border-right: var(--border-1) solid var(--chrome-border);
    position: sticky;
    top: 52px;
    height: calc(100vh - 52px);
    display: flex;
    flex-direction: column;
    padding: var(--sp-4) 0;
}

.nav-section[b-i0mqmg16t2] {
    margin-bottom: var(--sp-5);
}

.nav-label[b-i0mqmg16t2] {
    font-size: var(--fs-10);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--chrome-label);
    padding: 0 var(--sp-5);
    margin-bottom: var(--sp-2);
}

/* ::deep so these reach the <a> that NavLink renders — a child component whose DOM does not
   receive this component's scoped-CSS attribute.

   Each row is a full-width, touch-friendly (52px) tap target. The icon sits inside its own
   rounded tile, which gives a button-like affordance at rest — not just a hover tint or a thin
   left-accent border (design-notes.md "Navigation"). */
.admin-sidebar[b-i0mqmg16t2]  .nav-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-5);
    font-size: var(--fs-13);
    color: var(--chrome-text);
    text-decoration: none;
    cursor: pointer;
    min-height: 52px;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.admin-sidebar[b-i0mqmg16t2]  .nav-item:hover {
    background: var(--chrome-hover-bg);
    color: var(--chrome-text-hi);
    text-decoration: none;
}

.admin-sidebar[b-i0mqmg16t2]  .nav-item:hover .nav-icon-tile {
    background: var(--chrome-tile-hover-bg);
}

.admin-sidebar[b-i0mqmg16t2]  .nav-item.active {
    background: var(--chrome-hover-bg);
    color: var(--chrome-text-hi);
}

.admin-sidebar[b-i0mqmg16t2]  .nav-item.active .nav-icon-tile {
    background: var(--blue);
}

.admin-sidebar[b-i0mqmg16t2]  .nav-item.active .nav-icon {
    opacity: 1;
}

.admin-sidebar[b-i0mqmg16t2]  .nav-item.disabled {
    color: var(--chrome-label);
    cursor: not-allowed;
}

.admin-sidebar[b-i0mqmg16t2]  .nav-item.disabled:hover {
    background: none;
    color: var(--chrome-label);
}

.admin-sidebar[b-i0mqmg16t2]  .nav-item.disabled:hover .nav-icon-tile {
    background: var(--chrome-tile-bg);
}

.nav-icon-tile[b-i0mqmg16t2] {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    background: var(--chrome-tile-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--t-fast) var(--ease);
}

.nav-icon[b-i0mqmg16t2] {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    opacity: 0.9;
}

/* Pushes the Dashboard/God Mode controls to the bottom of the sidebar. */
.sidebar-spacer[b-i0mqmg16t2] {
    flex: 1 1 auto;
}

/* Pinned above the God Mode button; matches its shape/spacing but in neutral chrome colors. */
.admin-sidebar[b-i0mqmg16t2]  .dashboard-top {
    margin: 0 var(--sp-4) var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: transparent;
    border: var(--border-1) solid var(--chrome-border);
    color: var(--chrome-text);
    border-radius: var(--radius-lg);
    font-size: var(--fs-12);
    letter-spacing: var(--tracking-label);
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.admin-sidebar[b-i0mqmg16t2]  .dashboard-top:hover {
    background: var(--chrome-hover-bg);
    color: var(--chrome-text-hi);
    text-decoration: none;
}

.admin-sidebar[b-i0mqmg16t2]  .dashboard-top svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ── Hamburger + scrim: inert on desktop, active in the drawer layout below ── */
.nav-hamburger[b-i0mqmg16t2] {
    display: none;
}

.nav-scrim[b-i0mqmg16t2] {
    display: none;
}

/* ── Vertical layout: sidebar becomes an off-canvas drawer opened by the hamburger ── */
@media (max-width: 720px) {
    .nav-hamburger[b-i0mqmg16t2] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 52px;
        height: 52px;
        padding: 0;
        background: none;
        border: none;
        color: var(--chrome-text-hi);
        cursor: pointer;
        z-index: 210;
    }

    .nav-hamburger svg[b-i0mqmg16t2] {
        width: 22px;
        height: 22px;
    }

    .admin-sidebar[b-i0mqmg16t2] {
        position: fixed;
        top: 52px;
        left: 0;
        bottom: 0;
        height: auto;
        width: 240px;
        max-width: 82vw;
        padding-top: var(--sp-4);
        transform: translateX(-100%);
        overflow-y: auto;
        z-index: 205;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.35);
    }

    .admin-sidebar.open[b-i0mqmg16t2] {
        transform: none;
    }

    .nav-scrim.open[b-i0mqmg16t2] {
        display: block;
        position: fixed;
        inset: 52px 0 0 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 200;
    }
}
/* /Components/Layout/AuditLogModal.razor.rz.scp.css */
/* Audit Log modal — shares the modal chrome established in ScoreDetailsModal,
   expressed entirely through design tokens. */

.modal-overlay[b-jfwtqog2ti] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 500;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--sp-6);
    overflow-y: auto;
}

.modal[b-jfwtqog2ti] {
    background: var(--surface);
    width: 100%;
    max-width: 640px;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    margin: auto;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 48px);
}

.modal-header[b-jfwtqog2ti] {
    padding: var(--sp-5) var(--sp-7) var(--sp-4);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-shrink: 0;
}

.modal-eyebrow[b-jfwtqog2ti] {
    font-size: var(--fs-11);
    letter-spacing: var(--tracking-extra);
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: var(--sp-1);
}

.modal-title[b-jfwtqog2ti] {
    font-size: var(--fs-26);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
    line-height: 1;
}

.modal-close[b-jfwtqog2ti] {
    width: 36px;
    height: 36px;
    background: var(--bg);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-lg);
    font-size: var(--fs-22);
    color: var(--ink-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
    line-height: 1;
}

.modal-close:hover[b-jfwtqog2ti] {
    background: var(--surface);
    border-color: var(--ink-muted);
    color: var(--ink);
}

.modal-body[b-jfwtqog2ti] {
    padding: var(--sp-6) var(--sp-7) var(--sp-7);
    overflow-y: auto;
    flex: 1;
}

.placeholder-note[b-jfwtqog2ti] {
    font-size: var(--fs-15);
    color: var(--ink-muted);
    line-height: 1.6;
    margin: 0;
}

/* ── Audit log ── */
.audit-intro[b-jfwtqog2ti] {
    font-size: var(--fs-13);
    color: var(--ink-muted);
    margin: 0 0 var(--sp-4);
}

.audit-list[b-jfwtqog2ti] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.audit-row[b-jfwtqog2ti] {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: baseline;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-top: var(--border-1) solid var(--border);
    font-size: var(--fs-14);
    color: var(--ink);
}

.audit-row:first-child[b-jfwtqog2ti] {
    border-top: none;
}

/* God Mode rows carry a left accent so admin changes stand out in the player's feed. */
.audit-row.godmode[b-jfwtqog2ti] {
    border-left: 2px solid var(--crimson);
    padding-left: var(--sp-3);
    margin-left: calc(-1 * var(--sp-3));
}

.audit-when[b-jfwtqog2ti] {
    display: flex;
    flex-direction: column;
    min-width: 52px;
    line-height: 1.2;
}

.audit-date[b-jfwtqog2ti] {
    font-size: var(--fs-12);
    color: var(--ink-muted);
}

.audit-time[b-jfwtqog2ti] {
    font-size: var(--fs-10);
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

.audit-cat[b-jfwtqog2ti] {
    font-size: var(--fs-10);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    padding: 2px var(--sp-2);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    align-self: center;
}

.cat-admin[b-jfwtqog2ti]   { color: var(--blue);      background: var(--blue-bg); }
.cat-godmode[b-jfwtqog2ti] { color: var(--crimson);   background: var(--crimson-bg); }
.cat-pick[b-jfwtqog2ti]    { color: var(--emerald);   background: var(--emerald-bg); }
.cat-pickas[b-jfwtqog2ti]  { color: var(--purple);    background: var(--purple-bg); }
.cat-notif[b-jfwtqog2ti]   { color: var(--gold);      background: var(--gold-bg); }
.cat-signin[b-jfwtqog2ti]  { color: var(--ink-muted); background: var(--bg); }

.audit-main[b-jfwtqog2ti] {
    line-height: 1.4;
    min-width: 0;
}

.audit-actor[b-jfwtqog2ti] {
    color: var(--ink);
    margin-right: var(--sp-1);
}

.audit-note[b-jfwtqog2ti] {
    color: var(--ink-muted);
}

@media (max-width: 640px) {
    .modal-overlay[b-jfwtqog2ti] {
        padding: var(--sp-3);
    }

    .modal-header[b-jfwtqog2ti] {
        padding-left: var(--sp-5);
        padding-right: var(--sp-5);
    }

    .modal-body[b-jfwtqog2ti] {
        padding: var(--sp-5) var(--sp-5) var(--sp-6);
    }

    .modal-title[b-jfwtqog2ti] {
        font-size: var(--fs-22);
    }
}
/* /Components/Layout/AuthLayout.razor.rz.scp.css */
.auth-shell[b-ha14qxc8qd] {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: var(--sp-6);
}
/* /Components/Layout/DashboardLayout.razor.rz.scp.css */
/* Full-bleed dark canvas for the dashboard board; the page paints the rest. */
.dashboard-shell[b-aq7ytsjkw9] {
    min-height: 100vh;
    background: #0a100e;
}
/* /Components/Layout/GodModeBanner.razor.rz.scp.css */
/* Persistent crimson banner, sticky below the admin header while a session is open. */
.godmode-banner[b-ne9ewie913] {
    position: sticky;
    top: 52px;
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    background: var(--crimson);
    color: #fff;
    padding: var(--sp-3) var(--sp-5);
    font-size: var(--fs-12);
    letter-spacing: var(--tracking-label);
    border-radius: var(--radius-lg);
    margin-bottom: var(--sp-6);
    box-shadow: 0 6px 20px rgba(190, 18, 60, 0.25);
}

.godmode-banner-left[b-ne9ewie913] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.godmode-banner svg[b-ne9ewie913] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.godmode-disable-link[b-ne9ewie913] {
    color: #fff;
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
    font-size: var(--fs-12);
    flex-shrink: 0;
}
/* /Components/Layout/GodModeControls.razor.rz.scp.css */
/* Sidebar toggle, pinned to the bottom (a spacer in the layout pushes it down). A subtle
   crimson outline on the dark chrome while off; fills solid crimson while on. */
.godmode-top[b-1zra0c38x6] {
    margin: 0 var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: transparent;
    border: var(--border-1) solid var(--crimson);
    color: var(--crimson-border);
    border-radius: var(--radius-lg);
    font-size: var(--fs-12);
    letter-spacing: var(--tracking-label);
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    /* Only the border animates; background/color are a discrete on/off state and must apply
       instantly (a mid-flight transition can get stuck across a Blazor re-render). */
    transition: border-color var(--t-fast) var(--ease);
}

.godmode-top:hover[b-1zra0c38x6] {
    background: var(--chrome-hover-bg);
    border-color: var(--crimson-border);
    color: var(--chrome-text-hi);
}

.godmode-top.on[b-1zra0c38x6] {
    background: var(--crimson);
    border-color: var(--crimson);
    color: var(--chrome-text-hi);
}

.godmode-top.on:hover[b-1zra0c38x6] {
    filter: brightness(0.92);
}

.godmode-top svg[b-1zra0c38x6] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ── Enable-confirmation modal ── */
.modal-overlay[b-1zra0c38x6] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 500;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--sp-6);
}

.modal[b-1zra0c38x6] {
    background: var(--surface);
    width: 100%;
    max-width: 480px;
    border-radius: var(--radius-2xl);
    padding: var(--sp-6);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    margin: auto;
}

.modal-title[b-1zra0c38x6] {
    font-size: var(--fs-18);
    color: var(--ink);
    letter-spacing: var(--tracking-snug);
    margin-bottom: var(--sp-2);
}

.modal-title.crimson[b-1zra0c38x6] {
    color: var(--crimson);
}

.modal-sub[b-1zra0c38x6] {
    font-size: var(--fs-13);
    color: var(--ink-muted);
    margin-bottom: var(--sp-4);
    line-height: 1.5;
}

.godmode-warning[b-1zra0c38x6] {
    font-size: var(--fs-13);
    color: var(--ink);
    background: var(--crimson-bg);
    border: var(--border-1) solid var(--crimson-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-3) var(--sp-4);
    line-height: 1.5;
}

.modal-actions[b-1zra0c38x6] {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
}

.primary-btn[b-1zra0c38x6] {
    background: var(--ink);
    color: var(--surface);
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-13);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease);
}

.primary-btn.crimson-btn[b-1zra0c38x6] {
    background: var(--crimson);
}

.primary-btn.crimson-btn:hover[b-1zra0c38x6] {
    background: #a30e36;
}

.btn-secondary[b-1zra0c38x6] {
    background: none;
    border: var(--border-1) solid var(--border-strong);
    color: var(--ink-muted);
    border-radius: var(--radius-lg);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-13);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.btn-secondary:hover[b-1zra0c38x6] {
    background: var(--bg);
    color: var(--ink);
}
/* /Components/Layout/NotificationSettingsModal.razor.rz.scp.css */
/* Player notification settings modal — shares the modal chrome established in the Rules & Audit
   panel, expressed through design tokens. */

.modal-overlay[b-z6wni5cxdb] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 500;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--sp-6);
    overflow-y: auto;
}

.modal[b-z6wni5cxdb] {
    background: var(--surface);
    width: 100%;
    max-width: 560px;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    margin: auto;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 48px);
}

.modal-header[b-z6wni5cxdb] {
    padding: var(--sp-5) var(--sp-7) var(--sp-4);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-shrink: 0;
    border-bottom: var(--border-1) solid var(--border);
}

.modal-eyebrow[b-z6wni5cxdb] {
    font-size: var(--fs-11);
    letter-spacing: var(--tracking-extra);
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: var(--sp-1);
}

.modal-title[b-z6wni5cxdb] {
    font-size: var(--fs-26);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
    line-height: 1;
}

.modal-close[b-z6wni5cxdb] {
    width: 36px;
    height: 36px;
    background: var(--bg);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-lg);
    font-size: var(--fs-22);
    color: var(--ink-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
    line-height: 1;
}

.modal-close:hover[b-z6wni5cxdb] {
    background: var(--surface);
    border-color: var(--ink-muted);
    color: var(--ink);
}

.modal-body[b-z6wni5cxdb] {
    padding: var(--sp-6) var(--sp-7) var(--sp-7);
    overflow-y: auto;
    flex: 1;
}

.ns-intro[b-z6wni5cxdb] {
    font-size: var(--fs-14);
    color: var(--ink-muted);
    line-height: 1.5;
    margin: 0 0 var(--sp-4);
}

.ns-hint[b-z6wni5cxdb] {
    font-size: var(--fs-13);
    color: var(--gold);
    background: var(--gold-bg);
    border: var(--border-1) solid var(--gold-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-2) var(--sp-3);
    margin: 0 0 var(--sp-4);
}

.ns-note[b-z6wni5cxdb] {
    font-size: var(--fs-14);
    color: var(--ink-muted);
    margin: 0;
}

.ns-list[b-z6wni5cxdb] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ns-row[b-z6wni5cxdb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4) 0;
    border-top: var(--border-1) solid var(--border);
}

.ns-row:first-child[b-z6wni5cxdb] {
    border-top: none;
}

.ns-meta[b-z6wni5cxdb] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    min-width: 0;
}

.ns-name[b-z6wni5cxdb] {
    font-size: var(--fs-15);
    color: var(--ink);
}

.ns-desc[b-z6wni5cxdb] {
    font-size: var(--fs-12);
    color: var(--ink-muted);
    line-height: 1.4;
}

.ns-toggles[b-z6wni5cxdb] {
    display: flex;
    gap: var(--sp-3);
    flex-shrink: 0;
}

.ns-toggle[b-z6wni5cxdb] {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-13);
    color: var(--ink);
    cursor: pointer;
    white-space: nowrap;
}

.ns-toggle.off[b-z6wni5cxdb] {
    color: var(--ink-soft);
    cursor: default;
}

@media (max-width: 540px) {
    .modal-overlay[b-z6wni5cxdb] {
        padding: var(--sp-3);
    }

    .modal-header[b-z6wni5cxdb] {
        padding-left: var(--sp-5);
        padding-right: var(--sp-5);
    }

    .modal-body[b-z6wni5cxdb] {
        padding: var(--sp-5) var(--sp-5) var(--sp-6);
    }

    .modal-title[b-z6wni5cxdb] {
        font-size: var(--fs-22);
    }

    .ns-row[b-z6wni5cxdb] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-2);
    }
}
/* /Components/Layout/PlayerFooter.razor.rz.scp.css */
/* Player footer — dark chrome bar, ported from mockups/picks-mockup.html.
   In-flow at the bottom of the PlayerLayout flex column (not fixed) so the page
   keeps a single scrollbar (design-notes §7). */

.footer[b-td7r86619p] {
    background: var(--chrome-bg);
    border-top: var(--border-1) solid var(--chrome-border);
    font-size: var(--fs-11);
    color: var(--chrome-text);
}

.footer-inner[b-td7r86619p] {
    max-width: var(--player-max);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-6);
}

.footer-copy[b-td7r86619p] {
    color: var(--chrome-text-hi);
    letter-spacing: 0.01em;
}

.footer-links[b-td7r86619p] {
    display: flex;
    gap: var(--sp-5);
}

.footer-links button[b-td7r86619p] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    color: var(--chrome-link);
    font-size: var(--fs-10);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    transition: color var(--t-fast) var(--ease);
}

.footer-links button:hover[b-td7r86619p] {
    color: var(--chrome-text-hi);
}
/* /Components/Layout/PlayerLayout.razor.rz.scp.css */
.player-shell[b-grht8th06y] {
    /* Content lock: the picks column (880) + sidebar (280). Header, footer, and the picks
       content all cap at this width and center once the viewport is wider, while the header
       and footer chrome bars still stretch edge-to-edge. Inherited by the footer + picks page. */
    --player-max: 1160px;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.player-header[b-grht8th06y] {
    position: sticky;
    top: 0;
    z-index: 200;
    height: 52px;
    background: var(--chrome-bg);
    border-bottom: var(--border-1) solid var(--chrome-border);
}

.header-inner[b-grht8th06y] {
    height: 100%;
    max-width: var(--player-max);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--sp-6);
}

.header-left[b-grht8th06y] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
}

.brand[b-grht8th06y] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--chrome-text-hi);
    font-size: var(--fs-13);
    letter-spacing: var(--tracking-extra);
    text-transform: uppercase;
}

.brand-logo[b-grht8th06y] {
    height: 28px;
    width: auto;
}

.brand:hover[b-grht8th06y] {
    text-decoration: none;
}

/* Season context beside the title. Quieter than the brand — the same uppercase eyebrow
   treatment the page body uses, held apart by a hairline rather than a pill. */
.season-tag[b-grht8th06y] {
    padding-left: var(--sp-3);
    border-left: var(--border-1) solid var(--chrome-border);
    color: var(--chrome-text);
    font-size: var(--fs-11);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-right[b-grht8th06y] {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    font-size: var(--fs-13);
    color: var(--chrome-text);
}

.admin-link[b-grht8th06y] {
    background: var(--chrome-tile-bg);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--sp-2) var(--sp-3);
    cursor: pointer;
    color: var(--chrome-text-hi);
    font-size: var(--fs-12);
    text-decoration: none;
    transition: background var(--t-fast) var(--ease);
}

.admin-link:hover[b-grht8th06y] {
    background: var(--chrome-tile-hover-bg);
    text-decoration: none;
}

.player-main[b-grht8th06y] {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
}
/* /Components/Layout/PlayerMenu.razor.rz.scp.css */
.player-menu[b-a0kmxue1qm] {
    position: relative;
}

.player-trigger[b-a0kmxue1qm] {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    background: none;
    border: none;
    padding: var(--sp-1) var(--sp-2);
    margin: calc(-1 * var(--sp-1)) calc(-1 * var(--sp-2));
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: inherit;
    color: var(--chrome-text-hi);
    font-size: var(--fs-13);
    transition: background var(--t-fast) var(--ease);
}

.player-trigger:hover[b-a0kmxue1qm],
.player-trigger.open[b-a0kmxue1qm] {
    background: var(--chrome-hover-bg);
}

.player-caret[b-a0kmxue1qm] {
    width: 14px;
    height: 14px;
    color: var(--chrome-text);
    transition: transform var(--t-fast) var(--ease);
}

.player-trigger.open .player-caret[b-a0kmxue1qm] {
    transform: rotate(180deg);
}

/* Transparent full-viewport catcher — closes the menu on an outside click, same technique
   used by the app's modal overlays but without the dim/blur since this is a lightweight popover. */
.menu-scrim[b-a0kmxue1qm] {
    position: fixed;
    inset: 0;
    z-index: 250;
}

.menu-panel[b-a0kmxue1qm] {
    position: absolute;
    top: calc(100% + var(--sp-2));
    right: 0;
    z-index: 251;
    min-width: 180px;
    background: var(--surface);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
    padding: var(--sp-2);
    display: flex;
    flex-direction: column;
}

.menu-item[b-a0kmxue1qm] {
    background: none;
    border: none;
    text-align: left;
    padding: var(--sp-3) var(--sp-3);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--fs-14);
    color: var(--ink);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease);
}

.menu-item:hover[b-a0kmxue1qm] {
    background: var(--bg);
}

.menu-item-form[b-a0kmxue1qm] {
    border-top: var(--border-1) solid var(--border);
    margin-top: var(--sp-1);
    padding-top: var(--sp-1);
}

.menu-item-form .menu-item[b-a0kmxue1qm] {
    width: 100%;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-iezupluw5q],
.components-reconnect-repeated-attempt-visible[b-iezupluw5q],
.components-reconnect-failed-visible[b-iezupluw5q],
.components-pause-visible[b-iezupluw5q],
.components-resume-failed-visible[b-iezupluw5q],
.components-rejoining-animation[b-iezupluw5q] {
    display: none;
}

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


#components-reconnect-modal[b-iezupluw5q] {
    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-iezupluw5q 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-iezupluw5q {
    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/Layout/RulesModal.razor.rz.scp.css */
/* Rules modal — shares the modal chrome established in ScoreDetailsModal,
   expressed entirely through design tokens. */

.modal-overlay[b-ifkn3iyin8] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 500;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--sp-6);
    overflow-y: auto;
}

.modal[b-ifkn3iyin8] {
    background: var(--surface);
    width: 100%;
    max-width: 640px;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    margin: auto;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 48px);
}

.modal-header[b-ifkn3iyin8] {
    padding: var(--sp-5) var(--sp-7) var(--sp-4);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-shrink: 0;
}

.modal-eyebrow[b-ifkn3iyin8] {
    font-size: var(--fs-11);
    letter-spacing: var(--tracking-extra);
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: var(--sp-1);
}

.modal-title[b-ifkn3iyin8] {
    font-size: var(--fs-26);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
    line-height: 1;
}

.modal-close[b-ifkn3iyin8] {
    width: 36px;
    height: 36px;
    background: var(--bg);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-lg);
    font-size: var(--fs-22);
    color: var(--ink-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
    line-height: 1;
}

.modal-close:hover[b-ifkn3iyin8] {
    background: var(--surface);
    border-color: var(--ink-muted);
    color: var(--ink);
}

.modal-body[b-ifkn3iyin8] {
    padding: var(--sp-6) var(--sp-7) var(--sp-7);
    overflow-y: auto;
    flex: 1;
}

/* ── Rules content ── */
.rules-section[b-ifkn3iyin8] {
    margin-bottom: var(--sp-6);
}

.rules-section:last-child[b-ifkn3iyin8] {
    margin-bottom: 0;
}

.rules-heading[b-ifkn3iyin8] {
    font-size: var(--fs-13);
    letter-spacing: var(--tracking-extra);
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 var(--sp-3);
}

.rules-list[b-ifkn3iyin8] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.rules-list li[b-ifkn3iyin8] {
    font-size: var(--fs-15);
    line-height: 1.5;
    color: var(--ink);
    padding-left: var(--sp-4);
    position: relative;
}

.rules-list li[b-ifkn3iyin8]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ink-faint);
}

.rules-list em[b-ifkn3iyin8] {
    font-style: normal;
    color: var(--blue);
}

.pts[b-ifkn3iyin8] {
    color: var(--emerald);
    font-variant-numeric: tabular-nums;
}

.rules-note[b-ifkn3iyin8] {
    margin: var(--sp-3) 0 0;
    font-size: var(--fs-13);
    color: var(--ink-muted);
    line-height: 1.5;
}

/* ── Payout summary (buy-in / players / pot) ── */
.pot-summary[b-ifkn3iyin8] {
    display: flex;
    gap: var(--sp-2);
    margin: var(--sp-4) 0 var(--sp-4);
}

.pot-stat[b-ifkn3iyin8] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-lg);
}

.pot-value[b-ifkn3iyin8] {
    font-size: var(--fs-18);
    color: var(--ink);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.pot-label[b-ifkn3iyin8] {
    font-size: var(--fs-11);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* ── Prize list ── */
.prize-list[b-ifkn3iyin8] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.prize-row[b-ifkn3iyin8] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-3) 0;
    border-top: var(--border-1) solid var(--border);
    font-size: var(--fs-15);
    color: var(--ink);
}

.prize-row:first-child[b-ifkn3iyin8] {
    border-top: none;
}

.prize-amount[b-ifkn3iyin8] {
    color: var(--emerald);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Any rendered currency amount. General Sans draws "$" with a broken bar, so money opts out to
   the currency stack — see tokens.css. Applied to the amount rather than its container so the
   plain player count next to it keeps the page typeface. */
.money[b-ifkn3iyin8] {
    font-family: var(--font-currency);
}

@media (max-width: 640px) {
    .modal-overlay[b-ifkn3iyin8] {
        padding: var(--sp-3);
    }

    .modal-header[b-ifkn3iyin8] {
        padding-left: var(--sp-5);
        padding-right: var(--sp-5);
    }

    .modal-body[b-ifkn3iyin8] {
        padding: var(--sp-5) var(--sp-5) var(--sp-6);
    }

    .modal-title[b-ifkn3iyin8] {
        font-size: var(--fs-22);
    }
}
/* /Components/Pages/Admin/AdminAnalytics.razor.rz.scp.css */
/* Admin User Analytics screen. Shares the page chrome with the other admin screens; the heatmap
   reuses the neutral ink ramp from the Score Details heatmap so no new colors are introduced. */

/* ── God Mode frame (matches the other admin screens) ── */
.godmode-frame[b-pyc2rczb21] {
    margin: calc(-1 * var(--sp-3));
    padding: var(--sp-3);
    border-radius: var(--radius-2xl);
    box-shadow: inset 0 0 0 3px transparent;
    transition: box-shadow var(--t-med) var(--ease);
}

.godmode-frame.on[b-pyc2rczb21] {
    box-shadow: inset 0 0 0 3px var(--crimson);
}

/* ── Page header ── */
.page-header[b-pyc2rczb21] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: var(--sp-5);
    flex-wrap: wrap;
    gap: var(--sp-3);
}

.page-eyebrow[b-pyc2rczb21] {
    font-size: var(--fs-11);
    letter-spacing: var(--tracking-extra);
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: var(--sp-2);
}

.page-title[b-pyc2rczb21] {
    font-size: var(--fs-26);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
}

.page-sub[b-pyc2rczb21] {
    font-size: var(--fs-13);
    color: var(--ink-muted);
    margin-top: var(--sp-2);
    max-width: 640px;
    line-height: 1.5;
}

.header-actions[b-pyc2rczb21] {
    display: flex;
    gap: var(--sp-2);
}

.filter-select[b-pyc2rczb21] {
    font-family: inherit;
    font-size: var(--fs-13);
    color: var(--ink);
    background: var(--surface);
    border: var(--border-1) solid var(--border-strong);
    border-radius: var(--radius-lg);
    padding: var(--sp-2) var(--sp-3);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sp-3) center;
    padding-right: var(--sp-7);
}

.filter-select:focus[b-pyc2rczb21] {
    outline: none;
    border-color: var(--blue);
}

.result-summary[b-pyc2rczb21] {
    font-size: var(--fs-12);
    color: var(--ink-soft);
    margin-bottom: var(--sp-3);
    letter-spacing: var(--tracking-label);
    font-variant-numeric: tabular-nums;
}

.empty-state[b-pyc2rczb21] {
    padding: var(--sp-10) var(--sp-5);
    text-align: center;
    color: var(--ink-soft);
    font-size: var(--fs-13);
    line-height: 1.5;
}

/* ── Cards & layout ── */
.card[b-pyc2rczb21] {
    background: var(--surface);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-2xl);
    padding: var(--sp-5);
}

.analytics-grid[b-pyc2rczb21] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
}

.heatmap-card[b-pyc2rczb21] {
    grid-column: 1 / -1;
}

.card-head[b-pyc2rczb21] {
    margin-bottom: var(--sp-4);
}

.card-title[b-pyc2rczb21] {
    font-size: var(--fs-16);
    color: var(--ink);
}

.card-sub[b-pyc2rczb21] {
    font-size: var(--fs-12);
    color: var(--ink-soft);
    margin-top: 2px;
}

.mini-empty[b-pyc2rczb21] {
    font-size: var(--fs-12);
    color: var(--ink-soft);
    line-height: 1.6;
}

.mini-empty code[b-pyc2rczb21] {
    font-family: var(--font-mono);
    font-size: var(--fs-11);
    background: var(--bg);
    padding: 1px var(--sp-1);
    border-radius: var(--radius-xs);
    border: var(--border-1) solid var(--border);
}

/* ── Bars (devices / OS) ── */
.bar-list[b-pyc2rczb21] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.bar-row[b-pyc2rczb21] {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: var(--sp-3);
    align-items: center;
}

.bar-label[b-pyc2rczb21] {
    font-size: var(--fs-13);
    color: var(--ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bar-track[b-pyc2rczb21] {
    height: 8px;
    background: var(--bg);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.bar-fill[b-pyc2rczb21] {
    height: 100%;
    background: var(--ink-muted);
    border-radius: var(--radius-pill);
    transition: width var(--t-med) var(--ease);
}

.bar-value[b-pyc2rczb21] {
    font-size: var(--fs-12);
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Heatmap ── */
.heat[b-pyc2rczb21] {
    display: grid;
    grid-template-columns: 34px repeat(8, minmax(0, 1fr));
    gap: 3px;
    align-items: center;
    min-width: 420px;
}

.heatmap-card[b-pyc2rczb21] {
    overflow-x: auto; /* wide grid scrolls on its own axis; never pushes the page sideways */
}

.heat-corner[b-pyc2rczb21] {
    height: 1px;
}

.heat-col-label[b-pyc2rczb21] {
    font-size: var(--fs-10);
    color: var(--ink-soft);
    text-align: center;
    letter-spacing: var(--tracking-label);
}

.heat-row-label[b-pyc2rczb21] {
    font-size: var(--fs-11);
    color: var(--ink-soft);
    text-align: right;
    padding-right: var(--sp-1);
}

.heat-cell[b-pyc2rczb21] {
    height: 22px;
    border-radius: var(--radius-xs);
}

.heat-l0[b-pyc2rczb21] { background: var(--bg); }
.heat-l1[b-pyc2rczb21] { background: var(--border); }
.heat-l2[b-pyc2rczb21] { background: var(--ink-faint); }
.heat-l3[b-pyc2rczb21] { background: var(--ink-soft); }
.heat-l4[b-pyc2rczb21] { background: var(--ink-muted); }
.heat-l5[b-pyc2rczb21] { background: var(--ink); }

/* ── Regions ── */
.region-list[b-pyc2rczb21] {
    display: flex;
    flex-direction: column;
}

.region-row[b-pyc2rczb21] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
    border-bottom: var(--border-1) solid var(--border);
}

.region-row:last-child[b-pyc2rczb21] {
    border-bottom: none;
}

.region-name[b-pyc2rczb21] {
    font-size: var(--fs-13);
    color: var(--ink);
}

.region-count[b-pyc2rczb21] {
    font-size: var(--fs-12);
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
    background: var(--bg);
    padding: 1px var(--sp-2);
    border-radius: var(--radius-pill);
    min-width: 26px;
    text-align: center;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .analytics-grid[b-pyc2rczb21] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Admin/AdminAudit.razor.rz.scp.css */
/* Admin Audit log screen — ported from mockups/admin-audit-mockup.html onto tokens. */

/* ── God Mode frame (matches the other admin screens) ── */
.godmode-frame[b-g5nrol0byq] {
    margin: calc(-1 * var(--sp-3));
    padding: var(--sp-3);
    border-radius: var(--radius-2xl);
    box-shadow: inset 0 0 0 3px transparent;
    transition: box-shadow var(--t-med) var(--ease);
}

.godmode-frame.on[b-g5nrol0byq] {
    box-shadow: inset 0 0 0 3px var(--crimson);
}

/* ── Page header ── */
.page-header[b-g5nrol0byq] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: var(--sp-5);
    flex-wrap: wrap;
    gap: var(--sp-3);
}

.page-eyebrow[b-g5nrol0byq] {
    font-size: var(--fs-11);
    letter-spacing: var(--tracking-extra);
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: var(--sp-2);
}

.page-title[b-g5nrol0byq] {
    font-size: var(--fs-26);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
}

.page-sub[b-g5nrol0byq] {
    font-size: var(--fs-13);
    color: var(--ink-muted);
    margin-top: var(--sp-2);
    max-width: 640px;
    line-height: 1.5;
}

.header-actions[b-g5nrol0byq] {
    display: flex;
    gap: var(--sp-2);
}

.btn-secondary[b-g5nrol0byq] {
    background: var(--surface);
    border: var(--border-1) solid var(--border-strong);
    color: var(--ink-muted);
    border-radius: var(--radius-lg);
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-13);
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.btn-secondary:hover:not(:disabled)[b-g5nrol0byq] {
    background: var(--bg);
    color: var(--ink);
    border-color: var(--ink-muted);
}

.btn-secondary:disabled[b-g5nrol0byq] {
    opacity: 0.6;
    cursor: progress;
}

.btn-secondary svg[b-g5nrol0byq] {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

/* ── Filter bar ── */
.filter-bar[b-g5nrol0byq] {
    display: grid;
    grid-template-columns: 1fr 180px 170px 190px;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.filter-input[b-g5nrol0byq],
.filter-select[b-g5nrol0byq] {
    width: 100%;
    font-family: inherit;
    font-size: var(--fs-13);
    color: var(--ink);
    background: var(--surface);
    border: var(--border-1) solid var(--border-strong);
    border-radius: var(--radius-lg);
    padding: var(--sp-2) var(--sp-3);
}

.filter-input[b-g5nrol0byq]::placeholder {
    color: var(--ink-soft);
}

.filter-input:focus[b-g5nrol0byq],
.filter-select:focus[b-g5nrol0byq] {
    outline: none;
    border-color: var(--blue);
}

.filter-select[b-g5nrol0byq] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sp-3) center;
    padding-right: var(--sp-7);
}

/* ── Quick filter chips ── */
.quick-filters[b-g5nrol0byq] {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-bottom: var(--sp-4);
}

.chip[b-g5nrol0byq] {
    font-size: var(--fs-11);
    letter-spacing: var(--tracking-label);
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-pill);
    background: var(--surface);
    border: var(--border-1) solid var(--border-strong);
    color: var(--ink-muted);
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.chip:hover[b-g5nrol0byq] {
    background: var(--bg);
    color: var(--ink);
}

.chip.active[b-g5nrol0byq] {
    background: var(--ink);
    color: var(--surface);
    border-color: var(--ink);
}

.chip-count[b-g5nrol0byq] {
    font-size: var(--fs-10);
    padding: 1px var(--sp-2);
    border-radius: var(--radius-pill);
    background: rgba(15, 23, 42, 0.06);
    color: inherit;
    font-variant-numeric: tabular-nums;
}

.chip.active .chip-count[b-g5nrol0byq] {
    background: rgba(255, 255, 255, 0.16);
}

.result-summary[b-g5nrol0byq] {
    font-size: var(--fs-12);
    color: var(--ink-soft);
    margin-bottom: var(--sp-3);
    letter-spacing: var(--tracking-label);
}

/* ── Log list ── */
.log-card[b-g5nrol0byq] {
    background: var(--surface);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

.log-row[b-g5nrol0byq] {
    display: grid;
    grid-template-columns: 120px 110px 1fr auto;
    gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-5);
    border-bottom: var(--border-1) solid var(--border);
    align-items: center;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease);
}

.log-row:last-child[b-g5nrol0byq] {
    border-bottom: none;
}

.log-row:hover[b-g5nrol0byq],
.log-row.expanded[b-g5nrol0byq] {
    background: var(--bg);
}

.log-when[b-g5nrol0byq] {
    font-size: var(--fs-12);
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.log-when .date[b-g5nrol0byq] {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.log-when .time[b-g5nrol0byq] {
    color: var(--ink-soft);
    font-size: var(--fs-11);
    font-variant-numeric: tabular-nums;
}

/* Category badge */
.cat-badge[b-g5nrol0byq] {
    font-size: var(--fs-10);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    padding: 3px var(--sp-2);
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    justify-self: start;
    white-space: nowrap;
}

.cat-badge[b-g5nrol0byq]::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: var(--radius-circle);
    background: currentColor;
    flex-shrink: 0;
}

.cat-admin[b-g5nrol0byq] { color: var(--blue); background: var(--blue-bg); }
.cat-godmode[b-g5nrol0byq] { color: var(--crimson); background: var(--crimson-bg); }
.cat-pick[b-g5nrol0byq] { color: var(--emerald); background: var(--emerald-bg); }
.cat-pickas[b-g5nrol0byq] { color: var(--purple); background: var(--purple-bg); }
.cat-sync[b-g5nrol0byq] { color: var(--ink-muted); background: var(--bg); }
.cat-sync.err[b-g5nrol0byq] { color: var(--crimson); background: var(--crimson-bg); }
.cat-notif[b-g5nrol0byq] { color: var(--gold); background: var(--gold-bg); }
.cat-signin[b-g5nrol0byq] { color: var(--ink-muted); background: var(--bg); }

/* Main message column */
.log-main[b-g5nrol0byq] {
    min-width: 0;
}

.log-action[b-g5nrol0byq] {
    font-size: var(--fs-13);
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.actor-pill[b-g5nrol0byq] {
    font-size: var(--fs-11);
    color: var(--ink-muted);
    background: var(--bg);
    padding: 1px var(--sp-2);
    border-radius: var(--radius-xs);
    margin-right: var(--sp-1);
    border: var(--border-1) solid var(--border);
}

/* Expand chevron */
.log-chevron[b-g5nrol0byq] {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-circle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-soft);
    transition: transform var(--t-med) var(--ease);
}

.log-chevron svg[b-g5nrol0byq] {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.4;
}

.log-row.expanded .log-chevron[b-g5nrol0byq] {
    transform: rotate(180deg);
}

/* Expanded detail */
.log-detail[b-g5nrol0byq] {
    grid-column: 1 / -1;
    margin-top: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-lg);
    font-size: var(--fs-12);
    cursor: default;
}

.detail-grid[b-g5nrol0byq] {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: var(--sp-2) var(--sp-4);
}

.detail-label[b-g5nrol0byq] {
    font-size: var(--fs-10);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--ink-soft);
    padding-top: 1px;
}

.detail-value[b-g5nrol0byq] {
    color: var(--ink);
    word-break: break-word;
}

.detail-value code[b-g5nrol0byq] {
    font-family: var(--font-mono);
    font-size: var(--fs-11);
    background: var(--bg);
    padding: 1px var(--sp-1);
    border-radius: var(--radius-xs);
    border: var(--border-1) solid var(--border);
}

.diff-old[b-g5nrol0byq] {
    color: var(--crimson);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.diff-arrow[b-g5nrol0byq] {
    color: var(--ink-soft);
    font-size: var(--fs-11);
}

.diff-new[b-g5nrol0byq] {
    color: var(--emerald);
    font-weight: 500;
}

/* God Mode flag on rows */
.log-row.godmode-row[b-g5nrol0byq] {
    box-shadow: inset 3px 0 0 var(--crimson);
}

/* ── Scroll sentinel / end-of-log ── */
.scroll-sentinel[b-g5nrol0byq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    padding: var(--sp-5);
    font-size: var(--fs-12);
    color: var(--ink-soft);
    letter-spacing: var(--tracking-label);
    border-top: var(--border-1) solid var(--border);
}

.scroll-sentinel.hidden[b-g5nrol0byq] {
    display: none;
}

.scroll-spinner[b-g5nrol0byq] {
    width: 14px;
    height: 14px;
    border-radius: var(--radius-circle);
    border: var(--border-2) solid var(--border-strong);
    border-top-color: var(--ink-muted);
    animation: spin-b-g5nrol0byq 0.7s linear infinite;
}

@keyframes spin-b-g5nrol0byq {
    to {
        transform: rotate(360deg);
    }
}

.end-of-log[b-g5nrol0byq] {
    padding: var(--sp-5);
    font-size: var(--fs-11);
    color: var(--ink-faint);
    text-align: center;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    border-top: var(--border-1) solid var(--border);
}

.empty-state[b-g5nrol0byq] {
    padding: var(--sp-10) var(--sp-5);
    text-align: center;
    color: var(--ink-soft);
    font-size: var(--fs-13);
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .filter-bar[b-g5nrol0byq] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 720px) {
    .log-row[b-g5nrol0byq] {
        grid-template-columns: 96px 1fr auto;
        gap: var(--sp-2) var(--sp-3);
        padding: var(--sp-3) var(--sp-4);
    }

    .cat-badge[b-g5nrol0byq] {
        grid-column: 1 / -1;
        order: -1;
    }
}

@media (max-width: 600px) {
    .filter-bar[b-g5nrol0byq] {
        grid-template-columns: 1fr;
    }

    .detail-grid[b-g5nrol0byq] {
        grid-template-columns: 1fr;
        gap: var(--sp-1) 0;
    }

    .detail-label[b-g5nrol0byq] {
        margin-top: var(--sp-2);
    }
}
/* /Components/Pages/Admin/AdminBackups.razor.rz.scp.css */
/* Admin Backups screen. Self-contained (scoped) — mirrors the other admin screens' header + card
   conventions (AdminDataSources/AdminEmail), all on design tokens. */

/* ── God Mode frame (matches the other admin screens) ── */
.godmode-frame[b-f717mew9jw] {
    margin: calc(-1 * var(--sp-3));
    padding: var(--sp-3);
    border-radius: var(--radius-2xl);
    box-shadow: inset 0 0 0 3px transparent;
    transition: box-shadow var(--t-med) var(--ease);
}

.godmode-frame.on[b-f717mew9jw] {
    box-shadow: inset 0 0 0 3px var(--crimson);
}

/* ── Page header ── */
.page-header[b-f717mew9jw] {
    margin-bottom: var(--sp-6);
}

.page-eyebrow[b-f717mew9jw] {
    font-size: var(--fs-11);
    letter-spacing: var(--tracking-extra);
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: var(--sp-2);
}

.page-title[b-f717mew9jw] {
    font-size: var(--fs-26);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
}

.page-sub[b-f717mew9jw] {
    font-size: var(--fs-13);
    color: var(--ink-muted);
    margin-top: var(--sp-2);
    max-width: 640px;
    line-height: 1.5;
}

.placeholder-note[b-f717mew9jw] {
    font-size: var(--fs-14);
    color: var(--ink-muted);
}

/* ── Section card ── */
.card[b-f717mew9jw] {
    background: var(--surface);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-2xl);
    padding: var(--sp-5) var(--sp-6);
    margin-bottom: var(--sp-4);
    max-width: 900px;
}

.card-head[b-f717mew9jw] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
    flex-wrap: wrap;
}

.card-title[b-f717mew9jw] {
    font-size: var(--fs-15);
    color: var(--ink);
    letter-spacing: var(--tracking-snug);
}

.card-sub[b-f717mew9jw] {
    font-size: var(--fs-12);
    color: var(--ink-muted);
    margin-top: var(--sp-1);
    line-height: 1.5;
    max-width: 580px;
}

.card-sub code[b-f717mew9jw], .card-sub + p code[b-f717mew9jw], p.card-sub code[b-f717mew9jw] {
    font-size: var(--fs-11);
    background: var(--bg);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-xs);
    padding: 1px 4px;
}

/* ── Cloud config form (mirrors AdminEmail's SMTP card) ── */
.cfg-card[b-f717mew9jw] {
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    padding: var(--sp-5);
    margin-bottom: var(--sp-4);
    max-width: 900px;
}

.cfg-head[b-f717mew9jw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-4);
}

.cfg-title[b-f717mew9jw] {
    font-size: var(--fs-16);
    letter-spacing: var(--tracking-snug);
    color: var(--ink);
}

.cfg-badge[b-f717mew9jw] {
    font-size: var(--fs-10);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    padding: 3px var(--sp-2);
    border-radius: var(--radius-pill);
}

.cfg-badge.on[b-f717mew9jw] {
    color: var(--emerald);
    background: var(--emerald-bg);
}

.cfg-badge.off[b-f717mew9jw] {
    color: var(--ink-soft);
    background: var(--bg);
}

.cfg-missing[b-f717mew9jw] {
    font-size: var(--fs-12);
    color: var(--crimson);
    margin: calc(-1 * var(--sp-2)) 0 var(--sp-4);
}

.fld[b-f717mew9jw] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    margin-bottom: var(--sp-3);
}

.fld > span[b-f717mew9jw] {
    font-size: var(--fs-11);
    letter-spacing: var(--tracking-extra);
    text-transform: uppercase;
    color: var(--ink-soft);
}

.fld input[type="text"][b-f717mew9jw],
.fld input[type="password"][b-f717mew9jw],
.fld input:not([type])[b-f717mew9jw] {
    font-family: inherit;
    font-size: var(--fs-14);
    color: var(--ink);
    background: var(--surface);
    border: var(--border-15) solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: var(--sp-2) var(--sp-3);
    transition: border-color var(--t-fast) var(--ease);
}

.fld input:focus[b-f717mew9jw] {
    outline: none;
    border-color: var(--blue);
}

.fld-row[b-f717mew9jw] {
    display: flex;
    gap: var(--sp-3);
}

.fld-row > .fld[b-f717mew9jw] {
    flex: 1;
}

.cfg-hint[b-f717mew9jw] {
    font-size: var(--fs-12);
    color: var(--ink-muted);
    margin: var(--sp-1) 0 0;
}

.cfg-actions[b-f717mew9jw] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
}

/* The import feedback can run long; drop it to its own line so it never crowds the buttons. */
.cfg-actions .import-status[b-f717mew9jw] {
    flex-basis: 100%;
    margin-top: 0;
}

/* The <InputFile> renders its own <input>, which — like NavLink — does not inherit this
   component's scoped attribute, so the hide rule needs ::deep to reach it. */
.import-btn[b-f717mew9jw] {
    display: inline-flex;
    align-items: center;
    background: none;
    border: var(--border-1) solid var(--border-strong);
    color: var(--ink-muted);
    border-radius: var(--radius-lg);
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-13);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.import-btn:hover[b-f717mew9jw] {
    background: var(--bg);
    color: var(--ink);
}

.import-btn[b-f717mew9jw]  input[type="file"] {
    display: none;
}

/* ── Buttons ── */
.primary-btn[b-f717mew9jw] {
    background: var(--blue);
    border: var(--border-1) solid var(--blue);
    color: var(--surface);
    border-radius: var(--radius-lg);
    padding: var(--sp-3) var(--sp-5);
    font-size: var(--fs-13);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease);
}

.primary-btn:hover:not(:disabled)[b-f717mew9jw] {
    background: var(--blue-hover);
}

.primary-btn:disabled[b-f717mew9jw] {
    opacity: 0.6;
    cursor: default;
}

.btn-secondary[b-f717mew9jw] {
    background: none;
    border: var(--border-1) solid var(--border-strong);
    color: var(--ink-muted);
    border-radius: var(--radius-lg);
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-13);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
    white-space: nowrap;
}

.btn-secondary:hover:not(:disabled)[b-f717mew9jw] {
    background: var(--bg);
    color: var(--ink);
}

.btn-secondary:disabled[b-f717mew9jw] {
    opacity: 0.6;
    cursor: default;
}

.import-link[b-f717mew9jw] {
    display: inline-block;
    margin-top: var(--sp-2);
    font-size: var(--fs-13);
    color: var(--blue);
    text-decoration: none;
}

.import-link:hover[b-f717mew9jw] {
    text-decoration: underline;
}

/* ── Run-a-backup row ── */
.backup-actions[b-f717mew9jw] {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-top: var(--sp-3);
    flex-wrap: wrap;
}

.backup-btn[b-f717mew9jw] {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.backup-btn svg[b-f717mew9jw] {
    width: 14px;
    height: 14px;
    animation: spin-b-f717mew9jw 1s linear infinite;
}

@keyframes spin-b-f717mew9jw {
    to { transform: rotate(360deg); }
}

.cfg-status[b-f717mew9jw] {
    font-size: var(--fs-13);
    color: var(--ink-muted);
}

.cfg-status.err[b-f717mew9jw] {
    color: var(--crimson);
}

/* ── Backup tables ── */
.activity-table[b-f717mew9jw] {
    width: 100%;
    border-collapse: collapse;
}

.activity-table th[b-f717mew9jw] {
    text-align: left;
    font-size: var(--fs-10);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 400;
    padding: var(--sp-2) 0 var(--sp-3);
    border-bottom: var(--border-1) solid var(--border);
}

.col-when[b-f717mew9jw] { width: 150px; }
.col-status[b-f717mew9jw] { width: 90px; }
.col-action[b-f717mew9jw] { width: 1%; text-align: right; }

.activity-table td[b-f717mew9jw] {
    padding: var(--sp-3) 0;
    border-bottom: var(--border-1) solid var(--border);
    color: var(--ink);
    font-size: var(--fs-13);
    vertical-align: top;
}

.activity-table tr:last-child td[b-f717mew9jw] {
    border-bottom: none;
}

.activity-when[b-f717mew9jw] {
    color: var(--ink-muted);
    font-size: var(--fs-12);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.activity-detail[b-f717mew9jw] {
    color: var(--ink-muted);
    font-size: var(--fs-12);
}

.empty-note[b-f717mew9jw] {
    padding: var(--sp-6);
    text-align: center;
    color: var(--ink-soft);
    font-size: var(--fs-13);
}

.empty-note.err[b-f717mew9jw] {
    color: var(--crimson);
}

@media (max-width: 900px) {
    .card[b-f717mew9jw] {
        max-width: none;
    }
}
/* /Components/Pages/Admin/AdminCompose.razor.rz.scp.css */
/* Compose screen — full-page "Send a message" tool (mockups/admin-email-compose-mockup.html). */

.eyebrow[b-if6e4ww9n3] {
    font-size: var(--fs-10); letter-spacing: var(--tracking-extra); text-transform: uppercase;
    color: var(--ink-soft); margin-bottom: var(--sp-2);
}
.head-row[b-if6e4ww9n3] { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.title[b-if6e4ww9n3] { font-size: var(--fs-26); font-weight: 600; letter-spacing: var(--tracking-tight); }
.back-link[b-if6e4ww9n3] { font-size: var(--fs-12); color: var(--ink-muted); }
.back-link:hover[b-if6e4ww9n3] { color: var(--blue); }
.sub[b-if6e4ww9n3] { font-size: var(--fs-13); color: var(--ink-muted); margin: var(--sp-1) 0 var(--sp-5); }

.cols[b-if6e4ww9n3] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: var(--sp-5); align-items: start; }
@media (max-width: 860px) { .cols[b-if6e4ww9n3] { grid-template-columns: 1fr; } }

.card[b-if6e4ww9n3] {
    background: var(--surface); border: var(--border-1) solid var(--border);
    border-radius: var(--radius-2xl); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-4);
}
.section-title[b-if6e4ww9n3] {
    font-size: var(--fs-11); letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-soft); margin-bottom: var(--sp-3);
}
.field[b-if6e4ww9n3] { margin-bottom: var(--sp-3); }
.field:last-child[b-if6e4ww9n3] { margin-bottom: 0; }
.field-label[b-if6e4ww9n3] { display: block; font-size: var(--fs-12); color: var(--ink-muted); margin-bottom: var(--sp-2); }
.muted-line[b-if6e4ww9n3] { font-size: var(--fs-13); color: var(--ink-soft); padding: var(--sp-2) 0; }

/* ── Inputs ── */
.text-input[b-if6e4ww9n3] {
    width: 100%; font-family: inherit; font-size: var(--fs-14); color: var(--ink);
    background: var(--surface); border: var(--border-15) solid var(--border-strong);
    border-radius: var(--radius-lg); padding: 10px 12px;
}
.text-input:focus[b-if6e4ww9n3] { outline: none; border-color: var(--blue); }
.textarea[b-if6e4ww9n3] { min-height: 120px; resize: vertical; line-height: 1.5; }

/* ── Smart To: presets ── */
.preset-row[b-if6e4ww9n3] { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.preset[b-if6e4ww9n3] {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    background: var(--bg); border: var(--border-15) solid var(--border);
    border-radius: var(--radius-pill); padding: 6px 12px 6px 11px;
    font-size: var(--fs-13); color: var(--ink);
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.preset:hover:not(:disabled)[b-if6e4ww9n3] { border-color: var(--border-strong); }
.preset:disabled[b-if6e4ww9n3] { opacity: .5; cursor: not-allowed; }
.preset.on[b-if6e4ww9n3] { background: var(--blue-bg); border-color: var(--blue); color: var(--blue); }
.preset .count[b-if6e4ww9n3] {
    font-size: var(--fs-11); min-width: 18px; height: 18px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; background: var(--surface); color: var(--ink-muted);
}
.preset.on .count[b-if6e4ww9n3] { background: var(--blue); color: #fff; }
.preset.warn.on[b-if6e4ww9n3] { background: var(--gold-bg); border-color: var(--gold); color: #92720a; }
.preset.warn.on .count[b-if6e4ww9n3] { background: var(--gold); color: #fff; }

.to-summary[b-if6e4ww9n3] {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    padding: 10px 12px; background: var(--bg); border-radius: var(--radius-lg);
}
.to-count[b-if6e4ww9n3] { font-size: var(--fs-13); color: var(--ink); }
.to-count b[b-if6e4ww9n3] { font-weight: 500; }
.link-btn[b-if6e4ww9n3] { background: none; border: none; cursor: pointer; font-family: inherit;
    font-size: var(--fs-12); color: var(--blue); padding: 2px 0; }
.link-btn:hover[b-if6e4ww9n3] { text-decoration: underline; }
.warn-note[b-if6e4ww9n3] { font-size: var(--fs-12); color: var(--crimson); margin-top: var(--sp-2); }

.recip-list[b-if6e4ww9n3] {
    margin-top: var(--sp-3); border: var(--border-1) solid var(--border);
    border-radius: var(--radius-lg); max-height: 220px; overflow-y: auto;
}
.recip[b-if6e4ww9n3] {
    display: flex; align-items: center; gap: 9px; padding: 8px 12px;
    border-bottom: var(--border-1) solid var(--bg); font-size: var(--fs-13); cursor: pointer;
}
.recip:last-child[b-if6e4ww9n3] { border-bottom: none; }
.recip:hover[b-if6e4ww9n3] { background: var(--bg); }
.recip .flags[b-if6e4ww9n3] { margin-left: auto; display: flex; gap: 5px; }
.flag[b-if6e4ww9n3] { font-size: var(--fs-10); letter-spacing: .04em; padding: 1px 6px; border-radius: var(--radius-xs); }
.flag.nopick[b-if6e4ww9n3] { background: var(--gold-bg); color: #92720a; }
.flag.unpaid[b-if6e4ww9n3] { background: var(--crimson-bg); color: var(--crimson); }
.flag.noemail[b-if6e4ww9n3] { background: var(--bg); color: var(--ink-soft); border: var(--border-1) solid var(--border); }

/* ── Weekly summary toggle ── */
.summary-toggle[b-if6e4ww9n3] {
    display: flex; align-items: center; gap: var(--sp-4);
    padding: 14px 16px; border: var(--border-1) solid var(--border); border-radius: var(--radius-xl);
    background: var(--bg);
}
.summary-toggle.on[b-if6e4ww9n3] { background: var(--emerald-bg); border-color: var(--emerald-border); }
.st-meta[b-if6e4ww9n3] { flex: 1; }
.st-title[b-if6e4ww9n3] { font-size: var(--fs-14); color: var(--ink); margin-bottom: 2px; }
.summary-toggle.on .st-title[b-if6e4ww9n3] { color: var(--emerald); }
.st-sub[b-if6e4ww9n3] { font-size: var(--fs-12); color: var(--ink-muted); }

.switch[b-if6e4ww9n3] { position: relative; width: 40px; height: 22px; flex-shrink: 0; cursor: pointer; }
.switch input[b-if6e4ww9n3] { opacity: 0; width: 0; height: 0; }
.track[b-if6e4ww9n3] { position: absolute; inset: 0; background: var(--ink-faint); border-radius: var(--radius-pill);
    transition: background var(--t-med) var(--ease); cursor: pointer; }
.track[b-if6e4ww9n3]::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px;
    background: #fff; border-radius: var(--radius-circle); transition: transform var(--t-med) var(--ease); }
.switch input:checked + .track[b-if6e4ww9n3] { background: var(--emerald); }
.switch input:checked + .track[b-if6e4ww9n3]::before { transform: translateX(18px); }

.summary-body[b-if6e4ww9n3] { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: var(--border-1) dashed var(--border); }
.inline-field[b-if6e4ww9n3] { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.inline-field > div[b-if6e4ww9n3] { flex: 1; min-width: 150px; }
.check-line[b-if6e4ww9n3] { display: flex; align-items: center; gap: 9px; font-size: var(--fs-13); color: var(--ink); margin-bottom: var(--sp-3); cursor: pointer; }
.check-line:last-child[b-if6e4ww9n3] { margin-bottom: 0; }

/* ── Footer actions ── */
.actions[b-if6e4ww9n3] { display: flex; align-items: center; gap: var(--sp-3); justify-content: flex-end; padding-top: var(--sp-1); }
.actions .spacer[b-if6e4ww9n3] { margin-right: auto; font-size: var(--fs-12); color: var(--ink-muted); }
.send-status[b-if6e4ww9n3] { font-size: var(--fs-12); }
.send-status.ok[b-if6e4ww9n3] { color: var(--emerald); }
.send-status.err[b-if6e4ww9n3] { color: var(--crimson); }
.btn[b-if6e4ww9n3] {
    font-family: inherit; font-size: var(--fs-13); font-weight: 500; border-radius: var(--radius-lg);
    padding: 10px 18px; cursor: pointer; border: var(--border-1) solid var(--border-strong);
    background: var(--surface); color: var(--ink);
}
.btn.ghost:hover[b-if6e4ww9n3] { background: var(--bg); }
.btn.primary[b-if6e4ww9n3] { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.primary:hover[b-if6e4ww9n3] { background: var(--blue-hover); }
.btn:disabled[b-if6e4ww9n3] { opacity: .5; cursor: not-allowed; }

/* ── Live preview (rendered email) ── */
.preview-wrap[b-if6e4ww9n3] { position: sticky; top: var(--sp-5); }
.preview-head[b-if6e4ww9n3] { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.preview-eyebrow[b-if6e4ww9n3] { font-size: var(--fs-11); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.preview-badge[b-if6e4ww9n3] {
    font-size: var(--fs-10); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
    border: var(--border-1) solid var(--border); border-radius: var(--radius-xs); padding: 2px 7px;
}
.email[b-if6e4ww9n3] { border: var(--border-1) solid var(--border); border-radius: var(--radius-xl); overflow: hidden; background: var(--surface); }
.email-head[b-if6e4ww9n3] { padding: 14px 18px; border-bottom: var(--border-1) solid var(--border); background: #fafbfc; }
.email-to[b-if6e4ww9n3] { font-size: var(--fs-11); color: var(--ink-soft); }
.email-subject[b-if6e4ww9n3] { font-size: var(--fs-16); color: var(--ink); margin-top: 4px; }
.email-body[b-if6e4ww9n3] { padding: 18px; font-size: var(--fs-14); color: var(--ink); line-height: 1.6; }
.email-body p[b-if6e4ww9n3] { margin-bottom: 12px; }
.email-body p:last-child[b-if6e4ww9n3] { margin-bottom: 0; }
.email-body .ph[b-if6e4ww9n3] { color: var(--ink-faint); }
.cta[b-if6e4ww9n3] {
    display: inline-block; background: var(--blue); color: #fff; text-decoration: none;
    font-size: var(--fs-13); padding: 9px 16px; border-radius: var(--radius-lg); margin: 4px 0 8px;
}
.cta:hover[b-if6e4ww9n3] { text-decoration: none; background: var(--blue-hover); }

.summary-block[b-if6e4ww9n3] { margin-top: 18px; padding-top: 16px; border-top: var(--border-2) solid var(--border); }
.summary-eyebrow[b-if6e4ww9n3] { font-size: var(--fs-10); letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-soft); margin: 14px 0 6px; }
.res-table[b-if6e4ww9n3] { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
.res-table th[b-if6e4ww9n3] {
    text-align: left; font-size: var(--fs-10); letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-soft); font-weight: 400; padding: 7px 10px; border-bottom: var(--border-1) solid var(--border);
}
.res-table td[b-if6e4ww9n3] { padding: 8px 10px; border-bottom: var(--border-1) solid var(--bg); }
.res-table td.num[b-if6e4ww9n3], .res-table th.num[b-if6e4ww9n3] { text-align: right; }
.res-table tr:last-child td[b-if6e4ww9n3] { border-bottom: none; }
.res-table .rank[b-if6e4ww9n3] { color: var(--ink-soft); width: 30px; }
.res-table .top td[b-if6e4ww9n3] { background: var(--gold-bg); }
.res-table .top .rank[b-if6e4ww9n3] { color: var(--gold); }
/* /Components/Pages/Admin/AdminDataSources.razor.rz.scp.css */
/* Admin Data Sources screen — ported from mockups/admin-datasources-mockup.html onto tokens. */

/* ── God Mode frame (matches the other admin screens) ── */
.godmode-frame[b-r33078x771] {
    margin: calc(-1 * var(--sp-3));
    padding: var(--sp-3);
    border-radius: var(--radius-2xl);
    box-shadow: inset 0 0 0 3px transparent;
    transition: box-shadow var(--t-med) var(--ease);
}

.godmode-frame.on[b-r33078x771] {
    box-shadow: inset 0 0 0 3px var(--crimson);
}

/* ── Page header ── */
.page-header[b-r33078x771] {
    margin-bottom: var(--sp-6);
}

.page-eyebrow[b-r33078x771] {
    font-size: var(--fs-11);
    letter-spacing: var(--tracking-extra);
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: var(--sp-2);
}

.page-title[b-r33078x771] {
    font-size: var(--fs-26);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
}

/* ── Section card ── */
.card[b-r33078x771] {
    background: var(--surface);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-2xl);
    padding: var(--sp-5) var(--sp-6);
    margin-bottom: var(--sp-4);
    max-width: 900px;
}

.card-head[b-r33078x771] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
    flex-wrap: wrap;
}

.card-title[b-r33078x771] {
    font-size: var(--fs-15);
    color: var(--ink);
    letter-spacing: var(--tracking-snug);
}

.card-sub[b-r33078x771] {
    font-size: var(--fs-12);
    color: var(--ink-muted);
    margin-top: var(--sp-1);
    line-height: 1.5;
    max-width: 580px;
}

/* ── Status pill ── */
.pill[b-r33078x771] {
    font-size: var(--fs-11);
    letter-spacing: var(--tracking-label);
    padding: 3px var(--sp-3);
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    white-space: nowrap;
    flex-shrink: 0;
}

.pill[b-r33078x771]::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: var(--radius-circle);
    background: currentColor;
}

.pill.active[b-r33078x771] {
    color: var(--emerald);
    background: var(--emerald-bg);
}

.pill.disabled[b-r33078x771] {
    color: var(--ink-soft);
    background: var(--bg);
}

/* ── Toggle rows ── */
.toggle-row[b-r33078x771] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-xl);
    margin-bottom: var(--sp-3);
}

.toggle-row:last-child[b-r33078x771] {
    margin-bottom: 0;
}

.toggle-meta[b-r33078x771] {
    flex: 1;
    min-width: 0;
}

.toggle-title[b-r33078x771] {
    font-size: var(--fs-13);
    color: var(--ink);
}

.toggle-sub[b-r33078x771] {
    font-size: var(--fs-12);
    color: var(--ink-muted);
    margin-top: var(--sp-1);
    line-height: 1.5;
}

.switch[b-r33078x771] {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
}

.switch input[b-r33078x771] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.switch-track[b-r33078x771] {
    position: absolute;
    inset: 0;
    background: var(--border-strong);
    border-radius: var(--radius-pill);
    transition: background var(--t-med) var(--ease);
}

.switch-thumb[b-r33078x771] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--surface);
    border-radius: var(--radius-circle);
    transition: transform var(--t-med) var(--ease);
}

.switch input:checked + .switch-track[b-r33078x771] {
    background: var(--emerald);
}

.switch input:checked + .switch-track .switch-thumb[b-r33078x771] {
    transform: translateX(16px);
}

.switch input:disabled + .switch-track[b-r33078x771] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Recent sync activity table ── */
.activity-table[b-r33078x771] {
    width: 100%;
    border-collapse: collapse;
}

.activity-table th[b-r33078x771] {
    text-align: left;
    font-size: var(--fs-10);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 400;
    padding: var(--sp-2) 0 var(--sp-3);
    border-bottom: var(--border-1) solid var(--border);
}

.col-when[b-r33078x771] { width: 150px; }
.col-target[b-r33078x771] { width: 150px; }
.col-status[b-r33078x771] { width: 80px; }

.activity-table td[b-r33078x771] {
    padding: var(--sp-3) 0;
    border-bottom: var(--border-1) solid var(--border);
    color: var(--ink);
    font-size: var(--fs-13);
    vertical-align: top;
}

.activity-table tr:last-child td[b-r33078x771] {
    border-bottom: none;
}

.activity-when[b-r33078x771] {
    color: var(--ink-muted);
    font-size: var(--fs-12);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.activity-status[b-r33078x771] {
    font-size: var(--fs-11);
    padding: 2px var(--sp-2);
    border-radius: var(--radius-xs);
    letter-spacing: var(--tracking-label);
}

.activity-status.ok[b-r33078x771] {
    color: var(--emerald);
    background: var(--emerald-bg);
}

.activity-status.err[b-r33078x771] {
    color: var(--crimson);
    background: var(--crimson-bg);
}

.activity-detail[b-r33078x771] {
    color: var(--ink-muted);
    font-size: var(--fs-12);
}

.activity-footer[b-r33078x771] {
    margin-top: var(--sp-4);
    font-size: var(--fs-12);
    color: var(--ink-soft);
    text-align: right;
}

.empty-note[b-r33078x771] {
    padding: var(--sp-6);
    text-align: center;
    color: var(--ink-soft);
    font-size: var(--fs-13);
}

/* ── Provider picker (segmented control) ── */
.segmented[b-r33078x771] {
    display: inline-flex;
    background: var(--bg);
    border: var(--border-1) solid var(--border-strong);
    border-radius: var(--radius-lg);
    padding: 3px;
    gap: 2px;
}

.seg-btn[b-r33078x771] {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--fs-12);
    color: var(--ink-muted);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius-sm);
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.seg-btn.on[b-r33078x771] {
    background: var(--surface);
    color: var(--ink);
}

.provider-picker[b-r33078x771] {
    margin-bottom: var(--sp-4);
}

.provider-warning[b-r33078x771] {
    font-size: var(--fs-12);
    color: var(--crimson);
    background: var(--crimson-bg);
    border-radius: var(--radius-lg);
    padding: var(--sp-3) var(--sp-4);
    line-height: 1.5;
    margin-bottom: var(--sp-4);
}

/* ── Highlightly credential ── (mirrors AdminEmail's .cfg-card conventions) */
.highlightly-config[b-r33078x771] {
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--bg);
    padding: var(--sp-4);
    margin-bottom: var(--sp-4);
}

.cfg-head[b-r33078x771] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-3);
}

.cfg-title[b-r33078x771] {
    font-size: var(--fs-14);
    letter-spacing: var(--tracking-snug);
    color: var(--ink);
}

.cfg-badge[b-r33078x771] {
    font-size: var(--fs-10);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    padding: 3px var(--sp-2);
    border-radius: var(--radius-pill);
}

.cfg-badge.on[b-r33078x771] {
    color: var(--emerald);
    background: var(--emerald-bg);
}

.cfg-badge.off[b-r33078x771] {
    color: var(--ink-soft);
    background: var(--surface);
}

.fld[b-r33078x771] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    margin-bottom: var(--sp-3);
}

.fld > span[b-r33078x771] {
    font-size: var(--fs-11);
    letter-spacing: var(--tracking-extra);
    text-transform: uppercase;
    color: var(--ink-soft);
}

.fld input[type="text"][b-r33078x771],
.fld input[type="password"][b-r33078x771],
.fld input[type="number"][b-r33078x771],
.fld input:not([type])[b-r33078x771] {
    font-family: inherit;
    font-size: var(--fs-14);
    color: var(--ink);
    background: var(--surface);
    border: var(--border-15) solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: var(--sp-2) var(--sp-3);
    transition: border-color var(--t-fast) var(--ease);
}

.fld input:focus[b-r33078x771] {
    outline: none;
    border-color: var(--blue);
}

.budget-fld input[b-r33078x771] {
    max-width: 140px;
}

.cfg-hint[b-r33078x771] {
    font-size: var(--fs-12);
    color: var(--ink-muted);
    margin: var(--sp-1) 0 var(--sp-3);
    line-height: 1.5;
}

.usage-row[b-r33078x771] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.usage-track[b-r33078x771] {
    flex: 1;
    max-width: 240px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--border);
    overflow: hidden;
}

.usage-fill[b-r33078x771] {
    height: 100%;
    background: var(--blue);
    border-radius: var(--radius-pill);
    transition: width var(--t-med) var(--ease);
}

.usage-label[b-r33078x771] {
    font-size: var(--fs-12);
    color: var(--ink-muted);
    white-space: nowrap;
}

.cfg-actions[b-r33078x771] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

.primary-btn[b-r33078x771] {
    background: var(--blue);
    border: var(--border-1) solid var(--blue);
    color: var(--surface);
    border-radius: var(--radius-lg);
    padding: var(--sp-3) var(--sp-5);
    font-size: var(--fs-13);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease);
}

.primary-btn:hover:not(:disabled)[b-r33078x771] {
    background: var(--blue-hover);
}

.primary-btn:disabled[b-r33078x771] {
    opacity: 0.6;
    cursor: default;
}

.btn-secondary[b-r33078x771] {
    background: none;
    border: var(--border-1) solid var(--border-strong);
    color: var(--ink-muted);
    border-radius: var(--radius-lg);
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-13);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
    flex-shrink: 0;
}

.btn-secondary:hover:not(:disabled)[b-r33078x771] {
    background: var(--surface);
    color: var(--ink);
}

.test-btn[b-r33078x771] {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.test-btn svg[b-r33078x771] {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.test-btn.sending[b-r33078x771] {
    color: var(--ink);
    border-color: var(--ink-muted);
}

.test-btn.sending svg[b-r33078x771] {
    animation: spin-b-r33078x771 1s linear infinite;
}

@keyframes spin-b-r33078x771 {
    to {
        transform: rotate(360deg);
    }
}

.cfg-status[b-r33078x771] {
    font-size: var(--fs-13);
    color: var(--ink-muted);
    margin-top: var(--sp-1);
}

.cfg-status.err[b-r33078x771] {
    color: var(--crimson);
}
/* /Components/Pages/Admin/AdminEmail.razor.rz.scp.css */
/* Admin Email config screen. Self-contained (scoped) — mirrors the other admin screens'
   header + card conventions, all on design tokens. */

.page-header[b-emjwqfymy6] {
    margin-bottom: var(--sp-6);
}

.page-eyebrow[b-emjwqfymy6] {
    font-size: var(--fs-11);
    letter-spacing: var(--tracking-extra);
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: var(--sp-2);
}

.page-title[b-emjwqfymy6] {
    font-size: var(--fs-26);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
}

.page-sub[b-emjwqfymy6] {
    font-size: var(--fs-13);
    color: var(--ink-muted);
    margin-top: var(--sp-2);
    max-width: 640px;
    line-height: 1.5;
}

.placeholder-note[b-emjwqfymy6] {
    font-size: var(--fs-14);
    color: var(--ink-muted);
}

.killswitch-card[b-emjwqfymy6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    margin-bottom: var(--sp-5);
}

.killswitch-card.off[b-emjwqfymy6] {
    border-color: var(--crimson);
    background: var(--crimson-bg);
}

.ks-title[b-emjwqfymy6] {
    font-size: var(--fs-15);
    color: var(--ink);
    margin-bottom: var(--sp-1);
}

.killswitch-card.off .ks-title[b-emjwqfymy6] {
    color: var(--crimson);
}

.ks-sub[b-emjwqfymy6] {
    font-size: var(--fs-13);
    color: var(--ink-muted);
    max-width: 62ch;
    line-height: 1.5;
}

.cfg-grid[b-emjwqfymy6] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
}

.cfg-card[b-emjwqfymy6] {
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    padding: var(--sp-5);
}

.cfg-card.test[b-emjwqfymy6] {
    max-width: 640px;
}

.cfg-head[b-emjwqfymy6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-4);
}

.cfg-title[b-emjwqfymy6] {
    font-size: var(--fs-16);
    letter-spacing: var(--tracking-snug);
    color: var(--ink);
}

.cfg-badge[b-emjwqfymy6] {
    font-size: var(--fs-10);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    padding: 3px var(--sp-2);
    border-radius: var(--radius-pill);
}

.cfg-badge.on[b-emjwqfymy6] {
    color: var(--emerald);
    background: var(--emerald-bg);
}

.cfg-badge.off[b-emjwqfymy6] {
    color: var(--ink-soft);
    background: var(--bg);
}

.fld[b-emjwqfymy6] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    margin-bottom: var(--sp-3);
}

.fld > span[b-emjwqfymy6] {
    font-size: var(--fs-11);
    letter-spacing: var(--tracking-extra);
    text-transform: uppercase;
    color: var(--ink-soft);
}

.fld input[type="text"][b-emjwqfymy6],
.fld input[type="password"][b-emjwqfymy6],
.fld input[type="number"][b-emjwqfymy6],
.fld input:not([type])[b-emjwqfymy6],
.test-input[b-emjwqfymy6] {
    font-family: inherit;
    font-size: var(--fs-14);
    color: var(--ink);
    background: var(--surface);
    border: var(--border-15) solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: var(--sp-2) var(--sp-3);
    transition: border-color var(--t-fast) var(--ease);
}

.fld input:focus[b-emjwqfymy6],
.test-input:focus[b-emjwqfymy6] {
    outline: none;
    border-color: var(--blue);
}

.fld.check[b-emjwqfymy6] {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-2);
}

.fld.check > span[b-emjwqfymy6] {
    text-transform: none;
    letter-spacing: normal;
    font-size: var(--fs-14);
    color: var(--ink);
}

.fld-row[b-emjwqfymy6] {
    display: flex;
    gap: var(--sp-3);
}

.fld-row > .fld[b-emjwqfymy6] {
    flex: 1;
}

.cfg-hint[b-emjwqfymy6] {
    font-size: var(--fs-12);
    color: var(--ink-muted);
    margin: var(--sp-1) 0 0;
}

.cfg-actions[b-emjwqfymy6] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
}

/* The import feedback can run long ("Imported Host, Port … Review the fields, then Save"); drop it to
   its own line so it never crowds the buttons. */
.cfg-actions .import-status[b-emjwqfymy6] {
    flex-basis: 100%;
    margin-top: 0;
}

.primary-btn[b-emjwqfymy6] {
    background: var(--blue);
    border: var(--border-1) solid var(--blue);
    color: var(--surface);
    border-radius: var(--radius-lg);
    padding: var(--sp-3) var(--sp-5);
    font-size: var(--fs-13);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease);
}

.primary-btn:hover:not(:disabled)[b-emjwqfymy6] {
    background: var(--blue-hover);
}

.primary-btn:disabled[b-emjwqfymy6] {
    opacity: 0.6;
    cursor: default;
}

.btn-secondary[b-emjwqfymy6] {
    background: none;
    border: var(--border-1) solid var(--border-strong);
    color: var(--ink-muted);
    border-radius: var(--radius-lg);
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-13);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
    flex-shrink: 0;
}

.btn-secondary:hover:not(:disabled)[b-emjwqfymy6] {
    background: var(--bg);
    color: var(--ink);
}

.cfg-status[b-emjwqfymy6] {
    font-size: var(--fs-13);
    color: var(--ink-muted);
    margin-top: var(--sp-2);
}

.test-row[b-emjwqfymy6] {
    margin-top: var(--sp-3);
    align-items: center;
}

.test-input[b-emjwqfymy6] {
    flex: 1;
    max-width: 320px;
}

/* Send-test button busy state — spinner + "Sending…" label, mirroring the Sync button on the
   Data Sources screen, so a slow SMTP connect reads as in-progress rather than a dead click. */
.test-btn[b-emjwqfymy6] {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.test-btn svg[b-emjwqfymy6] {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.test-btn.sending[b-emjwqfymy6] {
    color: var(--ink);
    border-color: var(--ink-muted);
}

.test-btn.sending svg[b-emjwqfymy6] {
    animation: spin-b-emjwqfymy6 1s linear infinite;
}

@keyframes spin-b-emjwqfymy6 {
    to {
        transform: rotate(360deg);
    }
}

/* Import/sample controls, in the actions row beside Save. The <InputFile> renders its own <input>,
   which — like NavLink — does not inherit this component's scoped attribute, so the hide rule needs
   ::deep to reach it. */
.import-btn[b-emjwqfymy6] {
    display: inline-flex;
    align-items: center;
    background: none;
    border: var(--border-1) solid var(--border-strong);
    color: var(--ink-muted);
    border-radius: var(--radius-lg);
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-13);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.import-btn:hover[b-emjwqfymy6] {
    background: var(--bg);
    color: var(--ink);
}

.import-btn[b-emjwqfymy6]  input[type="file"] {
    display: none;
}

.import-link[b-emjwqfymy6] {
    font-size: var(--fs-13);
    color: var(--blue);
    text-decoration: none;
}

.import-link:hover[b-emjwqfymy6] {
    text-decoration: underline;
}

.cfg-status.err[b-emjwqfymy6] {
    color: var(--crimson);
}

@media (max-width: 900px) {
    .cfg-grid[b-emjwqfymy6] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Admin/AdminPlayers.razor.rz.scp.css */
/* Admin Players screen — master player list with cross-season stats. */

/* ── God Mode frame (mirrors the Season screen) ── */
.godmode-frame[b-cey9xlfmhg] {
    margin: calc(-1 * var(--sp-3));
    padding: var(--sp-3);
    border-radius: var(--radius-2xl);
    box-shadow: inset 0 0 0 3px transparent;
    transition: box-shadow var(--t-med) var(--ease);
}

.godmode-frame.on[b-cey9xlfmhg] {
    box-shadow: inset 0 0 0 3px var(--crimson);
}

/* ── Header ── */
.page-header[b-cey9xlfmhg] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-2);
    flex-wrap: wrap;
}

.page-eyebrow[b-cey9xlfmhg] {
    font-size: var(--fs-11);
    letter-spacing: var(--tracking-extra);
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: var(--sp-2);
}

.screen-title[b-cey9xlfmhg] {
    font-size: var(--fs-26);
    color: var(--ink);
    letter-spacing: var(--tracking-tight);
}

.screen-sub[b-cey9xlfmhg] {
    font-size: var(--fs-13);
    color: var(--ink-muted);
    margin-bottom: var(--sp-6);
    max-width: 60ch;
    line-height: 1.5;
}

/* ── Player list ── */
.players-list[b-cey9xlfmhg] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.player-card[b-cey9xlfmhg] {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    transition: border-color var(--t-fast) var(--ease);
}

.player-card:hover[b-cey9xlfmhg] {
    border-color: var(--border-strong);
}

.player-card.inactive[b-cey9xlfmhg] {
    opacity: 0.6;
}

.player-avatar[b-cey9xlfmhg] {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-circle);
    background: var(--blue-bg);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-12);
    font-weight: 500;
    flex-shrink: 0;
}

.player-meta[b-cey9xlfmhg] {
    flex: 1;
    min-width: 0;
}

.player-name[b-cey9xlfmhg] {
    font-weight: 500;
    font-size: var(--fs-14);
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.player-email[b-cey9xlfmhg] {
    font-size: var(--fs-12);
    color: var(--ink-muted);
}

.badge[b-cey9xlfmhg] {
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-10);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    padding: 2px var(--sp-2);
    border-radius: var(--radius-pill);
}

.badge-admin[b-cey9xlfmhg] {
    background: var(--gold-bg);
    color: var(--gold);
}

.badge-inactive[b-cey9xlfmhg] {
    background: var(--bg);
    color: var(--ink-soft);
    border: var(--border-1) solid var(--border-strong);
}

/* ── Stats ── */
.player-stats[b-cey9xlfmhg] {
    display: flex;
    gap: var(--sp-6);
    flex-shrink: 0;
}

.stat[b-cey9xlfmhg] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 48px;
}

.stat-val[b-cey9xlfmhg] {
    font-size: var(--fs-16);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.stat-label[b-cey9xlfmhg] {
    font-size: var(--fs-10);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-soft);
}

.player-actions[b-cey9xlfmhg] {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    flex-shrink: 0;
}

.link-btn[b-cey9xlfmhg] {
    background: none;
    border: none;
    color: var(--blue);
    font-size: var(--fs-12);
    cursor: pointer;
    padding: 0;
}

.empty-note[b-cey9xlfmhg] {
    padding: var(--sp-6);
    text-align: center;
    color: var(--ink-soft);
    font-size: var(--fs-13);
}

.sync-status[b-cey9xlfmhg] {
    margin-bottom: var(--sp-4);
    font-size: var(--fs-12);
    color: var(--crimson);
}

/* ── Modal ── */
.modal-overlay[b-cey9xlfmhg] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 500;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--sp-6);
}

.modal[b-cey9xlfmhg] {
    background: var(--surface);
    width: 100%;
    max-width: 440px;
    border-radius: var(--radius-2xl);
    padding: var(--sp-6);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    margin: auto;
}

.modal.narrow[b-cey9xlfmhg] {
    max-width: 460px;
}

.modal-title[b-cey9xlfmhg] {
    font-size: var(--fs-18);
    color: var(--ink);
    letter-spacing: var(--tracking-snug);
    margin-bottom: var(--sp-4);
}

.form-row[b-cey9xlfmhg] {
    margin-bottom: var(--sp-4);
}

.form-label[b-cey9xlfmhg] {
    display: block;
    font-size: var(--fs-10);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: var(--sp-2);
}

.form-input[b-cey9xlfmhg] {
    font-family: inherit;
    font-size: var(--fs-13);
    color: var(--ink);
    background: var(--bg);
    border: var(--border-15) solid var(--border-strong);
    border-radius: var(--radius-lg);
    padding: var(--sp-3) var(--sp-4);
    width: 100%;
}

.check-row[b-cey9xlfmhg] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-13);
    color: var(--ink);
    cursor: pointer;
}

.check-row input[type="checkbox"][b-cey9xlfmhg] {
    accent-color: var(--blue);
    width: 16px;
    height: 16px;
}

.field-error[b-cey9xlfmhg] {
    margin-top: var(--sp-3);
    font-size: var(--fs-12);
    color: var(--crimson);
}

.modal-actions[b-cey9xlfmhg] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
}

.delete-left[b-cey9xlfmhg] {
    margin-right: auto;
}

.delete-hint[b-cey9xlfmhg] {
    margin-right: auto;
    font-size: var(--fs-12);
    color: var(--ink-soft);
}

.primary-btn[b-cey9xlfmhg] {
    background: var(--ink);
    color: var(--surface);
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-13);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease);
}

.primary-btn:hover[b-cey9xlfmhg] {
    background: var(--blue);
}

.btn-secondary[b-cey9xlfmhg] {
    background: none;
    border: var(--border-1) solid var(--border-strong);
    color: var(--ink-muted);
    border-radius: var(--radius-lg);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-13);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.btn-secondary:hover[b-cey9xlfmhg] {
    background: var(--bg);
    color: var(--ink);
}

.danger-text[b-cey9xlfmhg] {
    color: var(--crimson);
    border-color: var(--crimson-border);
}
/* /Components/Pages/Admin/AdminSeason.razor.rz.scp.css */
/* Admin Season screen — ported from mockups/admin-season-mockup.html onto tokens. */

/* ── God Mode frame ── */
/* Crimson inset border around the content while a God Mode session is open (spec §4). The
   negative margin + matching padding reclaim space from the main panel so the border sits near
   its edge without shifting the content when it toggles. */
.godmode-frame[b-lduefrkkl6] {
    margin: calc(-1 * var(--sp-3));
    padding: var(--sp-3);
    border-radius: var(--radius-2xl);
    box-shadow: inset 0 0 0 3px transparent;
    transition: box-shadow var(--t-med) var(--ease);
}

.godmode-frame.on[b-lduefrkkl6] {
    box-shadow: inset 0 0 0 3px var(--crimson);
}

/* ── Page header ── */
.page-eyebrow[b-lduefrkkl6] {
    font-size: var(--fs-11);
    letter-spacing: var(--tracking-extra);
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: var(--sp-2);
}

/* ── Season control bar: the season switcher, active-site status, and state
   stepper joined into one bordered pill cluster instead of three separate
   floating widgets. Delete season (rare, destructive) stays a separate
   button outside the cluster rather than joining the same control group. ── */
.control-row[b-lduefrkkl6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    margin-bottom: var(--sp-1);
}

.season-pill-wrap[b-lduefrkkl6] {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.season-pill-cluster[b-lduefrkkl6] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    background: var(--surface);
    border: var(--border-15) solid var(--border-strong);
    border-radius: var(--radius-xl);
    padding: var(--sp-2);
}

.pill-seg-season[b-lduefrkkl6] {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-17);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-md);
    transition: background var(--t-fast) var(--ease);
}

.pill-seg-season:hover[b-lduefrkkl6] {
    background: var(--bg);
}

.pill-seg-season svg[b-lduefrkkl6] {
    flex-shrink: 0;
    transition: transform var(--t-med) var(--ease);
}

.pill-seg-season.open svg[b-lduefrkkl6] {
    transform: rotate(180deg);
}

.pill-divider[b-lduefrkkl6] {
    width: 1px;
    align-self: stretch;
    background: var(--border);
    margin: var(--sp-1) 0;
}

/* Anchored season-switcher popover. A transparent full-page click-catcher
   (rather than new JS click-outside interop) closes it on outside click,
   reusing the same overlay + stopPropagation idiom as this page's modals. */
.dropdown-overlay[b-lduefrkkl6] {
    position: fixed;
    inset: 0;
    z-index: 499;
    background: transparent;
}

.season-dropdown[b-lduefrkkl6] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    background: var(--surface);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
    z-index: 500;
    padding: var(--sp-1);
    font-size: var(--fs-13);
}

.season-dropdown-item[b-lduefrkkl6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: var(--sp-2);
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--ink);
}

.season-dropdown-item:hover[b-lduefrkkl6] {
    background: var(--bg);
}

.season-dropdown-item.selected[b-lduefrkkl6] {
    color: var(--blue);
    font-weight: 500;
}

.season-dropdown-current[b-lduefrkkl6] {
    color: var(--blue);
    font-size: var(--fs-11);
}

.season-dropdown-divider[b-lduefrkkl6] {
    height: 1px;
    background: var(--border);
    margin: var(--sp-1) 2px;
}

.season-dropdown-item.create[b-lduefrkkl6] {
    color: var(--blue);
}

/* ── God Mode-only season identity card (Label/Year) — its own container,
   separate from any other card, tagged so the reveal itself reads distinct
   (spec §4 / design-notes God Mode visual language). ── */
.godmode-fields-bar[b-lduefrkkl6] {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    flex-wrap: wrap;
    background: var(--surface);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-2xl);
    padding: var(--sp-3) var(--sp-4);
    margin-top: var(--sp-3);
}

.godmode-fields-tag[b-lduefrkkl6] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--fs-10);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--crimson);
    background: var(--crimson-bg);
    padding: 4px 9px;
    border-radius: var(--radius-xs);
    flex-shrink: 0;
}

.godmode-fields-tag svg[b-lduefrkkl6] {
    width: 11px;
    height: 11px;
}

.season-header-fields[b-lduefrkkl6] {
    display: flex;
    gap: var(--sp-4);
    align-items: flex-end;
    flex-wrap: wrap;
}

.season-header-fields .form-row[b-lduefrkkl6] {
    margin-bottom: 0;
}

.title-dropdown[b-lduefrkkl6] {
    appearance: none;
    font-family: inherit;
    font-size: var(--fs-20);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
    background-color: var(--surface);
    border: var(--border-15) solid var(--border-strong);
    border-radius: var(--radius-xl);
    padding: var(--sp-1) var(--sp-9) var(--sp-1) var(--sp-4);
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sp-3) center;
}

.title-dropdown:hover[b-lduefrkkl6] {
    border-color: var(--ink-muted);
}

.title-dropdown.small[b-lduefrkkl6] {
    font-size: var(--fs-18);
    padding: var(--sp-2) var(--sp-8) var(--sp-2) var(--sp-3);
}

.active-site-badge[b-lduefrkkl6] {
    font-size: var(--fs-12);
    padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-2);
    border-radius: var(--radius-pill);
    color: var(--emerald);
    background: var(--emerald-bg);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    letter-spacing: var(--tracking-label);
}

.active-site-badge[b-lduefrkkl6]::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: var(--radius-circle);
    background: var(--emerald);
    flex-shrink: 0;
}

.ghost-btn[b-lduefrkkl6] {
    background: none;
    border: var(--border-1) solid var(--border-strong);
    color: var(--ink-muted);
    border-radius: var(--radius-md);
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-12);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.ghost-btn:hover[b-lduefrkkl6] {
    background: var(--bg);
    color: var(--ink);
}

/* Simulated-season marker + shortcut to the sim control panel (gold = the simulator's accent). */
.sim-badge[b-lduefrkkl6] {
    font-size: var(--fs-12);
    padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-2);
    border-radius: var(--radius-pill);
    color: var(--gold);
    background: var(--gold-bg);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    letter-spacing: var(--tracking-label);
}

.sim-badge[b-lduefrkkl6]::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: var(--radius-circle);
    background: var(--gold);
    flex-shrink: 0;
}

.sim-link[b-lduefrkkl6] {
    text-decoration: none;
    color: var(--gold);
    border-color: var(--gold-border);
}

.sim-link:hover[b-lduefrkkl6] {
    background: var(--gold-bg);
    color: var(--gold);
}

/* ── State stepper (nests directly inside .season-pill-cluster) ── */
/* Sliding toggle: a thumb sits under the selected lifecycle slot. Its position
   is set inline per-state (transform in the .razor) and its tint by the state
   class. Both are applied WITHOUT a CSS transition on purpose: a transition on
   a property that changes during a Blazor re-render gets stuck at its start
   value — the thumb would freeze at the *previous* slot until a reflow (same
   gotcha as the sidebar God Mode toggle). Instant reposition is correct and
   reads clearly as a toggle. */
.state-switch[b-lduefrkkl6] {
    --slot-w: 80px;
    position: relative;
    display: inline-flex;
    background: var(--bg);
    border: var(--border-1) solid var(--border-strong);
    border-radius: var(--radius-pill);
    padding: 3px;
}

.state-switch-thumb[b-lduefrkkl6] {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: var(--slot-w);
    border-radius: var(--radius-pill);
    background: var(--surface);
    border: var(--border-1) solid var(--border-strong);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.state-switch.draft  .state-switch-thumb[b-lduefrkkl6] { background: var(--gold-bg);    border-color: var(--gold-border); }
.state-switch.live   .state-switch-thumb[b-lduefrkkl6] { background: var(--emerald-bg); border-color: var(--emerald-border); }
.state-switch.closed .state-switch-thumb[b-lduefrkkl6] { background: var(--surface);    border-color: var(--border-strong); }

.state-slot[b-lduefrkkl6] {
    position: relative;
    z-index: 1;
    width: var(--slot-w);
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--fs-13);
    color: var(--ink-muted);
    padding: var(--sp-2) 0;
    text-align: center;
    /* No colour transition: the slot colour is discrete and state-driven, and a
       transition on it gets stuck at its start value across a Blazor re-render
       (same gotcha as the thumb slide above). Let it swap instantly. */
}

.state-slot:hover:not(.current):not(:disabled)[b-lduefrkkl6] {
    color: var(--ink);
}

.state-slot:disabled[b-lduefrkkl6] {
    cursor: not-allowed;
    color: var(--ink-faint);
}

/* The selected slot reads in the state's color; the thumb sits under it. */
.state-switch.draft  .state-slot.current[b-lduefrkkl6] { color: var(--gold); }
.state-switch.live   .state-slot.current[b-lduefrkkl6] { color: var(--emerald); }
.state-switch.closed .state-slot.current[b-lduefrkkl6] { color: var(--ink); }

/* A backward (God Mode) target the admin may step back to. */
.state-slot.backward:not(:disabled)[b-lduefrkkl6] { color: var(--crimson); }

/* Year, reading as a subhead under the season dropdown. */
.season-subhead[b-lduefrkkl6] {
    font-size: var(--fs-13);
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
    margin-top: var(--sp-1);
}

/* ── Tabs ── */
.tabs[b-lduefrkkl6] {
    display: flex;
    margin: var(--sp-6) 0 var(--sp-5);
    border-bottom: var(--border-1) solid var(--border);
}

.tab-btn[b-lduefrkkl6] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--fs-13);
    color: var(--ink-muted);
    padding: var(--sp-3) var(--sp-1);
    margin-right: var(--sp-6);
    border-bottom: var(--border-2) solid transparent;
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.tab-btn:hover[b-lduefrkkl6] {
    color: var(--ink);
}

.tab-btn.active[b-lduefrkkl6] {
    color: var(--ink);
    border-bottom-color: var(--blue);
    font-weight: 500;
}

/* ── Schedule build / import ── */
.build-card[b-lduefrkkl6] {
    background: var(--surface);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-2xl);
    padding: var(--sp-7);
    max-width: 520px;
}

.build-title[b-lduefrkkl6] {
    font-size: var(--fs-18);
    color: var(--ink);
    letter-spacing: var(--tracking-snug);
    margin-bottom: var(--sp-2);
}

.build-card .placeholder-note[b-lduefrkkl6] {
    margin-bottom: var(--sp-5);
}

.primary-btn[b-lduefrkkl6] {
    background: var(--ink);
    color: var(--surface);
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-13);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease);
}

.primary-btn:hover:not(:disabled)[b-lduefrkkl6] {
    background: var(--blue);
}

.primary-btn:disabled[b-lduefrkkl6] {
    opacity: 0.6;
    cursor: progress;
}

.sync-status[b-lduefrkkl6] {
    margin-top: var(--sp-3);
    font-size: var(--fs-12);
    color: var(--ink-muted);
}

.week-sync-status[b-lduefrkkl6] {
    font-size: var(--fs-11);
    color: var(--ink-soft);
    margin-left: var(--sp-2);
}

/* ── Draft-only schedule tools (import + hard replace) ── */
.schedule-setup[b-lduefrkkl6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    flex-wrap: wrap;
    background: var(--surface);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-4);
}

.schedule-setup-meta[b-lduefrkkl6] {
    flex: 1;
    min-width: 260px;
}

.schedule-setup-title[b-lduefrkkl6] {
    font-size: var(--fs-14);
    color: var(--ink);
    margin-bottom: var(--sp-1);
}

.schedule-setup-sub[b-lduefrkkl6] {
    font-size: var(--fs-12);
    color: var(--ink-muted);
    line-height: 1.5;
    max-width: 62ch;
}

.schedule-setup-actions[b-lduefrkkl6] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
}

.schedule-setup-status[b-lduefrkkl6] {
    flex-basis: 100%;
    margin-top: 0;
}

/* ── Week toolbar ── */
.week-toolbar[b-lduefrkkl6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
    flex-wrap: wrap;
}

.week-nav[b-lduefrkkl6] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.week-sync-actions[b-lduefrkkl6] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-left: var(--sp-2);
}

.week-sync-btn[b-lduefrkkl6] {
    background: var(--surface);
    border: var(--border-1) solid var(--border-strong);
    color: var(--ink-muted);
    font-size: var(--fs-12);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    letter-spacing: var(--tracking-label);
    font-family: inherit;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.week-sync-btn:hover:not(:disabled)[b-lduefrkkl6] {
    background: var(--bg);
    color: var(--ink);
}

.week-sync-btn:disabled[b-lduefrkkl6] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ── "Spreads in" publish switch ── */
.week-spreads[b-lduefrkkl6] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.spreads-switch[b-lduefrkkl6] {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    color: var(--ink-muted);
}

.spreads-switch:disabled[b-lduefrkkl6] {
    cursor: default;
}

.spreads-switch-track[b-lduefrkkl6] {
    position: relative;
    width: 34px;
    height: 18px;
    border-radius: var(--radius-pill);
    background: var(--border-strong);
    transition: background var(--t-fast) var(--ease);
}

.spreads-switch-thumb[b-lduefrkkl6] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--surface);
    transition: left var(--t-fast) var(--ease);
}

.spreads-switch.on .spreads-switch-track[b-lduefrkkl6] {
    background: var(--emerald);
}

.spreads-switch.on .spreads-switch-thumb[b-lduefrkkl6] {
    left: 18px;
}

.spreads-switch.on .spreads-switch-label[b-lduefrkkl6],
.spreads-switch:hover:not(:disabled) .spreads-switch-label[b-lduefrkkl6] {
    color: var(--ink);
}

.spreads-switch-label[b-lduefrkkl6] {
    font-size: var(--fs-12);
    letter-spacing: var(--tracking-label);
}

.spreads-lock-note[b-lduefrkkl6] {
    font-size: var(--fs-11);
    color: var(--ink-soft);
}

/* ── Schedule layout ── */
.schedule-layout[b-lduefrkkl6] {
    display: flex;
    gap: var(--sp-6);
    align-items: flex-start;
}

.schedule-main[b-lduefrkkl6] {
    flex: 1;
    min-width: 0;
}

.schedule-side[b-lduefrkkl6] {
    width: 260px;
    flex-shrink: 0;
}

/* ── Game block ── */
.game-block[b-lduefrkkl6] {
    background: var(--surface);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-2xl);
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-3);
}

.game-matchup[b-lduefrkkl6] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--fs-14);
    color: var(--ink);
    margin-bottom: var(--sp-3);
}

.game-matchup .team[b-lduefrkkl6] {
    font-weight: 500;
}

.game-matchup .at[b-lduefrkkl6] {
    color: var(--ink-soft);
    font-size: var(--fs-12);
}

.game-matchup .game-delete-btn[b-lduefrkkl6] {
    margin-left: auto;
    font-size: var(--fs-11);
    padding: 2px var(--sp-2);
}

.state-tag[b-lduefrkkl6] {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: var(--fs-10);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    margin-left: auto;
    padding: 3px var(--sp-2);
    border-radius: var(--radius-sm);
}

.state-tag.locked[b-lduefrkkl6] {
    color: var(--ink-soft);
    background: transparent;
}

.state-tag.final[b-lduefrkkl6] {
    color: var(--emerald);
    background: var(--emerald-bg);
}

.game-fields[b-lduefrkkl6] {
    display: grid;
    grid-template-areas: "favorite spread time score result save";
    grid-template-columns: 1fr 90px 1.4fr 150px 140px auto;
    gap: var(--sp-3) var(--sp-4);
    /* start, not end: ga-score and ga-result carry extra content below their input (side
       labels, derived winner) that the other columns don't have. Bottom-aligning let that
       extra height push shorter columns' inputs down, so they'd visually sit lower than the
       score/result inputs. Top-aligning keeps every label — and the input directly under it —
       on the same line regardless of what trails below in taller columns. */
    align-items: start;
}

.ga-favorite[b-lduefrkkl6] { grid-area: favorite; }
.ga-spread[b-lduefrkkl6] { grid-area: spread; }
.ga-time[b-lduefrkkl6] { grid-area: time; min-width: 0; }
.ga-score[b-lduefrkkl6] { grid-area: score; }
.ga-result[b-lduefrkkl6] { grid-area: result; }
.ga-save[b-lduefrkkl6] { grid-area: save; }

.field-group[b-lduefrkkl6] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.form-label[b-lduefrkkl6] {
    font-size: var(--fs-10);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: var(--sp-1);
}

.small-input[b-lduefrkkl6],
.small-select[b-lduefrkkl6] {
    font-family: inherit;
    font-size: var(--fs-13);
    color: var(--ink);
    background: var(--bg);
    border: var(--border-1) solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: var(--sp-2) var(--sp-3);
    min-width: 0;
    transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.small-select[b-lduefrkkl6] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sp-2) center;
    padding-right: var(--sp-6);
}

.small-input:focus[b-lduefrkkl6],
.small-select:focus[b-lduefrkkl6] {
    outline: none;
    border-color: var(--blue);
    background: var(--surface);
}

.small-input:disabled[b-lduefrkkl6],
.small-select:disabled[b-lduefrkkl6] {
    background: var(--bg);
    color: var(--ink-soft);
    cursor: not-allowed;
    border-color: var(--border);
}

.score-pair[b-lduefrkkl6] {
    display: grid;
    grid-template-columns: 1fr 14px 1fr;
    align-items: center;
    gap: var(--sp-2);
}

.score-pair .score-sep[b-lduefrkkl6] {
    text-align: center;
    color: var(--ink-soft);
}

.score-pair .small-input[b-lduefrkkl6] {
    text-align: center;
    padding: var(--sp-2) var(--sp-1);
}

.score-side-label[b-lduefrkkl6] {
    display: grid;
    grid-template-columns: 1fr 14px 1fr;
    gap: var(--sp-2);
    font-size: var(--fs-10);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--ink-faint);
    text-align: center;
    margin-top: 3px;
}

.score-side-label span:nth-child(2)[b-lduefrkkl6] {
    grid-column: 3;
    text-align: center;
}

.result-block[b-lduefrkkl6] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.final-toggle[b-lduefrkkl6] {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-12);
    color: var(--ink-muted);
    cursor: pointer;
    user-select: none;
}

.final-toggle input[b-lduefrkkl6] {
    accent-color: var(--emerald);
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.final-toggle.is-final[b-lduefrkkl6] {
    color: var(--emerald);
    font-weight: 500;
}

.derived-winner[b-lduefrkkl6] {
    font-size: var(--fs-11);
    letter-spacing: var(--tracking-label);
    color: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    min-height: 16px;
}

.derived-winner.has-winner[b-lduefrkkl6] {
    color: var(--emerald);
}

.derived-winner.tie[b-lduefrkkl6] {
    color: var(--ink-muted);
    font-style: italic;
}

.winner-dot[b-lduefrkkl6] {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-circle);
    background: currentColor;
}

.ga-save[b-lduefrkkl6] {
    display: flex;
    flex-direction: column;
}

.save-indicator[b-lduefrkkl6] {
    font-size: var(--fs-10);
    color: var(--ink-faint);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    padding-top: var(--sp-2);
}

.save-indicator.saving[b-lduefrkkl6] { color: var(--ink-soft); }

/* Holds fully visible for a beat, then fades out — a confirmation flash, not a permanent
   label. Uses a keyframe animation (not a transition) on a freshly-@@key'd element, since a
   transition driven by a Blazor re-render freezes at its start value instead of animating
   (see AdminNav God Mode toggle / season-state slider for the same gotcha). Re-keying the
   element on every save guarantees the animation replays even for back-to-back saves. */
.save-indicator.saved-flash[b-lduefrkkl6] {
    color: var(--emerald);
    animation: save-flash-fade-b-lduefrkkl6 2.4s ease forwards;
}

@keyframes save-flash-fade-b-lduefrkkl6 {
    0%   { opacity: 1; }
    55%  { opacity: 1; }
    100% { opacity: 0; }
}

/* ── Side panel ── */
.side-panel[b-lduefrkkl6] {
    background: var(--surface);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-2xl);
    padding: var(--sp-4) var(--sp-5);
}

.side-panel-title[b-lduefrkkl6] {
    font-size: var(--fs-11);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: var(--sp-3);
}

.pick-summary[b-lduefrkkl6] {
    font-size: var(--fs-12);
    color: var(--ink-muted);
    padding-bottom: var(--sp-3);
    border-bottom: var(--border-1) solid var(--border);
}

.picks-roster[b-lduefrkkl6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2) var(--sp-3);
    margin-top: var(--sp-3);
}

.picks-roster-row[b-lduefrkkl6] {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-12);
    color: var(--ink);
    cursor: default;
}

.picks-roster-row.pending-row[b-lduefrkkl6] {
    color: var(--ink-soft);
}

.pick-mark[b-lduefrkkl6] {
    width: 14px;
    height: 14px;
    border-radius: var(--radius-circle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pick-mark svg[b-lduefrkkl6] {
    width: 9px;
    height: 9px;
    stroke: white;
    fill: none;
    stroke-width: 3.5;
}

.pick-mark.done[b-lduefrkkl6] { background: var(--emerald); color: white; }
.pick-mark.partial[b-lduefrkkl6] { background: var(--gold); color: white; }
.pick-mark.none[b-lduefrkkl6] { background: var(--crimson); color: white; }

.pick-tooltip[b-lduefrkkl6] {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    background: var(--ink);
    color: white;
    font-size: var(--fs-11);
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-fast) var(--ease);
    z-index: 50;
}

.picks-roster-row:hover .pick-tooltip[b-lduefrkkl6] {
    opacity: 1;
}

/* ── Roster tab ── */
.toolbar[b-lduefrkkl6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
    flex-wrap: wrap;
}

.toolbar-meta[b-lduefrkkl6] {
    font-size: var(--fs-12);
    color: var(--ink-soft);
}

.roster-list[b-lduefrkkl6] {
    background: var(--surface);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

.roster-row[b-lduefrkkl6] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: var(--border-1) solid var(--border);
}

.roster-row:last-child[b-lduefrkkl6] {
    border-bottom: none;
}

.roster-row-meta[b-lduefrkkl6] {
    flex: 1;
    min-width: 0;
}

.player-avatar[b-lduefrkkl6] {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-circle);
    background: var(--blue-bg);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-12);
    font-weight: 500;
    flex-shrink: 0;
}

.player-name[b-lduefrkkl6] {
    font-weight: 500;
    font-size: var(--fs-13);
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.player-email[b-lduefrkkl6] {
    font-size: var(--fs-12);
    color: var(--ink-muted);
}

.badge[b-lduefrkkl6] {
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-10);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    padding: 2px var(--sp-2);
    border-radius: var(--radius-pill);
}

.badge-admin[b-lduefrkkl6] {
    background: var(--gold-bg);
    color: var(--gold);
}

.row-actions[b-lduefrkkl6] {
    display: flex;
    gap: var(--sp-3);
    align-items: center;
    flex-shrink: 0;
}

.link-btn[b-lduefrkkl6] {
    background: none;
    border: none;
    color: var(--blue);
    font-size: var(--fs-12);
    cursor: pointer;
    padding: 0;
}

.link-btn:hover[b-lduefrkkl6] {
    text-decoration: underline;
}

.pickas-btn[b-lduefrkkl6] {
    background: none;
    border: var(--border-1) solid var(--border-strong);
    color: var(--blue);
    font-size: var(--fs-12);
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.pickas-btn:hover[b-lduefrkkl6] {
    background: var(--blue-bg);
    border-color: var(--blue);
    text-decoration: none;
}

.remove-btn[b-lduefrkkl6] {
    background: none;
    border: var(--border-1) solid var(--border-strong);
    color: var(--crimson);
    font-size: var(--fs-12);
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.remove-btn:hover[b-lduefrkkl6] {
    background: var(--crimson-bg);
    border-color: var(--crimson-border);
}

.empty-note[b-lduefrkkl6] {
    padding: var(--sp-6);
    text-align: center;
    color: var(--ink-soft);
    font-size: var(--fs-13);
}

.roster-lock-note[b-lduefrkkl6] {
    margin-top: var(--sp-3);
}

/* ── Modals ── */
.modal-overlay[b-lduefrkkl6] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 500;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--sp-6);
    overflow-y: auto;
}

.modal[b-lduefrkkl6] {
    background: var(--surface);
    width: 100%;
    max-width: 440px;
    border-radius: var(--radius-2xl);
    padding: var(--sp-6);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    margin: auto;
}

.modal.narrow[b-lduefrkkl6] {
    max-width: 480px;
}

.modal-title[b-lduefrkkl6] {
    font-size: var(--fs-18);
    color: var(--ink);
    letter-spacing: var(--tracking-snug);
    margin-bottom: var(--sp-2);
}

.modal-sub[b-lduefrkkl6] {
    font-size: var(--fs-13);
    color: var(--ink-muted);
    margin-bottom: var(--sp-4);
    line-height: 1.5;
}

.modal-actions[b-lduefrkkl6] {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
}

.btn-secondary[b-lduefrkkl6] {
    background: none;
    border: var(--border-1) solid var(--border-strong);
    color: var(--ink-muted);
    border-radius: var(--radius-lg);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-13);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.btn-secondary:hover[b-lduefrkkl6] {
    background: var(--bg);
    color: var(--ink);
}

.primary-btn.full[b-lduefrkkl6] {
    width: 100%;
    margin-top: var(--sp-2);
}

.primary-btn.danger[b-lduefrkkl6] {
    background: var(--crimson);
}

.primary-btn.danger:hover:not(:disabled)[b-lduefrkkl6] {
    background: var(--crimson);
    opacity: 0.9;
}

/* ── Roster picker ── */
.picker-list[b-lduefrkkl6] {
    max-height: 320px;
    overflow-y: auto;
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--sp-3);
}

.picker-row[b-lduefrkkl6] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border-bottom: var(--border-1) solid var(--border);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease);
}

.picker-row:last-child[b-lduefrkkl6] {
    border-bottom: none;
}

.picker-row:hover[b-lduefrkkl6] {
    background: var(--bg);
}

.picker-row.on[b-lduefrkkl6] {
    background: var(--blue-bg);
}

.roster-check[b-lduefrkkl6] {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-sm);
    border: var(--border-15) solid var(--border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--fs-11);
    color: transparent;
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.roster-check.checked[b-lduefrkkl6] {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--surface);
}

.modal-divider[b-lduefrkkl6] {
    text-align: center;
    font-size: var(--fs-11);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: var(--sp-5) 0 var(--sp-3);
}

.new-player-form[b-lduefrkkl6] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.form-input[b-lduefrkkl6] {
    font-family: inherit;
    font-size: var(--fs-13);
    color: var(--ink);
    background: var(--bg);
    border: var(--border-15) solid var(--border-strong);
    border-radius: var(--radius-lg);
    padding: var(--sp-3) var(--sp-4);
}

.form-input:focus[b-lduefrkkl6] {
    outline: none;
    border-color: var(--blue);
    background: var(--surface);
}

.field-error[b-lduefrkkl6] {
    margin-top: var(--sp-3);
    font-size: var(--fs-12);
    color: var(--crimson);
}

.check-row[b-lduefrkkl6] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-13);
    color: var(--ink);
    cursor: pointer;
    user-select: none;
}

.check-row input[type="checkbox"][b-lduefrkkl6] {
    accent-color: var(--blue);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
}

.form-hint[b-lduefrkkl6] {
    font-size: var(--fs-12);
    color: var(--ink-muted);
    margin-top: var(--sp-1);
    line-height: 1.4;
}

/* ── Payouts tab ── */
.buyin-bar[b-lduefrkkl6] {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    background: var(--surface);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-2xl);
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-4);
    flex-wrap: wrap;
}

.buyin-input[b-lduefrkkl6] {
    width: 120px;
    font-size: var(--fs-14);
}

/* ── Buy-in payments ── */
.payments-head[b-lduefrkkl6] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin: var(--sp-6) 0 var(--sp-3);
}

.payments-summary[b-lduefrkkl6] {
    font-size: var(--fs-13);
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}

.payment-list[b-lduefrkkl6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--sp-2);
    margin-bottom: var(--sp-7);
}

.payment-row[b-lduefrkkl6] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.payment-row:hover[b-lduefrkkl6] {
    background: var(--bg);
}

.payment-row.paid[b-lduefrkkl6] {
    background: var(--emerald-bg);
    border-color: var(--emerald-border);
}

.payment-row input[type="checkbox"][b-lduefrkkl6] {
    accent-color: var(--emerald);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
}

.payment-name[b-lduefrkkl6] {
    flex: 1;
    min-width: 0;
    font-size: var(--fs-14);
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payment-status[b-lduefrkkl6] {
    font-size: var(--fs-11);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-soft);
    flex-shrink: 0;
}

.payment-row.paid .payment-status[b-lduefrkkl6] {
    color: var(--emerald);
}

.prize-head[b-lduefrkkl6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
    flex-wrap: wrap;
}

.prize-head-title[b-lduefrkkl6] {
    font-size: var(--fs-16);
    color: var(--ink);
    letter-spacing: var(--tracking-snug);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.lock-badge[b-lduefrkkl6] {
    font-size: var(--fs-10);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--ink-muted);
    background: var(--bg);
    border: var(--border-1) solid var(--border-strong);
    border-radius: var(--radius-xs);
    padding: 2px var(--sp-2);
}

.prize-head-actions[b-lduefrkkl6] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.lock-btn[b-lduefrkkl6],
.unlock-btn[b-lduefrkkl6] {
    background: none;
    border: var(--border-1) solid var(--border-strong);
    color: var(--ink-muted);
    border-radius: var(--radius-md);
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-13);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.lock-btn:hover:not(:disabled)[b-lduefrkkl6] {
    background: var(--bg);
    color: var(--ink);
}

.lock-btn:disabled[b-lduefrkkl6] {
    opacity: 0.5;
    cursor: not-allowed;
}

.unlock-btn[b-lduefrkkl6] {
    color: var(--crimson);
    border-color: var(--crimson-border);
}

.unlock-btn:hover[b-lduefrkkl6] {
    background: var(--crimson-bg);
}

.prize-list[b-lduefrkkl6] {
    background: var(--surface);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

.prize-row[b-lduefrkkl6] {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-5);
    border-bottom: var(--border-1) solid var(--border);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease);
}

.prize-row:last-child[b-lduefrkkl6] {
    border-bottom: none;
}

.prize-row:hover[b-lduefrkkl6] {
    background: var(--bg);
}

.prize-main[b-lduefrkkl6] {
    flex: 1;
    min-width: 0;
}

.prize-label[b-lduefrkkl6] {
    font-size: var(--fs-14);
    color: var(--ink);
    margin-bottom: var(--sp-1);
}

.prize-tags[b-lduefrkkl6] {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.tag[b-lduefrkkl6] {
    font-size: var(--fs-10);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    padding: 2px var(--sp-2);
    border-radius: var(--radius-xs);
    background: var(--bg);
    color: var(--ink-muted);
    border: var(--border-1) solid var(--border);
}

.tag.main[b-lduefrkkl6] {
    background: var(--blue-bg);
    color: var(--blue);
    border-color: transparent;
}

.tag.sec[b-lduefrkkl6] {
    background: var(--gold-bg);
    color: var(--gold);
    border-color: transparent;
}

.prize-amount[b-lduefrkkl6] {
    font-size: var(--fs-15);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    width: 88px;
    text-align: right;
}

.alloc-total[b-lduefrkkl6] {
    margin-top: var(--sp-3);
    font-size: var(--fs-12);
    font-variant-numeric: tabular-nums;
    color: var(--ink-muted);
}

.alloc-total.ok[b-lduefrkkl6] {
    color: var(--emerald);
}

.alloc-total.warn[b-lduefrkkl6] {
    color: var(--gold);
}

.alloc-total.over[b-lduefrkkl6] {
    color: var(--crimson);
}

/* ── Prize modal extras ── */
.form-row[b-lduefrkkl6] {
    margin-bottom: var(--sp-4);
}

.form-row .form-label[b-lduefrkkl6] {
    display: block;
    margin-bottom: var(--sp-2);
}

.form-row .form-input[b-lduefrkkl6] {
    width: 100%;
}

.segmented[b-lduefrkkl6] {
    display: inline-flex;
    background: var(--bg);
    border: var(--border-1) solid var(--border-strong);
    border-radius: var(--radius-lg);
    padding: 3px;
    gap: 2px;
}

.seg-btn[b-lduefrkkl6] {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--fs-12);
    color: var(--ink-muted);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius-sm);
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.seg-btn.on[b-lduefrkkl6] {
    background: var(--surface);
    color: var(--ink);
    font-weight: 500;
}

.weight-input-row[b-lduefrkkl6] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.weight-input[b-lduefrkkl6] {
    width: 120px;
}

.amount-prefix[b-lduefrkkl6] {
    font-size: var(--fs-14);
    color: var(--ink-muted);
}

.danger-text[b-lduefrkkl6] {
    color: var(--crimson);
    border-color: var(--crimson-border);
}

.prize-delete[b-lduefrkkl6] {
    margin-right: auto;
}

/* ── Notifications tab ── */
.notif-section[b-lduefrkkl6] {
    margin-bottom: var(--sp-6);
}

.notif-section-title[b-lduefrkkl6] {
    font-size: var(--fs-11);
    letter-spacing: var(--tracking-extra);
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: var(--sp-3);
}

.compose-card[b-lduefrkkl6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
}

.compose-name[b-lduefrkkl6] {
    font-size: var(--fs-15);
    color: var(--ink);
    margin-bottom: 3px;
}

.compose-sub[b-lduefrkkl6] {
    font-size: var(--fs-13);
    color: var(--ink-muted);
}

/* Test-a-reminder tool inside the preferences section. */
.test-trigger[b-lduefrkkl6] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-bottom: var(--sp-4);
}

.tt-label[b-lduefrkkl6] {
    font-size: var(--fs-11);
    letter-spacing: var(--tracking-extra);
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-right: var(--sp-1);
}

/* Compose modal recipient picker. */
.compose-recipients[b-lduefrkkl6] {
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--sp-3);
}

.cr-head[b-lduefrkkl6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-2) var(--sp-3);
    border-bottom: var(--border-1) solid var(--border);
    font-size: var(--fs-12);
    color: var(--ink-muted);
}

.cr-all[b-lduefrkkl6] {
    background: none;
    border: none;
    color: var(--blue);
    font-size: var(--fs-12);
    cursor: pointer;
    font-family: inherit;
}

.cr-list[b-lduefrkkl6] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-4);
    padding: var(--sp-3);
    max-height: 180px;
    overflow-y: auto;
}

.cr-item[b-lduefrkkl6] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-13);
    color: var(--ink);
    min-width: 140px;
    cursor: pointer;
}

.compose-subject[b-lduefrkkl6],
.compose-body[b-lduefrkkl6] {
    width: 100%;
    margin-bottom: var(--sp-3);
}

.compose-body[b-lduefrkkl6] {
    resize: vertical;
}

.toggle-row[b-lduefrkkl6] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--fs-14);
    color: var(--ink);
    cursor: pointer;
}

.notif-status[b-lduefrkkl6] {
    font-size: var(--fs-13);
    color: var(--ink-muted);
    margin-top: var(--sp-2);
}

.notif-activity[b-lduefrkkl6] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.notif-activity li[b-lduefrkkl6] {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
    border-top: var(--border-1) solid var(--border);
    font-size: var(--fs-13);
    color: var(--ink);
}

.notif-activity li:first-child[b-lduefrkkl6] {
    border-top: none;
}

.notif-activity li.err .notif-text[b-lduefrkkl6] {
    color: var(--crimson);
}

.notif-when[b-lduefrkkl6] {
    color: var(--ink-soft);
    font-size: var(--fs-12);
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 92px;
}

.notif-matrix-note[b-lduefrkkl6] {
    font-size: var(--fs-13);
    color: var(--ink-muted);
    margin: 0 0 var(--sp-4);
}

.notif-matrix-wrap[b-lduefrkkl6] {
    overflow-x: auto;
}

.notif-matrix[b-lduefrkkl6] {
    border-collapse: collapse;
    width: 100%;
    font-size: var(--fs-13);
}

.notif-matrix th[b-lduefrkkl6],
.notif-matrix td[b-lduefrkkl6] {
    padding: var(--sp-2) var(--sp-3);
    text-align: center;
    border-bottom: var(--border-1) solid var(--border);
}

.notif-matrix thead th[b-lduefrkkl6] {
    font-size: var(--fs-10);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 400;
    white-space: nowrap;
}

.notif-matrix tr.sub th[b-lduefrkkl6] {
    padding-top: 0;
    color: var(--ink-faint);
}

.notif-matrix .pl-col[b-lduefrkkl6] {
    text-align: left;
    color: var(--ink);
    white-space: nowrap;
}

.notif-matrix tbody tr:hover[b-lduefrkkl6] {
    background: var(--bg);
}

@media (max-width: 900px) {
    .notif-grid[b-lduefrkkl6] {
        grid-template-columns: 1fr;
    }
}

/* ── Responsive ──
   The grid reflows in two steps. The guiding rule: a field never lands in a track too narrow
   for its content. `result` (Final toggle + derived-winner text) and `time` (a datetime-local
   input) are the wide ones, so they always span into a flexible track and never get parked in
   the fixed 90px spread column. `save` keeps a slim auto track of its own rather than being
   pushed into a wide fraction. */

/* Medium: pre-game fields on row 1, results on row 2. */
@media (max-width: 1240px) {
    .game-fields[b-lduefrkkl6] {
        grid-template-areas:
            "favorite spread time   time"
            "score    result result save";
        grid-template-columns: 1fr 90px 1fr auto;
    }
}

/* Stack the side panel under the schedule early, so the game fields get the full content width
   through the whole medium range instead of fighting the 260px side panel for space. */
@media (max-width: 1100px) {
    .schedule-layout[b-lduefrkkl6] {
        flex-direction: column;
    }

    .schedule-side[b-lduefrkkl6] {
        width: 100%;
    }
}

/* Narrow: each wide field gets its own full-width row; favorite + spread stay paired up top. */
@media (max-width: 720px) {
    .game-fields[b-lduefrkkl6] {
        grid-template-areas:
            "favorite spread"
            "time     time"
            "score    score"
            "result   result"
            "save     save";
        grid-template-columns: 1fr 110px;
    }
}
/* /Components/Pages/Admin/Dashboard.razor.rz.scp.css */
/* ============================================================================
   Admin Dashboard — Mission Control board (LOCKED design).
   Ported from the approved sim-mission-control.html. Its dark aesthetic is
   self-contained (its own palette), independent of the app's light tokens —
   an immersive full-bleed status board, not an ordinary admin surface. Serves
   both a real active season (read-only) and a simulated one (with time controls).
   ============================================================================ */
.welcome[b-isfyogfbwk],
.board[b-isfyogfbwk] {
    --sim-bg: #0a100e;
    --sim-panel: #111a16;
    --sim-panel-2: #16211c;
    --sim-line: #243430;
    --sim-line-soft: #1a2622;
    --sim-ink: #eaf2ee;
    --sim-dim: #93a79f;
    --sim-muted: #5f7269;
    --sim-amber: #f4b73f;
    --sim-amber-bg: rgba(244, 183, 63, .12);
    --sim-green: #4bc48d;
    --sim-green-bg: rgba(75, 196, 141, .13);
    --sim-red: #e4574c;
    --sim-red-bg: rgba(228, 87, 76, .14);
    --sim-blue: #5aa9e6;
    --sim-blue-bg: rgba(90, 169, 230, .13);
    --sim-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
    --sim-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.welcome[b-isfyogfbwk], .board[b-isfyogfbwk] { box-sizing: border-box; }
.welcome *[b-isfyogfbwk], .board *[b-isfyogfbwk] { box-sizing: border-box; }

.lbl[b-isfyogfbwk] { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--sim-muted); }
.mono[b-isfyogfbwk] { font-family: var(--sim-mono); font-variant-numeric: tabular-nums; }
.panel[b-isfyogfbwk] { background: var(--sim-panel); border: 1px solid var(--sim-line); border-radius: 12px; }

/* ---------- welcome / pre-flight ---------- */
.welcome[b-isfyogfbwk] {
    min-height: 100vh; background: var(--sim-bg); color: var(--sim-ink); font-family: var(--sim-sans);
    display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.wcard[b-isfyogfbwk] { max-width: 600px; width: 100%; text-align: center; }
.brandrow[b-isfyogfbwk] { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 1.4rem; }
.dot[b-isfyogfbwk] { width: 8px; height: 8px; border-radius: 50%; background: var(--sim-amber); box-shadow: 0 0 10px var(--sim-amber); }
.running .dot[b-isfyogfbwk] { animation: sim-pulse-b-isfyogfbwk 1.6s ease-in-out infinite; }
@keyframes sim-pulse-b-isfyogfbwk { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .running .dot[b-isfyogfbwk] { animation: none; } }
.brand[b-isfyogfbwk] { font-size: .66rem; letter-spacing: .28em; text-transform: uppercase; color: var(--sim-dim); }
.wtitle[b-isfyogfbwk] { font-size: clamp(2rem, 6vw, 3rem); font-weight: 600; line-height: 1; letter-spacing: -.01em; margin: 0; }
.wtitle .amb[b-isfyogfbwk] { color: var(--sim-amber); text-shadow: 0 0 22px rgba(244, 183, 63, .25); }
.wsub[b-isfyogfbwk] { color: var(--sim-dim); font-size: 1rem; margin: .7rem 0 2rem; }
.glance[b-isfyogfbwk] {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin-bottom: 2rem;
    border: 1px solid var(--sim-line); border-radius: 12px; overflow: hidden; background: var(--sim-panel);
}
.gi[b-isfyogfbwk] { flex: 1; min-width: 96px; padding: .9rem .6rem; border-right: 1px solid var(--sim-line-soft); }
.gi:last-child[b-isfyogfbwk] { border-right: 0; }
.gi .v[b-isfyogfbwk] { font-family: var(--sim-mono); font-size: 1.25rem; font-weight: 500; }
.gi .k[b-isfyogfbwk] { font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sim-muted); margin-top: .25rem; }
.appt[b-isfyogfbwk] {
    display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
    background: var(--sim-panel); border: 1px solid var(--sim-line); border-radius: 12px;
    padding: 1rem 1.2rem; margin-bottom: 1.4rem;
}
.appt .field[b-isfyogfbwk] { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; text-align: left; }
.appt input[type=time][b-isfyogfbwk] {
    font-family: var(--sim-mono); font-size: 1rem; color: var(--sim-ink); background: var(--sim-panel-2);
    border: 1px solid var(--sim-line); border-radius: 8px; padding: .45rem .6rem; color-scheme: dark;
}
.appt .divider[b-isfyogfbwk] { width: 1px; align-self: stretch; background: var(--sim-line-soft); }
.countdown[b-isfyogfbwk] { text-align: left; }
.countdown .v[b-isfyogfbwk] { font-family: var(--sim-mono); font-size: 1.5rem; font-weight: 500; color: var(--sim-amber); }
.countdown .v.idle[b-isfyogfbwk] { color: var(--sim-dim); }
.start[b-isfyogfbwk] {
    width: 100%; background: var(--sim-amber); color: #17110a; border: none; cursor: pointer;
    font-family: var(--sim-sans); font-size: 1.1rem; font-weight: 600; letter-spacing: .01em;
    padding: 1rem; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 10px;
    transition: filter .15s, transform .1s;
}
.start:hover[b-isfyogfbwk] { filter: brightness(1.07); }
.start:active[b-isfyogfbwk] { transform: scale(.99); }
.start:focus-visible[b-isfyogfbwk] { outline: 2px solid var(--sim-amber); outline-offset: 3px; }
.start .ico[b-isfyogfbwk] { font-family: var(--sim-mono); font-weight: 700; }
.wfoot[b-isfyogfbwk] { font-size: .75rem; color: var(--sim-muted); margin-top: 1.1rem; line-height: 1.6; }
.wfoot b[b-isfyogfbwk] { color: var(--sim-dim); font-weight: 500; }
.sched-link[b-isfyogfbwk] {
    background: none; border: none; color: var(--sim-dim); font-family: var(--sim-sans);
    font-size: .8rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
    margin-top: 1rem; padding: 0;
}
.sched-link:hover[b-isfyogfbwk] { color: var(--sim-amber); }
.sched-link:focus-visible[b-isfyogfbwk] { outline: 2px solid var(--sim-amber); outline-offset: 3px; }

/* ---------- live board ---------- */
.board[b-isfyogfbwk] {
    min-height: 100vh; background: var(--sim-bg); color: var(--sim-ink); font-family: var(--sim-sans);
    padding: clamp(.9rem, 2vw, 1.6rem); display: flex; flex-direction: column; gap: 14px;
}
.head[b-isfyogfbwk] { display: grid; grid-template-columns: 1.3fr 1fr auto; gap: 16px; align-items: center; padding: 1rem 1.3rem; }
.clock[b-isfyogfbwk] {
    font-family: var(--sim-mono); font-size: clamp(2.6rem, 7vw, 4.2rem); font-weight: 600; line-height: .9;
    letter-spacing: .01em; color: var(--sim-amber); text-shadow: 0 0 22px rgba(244, 183, 63, .28); font-variant-numeric: tabular-nums;
}
.simdate[b-isfyogfbwk] { font-size: .95rem; color: var(--sim-dim); margin-top: .5rem; }
.status-cell[b-isfyogfbwk] { border-left: 1px solid var(--sim-line-soft); padding-left: 16px; }
.status-big[b-isfyogfbwk] { font-size: 1.7rem; font-weight: 500; line-height: 1; margin-top: .35rem; }
.runbadge[b-isfyogfbwk] {
    display: inline-flex; align-items: center; gap: 8px; padding: .5rem .8rem; border-radius: 9px;
    font-family: var(--sim-mono); font-size: .9rem; background: var(--sim-amber-bg); color: var(--sim-amber);
    border: 1px solid rgba(244, 183, 63, .3); white-space: nowrap;
}
.runbadge i[b-isfyogfbwk] { font-style: normal; }
.next[b-isfyogfbwk] { font-size: .82rem; color: var(--sim-dim); margin-top: .6rem; text-align: right; }
.next b[b-isfyogfbwk] { color: var(--sim-ink); font-family: var(--sim-mono); }
.head-right[b-isfyogfbwk] { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; }
.timeline[b-isfyogfbwk] { padding: .9rem 1.3rem; }
.weeks[b-isfyogfbwk] { display: flex; gap: 8px; margin-top: .7rem; }
.wk[b-isfyogfbwk] {
    flex: 1; border-radius: 8px; border: 1px solid var(--sim-line); background: var(--sim-panel-2);
    padding: .55rem .6rem; display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.wk .n[b-isfyogfbwk] { font-size: .82rem; font-family: var(--sim-mono); }
.wk .s[b-isfyogfbwk] { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sim-muted); }
.wk.done[b-isfyogfbwk] { opacity: .72; }
.wk.done .s[b-isfyogfbwk] { color: var(--sim-green); }
.wk.active[b-isfyogfbwk] { border-color: var(--sim-amber); background: rgba(244, 183, 63, .07); }
.wk.active .s[b-isfyogfbwk] { color: var(--sim-amber); }
.wk.playoff[b-isfyogfbwk] { border-style: dashed; opacity: .6; }
.main[b-isfyogfbwk] { display: grid; grid-template-columns: 1fr 260px; gap: 14px; align-items: start; }
.slate-head[b-isfyogfbwk] { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1.2rem; border-bottom: 1px solid var(--sim-line-soft); }
.slate-head .t[b-isfyogfbwk] { font-size: .95rem; }
.slate-head .c[b-isfyogfbwk] { font-size: .8rem; color: var(--sim-dim); }
.row[b-isfyogfbwk] { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: .72rem 1.2rem; border-bottom: 1px solid var(--sim-line-soft); }
.row:last-child[b-isfyogfbwk] { border-bottom: 0; }
.match[b-isfyogfbwk] { font-family: var(--sim-mono); font-size: 1.02rem; }
.match .at[b-isfyogfbwk] { color: var(--sim-muted); margin: 0 .35rem; }
.fav[b-isfyogfbwk] { color: var(--sim-ink); }
.fav[b-isfyogfbwk]::after { content: "\00a0\25c2"; color: var(--sim-amber); font-size: .7em; }
.dog[b-isfyogfbwk] { color: var(--sim-dim); }
.chip[b-isfyogfbwk] { font-family: var(--sim-mono); font-size: .8rem; padding: .28rem .6rem; border-radius: 7px; white-space: nowrap; letter-spacing: .02em; }
.chip.final[b-isfyogfbwk] { background: rgba(255, 255, 255, .05); color: var(--sim-dim); border: 1px solid var(--sim-line); }
.chip.live[b-isfyogfbwk] { background: var(--sim-red-bg); color: var(--sim-red); border: 1px solid rgba(228, 87, 76, .35); }
.chip.up[b-isfyogfbwk] { background: var(--sim-blue-bg); color: var(--sim-blue); border: 1px solid rgba(90, 169, 230, .3); }
.bar[b-isfyogfbwk] { grid-column: 1 / -1; height: 3px; background: var(--sim-line-soft); border-radius: 2px; overflow: hidden; margin-top: .1rem; }
.bar > i[b-isfyogfbwk] { display: block; height: 100%; background: var(--sim-red); border-radius: 2px; }
.rail[b-isfyogfbwk] { display: flex; flex-direction: column; gap: 12px; }
.stat[b-isfyogfbwk] { padding: .85rem 1rem; }
.stat .v[b-isfyogfbwk] { font-size: 1.5rem; font-weight: 500; margin-top: .2rem; font-family: var(--sim-mono); }
.stat .v small[b-isfyogfbwk] { font-size: .8rem; color: var(--sim-muted); font-family: var(--sim-sans); }
.stat.good .v[b-isfyogfbwk] { color: var(--sim-green); }
.split3[b-isfyogfbwk] { display: flex; gap: 10px; }
.split3 .stat[b-isfyogfbwk] { flex: 1; text-align: center; }
.deck[b-isfyogfbwk] { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; padding: .9rem 1.2rem; }
button.ctl[b-isfyogfbwk] {
    font-family: var(--sim-sans); font-size: .88rem; color: var(--sim-ink); background: var(--sim-panel-2);
    border: 1px solid var(--sim-line); border-radius: 9px; padding: .55rem .85rem; cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px; transition: border-color .15s, background .15s;
}
button.ctl:hover[b-isfyogfbwk] { border-color: var(--sim-amber); background: rgba(244, 183, 63, .06); }
button.ctl:active[b-isfyogfbwk] { transform: scale(.98); }
button.ctl:focus-visible[b-isfyogfbwk] { outline: 2px solid var(--sim-amber); outline-offset: 2px; }
.ico[b-isfyogfbwk] { font-family: var(--sim-mono); font-weight: 700; font-size: .95em; line-height: 1; }
.spacer[b-isfyogfbwk] { margin-left: auto; }
.seg[b-isfyogfbwk] { display: inline-flex; gap: 4px; align-items: center; }
.seg .rate[b-isfyogfbwk] { padding: .5rem .7rem; font-family: var(--sim-mono); }
.seg .rate.on[b-isfyogfbwk] { background: var(--sim-amber-bg); border-color: var(--sim-amber); color: var(--sim-amber); }
button.ctl.danger[b-isfyogfbwk] { color: var(--sim-red); border-color: rgba(228, 87, 76, .35); }
button.ctl.danger:hover[b-isfyogfbwk] { border-color: var(--sim-red); background: var(--sim-red-bg); }
button.ctl.danger.armed[b-isfyogfbwk] { background: var(--sim-red-bg); border-color: var(--sim-red); }
.foot[b-isfyogfbwk] { font-size: .72rem; color: var(--sim-muted); text-align: center; padding-top: .2rem; }
.foot b[b-isfyogfbwk] { color: var(--sim-dim); font-weight: 500; }

/* ---------- full schedule & results modal (sim only) ---------- */
.sched-overlay[b-isfyogfbwk] {
    position: fixed; inset: 0; background: rgba(4, 8, 6, .72); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center; padding: 1.5rem; z-index: 50;
}
.sched-modal[b-isfyogfbwk] {
    width: 100%; max-width: 720px; max-height: 85vh; display: flex; flex-direction: column;
    padding: 1.2rem 1.3rem; gap: .6rem;
}
.sched-head[b-isfyogfbwk] { display: flex; align-items: center; justify-content: space-between; }
.sched-head .t[b-isfyogfbwk] { font-size: 1.05rem; font-weight: 500; }
.sched-close[b-isfyogfbwk] {
    background: none; border: none; color: var(--sim-dim); font-size: 1.1rem; cursor: pointer;
    line-height: 1; padding: .2rem .5rem; border-radius: 6px;
}
.sched-close:hover[b-isfyogfbwk] { color: var(--sim-ink); background: var(--sim-panel-2); }
.sched-close:focus-visible[b-isfyogfbwk] { outline: 2px solid var(--sim-amber); outline-offset: 2px; }
.sched-sub[b-isfyogfbwk] { font-size: .8rem; color: var(--sim-muted); margin: 0; line-height: 1.5; }
.sched-body[b-isfyogfbwk] { overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; padding-right: .3rem; }
.sched-week-h[b-isfyogfbwk] {
    font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sim-amber);
    margin-bottom: .4rem; display: flex; gap: .5rem; align-items: baseline;
}
.sched-week-h .lbl[b-isfyogfbwk] { text-transform: none; letter-spacing: 0; }
.sched-row[b-isfyogfbwk] {
    display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center;
    padding: .5rem 0; border-bottom: 1px solid var(--sim-line-soft); font-size: .92rem;
}
.sched-row:last-child[b-isfyogfbwk] { border-bottom: 0; }
.sched-kick[b-isfyogfbwk] { color: var(--sim-dim); font-size: .78rem; white-space: nowrap; }
.sched-match[b-isfyogfbwk] { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.sched-spread[b-isfyogfbwk] { color: var(--sim-muted); font-size: .75rem; margin-left: .4rem; }
.sched-final[b-isfyogfbwk] { color: var(--sim-ink); }
.sched-upset[b-isfyogfbwk] { padding: .15rem .45rem; font-size: .68rem; }

@media (max-width: 560px) {
    .sched-row[b-isfyogfbwk] { grid-template-columns: 1fr auto; row-gap: 4px; }
    .sched-kick[b-isfyogfbwk] { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
    .head[b-isfyogfbwk] { grid-template-columns: 1fr; gap: 10px; }
    .status-cell[b-isfyogfbwk] { border-left: 0; padding-left: 0; border-top: 1px solid var(--sim-line-soft); padding-top: 12px; }
    .head-right[b-isfyogfbwk] { align-items: flex-start; }
    .next[b-isfyogfbwk] { text-align: left; }
    .main[b-isfyogfbwk] { grid-template-columns: 1fr; }
    .rail[b-isfyogfbwk] { flex-direction: row; flex-wrap: wrap; }
    .rail > *[b-isfyogfbwk] { flex: 1; min-width: 130px; }
}
/* /Components/Pages/Picks.razor.rz.scp.css */
/* Picks page — ported from mockups/picks-mockup.html onto design tokens.
   Structural dimensions (column tracks, sidebar/chip widths) stay in px; all
   color, type, radius, and spacing reference tokens. */

/* ── Pick-as banner (admin acting on a roster player's behalf, spec §6) ── */
.pickas-banner[b-weapuzwx6u] {
    width: 100%;
    max-width: var(--player-max);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    background: var(--blue-bg);
    border-bottom: var(--border-15) solid var(--blue);
    color: var(--blue);
    padding: var(--sp-3) var(--sp-6);
    font-size: var(--fs-13);
    flex-wrap: wrap;
}

.pickas-msg[b-weapuzwx6u] {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.pickas-icon[b-weapuzwx6u] {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    flex-shrink: 0;
}

.pickas-msg strong[b-weapuzwx6u] {
    font-weight: 500;
}

/* God Mode note within the Pick-as banner — crimson to signal locked games are editable (spec §6). */
.pickas-gm[b-weapuzwx6u] {
    margin-left: var(--sp-2);
    padding-left: var(--sp-2);
    border-left: var(--border-1) solid var(--crimson-border);
    color: var(--crimson);
}

.pickas-exit[b-weapuzwx6u] {
    color: var(--blue);
    border: var(--border-1) solid var(--blue);
    border-radius: var(--radius-md);
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-12);
    white-space: nowrap;
    transition: background var(--t-fast) var(--ease);
}

.pickas-exit:hover[b-weapuzwx6u] {
    background: var(--surface);
    text-decoration: none;
}

/* God Mode note shown on your OWN picks (not Pick-as) while a session is open — same crimson
   accent as .pickas-gm, standing alone since there's no impersonation framing needed here. */
.selfgm-banner[b-weapuzwx6u] {
    width: 100%;
    max-width: var(--player-max);
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    background: var(--crimson-bg);
    border-bottom: var(--border-15) solid var(--crimson);
    color: var(--crimson);
    padding: var(--sp-3) var(--sp-6);
    font-size: var(--fs-13);
}

.selfgm-icon[b-weapuzwx6u] {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    flex-shrink: 0;
}

/* ── Payment reminder banner (unpaid buy-in) ── */
.payment-banner[b-weapuzwx6u] {
    width: 100%;
    max-width: var(--player-max);
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    background: var(--gold-bg);
    border-bottom: var(--border-15) solid var(--gold);
    color: var(--gold);
    padding: var(--sp-3) var(--sp-6);
    font-size: var(--fs-13);
    flex-wrap: wrap;
}

.payment-msg[b-weapuzwx6u] {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

/* A plain dollar glyph in place of an icon. Sized up a step so it carries the same weight in
   the banner an icon would; the flex gap on .payment-msg spaces it off the text. Set in the
   currency stack because General Sans draws "$" with a broken bar — see tokens.css. */
.payment-sign[b-weapuzwx6u] {
    font-family: var(--font-currency);
    font-size: var(--fs-16);
    line-height: 1;
    flex-shrink: 0;
}

.picks-page[b-weapuzwx6u] {
    flex: 1;
    width: 100%;
    max-width: var(--player-max);
    margin-inline: auto;
    display: flex;
    align-items: flex-start;
}

/* ── Picks column ── */
.picks-col[b-weapuzwx6u] {
    flex: 1;
    min-width: 0;
    max-width: 880px;
    padding: var(--sp-7) var(--sp-8) var(--sp-10);
}

.week-title-row[b-weapuzwx6u] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}

.tz-note[b-weapuzwx6u] {
    font-size: var(--fs-11);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--ink-soft);
}

.grid-header[b-weapuzwx6u] {
    display: grid;
    grid-template-columns: 1fr 64px 1fr;
    padding: var(--sp-3) 0 var(--sp-2);
    margin-bottom: var(--sp-1);
    border-bottom: var(--border-1) solid var(--border);
}

.gh-left[b-weapuzwx6u],
.gh-right[b-weapuzwx6u],
.gh-mid[b-weapuzwx6u] {
    font-size: var(--fs-11);
    letter-spacing: var(--tracking-extra);
    text-transform: uppercase;
    color: var(--ink-muted);
}

.gh-mid[b-weapuzwx6u] {
    text-align: center;
}

.gh-right[b-weapuzwx6u] {
    text-align: right;
}

.gh-sub[b-weapuzwx6u] {
    font-size: var(--fs-11);
    color: var(--ink-soft);
    margin-left: var(--sp-1);
    text-transform: none;
    letter-spacing: var(--tracking-normal);
}

/* ── Per-game kickoff label ──
   One line per card rather than one heading per shared kickoff time. It owns the vertical rhythm
   of the list: the gap above it separates it from the previous card, the gap below tucks it
   against its own card, so the label reads as belonging to the game under it. .game-card carries
   no bottom margin of its own for exactly that reason. */
.game-time[b-weapuzwx6u] {
    margin-top: var(--sp-5);
    margin-bottom: var(--sp-2);
    font-size: var(--fs-11);
    letter-spacing: var(--tracking-extra);
    text-transform: uppercase;
    color: var(--ink-muted);
}

/* The card's only lock indication, in the center rail (see .mid-lock). Deep red rather than the
   surrounding grey — the lock is the one piece of card state a player can't undo, so it should
   read as such at a glance on a phone. */
.lock-icon-svg[b-weapuzwx6u] {
    width: 11px;
    height: 11px;
    stroke: var(--crimson);
    fill: none;
    stroke-width: 2;
}

/* ── Game card ── */
/* The card itself is only a grid — no border, no surface, no clipping. Each team half is its
   own bordered box and the center column (spread / score) floats free in the gap between them,
   so nothing draws a line above or below the scoring area. */
.game-card[b-weapuzwx6u] {
    display: grid;
    grid-template-columns: 1fr 64px 1fr;
    align-items: stretch;
    gap: var(--sp-2);
    /* Separation from the next game comes from that game's .game-time margin-top, so the label
       always sits closer to its own card than to the one above it. */
    /* The surface lives on the whole row, so one unbroken white stripe runs across both teams
       AND the spread/score column between them. The stripe against the page background is what
       separates one game from the next — there is no rule between them.
       Its stroke is the same width as a team-side's, so the picked/won border can sit directly
       on top of it (see the negative margins below) rather than inside it. */
    background: var(--surface);
    border: var(--border-2) solid var(--border);
    border-radius: var(--radius-xl);
}

.team-side[b-weapuzwx6u] {
    padding: var(--sp-5) var(--sp-6);
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    position: relative;
    /* No surface of its own — the card's white stripe shows through. The border is always here
       holding its space (so picking never nudges the layout by half a pixel) but stays invisible
       until the side is picked or won. */
    background: transparent;
    border: var(--border-2) solid var(--border);
    border-radius: var(--radius-xl);
    /* Pull each half out over the card's stroke on its three outer edges. The two borders are
       the same width, color, and radius, so they land on exactly the same pixels and read as
       one line at rest — picking or winning then recolors that segment of the outline in place
       instead of drawing a second line just inside it. */
    margin-top: calc(-1 * var(--border-2));
    margin-bottom: calc(-1 * var(--border-2));
    /* Keep the two 1fr tracks equal regardless of name length; without this a grid item's
       min-content (a long team name) widens its track and knocks the center rail off-centre. */
    min-width: 0;
    transition: border-color var(--t-fast) var(--ease);
}

/* Hover darkens the border rather than filling the box — a fill would either wash the crest
   or, at --bg, sink the card into the page it sits on. */
.team-side:not(.locked):not(.picked):not(.winner):hover[b-weapuzwx6u] {
    border-color: var(--border-strong);
}

.team-side.locked[b-weapuzwx6u] {
    cursor: default;
}

/* God Mode Pick-as: a locked game an admin may still edit keeps the pointer + hover affordance
   even though the plain .locked state removes it (spec §6 locked-game Pick-as). */
.team-side.locked.gm-editable[b-weapuzwx6u] {
    cursor: pointer;
}

.team-side.locked.gm-editable:not(.picked):not(.winner):hover[b-weapuzwx6u] {
    border-color: var(--border-strong);
}

.team-side.right[b-weapuzwx6u] {
    align-items: flex-end;
    text-align: right;
}

/* Only the outer edge of each half overlaps the card stroke; the inner edges face the
   spread/score column, where there is no card border to sit on. */
.team-side.left[b-weapuzwx6u] {
    margin-left: calc(-1 * var(--border-2));
}

.team-side.right[b-weapuzwx6u] {
    margin-right: calc(-1 * var(--border-2));
}

/* Each half is outlined in light grey at rest; picking and winning recolor that same outline
   rather than adding one, so the box never changes weight or position as its state changes. */
.team-side.picked[b-weapuzwx6u] {
    border-color: var(--blue);
}

.team-side.picked .team-name-full[b-weapuzwx6u] {
    color: var(--blue);
}

/* Declared after .picked deliberately: same specificity, so on a side that is both, source
   order hands the outline to emerald. Never a background fill — the crest stays full color. */
.team-side.winner[b-weapuzwx6u] {
    border-color: var(--emerald);
}

.team-side.winner .team-name-full[b-weapuzwx6u] {
    color: var(--emerald);
}

/* Picked AND correct — the emerald outline says this team won; the name keeps its blue to say
   you were on it. That split is the "I picked right" dual signal spec §6 asks for. */
.team-side.picked.winner .team-name-full[b-weapuzwx6u] {
    color: var(--blue);
}

/* Inline pick/winner tags — sit in the record line rather than as an absolutely-positioned
   corner badge, so they never run out of room and never need hiding at narrow widths (the
   old corner badges were dropped below 540px for exactly that reason). */
.tag[b-weapuzwx6u] {
    font-size: var(--fs-10);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
}

.pick-tag[b-weapuzwx6u] {
    background: var(--blue-bg);
    color: var(--blue-hover);
}

.win-tag[b-weapuzwx6u] {
    background: var(--emerald-bg);
    color: var(--emerald);
}

.team-row[b-weapuzwx6u] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-1);
    /* Take the half's full width rather than sizing to content. .team-side.right sets
       align-items:flex-end, which otherwise leaves this row content-sized — and a content-sized
       row grows to whatever the nickname needs and carries it straight past the card border
       instead of squeezing .team-text (which is what clips, and what the auto-fit measures).
       Row-reverse already packs the home side's crest to the right edge, so nothing else is
       needed to keep the two halves mirrored. */
    width: 100%;
    min-width: 0;
}

.team-side.right .team-row[b-weapuzwx6u] {
    flex-direction: row-reverse;
}

.team-mark[b-weapuzwx6u] {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-11);
    font-weight: 500;
    flex-shrink: 0;
    background: var(--ink);
    color: var(--surface);
}

.team-logo[b-weapuzwx6u] {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    object-fit: contain;
}

.team-text[b-weapuzwx6u] {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    /* Let the text shrink inside its half; the nickname is auto-fit by teamfit.js (kept on one
       line), and overflow:hidden contains the hair of clipping at the smallest floor size. */
    min-width: 0;
    overflow: hidden;
}

.team-side.right .team-text[b-weapuzwx6u] {
    align-items: flex-end;
}

.team-city[b-weapuzwx6u] {
    font-size: var(--fs-13);
    color: var(--ink-soft);
}

.team-name-full[b-weapuzwx6u] {
    font-size: var(--fs-28);
    color: var(--ink);
    letter-spacing: var(--tracking-tight);
    line-height: 1.05;
    /* One line always — teamfit.js shrinks it to fit rather than wrapping. The breakpoint sizes
       below act as the per-width maximum it fits down from. */
    white-space: nowrap;
    /* Backstop, not the mechanism: the name is constrained here on the element itself rather
       than relying on an ancestor's overflow, so a fit that hasn't run yet (or a webfont that
       swaps in wider after it did) ellipsizes inside the card instead of spilling past its
       border. In the normal case teamfit.js has already sized it and none of this applies. */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    /* The 1.05 line-height leaves the line box shorter than the font's own ascent+descent, so the
       overflow above clips the tail of a descender ("Bengals", "Eagles", "Giants") flush with the
       edge of the box. This pads the clip edge clear of them; .team-record below gives back the
       same 4px from its top margin, so the gap under the name is unchanged. */
    padding-bottom: var(--sp-1);
}

/* Season-to-date W-L(-T) under the team name — a quiet secondary detail (spec §3: hierarchy by
   size and color, never weight). Tabular numerals keep the dash and digits steady across cards. */
.team-record[b-weapuzwx6u] {
    /* Flex row rather than inline-flex so it takes the text column's width and can wrap: on a
       phone-width card the record plus both pills won't fit on one line, and .team-text clips
       its overflow (to contain the no-wrap team name), which would otherwise cut a pill off. */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1) var(--sp-2);
    /* Clear of the team name above — the pills sitting directly under it read as crowding,
       and the pill's padding makes the line visually taller than its 12px text. 8px here plus the
       name's 4px of descender padding is the 12px this gap has always been. */
    margin-top: var(--sp-2);
    font-size: var(--fs-12);
    color: var(--ink-soft);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.team-side.right .team-record[b-weapuzwx6u] {
    flex-direction: row-reverse;
}

/* Who picked this team — shown only once the game locks (spec §6 reveal-after-lock), same
   principle as the SB tiebreaker. These are names people actually read, so they take the
   secondary ink rather than the tertiary one. */
.pickers[b-weapuzwx6u] {
    font-size: var(--fs-13);
    color: var(--ink-muted);
    margin-top: var(--sp-3);
    line-height: 1.55;
}

.team-side.right .pickers[b-weapuzwx6u] {
    text-align: right;
}

/* "No picks" — same ink as the names it stands in for; the italic carries the de-emphasis
   instead of a lighter grey, which was unreadable at this size. */
.pickers-empty[b-weapuzwx6u] {
    color: var(--ink-muted);
    font-style: italic;
}

/* ── Center column ── */
/* Deliberately unstyled: no surface and no rules of its own, so the spread/score sits in open
   space between the two team boxes instead of inside a boxed rail. */
.game-middle[b-weapuzwx6u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sp-3) var(--sp-1);
    gap: var(--sp-1);
}

/* Per-game lock indication, above the score/Final label — sits in the center rail so it reads
   on every locked card, not just from the time-block label above the group. */
.mid-lock[b-weapuzwx6u] {
    display: flex;
    color: var(--crimson);
}

/* Connector: "@" when the right team is home, "vs" when the left team hosts. */
.matchup-vs[b-weapuzwx6u] {
    font-size: var(--fs-13);
    color: var(--ink-soft);
    line-height: 1;
}

.spread-val[b-weapuzwx6u] {
    font-size: var(--fs-22);
    color: var(--ink);
    letter-spacing: var(--tracking-snug);
    font-variant-numeric: tabular-nums;
}

.spread-val.pk[b-weapuzwx6u] {
    font-size: var(--fs-14);
    color: var(--ink-muted);
    letter-spacing: var(--tracking-label);
}

.score-display[b-weapuzwx6u] {
    display: flex;
    gap: var(--sp-1);
    align-items: baseline;
    font-size: var(--fs-18);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tracking-snug);
}

.score-sep[b-weapuzwx6u] {
    color: var(--ink-soft);
}

.final-label[b-weapuzwx6u] {
    font-size: var(--fs-10);
    letter-spacing: var(--tracking-extra);
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* In-progress cosmetic live score (spec §6). Gold is the pending/in-progress accent (tokens.css). */
.live-label[b-weapuzwx6u] {
    font-size: var(--fs-10);
    letter-spacing: var(--tracking-extra);
    text-transform: uppercase;
    color: var(--gold);
}

/* Game-clock snapshot under the live score (e.g. "Q3 8:42") — muted, secondary to the score. */
.live-clock[b-weapuzwx6u] {
    font-size: var(--fs-11);
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

.tie-label[b-weapuzwx6u] {
    font-size: var(--fs-10);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--ink-soft);
    text-align: center;
}

/* ── Sidebar ── */
.sidebar[b-weapuzwx6u] {
    width: 280px;
    flex-shrink: 0;
    background: var(--surface);
    border-left: var(--border-1) solid var(--border);
    position: sticky;
    top: 52px;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    padding-bottom: var(--sp-9);
}

.sidebar-section[b-weapuzwx6u] {
    padding: var(--sp-5) var(--sp-6);
    border-bottom: var(--border-1) solid var(--border);
}

.sidebar-section.stats[b-weapuzwx6u] {
    display: flex;
    gap: var(--sp-5);
}

.stat-block[b-weapuzwx6u] {
    flex: 1;
}

.sb-label[b-weapuzwx6u] {
    font-size: var(--fs-10);
    letter-spacing: var(--tracking-extra);
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: var(--sp-2);
}

.stat-val[b-weapuzwx6u] {
    font-size: var(--fs-28);
    color: var(--ink);
    letter-spacing: var(--tracking-tight);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.week-dropdown[b-weapuzwx6u] {
    appearance: none;
    font-family: inherit;
    font-size: var(--fs-17);
    letter-spacing: var(--tracking-snug);
    color: var(--ink);
    background-color: var(--surface);
    border: var(--border-15) solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: var(--sp-2) var(--sp-8) var(--sp-2) var(--sp-3);
    cursor: pointer;
    width: 100%;
    transition: border-color var(--t-fast) var(--ease);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sp-3) center;
}

.week-dropdown:hover[b-weapuzwx6u] {
    border-color: var(--ink-muted);
}

.sidebar-section.standings[b-weapuzwx6u] {
    flex: 1;
}

.sb-heading-row[b-weapuzwx6u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
    flex-wrap: wrap;
}

.sb-heading[b-weapuzwx6u] {
    font-size: var(--fs-20);
    color: var(--ink);
    letter-spacing: var(--tracking-tight);
}

.score-deets-btn[b-weapuzwx6u] {
    background: var(--blue);
    border: var(--border-1) solid var(--blue);
    color: var(--surface);
    border-radius: var(--radius-md);
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-11);
    cursor: pointer;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    flex-shrink: 0;
    font-weight: 500;
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.score-deets-btn:hover[b-weapuzwx6u] {
    background: var(--blue-hover);
    border-color: var(--blue-hover);
}

.lb-toggle[b-weapuzwx6u] {
    display: flex;
    gap: 0;
    background: var(--bg);
    padding: 3px;
    border-radius: var(--radius-xs);
    margin-bottom: var(--sp-3);
}

.lb-toggle button[b-weapuzwx6u] {
    flex: 1;
    padding: var(--sp-2) 0;
    font-size: var(--fs-11);
    border: none;
    cursor: pointer;
    background: transparent;
    color: var(--ink-muted);
    letter-spacing: var(--tracking-label);
    border-radius: var(--radius-xs);
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.lb-toggle button.active[b-weapuzwx6u] {
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.lb-table[b-weapuzwx6u] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-13);
}

.lb-table th[b-weapuzwx6u] {
    text-align: left;
    font-size: var(--fs-10);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--ink-soft);
    padding: var(--sp-2);
    border-bottom: var(--border-1) solid var(--border);
    font-weight: 400;
}

.lb-table th:last-child[b-weapuzwx6u] {
    text-align: right;
}

.lb-table td[b-weapuzwx6u] {
    padding: var(--sp-2);
    border-bottom: var(--border-1) solid var(--border);
    color: var(--ink-muted);
}

.lb-table td:last-child[b-weapuzwx6u] {
    text-align: right;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.lb-table tr.me[b-weapuzwx6u] {
    background: var(--blue-bg);
}

.lb-table tr.me td[b-weapuzwx6u] {
    color: var(--ink);
}

.lb-table tr:last-child td[b-weapuzwx6u] {
    border-bottom: none;
}

.lb-rank[b-weapuzwx6u] {
    color: var(--ink-soft);
    font-size: var(--fs-11);
    width: 34px;
    font-variant-numeric: tabular-nums;
}

/* ── In the money ──
   A paying place is marked on the rank itself rather than by tinting the row: a row tint would
   collide with the blue "me" band, and in a 15-row table several tinted bands read as noise.
   Contested is the same box drawn hollow — the player is in a tie straddling the last paying
   place, so the money is real but not yet theirs.

   Every rank gets this box, including unmarked ones, which is what keeps the column aligned: the
   border and padding are reserved on all rows and only painted on the marked ones. */
.lb-place[b-weapuzwx6u] {
    display: inline-block;
    min-width: 26px;
    padding: 1px 3px;
    text-align: center;
    border: var(--border-1) solid transparent;
    border-radius: var(--radius-xs);
}

.lb-place.pays[b-weapuzwx6u] {
    background: var(--emerald-bg);
    border-color: var(--emerald-border);
    color: var(--emerald);
}

.lb-place.pays.contested[b-weapuzwx6u] {
    background: transparent;
    border-style: dashed;
    border-color: var(--emerald);
}

.lb-contested-note[b-weapuzwx6u] {
    margin-top: var(--sp-3);
    font-size: var(--fs-11);
    color: var(--ink-soft);
    line-height: 1.45;
}

.lb-rules-link[b-weapuzwx6u] {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.lb-rules-link:hover[b-weapuzwx6u] {
    color: var(--ink-muted);
}

/* ── Best-week bonus front-runner, sits under the standings table ── */
.bw-panel[b-weapuzwx6u] {
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: var(--border-1) solid var(--border);
}

.bw-leader[b-weapuzwx6u] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-top: var(--sp-2);
}

.bw-who[b-weapuzwx6u] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.bw-name[b-weapuzwx6u] {
    font-size: var(--fs-14);
    color: var(--ink);
}

.bw-leader.me .bw-name[b-weapuzwx6u] {
    color: var(--blue);
}

.bw-week[b-weapuzwx6u] {
    font-size: var(--fs-11);
    color: var(--ink-soft);
}

.bw-pts[b-weapuzwx6u] {
    font-size: var(--fs-13);
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

.bw-note[b-weapuzwx6u] {
    margin-top: var(--sp-2);
    font-size: var(--fs-11);
    color: var(--ink-soft);
}

/* ── Narrow two-column band: keep the sidebar as long as it fits (769–880) ──
   Slim the sidebar and compact the cards so the side-by-side layout survives down to
   ~768px rather than collapsing early. Below this the layout stacks (see next block). */
@media (min-width: 769px) and (max-width: 880px) {
    .picks-col[b-weapuzwx6u] {
        padding: var(--sp-6) var(--sp-5) var(--sp-9);
    }

    .sidebar[b-weapuzwx6u] {
        width: 232px;
    }

    /* The center rail is deliberately NOT compacted here — it keeps the desktop 64px track and
       --sp-2 gap. Narrowing it to 52px/--sp-1 left a two-digit final score under 5px clear of
       both team outlines, the same crowding the phone block below had. Everything else in this
       band still compacts; the rail is the one part with no slack to give. */

    .team-side[b-weapuzwx6u] {
        padding: var(--sp-4);
    }

    .team-logo[b-weapuzwx6u],
    .team-mark[b-weapuzwx6u] {
        width: 38px;
        height: 38px;
    }

    .team-name-full[b-weapuzwx6u] {
        font-size: var(--fs-22);
    }

    .spread-val[b-weapuzwx6u] {
        font-size: var(--fs-18);
    }
}

/* ── Responsive: interleave the sidebar around the picks when it no longer fits ──
   On narrow widths the week picker + picked/max stats move above the picks and the
   standings drop below them. The sidebar box is flattened with display:contents so its
   sections join the page column flow and can be reordered independently. */
@media (max-width: 768px) {
    .picks-page[b-weapuzwx6u] {
        flex-direction: column;
        /* Column flow inherits align-items:flex-start from the desktop row layout, which would
           shrink the hoisted sections to content width — stretch them to the full viewport. */
        align-items: stretch;
    }

    .picks-col[b-weapuzwx6u] {
        max-width: none;
        width: 100%;
        padding: var(--sp-5) var(--sp-4) var(--sp-4);
        order: 2;
    }

    .sidebar[b-weapuzwx6u] {
        display: contents;
    }

    .sidebar-section[b-weapuzwx6u] {
        padding-left: var(--sp-4);
        padding-right: var(--sp-4);
    }

    .week-selector-section[b-weapuzwx6u] {
        order: 0;
    }

    .sidebar-section.stats[b-weapuzwx6u] {
        order: 1;
    }

    .sidebar-section.standings[b-weapuzwx6u] {
        order: 3;
        border-top: var(--border-1) solid var(--border);
        /* Reset the desktop flex:1 (which fills the sidebar column) so the section is only as
           tall as its content and doesn't leave a gap above the footer. */
        flex: 0 0 auto;
    }
}

/* ── Phone widths: stack the crest above the name so the name gets the full half ──
   Side by side, the crest and row gap take ~42px of a ~120px half, leaving the longest
   nicknames ("Commanders"/"Buccaneers") about 79px at 390px — narrow enough that auto-fit has
   to push them under 16px. Stacking the crest hands the name that width back (about +50%), so
   the same names sit near the block's base size instead of being shrunk to fit. The chrome
   around them is trimmed at the same time: every px off the padding, the center column and the
   page gutter is a px the name gets. */
@media (max-width: 540px) {
    .picks-col[b-weapuzwx6u] {
        padding-left: var(--sp-3);
        padding-right: var(--sp-3);
    }

    /* The center track has to clear the widest thing that ever sits in it: a two-digit final
       score ("26 – 16"), about 46px at this size. At 40px it didn't — the score overran the
       track and came within a px or two of both team outlines. Sized past that worst case and
       given a real gap on each side, so the outlines sit back from the score instead of
       crowding it. The ~12px each half gives up is absorbed by teamfit.js. */
    .game-card[b-weapuzwx6u] {
        grid-template-columns: 1fr 56px 1fr;
        gap: var(--sp-2);
    }

    .team-side[b-weapuzwx6u] {
        padding: var(--sp-3) var(--sp-2);
    }

    /* Crest over text. The row keeps its edge alignment (left half left, right half right) so
       the two halves still mirror each other across the spread column. */
    .team-row[b-weapuzwx6u] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-2);
    }

    .team-side.right .team-row[b-weapuzwx6u] {
        flex-direction: column;
        align-items: flex-end;
    }

    /* Full width of the half now that nothing sits beside it. */
    .team-text[b-weapuzwx6u] {
        width: 100%;
    }

    .team-mark[b-weapuzwx6u],
    .team-logo[b-weapuzwx6u] {
        width: 34px;
        height: 34px;
    }

    .game-middle[b-weapuzwx6u] {
        padding: var(--sp-3) 0;
    }

    .team-name-full[b-weapuzwx6u] {
        font-size: var(--fs-22);
    }

    .spread-val[b-weapuzwx6u] {
        font-size: var(--fs-18);
    }

    .score-display[b-weapuzwx6u] {
        font-size: var(--fs-16);
    }

    .week-dropdown[b-weapuzwx6u] {
        font-size: var(--fs-22);
    }
}

/* ── Very small phones: ease the name/crest down a step ──
   Above 400px covers the 402/430/440px iPhones, which previously sat in the band above this
   one and kept the larger crest. */
@media (max-width: 380px) {
    .team-mark[b-weapuzwx6u],
    .team-logo[b-weapuzwx6u] {
        width: 30px;
        height: 30px;
    }

    .team-name-full[b-weapuzwx6u] {
        font-size: var(--fs-20);
    }
}

/* ── Super Bowl tiebreaker card (spec §3 / §6) ──
   Sits at the foot of the picks column on Super Bowl week only. Gold is the tiebreaker's accent
   (design-notes §2), carried by the top rule and the eyebrow; the card is otherwise a plain
   surface so it reads as a companion to the game cards above it rather than an alert. */
.tiebreaker-card[b-weapuzwx6u] {
    position: relative;
    margin-top: var(--sp-6);
    padding: var(--sp-5) var(--sp-5);
    background: var(--surface);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-2xl);
}

/* A short gold rule inset from the corners, matching the card's radius rather than running
   the full width — the same treatment the mockup uses to accent the card without a filled bar. */
.tiebreaker-card[b-weapuzwx6u]::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--sp-5);
    right: var(--sp-5);
    height: 3px;
    background: var(--gold);
    border-radius: 0 0 3px 3px;
}

.tb-eyebrow[b-weapuzwx6u] {
    font-size: var(--fs-10);
    letter-spacing: var(--tracking-extra);
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: var(--sp-1);
}

.tb-title[b-weapuzwx6u] {
    font-size: var(--fs-18);
    color: var(--ink);
    letter-spacing: var(--tracking-snug);
}

.tb-sub[b-weapuzwx6u] {
    margin-top: var(--sp-2);
    font-size: var(--fs-13);
    line-height: 1.5;
    color: var(--ink-muted);
}

.tb-input-row[b-weapuzwx6u] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-top: var(--sp-4);
}

.tb-input[b-weapuzwx6u] {
    width: 130px;
    padding: var(--sp-2) var(--sp-4);
    font-family: inherit;
    font-size: var(--fs-28);
    font-weight: 500;
    text-align: center;
    letter-spacing: var(--tracking-snug);
    color: var(--ink);
    background: var(--bg);
    border: var(--border-15) solid var(--border-strong);
    border-radius: var(--radius-xl);
}

.tb-input:focus[b-weapuzwx6u] {
    outline: none;
    background: var(--surface);
    border-color: var(--blue);
}

.tb-input-label[b-weapuzwx6u] {
    font-size: var(--fs-13);
    color: var(--ink-muted);
}

.tb-saved-pill[b-weapuzwx6u] {
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-11);
    letter-spacing: var(--tracking-label);
    color: var(--emerald);
    background: var(--emerald-bg);
    border-radius: var(--radius-pill);
}

.tb-saved-pill[b-weapuzwx6u]::before {
    content: '✓ ';
}

.tb-meta[b-weapuzwx6u] {
    margin-top: var(--sp-3);
    font-size: var(--fs-12);
    color: var(--ink-soft);
}

/* God Mode is the one way the input survives kickoff, so the note takes the God Mode accent. */
.tb-meta-gm[b-weapuzwx6u] {
    color: var(--crimson);
}

/* ── Post-kickoff reveal ── */
.predictions-block[b-weapuzwx6u] {
    margin-top: var(--sp-4);
}

/* Once the input is gone the reveal is the card's whole body and needs no rule above it;
   while God Mode keeps the input up, the reveal reads as a second section and does. */
.tb-input-row ~ .predictions-block[b-weapuzwx6u] {
    padding-top: var(--sp-4);
    border-top: var(--border-1) solid var(--border);
}

.pred-title[b-weapuzwx6u] {
    margin-bottom: var(--sp-3);
    font-size: var(--fs-13);
    color: var(--ink);
}

.pred-table[b-weapuzwx6u] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 var(--sp-4);
    font-size: var(--fs-13);
}

.pred-row[b-weapuzwx6u] {
    display: contents;
}

.pred-row > div[b-weapuzwx6u] {
    padding: var(--sp-2) 0;
    border-bottom: var(--border-1) solid var(--border);
}

.pred-row:last-child > div[b-weapuzwx6u] {
    border-bottom: none;
}

.pred-name[b-weapuzwx6u] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--ink);
}

/* Blue is the logged-in player everywhere else on this page (design-notes §2), so their own
   row is marked the same way the leaderboard marks it. */
.pred-name.self[b-weapuzwx6u] {
    color: var(--blue);
}

.pred-name.self[b-weapuzwx6u]::before {
    content: '●';
    font-size: 9px;
    color: var(--blue);
}

.pred-value[b-weapuzwx6u] {
    text-align: right;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.pred-empty[b-weapuzwx6u] {
    font-size: var(--fs-13);
    color: var(--ink-soft);
}

.pred-actual[b-weapuzwx6u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-top: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-13);
    color: var(--ink-muted);
    background: var(--bg);
    border: var(--border-1) dashed var(--border-strong);
    border-radius: var(--radius-xl);
}

.pred-actual-val[b-weapuzwx6u] {
    font-size: var(--fs-18);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* The game-clock stand-in while the Super Bowl is under way — smaller and softer than the total
   it replaces, so a finished score still reads as the louder value. */
.pred-actual-clock[b-weapuzwx6u] {
    font-size: var(--fs-13);
    color: var(--ink-soft);
}

/* Phone widths: the card keeps the game cards' tighter gutters, and the big numeral input goes
   full-width so it isn't a small target next to a wrapped label. */
@media (max-width: 768px) {
    .tiebreaker-card[b-weapuzwx6u] {
        padding: var(--sp-4);
    }

    .tiebreaker-card[b-weapuzwx6u]::before {
        left: var(--sp-4);
        right: var(--sp-4);
    }

    .tb-input[b-weapuzwx6u] {
        width: 100%;
    }
}
/* /Components/Pages/ScoreDetailsModal.razor.rz.scp.css */
/* Score Details modal — ported from mockups/picks-mockup.html onto tokens. */

.modal-overlay[b-widyzmbl7e] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 500;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--sp-6);
    overflow-y: auto;
}

.modal[b-widyzmbl7e] {
    background: var(--surface);
    width: 100%;
    max-width: 1200px;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    margin: auto;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 48px);
}

.modal-header[b-widyzmbl7e] {
    padding: var(--sp-5) var(--sp-7) var(--sp-4);
    border-bottom: var(--border-1) solid var(--border);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-shrink: 0;
}

.modal-title[b-widyzmbl7e] {
    font-size: var(--fs-26);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
    line-height: 1;
}

.modal-close[b-widyzmbl7e] {
    width: 36px;
    height: 36px;
    background: var(--bg);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-lg);
    font-size: var(--fs-22);
    color: var(--ink-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
    line-height: 1;
}

.modal-close:hover[b-widyzmbl7e] {
    background: var(--surface);
    border-color: var(--ink-muted);
    color: var(--ink);
}

.modal-body[b-widyzmbl7e] {
    padding: var(--sp-6) var(--sp-7) var(--sp-7);
    overflow-y: auto;
    flex: 1;
}

/* ── Stats strip ── */
.stats-strip[b-widyzmbl7e] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
}

.stat-card[b-widyzmbl7e] {
    background: var(--surface);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.stat-label[b-widyzmbl7e] {
    font-size: var(--fs-10);
    letter-spacing: var(--tracking-extra);
    text-transform: uppercase;
    color: var(--ink-soft);
}

.stat-main[b-widyzmbl7e] {
    font-size: var(--fs-20);
    color: var(--ink);
    letter-spacing: var(--tracking-snug);
    line-height: 1.1;
}

.stat-sub[b-widyzmbl7e] {
    font-size: var(--fs-12);
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}

.stat-card.bonus[b-widyzmbl7e] {
    border-color: var(--gold);
    background: var(--gold-bg);
}

.stat-card.bonus .stat-label[b-widyzmbl7e] {
    color: var(--gold);
}

.stat-card.you[b-widyzmbl7e] {
    background: var(--blue-bg);
    border-color: var(--blue);
}

.stat-card.you .stat-label[b-widyzmbl7e],
.stat-card.you .stat-main[b-widyzmbl7e] {
    color: var(--blue);
}

/* ── Section wrapper ── */
.modal-section[b-widyzmbl7e] {
    background: var(--surface);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-2xl);
    padding: var(--sp-5) var(--sp-6);
    margin-bottom: var(--sp-4);
}

.modal-section-header[b-widyzmbl7e] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--sp-4);
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.modal-section-title[b-widyzmbl7e] {
    font-size: var(--fs-16);
    letter-spacing: var(--tracking-snug);
    color: var(--ink);
}

.modal-section-sub[b-widyzmbl7e] {
    font-size: var(--fs-12);
    color: var(--ink-muted);
}

/* ── Bump chart ── */
.bump-wrap[b-widyzmbl7e] {
    overflow-x: auto;
}

.bump-chart[b-widyzmbl7e] {
    display: block;
    width: 100%;
    min-width: 640px;
    height: 340px;
}

/* The chart's inner elements are injected as raw markup (MarkupString), so they
   carry no scoped-CSS attribute — reach them with ::deep from the scoped <svg>. */
.bump-chart[b-widyzmbl7e]  .bump-line {
    fill: none;
    stroke-width: 1.5;
    stroke: var(--ink-faint);
    opacity: 0.7;
}

.bump-chart[b-widyzmbl7e]  .bump-line.me {
    stroke: var(--blue);
    stroke-width: 2.5;
    opacity: 1;
}

.bump-chart[b-widyzmbl7e]  .bump-dot {
    fill: var(--surface);
    stroke-width: 1.5;
    stroke: var(--ink-soft);
}

.bump-chart[b-widyzmbl7e]  .bump-dot.me {
    stroke: var(--blue);
}

.bump-chart[b-widyzmbl7e]  .bump-axis {
    font-size: var(--fs-10);
    fill: var(--ink-soft);
    letter-spacing: var(--tracking-label);
}

.bump-chart[b-widyzmbl7e]  .bump-label {
    font-size: var(--fs-11);
    fill: var(--ink-muted);
}

.bump-chart[b-widyzmbl7e]  .bump-label.me {
    fill: var(--blue);
}

.bump-chart[b-widyzmbl7e]  .bump-grid {
    stroke: var(--border);
}

/* Hovering a name at the right edge pulls that player's line out of the tangle:
   the rest of the field fades back, theirs stays at full strength. */
.bump-chart[b-widyzmbl7e]  .bump-label {
    cursor: pointer;
}

.bump-chart[b-widyzmbl7e]  .bump-series {
    transition: opacity var(--t-fast) var(--ease);
}

.bump-chart[b-widyzmbl7e]  .bump-plot:has(.bump-label:hover) .bump-series {
    opacity: 0.2;
}

/* Same specificity shape as the rule above (.bump-plot ancestor + :has()) so this
   wins the cascade tie by source order and un-fades the hovered series. */
.bump-chart[b-widyzmbl7e]  .bump-plot .bump-series:has(.bump-label:hover) {
    opacity: 1;
}

.bump-chart[b-widyzmbl7e]  .bump-series:has(.bump-label:hover) .bump-line {
    stroke-width: 2.5;
    opacity: 1;
}

.bump-chart[b-widyzmbl7e]  .bump-series:not(.me):has(.bump-label:hover) .bump-line,
.bump-chart[b-widyzmbl7e]  .bump-series:not(.me):has(.bump-label:hover) .bump-dot {
    stroke: var(--ink-soft);
}

.bump-chart[b-widyzmbl7e]  .bump-series:not(.me):has(.bump-label:hover) .bump-label {
    fill: var(--ink);
}

/* ── Heat-map ── */
.heat-wrap[b-widyzmbl7e] {
    overflow-x: auto;
}

.heat-table[b-widyzmbl7e] {
    border-collapse: separate;
    border-spacing: 2px;
    font-variant-numeric: tabular-nums;
    width: 100%;
}

.heat-table th[b-widyzmbl7e],
.heat-table td[b-widyzmbl7e] {
    text-align: center;
    font-size: var(--fs-12);
}

.heat-table th[b-widyzmbl7e] {
    font-size: var(--fs-10);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--ink-soft);
    padding: var(--sp-2) var(--sp-1) var(--sp-3);
    font-weight: 400;
    white-space: nowrap;
}

.heat-table th.rank-col[b-widyzmbl7e],
.heat-table th.name-col[b-widyzmbl7e] {
    text-align: left;
    padding-left: var(--sp-3);
}

.heat-table th.total-col[b-widyzmbl7e] {
    padding-right: var(--sp-3);
    text-align: right;
}

.heat-rank[b-widyzmbl7e] {
    width: 28px;
    padding: var(--sp-2) 0 var(--sp-2) var(--sp-2);
    font-size: var(--fs-12);
    color: var(--ink-soft);
    text-align: left;
}

.heat-name[b-widyzmbl7e] {
    padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-3);
    font-size: var(--fs-14);
    color: var(--ink);
    text-align: left;
    background: var(--surface);
    position: sticky;
    left: 0;
    border-right: var(--border-1) solid var(--border);
    min-width: 96px;
    z-index: 1;
}

.heat-cell[b-widyzmbl7e] {
    width: 40px;
    height: 34px;
    border-radius: var(--radius-xs);
    color: var(--ink);
}

.heat-cell.best[b-widyzmbl7e] {
    box-shadow: inset 0 0 0 2px var(--gold);
}

/* Neutral intensity ramp built from the ink scale (token-only). */
.heat-l0[b-widyzmbl7e] { background: var(--bg);        color: var(--ink-soft); }
.heat-l1[b-widyzmbl7e] { background: var(--border);    color: var(--ink-muted); }
.heat-l2[b-widyzmbl7e] { background: var(--ink-faint); color: var(--ink); }
.heat-l3[b-widyzmbl7e] { background: var(--ink-soft);  color: var(--surface); }
.heat-l4[b-widyzmbl7e] { background: var(--ink-muted); color: var(--surface); }
.heat-l5[b-widyzmbl7e] { background: var(--ink);       color: var(--surface); }

.heat-total[b-widyzmbl7e] {
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-15);
    color: var(--ink);
    text-align: right;
    border-left: var(--border-1) solid var(--border);
    min-width: 60px;
}

.heat-row.me .heat-name[b-widyzmbl7e],
.heat-row.me .heat-rank[b-widyzmbl7e],
.heat-row.me .heat-total[b-widyzmbl7e] {
    background: var(--blue-bg);
    color: var(--blue);
}

/* Kim Jong Un — virtual perfect-picks reference row, separated by a dashed rule. */
.heat-row.kju .heat-name[b-widyzmbl7e],
.heat-row.kju .heat-rank[b-widyzmbl7e],
.heat-row.kju .heat-total[b-widyzmbl7e] {
    background: var(--bg);
    border-bottom: var(--border-15) dashed var(--border-strong);
    color: var(--ink-muted);
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .modal-overlay[b-widyzmbl7e] {
        padding: var(--sp-3);
    }

    .modal-body[b-widyzmbl7e] {
        padding: var(--sp-4) var(--sp-4) var(--sp-5);
    }

    .stats-strip[b-widyzmbl7e] {
        grid-template-columns: repeat(2, 1fr);
    }

    .modal-title[b-widyzmbl7e] {
        font-size: var(--fs-22);
    }
}
/* /Components/Pages/SeasonClosedSummary.razor.rz.scp.css */
/* Closed-season summary — ported from mockups/season-closed-mockup.html onto tokens. */

.scs-page[b-zemki5nzaf] {
    padding: var(--sp-7) var(--sp-8) var(--sp-10);
    max-width: 1040px;
    margin: 0 auto;
}

/* ── Page top ── */
.page-top[b-zemki5nzaf] {
    margin-bottom: var(--sp-6);
}

.page-eyebrow[b-zemki5nzaf] {
    font-size: var(--fs-11);
    letter-spacing: var(--tracking-extra);
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: var(--sp-2);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.state-pill[b-zemki5nzaf] {
    font-size: var(--fs-10);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    padding: 2px var(--sp-3);
    border-radius: var(--radius-pill);
}

.state-pill.closed[b-zemki5nzaf] {
    background: var(--border);
    color: var(--ink-muted);
    border: var(--border-1) solid var(--border-strong);
}

.page-title[b-zemki5nzaf] {
    font-size: var(--fs-26);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
}

/* ── "You" banner ── */
.you-banner[b-zemki5nzaf] {
    background: var(--blue-bg);
    border: var(--border-1) solid var(--blue);
    border-radius: var(--radius-2xl);
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-4);
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
}

.you-label[b-zemki5nzaf] {
    font-size: var(--fs-11);
    letter-spacing: var(--tracking-extra);
    text-transform: uppercase;
    color: var(--blue);
}

.you-rank[b-zemki5nzaf] {
    font-size: var(--fs-20);
    color: var(--blue);
    letter-spacing: var(--tracking-snug);
}

.you-detail[b-zemki5nzaf] {
    font-size: var(--fs-13);
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}

/* ── Champion hero ── */
.champion-card[b-zemki5nzaf] {
    background: var(--emerald-bg);
    border: var(--border-1) solid var(--emerald-border);
    border-radius: var(--radius-2xl);
    padding: var(--sp-6) var(--sp-7);
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    flex-wrap: wrap;
    margin-bottom: var(--sp-4);
}

.champion-icon[b-zemki5nzaf] {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-circle);
    flex-shrink: 0;
    background: var(--emerald);
    display: flex;
    align-items: center;
    justify-content: center;
}

.champion-icon svg[b-zemki5nzaf] {
    width: 28px;
    height: 28px;
    stroke: white;
}

.champion-body[b-zemki5nzaf] {
    flex: 1;
    min-width: 200px;
}

.champion-eyebrow[b-zemki5nzaf] {
    font-size: var(--fs-11);
    letter-spacing: var(--tracking-extra);
    text-transform: uppercase;
    color: var(--emerald);
    margin-bottom: var(--sp-1);
}

.champion-name[b-zemki5nzaf] {
    font-size: var(--fs-28);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
    line-height: 1.05;
}

.champion-sub[b-zemki5nzaf] {
    font-size: var(--fs-13);
    color: var(--ink-muted);
    margin-top: var(--sp-2);
    font-variant-numeric: tabular-nums;
}

.champion-runnersup[b-zemki5nzaf] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.ru-row[b-zemki5nzaf] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--fs-13);
    background: var(--surface);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-2) var(--sp-3);
    min-width: 210px;
}

.ru-rank[b-zemki5nzaf] {
    color: var(--ink-soft);
    font-size: var(--fs-11);
    width: 26px;
}

.ru-name[b-zemki5nzaf] {
    color: var(--ink);
    flex: 1;
}

.ru-pts[b-zemki5nzaf] {
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}

/* ── Section wrapper ── */
.scs-section[b-zemki5nzaf] {
    margin-bottom: var(--sp-6);
}

.scs-section-head[b-zemki5nzaf] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--sp-4);
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.scs-section-title[b-zemki5nzaf] {
    font-size: var(--fs-18);
    letter-spacing: var(--tracking-snug);
    color: var(--ink);
}

.scs-section-sub[b-zemki5nzaf] {
    font-size: var(--fs-12);
    color: var(--ink-muted);
}

/* ── Prize cards ── */
.prize-card[b-zemki5nzaf] {
    background: var(--surface);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-2xl);
    margin-bottom: var(--sp-3);
    overflow: hidden;
}

.prize-card-header[b-zemki5nzaf] {
    background: var(--card-header-bg);
    color: white;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-5);
}

.prize-label[b-zemki5nzaf] {
    font-size: var(--fs-15);
    color: white;
}

.prize-badge[b-zemki5nzaf] {
    font-size: var(--fs-10);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    padding: 2px var(--sp-3);
    border-radius: var(--radius-pill);
}

.prize-badge.main[b-zemki5nzaf] {
    background: rgba(255, 255, 255, .14);
    color: #c0d4ff;
    border: var(--border-1) solid rgba(255, 255, 255, .24);
}

.prize-badge.secondary[b-zemki5nzaf] {
    background: rgba(255, 255, 255, .08);
    color: #aab4c8;
    border: var(--border-1) solid rgba(255, 255, 255, .16);
}

.prize-amount-block[b-zemki5nzaf] {
    margin-left: auto;
    text-align: right;
}

.prize-amount[b-zemki5nzaf] {
    font-size: var(--fs-17);
    color: #6ee7b7;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.prize-card-body[b-zemki5nzaf] {
    padding: var(--sp-4) var(--sp-5) var(--sp-4);
}

.prize-rule[b-zemki5nzaf] {
    font-size: var(--fs-12);
    color: var(--ink-muted);
    margin-bottom: var(--sp-3);
}

.prize-winner-name[b-zemki5nzaf] {
    font-size: var(--fs-14);
    color: var(--ink);
}

.prize-winner-sub[b-zemki5nzaf] {
    font-size: var(--fs-12);
    color: var(--ink-muted);
    margin-top: 2px;
}

.prize-pending[b-zemki5nzaf] {
    font-size: var(--fs-12);
    color: var(--ink-soft);
    font-style: italic;
}

/* The per-player share when a tie the tiebreaker couldn't separate split a prize. Gold, because
   this is the tiebreaker's doing (design-notes §2), and above the detail line since the money is
   what a reader is looking for. */
.prize-split[b-zemki5nzaf] {
    font-size: var(--fs-13);
    color: var(--gold);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

/* ── Final standings ── */
.standings-wrap[b-zemki5nzaf] {
    background: var(--surface);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-2xl);
    overflow: hidden;
}

.standings-table[b-zemki5nzaf] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-13);
}

.standings-table th[b-zemki5nzaf] {
    text-align: left;
    font-size: var(--fs-10);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--ink-soft);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: var(--border-1) solid var(--border);
    font-weight: 400;
}

.standings-table th.num[b-zemki5nzaf],
.standings-table td.num[b-zemki5nzaf] {
    text-align: right;
}

.standings-table td[b-zemki5nzaf] {
    padding: var(--sp-2) var(--sp-4);
    border-bottom: var(--border-1) solid var(--border);
    color: var(--ink-muted);
}

.standings-table tr:last-child td[b-zemki5nzaf] {
    border-bottom: none;
}

.standings-table tr.me[b-zemki5nzaf] {
    background: var(--blue-bg);
}

.standings-table tr.me td[b-zemki5nzaf] {
    color: var(--ink);
}

.standings-table tr.champion[b-zemki5nzaf] {
    background: var(--emerald-bg);
}

.st-rank[b-zemki5nzaf] {
    color: var(--ink-soft);
    font-size: var(--fs-12);
    width: 30px;
}

.standings-table tr.champion .st-rank[b-zemki5nzaf] {
    color: var(--emerald);
}

.st-name[b-zemki5nzaf] {
    color: var(--ink);
}

.st-total[b-zemki5nzaf] {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-14);
}

.st-back[b-zemki5nzaf] {
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

/* ── Tiebreaker recap ── */
.tiebreaker-recap[b-zemki5nzaf] {
    background: var(--surface);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-2xl);
    padding: var(--sp-5) var(--sp-6);
    margin-bottom: var(--sp-6);
    position: relative;
}

.tiebreaker-recap[b-zemki5nzaf]::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--sp-5);
    right: var(--sp-5);
    height: 3px;
    background: var(--gold);
    border-radius: 0 0 3px 3px;
}

.tb-eyebrow[b-zemki5nzaf] {
    font-size: var(--fs-10);
    letter-spacing: var(--tracking-extra);
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: var(--sp-2);
}

.tb-title[b-zemki5nzaf] {
    font-size: var(--fs-16);
    color: var(--ink);
    letter-spacing: var(--tracking-snug);
}

.tb-sub[b-zemki5nzaf] {
    font-size: var(--fs-13);
    color: var(--ink-muted);
    margin-top: var(--sp-2);
    line-height: 1.5;
}

.pred-table[b-zemki5nzaf] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0 var(--sp-4);
    font-size: var(--fs-13);
    margin-top: var(--sp-4);
}

.pred-row[b-zemki5nzaf] {
    display: contents;
}

.pred-row > div[b-zemki5nzaf] {
    padding: var(--sp-2) 0;
    border-bottom: var(--border-1) solid var(--border);
}

.pred-row:last-child > div[b-zemki5nzaf] {
    border-bottom: none;
}

.pred-name[b-zemki5nzaf] {
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.pred-name.self[b-zemki5nzaf] {
    color: var(--blue);
}

.pred-name.self[b-zemki5nzaf]::before {
    content: '●';
    color: var(--blue);
    font-size: 9px;
}

.pred-value[b-zemki5nzaf] {
    text-align: right;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}

.pred-win[b-zemki5nzaf] {
    text-align: right;
    font-size: var(--fs-10);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--emerald);
}

.pred-actual[b-zemki5nzaf] {
    margin-top: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg);
    border: var(--border-15) dashed var(--border-strong);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--fs-13);
    color: var(--ink-muted);
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.pred-actual-val[b-zemki5nzaf] {
    font-size: var(--fs-17);
    color: var(--ink);
}

/* ── Chart section wrapper (reused for bump chart + heat-map) ── */
.modal-section[b-zemki5nzaf] {
    background: var(--surface);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-2xl);
    padding: var(--sp-5) var(--sp-6);
}

/* ── Bump chart ── */
.bump-wrap[b-zemki5nzaf] {
    overflow-x: auto;
}

.bump-chart[b-zemki5nzaf] {
    display: block;
    width: 100%;
    min-width: 640px;
    height: 340px;
}

/* The chart's inner elements are injected as raw markup (MarkupString), so they
   carry no scoped-CSS attribute — reach them with ::deep from the scoped <svg>. */
.bump-chart[b-zemki5nzaf]  .bump-line {
    fill: none;
    stroke-width: 1.5;
    stroke: var(--ink-faint);
    opacity: 0.7;
}

.bump-chart[b-zemki5nzaf]  .bump-line.me {
    stroke: var(--blue);
    stroke-width: 2.5;
    opacity: 1;
}

.bump-chart[b-zemki5nzaf]  .bump-dot {
    fill: var(--surface);
    stroke-width: 1.5;
    stroke: var(--ink-soft);
}

.bump-chart[b-zemki5nzaf]  .bump-dot.me {
    stroke: var(--blue);
}

.bump-chart[b-zemki5nzaf]  .bump-axis {
    font-size: var(--fs-10);
    fill: var(--ink-soft);
    letter-spacing: var(--tracking-label);
}

.bump-chart[b-zemki5nzaf]  .bump-label {
    font-size: var(--fs-11);
    fill: var(--ink-muted);
}

.bump-chart[b-zemki5nzaf]  .bump-label.me {
    fill: var(--blue);
}

.bump-chart[b-zemki5nzaf]  .bump-grid {
    stroke: var(--border);
}

/* ── Heat-map ── */
.heat-wrap[b-zemki5nzaf] {
    overflow-x: auto;
}

.heat-table[b-zemki5nzaf] {
    border-collapse: separate;
    border-spacing: 2px;
    font-variant-numeric: tabular-nums;
    width: 100%;
}

.heat-table th[b-zemki5nzaf],
.heat-table td[b-zemki5nzaf] {
    text-align: center;
    font-size: var(--fs-12);
}

.heat-table th[b-zemki5nzaf] {
    font-size: var(--fs-10);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--ink-soft);
    padding: var(--sp-2) var(--sp-1) var(--sp-3);
    font-weight: 400;
    white-space: nowrap;
}

.heat-table th.rank-col[b-zemki5nzaf],
.heat-table th.name-col[b-zemki5nzaf] {
    text-align: left;
    padding-left: var(--sp-3);
}

.heat-table th.total-col[b-zemki5nzaf] {
    padding-right: var(--sp-3);
    text-align: right;
}

.heat-rank[b-zemki5nzaf] {
    width: 28px;
    padding: var(--sp-2) 0 var(--sp-2) var(--sp-2);
    font-size: var(--fs-12);
    color: var(--ink-soft);
    text-align: left;
}

.heat-name[b-zemki5nzaf] {
    padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-3);
    font-size: var(--fs-14);
    color: var(--ink);
    text-align: left;
    background: var(--surface);
    position: sticky;
    left: 0;
    border-right: var(--border-1) solid var(--border);
    min-width: 96px;
    z-index: 1;
}

.heat-cell[b-zemki5nzaf] {
    width: 40px;
    height: 34px;
    border-radius: var(--radius-xs);
    color: var(--ink);
}

.heat-cell.best[b-zemki5nzaf] {
    box-shadow: inset 0 0 0 2px var(--gold);
}

/* Neutral intensity ramp built from the ink scale (token-only). */
.heat-l0[b-zemki5nzaf] { background: var(--bg);        color: var(--ink-soft); }
.heat-l1[b-zemki5nzaf] { background: var(--border);    color: var(--ink-muted); }
.heat-l2[b-zemki5nzaf] { background: var(--ink-faint); color: var(--ink); }
.heat-l3[b-zemki5nzaf] { background: var(--ink-soft);  color: var(--surface); }
.heat-l4[b-zemki5nzaf] { background: var(--ink-muted); color: var(--surface); }
.heat-l5[b-zemki5nzaf] { background: var(--ink);       color: var(--surface); }

.heat-total[b-zemki5nzaf] {
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-15);
    color: var(--ink);
    text-align: right;
    border-left: var(--border-1) solid var(--border);
    min-width: 60px;
}

.heat-row.me .heat-name[b-zemki5nzaf],
.heat-row.me .heat-rank[b-zemki5nzaf],
.heat-row.me .heat-total[b-zemki5nzaf] {
    background: var(--blue-bg);
    color: var(--blue);
}

/* Kim Jong Un — virtual perfect-picks reference row, separated by a dashed rule. */
.heat-row.kju .heat-name[b-zemki5nzaf],
.heat-row.kju .heat-rank[b-zemki5nzaf],
.heat-row.kju .heat-total[b-zemki5nzaf] {
    background: var(--bg);
    border-bottom: var(--border-15) dashed var(--border-strong);
    color: var(--ink-muted);
}

/* ── Responsive ── */
@media (max-width: 880px) {
    .scs-page[b-zemki5nzaf] {
        padding: var(--sp-5) var(--sp-4) var(--sp-8);
    }

    .champion-card[b-zemki5nzaf] {
        padding: var(--sp-5) var(--sp-4);
    }

    .champion-name[b-zemki5nzaf] {
        font-size: var(--fs-22);
    }

    .you-detail[b-zemki5nzaf] {
        margin-left: 0;
    }
}
/* /Components/Pages/SignIn.razor.rz.scp.css */
.signin-card[b-t07s8de3cp] {
    width: 100%;
    max-width: 380px;
    background: var(--surface);
    border: var(--border-1) solid var(--border);
    border-radius: var(--radius-2xl);
    padding: var(--sp-8);
}

.eyebrow[b-t07s8de3cp] {
    margin-bottom: var(--sp-2);
    font-size: var(--fs-10);
    letter-spacing: var(--tracking-extra);
    text-transform: uppercase;
    color: var(--ink-soft);
}

h1[b-t07s8de3cp] {
    margin-bottom: var(--sp-2);
    font-size: var(--fs-26);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
}

.sub[b-t07s8de3cp] {
    margin-bottom: var(--sp-6);
    font-size: var(--fs-14);
    color: var(--ink-muted);
}

.field-label[b-t07s8de3cp] {
    display: block;
    margin-bottom: var(--sp-2);
    font-size: var(--fs-10);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* The input is rendered by the InputText child component, so it needs
   ::deep to cross the scoping boundary. */
[b-t07s8de3cp] .field {
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-14);
    color: var(--ink);
    background: var(--bg);
    border: var(--border-15) solid var(--border-strong);
    border-radius: var(--radius-lg);
    transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

[b-t07s8de3cp] .field:focus {
    outline: none;
    border-color: var(--blue);
    background: var(--surface);
}

.field-error[b-t07s8de3cp] {
    margin-top: var(--sp-3);
    font-size: var(--fs-12);
    color: var(--crimson);
}

.submit[b-t07s8de3cp] {
    width: 100%;
    margin-top: var(--sp-5);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-13);
    font-weight: 500;
    color: var(--surface);
    background: var(--ink);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease);
}

.submit:hover[b-t07s8de3cp] {
    background: var(--blue);
}