/*
 * ADMIN REDESIGN — Step 1 component kit (PokerEngine admin).
 *
 * The shared, reusable visual language every future section reskin will
 * inherit. Two zones:
 *   1) The dark / navy SIDEBAR: grouped IA (section labels + icons),
 *      refined brand, active state, footer.
 *   2) The LIGHT content area (.main): page header, data table, buttons,
 *      inputs, cards/panels, badges/chips, icon buttons — refined for the
 *      near-white surface.
 *
 * Loaded BEFORE admin.css, so existing-selector refinements use a
 * higher-specificity scope (.app-shell …, .main …) to win the cascade.
 * Brand-new classes (.page-head, .badge, .sidebar__group …) need no scope.
 *
 * Envato: separate file (admin.css at the 1500-LOC cap). English only.
 * Motion: color/border/shadow transitions only, honoured under
 * prefers-reduced-motion (admin.css §reduce).
 */

/* ════════════════════════════════════════════════════════════════════════
   SIDEBAR — dark / navy rail with grouped navigation
   ════════════════════════════════════════════════════════════════════════ */

.app-shell .sidebar {
    background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-end) 100%);
    border-right: 1px solid var(--sidebar-border);
    color: var(--sidebar-fg);
    padding: var(--space-lg) var(--space-md) var(--space-base);
    gap: var(--space-md);
}

.app-shell .sidebar__brand {
    font-size: var(--text-xl);
    color: var(--sidebar-fg);
    margin: 0 var(--space-sm) var(--space-lg);
    letter-spacing: -0.02em;
}

/* The nav becomes a scrollable column of grouped sections; the Settings
   group is pushed to the bottom (margin-top:auto on .sidebar__group--end). */
.app-shell .sidebar__nav {
    gap: var(--space-base);
    overflow-y: auto;
    padding-right: 2px;
}

.sidebar__group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidebar__group--end {
    margin-top: auto;
    padding-top: var(--space-base);
    border-top: 1px solid var(--sidebar-border);
}

.sidebar__group-label {
    padding: 0 var(--space-md);
    margin-bottom: var(--space-xs);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--sidebar-group-label);
}

/* Item: icon + label, navy-rail styling overriding admin.css .sidebar__link. */
.app-shell .sidebar__link {
    gap: var(--space-md);
    padding: 9px var(--space-md);
    color: var(--sidebar-fg-muted);
    border-left: 0;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
}
.app-shell .sidebar__link:hover {
    color: var(--sidebar-fg);
    background: var(--sidebar-item-hover-bg);
}
.app-shell .sidebar__link[aria-current="page"] {
    color: var(--sidebar-item-active-fg);
    background: var(--sidebar-item-active-bg);
    border-left: 0;
    font-weight: 600;
}
.app-shell .sidebar__link[aria-current="page"] .sidebar__icon {
    color: var(--color-accent);
}

.sidebar__icon {
    display: inline-flex;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    color: var(--sidebar-icon);
    transition: color 180ms ease;
}
.sidebar__icon svg { width: 18px; height: 18px; display: block; }
.sidebar__label { flex: 1 1 auto; min-width: 0; }

/* Footer (logged-in identity + sign out), tuned to the navy rail. */
.app-shell .sidebar__footer {
    border-top: 1px solid var(--sidebar-border);
}
.app-shell .user-label { color: var(--sidebar-group-label); }
.app-shell .user-name { color: var(--sidebar-fg); }
.app-shell .signout-button {
    color: var(--sidebar-fg-muted);
    border-color: var(--sidebar-border);
}
.app-shell .signout-button:hover {
    background: var(--sidebar-item-hover-bg);
    color: var(--sidebar-fg);
    border-color: rgba(255, 255, 255, 0.18);
}

/* Shell scroll fix (root cause of "no pagination" on long pages). The
   `.app-shell` grid (admin.css) sets height:100vh + overflow:hidden but never
   declared a ROW track, so its single implicit row was content-sized and grew
   past 100vh — clipping the bottom of `.main` (where a sticky footer / the
   Players pagination lives). Clamp the row with `minmax(0, 1fr)` so `.main`
   sizes to the viewport and becomes the real internal scroller (matching the
   intent of the admin.css comment). Double class = specificity (0,2,0) so it
   wins over admin.css's later `.app-shell` (0,1,0). Benefits every long page. */
.app-shell.app-shell { grid-template-rows: minmax(0, 1fr); }

/* ════════════════════════════════════════════════════════════════════════
   CONTENT — page header
   ════════════════════════════════════════════════════════════════════════ */

/* The uniform top-of-page block: title + optional subtitle on the left, a
   primary action on the right. Reused by every section's top-level page. */
.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-base);
    flex-wrap: wrap;
    margin-bottom: var(--space-xl);
}
.page-head__text { min-width: 0; }
.page-head__title {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text);
    line-height: 1.2;
}
.page-head__subtitle {
    margin: 6px 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    max-width: 60ch;
}
.page-head__actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
}

/* Keep legacy .main__header views legible on the light surface. */
.main .main__title { color: var(--color-text); }

/* Small uppercase section label that sits above a .page-head__title (e.g.
   "Security"). Referenced by section page-heads; AA-safe muted on white. */
.main .eyebrow {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}

/* ════════════════════════════════════════════════════════════════════════
   CONTENT — cards / panels
   ════════════════════════════════════════════════════════════════════════ */

.main .card {
    background: var(--surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* Card header / body convention — a titled content card (settings, stats,
   any panel that is NOT a bare data-table). The header carries the section
   title (+ optional right-side actions); the body owns the padding. Reusable
   on any section that needs a labelled panel. */
.main .card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-base);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}
.main .card__title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-text);
}
.main .card__body { padding: var(--space-lg); }
/* Flush body for a data-table inside a titled card: no padding, x-scroll. */
.main .card__body--table { padding: 0; overflow-x: auto; }

/* Optional second line under the card title + a right-side actions cluster
   (Save / Add …). The header wraps on narrow so a multi-button cluster never
   overflows. Reusable wherever a titled card carries a subtitle + actions. */
.main .card__head-text { min-width: 0; }
.main .card__subtitle {
    margin: 4px 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}
.main .card__head-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    flex-shrink: 0;
}

.main .empty-state { color: var(--color-text-secondary); }

/* ════════════════════════════════════════════════════════════════════════
   CONTENT — data table
   ════════════════════════════════════════════════════════════════════════ */

.main .data-table thead th {
    background: var(--surface-sunken);
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-md) var(--space-base);
    font-size: 11px;
    letter-spacing: 0.07em;
}
.main .data-table tbody td {
    color: var(--color-text);
    border-bottom: 1px solid var(--hairline);
    padding: var(--space-base);
}
.main .data-table tbody tr {
    transition: background-color 140ms ease;
}
.main .data-table tbody tr:hover { background: var(--surface-hover); }
.main .data-table tbody tr:last-child td { border-bottom: 0; }
.main .data-table .muted { color: var(--color-text-muted); }
.main .data-table .actions-cell .btn--icon { margin-left: 2px; }

/* ════════════════════════════════════════════════════════════════════════
   CONTENT — buttons
   ════════════════════════════════════════════════════════════════════════ */

.main .btn {
    font-size: var(--text-sm);
    border-radius: var(--radius-md);
}
.main .btn--primary {
    color: #1A1206;                /* warm near-black on gold for AA contrast */
    box-shadow: var(--shadow-sm);
}
.main .btn--secondary {
    background: var(--surface-raised);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}
.main .btn--secondary:hover:not(:disabled) {
    background: var(--surface-hover);
    border-color: var(--color-text-muted);
}
.main .btn--danger { box-shadow: var(--shadow-sm); }
.main .btn--danger:hover:not(:disabled) { background: #B42318; }

/* Icon buttons: quiet at rest, a soft tinted hover keyed to intent so row
   actions stay scannable on the white table surface. */
.main .btn--icon {
    width: 34px;
    height: 34px;
    color: var(--color-text-muted);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
}
.main .btn--icon:hover:not(:disabled) {
    background: var(--surface-hover);
    border-color: var(--color-border);
    color: var(--color-text);
}
.main .btn--icon.btn--danger {
    background: transparent;
    color: var(--color-text-muted);
    box-shadow: none;
}
.main .btn--icon.btn--danger:hover:not(:disabled) {
    background: rgba(217, 45, 32, 0.08);
    border-color: rgba(217, 45, 32, 0.30);
    color: var(--color-danger);
}

/* ════════════════════════════════════════════════════════════════════════
   CONTENT — inputs / fields
   ════════════════════════════════════════════════════════════════════════ */

.main .input,
.main .select {
    background: var(--surface-raised);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}
.main .input::placeholder { color: var(--color-text-muted); }
.main .field__label { color: var(--color-text-secondary); }
.main .field__hint { color: var(--color-text-muted); }

/* A `.field` carries an explicit `display:block` (admin.css), which beats the
   UA `[hidden]` rule — so a conditionally-hidden field (e.g. the milestone-only
   amount) needs this to actually hide. Works in `.main` and inside modals. */
.field[hidden] { display: none; }

/* ════════════════════════════════════════════════════════════════════════
   CONTENT — badges / chips
   ════════════════════════════════════════════════════════════════════════ */

/* The dark-theme .chip uses translucent-white fills that vanish on white.
   Re-skin to solid light pills, and add a semantic .badge alias for the
   reskinned sections to use going forward. */
.main .chip,
.main .badge {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;              /* never get squeezed/clipped inside a flex cell */
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;        /* a pill must read on one line */
    background: var(--surface-sunken);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}
/* Status/label badges read as UPPERCASE pills (intentional + robust — not
   reliant on the global .badge in lobby.css). Scoped to .badge only, so the
   Tables .chip variant tags (e.g. "holdem-nl") keep their lowercase form. */
.main .badge { text-transform: uppercase; }

.main .chip--accent,
.main .badge--accent {
    color: #92610A;
    background: rgba(245, 200, 66, 0.16);
    border-color: rgba(245, 200, 66, 0.45);
}
.main .chip--ok,
.main .badge--ok {
    color: var(--color-success);
    background: rgba(6, 118, 71, 0.10);
    border-color: rgba(6, 118, 71, 0.30);
}
.main .chip--muted,
.main .badge--muted {
    color: var(--color-text-muted);
    background: var(--surface-sunken);
    border-color: var(--hairline);
}
/* Semantic status variants — solid light tint + darker same-hue text/border,
   all legible on the white surface. Used by statusBadge() (see DESIGN-SYSTEM.md
   "status -> variant" mapping); reusable for any status display. */
.main .chip--info,
.main .badge--info {
    color: #175CD3;
    background: rgba(21, 92, 211, 0.10);
    border-color: rgba(21, 92, 211, 0.30);
}
.main .chip--warn,
.main .badge--warn {
    color: #B54708;
    background: rgba(181, 71, 8, 0.10);
    border-color: rgba(181, 71, 8, 0.28);
}
.main .chip--danger,
.main .badge--danger {
    color: #B42318;
    background: rgba(217, 45, 32, 0.10);
    border-color: rgba(217, 45, 32, 0.28);
}
/* Live-status dot prefix (currentColor → matches the badge's semantic hue).
   e.g. a "Playing" badge in --ok renders a green dot. Reusable on any badge. */
.main .badge--with-dot::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 6px;
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   CONTENT — identity cell + id chip (reusable for any people-table)
   ════════════════════════════════════════════════════════════════════════ */

/* Two-line identity: avatar (or initials fallback) + name on line 1, a muted
   sub-line (email / id + an optional small badge) on line 2. Reuse for any
   admin table that lists people (Players, Bots, leaderboard rows). */
.main .identity-cell {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 190px;
}
.main .identity-cell__avatar {
    width: 36px; height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-sunken);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 700;
}
.main .identity-cell__text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.main .identity-cell__name {
    font-weight: 500;
    color: var(--color-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.main .identity-cell__sub {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.main .identity-cell__sub-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Quiet monospace id pill with a copy-to-clipboard affordance. */
.main .id-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 168px;
    padding: 2px 4px 2px 8px;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    border: 1px solid var(--color-border);
    font-family: var(--font-mono, ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 11px;
    color: var(--color-text-secondary);
}
.main .id-chip__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main .id-chip__copy {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 150ms ease, background-color 150ms ease;
}
.main .id-chip__copy:hover { color: var(--color-text); background: var(--surface-hover); }
.main .id-chip__copy:focus-visible { outline: 0; box-shadow: var(--shadow-glow); }

/* ════════════════════════════════════════════════════════════════════════
   CONTENT — restart banner (light surface)
   ════════════════════════════════════════════════════════════════════════ */

.main .banner {
    background: rgba(181, 71, 8, 0.06);
    border: 1px solid rgba(181, 71, 8, 0.28);
    color: var(--color-warning);
    border-radius: var(--radius-md);
}

/* ════════════════════════════════════════════════════════════════════════
   MODAL — reusable light dialog (sticky header + scroll body + sticky footer)
   ════════════════════════════════════════════════════════════════════════ */

/*
 * Modals render in #modal-root, OUTSIDE .main, so they don't inherit the
 * light content tokens. .modal--light re-scopes the light palette onto the
 * dialog itself (same indirection trick as .main): every kit primitive
 * inside — .field / .input / .select / .btn — flips to light automatically.
 *
 * .modal--form adds the structural shell: a pinned header and footer with a
 * single scrolling body between them, so a long form never becomes a
 * cramped scroll. Scoped under .modal-overlay so it overrides admin.css
 * .modal (which loads later). Reusable by every admin dialog/confirm.
 */
.modal-overlay .modal--light {
    --color-background: #F4F5F7;
    --color-surface: #FFFFFF;
    --color-border: #E4E7EC;
    --color-text: #101828;
    --color-text-secondary: #475467;
    --color-text-muted: #667085;
    --color-accent: #F5C842;
    --color-danger: #D92D20;
    --color-ring: #F5C842;
    --shadow-glow: 0 0 0 3px rgba(245, 200, 66, 0.35);
    --surface-raised: #FFFFFF;
    --surface-sunken: #F4F5F7;
    --surface-hover: #F9FAFB;
    --hairline: #EAECF0;

    background: var(--surface-raised);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
}

/* The flex shell: header + form fill the dialog; only the body scrolls. */
.modal-overlay .modal--form {
    display: flex;
    flex-direction: column;
    padding: 0;                                  /* chrome owns its padding */
    width: 100%;
    max-width: 720px;
    max-height: min(calc(100vh - 48px), 760px);
    overflow: hidden;                            /* keep rounded corners */
}

/* Size variant for DENSE forms (many fields) — wider so 2-3 columns read
   roomily instead of a cramped tall column. Reusable; pair with
   .modal--light .modal--form. Default modal stays 720px. */
.modal-overlay .modal--wide { max-width: 960px; }

.modal-overlay .modal--form .modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-base);
    flex-shrink: 0;
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid var(--color-border);
}
.modal-overlay .modal--form .modal__title {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-text);
}
.modal__close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: -4px -6px 0 0;
    padding: 0;
    background: transparent;
    color: var(--color-text-muted);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.modal__close:hover {
    background: var(--surface-hover);
    border-color: var(--color-border);
    color: var(--color-text);
}
.modal__close:focus-visible { outline: 0; box-shadow: var(--shadow-glow); }

/* Form wrapper sits between header and footer; it never scrolls itself —
   its .modal__scroll child does. min-height:0 lets the child shrink. */
.modal-overlay .modal--form .modal__form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.modal-overlay .modal--form .modal__scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-lg) var(--space-xl);
}

/* Sticky footer — actions always visible (overrides admin.css .modal__footer). */
.modal-overlay .modal--form .modal__footer {
    flex-shrink: 0;
    margin: 0;
    padding: var(--space-base) var(--space-xl);
    border-top: 1px solid var(--color-border);
    background: var(--surface-raised);
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}
/* Validation summary lives in the footer (always visible) and pushes the
   buttons to the right. */
.modal-overlay .modal--form .modal__footer .modal__error {
    flex: 1 1 auto;
    min-width: 120px;
    margin: 0;
    text-align: left;
    color: var(--color-danger);
    font-size: var(--text-sm);
}

/* Grouped form sections + 2-column grid for fields that pair naturally. */
.modal__section { margin-bottom: var(--space-lg); }
.modal__section:last-child { margin-bottom: 0; }
.modal__section-label {
    margin: 0 0 var(--space-md);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--hairline);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.modal__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--space-base);
}
/* 3-up grid for short fields on a wide modal (e.g. payout %, numeric trios). */
.modal__grid--3 { grid-template-columns: 1fr 1fr 1fr; }

/* Crisp white inputs (the .main .input refinement doesn't reach here). */
.modal-overlay .modal--light .input,
.modal-overlay .modal--light .select {
    background: var(--surface-raised);
    box-shadow: var(--shadow-sm);
}
.modal-overlay .modal--light .btn--secondary { box-shadow: var(--shadow-sm); }

/* Light-modal bridge for the legacy admin form vocabulary (.field-label /
   .field-hint, schedule + error elements) so a dense legacy form migrated
   into .modal--light reads correctly without rewriting every field. These
   classes are otherwise styled only under .ach-form / .lb-form, or use the
   pre-redesign token names; this maps them to the light tokens. Reusable by
   any legacy form dropped into the modal component. */
.modal-overlay .modal--light .field-label {
    display: block;
    margin-bottom: var(--space-xs);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
}
.modal-overlay .modal--light .field-hint {
    display: block;
    margin-top: var(--space-xs);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.modal-overlay .modal--light .tournaments-editor h3,
.modal-overlay .modal--light .spg-editor h3 {
    color: var(--color-text);
    font-size: var(--text-base);
    margin: 0;
}
.modal-overlay .modal--light .spg-radio-option { color: var(--color-text-secondary); }
.modal-overlay .modal--light .tournaments-schedule-wrap { border-color: var(--color-border); }
.modal-overlay .modal--light .tournaments-schedule th,
.modal-overlay .modal--light .tournaments-schedule td { border-color: var(--hairline); }
.modal-overlay .modal--light .tournaments-schedule th { color: var(--color-text-muted); }
.modal-overlay .modal--light .tournaments-schedule-error { color: var(--color-danger); }
.modal-overlay .modal--light .tournaments-form-error,
.modal-overlay .modal--light .spg-error {
    color: var(--color-danger);
    background: rgba(217, 45, 32, 0.06);
    border-color: rgba(217, 45, 32, 0.28);
}
.modal-overlay .modal--light .spg-mini-table th,
.modal-overlay .modal--light .spg-mini-table td { border-color: var(--hairline); }
.modal-overlay .modal--light .spg-mini-table th { color: var(--color-text-muted); }
.modal-overlay .modal--light .spg-weight-sum.is-ok { color: var(--color-success); }
.modal-overlay .modal--light .spg-weight-sum.is-bad { color: var(--color-danger); }

/* ────────────────────────────────────────────────────────────────────────
   Confirm variant — compact light dialog (no scroll chrome)
   ──────────────────────────────────────────────────────────────────────── */

/* Pair with .modal--light. A small dialog: title + body (+ optional one field)
   + a right-aligned footer (Cancel + a destructive/primary action). The shared
   confirmDialog() helper renders this, so every confirm across the admin uses
   the same look. No pinned header/footer scroll machinery — it stays short. */
.modal-overlay .modal--confirm {
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
.modal-overlay .modal--confirm .modal__title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-text);
}
.modal-overlay .modal--confirm .modal__body {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--color-text-secondary);
}
.modal-overlay .modal--confirm .modal__body p { margin: 0; }
.modal-overlay .modal--confirm .modal__footer {
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    justify-content: flex-end;
    gap: var(--space-md);
}

/* ────────────────────────────────────────────────────────────────────────
   Code block — monospace snippet on a sunken light surface (reusable)
   ──────────────────────────────────────────────────────────────────────── */

/* Read-only code / embed-snippet treatment. Works as a <pre> or a readonly
   <textarea> (the embed snippet uses a textarea so it stays selectable). */
.modal-overlay .modal--light .code-block,
.main .code-block {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    font-family: var(--font-mono, ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--surface-sunken);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    overflow: auto;
    white-space: pre;
    tab-size: 2;
}
textarea.code-block {
    resize: vertical;
    min-height: 96px;
}
.modal-overlay .modal--light textarea.code-block:focus-visible,
.main textarea.code-block:focus-visible {
    outline: 0;
    border-color: var(--color-accent);
    box-shadow: var(--shadow-glow);
}

/* ────────────────────────────────────────────────────────────────────────
   Callout — light informational note (gold left edge), preset list, split body
   ──────────────────────────────────────────────────────────────────────── */

/* Replaces the legacy dark "yellow-edge" note. Functional, text-led. */
.modal-overlay .modal--light .callout,
.main .callout {
    margin: 0;
    padding: var(--space-md);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-secondary);
    background: var(--surface-sunken);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-sm);
}

/* Warning variant — amber left edge for "enabled but not fully configured". */
.main .callout--warning {
    border-left-color: var(--color-warning);
    color: var(--color-text-primary);
}

/* Read-only redirect URI row: full-width field + fixed Copy button. */
.main .gauth-redirect__row {
    display: flex;
    gap: var(--space-sm);
    align-items: stretch;
}
.main .gauth-redirect__row .input {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: var(--text-sm);
}
.main .gauth-redirect__row .btn {
    flex: 0 0 auto;
}

/* Clean light list for preset/summary modals — readable rows, not a wall. */
.modal-overlay .modal--light .preset-template-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.modal-overlay .modal--light .preset-template-list li {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    color: var(--color-text);
    border-top: 1px solid var(--hairline);
}
.modal-overlay .modal--light .preset-template-list li:first-child { border-top: 0; }

/* Two-pane split body for dense .modal--wide dialogs (snippet + live preview).
   Collapses to a single column at the tablet breakpoint. */
.modal__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: start;
}
.modal__pane {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-width: 0;
}
@media (max-width: 768px) {
    .modal__split { grid-template-columns: 1fr; }
}

/* Framed live-preview pane — the inner iframe keeps its own theming. */
.modal__preview-frame {
    display: flex;
    flex-direction: column;
    background: var(--surface-sunken);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    min-height: 420px;
}
.modal__preview-frame iframe {
    width: 100%;
    height: 440px;
    border: 0;
    background: transparent;
    display: block;
}
.modal__preview-note {
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-xs);
    line-height: 1.4;
    color: var(--color-text-muted);
    background: var(--surface-raised);
    border-top: 1px solid var(--color-border);
}

/* ────────────────────────────────────────────────────────────────────────
   Avatar picker — responsive grid of round, selectable portrait thumbnails
   ──────────────────────────────────────────────────────────────────────── */

/* Reusable in any light dialog (Cash Bots + MTT Bots edit forms). Scrolls
   within its own area when tall; selected item = gold ring + glow (visible on
   white); items are real <button>s so they're keyboard-focusable. */
.modal-overlay .modal--light .avatar-picker,
.main .avatar-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: var(--space-sm);
    max-height: 208px;
    overflow-y: auto;
    padding: var(--space-md);
    background: var(--surface-sunken);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.modal-overlay .modal--light .avatar-picker__item,
.main .avatar-picker__item {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.modal-overlay .modal--light .avatar-picker__item img,
.main .avatar-picker__item img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.modal-overlay .modal--light .avatar-picker__item:hover,
.main .avatar-picker__item:hover { border-color: var(--color-border); transform: translateY(-1px); }
.modal-overlay .modal--light .avatar-picker__item:focus-visible,
.main .avatar-picker__item:focus-visible { outline: 0; box-shadow: var(--shadow-glow); }
.modal-overlay .modal--light .avatar-picker__item--selected,
.main .avatar-picker__item--selected {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(245, 200, 66, 0.28);
}
/* The larger preview thumbnail beside the picker. */
.modal-overlay .modal--light .avatar-preview,
.main .avatar-preview {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid var(--color-accent);
}

/* ────────────────────────────────────────────────────────────────────────
   Pick-row — a selectable list row inside a modal (e.g. seat-at-table list)
   ──────────────────────────────────────────────────────────────────────── */
.modal-overlay .modal--light .pick-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.modal-overlay .modal--light .pick-row:hover {
    border-color: var(--color-text-muted);
    box-shadow: var(--shadow-sm);
}

/* ────────────────────────────────────────────────────────────────────────
   Row editor — repeatable aligned rows on a light surface (reusable)
   ──────────────────────────────────────────────────────────────────────── */

/* A vertical stack of repeatable input rows (per-rank reward chips, payout
   tiers, key/value pairs …) on a sunken panel. Each .row-editor__row holds one
   or more kit .field cells that grow, plus a quiet trailing remove button; an
   "add row" affordance + hint live in a .row-editor-foot below the panel.
   Reusable by any dialog that edits a variable-length list (Leaderboards
   rewards, Achievements, Daily Rewards tiers). */
.modal-overlay .modal--light .row-editor,
.main .row-editor {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--surface-sunken);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.row-editor__row {
    display: flex;
    align-items: flex-end;
    gap: var(--space-md);
}
.row-editor__row .field { flex: 1 1 0; min-width: 0; margin: 0; }
.row-editor__remove {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: var(--surface-raised);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}
.row-editor__remove:hover {
    color: var(--color-danger);
    background: rgba(217, 45, 32, 0.08);
    border-color: rgba(217, 45, 32, 0.30);
}
.row-editor__remove:focus-visible { outline: 0; box-shadow: var(--shadow-glow); }
.row-editor__remove svg { width: 16px; height: 16px; display: block; }
.row-editor__empty {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
/* The add-row affordance + hint sit below the panel. */
.row-editor-foot {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
}
.row-editor-foot .btn { align-self: flex-start; }

@media (max-width: 600px) {
    .row-editor__row { gap: var(--space-sm); }
}

/* ────────────────────────────────────────────────────────────────────────
   Toggle switch — light-surface fix for the off-state track
   ──────────────────────────────────────────────────────────────────────── */

/* The base .toggle-switch (admin.css) is token-driven EXCEPT the off-track
   fill, which is a translucent-white that vanishes on a white modal. Give it
   a visible sunken fill on light surfaces (checked = gold, unchanged). */
.modal-overlay .modal--light .toggle-switch__track,
.main .toggle-switch__track { background: var(--surface-sunken); }

/* Responsive: bottom-sheet, single column, chrome still pinned. */
@media (max-width: 600px) {
    .modal-overlay { padding: 0; place-items: end stretch; }
    .modal-overlay .modal--form {
        max-width: none;
        max-height: 92vh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
    .modal-overlay .modal--form .modal__header,
    .modal-overlay .modal--form .modal__scroll,
    .modal-overlay .modal--form .modal__footer {
        padding-left: var(--space-base);
        padding-right: var(--space-base);
    }
    .modal__grid { grid-template-columns: 1fr; gap: 0; }
    /* Error takes its own row; the two actions split the row below, evenly. */
    .modal-overlay .modal--form .modal__footer .modal__error { flex-basis: 100%; }
    .modal-overlay .modal--form .modal__footer .btn { flex: 1 1 0; }
    /* Confirm dialog drops to a bottom-sheet too; actions split the footer row. */
    .modal-overlay .modal--confirm {
        max-width: none;
        max-height: 92vh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
    .modal-overlay .modal--confirm .modal__footer .btn { flex: 1 1 0; }
}

/* ════════════════════════════════════════════════════════════════════════
   CONTENT — gallery card-grid (.tile) : the reusable gallery archetype
   ════════════════════════════════════════════════════════════════════════ */

/*
 * A responsive grid of light cards for GALLERIES (Achievements, and any future
 * template / asset / badge picker). The first non-table archetype of the
 * redesign — reuse it instead of hand-rolling a card per section.
 *
 * A .tile is a flex column with three zones:
 *   .tile__art    — media band (sunken surface, art centered + contained;
 *                   carries the styled "No artwork" placeholder + a broken-
 *                   image fallback) with optional floating .tile__corner badges.
 *   .tile__body   — content (title + clamped description + a quiet stat row);
 *                   grows so footers align across a row.
 *   .tile__footer — action zone (a primary .btn + an overflow .menu trigger).
 */
.main .tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-base);
}
.main .tile {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.main .tile:hover {
    transform: translateY(-2px);
    border-color: var(--color-text-muted);
    box-shadow: var(--shadow-md);
}
@media (prefers-reduced-motion: reduce) {
    .main .tile { transition: box-shadow 160ms ease, border-color 160ms ease; }
    .main .tile:hover { transform: none; }
}

/* Media band — fixed height so the grid stays aligned; art contained, never
   cropped, and presented as a framed "poster" (soft radius + drop shadow + a
   gentle top spotlight) so the artwork reads as a premium object. The
   empty/placeholder text reads as a quiet muted caption. Galleries with
   portrait art bump the height via their own scope (e.g. .ach-page). */
.main .tile__art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    padding: var(--space-base);
    background:
        radial-gradient(120% 90% at 50% 0%, var(--surface-raised), var(--surface-sunken) 78%);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    overflow: hidden;
}
.main .tile__art img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 20px rgba(16, 24, 40, 0.18), 0 1px 3px rgba(16, 24, 40, 0.10);
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.main .tile:hover .tile__art img { transform: scale(1.035); }
@media (prefers-reduced-motion: reduce) {
    .main .tile__art img { transition: none; }
    .main .tile:hover .tile__art img { transform: none; }
}
/* Broken-image fallback: JS toggles .is-broken in the img.onerror handler;
   CSS hides the broken img and reveals a muted label (no inline style). */
.main .tile__art.is-broken img { display: none; }
.main .tile__art.is-broken::after {
    content: "Image unavailable";
    color: var(--color-text-muted);
}

/* Corner slots for badges that float over the art (tier, source markers). */
.main .tile__corner {
    position: absolute;
    top: var(--space-sm);
    display: inline-flex;
    gap: var(--space-xs);
    z-index: 1;
}
.main .tile__corner--start { left: var(--space-sm); }
.main .tile__corner--end { right: var(--space-sm); }

/* Content zone — grows to fill so all footers in a row align. */
.main .tile__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--space-base);
}
.main .tile__title {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
}
.main .tile__desc {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--color-text-secondary);
    /* Clamp to 2 lines so cards stay grid-aligned at a stable height. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Footer / action zone — pinned to the bottom, hairline-topped. */
.main .tile__footer {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-base);
    border-top: 1px solid var(--hairline);
    margin-top: auto;
}

@media (max-width: 600px) {
    .main .tile-grid { grid-template-columns: 1fr; }
    .main .tile__art { height: 148px; }
}

/* ════════════════════════════════════════════════════════════════════════
   CONTENT — popover menu (.menu) : reusable overflow / action popover
   ════════════════════════════════════════════════════════════════════════ */

/*
 * A small floating action menu (the gallery "⋯" overflow; reusable for any
 * row/card kebab). The JS positions it (position:fixed) and mounts it on
 * document.body — OUTSIDE .main — so, exactly like .modal--light, it carries
 * its OWN light palette + shadow so it renders correctly wherever mounted.
 * Open/close (Esc, click-outside, scroll) is owned by the call site.
 */
.menu {
    z-index: 1000;
    min-width: 184px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #FFFFFF;
    border: 1px solid #E4E7EC;
    border-radius: var(--radius-md);
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.14), 0 2px 6px rgba(16, 24, 40, 0.06);
}
.menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: #101828;
    font-size: var(--text-sm);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease;
}
.menu__item svg { width: 16px; height: 16px; flex: 0 0 16px; color: #667085; }
.menu__item:hover { background: #F9FAFB; }
.menu__item:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(245, 200, 66, 0.35); }
.menu__item--danger { color: #D92D20; }
.menu__item--danger svg { color: #D92D20; }
.menu__item--danger:hover { background: rgba(217, 45, 32, 0.08); }

/* ════════════════════════════════════════════════════════════════════════
   CONTENT — skeleton loaders (.skeleton) : reusable shimmer placeholder
   ════════════════════════════════════════════════════════════════════════ */

/*
 * A light shimmer placeholder for loading states (gallery tiles, table rows).
 * Set the geometry (width/height, or place inside a fixed-size container) at
 * the call site; this owns the sunken surface + the sweeping highlight only.
 * Reserve the real layout's space with it so the swap-in is CLS-free. Honours
 * prefers-reduced-motion (static muted block, no sweep).
 */
.main .skeleton {
    position: relative;
    overflow: hidden;
    background: var(--surface-sunken);
    border-radius: var(--radius-sm);
}
.main .skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.65),
        transparent);
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
    100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
    .main .skeleton::after { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   CONTENT — KPI stat cards (.stat) : reusable metric tiles
   ════════════════════════════════════════════════════════════════════════ */

/*
 * A responsive row of small metric cards: a muted uppercase label + a big
 * tabular numeral (+ an optional muted sub-line). The numeral is ALWAYS text
 * (never color-only meaning). Reuse on any stats/overview surface.
 */
.main .stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-base);
}
.main .stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-base) var(--space-lg);
    background: var(--surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.main .stat__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}
.main .stat__value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.main .stat__sub { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ════════════════════════════════════════════════════════════════════════
   CONTENT — selectable cell-grid (.cell) : calendars / slot pickers
   ════════════════════════════════════════════════════════════════════════ */

/*
 * A grid of light, clickable cells (the Daily Rewards 30-day calendar; reusable
 * for any "pick / edit one slot from a sequence" surface). Each .cell is a real
 * <button>: a strong label, a muted meta line, and a value pinned to the bottom
 * so rows align. `.cell--marked` flags a special cell (e.g. a milestone) with a
 * sparing accent left-edge + faint tint — paired with a visible text label, so
 * the marking never relies on colour alone.
 */
.main .cell-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
    gap: var(--space-md);
}
.main .cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 104px;
    padding: var(--space-md);
    text-align: left;
    background: var(--surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.main .cell:hover {
    transform: translateY(-2px);
    border-color: var(--color-text-muted);
    box-shadow: var(--shadow-md);
}
.main .cell:focus-visible { outline: 0; box-shadow: var(--shadow-glow); }
.main .cell--marked {
    border-color: rgba(245, 200, 66, 0.55);
    background:
        linear-gradient(180deg, rgba(245, 200, 66, 0.08), transparent 60%),
        var(--surface-raised);
    box-shadow: inset 3px 0 0 var(--color-accent);
}
.main .cell__label { font-weight: 600; color: var(--color-text); }
.main .cell__meta {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}
.main .cell--marked .cell__meta { color: var(--color-warning); }
.main .cell__value {
    margin-top: auto;
    padding-top: var(--space-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
    .main .cell-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
}

/* ════════════════════════════════════════════════════════════════════════
   CONTENT — sub-navigation (.subnav) : in-section horizontal tab bar
   ════════════════════════════════════════════════════════════════════════ */

/*
 * A horizontal tab bar that groups a long section's panels into spaces
 * (Layouts: Themes / Branding / Navigation & Footer / Banners / Site & SEO).
 * Sits directly under the .page-head; each tab reveals only its group, so the
 * page stops being one endless scroll. The active tab is marked by an INK
 * underline + a weight bump — gold stays reserved for the focus ring + primary
 * actions, never the tab indicator. Scrolls horizontally on narrow widths
 * (quiet, no scrollbar chrome). The call site owns role=tablist / role=tab,
 * aria-selected, and arrow-key navigation. Reusable by any multi-group section.
 */
.main .subnav {
    display: flex;
    gap: var(--space-xs);
    margin: calc(-1 * var(--space-sm)) 0 var(--space-xl);
    padding: 0;
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
    scrollbar-width: none;
}
.main .subnav::-webkit-scrollbar { display: none; }
.main .subnav__tab {
    flex: 0 0 auto;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;                 /* sit the underline on the track */
    padding: var(--space-sm) var(--space-base);
    font-size: var(--text-sm);
    font-weight: 500;
    font-family: inherit;
    color: var(--color-text-muted);
    white-space: nowrap;
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease;
}
.main .subnav__tab:hover { color: var(--color-text); }
.main .subnav__tab[aria-selected="true"] {
    color: var(--color-text);
    font-weight: 600;
    border-bottom-color: var(--color-text);
}
.main .subnav__tab:focus-visible {
    outline: 0;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    box-shadow: var(--shadow-glow);
}

/* ════════════════════════════════════════════════════════════════════════
   Mobile drawer parity (keep the navy rail on the drawer)
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .app-shell .sidebar { box-shadow: var(--shadow-lg); }
    .main .page-head__title { font-size: 24px; }
}