/* FightEdge — Web UI Dark Theme */
/* Reuses design language from HTML report overhaul */

:root {
    --bg-primary: #08080c;
    --bg-card: rgba(17,17,20,0.9);
    --bg-card-hover: rgba(25,25,30,0.95);
    --bg-subtle: rgba(255,255,255,0.02);
    --border-subtle: rgba(255,255,255,0.04);
    --border-hover: rgba(255,255,255,0.08);
    --text-primary: #e0e0e0;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;
    --text-dim: #7c8798;
    --text-heading: #fff;
    --accent-teal: #4ecdc4;
    --accent-teal-light: #6ee7de;
    --accent-teal-dark: #3dbdad;
    --accent-red: #ff6b6b;
    --accent-red-light: #ff8e8e;
    --accent-blue: #3b82f6;
    --accent-purple: #a855f7;
    --accent-orange: #f97316;
    --accent-yellow: #f9ca24;
    --accent-green: #10b981;
    --accent-teal-rgb: 78,205,196;
    --accent-red-rgb: 255,107,107;
    --accent-green-rgb: 16,185,129;
    --accent-yellow-rgb: 249,202,36;
    --accent-blue-rgb: 59,130,246;
    --accent-purple-rgb: 168,85,247;
    --accent-orange-rgb: 249,115,22;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 48px;
    --fs-label: 11px;
    --fs-body: 14px;
    --fs-card-title: 16px;
    --fs-page-title: 28px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --shadow-card: 0 4px 24px rgba(0,0,0,0.3);
    --bg-sidebar: rgba(12,12,16,0.95);
    --bg-input: rgba(255,255,255,0.04);
    --bg-input-hover: rgba(255,255,255,0.06);
    --bg-input-option: #1a1a1e;
    --bg-bar: #1a1a1e;
    --bg-mobile-header: rgba(12,12,16,0.98);
    --bg-footer: rgba(15,15,20,0.95);
    --bg-overlay: rgba(0,0,0,0.6);
    --btn-primary-text: #000;
    --nav-hover-bg: rgba(255,255,255,0.03);
    --nav-active-bg: rgba(var(--accent-teal-rgb), 0.05);
    --chip-bg-alpha: 0.15;
    --row-hover: rgba(255,255,255,0.02);
    --row-border: rgba(255,255,255,0.02);
    color-scheme: dark;
}

/* ── Light Theme ─────────────────────── */
[data-theme="light"] {
    --bg-primary: #f5f6f8;
    --bg-card: rgba(255,255,255,0.95);
    --bg-card-hover: rgba(255,255,255,1);
    --bg-subtle: rgba(0,0,0,0.02);
    --border-subtle: rgba(0,0,0,0.08);
    --border-hover: rgba(0,0,0,0.14);
    --text-primary: #1a1a2e;
    --text-secondary: #4a5568;
    --text-muted: #718096;
    --text-dim: #64748b;
    --text-heading: #0f0f1a;
    --accent-teal: #2bb5ac;
    --accent-teal-light: #3cc9c0;
    --accent-teal-dark: #229e96;
    --accent-red: #e53e3e;
    --accent-red-light: #fc8181;
    --accent-blue: #2b6cb0;
    --accent-purple: #805ad5;
    --accent-orange: #dd6b20;
    --accent-yellow: #d69e2e;
    --accent-green: #059669;
    --accent-teal-rgb: 43,181,172;
    --accent-red-rgb: 229,62,62;
    --accent-green-rgb: 5,150,105;
    --accent-yellow-rgb: 214,158,46;
    --accent-blue-rgb: 43,108,176;
    --accent-purple-rgb: 128,90,213;
    --accent-orange-rgb: 221,107,32;
    --shadow-card: 0 2px 12px rgba(0,0,0,0.06);
    --bg-sidebar: rgba(255,255,255,0.98);
    --bg-input: rgba(0,0,0,0.03);
    --bg-input-hover: rgba(0,0,0,0.06);
    --bg-input-option: #fff;
    --bg-bar: #e2e8f0;
    --bg-mobile-header: rgba(255,255,255,0.98);
    --bg-footer: rgba(255,255,255,0.96);
    --bg-overlay: rgba(0,0,0,0.3);
    --btn-primary-text: #fff;
    --nav-hover-bg: rgba(0,0,0,0.03);
    --nav-active-bg: rgba(var(--accent-teal-rgb), 0.08);
    --chip-bg-alpha: 0.1;
    --row-hover: rgba(0,0,0,0.02);
    --row-border: rgba(0,0,0,0.04);
    color-scheme: light;
}

[data-theme="light"] .chip-yellow { background: rgba(180,140,0,0.18); color: #7a5c00; }
[data-theme="light"] .chip-teal { background: rgba(var(--accent-teal-rgb), 0.18); color: #0f6b65; }
[data-theme="light"] .chip-green { background: rgba(var(--accent-green-rgb), 0.16); color: #047857; }
[data-theme="light"] .chip-red { background: rgba(var(--accent-red-rgb), 0.14); color: #b91c1c; }
[data-theme="light"] .chip-blue { background: rgba(var(--accent-blue-rgb), 0.14); color: #1d4ed8; }
[data-theme="light"] .chip-muted { background: rgba(15,23,42,0.07); color: #475569; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── Scroll Reveal Keyframes ── */
@keyframes revealUp    { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes revealFade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes revealScale { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
@keyframes revealLeft  { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes revealRight { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }

/* ── Scroll Reveal: Hidden State ── */
[data-reveal] { opacity: 0; }

/* ── Scroll Reveal: Visible State ── */
[data-reveal].is-visible {
    animation-duration: 0.6s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-fill-mode: both;
    animation-delay: calc(var(--reveal-delay, 0) * 1ms);
}
[data-reveal="fade-up"].is-visible    { animation-name: revealUp; }
[data-reveal="fade-in"].is-visible    { animation-name: revealFade; }
[data-reveal="scale-in"].is-visible   { animation-name: revealScale; }
[data-reveal="slide-left"].is-visible { animation-name: revealLeft; }
[data-reveal="slide-right"].is-visible{ animation-name: revealRight; }

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1 !important; transform: none !important; }
    [data-reveal].is-visible { animation: none !important; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 8px;
    top: -48px;
    z-index: 2000;
    background: var(--accent-teal);
    color: #000;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    text-decoration: none;
    transition: top .15s ease;
}

.skip-link:focus {
    top: 8px;
}

.fe-verify-cta {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid rgba(var(--accent-yellow-rgb), 0.28);
    border-radius: var(--radius-sm);
    background: rgba(var(--accent-yellow-rgb), 0.08);
    color: var(--text-secondary);
    text-align: left;
}
.fe-verify-cta__title {
    color: var(--accent-yellow);
    font-weight: 800;
    font-size: 13px;
}
.fe-verify-cta__copy {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}
.fe-verify-cta__form {
    margin: 10px 0 0;
}
.fe-verify-cta__btn {
    width: 100%;
    justify-content: center;
}

html,
body {
    max-width: 100%;
    overflow-x: clip;
}
@supports not (overflow-x: clip) {
    html,
    body { overflow-x: hidden; }
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
    min-height: 100vh;
}

/* ── Layout ───────────────────────────── */
.layout { display: flex; min-height: 100vh; }

.sidebar {
    width: 240px;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-subtle);
    padding: 24px 0;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    overflow-y: auto;
    z-index: 100;
}

.sidebar-brand {
    padding: 0 20px 20px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 16px;
}
.sidebar-brand h1 {
    font-size: 16px;
    font-weight: 800;
    color: var(--accent-teal);
    letter-spacing: -0.3px;
}
.sidebar-brand .version {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 2px;
}

.nav-group { margin-bottom: 16px; }
.nav-group-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 0 20px;
    margin-bottom: 6px;
}
.nav-link {
    display: block;
    padding: 8px 20px;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    border-left: 3px solid transparent;
    /* v3.2.3 micro: smoother multi-property transition + subtle
       translate on hover for tactile feedback. */
    transition: color 0.18s ease, background 0.18s ease,
                border-left-color 0.18s ease, transform 0.18s ease,
                padding-left 0.18s ease;
}
.nav-link:hover {
    color: var(--text-primary);
    background: var(--nav-hover-bg);
    border-left-color: var(--border-hover);
    /* Nudge right on hover — feels responsive, never jumpy. */
    padding-left: 24px;
}
.nav-link.active {
    color: var(--accent-teal);
    background: var(--nav-active-bg);
    border-left-color: var(--accent-teal);
    font-weight: 600;
    /* Active-state glow on the accent bar — page indicator. */
    box-shadow: -3px 0 12px -3px rgba(var(--accent-teal-rgb), 0.4),
                inset 1px 0 0 rgba(var(--accent-teal-rgb), 0.15);
}
.nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 60%;
    transform: translateY(-50%);
    background: linear-gradient(180deg, var(--accent-teal), var(--accent-teal-dark));
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 8px rgba(var(--accent-teal-rgb), 0.5);
    pointer-events: none;
}
.nav-link { position: relative; }
.nav-link .icon { margin-right: 8px; }
.nav-link--badge-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.nav-link__content {
    min-width: 0;
    display: inline-flex;
    align-items: center;
}
.nav-count-badge {
    min-width: 22px;
    padding: 2px 8px;
    font-size: 10px;
    text-align: center;
    flex-shrink: 0;
}

/* ── v3.2.3 platform-wide micro-interactions ──
   Subtle lift on interactive cards, press-down on buttons, shimmer on
   primary CTAs. Applied via selectors that already exist in the
   codebase — no template changes required. */

/* Card hover elevation on cards inside events / analysis flows.
   Guarded by .interactive-card class to opt-in (avoids affecting
   every static stat card). */
.card.interactive-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease,
                border-color 0.2s ease;
    will-change: transform;
}
.card.interactive-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.35),
                0 0 0 1px rgba(var(--accent-teal-rgb), 0.12);
    border-color: rgba(var(--accent-teal-rgb), 0.2);
}

/* Fight-card hover: the .fight-card class exists throughout reports.
   Keep the accent border-left, add a gentle lift + deeper shadow when
   the user's actively scanning a card. */
.fight-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease,
                border-left-color 0.2s ease;
}
.fight-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-card), 0 0 0 1px rgba(var(--accent-teal-rgb), 0.08);
}

/* Button press feedback — gives the UI a tactile "click" feel. */
.btn:active,
.btn-primary:active,
.btn-secondary:active,
.btn-hero:active { transform: translateY(0) scale(0.98); }

/* Primary CTA — subtle shimmer band on hover to mark it as THE action. */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg,
        transparent 0%,
        rgba(255,255,255,0.15) 50%,
        transparent 100%);
    transform: skewX(-22deg);
    transition: left 0.6s ease;
    pointer-events: none;
}
.btn-primary:hover::after { left: 160%; }

/* Focus-visible ring for keyboard users — a11y + polish. Only appears
   when navigating via keyboard (not on mouse click). */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
input:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid rgba(var(--accent-teal-rgb), 0.5);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Respect reduced motion — kill transforms/animations for users who
   opted out at the OS level. */
@media (prefers-reduced-motion: reduce) {
    .nav-link:hover { padding-left: 20px; transform: none !important; }
    .card.interactive-card:hover,
    .fight-card:hover,
    .btn:hover,
    .btn-primary::after { transform: none !important; }
    .btn-primary::after { display: none !important; }
}

/* ── v3.2.5: Core Edges + Supporting Insights hover polish ──
   Paired with the fight_result.html card-grid redesign. Core cards
   lift and brighten the category-colored left border; supporting
   insights get a subtle row-hover highlight. */
.core-edge-card {
    will-change: transform;
}
.core-edge-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.35),
                0 0 0 1px rgba(255,255,255,0.04);
    /* Amplify the border-left saturation on hover via filter —
       cheaper than rewriting the inline border color. */
    filter: saturate(1.15);
}
.support-insights {
    margin-top: 14px;
}
.support-insights__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.support-insights__rail {
    width: 3px;
    height: 14px;
    background: linear-gradient(180deg, var(--text-muted), rgba(255,255,255,0.06));
    border-radius: 2px;
}
.support-insights__title {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.support-insights__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 6px 12px;
}
.support-insight {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    transition: background 0.15s, border-color 0.15s;
}
.support-insight:hover {
    background: var(--bg-subtle);
    border-color: var(--border-subtle);
}
.support-insight__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    font-size: 11px;
}
.support-insight__body {
    flex: 1;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.55;
}
@media (prefers-reduced-motion: reduce) {
    .core-edge-card:hover { transform: none !important; filter: none !important; }
    .support-insight { transition: none !important; }
}
@media (max-width: 480px) {
    /* Collapse to single column on small phones for readability. */
    .core-edge-card { padding: 12px !important; }
    .support-insights__grid { grid-template-columns: 1fr; }
}

.main-content {
    margin-left: 240px;
    flex: 1;
    padding: 32px;
    max-width: 1100px;
}
.fe-content-frame {
    position: relative;
}
.fe-watermark {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 9;
    opacity: 0.035;
}

/* ── Page Headers ─────────────────────── */
.page-header {
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-subtle);
}
.page-header h1 {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-heading);
    letter-spacing: -0.5px;
}
.page-header .subtitle {
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* ── Cards ────────────────────────────── */
.card {
    background: var(--bg-card);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-card);
    padding: 24px;
    margin-bottom: 20px;
}
.card:hover { border-color: var(--border-hover); }
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-heading);
}

/* ── Stat Grid ────────────────────────── */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.stat-card {
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 16px;
    text-align: center;
}
.stat-card .value {
    font-size: 28px;
    font-weight: 800;
    color: var(--accent-teal);
}
.stat-card .label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}
.stat-card--compact .value {
    font-size: 20px;
}

.stat-grid--spaced {
    margin-top: 16px;
}

/* ── Tables ───────────────────────────── */
.table-container { overflow-x: auto; }
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
thead th {
    text-align: left;
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-subtle);
    /* Sticky column headers — keep context visible on long tables
       (Expert Picks has 27 rows × 5 columns, Parlay Builder 15+ rows). */
    position: sticky;
    top: 0;
    background: var(--bg-card);
    z-index: 5;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--row-border);
    color: var(--text-secondary);
}
tbody tr:hover { background: var(--row-hover); }

/* ── Forms ────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
input[type="text"], input[type="email"], input[type="password"], input[type="number"], select {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
}
select option {
    background: var(--bg-input-option);
    color: var(--text-primary);
    padding: 8px;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, select:focus {
    border-color: var(--accent-teal);
    box-shadow: 0 0 0 3px rgba(var(--accent-teal-rgb), 0.08);
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
    text-decoration: none;
}
.btn-primary {
    background: linear-gradient(135deg, var(--accent-teal), var(--accent-teal-dark));
    color: var(--btn-primary-text);
}
.btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
.btn-secondary {
    background: var(--bg-input-hover);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
}
.btn-secondary:hover { background: var(--bg-input); color: var(--text-heading); }

/* ── Chips / Badges ───────────────────── */
.chip {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}
.chip-teal { background: rgba(var(--accent-teal-rgb), 0.15); color: var(--accent-teal); }
.chip-red { background: rgba(var(--accent-red-rgb), 0.15); color: var(--accent-red); }
.chip-yellow { background: rgba(var(--accent-yellow-rgb), 0.15); color: var(--accent-yellow); }
.chip-green { background: rgba(var(--accent-green-rgb), 0.15); color: var(--accent-green); }
.chip-blue { background: rgba(var(--accent-blue-rgb), 0.15); color: var(--accent-blue); }
.chip-muted { background: rgba(255,255,255,0.06); color: var(--text-muted); }

/* STRONG confidence chip — used for 65%+ model picks on Parlay Builder /
   Expert Picks. Saturated color + soft glow pulls the eye to the handful
   of high-conviction picks on a dense card, which is what bettors scan
   for first. */
.chip-strong {
    background: linear-gradient(135deg, rgba(var(--accent-green-rgb), 0.28), rgba(var(--accent-teal-rgb), 0.22));
    color: var(--accent-teal-light);
    font-weight: 700;
    box-shadow: 0 0 12px rgba(var(--accent-teal-rgb), 0.35),
                inset 0 0 0 1px rgba(var(--accent-teal-rgb), 0.45);
    letter-spacing: 0.5px;
}
[data-theme="light"] .chip-strong {
    background: linear-gradient(135deg, rgba(var(--accent-green-rgb), 0.20), rgba(var(--accent-teal-rgb), 0.18));
    color: var(--accent-teal-dark);
    box-shadow: 0 0 10px rgba(var(--accent-teal-rgb), 0.28),
                inset 0 0 0 1px rgba(var(--accent-teal-rgb), 0.35);
}

/* CSS-only tooltip — attach via data-tooltip="Your text" on any element.
   No JS, no deps. Pointer-events:none avoids hover flicker; the parent
   stays interactive. Used for column headers and chip labels to explain
   terms like "Blended Signal", "LOCKness", "Split opinion" to new users
   without cluttering the layout. */
[data-tooltip] {
    position: relative;
    cursor: help;
}
.fe-inline-help {
    border-bottom: 1px dotted rgba(var(--accent-teal-rgb), 0.45);
}
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(20,20,26,0.96);
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-hover);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
    width: max-content;
    max-width: 280px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 100;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    line-height: 1.5;
}
[data-fe-title] {
    cursor: help;
}
.fe-js-tooltip {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 3000;
    max-width: min(300px, calc(100vw - 24px));
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-hover);
    background: rgba(20,20,26,0.98);
    color: var(--text-primary);
    box-shadow: 0 8px 28px rgba(0,0,0,0.42);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px) scale(0.98);
    transition: opacity 0.14s ease, transform 0.14s ease;
}
.fe-js-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
[data-theme="light"] .fe-js-tooltip {
    background: rgba(255,255,255,0.98);
    color: var(--text-primary);
    box-shadow: 0 8px 28px rgba(15,23,42,0.16);
}
[data-theme="light"] [data-tooltip]::after {
    background: rgba(255,255,255,0.98);
    color: var(--text-primary);
    border-color: var(--border-hover);
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* Flip the tooltip below when near the top of the viewport (for sticky
   table headers) — otherwise it'd render above the header and be clipped. */
thead [data-tooltip]::after,
[data-tooltip-below]::after {
    bottom: auto;
    top: calc(100% + 8px);
    transform: translateX(-50%) translateY(-4px);
}
thead [data-tooltip]:hover::after,
[data-tooltip-below]:hover::after {
    transform: translateX(-50%) translateY(0);
}
/* Touch devices: disable the CSS hover tooltip (no reliable hover state).
   The TAP fallback lives in tooltips.js (#fe-js-tooltip, loaded in base.html)
   which shows the full description on pointerdown for coarse pointers.
   The dotted underline marks tappable explainers so touch users can
   discover them (same affordance as .fe-inline-help). */
@media (hover: none) {
    [data-tooltip],
    [data-fe-title] {
        cursor: pointer;
        border-bottom: 1px dotted rgba(var(--accent-teal-rgb), 0.45);
    }
    [data-tooltip]::after { display: none !important; }
}

/* On mobile: tone down the STRONG chip glow — the soft blur at 9px font
   size looks smeared. Keep the gradient, drop the outer glow. */
@media (max-width: 480px) {
    .chip-strong {
        box-shadow: inset 0 0 0 1px rgba(var(--accent-teal-rgb), 0.45);
        letter-spacing: 0;
    }
}

/* UX polish batch: quieter navigation, compact repeat-use dashboard tools. */
.sidebar-more {
    margin: 0;
}
.sidebar-more__summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sidebar-more__summary::-webkit-details-marker {
    display: none;
}
.sidebar-more__summary::after {
    content: "+";
    color: var(--text-dim);
    font-size: 12px;
}
.sidebar-more[open] .sidebar-more__summary::after {
    content: "-";
}

.dashboard-shortcuts {
    margin: 0 0 20px;
}
.dashboard-shortcuts > summary {
    cursor: pointer;
    width: fit-content;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.025);
}
.dashboard-shortcuts[open] > summary {
    color: var(--accent-teal);
    border-color: rgba(var(--accent-teal-rgb), 0.24);
}
.dashboard-shortcuts__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 10px;
}
.dashboard-shortcuts__grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dashboard-shortcuts--secondary {
    margin-top: 8px;
}
.dashboard-event-row:hover {
    background: rgba(var(--accent-teal-rgb), 0.035);
}
@media (max-width: 900px) {
    .dashboard-shortcuts__grid,
    .dashboard-shortcuts__grid--three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 560px) {
    .dashboard-shortcuts__grid,
    .dashboard-shortcuts__grid--three {
        grid-template-columns: minmax(0, 1fr);
    }
}

.vf-explainer > summary {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.vf-explainer > summary strong {
    color: var(--text-heading);
}
.vf-explainer .vf-trust-grid {
    margin-top: 14px;
}

.fighter-watch-form__button--watched {
    border-color: rgba(var(--accent-teal-rgb), 0.34);
    color: var(--accent-teal-light);
}
.fighter-watch-form__button--watched:hover {
    border-color: rgba(255,75,75,0.42);
    color: var(--accent-red-light);
}

.fe-profile-sub__tech {
    margin-top: 8px;
    color: var(--text-dim);
    font-size: 11px;
}
.fe-profile-sub__tech summary {
    cursor: pointer;
    width: fit-content;
}

.reaction-btn {
    min-height: 30px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025);
}
.reaction-btn:hover {
    border-color: rgba(var(--accent-teal-rgb), 0.34) !important;
    background: rgba(var(--accent-teal-rgb), 0.08) !important;
    color: var(--accent-teal-light) !important;
}

.fight-deep-toggle {
    margin-top: 16px;
    border-top: 1px solid var(--border-subtle);
    padding-top: 12px;
}
.fight-deep-toggle > summary {
    cursor: pointer;
    width: fit-content;
    color: var(--accent-teal);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    padding: 7px 11px;
    border: 1px solid rgba(var(--accent-teal-rgb), 0.22);
    border-radius: var(--radius-sm);
    background: rgba(var(--accent-teal-rgb), 0.065);
}
.fight-deep-toggle[open] > summary {
    margin-bottom: 14px;
}
.fight-deep-toggle__body {
    display: grid;
    gap: 14px;
}

.fighter-record-card {
    border-color: rgba(var(--accent-teal-rgb), 0.24);
    background: linear-gradient(135deg, rgba(var(--accent-teal-rgb), 0.08), var(--bg-card));
}
.fighter-record-card .value {
    font-size: 30px;
}

/* Sticky table headers: on mobile the table is horizontally scrollable
   via .table-container. The sticky header still pins vertically but
   needs to scroll horizontally with its row. Keep the positioning. */
@media (max-width: 768px) {
    thead th {
        /* Slightly tighter padding — 6px is already set at <=480px */
        padding: 8px 10px;
    }
}

/* ── Probability Bar ──────────────────── */
.prob-bar {
    display: flex;
    height: 14px;
    border-radius: 7px;
    overflow: hidden;
    background: var(--bg-bar);
    margin: 12px 0;
}
.prob-bar .side-a {
    background: linear-gradient(90deg, var(--accent-corner-blue, #3b82f6), var(--accent-corner-blue-light, #7dd3fc));
    transform-origin: left center;
    will-change: transform;
    animation: barGrow 0.8s ease-out;
}
.prob-bar .side-b {
    background: linear-gradient(90deg, var(--accent-teal), var(--accent-teal-light));
    transform-origin: right center;
    will-change: transform;
    animation: barGrow 0.8s ease-out;
}

/* ── Fight Card ───────────────────────── */
.fight-card {
    border-left: 4px solid var(--text-dim);
}
.fight-card.high { border-left-color: var(--accent-teal); box-shadow: 0 2px 12px rgba(var(--accent-teal-rgb), 0.06); }
.fight-card.medium { border-left-color: var(--accent-yellow); }

@supports (content-visibility: auto) {
    .fight-card {
        content-visibility: auto;
        contain-intrinsic-size: 0 640px;
    }
}

/* ── Loading / HTMX ──────────────────── */
.htmx-indicator {
    display: none;
    color: var(--accent-teal);
    font-size: 13px;
}
.htmx-request .htmx-indicator { display: inline; }
.htmx-request .htmx-hide { opacity: 0.5; pointer-events: none; }

/* ── Mobile Header (hidden on desktop) ── */
.mobile-header {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 56px;
    background: var(--bg-mobile-header);
    border-bottom: 1px solid var(--border-subtle);
    z-index: 200;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    backdrop-filter: blur(12px);
}
.mobile-header .brand {
    font-size: 16px;
    font-weight: 800;
    color: var(--accent-teal);
}
.hamburger {
    width: 44px; height: 44px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 5px; cursor: pointer;
    background: none; border: none; padding: 0;
}
.hamburger span {
    display: block; width: 22px; height: 2px;
    background: var(--text-secondary);
    border-radius: 2px; transition: all 0.3s;
}
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ── Mobile Sidebar Overlay ── */
.sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--bg-overlay);
    z-index: 99;
}
.sidebar-backdrop.active { display: block; }

/* ── Responsive: Tablet ─────────────── */
@media (max-width: 1024px) {
    .main-content { padding: 24px; max-width: 100%; }
    .stat-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* ── Responsive: Mobile ─────────────── */
@media (max-width: 768px) {
    .mobile-header { display: flex; }
    .main-content {
        margin-left: 0;
        padding: 16px;
        padding-top: 72px; /* space for fixed mobile header */
        max-width: 100%;
    }
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 150;
        width: 260px;
        padding-top: 16px;
    }
    .sidebar.open { transform: translateX(0); }
    .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .stat-card .value { font-size: 22px; }
    .page-header h1 { font-size: 22px; }
    .page-header .subtitle { font-size: 12px; }
    .card { padding: 16px; margin-bottom: 14px; }
    .card-header { flex-direction: column; align-items: flex-start; gap: 8px; }
    .card-title { font-size: 14px; }
    /* Buttons: bigger touch targets */
    .btn { padding: 12px 20px; min-height: 44px; }
    .nav-link { padding: 12px 20px; min-height: 44px; display: flex; align-items: center; }
    /* Tables: horizontal scroll */
    .table-container { -webkit-overflow-scrolling: touch; }
    table { min-width: 500px; }
    /* Stack grids — catches ALL inline grid layouts */
    div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
    div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
    div[style*="grid-template-columns: 2fr 1fr"] { grid-template-columns: 1fr !important; }
    div[style*="grid-template-columns:2fr 1fr"] { grid-template-columns: 1fr !important; }
    /* v3.2.47: reverse-ratio grids — dashboard hero, lock_or_fade header */
    div[style*="grid-template-columns: 1fr 2fr"] { grid-template-columns: 1fr !important; }
    div[style*="grid-template-columns:1fr 2fr"] { grid-template-columns: 1fr !important; }
    div[style*="grid-template-columns: 3fr 2fr"] { grid-template-columns: 1fr !important; }
    div[style*="grid-template-columns:3fr 2fr"] { grid-template-columns: 1fr !important; }
    div[style*="grid-template-columns: 2fr 3fr"] { grid-template-columns: 1fr !important; }
    div[style*="grid-template-columns:2fr 3fr"] { grid-template-columns: 1fr !important; }
    div[style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr 1fr !important; }
    div[style*="grid-template-columns:repeat(3"] { grid-template-columns: 1fr 1fr !important; }
    div[style*="grid-template-columns: repeat(4"] { grid-template-columns: 1fr 1fr !important; }
    div[style*="grid-template-columns:repeat(4"] { grid-template-columns: 1fr 1fr !important; }
    div[style*="grid-template-columns:repeat(auto-fit"] { grid-template-columns: 1fr 1fr !important; }
    /* v3.2.47: 5+-column grids (event_analysis edge row) → collapse fully */
    div[style*="grid-template-columns: 1fr auto 1fr auto 1fr"] { grid-template-columns: 1fr !important; row-gap: 8px !important; }
    div[style*="grid-template-columns:1fr auto 1fr auto 1fr"] { grid-template-columns: 1fr !important; row-gap: 8px !important; }
    div[style*="grid-template-columns: repeat(5"] { grid-template-columns: 1fr 1fr !important; }
    div[style*="grid-template-columns:repeat(5"] { grid-template-columns: 1fr 1fr !important; }
    /* v3.2.47: minmax() hero grids (accuracy.html context row, hero stats) */
    div[style*="minmax(260px"] { grid-template-columns: 1fr !important; }
    div[style*="minmax(240px"] { grid-template-columns: 1fr !important; }
    div[style*="minmax(220px"] { grid-template-columns: 1fr !important; }
    div[style*="minmax(180px"] { grid-template-columns: 1fr 1fr !important; }
    div[style*="minmax(120px"] { grid-template-columns: 1fr 1fr !important; }
    /* Flex containers: ensure wrapping and reduce min-widths.
       v3.2.58.1: force cache-busting repack (ZipInfo date_time refresh).
       v3.2.58 CSS content was correct but the zip entry mtime was
       inherited from the source zip, so the serve-time CACHE_VERSION
       didn't change across deploys → service worker + browser served
       stale CSS despite new bytes on disk. Rebuilt with fresh mtime.
       v3.2.58: exclude children with `flex:1` from the min-width:100%
       overrides. A `flex:1 + min-width:XXXpx` child is designed to grow
       inside a flex row; forcing it to 100% width makes it take the
       whole row and siblings wrap to the next line, collapsing a
       horizontal card layout into a vertical stack. This regressed the
       Value Finder bet tiers (flex row with fighter-info at flex:1 +
       min-width:160px, then 4 stat tiles) on tablet-sized viewports
       (480-768px) where the @768 block fires but content is wide
       enough that stacking isn't needed. */
    div[style*="display:flex"][style*="gap"] { flex-wrap: wrap !important; }
    div[style*="display: flex"][style*="gap"] { flex-wrap: wrap !important; }
    div[style*="min-width:200px"]:not([style*="flex:1"]) { min-width: 100% !important; }
    div[style*="min-width:160px"]:not([style*="flex:1"]) { min-width: 100% !important; }
    /* v3.2.47: additional min-width variants seen on sentiment, accuracy, parlay */
    div[style*="min-width:340px"]:not([style*="flex:1"]) { min-width: 100% !important; }
    div[style*="min-width:280px"]:not([style*="flex:1"]) { min-width: 100% !important; }
    div[style*="min-width:240px"]:not([style*="flex:1"]) { min-width: 100% !important; }
    div[style*="min-width:180px"]:not([style*="flex:1"]) { min-width: 100% !important; }
    div[style*="min-width:140px"] { min-width: 100% !important; }
    div[style*="min-width:120px"] { min-width: 90px !important; }
    /* Value finder / fade signal flex items: shrink on mobile */
    div[style*="min-width:70px"] { min-width: 50px !important; }
    div[style*="min-width:60px"] { min-width: 45px !important; }
    div[style*="min-width:55px"] { min-width: 40px !important; }
    /* v3.2.47: page headers — stack H1 + action buttons on narrow screens so
       the "Re-Analyze / Full Report / Copy Link" row doesn't squeeze the title */
    .page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .page-header > div[style*="display:flex"] { width: 100%; flex-wrap: wrap; gap: 8px; }
    /* v3.2.47: "Filter buttons" rows (rankings divisions, expert source filters)
       — prevent mid-word breaks like "Lig\nHea" on narrow phones */
    button.chip, a.chip, .chip button, [style*="flex-wrap:wrap"] button {
        white-space: nowrap;
    }
    /* v3.2.47: sticky sidebars in 2-column layouts (parlay_builder slip,
       dashboard rail) — once the grid collapses to 1 column on mobile,
       "position:sticky" anchored to the desktop nav offset (top:80px)
       would pin the sidebar below content instead of alongside it. Unstick. */
    div[style*="position:sticky"][style*="top:80"],
    div[style*="position: sticky"][style*="top:80"],
    div[style*="position:sticky"][style*="top: 80"],
    div[style*="position: sticky"][style*="top: 80"] {
        position: static !important;
        top: auto !important;
    }
    /* v3.2.47.1: landing-page hero CTAs. The .cta-row is flex-wrap:wrap
       but "Create Free Account" was wrapping the word "Account" mid-button
       (text wrap inside padding), making the second button render as a
       visually disconnected second line below the first CTA. Lock text
       to a single line — the button drops cleanly to its own row instead. */
    .btn-hero { white-space: nowrap; }
    /* v3.2.47.1: flex-item checkboxes/radios — belt-and-suspenders reset in
       case a label container ever pushes `width: inherit` down. Keeps them
       at their intrinsic box size, not viewport-wide. */
    input[type="checkbox"], input[type="radio"] {
        width: auto !important;
        flex-shrink: 0;
    }
    /* What-If form: stack controls vertically */
    form[hx-post*="what-if"] > div { flex-direction: column !important; align-items: stretch !important; }
    form[hx-post*="what-if"] label { width: 100% !important; }
    form[hx-post*="what-if"] select { width: 100% !important; }
    /* Tables: better horizontal scroll indication */
    .table-container { position: relative; }
    .table-container::after {
        content: '← scroll →';
        display: block;
        text-align: center;
        font-size: 10px;
        color: var(--text-dim);
        padding: 4px 0;
    }
    /* Scroll reveals: shorter/snappier on mobile */
    [data-reveal].is-visible { animation-duration: 0.4s; }
    [data-reveal="slide-left"].is-visible,
    [data-reveal="slide-right"].is-visible { animation-name: revealUp; }
    /* Fight report props grid: stack on mobile */
    .props-grid { grid-template-columns: 1fr !important; }
    /* Fight report tables: allow smaller min-width for tight tables */
    .fight-card table { min-width: auto; }
    /* Larger touch targets for form inputs */
    input[type="text"], input[type="email"], input[type="password"], input[type="number"], select {
        padding: 14px 16px; font-size: 16px; /* prevents iOS zoom on focus */
    }
}

/* ── Responsive: Small Phone ────────── */
@media (max-width: 480px) {
    .stat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .stat-card { padding: 12px; }
    .stat-card .value { font-size: 18px; }
    .stat-card .label { font-size: 10px; }
    .page-header h1 { font-size: 20px; }
    .card { padding: 14px; border-radius: var(--radius-md); }
    table { font-size: 11px; min-width: 350px; }
    thead th { padding: 6px; font-size: 10px; }
    tbody td { padding: 6px; }
    .chip { padding: 2px 6px; font-size: 10px; }
    /* Force all multi-column grids to stack */
    div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
    div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
    div[style*="grid-template-columns:repeat(auto-fit"] { grid-template-columns: 1fr !important; }
    /* v3.2.47: force 3/4-col grids to single column at phone size (the
       ≤768 rule collapses them to 2 cols — on narrow phones 2 still
       crowds tiles with 130px font-size stat values). */
    div[style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr !important; }
    div[style*="grid-template-columns:repeat(3"] { grid-template-columns: 1fr !important; }
    div[style*="grid-template-columns: repeat(4"] { grid-template-columns: 1fr !important; }
    div[style*="grid-template-columns:repeat(4"] { grid-template-columns: 1fr !important; }
    div[style*="grid-template-columns: repeat(5"] { grid-template-columns: 1fr !important; }
    div[style*="grid-template-columns:repeat(5"] { grid-template-columns: 1fr !important; }
    div[style*="minmax(180px"] { grid-template-columns: 1fr !important; }
    div[style*="minmax(120px"] { grid-template-columns: 1fr !important; }
    /* v3.2.47: tighten hero-card paddings on phones (dashboard, event_analysis,
       fight reports) — 28px/32px eats too much of a 375px viewport. */
    .card[style*="padding:28px"], .card[style*="padding: 28px"] { padding: 16px !important; }
    .card[style*="padding:32px"], .card[style*="padding: 32px"] { padding: 16px !important; }
    div[style*="padding:28px 32px"], div[style*="padding: 28px 32px"] { padding: 16px 12px !important; }
    div[style*="padding:24px 28px"], div[style*="padding: 24px 28px"] { padding: 14px 12px !important; }
    /* Prob bar: ensure min-height for tap */
    .prob-bar { height: 10px !important; border-radius: 5px !important; }
    /* v3.2.47: compact prob-bar labels — the 34px bar with 13-16px labels
       inside (site + twitter-banner pattern) misaligns on narrow phones. */
    .prob-bar-wrap { height: 28px !important; }
    .prob-bar-wrap > div[style*="font-size"] { font-size: 11px !important; }
    /* Hide scroll hint after first interaction */
    .table-container::after { font-size: 9px; }
    /* Reduce padding on dense layouts */
    .card-header { padding: 10px 14px; }
    /* Form inputs: full width EXCEPT checkboxes/radios which have fixed
       dimensions. v3.2.47 shipped `input { width: 100% }` which applied
       to checkboxes too, causing the register-age checkbox to expand
       viewport-wide (squeezing the consent text to a narrow column) and
       the parlay-builder leg-checkboxes to push fighter labels offscreen. */
    input:not([type="checkbox"]):not([type="radio"]),
    select, textarea { width: 100% !important; box-sizing: border-box; }
    /* v3.2.47: large inline font-sizes (stat values, fighter names) often
       hardcode 26-40px which overflows on 320-375px phones. Cap them. */
    div[style*="font-size:40px"], div[style*="font-size: 40px"] { font-size: 26px !important; }
    div[style*="font-size:36px"], div[style*="font-size: 36px"] { font-size: 24px !important; }
    div[style*="font-size:32px"], div[style*="font-size: 32px"] { font-size: 22px !important; }
    div[style*="font-size:28px"], div[style*="font-size: 28px"] { font-size: 20px !important; }
    div[style*="font-size:26px"], div[style*="font-size: 26px"] { font-size: 18px !important; }
    span[style*="font-size:26px"], span[style*="font-size: 26px"] { font-size: 18px !important; }
    /* v3.2.47: flex-gap'd scroll-revealing pill rows (fade signals, event
       chips) — when the parent is already flex-wrap:wrap, force each
       child with a large flex-basis to full width on tiny screens. */
    div[style*="display:flex"][style*="flex-wrap:wrap"] > div[style*="flex:1"],
    div[style*="display: flex"][style*="flex-wrap: wrap"] > div[style*="flex:1"] {
        flex-basis: 100% !important;
    }
}

/* ── Theme Toggle ────────────────────── */
.theme-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    margin-top: 4px;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 12px;
    color: var(--text-muted);
    transition: color 0.15s;
    width: 100%;
    text-align: left;
}
.theme-toggle:hover { color: var(--text-primary); }
.theme-toggle-track {
    width: 36px; height: 20px;
    background: var(--bg-input-hover);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    position: relative;
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
}
.theme-toggle-thumb {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--accent-teal);
    position: absolute;
    top: 1px; left: 1px;
    transition: transform 0.2s;
}
[data-theme="light"] .theme-toggle-thumb {
    transform: translateX(16px);
}
.theme-toggle-icon { font-size: 14px; }

/* Reddit sentiment trust cues */
.sentiment-quality-note {
    color: var(--text-dim);
    font-size: 11px;
    margin: -4px 0 12px;
}
.sentiment-sample-line {
    margin-top: 6px;
}
.sentiment-sample-line .chip {
    font-size: 9px;
    line-height: 1.2;
}
.sentiment-sample-note {
    color: var(--text-dim);
    font-size: 9px;
    margin-top: 3px;
}
.sentiment-signal-detail {
    color: var(--text-dim);
    font-size: 9px;
    line-height: 1.35;
    margin: 4px auto 0;
    max-width: 210px;
}

/* Admin ops console summary */
.admin-ops-banner {
    border: 1px solid var(--border-subtle);
    border-left: 4px solid var(--accent-teal);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.03);
    padding: 16px 18px;
}
.admin-ops-green { border-left-color: var(--accent-green); }
.admin-ops-yellow { border-left-color: #f59e0b; }
.admin-ops-red { border-left-color: var(--accent-red); }
.admin-ops-main {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.admin-ops-state {
    min-width: 76px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(var(--accent-teal-rgb), 0.12);
    color: var(--accent-teal);
    font-size: 11px;
    font-weight: 800;
    text-align: center;
    letter-spacing: 0;
    text-transform: uppercase;
}
.admin-ops-green .admin-ops-state {
    background: rgba(var(--accent-green-rgb), 0.14);
    color: var(--accent-green);
}
.admin-ops-yellow .admin-ops-state {
    background: rgba(245,158,11,0.14);
    color: #f59e0b;
}
.admin-ops-red .admin-ops-state {
    background: rgba(239,68,68,0.14);
    color: var(--accent-red);
}
.admin-ops-headline {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 800;
}
.admin-ops-subline,
.admin-muted-note {
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.45;
}
.admin-ops-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}
.admin-ops-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 10px 12px;
}
.admin-ops-item span {
    display: block;
    color: var(--text-dim);
    font-size: 10px;
    margin-bottom: 4px;
    text-transform: uppercase;
}
.admin-ops-item strong {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 800;
}
.admin-ops-warnings {
    margin: 10px 0 0;
    padding-left: 18px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.5;
}
.admin-ops-more {
    margin-top: 8px;
}
.admin-ops-more summary {
    color: var(--accent-teal);
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
}
.admin-ops-warnings--nested {
    margin-top: 7px;
}
body:has(#section-attention) .main-content {
    min-width: 0;
    width: 100%;
}
.admin-ops-nav {
    position: sticky;
    top: 8px;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
    padding: 8px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: rgba(10, 12, 16, 0.88);
    backdrop-filter: blur(12px);
}
.admin-ops-nav a {
    color: var(--text-secondary);
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 9px;
    text-decoration: none;
}
.admin-ops-nav a:hover,
.admin-ops-nav a:focus {
    color: var(--text-primary);
    border-color: var(--border-subtle);
    background: rgba(255,255,255,0.04);
}
.admin-ops-command-center {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.9fr);
}
.admin-segmented-control,
.admin-issue-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.admin-segment-button,
.admin-filter-button {
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    background: var(--bg-subtle);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
    padding: 7px 10px;
}
.admin-segment-button.is-active,
.admin-filter-button.is-active {
    border-color: rgba(var(--accent-teal-rgb), 0.45);
    background: rgba(var(--accent-teal-rgb), 0.14);
    color: var(--accent-teal);
}
.admin-filter-button span {
    color: var(--text-dim);
    margin-left: 4px;
}
.admin-deploy-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.admin-deploy-grid div {
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    padding: 8px 10px;
}
.admin-deploy-grid span,
.admin-receipt__meta span {
    display: block;
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}
.admin-deploy-grid strong {
    color: var(--text-primary);
    display: block;
    font-size: 12px;
    margin-top: 3px;
    overflow-wrap: anywhere;
}
.admin-attention-layout {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.6fr);
}
.admin-issue-list,
.admin-recent-list {
    display: grid;
    gap: 8px;
}
.admin-issue-row {
    display: grid;
    align-items: center;
    gap: 10px;
    grid-template-columns: 92px minmax(130px, 0.7fr) minmax(220px, 1.4fr) auto;
    padding: 10px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
}
.admin-issue-row[hidden] {
    display: none !important;
}
.admin-issue-main {
    min-width: 0;
}
.admin-issue-area {
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 800;
    min-width: 0;
    overflow-wrap: anywhere;
}
.admin-issue-problem {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.admin-issue-detail {
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.35;
    margin-top: 2px;
    overflow-wrap: anywhere;
}
.admin-runbook-details {
    margin-top: 7px;
}
.admin-runbook-details summary {
    color: var(--accent-teal);
    cursor: pointer;
    font-size: 11px;
    font-weight: 800;
}
.admin-runbook-details ul {
    margin: 6px 0 0 16px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.45;
}
.admin-severity-pill {
    border-radius: 999px;
    display: inline-flex;
    justify-content: center;
    min-width: 78px;
    padding: 5px 8px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}
.admin-severity-pill--critical {
    background: rgba(239,68,68,0.14);
    color: var(--accent-red);
}
.admin-severity-pill--warning {
    background: rgba(245,158,11,0.14);
    color: #f59e0b;
}
.admin-severity-pill--info {
    background: rgba(var(--accent-teal-rgb), 0.12);
    color: var(--accent-teal);
}
.admin-recent-item {
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 9px 10px;
    background: rgba(255,255,255,0.025);
}
.admin-recent-item a {
    color: var(--text-primary);
    text-decoration: none;
}
.admin-recent-label {
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}
.admin-recent-value {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.35;
    margin-top: 3px;
}
.admin-health-trend-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.admin-health-trend {
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    padding: 12px;
}
.admin-health-trend__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.admin-health-trend__head span {
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 800;
}
.admin-health-trend__head strong {
    color: var(--text-secondary);
    font-size: 12px;
    text-align: right;
}
.admin-health-spark {
    display: flex;
    align-items: end;
    gap: 4px;
    height: 38px;
    margin-bottom: 8px;
}
.admin-health-spark span {
    flex: 1;
    min-width: 5px;
    border-radius: 4px 4px 2px 2px;
    background: var(--accent-teal);
    opacity: 0.85;
}
.admin-health-trend--yellow .admin-health-spark span {
    background: #f59e0b;
}
.admin-health-trend--red .admin-health-spark span {
    background: var(--accent-red);
}
.admin-health-trend--dim .admin-health-spark span {
    background: var(--text-dim);
}
.admin-action-receipts {
    display: grid;
    gap: 8px;
}
.admin-export-controls {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 12px;
}
.admin-export-field {
    align-items: center;
    color: var(--text-muted);
    display: inline-flex;
    font-size: 11px;
    gap: 7px;
}
.admin-export-field span {
    overflow-wrap: anywhere;
}
.admin-export-field--check {
    color: var(--text-secondary);
}
.admin-export-select {
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 12px;
    min-height: 30px;
    padding: 5px 8px;
}
.admin-export-checkbox {
    accent-color: var(--accent-teal);
    height: 16px;
    width: 16px;
}
.admin-receipt {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--accent-teal);
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    padding: 10px 12px;
}
.admin-receipt--error {
    border-left-color: var(--accent-red);
}
.admin-receipt--busy {
    border-left-color: #f59e0b;
}
.admin-receipt__main {
    min-width: 0;
}
.admin-receipt__main strong,
.admin-receipt__main span,
.admin-receipt__main small,
.admin-receipt__meta time,
.admin-receipt__meta small {
    display: block;
    overflow-wrap: anywhere;
}
.admin-receipt__main strong {
    color: var(--text-primary);
    font-size: 12px;
}
.admin-receipt__main span,
.admin-receipt__main small,
.admin-receipt__meta time,
.admin-receipt__meta small {
    color: var(--text-muted);
    font-size: 11px;
}
.admin-receipt__meta {
    text-align: right;
}
.admin-snapshot-details {
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    overflow: hidden;
}
.admin-snapshot-details summary {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(239,68,68,0.07);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 800;
}
.admin-snapshot-details summary small {
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 600;
}
.admin-snapshot-details .table-container {
    margin: 0;
    border-top: 1px solid var(--border-subtle);
}

/* Shared admin console primitives */
.admin-section-card {
    margin-bottom: 20px;
    scroll-margin-top: 74px;
}
.admin-section-card--compact {
    margin-bottom: 16px;
}
.admin-section-title {
    color: var(--text-primary);
    font-size: 15px;
    margin: 0 0 12px 0;
    min-width: 0;
    overflow-wrap: anywhere;
}
.admin-section-title span {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.admin-status-count {
    font-size: 11px;
    font-weight: 400;
    margin-left: 6px;
}
.admin-status-count--green {
    color: var(--accent-green);
}
.admin-status-count--yellow {
    color: #f59e0b;
}
.admin-status-count--red {
    color: var(--accent-red);
}
.admin-section-copy {
    color: var(--text-muted);
    font-size: 12px;
    margin-bottom: 12px;
}
.admin-empty-state {
    color: var(--text-dim);
    font-size: 13px;
    padding: 20px;
    text-align: center;
}
.admin-cell-center {
    text-align: center;
}
.admin-cell-right {
    text-align: right;
}
.admin-cell-muted {
    color: var(--text-muted);
    font-size: 12px;
    min-width: 0;
    overflow-wrap: anywhere;
}
.admin-cell-danger {
    color: var(--accent-red);
    overflow-wrap: anywhere;
}
.admin-cell-center {
    text-align: center;
}
.admin-cell-strong {
    color: var(--text-primary);
    min-width: 0;
    overflow-wrap: anywhere;
}
.admin-cell-mono {
    font-family: monospace;
    font-size: 12px;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.admin-stat-grid {
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 20px;
}
.admin-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}
.admin-card-grid--spaced {
    margin-bottom: 12px;
}
.admin-card-grid--wide {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.admin-card-grid--pipeline {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.admin-split-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: 1.1fr 1fr;
}
.admin-metric-tile {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 12px;
}
.admin-metric-tile--center {
    text-align: center;
}
.admin-metric-label {
    color: var(--text-muted);
    font-size: 11px;
    margin-bottom: 4px;
}
.admin-metric-label--spaced {
    margin-bottom: 8px;
}
.admin-metric-value {
    color: var(--text-secondary);
    font-size: 14px;
}
.admin-metric-value--large {
    font-size: 20px;
    font-weight: 700;
}
.admin-evidence-import {
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    display: grid;
    gap: 10px;
    margin: 12px 0 14px;
    padding: 12px;
}
.admin-evidence-title {
    color: var(--text-primary);
    font-size: 13px;
    margin: 0;
}
.admin-evidence-copy {
    margin: 4px 0 0;
}
.admin-evidence-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(180px, 1fr) minmax(130px, 0.55fr);
}
.admin-action-row--flush {
    margin-top: 0;
}
.admin-evidence-field {
    display: grid;
    gap: 5px;
}
.admin-evidence-field span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
}
.admin-evidence-input,
.admin-evidence-textarea {
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 12px;
    padding: 8px 10px;
    width: 100%;
}
.admin-evidence-textarea {
    min-height: 120px;
    resize: vertical;
}
.admin-evidence-result {
    border-top: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.5;
    padding-top: 10px;
}
.admin-evidence-result strong {
    color: var(--text-primary);
}
.admin-evidence-muted,
.admin-evidence-empty {
    color: var(--text-muted);
}
.admin-evidence-list,
.admin-evidence-warning,
.admin-evidence-empty {
    margin-top: 6px;
}
.admin-evidence-warning {
    color: var(--accent-yellow);
}
@media (max-width: 720px) {
    .admin-evidence-grid {
        grid-template-columns: 1fr;
    }
}
.admin-threshold-input {
    width: 100%;
    max-width: 96px;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 12px;
    padding: 6px 8px;
}
.admin-storage-breakdown {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    margin-bottom: 12px;
}
.admin-storage-group {
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    padding: 10px;
}
.admin-storage-group__head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}
.admin-storage-group__head strong {
    color: var(--text-primary);
    font-size: 12px;
}
.admin-storage-group__head span {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 800;
}
.admin-event-day-mode #section-live-ops,
.admin-event-day-mode #section-freshness,
.admin-event-day-mode #section-run-now,
.admin-event-day-mode #section-attention {
    border-color: rgba(var(--accent-teal-rgb), 0.42);
    box-shadow: 0 0 0 1px rgba(var(--accent-teal-rgb), 0.05), var(--shadow-card);
}
.admin-action-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}
.admin-job-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.admin-job-card {
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--accent-teal);
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    display: grid;
    gap: 8px;
    padding: 12px;
}
.admin-job-card--repair { border-left-color: #f59e0b; }
.admin-job-card--refresh { border-left-color: var(--accent-teal); }
.admin-job-card--seed { border-left-color: #8b5cf6; }
.admin-job-card--backup { border-left-color: #60a5fa; }
.admin-job-card--long { border-left-color: var(--accent-red); }
.admin-job-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.admin-job-card__meta span {
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 800;
    padding: 3px 7px;
    text-transform: uppercase;
}
.admin-job-card h4 {
    color: var(--text-primary);
    font-size: 13px;
    margin: 0;
}
.admin-job-card p,
.admin-job-card__impact {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.4;
    margin: 0;
}
.admin-job-card__impact {
    color: var(--text-secondary);
}
.admin-job-card__button {
    justify-self: start;
    margin-top: 2px;
}
.admin-action-button {
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    line-height: 1.2;
    max-width: 100%;
    padding: 6px 14px;
    text-align: center;
    text-decoration: none;
    white-space: normal;
}
.admin-action-button--compact {
    font-size: 11px;
    padding: 5px 9px;
}
.admin-action-button--primary {
    background: var(--accent-teal);
    color: var(--btn-primary-text);
    font-weight: 700;
}
.admin-action-button--warning {
    background: #f59e0b;
    color: #fff;
}
.admin-action-button--secondary {
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
}
.admin-action-button--purple {
    background: #8b5cf6;
    color: #fff;
}
.admin-action-button--danger {
    background: rgba(239,68,68,0.15);
    border: 1px solid rgba(239,68,68,0.3);
    color: var(--accent-red);
    font-weight: 700;
}
.admin-inline-note {
    color: var(--text-muted);
    font-size: 11px;
}
.admin-inline-form {
    display: inline;
    margin: 0;
}
.admin-inline-status {
    display: inline-block;
    font-size: 12px;
    margin-left: 6px;
}
.admin-status-slot {
    font-size: 12px;
    margin-top: 8px;
}
.admin-status-slot--teal {
    color: var(--accent-teal);
    font-size: 11px;
}
.admin-js-status {
    font-size: 12px;
}
.admin-js-status--teal {
    color: var(--accent-teal);
}
.admin-js-status--yellow {
    color: #f59e0b;
}
.admin-js-status--red {
    color: var(--accent-red);
}
.admin-action-kind {
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    color: var(--text-secondary);
    display: inline-flex;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 7px;
    text-transform: uppercase;
}
.admin-row-details {
    min-width: 190px;
}
.admin-row-details summary {
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
}
.admin-row-detail-body {
    display: grid;
    gap: 7px;
    margin-top: 8px;
}
.admin-kv-line {
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.35;
}
.admin-kv-line strong {
    color: var(--text-secondary);
}
@media (max-width: 768px) {
    .admin-stat-grid {
        grid-template-columns: 1fr;
    }
    .admin-split-grid {
        grid-template-columns: 1fr;
    }
    .admin-ops-nav {
        position: static;
    }
    .admin-attention-layout,
    .admin-ops-command-center,
    .admin-issue-row {
        grid-template-columns: 1fr;
    }
    .admin-deploy-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .admin-receipt {
        grid-template-columns: 1fr;
    }
    .admin-receipt__meta {
        text-align: left;
    }
    .admin-export-controls {
        align-items: stretch;
    }
    .admin-export-field,
    .admin-export-select,
    .admin-export-controls .admin-action-button {
        width: 100%;
    }
    .admin-export-field {
        justify-content: space-between;
    }
    .admin-export-field--check {
        justify-content: flex-start;
    }
    .admin-issue-row {
        align-items: stretch;
    }
    .admin-issue-row > div:last-child {
        display: flex;
        justify-content: flex-start;
    }
    .admin-row-details {
        min-width: 0;
        width: 100%;
    }
    body:has(#section-attention) .trust-table--cards > table > tbody > tr > td {
        grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
        min-width: 0;
    }
}

/* Shared report/result method probability rows */
.analysis-method-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
}

.analysis-method-card,
.analysis-signal-panel {
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 14px;
}

.analysis-method-label,
.analysis-section-label {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.analysis-method-label {
    margin-bottom: 8px;
}

.analysis-signal-panel {
    background: rgba(33, 150, 243, 0.04);
    border-color: rgba(33, 150, 243, 0.12);
    margin-top: 16px;
}

.analysis-signal-panel--tight {
    margin-top: 12px;
}

.analysis-section-label {
    color: #60a5fa;
    margin-bottom: 10px;
}

.analysis-section-chip {
    margin-left: 6px;
}

.analysis-signal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    font-size: 13px;
}

.analysis-signal-grid--compact {
    font-size: 12px;
}

.analysis-signal-item {
    color: var(--text-muted);
}

.analysis-signal-item strong {
    color: var(--text-secondary);
}

.common-opponents {
    margin-top: 16px;
    padding: 14px;
    background: rgba(var(--accent-teal-rgb), 0.04);
    border: 1px solid rgba(var(--accent-teal-rgb), 0.12);
    border-radius: var(--radius-md);
}

.common-opponents__heading {
    margin-bottom: 4px;
    color: var(--accent-teal);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.common-opponents__subhead {
    margin-bottom: 10px;
    color: var(--text-dim);
    font-size: 11px;
}

.common-opponents__grid {
    display: grid;
    gap: 8px;
}

.common-opponents__row {
    display: grid;
    grid-template-columns: minmax(120px, 1.25fr) repeat(2, minmax(90px, 1fr)) minmax(96px, 0.8fr);
    gap: 10px;
    align-items: center;
    padding: 9px 10px;
    color: var(--text-muted);
    font-size: 12px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: var(--radius-sm);
}

.common-opponents__opponent {
    color: var(--text-secondary);
    font-weight: 700;
}

.common-opponents__row strong {
    color: var(--text-primary);
}

.common-opponents__takeaway {
    color: var(--accent-yellow);
    font-size: 11px;
    font-weight: 700;
    text-align: right;
    text-transform: uppercase;
}

@media (max-width: 720px) {
    .common-opponents__row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .common-opponents__takeaway {
        text-align: left;
    }
}

.fight-form-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.fight-form-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid var(--hairline, rgba(255,255,255,0.07));
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005)),
                var(--bg-subtle);
}

.fight-form-card__main {
    min-width: 0;
}

.fight-form-card__name {
    color: var(--text-heading);
    font-size: 12px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fight-form-card__record {
    margin-top: 2px;
    color: var(--text-dim);
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.fight-form-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 3px 8px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.fight-form-chip--up {
    color: var(--accent-green);
    border-color: rgba(74, 222, 128, 0.24);
    background: rgba(74, 222, 128, 0.08);
}

.fight-form-chip--down {
    color: var(--accent-red);
    border-color: rgba(var(--accent-red-rgb), 0.24);
    background: rgba(var(--accent-red-rgb), 0.08);
}

.fight-form-chip--stable {
    color: var(--text-muted);
}

@media (max-width: 640px) {
    .fight-form-strip {
        grid-template-columns: 1fr;
    }
}

.prefight-context {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.018);
}

.prefight-context__heading {
    margin-bottom: 8px;
    color: var(--text-dim);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.prefight-context__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 8px;
}

.prefight-context__item {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid rgba(255,255,255,0.045);
    border-radius: var(--radius-sm);
    background: rgba(0,0,0,0.14);
}

.prefight-context__label {
    color: var(--text-dim);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.prefight-context__value {
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analysis-why-teaser {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(33, 150, 243, 0.04);
    border-left: 3px solid #2196f3;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.analysis-why-teaser__label {
    flex-shrink: 0;
    padding-top: 1px;
    color: #60a5fa;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.analysis-why-teaser__body {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.45;
}

.analysis-why-teaser__pick {
    color: #fff;
}

.analysis-why-teaser__link {
    margin-left: 6px;
    color: var(--accent-teal);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}

.analysis-attribution {
    margin-top: 16px;
    padding-left: 14px;
    border-left: 3px solid #2196f3;
}

.analysis-attribution--compact {
    margin-top: 12px;
    padding-left: 12px;
}

.analysis-attribution__title {
    margin-bottom: 8px;
    color: #60a5fa;
    font-size: 13px;
    font-weight: 700;
}

.analysis-attribution--compact .analysis-attribution__title {
    margin-bottom: 6px;
    font-size: 12px;
}

.analysis-attribution__support,
.analysis-attribution__oppose {
    margin-bottom: 2px;
    font-size: 13px;
}

.analysis-attribution--compact .analysis-attribution__support,
.analysis-attribution--compact .analysis-attribution__oppose {
    margin-bottom: 0;
    font-size: 12px;
}

.analysis-attribution__support {
    color: #4caf50;
}

.analysis-attribution__oppose {
    color: #f44336;
}

.analysis-attribution__adjustments {
    margin-top: 4px;
    color: var(--text-dim);
    font-size: 12px;
}

.analysis-note-box {
    margin-top: 10px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.5;
}

.analysis-note-box--bordered {
    margin-top: 8px;
    padding-top: 8px;
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
    color: var(--text-dim);
}

.analysis-note-box--conflict {
    margin-top: 10px;
    border-color: rgba(var(--accent-orange-rgb), 0.35);
}

.analysis-note-box__strong {
    color: #a78bfa;
}

.analysis-note-box__muted {
    color: var(--text-dim);
}

.analysis-waterfall {
    display: grid;
    gap: 6px;
    margin-top: 10px;
}

.analysis-waterfall__row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 52px;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}

.analysis-waterfall__label {
    color: var(--text-dim);
    font-weight: 700;
    text-transform: uppercase;
}

.analysis-waterfall__bar {
    display: block;
    width: 100%;
    height: 7px;
}

.analysis-waterfall__track {
    fill: rgba(255, 255, 255, 0.06);
}

.analysis-waterfall__fill--positive {
    fill: var(--accent-teal);
}

.analysis-waterfall__fill--negative {
    fill: var(--accent-red);
}

.analysis-waterfall__delta {
    text-align: right;
    font-weight: 700;
}

.analysis-waterfall__delta--positive {
    color: var(--accent-teal);
}

.analysis-waterfall__delta--negative {
    color: var(--accent-red);
}

.analysis-callout {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    font-size: 12px;
    line-height: 1.55;
}

.analysis-callout--coinflip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.18);
    border-radius: var(--radius-sm);
}

.analysis-callout--warning {
    background: rgba(var(--accent-orange-rgb), 0.06);
    border: 1px solid rgba(var(--accent-orange-rgb), 0.18);
}

.analysis-callout__row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.analysis-callout__icon {
    flex-shrink: 0;
    line-height: 1;
}

.analysis-callout--coinflip .analysis-callout__icon {
    padding-top: 1px;
    color: var(--accent-yellow);
    font-size: 13px;
}

.analysis-callout--warning .analysis-callout__icon {
    font-size: 14px;
}

.analysis-callout__body {
    color: var(--text-secondary);
}

.analysis-callout--coinflip .analysis-callout__body {
    font-size: 12px;
    line-height: 1.5;
}

.analysis-callout__title {
    color: #fff;
}

.analysis-callout__title--warning {
    color: var(--accent-orange);
    font-weight: 700;
}

.analysis-callout__link {
    color: var(--accent-teal);
    font-weight: 600;
    text-decoration: none;
}

.odds-board {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    padding: 14px 20px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.odds-board__side {
    flex: 1;
    text-align: center;
}

.odds-board__label {
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.odds-board__line {
    margin-top: 2px;
    font-size: 26px;
    font-weight: 900;
    line-height: 1.1;
}

.odds-board__line--fav {
    color: var(--accent-teal);
}

.odds-board__line--dog {
    color: var(--accent-red-light);
}

.odds-board__best {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 6px;
    padding: 2px 8px;
    background: rgba(var(--accent-teal-rgb), 0.08);
    border: 1px solid rgba(var(--accent-teal-rgb), 0.15);
    border-radius: 10px;
}

.odds-board__best-label {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.odds-board__best-line {
    color: var(--accent-teal-light);
    font-size: 12px;
    font-weight: 800;
}

.odds-board__book {
    color: var(--text-dim);
    font-size: 9px;
}

.odds-board__center {
    flex-shrink: 0;
    padding: 0 12px;
    text-align: center;
}

.odds-board__market {
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.odds-board__books {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 500;
}

.method-breakdown {
    margin-top: 22px;
    padding: 16px 18px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.method-breakdown__header,
.method-breakdown__fighter-header {
    display: flex;
    justify-content: space-between;
}

.method-breakdown__header {
    align-items: center;
    margin-bottom: 14px;
}

.method-breakdown__title {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.method-breakdown__legend,
.method-breakdown__badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.method-breakdown__legend {
    gap: 12px;
    color: var(--text-dim);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.method-breakdown__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.method-breakdown__legend-swatch {
    width: 10px;
    height: 6px;
    border-radius: 1px;
}

.method-breakdown__legend-swatch--ko,
.method-segment--ko {
    background: linear-gradient(90deg, #f97316, #fb923c);
}

.method-breakdown__legend-swatch--sub,
.method-segment--sub {
    background: linear-gradient(90deg, #a855f7, #c084fc);
}

.method-breakdown__legend-swatch--dec,
.method-segment--dec {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.method-breakdown__fighter {
    margin-bottom: 14px;
}

.method-breakdown__fighter:last-child {
    margin-bottom: 0;
}

.method-breakdown__fighter-header {
    align-items: baseline;
    margin-bottom: 5px;
    font-variant-numeric: tabular-nums;
}

.method-breakdown__fighter-name {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
}

.method-breakdown__fighter-name--pick {
    color: var(--accent-teal-light);
}

.method-breakdown__badges {
    justify-content: flex-end;
    gap: 5px;
}

.method-breakdown__total {
    font-size: 10px;
}

.method-breakdown__bar {
    display: flex;
    height: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 5px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

.method-segment {
    transition: opacity 0.15s;
}

.method-segment:hover {
    opacity: 0.75;
}

.analysis-section {
    margin-top: 20px;
}

.analysis-section__heading {
    margin-bottom: 12px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.analysis-section__subheading {
    margin-left: 6px;
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.pro-feature-cta {
    margin-top: 16px;
    padding: 16px;
    background: rgba(var(--accent-teal-rgb), 0.04);
    border: 1px solid rgba(var(--accent-teal-rgb), 0.15);
    border-radius: var(--radius-md);
    text-align: center;
}

.pro-feature-cta__copy {
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 13px;
}

.pro-feature-cta__accent {
    color: var(--accent-teal);
}

.pro-feature-cta__button {
    padding: 6px 20px;
    font-size: 12px;
}

.method-probability-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    color: var(--text-secondary);
    font-size: 13px;
}

.method-probability-row__value {
    font-weight: 700;
}

.method-probability-row__bar {
    height: 3px;
    border-radius: 2px;
}

/* Trust table responsive row cards */
.trust-table--sticky-first {
    overflow-x: auto;
}

.members-table {
    min-width: 1080px;
}

.member-actions-header,
.member-actions-cell {
    min-width: 260px;
    width: 260px;
    white-space: normal !important;
}

.member-actions-cell {
    text-align: right !important;
}

.member-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    overflow: visible;
}

.member-actions form {
    margin: 0 !important;
}

.member-actions .btn {
    white-space: nowrap;
}

.member-actions-group {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 6px;
}

@media (min-width: 769px) {
    .trust-table--sticky-first > table > thead > tr > th:first-child,
    .trust-table--sticky-first > table > tbody > tr > td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--bg-card);
    }
    .trust-table--sticky-first > table > thead > tr > th:first-child {
        z-index: 3;
    }
    .members-table .member-actions-header,
    .members-table .member-actions-cell {
        position: sticky;
        right: 0;
        z-index: 3;
        background: var(--bg-card);
        box-shadow: -12px 0 18px rgba(0, 0, 0, 0.25);
    }
    .members-table .member-actions-header {
        z-index: 4;
    }
}
@media (max-width: 768px) {
    .analysis-method-grid,
    .analysis-signal-grid {
        grid-template-columns: 1fr;
    }
    .odds-board {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    .odds-board__center {
        order: -1;
        padding: 0;
    }
    .method-breakdown__header,
    .method-breakdown__fighter-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
    .method-breakdown__badges {
        justify-content: flex-start;
    }
    .trust-table--cards {
        overflow: visible;
    }
    .trust-table--cards::after {
        display: none;
    }
    .trust-table--cards > table {
        display: block;
        min-width: 0 !important;
        width: 100%;
    }
    .trust-table--cards > table > thead {
        display: none;
    }
    .trust-table--cards > table > tbody {
        display: grid;
        gap: 10px;
    }
    .trust-table--cards > table > tbody > tr {
        display: grid;
        grid-template-columns: 1fr;
        border: 1px solid var(--border-subtle) !important;
        border-radius: 8px;
        background: rgba(255,255,255,0.03);
        padding: 10px 12px;
    }
    .trust-table--cards > table > tbody > tr > td {
        display: grid;
        grid-template-columns: minmax(105px, 38%) 1fr;
        gap: 10px;
        align-items: center;
        padding: 8px 0 !important;
        border-bottom: 1px solid var(--row-border);
        text-align: left !important;
    }
    .trust-table--cards > table > tbody > tr > td:last-child {
        border-bottom: 0;
    }
    .trust-table--cards > table > tbody > tr > td::before {
        content: attr(data-label);
        color: var(--text-dim);
        font-size: 10px;
        font-weight: 800;
        line-height: 1.2;
        text-transform: uppercase;
    }
    .trust-table--cards > table > tbody > tr > td.trust-primary {
        grid-template-columns: 1fr;
        padding-top: 2px !important;
    }
    .trust-table--cards > table > tbody > tr > td.trust-primary::before {
        display: none;
    }
    .trust-table--cards > table > tbody > tr.trust-table-full-row > td {
        grid-template-columns: 1fr;
    }
    .trust-table--cards > table > tbody > tr.trust-table-full-row > td::before {
        display: none;
    }
    .trust-table--cards .sentiment-signal-detail {
        margin-left: 0;
        margin-right: 0;
        max-width: none;
    }
    .members-table {
        min-width: 0;
    }
    .member-actions-header,
    .member-actions-cell {
        min-width: 0;
        width: auto;
    }
    .member-actions {
        justify-content: flex-start;
    }
}
@media (max-width: 480px) {
    .trust-table--cards > table > tbody > tr > td {
        grid-template-columns: minmax(92px, 34%) 1fr;
        gap: 8px;
    }
}

/* ── Light theme: fix inline hardcoded colors ── */
[data-theme="light"] .sidebar {
    border-right-color: var(--border-subtle);
}
[data-theme="light"] .mobile-header {
    border-bottom-color: var(--border-subtle);
}
/* Override inline color:#fff -- dark text in light mode */
[data-theme="light"] [style*="color:#fff"],
[data-theme="light"] [style*="color: #fff"],
[data-theme="light"] [style*="color:white"] {
    color: var(--text-heading) !important;
}
/* Override inline dark backgrounds -- light in light mode */
[data-theme="light"] [style*="background:#0f0f14"],
[data-theme="light"] [style*="background: #0f0f14"],
[data-theme="light"] [style*="background:#0f0f"],
[data-theme="light"] [style*="background:rgba(15,15,20"],
[data-theme="light"] [style*="background:rgba(17,17,20"],
[data-theme="light"] [style*="background:rgba(12,12,16"],
[data-theme="light"] [style*="background:rgba(8,8,12"],
[data-theme="light"] [style*="background: rgba(15,15,20"],
[data-theme="light"] [style*="background: rgba(17,17,20"] {
    background: var(--bg-card) !important;
}
/* Override inline subtle bg overlays */
[data-theme="light"] [style*="background:rgba(255,255,255,0.03"],
[data-theme="light"] [style*="background:rgba(255,255,255,0.04"],
[data-theme="light"] [style*="background:rgba(255,255,255,0.02"],
[data-theme="light"] [style*="background:rgba(255,255,255,0.06"] {
    background: var(--bg-subtle) !important;
}
/* Override inline color:#000 on teal buttons -- white text */
[data-theme="light"] [style*="color:#000"][style*="background:linear-gradient"],
[data-theme="light"] [style*="color:#000"][style*="background:var(--accent-teal)"],
[data-theme="light"] a[style*="color:#000"][style*="background:linear-gradient"] {
    color: var(--btn-primary-text) !important;
}

/* ── Print ───────────────────────────── */
@media print {
    body { background: #fff; color: #111; }
    .sidebar { display: none; }
    .main-content { margin-left: 0; }
    .card { background: #f9f9f9; border: 1px solid #ddd; box-shadow: none; }
}

/* v3.6.99.167.140 -- visual language layer
   Inspired by modern product UIs: outcome-first hierarchy, tighter
   operational surfaces, quiet depth, and clearer premium affordances. */
:root {
    --bg-primary: #07080b;
    --bg-card: rgba(16, 17, 21, 0.93);
    --bg-card-hover: rgba(22, 24, 30, 0.96);
    --bg-subtle: rgba(255, 255, 255, 0.035);
    --border-subtle: rgba(255, 255, 255, 0.065);
    --border-hover: rgba(var(--accent-teal-rgb), 0.24);
    --radius-sm: 7px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --shadow-card:
        0 1px 0 rgba(255, 255, 255, 0.035) inset,
        0 18px 46px rgba(0, 0, 0, 0.34);
    --shadow-card-hover:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 22px 60px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(var(--accent-teal-rgb), 0.08);
    --surface-line: rgba(255, 255, 255, 0.075);
    --surface-quiet: rgba(255, 255, 255, 0.026);
    --accent-amber: #f4b942;
}

[data-theme="light"] {
    --bg-primary: #f5f7fa;
    --bg-card: rgba(255, 255, 255, 0.94);
    --bg-card-hover: #fff;
    --bg-subtle: rgba(15, 23, 42, 0.035);
    --border-subtle: rgba(15, 23, 42, 0.10);
    --border-hover: rgba(var(--accent-teal-rgb), 0.32);
    --shadow-card:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 18px 40px rgba(15, 23, 42, 0.08);
    --shadow-card-hover:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 20px 48px rgba(15, 23, 42, 0.11),
        0 0 0 1px rgba(var(--accent-teal-rgb), 0.13);
    --surface-line: rgba(15, 23, 42, 0.11);
    --surface-quiet: rgba(15, 23, 42, 0.026);
}

body {
    background:
        linear-gradient(180deg, rgba(var(--accent-teal-rgb), 0.035) 0, rgba(7, 8, 11, 0) 240px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px),
        var(--bg-primary);
    background-size: auto, 84px 84px, 84px 84px, auto;
    letter-spacing: 0;
}

[data-theme="light"] body {
    background:
        linear-gradient(180deg, rgba(var(--accent-teal-rgb), 0.07) 0, rgba(245, 247, 250, 0) 260px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.026) 1px, transparent 1px),
        linear-gradient(180deg, rgba(15, 23, 42, 0.022) 1px, transparent 1px),
        var(--bg-primary);
    background-size: auto, 84px 84px, 84px 84px, auto;
}

.sidebar {
    background:
        linear-gradient(180deg, rgba(13, 15, 20, 0.98), rgba(7, 8, 12, 0.96));
    border-right-color: rgba(255, 255, 255, 0.07);
    box-shadow: 14px 0 40px rgba(0, 0, 0, 0.18);
}

[data-theme="light"] .sidebar {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 252, 0.96));
    border-right-color: rgba(15, 23, 42, 0.10);
    box-shadow: 14px 0 40px rgba(15, 23, 42, 0.06);
}

.sidebar-brand {
    padding-bottom: 18px;
}

.sidebar-brand h1 {
    font-size: 17px;
    letter-spacing: -0.45px;
}

.nav-group-label {
    color: var(--text-muted);
}

.nav-link {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin-right: 8px;
}

.nav-link:hover {
    background: linear-gradient(90deg, rgba(var(--accent-teal-rgb), 0.055), rgba(255, 255, 255, 0.025));
}

.nav-link.active {
    background: linear-gradient(90deg, rgba(var(--accent-teal-rgb), 0.14), rgba(var(--accent-teal-rgb), 0.035));
}

.nav-pro-chip {
    border: 1px solid rgba(var(--accent-teal-rgb), 0.35);
    background: rgba(var(--accent-teal-rgb), 0.16);
    color: var(--accent-teal-light);
    padding: 2px 5px;
    border-radius: 4px;
    vertical-align: 1px;
}

.main-content {
    max-width: 1360px;
    padding: 34px 40px 64px;
}

.page-header {
    margin-bottom: 28px;
    padding-bottom: 18px;
    border-bottom-color: var(--surface-line);
}

.page-header h1 {
    font-size: 30px;
    letter-spacing: -0.75px;
}

.page-header .subtitle {
    color: var(--text-secondary);
}

.card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
        var(--bg-card);
    border-color: var(--border-subtle);
    box-shadow: var(--shadow-card);
}

.card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-card-hover);
}

.card-title {
    letter-spacing: -0.2px;
}

.stat-card {
    background:
        linear-gradient(180deg, rgba(var(--accent-teal-rgb), 0.045), rgba(255, 255, 255, 0.018)),
        var(--surface-quiet);
    border-color: var(--surface-line);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}

.stat-card .value {
    letter-spacing: -0.8px;
    text-shadow: 0 0 18px rgba(var(--accent-teal-rgb), 0.12);
}

.chip,
.method-badge,
.result-badge,
.status-badge,
.nav-pro-chip {
    font-variant-numeric: tabular-nums;
}

.btn,
.btn-primary,
.btn-secondary,
button[type="submit"] {
    border-radius: var(--radius-sm);
    letter-spacing: -0.05px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-teal-light), var(--accent-teal-dark));
    box-shadow: 0 10px 28px rgba(var(--accent-teal-rgb), 0.16);
}

.btn-primary:hover {
    box-shadow: 0 14px 34px rgba(var(--accent-teal-rgb), 0.22);
}

.btn-secondary {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025));
}

input[type="text"],
input[type="email"],
input[type="password"],
select {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.012)),
        var(--bg-input);
    border-color: var(--surface-line);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus {
    box-shadow: 0 0 0 3px rgba(var(--accent-teal-rgb), 0.10);
}

.table-container,
.trust-table--sticky-first,
.trust-table--cards {
    border-radius: var(--radius-lg);
}

thead th {
    background:
        linear-gradient(180deg, rgba(16, 17, 21, 0.98), rgba(16, 17, 21, 0.90));
    border-bottom-color: var(--surface-line);
}

[data-theme="light"] thead th {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 252, 0.94));
}

tbody td {
    border-bottom-color: rgba(255, 255, 255, 0.035);
}

tbody tr:hover {
    background: linear-gradient(90deg, rgba(var(--accent-teal-rgb), 0.045), rgba(255, 255, 255, 0.016));
}

.dashboard-next-card {
    background:
        linear-gradient(180deg, rgba(var(--accent-teal-rgb), 0.075), rgba(var(--accent-blue-rgb), 0.025)),
        var(--bg-card);
    border-left-width: 3px;
}

.dashboard-meta-tile,
.dashboard-action-row,
.dashboard-result-row {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
        var(--surface-quiet);
    border-color: var(--surface-line);
}

@media (max-width: 768px) {
    .main-content {
        padding: 88px 16px 60px;
        max-width: none;
    }
    .card {
        padding: 18px;
    }
    .page-header h1 {
        font-size: 26px;
    }
}

/* v3.6.99.167.141: shared motion layer.
   Motion should feel like interface feedback, not decoration. */
:root {
    --motion-fast: 120ms;
    --motion-med: 220ms;
    --motion-slow: 420ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(var(--accent-teal-rgb), 0);
    }
    50% {
        opacity: 0.82;
        box-shadow: 0 0 0 5px rgba(var(--accent-teal-rgb), 0.08);
    }
}

/* fe-page-enter keyframes + .main-content animation now live in the
   page-enter cascade section (~L5740) — the duplicate definitions that
   used to sit here were dead (later same-name keyframes win the cascade). */

@keyframes fe-status-ping {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(var(--accent-teal-rgb), 0.18);
    }
    50% {
        box-shadow: 0 0 0 7px rgba(var(--accent-teal-rgb), 0);
    }
}

@keyframes fe-skeleton-sweep {
    from { transform: translateX(-110%); }
    to { transform: translateX(110%); }
}

.card,
.stat-card,
.dashboard-next-card,
.dashboard-meta-tile,
.dashboard-action-row,
.dashboard-result-row,
.feature,
.step,
.proof-stat,
.compare-col,
.pricing-card,
.event-card,
.fight-card,
.table-container,
.trust-table--sticky-first,
.trust-table--cards {
    transition:
        transform var(--motion-med) var(--ease-standard),
        border-color var(--motion-med) var(--ease-standard),
        background var(--motion-med) var(--ease-standard),
        box-shadow var(--motion-med) var(--ease-standard),
        opacity var(--motion-fast) var(--ease-standard);
}

.stat-card:hover,
.dashboard-meta-tile:hover,
.dashboard-action-row:hover,
.dashboard-result-row:hover,
.event-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-hover);
}

.btn,
.btn-primary,
.btn-secondary,
button,
a.btn,
a.btn-primary,
a.btn-secondary,
.nav-link,
.quick-action,
.chip,
.method-badge,
.result-badge,
.status-badge,
.nav-pro-chip,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
    transition:
        color var(--motion-fast) var(--ease-standard),
        background var(--motion-fast) var(--ease-standard),
        border-color var(--motion-fast) var(--ease-standard),
        box-shadow var(--motion-fast) var(--ease-standard),
        opacity var(--motion-fast) var(--ease-standard),
        transform var(--motion-fast) var(--ease-standard);
}

.btn:active,
.btn-primary:active,
.btn-secondary:active,
button:active,
a.btn:active,
a.btn-primary:active,
a.btn-secondary:active,
.quick-action:active {
    transform: translateY(1px) scale(0.99);
}

.btn:disabled,
button:disabled,
[aria-disabled="true"] {
    transform: none;
    opacity: 0.58;
}

a.chip:hover,
button.chip:hover,
.nav-pro-chip:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

.dashboard-pulse-chip,
.live-dot,
.status-live,
.status-badge.live,
.chip-live {
    animation: fe-status-ping 2.4s var(--ease-standard) infinite;
}

.htmx-indicator {
    transition: opacity var(--motion-med) var(--ease-standard);
}

#fe-loading-bar {
    box-shadow: 0 0 18px rgba(var(--accent-teal-rgb), 0.36);
}

.fe-skeleton,
.skeleton {
    position: relative;
    overflow: hidden;
    color: transparent !important;
    background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.08), rgba(255,255,255,0.04));
    border-radius: var(--radius-sm);
}

.fe-skeleton::after,
.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-teal-rgb), 0.12), transparent);
    animation: fe-skeleton-sweep 1.25s var(--ease-standard) infinite;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }

    .main-content,
    .card,
    .stat-card,
    .dashboard-meta-tile,
    .dashboard-action-row,
    .dashboard-result-row,
    .event-card,
    .fight-card {
        transform: none !important;
    }
}

/* v3.6.99.167.142: loading, progress, and toast primitives. */
html.fe-busy,
html.fe-busy body {
    cursor: progress;
}

html.fe-busy .main-content {
    transition: filter var(--motion-med) var(--ease-standard), opacity var(--motion-med) var(--ease-standard);
}

#fe-loading-bar {
    height: 3px !important;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.0), rgba(255,255,255,0.35), rgba(255,255,255,0.0)),
        linear-gradient(90deg, var(--accent-teal), var(--accent-teal-light), var(--accent-green)) !important;
    background-size: 160px 100%, 100% 100% !important;
    background-repeat: no-repeat !important;
    border-radius: 0 999px 999px 0;
}

html.fe-busy #fe-loading-bar {
    animation: fe-skeleton-sweep 1.1s var(--ease-standard) infinite;
}

#fe-toast-stack {
    position: fixed;
    right: 22px;
    bottom: 42px;
    z-index: 100020;
    display: grid;
    gap: 10px;
    width: min(360px, calc(100vw - 32px));
    pointer-events: none;
}

.fe-toast {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--accent-teal);
    border-radius: var(--radius-md);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
        rgba(12, 13, 17, 0.96);
    color: var(--text-primary);
    box-shadow: var(--shadow-card-hover);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(8px) scale(0.985);
    animation: fe-toast-in var(--motion-med) var(--ease-emphasized) forwards;
}

.fe-toast[data-type="success"] {
    border-left-color: var(--accent-green);
}

.fe-toast[data-type="warning"] {
    border-left-color: var(--accent-yellow);
}

.fe-toast[data-type="error"] {
    border-left-color: var(--accent-red);
}

.fe-toast-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-heading);
    letter-spacing: 0;
}

.fe-toast-message {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-secondary);
}

.fe-toast.is-exiting {
    animation: fe-toast-out var(--motion-fast) var(--ease-standard) forwards;
}

@keyframes fe-toast-in {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fe-toast-out {
    to {
        opacity: 0;
        transform: translateY(6px) scale(0.985);
    }
}

.fe-progress-panel {
    position: relative;
    overflow: hidden;
}

.fe-progress-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-teal-rgb), 0.08), transparent);
    transform: translateX(-100%);
    pointer-events: none;
}

.fe-progress-panel.is-running::before,
.htmx-request .fe-progress-panel::before {
    animation: fe-skeleton-sweep 1.35s var(--ease-standard) infinite;
}

.fe-progress-rail,
.progress-rail {
    position: relative;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.045);
}

.fe-progress-fill,
.progress-fill {
    height: 100%;
    min-width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent-teal), var(--accent-green));
    box-shadow: 0 0 16px rgba(var(--accent-teal-rgb), 0.22);
    transition: width var(--motion-slow) var(--ease-emphasized), background var(--motion-med) var(--ease-standard);
}

.fe-loading-shell {
    display: grid;
    gap: 12px;
}

.fe-loading-line {
    height: 12px;
    border-radius: 999px;
}

.fe-loading-line.short { width: 42%; }
.fe-loading-line.mid { width: 68%; }
.fe-loading-line.long { width: 92%; }

@media (max-width: 768px) {
    #fe-toast-stack {
        right: 12px;
        bottom: 52px;
        width: calc(100vw - 24px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fe-toast,
    .fe-toast.is-exiting {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    html.fe-busy #fe-loading-bar,
    .fe-progress-panel.is-running::before,
    .htmx-request .fe-progress-panel::before,
    .fe-skeleton::after,
    .skeleton::after {
        animation: none !important;
    }
}

/* v3.6.99.167.143: premium console design system primitives. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--accent-teal);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(var(--accent-teal-rgb), 0.14);
}

.fe-premium-hero,
.fe-action-panel,
.fe-report-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(var(--accent-teal-rgb), 0.14);
    background:
        radial-gradient(circle at 16% 0%, rgba(var(--accent-teal-rgb), 0.16), transparent 34%),
        radial-gradient(circle at 88% 8%, rgba(var(--accent-blue-rgb), 0.12), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
        var(--bg-card);
}

.fe-premium-hero::before,
.fe-action-panel::before,
.fe-report-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, rgba(255,255,255,0.08), transparent 38%, rgba(var(--accent-teal-rgb), 0.08));
    opacity: 0.55;
}

.fe-premium-hero > *,
.fe-action-panel > *,
.fe-report-card > * {
    position: relative;
    z-index: 1;
}

.fe-premium-hero {
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.26);
}

.fe-premium-hero--event {
    border-left-width: 4px;
    border-left-color: var(--accent-teal);
}

.fe-hero-title {
    letter-spacing: 0;
    text-wrap: balance;
}

.fe-stage-rail {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
}

.fe-stage-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 4px 9px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: rgba(255,255,255,0.035);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
}

.fe-stage-pill.is-active {
    border-color: rgba(var(--accent-teal-rgb), 0.58);
    background: rgba(var(--accent-teal-rgb), 0.16);
    color: var(--accent-teal-light);
    box-shadow: 0 0 18px rgba(var(--accent-teal-rgb), 0.18);
}

.fe-console-tile {
    position: relative;
    overflow: hidden;
    transition:
        border-color var(--motion-fast) var(--ease-standard),
        box-shadow var(--motion-fast) var(--ease-standard),
        transform var(--motion-fast) var(--ease-standard);
}

.fe-console-tile::after {
    content: "";
    position: absolute;
    inset: auto 12px 0 12px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-teal-rgb), 0.45), transparent);
    opacity: 0;
    transition: opacity var(--motion-fast) var(--ease-standard);
}

.fe-console-tile:hover {
    border-color: rgba(var(--accent-teal-rgb), 0.28);
    box-shadow: 0 14px 34px rgba(0,0,0,0.18);
    transform: translateY(-1px);
}

.fe-console-tile:hover::after {
    opacity: 1;
}

.fe-action-panel {
    border-left: 3px solid rgba(var(--accent-teal-rgb), 0.6);
}

.fe-action-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.fe-action-cluster > form {
    margin: 0;
}

.fe-action-cluster .btn,
.fe-action-cluster button {
    white-space: nowrap;
}

.fe-action-sheet {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.035);
}

.fe-action-sheet__title {
    color: var(--text-heading);
    font-size: 13px;
    font-weight: 800;
}

.fe-action-sheet__copy {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.5;
}

.fe-report-library-hero {
    padding: 24px 28px;
    margin-bottom: 18px;
    border-radius: var(--radius-lg);
}

.fe-report-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.fe-report-card {
    display: flex;
    min-height: 230px;
    flex-direction: column;
    justify-content: space-between;
    transition:
        border-color var(--motion-fast) var(--ease-standard),
        box-shadow var(--motion-fast) var(--ease-standard),
        transform var(--motion-fast) var(--ease-standard);
}

.fe-report-card:hover {
    border-color: rgba(var(--accent-teal-rgb), 0.32);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

.fe-report-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--text-dim);
    font-size: 12px;
}

.fe-report-card__actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
}

.fe-reading-shell {
    max-width: 980px;
    margin: 0 auto;
}

.fe-section-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: rgba(255,255,255,0.03);
}

.fe-section-nav a,
.fe-section-nav span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.fe-section-nav a:hover {
    color: var(--accent-teal-light);
    background: rgba(var(--accent-teal-rgb), 0.1);
}

.fe-toast[data-type="achievement"] {
    border-left-color: var(--accent-yellow);
    background:
        radial-gradient(circle at 12% 0%, rgba(var(--accent-yellow-rgb), 0.24), transparent 34%),
        linear-gradient(180deg, rgba(var(--accent-teal-rgb), 0.08), rgba(255,255,255,0.025)),
        rgba(12, 13, 17, 0.97);
}

.fe-toast[data-type="achievement"] .fe-toast-title {
    color: var(--accent-yellow);
}

.fe-command-link {
    transition:
        color var(--motion-fast) var(--ease-standard),
        opacity var(--motion-fast) var(--ease-standard),
        transform var(--motion-fast) var(--ease-standard);
}

.fe-command-link:hover {
    transform: translateX(2px);
}

@media (max-width: 900px) {
    .fe-report-grid {
        grid-template-columns: 1fr;
    }
    .fe-report-card__actions,
    .fe-action-cluster {
        justify-content: stretch;
    }
    .fe-report-card__actions > *,
    .fe-action-cluster > * {
        flex: 1 1 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fe-console-tile,
    .fe-report-card,
    .fe-command-link {
        transform: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────────
   v3.7.0 — Cinematic Operator Console polish
   Brand identity, premium tier, refined hero/section chrome.
   Additive layer; existing classes retain their behavior unless
   specifically refined here.
   ───────────────────────────────────────────────────────────────── */
:root {
    --accent-pro: #d4a64a;
    --accent-pro-light: #f4d180;
    --accent-pro-dark: #a87f31;
    --accent-pro-soft: rgba(244, 209, 128, 0.16);
    --accent-pro-line: rgba(244, 209, 128, 0.32);
    --accent-pro-glow: rgba(212, 166, 74, 0.28);

    --grain-overlay: rgba(255, 255, 255, 0.012);
    --hairline: rgba(255, 255, 255, 0.06);
    --hairline-strong: rgba(255, 255, 255, 0.10);
    --kicker-teal: #6ee7de;
    --display-tracking: -0.02em;
    --display-tracking-tight: -0.035em;

    --shadow-cinema:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 28px 80px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.03);
    --shadow-pro:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 14px 36px rgba(212, 166, 74, 0.22);
}
[data-theme="light"] {
    --accent-pro: #b07d20;
    --accent-pro-light: #d6a13b;
    --accent-pro-dark: #8a5e0e;
    --accent-pro-soft: rgba(176, 125, 32, 0.14);
    --accent-pro-line: rgba(176, 125, 32, 0.28);
    --accent-pro-glow: rgba(176, 125, 32, 0.22);
    --hairline: rgba(15, 23, 42, 0.10);
    --hairline-strong: rgba(15, 23, 42, 0.16);
    --shadow-cinema:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 24px 60px rgba(15, 23, 42, 0.10);
    --shadow-pro:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 12px 30px rgba(176, 125, 32, 0.18);
}

/* ── Brand wordmark (inline SVG glyph + text) ── */
.fe-wordmark {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    line-height: 1;
}
.fe-wordmark__glyph {
    display: inline-block;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 12px rgba(var(--accent-teal-rgb), 0.35));
    transition: transform var(--motion-fast, 120ms) var(--ease-emphasized, cubic-bezier(0.16,1,0.3,1)),
                filter var(--motion-fast, 120ms) var(--ease-standard, cubic-bezier(0.2,0,0,1));
}
.fe-wordmark:hover .fe-wordmark__glyph {
    transform: rotate(-8deg) scale(1.06);
    filter: drop-shadow(0 0 18px rgba(var(--accent-teal-rgb), 0.55));
}
.fe-wordmark__text {
    font-weight: 800;
    letter-spacing: -0.45px;
    color: var(--text-heading);
    font-size: 17px;
    background: linear-gradient(135deg, #fff 0%, #cbd5e1 50%, #fff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
[data-theme="light"] .fe-wordmark__text {
    background: linear-gradient(135deg, #0f0f1a 0%, #475569 50%, #0f0f1a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.fe-wordmark__edge {
    color: var(--accent-teal);
    background: linear-gradient(135deg, var(--accent-teal-light), var(--accent-teal));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
.fe-wordmark--lg .fe-wordmark__glyph { width: 26px; height: 26px; }
.fe-wordmark--lg .fe-wordmark__text { font-size: 20px; letter-spacing: -0.6px; }
.fe-wordmark--xl .fe-wordmark__glyph { width: 32px; height: 32px; }
.fe-wordmark--xl .fe-wordmark__text { font-size: 24px; letter-spacing: -0.7px; }

/* ── Premium (Pro) tier — gold metallic accent ── */
.fe-pro-chip,
.nav-pro-chip.is-pro,
.fe-pro-mark {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--accent-pro-light), var(--accent-pro));
    color: #1a1208;
    border: 1px solid var(--accent-pro-line);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15) inset,
                0 4px 14px var(--accent-pro-glow);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
    line-height: 1.2;
    white-space: nowrap;
}
.fe-pro-chip--ghost {
    background: var(--accent-pro-soft);
    color: var(--accent-pro-light);
    border-color: var(--accent-pro-line);
    box-shadow: none;
    text-shadow: none;
}
[data-theme="light"] .fe-pro-chip--ghost {
    color: var(--accent-pro-dark);
}
.fe-pro-cta {
    background: linear-gradient(135deg, var(--accent-pro-light) 0%, var(--accent-pro) 50%, var(--accent-pro-dark) 100%);
    color: #1a1208;
    border: 1px solid var(--accent-pro-line);
    box-shadow: var(--shadow-pro);
    font-weight: 800;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18);
}
.fe-pro-cta:hover {
    box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset,
                0 18px 44px rgba(212, 166, 74, 0.32);
}

/* ── Section kicker — bracketed eyebrow label ── */
.fe-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--accent-teal);
    font-variant-numeric: tabular-nums;
}
.fe-kicker::before,
.fe-kicker::after {
    content: "";
    width: 18px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-teal));
}
.fe-kicker::after {
    background: linear-gradient(90deg, var(--accent-teal), transparent);
}
.fe-kicker--solo::before { display: none; }
.fe-kicker--solo::after  { display: none; }
.fe-kicker--solo {
    padding: 4px 10px;
    border: 1px solid rgba(var(--accent-teal-rgb), 0.22);
    border-radius: 999px;
    background: rgba(var(--accent-teal-rgb), 0.06);
}

/* ── Section eyebrow — for landing/marketing pages ── */
.fe-section-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 48px;
}
.fe-section-head .fe-kicker {
    margin-bottom: 16px;
}
.fe-section-head h2 {
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 900;
    letter-spacing: var(--display-tracking-tight);
    color: var(--text-heading);
    line-height: 1.08;
    text-wrap: balance;
}
.fe-section-head .fe-lede {
    margin-top: 14px;
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.7;
    text-wrap: pretty;
}

/* ── Hero spotlight — used on landing + premium pages ── */
.fe-hero-spotlight {
    position: relative;
    isolation: isolate;
}
.fe-hero-spotlight::before {
    content: "";
    position: absolute;
    inset: -120px -10% auto -10%;
    height: 620px;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 50% at 50% 0%, rgba(var(--accent-teal-rgb), 0.18), transparent 70%),
        radial-gradient(ellipse 40% 40% at 20% 30%, rgba(var(--accent-blue-rgb), 0.10), transparent 70%),
        radial-gradient(ellipse 35% 35% at 80% 20%, rgba(var(--accent-purple-rgb), 0.08), transparent 70%);
    filter: blur(0px);
    opacity: 0.95;
}
[data-theme="light"] .fe-hero-spotlight::before {
    background:
        radial-gradient(ellipse 60% 50% at 50% 0%, rgba(var(--accent-teal-rgb), 0.13), transparent 70%),
        radial-gradient(ellipse 40% 40% at 20% 30%, rgba(var(--accent-blue-rgb), 0.06), transparent 70%);
    opacity: 0.9;
}
.fe-hero-spotlight::after {
    content: "";
    position: absolute;
    top: 90px;
    left: 0;
    right: 0;
    height: 1px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-teal-rgb), 0.32), transparent);
}

/* ── Display number — hero stat with subtle glow + tabular nums ── */
.fe-display-num {
    font-feature-settings: "tnum", "lnum", "ss01";
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: var(--display-tracking-tight);
    line-height: 1;
}
.fe-display-num--gradient {
    background: linear-gradient(135deg, var(--accent-teal-light) 0%, var(--accent-teal) 60%, var(--accent-teal-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    text-shadow: 0 0 30px rgba(var(--accent-teal-rgb), 0.22);
}

/* ── Live data dot ── */
.fe-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-teal);
    box-shadow: 0 0 0 0 rgba(var(--accent-teal-rgb), 0.6);
    animation: fe-live-pulse 2.4s var(--ease-standard, cubic-bezier(0.2,0,0,1)) infinite;
    flex-shrink: 0;
}
.fe-live-dot--green { background: var(--accent-green); box-shadow: 0 0 0 0 rgba(var(--accent-green-rgb), 0.6); }
.fe-live-dot--amber { background: var(--accent-yellow); box-shadow: 0 0 0 0 rgba(var(--accent-yellow-rgb), 0.6); }
.fe-live-dot--red   { background: var(--accent-red);   box-shadow: 0 0 0 0 rgba(var(--accent-red-rgb), 0.6); }
@keyframes fe-live-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(var(--accent-teal-rgb), 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(var(--accent-teal-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--accent-teal-rgb), 0); }
}

/* ── Bracket-cornered card — adds an editorial angle to feature cards ── */
.fe-bracket {
    position: relative;
}
.fe-bracket::before,
.fe-bracket::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    pointer-events: none;
    transition: opacity var(--motion-fast, 120ms) var(--ease-standard, cubic-bezier(0.2,0,0,1));
    opacity: 0.55;
}
.fe-bracket::before {
    top: 8px;
    left: 8px;
    border-top: 1px solid var(--accent-teal);
    border-left: 1px solid var(--accent-teal);
    border-top-left-radius: 4px;
}
.fe-bracket::after {
    bottom: 8px;
    right: 8px;
    border-bottom: 1px solid var(--accent-teal);
    border-right: 1px solid var(--accent-teal);
    border-bottom-right-radius: 4px;
}
.fe-bracket:hover::before,
.fe-bracket:hover::after { opacity: 1; }

/* ── Feature card — tighter, more editorial ── */
.fe-feature {
    position: relative;
    overflow: hidden;
    padding: 26px;
    border-radius: var(--radius-md);
    border: 1px solid var(--hairline);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
        var(--bg-card);
    transition:
        border-color var(--motion-fast, 120ms) var(--ease-standard, cubic-bezier(0.2,0,0,1)),
        transform var(--motion-fast, 120ms) var(--ease-standard, cubic-bezier(0.2,0,0,1)),
        box-shadow var(--motion-fast, 120ms) var(--ease-standard, cubic-bezier(0.2,0,0,1));
}
.fe-feature::before {
    content: "";
    position: absolute;
    top: 0;
    left: 22px;
    right: 22px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-teal-rgb), 0.55), transparent);
    opacity: 0;
    transition: opacity var(--motion-med, 220ms) var(--ease-standard, cubic-bezier(0.2,0,0,1));
}
.fe-feature:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--accent-teal-rgb), 0.28);
    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.32),
                0 0 0 1px rgba(var(--accent-teal-rgb), 0.06);
}
.fe-feature:hover::before { opacity: 1; }
.fe-feature__icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(var(--accent-teal-rgb), 0.16), rgba(var(--accent-teal-rgb), 0.04));
    border: 1px solid rgba(var(--accent-teal-rgb), 0.18);
    font-size: 18px;
    color: var(--accent-teal-light);
    margin-bottom: 14px;
}
.fe-feature h3 {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-heading);
    letter-spacing: -0.2px;
    margin-bottom: 6px;
}
.fe-feature p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0;
}

/* ── Compare panels (Other tools vs FightEdge) ── */
.fe-compare {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 18px;
    align-items: stretch;
    margin-top: 36px;
}
.fe-compare__col {
    padding: 28px;
    border-radius: var(--radius-md);
    border: 1px solid var(--hairline);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.005)),
        var(--bg-card);
}
.fe-compare__col h3 {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    margin-bottom: 18px;
}
.fe-compare__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.fe-compare__col li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13.5px;
    line-height: 1.55;
}
.fe-compare__col li::before {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
}
.fe-compare__col--them h3 { color: var(--text-muted); }
.fe-compare__col--them li { color: var(--text-muted); }
.fe-compare__col--them li::before {
    content: "\2715";
    background: rgba(var(--accent-red-rgb), 0.10);
    color: var(--accent-red-light);
    border: 1px solid rgba(var(--accent-red-rgb), 0.22);
}
.fe-compare__col--us {
    border-color: rgba(var(--accent-teal-rgb), 0.20);
    background:
        radial-gradient(circle at 0% 0%, rgba(var(--accent-teal-rgb), 0.08), transparent 50%),
        linear-gradient(180deg, rgba(var(--accent-teal-rgb), 0.05), rgba(255, 255, 255, 0.005)),
        var(--bg-card);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28),
                0 0 0 1px rgba(var(--accent-teal-rgb), 0.10);
}
.fe-compare__col--us h3 { color: var(--accent-teal-light); }
.fe-compare__col--us li { color: var(--text-primary); }
.fe-compare__col--us li::before {
    content: "\2713";
    background: linear-gradient(135deg, rgba(var(--accent-teal-rgb), 0.30), rgba(var(--accent-green-rgb), 0.20));
    color: var(--accent-teal-light);
    border: 1px solid rgba(var(--accent-teal-rgb), 0.35);
    box-shadow: 0 0 12px rgba(var(--accent-teal-rgb), 0.25);
}
.fe-compare__divider {
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--hairline-strong), transparent);
    align-self: stretch;
    position: relative;
}
.fe-compare__divider::before {
    content: "VS";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
    color: var(--text-dim);
    background: var(--bg-primary);
    padding: 8px 6px;
    border: 1px solid var(--hairline-strong);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 768px) {
    .fe-compare { grid-template-columns: 1fr; gap: 12px; }
    .fe-compare__divider { display: none; }
}

/* ── Refined disclaimer footer (used in base.html) ── */
.fe-disclaimer-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    padding: 7px 18px;
    background: linear-gradient(180deg, rgba(8, 8, 12, 0.6), var(--bg-footer));
    border-top: 1px solid var(--hairline);
    text-align: center;
    font-size: 10.5px;
    color: var(--text-dim);
    line-height: 1.5;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-variant-numeric: tabular-nums;
}
.fe-disclaimer-bar a {
    color: var(--accent-teal);
    text-decoration: none;
    transition: color var(--motion-fast, 120ms) var(--ease-standard, cubic-bezier(0.2,0,0,1));
}
.fe-disclaimer-bar a:hover { color: var(--accent-teal-light); }
.fe-disclaimer-bar .fe-sep {
    margin: 0 7px;
    color: var(--text-dim);
    opacity: 0.5;
}

/* ── Refined announcement banner ── */
.fe-announcement {
    position: relative;
    padding: 12px 18px;
    background:
        linear-gradient(135deg, rgba(var(--accent-teal-rgb), 0.10), rgba(var(--accent-blue-rgb), 0.04)),
        rgba(255, 255, 255, 0.012);
    border: 1px solid rgba(var(--accent-teal-rgb), 0.20);
    border-radius: var(--radius-md);
    margin-bottom: 18px;
    text-align: center;
    font-size: 13px;
    color: var(--text-primary);
    overflow: hidden;
}
.fe-announcement::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--accent-teal), transparent);
}
.fe-announcement a {
    color: var(--accent-teal);
    font-weight: 700;
    text-decoration: none;
    margin-left: 8px;
}

/* ── Refined verify-email banner ── */
.fe-verify-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(180deg, rgba(var(--accent-orange-rgb), 0.10), rgba(var(--accent-orange-rgb), 0.04));
    border: 1px solid rgba(var(--accent-orange-rgb), 0.28);
    border-left: 3px solid var(--accent-orange);
    border-radius: var(--radius-md);
    margin-bottom: 18px;
    font-size: 13px;
    color: var(--accent-orange);
}

/* ── Sidebar streak chip ── */
.fe-streak-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding: 3px 10px;
    background: linear-gradient(135deg, rgba(var(--accent-orange-rgb), 0.14), rgba(var(--accent-orange-rgb), 0.04));
    border: 1px solid rgba(var(--accent-orange-rgb), 0.28);
    border-radius: 999px;
    font-size: 11px;
    color: var(--accent-orange);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ── Sidebar account row ── */
.fe-sidebar-account {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}
.fe-sidebar-account a {
    color: var(--accent-teal);
    text-decoration: none;
    font-weight: 600;
}
.fe-sidebar-account a:hover { color: var(--accent-teal-light); }
.fe-sidebar-account .fe-logout {
    background: none;
    border: 0;
    padding: 0;
    margin-left: auto;
    color: var(--text-dim);
    font-size: 11px;
    cursor: pointer;
    font-family: inherit;
}
.fe-sidebar-account .fe-logout:hover { color: var(--text-secondary); }
.fe-sidebar-account__logout-form { display: inline; margin: 0; margin-left: auto; }
.fe-sidebar-account--guest .fe-sidebar-account__sep { color: var(--text-dim); }
.fe-sidebar-account--guest a.fe-sidebar-account__register { color: var(--text-secondary); }
.fe-sidebar-account--guest a.fe-sidebar-account__register:hover { color: var(--text-primary); }
.fe-streak-chip__freezes { color: var(--text-dim); font-weight: 400; margin-left: 2px; }

.fe-verify-banner__form { margin: 0; }
.fe-verify-banner__btn { font-size: 11px; padding: 6px 14px; }

.fe-sidebar-pro-wrap {
    padding: 12px 0;
    margin-top: 8px;
    border-top: 1px solid var(--hairline);
}
.fe-sidebar-theme-wrap {
    padding: 4px 0;
    border-top: 1px solid var(--hairline);
    margin-top: 8px;
}

/* ── Sidebar Pro CTA (refined gold) ── */
.fe-sidebar-pro-cta {
    display: block;
    margin: 8px 14px 6px;
    padding: 11px 14px;
    text-align: center;
    background: linear-gradient(135deg, var(--accent-pro-light) 0%, var(--accent-pro) 60%, var(--accent-pro-dark) 100%);
    color: #1a1208;
    font-weight: 800;
    font-size: 12.5px;
    letter-spacing: 0.3px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    box-shadow: var(--shadow-pro);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18);
    border: 1px solid var(--accent-pro-line);
    position: relative;
    overflow: hidden;
}
.fe-sidebar-pro-cta::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
    transform: skewX(-22deg);
    transition: left 0.7s var(--ease-emphasized, cubic-bezier(0.16,1,0.3,1));
    pointer-events: none;
}
.fe-sidebar-pro-cta:hover::after { left: 160%; }

/* ── Page hero: top accent rule under page-header ── */
.page-header.fe-page-hero {
    position: relative;
}
.page-header.fe-page-hero::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-teal), transparent);
}

/* ── Stat card — refined number treatment + top accent ── */
.stat-card {
    position: relative;
    overflow: hidden;
}
.stat-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12px;
    right: 12px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-teal-rgb), 0.32), transparent);
    opacity: 0.6;
}
.stat-card .value {
    font-feature-settings: "tnum", "lnum", "ss01";
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: var(--display-tracking-tight);
}

/* ── Refined .btn-primary — metallic depth ── */
.btn-primary {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 40%),
        linear-gradient(135deg, var(--accent-teal-light) 0%, var(--accent-teal) 50%, var(--accent-teal-dark) 100%);
    color: var(--btn-primary-text);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 -1px 0 rgba(0, 0, 0, 0.1) inset,
        0 10px 28px rgba(var(--accent-teal-rgb), 0.22);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18);
    font-weight: 700;
}
.btn-primary:hover {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.28) inset,
        0 -1px 0 rgba(0, 0, 0, 0.1) inset,
        0 14px 36px rgba(var(--accent-teal-rgb), 0.30);
}

/* ── Light theme: remove the glyph drop-shadow + gradient on numbers
       since they read poorly on light surfaces ── */
[data-theme="light"] .fe-display-num--gradient {
    text-shadow: none;
}
[data-theme="light"] .fe-wordmark__glyph {
    filter: drop-shadow(0 0 6px rgba(var(--accent-teal-rgb), 0.30));
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .fe-live-dot { animation: none !important; box-shadow: none !important; }
    .fe-feature:hover,
    .fe-wordmark:hover .fe-wordmark__glyph { transform: none !important; }
    .fe-sidebar-pro-cta::after { display: none; }
}

/* ── Print: hide ornament + fixed bars ── */
@media print {
    .fe-disclaimer-bar,
    .fe-hero-spotlight::before,
    .fe-hero-spotlight::after { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────────
   v3.7.1 — Typography upgrade + animated hero ornament
   Display font (Sora) for headlines, mono (JetBrains Mono) for data
   labels. Kicker pattern lifted onto dashboard surfaces.
   Subtle ambient drift on .fe-premium-hero radial gradients.
   ───────────────────────────────────────────────────────────────── */
:root {
    --font-display: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Display font on headlines + hero numbers */
.fe-wordmark__text,
.page-header h1,
.fe-hero-title,
.dashboard-event-title,
.fe-section-head h2,
.fe-pricing-hero h1,
.final-cta h2,
.hero h1,
.section-title {
    font-family: var(--font-display);
    font-feature-settings: "ss01", "cv01";
}

/* Mono font for data labels — eyebrow text feels engineered, not marketing */
.fe-kicker,
.section-kicker,
.dashboard-kicker,
.nav-group-label,
.fe-section-eyebrow,
.fe-trust-tile__lbl,
.fe-tier__name,
.stat-card .label,
.stat .lbl,
.support-insights__title {
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 1.5px;
}

/* Hero stat numbers — display font + tighter tracking */
.stat .num,
.stat .num-hero,
.fe-trust-tile__num,
.fe-tier__price,
.proof-stat .proof-num,
.fe-display-num {
    font-family: var(--font-display);
    font-feature-settings: "tnum", "lnum";
}

/* ── Animated hero ornament — subtle ambient drift on premium-hero
       radials. Slow loop (28s); reduced-motion-safe. ── */
.fe-premium-hero,
.fe-action-panel,
.fe-report-card {
    background-size: 140% 140%, 140% 140%, 100% 100%, 100% 100%;
    animation: fe-hero-drift 28s ease-in-out infinite alternate;
}
@keyframes fe-hero-drift {
    0%   { background-position: 16% 0%, 88% 8%, 0 0, 0 0; }
    50%  { background-position: 22% 4%, 80% 12%, 0 0, 0 0; }
    100% { background-position: 14% 2%, 90% 6%, 0 0, 0 0; }
}

/* Landing-page hero spotlight — slow drift on the ::before radials */
.hero::before { animation: fe-spotlight-drift 32s ease-in-out infinite alternate; }
.fe-hero-spotlight::before { animation: fe-spotlight-drift 32s ease-in-out infinite alternate; }
@keyframes fe-spotlight-drift {
    0%   { transform: translate(0, 0) scale(1); opacity: 0.95; }
    50%  { transform: translate(2%, 1%) scale(1.04); opacity: 1; }
    100% { transform: translate(-2%, -1%) scale(1.02); opacity: 0.92; }
}

/* ── Dashboard kicker → bracket pattern (matches landing) ── */
.dashboard-kicker.fe-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent-teal);
    text-transform: uppercase;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 2px;
}
.dashboard-kicker.fe-hero-kicker::before {
    content: "";
    width: 16px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-teal));
    flex-shrink: 0;
}

/* Refine .dashboard-event-title — display font + tighter tracking + balance */
.dashboard-event-title.fe-hero-title {
    font-size: clamp(22px, 3vw, 28px);
    letter-spacing: -0.6px;
    line-height: 1.1;
    text-wrap: balance;
}

/* ── True data display: prob bars get a metallic finish ── */
.prob-bar {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0)),
        var(--bg-bar);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
                0 1px 2px rgba(0, 0, 0, 0.2) inset;
}

/* ── Section accent: hairline rule before .fe-section-head titles ── */
.fe-section-head .fe-kicker { font-family: var(--font-mono); font-weight: 700; }

/* ── Reduced motion: disable drift animations ── */
@media (prefers-reduced-motion: reduce) {
    .fe-premium-hero,
    .fe-action-panel,
    .fe-report-card,
    .hero::before,
    .fe-hero-spotlight::before { animation: none !important; }
}

/* ── Light theme: tone down hero radials so they don't wash out text ── */
[data-theme="light"] .fe-premium-hero,
[data-theme="light"] .fe-action-panel,
[data-theme="light"] .fe-report-card {
    background:
        radial-gradient(circle at 16% 0%, rgba(var(--accent-teal-rgb), 0.10), transparent 36%),
        radial-gradient(circle at 88% 8%, rgba(var(--accent-blue-rgb), 0.07), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.2)),
        var(--bg-card);
    background-size: 140% 140%, 140% 140%, 100% 100%, 100% 100%;
}

/* ─────────────────────────────────────────────────────────────────
   v3.7.2 — Page-level polish primitives
   Auth shell, page header with kicker bracket, source status row,
   edge filter chips, calibration hero, device-frame. All additive.
   ───────────────────────────────────────────────────────────────── */

/* ── Page header with kicker bracket — used on Pro / trust pages ── */
.fe-page-header__kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--accent-teal);
    margin-bottom: 10px;
}
.fe-page-header__kicker::before {
    content: "";
    width: 18px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-teal));
    flex-shrink: 0;
}

/* ── Auth shell — login / register / password pages ── */
.fe-auth-page { position: relative; isolation: isolate; }
.fe-auth-page::before {
    content: "";
    position: absolute;
    inset: -100px -10% auto -10%;
    height: 540px;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 50% at 50% 10%, rgba(var(--accent-teal-rgb), 0.16), transparent 70%),
        radial-gradient(ellipse 35% 35% at 18% 30%, rgba(var(--accent-blue-rgb), 0.07), transparent 70%);
    animation: fe-spotlight-drift 32s ease-in-out infinite alternate;
}
[data-theme="light"] .fe-auth-page::before {
    background:
        radial-gradient(ellipse 60% 50% at 50% 10%, rgba(var(--accent-teal-rgb), 0.10), transparent 70%);
}
.fe-auth-shell {
    max-width: 460px;
    margin: 32px auto 28px;
}
.fe-auth-shell--wide {
    max-width: 980px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    gap: 36px;
    align-items: start;
}
@media (max-width: 880px) {
    .fe-auth-shell--wide {
        grid-template-columns: 1fr;
        max-width: 520px;
    }
}
.fe-auth-brand {
    text-align: center;
    margin-bottom: 26px;
}
.fe-auth-brand__wordmark {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}
.fe-auth-brand__wordmark svg { width: 32px; height: 32px; filter: drop-shadow(0 0 18px rgba(var(--accent-teal-rgb), 0.45)); }
.fe-auth-brand__text {
    font-family: var(--font-display, 'Sora', 'Inter', sans-serif);
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.7px;
    background: linear-gradient(135deg, #fff 0%, #cbd5e1 50%, #fff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.fe-auth-brand__text .edge {
    background: linear-gradient(135deg, var(--accent-teal-light), var(--accent-teal-dark));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
[data-theme="light"] .fe-auth-brand__text {
    background: linear-gradient(135deg, var(--text-heading) 0%, var(--text-secondary) 50%, var(--text-heading) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.fe-auth-brand__sub {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 10px;
}

.fe-auth-card {
    position: relative;
    overflow: hidden;
    padding: 32px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--hairline, rgba(255,255,255,0.06));
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
        var(--bg-card);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
                0 26px 72px rgba(0, 0, 0, 0.36);
}
.fe-auth-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-teal-rgb), 0.55), transparent);
}
.fe-auth-card__title {
    font-family: var(--font-display, 'Sora', 'Inter', sans-serif);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: var(--text-heading);
    margin-bottom: 6px;
    line-height: 1.15;
}
.fe-auth-card__sub {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 22px;
}
.fe-auth-card__sub--hint {
    color: var(--accent-teal);
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 20px;
    margin-top: -10px;
}
.fe-auth-card .form-group { margin-bottom: 14px; }
.fe-auth-card button[type="submit"] {
    width: 100%;
    justify-content: center;
    padding: 13px 20px;
    font-size: 14px;
    margin-top: 12px;
}
.fe-auth-foot {
    text-align: center;
    margin-top: 18px;
    font-size: 13px;
    color: var(--text-secondary);
}
.fe-auth-foot a { color: var(--accent-teal); text-decoration: none; font-weight: 600; }
.fe-auth-foot a:hover { color: var(--accent-teal-light); }
.fe-auth-foot--muted { color: var(--text-muted); font-size: 12px; }
.fe-auth-foot--muted a { color: var(--text-muted); }

.fe-auth-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: var(--radius-sm);
    border: 1px solid;
    font-size: 13px;
    line-height: 1.5;
}
.fe-auth-banner--error {
    background: linear-gradient(180deg, rgba(var(--accent-red-rgb), 0.10), rgba(var(--accent-red-rgb), 0.04));
    border-color: rgba(var(--accent-red-rgb), 0.28);
    border-left-width: 3px;
    color: var(--accent-red);
}
.fe-auth-banner--success {
    background: linear-gradient(180deg, rgba(var(--accent-green-rgb), 0.10), rgba(var(--accent-green-rgb), 0.04));
    border-color: rgba(var(--accent-green-rgb), 0.28);
    border-left-width: 3px;
    color: var(--accent-green);
}

/* Auth stats strip — under the form for trust */
.fe-auth-stats {
    display: flex;
    gap: 14px;
    justify-content: center;
    margin-top: 22px;
    flex-wrap: wrap;
}
.fe-auth-stat { text-align: center; min-width: 84px; }
.fe-auth-stat__num {
    font-family: var(--font-display, 'Sora', 'Inter', sans-serif);
    font-size: 20px;
    font-weight: 900;
    color: var(--accent-teal-light);
    letter-spacing: -0.4px;
    line-height: 1;
    font-variant-numeric: tabular-nums lining-nums;
}
.fe-auth-stat__lbl {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 9.5px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-top: 4px;
    font-weight: 700;
}
.fe-auth-stat-divider {
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--hairline, rgba(255,255,255,0.06)), transparent);
}
.fe-auth-trial-cta {
    text-align: center;
    margin-top: 16px;
}
.fe-auth-trial-cta__title {
    font-size: 12.5px;
    color: var(--accent-teal);
    font-weight: 700;
    letter-spacing: 0.2px;
}
.fe-auth-trial-cta__sub {
    font-size: 11.5px;
    color: var(--text-dim);
    margin-top: 3px;
}

/* Register split-screen left panel */
.fe-auth-pitch__head { margin-bottom: 24px; }
.fe-auth-pitch__head .fe-auth-brand__wordmark {
    margin-bottom: 16px;
}
.fe-auth-pitch__head h1 {
    font-family: var(--font-display, 'Sora', 'Inter', sans-serif);
    font-size: clamp(26px, 3.5vw, 36px);
    font-weight: 900;
    color: var(--text-heading);
    letter-spacing: -0.8px;
    line-height: 1.1;
    text-wrap: balance;
}
.fe-auth-pitch__head h1 .accent {
    background: linear-gradient(135deg, var(--accent-teal-light), var(--accent-teal-dark));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.fe-auth-pitch__head p {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.65;
    margin-top: 12px;
    text-wrap: pretty;
}
.fe-auth-pitch__features {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.fe-auth-pitch__feat {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.fe-auth-pitch__feat-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(var(--accent-teal-rgb), 0.16), rgba(var(--accent-teal-rgb), 0.04));
    border: 1px solid rgba(var(--accent-teal-rgb), 0.18);
    font-size: 16px;
    color: var(--accent-teal-light);
}
.fe-auth-pitch__feat-text { min-width: 0; flex: 1; }
.fe-auth-pitch__feat-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-heading);
    letter-spacing: -0.1px;
}
.fe-auth-pitch__feat-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-top: 2px;
}

.fe-auth-pitch__diff-card {
    margin-top: 22px;
    padding: 18px;
    border-radius: var(--radius-md);
    border: 1px solid var(--hairline, rgba(255,255,255,0.06));
    background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005)), var(--bg-card);
}
.fe-auth-pitch__diff-title {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1.4px;
    margin-bottom: 12px;
}
.fe-auth-pitch__diff-list { display: flex; flex-direction: column; gap: 10px; }
.fe-auth-pitch__diff-item {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.55;
}
.fe-auth-pitch__diff-item::before {
    content: "\2713";
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(var(--accent-teal-rgb), 0.30), rgba(var(--accent-green-rgb), 0.18));
    color: var(--accent-teal-light);
    border: 1px solid rgba(var(--accent-teal-rgb), 0.28);
    font-size: 9.5px;
    font-weight: 800;
}

/* Honeypot field — visually hidden but keep accessible to bots */
.fe-honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ── Source status row (expert picks) ── */
.fe-source-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}
.fe-source-row__title {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1.4px;
    margin-bottom: 8px;
}
.fe-source-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.fe-source-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
.fe-source-chip--on {
    color: var(--accent-green);
    background: rgba(var(--accent-green-rgb), 0.10);
    border-color: rgba(var(--accent-green-rgb), 0.28);
}
.fe-source-chip--off {
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--hairline, rgba(255,255,255,0.06));
}
.fe-source-chip__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}
.fe-source-chip--off .fe-source-chip__dot { box-shadow: none; opacity: 0.6; }
.fe-source-meta {
    font-size: 11.5px;
    color: var(--text-dim);
    margin-top: 6px;
}

/* ── Model pick chip (used in expert picks Our Model column) ── */
.fe-model-pick {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(var(--accent-teal-rgb), 0.18), rgba(var(--accent-teal-rgb), 0.06));
    color: var(--accent-teal-light);
    border: 1px solid rgba(var(--accent-teal-rgb), 0.28);
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
.fe-model-pick__pct { font-weight: 800; opacity: 0.95; }

/* Blended signal — when all signals agree, glow it */
.fe-blended-pick {
    font-weight: 800;
    font-size: 13px;
    letter-spacing: -0.1px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
.fe-blended-pick--agree { color: var(--accent-green); text-shadow: 0 0 14px rgba(var(--accent-green-rgb), 0.20); }
.fe-blended-pick--strong { color: var(--accent-teal-light); }
.fe-blended-tag {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 9.5px;
    margin-top: 3px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.fe-blended-tag--agree { color: var(--accent-green); }
.fe-blended-tag--split { color: var(--accent-yellow); }
.fe-blended-tag--neutral { color: var(--text-dim); }

/* ── Edge filter chips (value finder) ── */
.fe-edge-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--hairline, rgba(255,255,255,0.06));
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.008));
    width: fit-content;
}
.fe-edge-filter__label {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 0 4px;
}

.vf-help-icon {
    color: var(--accent-teal);
    cursor: help;
}

.vf-kelly-value {
    color: var(--text-secondary);
    font-weight: 600;
}

.vf-kelly-note {
    color: var(--text-dim);
    font-size: 9px;
}

.vf-kelly-stake {
    margin-top: 1px;
    color: var(--accent-teal);
    font-size: 10px;
}

/* ── Calibration / accuracy hero refinement ── */
.fe-cal-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid rgba(var(--accent-teal-rgb), 0.18);
    background: linear-gradient(135deg, rgba(var(--accent-teal-rgb), 0.04) 0%, rgba(8,8,12,0.4) 60%);
}
.fe-cal-hero__glow {
    position: absolute;
    top: -40%;
    right: -10%;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(var(--accent-teal-rgb), 0.08) 0%, transparent 60%);
    pointer-events: none;
}
.fe-cal-hero__grid {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 2fr;
    gap: 28px;
    align-items: stretch;
    margin-top: 18px;
    position: relative;
}
.fe-cal-hero__ece {
    font-family: var(--font-display, 'Sora', 'Inter', sans-serif);
    font-feature-settings: "tnum", "lnum", "ss01";
    font-variant-numeric: tabular-nums lining-nums;
    font-size: 64px;
    font-weight: 900;
    line-height: 1;
    color: var(--text-heading);
    letter-spacing: -2.5px;
    text-shadow: 0 0 16px rgba(var(--accent-teal-rgb), 0.35);
}
.fe-cal-eyebrow {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10px;
    font-weight: 700;
    color: var(--accent-teal);
    text-transform: uppercase;
    letter-spacing: 2.2px;
    margin-bottom: 6px;
}
.fe-cal-hero__description {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: var(--space-sm);
    line-height: 1.5;
}
.fe-cal-hero__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.fe-cal-hero__stat-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}
.fe-cal-hero__stat-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-heading);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
    text-shadow: 0 0 10px rgba(var(--accent-teal-rgb), 0.18);
}
.fe-cal-hero__stat-note {
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 1px;
}
.fe-cal-num {
    font-family: var(--font-display, 'Sora', 'Inter', sans-serif);
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: -0.3px;
}

/* ── Device frame — landing screenshot carousel chrome ── */
.fe-notification-list {
    padding: 0;
    overflow: hidden;
}
.fe-notification-item {
    display: block;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-subtle);
    text-decoration: none;
    color: var(--text-secondary);
}
.fe-notification-item.is-unread {
    background: rgba(var(--accent-teal-rgb), 0.04);
}
.fe-notification-item.is-read {
    opacity: 0.75;
}
.fe-notification-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-md);
    flex-wrap: wrap;
}
.fe-notification-main {
    flex: 1 1 260px;
}
.fe-notification-meta {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: var(--space-xs);
}
.fe-notification-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-teal);
    display: inline-block;
}
.fe-notification-kind {
    font-size: 10px;
}
.fe-notification-text {
    color: var(--text-heading);
    font-size: var(--fs-body);
    line-height: 1.5;
}
.fe-notification-time {
    font-size: var(--fs-label);
    color: var(--text-dim);
    white-space: nowrap;
}

.fe-device-frame {
    position: relative;
    border-radius: 14px;
    padding: 28px 8px 8px;
    background:
        linear-gradient(180deg, rgba(20, 22, 28, 0.96), rgba(12, 14, 18, 0.92));
    border: 1px solid rgba(255, 255, 255, 0.085);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.07) inset,
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 32px 80px rgba(0, 0, 0, 0.45);
}
.fe-device-frame__bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 28px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    border-radius: 14px 14px 0 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.fe-device-frame__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(0, 0, 0, 0.25);
}
.fe-device-frame__dot--red { background: #ff5f57; box-shadow: 0 0 6px rgba(255, 95, 87, 0.35); }
.fe-device-frame__dot--yellow { background: #febc2e; box-shadow: 0 0 6px rgba(254, 188, 46, 0.30); }
.fe-device-frame__dot--green { background: #28c841; box-shadow: 0 0 6px rgba(40, 200, 65, 0.30); }
.fe-device-frame__url {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10.5px;
    color: var(--text-dim);
    margin-left: 16px;
    letter-spacing: 0.4px;
    flex: 1;
    text-align: center;
}
.fe-device-frame__inner {
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-primary);
}
.fe-device-frame__inner img {
    display: block;
    width: 100%;
    height: auto;
}
[data-theme="light"] .fe-device-frame {
    background: linear-gradient(180deg, rgba(248, 249, 252, 0.96), rgba(238, 241, 246, 0.94));
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 32px 60px rgba(15, 23, 42, 0.08);
}
[data-theme="light"] .fe-device-frame__bar {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.04), rgba(15, 23, 42, 0.015));
    border-bottom-color: rgba(15, 23, 42, 0.08);
}

/* ─────────────────────────────────────────────────────────────────
   v3.8.0 — Cinematic motion layer
   Apple-inspired easing, choreographed page-enter cascades, stagger
   primitives, magnetic hovers, scroll-driven kicker draw, springy
   button feedback. All gated under prefers-reduced-motion.
   ───────────────────────────────────────────────────────────────── */
:root {
    /* Apple's signature curves — used in iOS animation system. */
    --ease-apple: cubic-bezier(0.32, 0.72, 0, 1);          /* easeOutQuint-like, the Apple favorite */
    --ease-apple-soft: cubic-bezier(0.4, 0, 0.2, 1);       /* Material standard, balanced */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);      /* Slight overshoot — feels alive */
    --ease-spring-soft: cubic-bezier(0.16, 1, 0.3, 1);     /* No overshoot but very smooth */
    --ease-cinema: cubic-bezier(0.65, 0, 0.35, 1);         /* Sharp acceleration + deceleration */
    --motion-instant: 80ms;
    --motion-quick: 180ms;
    --motion-natural: 320ms;
    --motion-deliberate: 520ms;
    --motion-cinematic: 760ms;
}

/* ── Page-enter cascade —
   On every page navigation, .main-content fades up with a slight
   scale, and direct-child sections cascade in with staggered delay.
   Mirrors how iOS detail views slide+fade into place. ── */
/* No filter:blur here — blurring the whole .main-content forces a full-page
   rasterize on every navigation and reads as latency. The translate+fade
   alone carries the premium feel. */
@keyframes fe-page-enter {
    0%   { opacity: 0; transform: translateY(14px) scale(0.998); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fe-content-rise {
    0%   { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

.main-content {
    animation: fe-page-enter var(--motion-deliberate) var(--ease-apple) both;
}

/* Cascading children — applies to direct children of .main-content
   inside common section wrappers. Each child gets a +60ms delay. */
.main-content > .page-header,
.main-content > .card,
.main-content > .stat-grid,
.main-content > section,
.main-content > .dashboard-shell > *,
.main-content > .fe-pricing-hero,
.main-content > .fe-pricing-grid,
.main-content > .fe-trust-band,
.main-content > .fe-risk-band,
.main-content > .fe-faq,
.main-content > .fe-pro-status {
    opacity: 0;
    animation: fe-content-rise var(--motion-natural) var(--ease-apple) forwards;
}
/* Tight stagger: this is an MPA where every click replays the cascade —
   anything past ~200ms reads as load latency, not polish. */
.main-content > *:nth-child(1) { animation-delay: 40ms; }
.main-content > *:nth-child(2) { animation-delay: 80ms; }
.main-content > *:nth-child(3) { animation-delay: 120ms; }
.main-content > *:nth-child(4) { animation-delay: 160ms; }
.main-content > *:nth-child(n+5) { animation-delay: 200ms; }

/* Auth pages get their own enter animation since they bypass main-content's
   default cascade structure. */
.fe-auth-shell,
.fe-auth-shell--wide > * {
    opacity: 0;
    animation: fe-page-enter var(--motion-deliberate) var(--ease-apple) forwards;
}
.fe-auth-shell { animation-delay: 100ms; }
.fe-auth-shell--wide > *:nth-child(1) { animation-delay: 100ms; }
.fe-auth-shell--wide > *:nth-child(2) { animation-delay: 220ms; }

/* ── Stagger primitive —
   Apply .fe-stagger to a parent; direct children fade-up sequentially.
   Use --fe-stagger-step to tune cadence per-instance. ── */
.fe-stagger {
    --fe-stagger-step: 60ms;
    --fe-stagger-base: 100ms;
}
.fe-stagger > * {
    opacity: 0;
    animation: fe-content-rise var(--motion-natural) var(--ease-apple) forwards;
}
.fe-stagger > *:nth-child(1)  { animation-delay: calc(var(--fe-stagger-base) + 0  * var(--fe-stagger-step)); }
.fe-stagger > *:nth-child(2)  { animation-delay: calc(var(--fe-stagger-base) + 1  * var(--fe-stagger-step)); }
.fe-stagger > *:nth-child(3)  { animation-delay: calc(var(--fe-stagger-base) + 2  * var(--fe-stagger-step)); }
.fe-stagger > *:nth-child(4)  { animation-delay: calc(var(--fe-stagger-base) + 3  * var(--fe-stagger-step)); }
.fe-stagger > *:nth-child(5)  { animation-delay: calc(var(--fe-stagger-base) + 4  * var(--fe-stagger-step)); }
.fe-stagger > *:nth-child(6)  { animation-delay: calc(var(--fe-stagger-base) + 5  * var(--fe-stagger-step)); }
.fe-stagger > *:nth-child(7)  { animation-delay: calc(var(--fe-stagger-base) + 6  * var(--fe-stagger-step)); }
.fe-stagger > *:nth-child(8)  { animation-delay: calc(var(--fe-stagger-base) + 7  * var(--fe-stagger-step)); }
.fe-stagger > *:nth-child(9)  { animation-delay: calc(var(--fe-stagger-base) + 8  * var(--fe-stagger-step)); }
.fe-stagger > *:nth-child(10) { animation-delay: calc(var(--fe-stagger-base) + 9  * var(--fe-stagger-step)); }
.fe-stagger > *:nth-child(11) { animation-delay: calc(var(--fe-stagger-base) + 10 * var(--fe-stagger-step)); }
.fe-stagger > *:nth-child(12) { animation-delay: calc(var(--fe-stagger-base) + 11 * var(--fe-stagger-step)); }
.fe-stagger > *:nth-child(n+13) { animation-delay: calc(var(--fe-stagger-base) + 12 * var(--fe-stagger-step)); }

/* ── Magnetic CTA —
   Cursor-aware lift + scale. Keeps things feeling premium without
   being gimmicky. Used on hero CTAs and key action buttons. ── */
.fe-magnetic {
    transition:
        transform var(--motion-quick) var(--ease-spring),
        box-shadow var(--motion-quick) var(--ease-apple);
    will-change: transform;
}
.fe-magnetic:hover {
    transform: translateY(-2px) scale(1.02);
}
.fe-magnetic:active {
    transform: translateY(0) scale(0.98);
    transition-duration: var(--motion-instant);
}

/* ── Refined button springs (override prior linear/scale on .btn) —
   Buttons now use the apple-spring curve for a tactile feel. ── */
.btn,
.btn-primary,
.btn-secondary,
button[type="submit"],
a.btn,
a.btn-primary,
a.btn-secondary {
    transition:
        transform var(--motion-quick) var(--ease-spring),
        background-color var(--motion-quick) var(--ease-apple-soft),
        background-image var(--motion-quick) var(--ease-apple-soft),
        box-shadow var(--motion-quick) var(--ease-apple),
        opacity var(--motion-quick) var(--ease-apple-soft),
        color var(--motion-quick) var(--ease-apple-soft),
        border-color var(--motion-quick) var(--ease-apple-soft);
}
.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
button[type="submit"]:hover,
a.btn:hover,
a.btn-primary:hover,
a.btn-secondary:hover {
    transform: translateY(-1.5px);
}
.btn:active,
.btn-primary:active,
.btn-secondary:active,
button[type="submit"]:active,
a.btn:active,
a.btn-primary:active,
a.btn-secondary:active {
    transform: translateY(0) scale(0.97);
    transition-duration: var(--motion-instant);
}

/* ── Card hovers — refined easing, slight scale on premium surfaces ── */
.card,
.fe-feature,
.fe-tier,
.fe-trust-tile,
.fe-feature,
.dashboard-meta-tile,
.dashboard-action-row,
.dashboard-result-row,
.fe-console-tile,
.event-card,
.fight-card {
    transition:
        transform var(--motion-natural) var(--ease-apple),
        border-color var(--motion-natural) var(--ease-apple-soft),
        background-color var(--motion-natural) var(--ease-apple-soft),
        box-shadow var(--motion-natural) var(--ease-apple),
        opacity var(--motion-quick) var(--ease-apple-soft);
}

/* ── Scroll-reveal: refined easing on the existing data-reveal system ── */
[data-reveal].is-visible {
    animation-duration: var(--motion-deliberate) !important;
    animation-timing-function: var(--ease-apple) !important;
}

/* ── Sidebar nav links — refined sliding underline on hover ── */
.nav-link {
    position: relative;
    transition:
        color var(--motion-quick) var(--ease-apple-soft),
        background-color var(--motion-quick) var(--ease-apple-soft),
        border-left-color var(--motion-quick) var(--ease-apple-soft),
        padding-left var(--motion-quick) var(--ease-spring);
}
.nav-link:hover {
    transform: none !important; /* override prior transform */
}

/* ── Kicker draw-in — when a kicker scrolls into view, the leading
   hairline animates from 0 to its full width. Uses scroll-snap-aware
   IntersectionObserver in base.html (existing) — we just style the
   hairline as a transformed pseudo. ── */
.fe-kicker::before,
.section-kicker::before,
.fe-page-header__kicker::before,
.dashboard-kicker.fe-hero-kicker::before {
    transform-origin: right center;
    transition: transform var(--motion-cinematic) var(--ease-apple);
}
.fe-kicker::after,
.section-kicker::after {
    transform-origin: left center;
    transition: transform var(--motion-cinematic) var(--ease-apple);
}
[data-reveal] .fe-kicker::before,
[data-reveal] .section-kicker::before,
[data-reveal] .fe-page-header__kicker::before { transform: scaleX(0); }
[data-reveal] .fe-kicker::after,
[data-reveal] .section-kicker::after { transform: scaleX(0); }
[data-reveal].is-visible .fe-kicker::before,
[data-reveal].is-visible .section-kicker::before,
[data-reveal].is-visible .fe-page-header__kicker::before { transform: scaleX(1); transition-delay: 200ms; }
[data-reveal].is-visible .fe-kicker::after,
[data-reveal].is-visible .section-kicker::after { transform: scaleX(1); transition-delay: 200ms; }

/* ── Smooth in-page anchor scrolling ── */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ── Number ticker glow — subtle pulse when a number changes value ── */
@keyframes fe-num-flash {
    0%   { color: var(--accent-teal-light); text-shadow: 0 0 16px rgba(var(--accent-teal-rgb), 0.45); }
    100% { color: inherit; text-shadow: none; }
}
.fe-num-flash {
    animation: fe-num-flash var(--motion-deliberate) var(--ease-apple) forwards;
}

/* ── Skeleton shimmer — used for loading states. Already exists, refine
   timing curve. ── */
.fe-skeleton::after,
.skeleton::after {
    animation-duration: 1.4s !important;
    animation-timing-function: var(--ease-apple) !important;
}

/* ── Tooltip refinement — Apple-style scale + fade ── */
[data-tooltip]::after {
    transform: translateX(-50%) translateY(4px) scale(0.96);
    transition:
        opacity var(--motion-quick) var(--ease-apple),
        transform var(--motion-quick) var(--ease-spring);
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
    transform: translateX(-50%) translateY(0) scale(1);
}

/* ── Form input focus — refined ring grow ── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
    transition:
        border-color var(--motion-quick) var(--ease-apple-soft),
        background-color var(--motion-quick) var(--ease-apple-soft),
        box-shadow var(--motion-natural) var(--ease-apple);
}

/* ── Chips & badges — gentle hover lift ── */
.chip,
.method-badge,
.result-badge,
.status-badge {
    transition:
        transform var(--motion-quick) var(--ease-spring),
        background-color var(--motion-quick) var(--ease-apple-soft),
        color var(--motion-quick) var(--ease-apple-soft),
        box-shadow var(--motion-quick) var(--ease-apple);
}

/* ── Modal / dialog enter — for any future overlays ── */
@keyframes fe-modal-enter {
    0%   { opacity: 0; transform: translateY(20px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.fe-modal-enter {
    animation: fe-modal-enter var(--motion-natural) var(--ease-apple) forwards;
}

/* ── Sidebar pro CTA — a gentle breathing glow ── */
@keyframes fe-pro-breathe {
    0%, 100% { box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 14px 36px rgba(212, 166, 74, 0.22); }
    50%      { box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 16px 42px rgba(212, 166, 74, 0.32); }
}
.fe-sidebar-pro-cta {
    animation: fe-pro-breathe 4.8s var(--ease-apple) infinite;
}

/* ── Dashboard panel eyebrow — small mono kicker above each card-title.
   Used on dashboard.html panels: My Action Queue / Your Edge / Upcoming
   Events / Latest Results / Data Freshness. ── */
.fe-panel-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 9.5px;
    font-weight: 700;
    color: var(--accent-teal);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 4px;
    line-height: 1;
}
.fe-panel-eyebrow::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent-teal);
    box-shadow: 0 0 6px rgba(var(--accent-teal-rgb), 0.6);
    flex-shrink: 0;
}
.fe-panel-eyebrow--muted { color: var(--text-muted); }
.fe-panel-eyebrow--muted::before { background: var(--text-muted); box-shadow: none; }
.fe-panel-eyebrow--amber { color: var(--accent-pro-light); }
.fe-panel-eyebrow--amber::before { background: var(--accent-pro-light); box-shadow: 0 0 6px var(--accent-pro-glow); }

/* ─────────────────────────────────────────────────────────────────
   v3.8.0 — fight_result.html refinements (CSS-only)
   The most-rendered component. Don't touch the template — refine via
   the existing classes (.fight-card, .card-title, .core-edge-card,
   .support-insight, .prob-bar). All additive.
   ───────────────────────────────────────────────────────────────── */

/* Display font on the matchup line — fighter names feel editorial */
.fight-card .card-title {
    font-family: var(--font-display, 'Sora', 'Inter', sans-serif);
    letter-spacing: -0.4px;
    line-height: 1.15;
}

/* Refined fight-card hover — gentle scale + Apple ease */
.fight-card {
    transition:
        transform var(--motion-natural, 320ms) var(--ease-apple, cubic-bezier(0.32,0.72,0,1)),
        border-left-color var(--motion-natural, 320ms) var(--ease-apple-soft, cubic-bezier(0.4,0,0.2,1)),
        box-shadow var(--motion-natural, 320ms) var(--ease-apple, cubic-bezier(0.32,0.72,0,1));
    position: relative;
}
.fight-card.high {
    box-shadow:
        var(--shadow-card),
        0 0 0 1px rgba(var(--accent-teal-rgb), 0.10),
        0 28px 64px rgba(var(--accent-teal-rgb), 0.06);
}
.fight-card:hover {
    transform: translateY(-2px);
    box-shadow:
        var(--shadow-card-hover),
        0 0 0 1px rgba(var(--accent-teal-rgb), 0.14),
        0 32px 72px rgba(var(--accent-teal-rgb), 0.08);
}

/* Refined PICK chip — overrides the inline-styled chip in the template
   without touching the template. Targets the chip via its content
   pattern. (We can't override an inline-style purely from CSS — but
   we can add depth/glow via :nth-of-type targeting on .card-header
   chips. This is a soft enhancement.) */
.fight-card .card-header span[style*="background:linear-gradient(135deg,var(--accent-teal)"] {
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
    transition: transform var(--motion-quick, 180ms) var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1));
}
.fight-card .card-header span[style*="background:linear-gradient(135deg,var(--accent-teal)"]:hover {
    transform: translateY(-1px) scale(1.03);
}

/* Numbers in stat cards inside reports — true tabular nums */
.fight-card .stat-card .value,
.fight-card .stat-grid .stat-card .value,
.fight-card div[style*="font-variant-numeric:tabular-nums"] {
    font-family: var(--font-display, 'Sora', 'Inter', sans-serif);
    font-feature-settings: "tnum", "lnum", "ss01";
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: -0.4px;
}

/* Probability bar — refined inset highlight */
.fight-card .prob-bar {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0)),
        var(--bg-bar);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 1px 3px rgba(0, 0, 0, 0.25) inset;
    border-radius: 8px;
    overflow: hidden;
    height: 16px;
}
.fight-card .prob-bar .side-a,
.fight-card .prob-bar .side-b {
    box-shadow: 0 0 8px rgba(var(--accent-teal-rgb), 0.12);
    animation-duration: 1.0s !important;
    animation-timing-function: var(--ease-apple, cubic-bezier(0.32,0.72,0,1)) !important;
}

/* Core Edge card hover — subtle scale, refined shadow */
.core-edge-card {
    transition:
        transform var(--motion-natural, 320ms) var(--ease-apple, cubic-bezier(0.32,0.72,0,1)),
        box-shadow var(--motion-natural, 320ms) var(--ease-apple, cubic-bezier(0.32,0.72,0,1)),
        filter var(--motion-natural, 320ms) var(--ease-apple-soft, cubic-bezier(0.4,0,0.2,1));
}
.core-edge-card:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.40),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    filter: saturate(1.18) brightness(1.04);
}

/* Support insights — refined hover */
.support-insight {
    transition:
        background var(--motion-quick, 180ms) var(--ease-apple-soft, cubic-bezier(0.4,0,0.2,1)),
        border-color var(--motion-quick, 180ms) var(--ease-apple-soft, cubic-bezier(0.4,0,0.2,1)),
        transform var(--motion-quick, 180ms) var(--ease-apple, cubic-bezier(0.32,0.72,0,1));
}
.support-insight:hover {
    transform: translateX(2px);
    background: linear-gradient(90deg, rgba(var(--accent-teal-rgb), 0.04), var(--bg-subtle));
    border-color: rgba(var(--accent-teal-rgb), 0.16);
}

/* Coin-flip pulse — refined to use Apple ease */
@keyframes fe-coinflip-pulse-refined {
    0%, 100% {
        box-shadow: 0 0 14px rgba(var(--accent-red-rgb), 0.35),
                    0 0 0 0 rgba(var(--accent-red-rgb), 0.40);
    }
    50% {
        box-shadow: 0 0 22px rgba(var(--accent-red-rgb), 0.60),
                    0 0 0 8px rgba(var(--accent-red-rgb), 0);
    }
}
.fight-card .card-header span[style*="background:var(--accent-red)"][style*="animation:coinflipPulse"] {
    animation-name: fe-coinflip-pulse-refined !important;
    animation-timing-function: var(--ease-apple, cubic-bezier(0.32,0.72,0,1)) !important;
    animation-duration: 2.4s !important;
}

/* Tables inside reports — sticky-first column treatment */
.fight-card .table-container table {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}
.fight-card .table-container table thead th {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10.5px;
    letter-spacing: 1.4px;
    font-weight: 700;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .fight-card:hover,
    .core-edge-card:hover,
    .support-insight:hover {
        transform: none !important;
    }
    .fight-card .prob-bar .side-a,
    .fight-card .prob-bar .side-b { animation: none !important; }
}

/* ─────────────────────────────────────────────────────────────────
   v3.9.0 — Component refinements (HTMX-safe)
   No template changes for these — only CSS targeting existing
   classes inside result_badges, freshness_rows, compare_result,
   parlay_result. Plus advanced motion (mouse tilt, scroll counters,
   View Transitions polish).
   ───────────────────────────────────────────────────────────────── */

/* ── Method badges (KO / SUB / DEC / DRAW) — unified gradient pill ── */
.method-badge {
    font-family: var(--font-mono, ui-monospace, monospace) !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
    border: 1px solid transparent !important;
    transition:
        transform var(--motion-quick, 180ms) var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1)),
        background var(--motion-quick, 180ms) var(--ease-apple-soft, cubic-bezier(0.4,0,0.2,1)),
        box-shadow var(--motion-quick, 180ms) var(--ease-apple, cubic-bezier(0.32,0.72,0,1));
}
.method-badge:hover {
    transform: translateY(-1px);
}
.method-badge--ko {
    background: linear-gradient(135deg, rgba(var(--accent-orange-rgb), 0.20), rgba(var(--accent-orange-rgb), 0.08)) !important;
    border-color: rgba(var(--accent-orange-rgb), 0.30) !important;
    box-shadow: 0 0 12px rgba(var(--accent-orange-rgb), 0.15);
}
.method-badge--sub {
    background: linear-gradient(135deg, rgba(var(--accent-purple-rgb), 0.20), rgba(var(--accent-purple-rgb), 0.08)) !important;
    border-color: rgba(var(--accent-purple-rgb), 0.30) !important;
    box-shadow: 0 0 12px rgba(var(--accent-purple-rgb), 0.15);
}
.method-badge--dec {
    background: linear-gradient(135deg, rgba(var(--accent-blue-rgb), 0.20), rgba(var(--accent-blue-rgb), 0.08)) !important;
    border-color: rgba(var(--accent-blue-rgb), 0.30) !important;
    box-shadow: 0 0 12px rgba(var(--accent-blue-rgb), 0.15);
}
.method-badge--unknown,
.method-badge--drawnc {
    border-color: var(--hairline, rgba(255,255,255,0.06)) !important;
}

/* ── Status / lifecycle / data-health badges — refined gradient + mono ── */
.status-badge,
.lifecycle-badge,
.data-health-badge {
    font-family: var(--font-mono, ui-monospace, monospace) !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
}
.status-badge--auto,
.lifecycle-badge--final,
.data-health-badge--fresh {
    background: linear-gradient(135deg, rgba(var(--accent-green-rgb), 0.18), rgba(var(--accent-green-rgb), 0.06)) !important;
    border: 1px solid rgba(var(--accent-green-rgb), 0.28) !important;
    box-shadow: 0 0 10px rgba(var(--accent-green-rgb), 0.14);
}
.status-badge--manual,
.lifecycle-badge--finalizing,
.data-health-badge--stale {
    background: linear-gradient(135deg, rgba(var(--accent-yellow-rgb), 0.16), rgba(var(--accent-yellow-rgb), 0.05)) !important;
    border: 1px solid rgba(var(--accent-yellow-rgb), 0.28) !important;
    box-shadow: 0 0 10px rgba(var(--accent-yellow-rgb), 0.12);
}
.data-health-badge--refreshing {
    background: linear-gradient(135deg, rgba(var(--accent-blue-rgb), 0.18), rgba(var(--accent-blue-rgb), 0.06)) !important;
    border: 1px solid rgba(var(--accent-blue-rgb), 0.28) !important;
}
.data-health-badge--attention {
    background: linear-gradient(135deg, rgba(var(--accent-red-rgb), 0.16), rgba(var(--accent-red-rgb), 0.05)) !important;
    border: 1px solid rgba(var(--accent-red-rgb), 0.28) !important;
    box-shadow: 0 0 10px rgba(var(--accent-red-rgb), 0.18);
}

/* ── Method probability row inside reports (already-styled bar) — refine ── */
.method-probability-row__value {
    font-family: var(--font-display, 'Sora', 'Inter', sans-serif);
    font-feature-settings: "tnum", "lnum";
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: -0.2px;
}
.method-probability-row__bar {
    transition: width 0.9s var(--ease-apple, cubic-bezier(0.32,0.72,0,1));
    box-shadow: 0 0 10px currentColor;
    opacity: 0.9;
}

/* ── Parlay stats grid (parlay_result.html) ── */
.fe-parlay-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--hairline, rgba(255,255,255,0.06));
}
.fe-parlay-stat {
    text-align: center;
    padding: 10px 8px;
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0.004));
    border: 1px solid transparent;
    transition: border-color var(--motion-quick, 180ms) var(--ease-apple-soft, cubic-bezier(0.4,0,0.2,1));
}
.fe-parlay-stat:hover {
    border-color: var(--hairline, rgba(255,255,255,0.06));
}
.fe-parlay-stat__num {
    font-family: var(--font-display, 'Sora', 'Inter', sans-serif);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.05;
    font-feature-settings: "tnum", "lnum";
    font-variant-numeric: tabular-nums lining-nums;
}
.fe-parlay-stat__lbl {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 9.5px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1.4px;
    margin-top: 5px;
    font-weight: 700;
}
.parlay-log-form {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--hairline, rgba(255,255,255,0.06));
}
.parlay-log-form__row {
    display: grid;
    grid-template-columns: minmax(88px, 1fr) minmax(88px, 1fr) auto;
    gap: 10px;
    align-items: end;
}
.parlay-log-form label {
    display: grid;
    gap: 5px;
    min-width: 0;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 9.5px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 700;
}
.parlay-log-form input {
    width: 100%;
    min-width: 0;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    background: rgba(255,255,255,0.04);
    color: var(--text-main);
    font: 700 13px var(--font-display, 'Sora', 'Inter', sans-serif);
    font-variant-numeric: tabular-nums;
}
.parlay-log-form__hint {
    margin-top: 7px;
    color: var(--text-dim);
    font-size: 11px;
    text-align: center;
}
@media (max-width: 640px) {
    .fe-parlay-stats { grid-template-columns: 1fr 1fr; }
    .parlay-log-form__row { grid-template-columns: 1fr; }
}

/* ── compare_result.html refinements (CSS-only via existing classes) ── */
.trust-table th,
.trust-table--cards th {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-weight: 700;
    letter-spacing: 1.4px;
    font-size: 10.5px !important;
}

/* ─────────────────────────────────────────────────────────────────
   v3.9.0 — Advanced motion polish
   ───────────────────────────────────────────────────────────────── */

/* ── View Transitions API — supported in modern browsers only.
   When the user navigates between two FightEdge pages and the browser
   supports View Transitions, give the new content a soft fade-up.
   Falls back gracefully on older browsers. ── */
@supports (view-transition-name: root) {
    :root { view-transition-name: root; }
    @keyframes fe-vt-fade-in {
        from { opacity: 0; transform: translateY(8px) scale(0.997); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes fe-vt-fade-out {
        from { opacity: 1; }
        to   { opacity: 0; }
    }
    ::view-transition-old(root) {
        animation: fe-vt-fade-out var(--motion-quick, 180ms) var(--ease-apple-soft, cubic-bezier(0.4,0,0.2,1)) forwards;
    }
    ::view-transition-new(root) {
        animation: fe-vt-fade-in var(--motion-natural, 320ms) var(--ease-apple, cubic-bezier(0.32,0.72,0,1)) forwards;
    }
}

/* ── Mouse-follow tilt — subtle 3D lean toward cursor on premium hero
   surfaces. Applied via JS reading `--fe-tilt-x` and `--fe-tilt-y`
   custom properties. Falls back to flat if no JS / reduced motion. ── */
.fe-tilt {
    --fe-tilt-x: 0;
    --fe-tilt-y: 0;
    transition:
        transform var(--motion-natural, 320ms) var(--ease-apple, cubic-bezier(0.32,0.72,0,1));
    transform-style: preserve-3d;
    will-change: transform;
}
.fe-tilt:hover {
    transform:
        perspective(1200px)
        rotateX(calc(var(--fe-tilt-y) * 1deg))
        rotateY(calc(var(--fe-tilt-x) * 1deg))
        translateZ(0);
}

/* ── Scroll-driven counter — when a `[data-counter]` enters the
   viewport the existing JS animates it. Add a subtle scale-up
   keyframe so the number pulses lightly as it counts up. ── */
@keyframes fe-counter-pulse {
    0%   { transform: scale(0.96); opacity: 0; }
    60%  { transform: scale(1.02); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
[data-counter] {
    display: inline-block;
}
[data-counter].fe-counter-active {
    animation: fe-counter-pulse var(--motion-deliberate, 520ms) var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1)) both;
}

/* ── Card "lift on intent" — when the user hovers a card with a
   primary action inside, the action button quietly rises so it
   reads as the implied next click. ── */
.card:hover .btn-primary,
.fe-feature:hover .btn-primary,
.fe-tier:hover .btn-primary {
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.28) inset,
        0 -1px 0 rgba(0, 0, 0, 0.1) inset,
        0 16px 40px rgba(var(--accent-teal-rgb), 0.32);
}

/* ── Anchor link smooth-glide — when an in-page anchor target receives
   focus, briefly highlight it with a teal glow. ── */
@keyframes fe-anchor-glow {
    0%   { box-shadow: 0 0 0 0 rgba(var(--accent-teal-rgb), 0.55); background: rgba(var(--accent-teal-rgb), 0.08); }
    100% { box-shadow: 0 0 0 12px rgba(var(--accent-teal-rgb), 0); background: transparent; }
}
:target {
    animation: fe-anchor-glow 1.6s var(--ease-apple, cubic-bezier(0.32,0.72,0,1)) both;
    border-radius: var(--radius-md);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .fe-tilt:hover { transform: none !important; }
    [data-counter].fe-counter-active { animation: none !important; }
    :target { animation: none !important; }
    @supports (view-transition-name: root) {
        ::view-transition-old(root),
        ::view-transition-new(root) { animation: none !important; }
    }
}

/* ─────────────────────────────────────────────────────────────────
   v3.10.0 — Error pages, scroll-snap carousel, fight kickers,
   lock-or-fade interaction, fighter profile body, admin polish.
   ───────────────────────────────────────────────────────────────── */

/* ── Cinematic error pages (404 / 500) ── */
.fe-error-shell {
    text-align: center;
    padding: 80px 24px 60px;
    max-width: 560px;
    margin: 0 auto;
    position: relative;
    isolation: isolate;
}
.fe-error-shell::before {
    content: "";
    position: absolute;
    inset: -80px -10% auto -10%;
    height: 480px;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 50% at 50% 10%, rgba(var(--accent-teal-rgb), 0.14), transparent 70%),
        radial-gradient(ellipse 35% 35% at 18% 30%, rgba(var(--accent-blue-rgb), 0.06), transparent 70%);
    animation: fe-spotlight-drift 32s ease-in-out infinite alternate;
}
.fe-error-shell--500::before {
    background:
        radial-gradient(ellipse 60% 50% at 50% 10%, rgba(var(--accent-red-rgb), 0.16), transparent 70%),
        radial-gradient(ellipse 35% 35% at 18% 30%, rgba(var(--accent-orange-rgb), 0.07), transparent 70%);
}
.fe-error-shell .fe-wordmark {
    margin-bottom: 32px;
}
.fe-error-code {
    font-family: var(--font-display, 'Sora', 'Inter', sans-serif);
    font-size: clamp(96px, 18vw, 160px);
    font-weight: 900;
    letter-spacing: -6px;
    line-height: 0.9;
    background: linear-gradient(135deg, var(--accent-teal-light), var(--accent-teal-dark));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 60px rgba(var(--accent-teal-rgb), 0.30);
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum","lnum";
    margin-bottom: 12px;
    animation: fe-error-code-rise 800ms var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1)) both;
}
.fe-error-code--500 {
    background: linear-gradient(135deg, var(--accent-red-light), var(--accent-orange));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 60px rgba(var(--accent-red-rgb), 0.32);
}
@keyframes fe-error-code-rise {
    0%   { opacity: 0; transform: translateY(28px) scale(0.92); filter: blur(8px); }
    60%  { filter: blur(0); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.fe-error-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--accent-teal);
    margin-bottom: 8px;
}
.fe-error-kicker--500 { color: var(--accent-red); }
.fe-error-title {
    font-family: var(--font-display, 'Sora', 'Inter', sans-serif);
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 800;
    color: var(--text-heading);
    letter-spacing: -0.6px;
    margin-bottom: 12px;
    line-height: 1.1;
    text-wrap: balance;
}
.fe-error-copy {
    color: var(--text-secondary);
    font-size: 14.5px;
    line-height: 1.65;
    max-width: 420px;
    margin: 0 auto 32px;
    text-wrap: pretty;
}
.fe-error-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 36px;
}
.fe-error-foot {
    font-size: 12px;
    color: var(--text-dim);
    border-top: 1px solid var(--hairline, rgba(255,255,255,0.06));
    padding-top: 22px;
    max-width: 360px;
    margin: 0 auto;
}
.fe-error-foot a { color: var(--accent-teal); text-decoration: none; font-weight: 600; }
.fe-error-foot a:hover { color: var(--accent-teal-light); }

/* ── Events list — scroll-snap horizontal carousel for upcoming row ── */
.fe-event-snap {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 4px;
    padding: 4px 4px 18px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-teal-rgb), 0.30) transparent;
}
.fe-event-snap::-webkit-scrollbar { height: 6px; }
.fe-event-snap::-webkit-scrollbar-track { background: transparent; }
.fe-event-snap::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-teal-rgb), 0.28);
    border-radius: 999px;
    transition: background var(--motion-quick, 180ms) var(--ease-apple-soft, cubic-bezier(0.4,0,0.2,1));
}
.fe-event-snap::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-teal-rgb), 0.5); }
.fe-event-snap > * {
    scroll-snap-align: start;
    flex: 0 0 320px;
    min-width: 0;
}
@media (max-width: 768px) {
    .fe-event-snap > * { flex-basis: 84%; }
}

/* ── Per-fight kicker on event_analysis fight cards ── */
.fe-fight-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.fe-fight-kicker__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 6px;
    border: 1px solid var(--hairline, rgba(255,255,255,0.06));
    background: var(--bg-subtle);
    color: var(--accent-teal);
    font-weight: 800;
    letter-spacing: 0.4px;
    font-feature-settings: "tnum";
}
.fe-fight-kicker__sep {
    color: var(--text-dim);
    opacity: 0.6;
}
.fe-fight-kicker__seg--main { color: var(--accent-teal); }
.fe-fight-kicker__seg--prelim { color: var(--text-muted); }
.fe-fight-kicker__seg--early { color: var(--text-dim); }

/* ── Lock or Fade — pick lock-in feedback ── */
@keyframes fe-pick-lock-in {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.04); box-shadow: 0 0 0 0 rgba(var(--accent-teal-rgb), 0.55); }
    70%  { box-shadow: 0 0 0 18px rgba(var(--accent-teal-rgb), 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--accent-teal-rgb), 0); }
}
.fe-locking-in {
    animation: fe-pick-lock-in 720ms var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1)) forwards;
}
@keyframes fe-pick-checkmark {
    0%   { stroke-dashoffset: 24; opacity: 0; }
    100% { stroke-dashoffset: 0; opacity: 1; }
}
.fe-pick-check {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    animation: fe-pick-checkmark 380ms var(--ease-apple, cubic-bezier(0.32,0.72,0,1)) 200ms forwards;
}

/* ── Fighter profile body refinements ── */
.fe-profile-skill-bar {
    height: 8px;
    background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0)),
                var(--bg-bar);
    border-radius: 6px;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.04) inset,
        0 1px 2px rgba(0, 0, 0, 0.2) inset;
    position: relative;
}
.fe-profile-skill-bar > .fill {
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--accent-teal-dark), var(--accent-teal-light));
    box-shadow: 0 0 12px rgba(var(--accent-teal-rgb), 0.35);
    transition: width 1s var(--ease-apple, cubic-bezier(0.32,0.72,0,1));
    animation: fe-skill-bar-grow 1.1s var(--ease-apple, cubic-bezier(0.32,0.72,0,1)) both;
}
@keyframes fe-skill-bar-grow {
    from { width: 0 !important; }
}

/* Fighter timeline — recent fights as a vertical rail */
.fe-fight-timeline {
    position: relative;
    padding-left: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.fe-fight-timeline::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 7px;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--hairline-strong, rgba(255,255,255,0.10)), transparent);
}
.fe-fight-timeline__row {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--hairline, rgba(255,255,255,0.06));
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005)), var(--bg-subtle);
    transition:
        border-color var(--motion-quick, 180ms) var(--ease-apple-soft, cubic-bezier(0.4,0,0.2,1)),
        transform var(--motion-quick, 180ms) var(--ease-apple, cubic-bezier(0.32,0.72,0,1));
}
.fe-fight-timeline__row:hover {
    border-color: rgba(var(--accent-teal-rgb), 0.18);
    transform: translateX(2px);
}
.fe-fight-timeline__row::before {
    content: "";
    position: absolute;
    top: 18px;
    left: -19px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--accent-teal);
    box-shadow: 0 0 10px rgba(var(--accent-teal-rgb), 0.30);
}
.fe-fight-timeline__row--loss::before {
    border-color: var(--accent-red);
    box-shadow: 0 0 10px rgba(var(--accent-red-rgb), 0.30);
}
.fe-fight-timeline__row--draw::before {
    border-color: var(--text-muted);
    box-shadow: none;
}

/* ── Admin pages — small refinements ── */
.fe-admin-section {
    padding: 22px 26px;
    border-radius: var(--radius-md);
    border: 1px solid var(--hairline, rgba(255,255,255,0.06));
    background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005)), var(--bg-card);
    margin-bottom: 18px;
}
.fe-admin-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--hairline, rgba(255,255,255,0.06));
}
.fe-admin-section__title {
    font-family: var(--font-display, 'Sora', 'Inter', sans-serif);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.2px;
    color: var(--text-heading);
}
.fe-admin-section__sub {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-top: 3px;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .fe-error-code,
    .fe-locking-in,
    .fe-pick-check,
    .fe-profile-skill-bar > .fill,
    .fe-error-shell::before { animation: none !important; }
    .fe-fight-timeline__row:hover { transform: none !important; }
    .fe-event-snap { scroll-behavior: auto; }
}

/* ─────────────────────────────────────────────────────────────────
   v3.10.1 — Dashboard refinement pass
   - Stage pills: subtle amber pre-glow on the next-up step
   - Feature tiles: colored icon discs by function
   - Action queue: urgency-tier rails by CTA text
   - Tail the Model: ticker-grade numbers
   - Live Results: tighter empty state
   ───────────────────────────────────────────────────────────────── */

/* ── Stage rail: next-up pill gets a faint amber pre-glow ── */
.fe-stage-pill.is-next {
    border-color: rgba(244, 209, 128, 0.18);
    background: rgba(244, 209, 128, 0.035);
    color: rgba(244, 209, 128, 0.72);
    box-shadow: none;
    animation: none;
}
@keyframes fe-stage-pre-glow {
    0%, 100% { box-shadow: 0 0 14px rgba(244, 209, 128, 0.10); }
    50%      { box-shadow: 0 0 20px rgba(244, 209, 128, 0.22); }
}

/* ── Quick action tiles — colored icon disc + display headline ── */
.fe-quick-tile {
    text-decoration: none;
    text-align: center;
    padding: 22px 14px 18px;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
    overflow: hidden;
    transition:
        transform var(--motion-quick, 180ms) var(--ease-apple, cubic-bezier(0.32,0.72,0,1)),
        border-color var(--motion-quick, 180ms) var(--ease-apple-soft, cubic-bezier(0.4,0,0.2,1)),
        box-shadow var(--motion-quick, 180ms) var(--ease-apple, cubic-bezier(0.32,0.72,0,1));
}
.fe-quick-tile:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--accent-teal-rgb), 0.28);
    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.32),
                0 0 0 1px rgba(var(--accent-teal-rgb), 0.06);
}
.fe-quick-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    font-size: 26px;
    margin-bottom: 10px;
    transition:
        transform var(--motion-quick, 180ms) var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1)),
        box-shadow var(--motion-quick, 180ms) var(--ease-apple, cubic-bezier(0.32,0.72,0,1));
}
.fe-quick-tile:hover .fe-quick-tile__icon {
    transform: scale(1.06) rotate(-3deg);
}
.fe-quick-tile__icon--analyze {
    background: linear-gradient(135deg, rgba(var(--accent-red-rgb), 0.20), rgba(var(--accent-red-rgb), 0.05));
    border: 1px solid rgba(var(--accent-red-rgb), 0.28);
    box-shadow: 0 0 18px rgba(var(--accent-red-rgb), 0.15);
}
.fe-quick-tile__icon--expert {
    background: linear-gradient(135deg, rgba(var(--accent-purple-rgb), 0.20), rgba(var(--accent-purple-rgb), 0.05));
    border: 1px solid rgba(var(--accent-purple-rgb), 0.28);
    box-shadow: 0 0 18px rgba(var(--accent-purple-rgb), 0.15);
}
.fe-quick-tile__icon--value {
    background: linear-gradient(135deg, rgba(244, 209, 128, 0.22), rgba(212, 166, 74, 0.05));
    border: 1px solid rgba(244, 209, 128, 0.28);
    box-shadow: 0 0 18px rgba(212, 166, 74, 0.18);
}
.fe-quick-tile__icon--lockfade {
    background: linear-gradient(135deg, rgba(var(--accent-green-rgb), 0.22), rgba(var(--accent-green-rgb), 0.05));
    border: 1px solid rgba(var(--accent-green-rgb), 0.28);
    box-shadow: 0 0 18px rgba(var(--accent-green-rgb), 0.15);
}
.fe-quick-tile__title {
    font-family: var(--font-display, 'Sora', 'Inter', sans-serif);
    font-size: 14px;
    font-weight: 800;
    color: var(--text-heading);
    letter-spacing: -0.2px;
}
.fe-quick-tile__sub {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 2px;
}

/* ── Action queue rows — urgency-tier left rails ── */
.dashboard-action-row {
    border-left: 3px solid transparent;
}
.dashboard-action-row.fe-action-row--primary {
    border-left-color: var(--accent-teal);
    background:
        linear-gradient(90deg, rgba(var(--accent-teal-rgb), 0.07), rgba(255, 255, 255, 0.012)),
        var(--bg-subtle);
}
.dashboard-action-row.fe-action-row--done {
    border-left-color: var(--accent-green);
    background:
        linear-gradient(90deg, rgba(var(--accent-green-rgb), 0.05), rgba(255, 255, 255, 0.008)),
        var(--bg-subtle);
}
.dashboard-action-row.fe-action-row--past {
    border-left-color: rgba(255, 255, 255, 0.10);
    opacity: 0.78;
}
.dashboard-action-row.fe-action-row--primary .dashboard-action-cta {
    color: var(--accent-teal);
    text-shadow: 0 0 10px rgba(var(--accent-teal-rgb), 0.35);
}
.dashboard-action-row.fe-action-row--done .dashboard-action-cta {
    color: var(--accent-green);
}
.dashboard-action-row.fe-action-row--past .dashboard-action-cta {
    color: var(--text-muted);
}

/* ── Tail the Model — ticker-grade numbers ── */
.fe-tail-shell {
    margin-bottom: 24px;
    padding: 22px 26px;
    border-radius: var(--radius-md);
    border: 1px solid var(--hairline, rgba(255,255,255,0.06));
    border-left: 4px solid var(--accent-blue);
    background:
        radial-gradient(circle at 0% 0%, rgba(var(--accent-blue-rgb), 0.06), transparent 50%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.005)),
        var(--bg-card);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
                0 18px 48px rgba(0, 0, 0, 0.20);
    position: relative;
    overflow: hidden;
}
.fe-tail-shell__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}
.fe-tail-shell__title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display, 'Sora', 'Inter', sans-serif);
    font-size: 16px;
    font-weight: 800;
    color: var(--accent-blue);
    letter-spacing: -0.2px;
}
.fe-tail-shell__since {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10.5px;
    color: var(--text-dim);
    letter-spacing: 0.6px;
}
.fe-tail-stop {
    font-size: 11px;
    padding: 5px 14px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    border: 1px solid var(--hairline, rgba(255,255,255,0.06));
    border-radius: 6px;
    cursor: pointer;
    transition:
        background var(--motion-quick, 180ms) var(--ease-apple-soft, cubic-bezier(0.4,0,0.2,1)),
        color var(--motion-quick, 180ms) var(--ease-apple-soft, cubic-bezier(0.4,0,0.2,1)),
        border-color var(--motion-quick, 180ms) var(--ease-apple-soft, cubic-bezier(0.4,0,0.2,1));
}
.fe-tail-stop:hover {
    background: rgba(var(--accent-red-rgb), 0.10);
    color: var(--accent-red-light);
    border-color: rgba(var(--accent-red-rgb), 0.30);
}
.fe-tail-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 0.8fr;
    gap: 18px;
    align-items: stretch;
}
.fe-tail-grid--no-pending { grid-template-columns: 1.2fr 1fr 1fr; }
@media (max-width: 720px) {
    .fe-tail-grid,
    .fe-tail-grid--no-pending { grid-template-columns: 1fr 1fr; }
}
.fe-tail-cell {
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0.004));
    border: 1px solid var(--hairline, rgba(255,255,255,0.06));
    border-radius: var(--radius-sm);
    text-align: left;
    min-width: 0;
    position: relative;
    overflow: hidden;
}
.fe-tail-cell::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12px;
    right: 12px;
    height: 1px;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    opacity: 0.32;
}
.fe-tail-cell--record { color: var(--text-heading); }
.fe-tail-cell--pl-pos { color: var(--accent-green); }
.fe-tail-cell--pl-neg { color: var(--accent-red); }
.fe-tail-cell--roi-pos { color: var(--accent-green); }
.fe-tail-cell--roi-neg { color: var(--accent-red); }
.fe-tail-cell--pending { color: var(--text-muted); }
.fe-tail-cell__label {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 9.5px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-weight: 700;
    margin-bottom: 6px;
}
.fe-tail-cell__num {
    font-family: var(--font-display, 'Sora', 'Inter', sans-serif);
    font-weight: 900;
    font-size: 28px;
    line-height: 1;
    letter-spacing: -1.2px;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum","lnum","ss01";
    color: inherit;
}
.fe-tail-cell--roi-pos .fe-tail-cell__num,
.fe-tail-cell--pl-pos .fe-tail-cell__num {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-green) 100%, #fff 20%), var(--accent-green));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 22px rgba(var(--accent-green-rgb), 0.30);
}
.fe-tail-cell--roi-neg .fe-tail-cell__num,
.fe-tail-cell--pl-neg .fe-tail-cell__num {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-red) 100%, #fff 20%), var(--accent-red));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 22px rgba(var(--accent-red-rgb), 0.28);
}
.fe-tail-zone-row {
    display: flex;
    gap: 14px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--hairline, rgba(255,255,255,0.06));
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}
.fe-tail-zone-row__seg {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-right: 5px;
}

/* ── Live Results placeholder — tighter ── */
.fe-live-empty {
    margin-bottom: 0;
    padding: 18px 20px;
    border: 1px dashed var(--hairline-strong, rgba(255,255,255,0.10));
    border-radius: var(--radius-md);
    background:
        linear-gradient(180deg, rgba(var(--accent-teal-rgb), 0.025), rgba(255, 255, 255, 0.005)),
        var(--bg-card);
}
.fe-live-empty__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 14px;
}
.fe-live-empty__kicker {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10px;
    font-weight: 700;
    color: var(--accent-teal);
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin-bottom: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.fe-live-empty__check {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.fe-live-empty__body {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0 8px;
}
.fe-live-empty__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(var(--accent-teal-rgb), 0.18), rgba(var(--accent-teal-rgb), 0.04));
    border: 1px solid rgba(var(--accent-teal-rgb), 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--accent-teal-light);
}
.fe-live-empty__title {
    font-family: var(--font-display, 'Sora', 'Inter', sans-serif);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-heading);
    letter-spacing: -0.2px;
    line-height: 1.25;
}
.fe-live-empty__date {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
.fe-live-empty__meta {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--hairline, rgba(255,255,255,0.06));
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10px;
    color: var(--text-dim);
    line-height: 1.55;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    font-weight: 700;
}
.fe-live-empty__meta .sep {
    margin: 0 6px;
    opacity: 0.4;
}
.fe-live-empty--compact {
    padding: 12px 14px;
}
.fe-live-empty--compact .fe-live-empty__head {
    margin-bottom: 4px;
    align-items: center;
}
.fe-live-empty--compact .fe-live-empty__meta {
    margin-top: 6px;
    padding-top: 0;
    border-top: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .fe-stage-pill.is-next { animation: none !important; }
    .fe-quick-tile:hover .fe-quick-tile__icon { transform: none !important; }
    .fe-quick-tile:hover { transform: none !important; }
}

/* ─────────────────────────────────────────────────────────────────
   v3.11.0 — Living Canvas
   Combat palette, particle field, cursor spotlight, film grain,
   hot-streak halo, octagon spin. Every effect respects
   prefers-reduced-motion and falls off cleanly on touch.
   ───────────────────────────────────────────────────────────────── */

/* ── Combat palette ── */
:root {
    --accent-blood: #b91c1c;            /* deep cardinal — KO/finish moments */
    --accent-blood-light: #dc2626;
    --accent-blood-glow: rgba(185, 28, 28, 0.28);
    --accent-canvas: #d4b88c;           /* mat sand — texture accents */
    --accent-canvas-soft: rgba(212, 184, 140, 0.10);
    --accent-belt: #fbbf24;             /* championship gold */
    --accent-belt-light: #fcd34d;
    --accent-belt-glow: rgba(251, 191, 36, 0.32);
    --accent-corner-blue: #1e6fd9;      /* UFC blue corner */
    --accent-corner-blue-light: #3b82f6;
}
[data-theme="light"] {
    --accent-blood: #991b1b;
    --accent-blood-light: #b91c1c;
    --accent-belt: #d97706;
    --accent-belt-light: #f59e0b;
    --accent-corner-blue: #1d4ed8;
    --accent-corner-blue-light: #2563eb;
}

/* KO method badge — switch to blood cardinal (was orange).
   Kept the orange chip as fallback for non-method contexts. */
.method-badge--ko {
    background: linear-gradient(135deg, rgba(185, 28, 28, 0.26), rgba(185, 28, 28, 0.08)) !important;
    color: #fca5a5 !important;
    border-color: rgba(185, 28, 28, 0.40) !important;
    box-shadow: 0 0 14px var(--accent-blood-glow) !important;
}

/* Champion chip — gold metallic, used for ranked-champion fighters,
   pound-for-pound rankings, legendary streaks. */
.fe-champ-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--accent-belt-light), var(--accent-belt), color-mix(in srgb, var(--accent-belt) 75%, #000));
    color: #2a1d05;
    border: 1px solid color-mix(in srgb, var(--accent-belt) 65%, #000);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.32) inset,
        0 4px 14px var(--accent-belt-glow);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.22);
    line-height: 1.2;
    white-space: nowrap;
}
.fe-champ-chip::before {
    content: "\1F451"; /* crown emoji */
    font-size: 11px;
    text-shadow: none;
    margin-right: 1px;
    filter: saturate(1.2);
}

/* Blue-corner accent — utility class for fighter B columns where the
   site already uses red-light for fighter A. Use this anywhere the
   mat-side identity matters. */
.fe-corner-blue { color: var(--accent-corner-blue-light) !important; }
.fe-corner-blue-bg {
    background:
        linear-gradient(135deg, rgba(30, 111, 217, 0.18), rgba(30, 111, 217, 0.04));
    border-color: rgba(30, 111, 217, 0.30);
}
.fe-corner-red { color: var(--accent-red-light) !important; }
.fe-corner-red-bg {
    background:
        linear-gradient(135deg, rgba(var(--accent-red-rgb), 0.18), rgba(var(--accent-red-rgb), 0.04));
    border-color: rgba(var(--accent-red-rgb), 0.30);
}

/* ── Particle canvas + cursor spotlight stage ── */
#fe-particles,
#fe-spotlight {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}
/* Texture, not foreground: at 0.62 the constellation competed with the
   numeric panels it sits behind (premium-vs-gimmick audit). */
#fe-particles {
    opacity: 0.35;
    mix-blend-mode: screen;
}
#fe-spotlight {
    z-index: 2;
    background:
        radial-gradient(420px circle at var(--fe-spot-x, 50%) var(--fe-spot-y, 50%),
            rgba(var(--accent-teal-rgb), 0.08),
            rgba(var(--accent-teal-rgb), 0.02) 35%,
            transparent 70%);
    mix-blend-mode: screen;
    transition: opacity var(--motion-natural, 320ms) var(--ease-apple-soft, cubic-bezier(0.4,0,0.2,1));
    opacity: 1;
    will-change: background;
}
[data-theme="light"] #fe-particles {
    opacity: 0.28;
    mix-blend-mode: multiply;
}
[data-theme="light"] #fe-spotlight {
    background:
        radial-gradient(420px circle at var(--fe-spot-x, 50%) var(--fe-spot-y, 50%),
            rgba(var(--accent-teal-rgb), 0.08),
            rgba(var(--accent-teal-rgb), 0.02) 35%,
            transparent 70%);
    mix-blend-mode: multiply;
}

/* Layout siblings need to sit above the canvas/spotlight. */
.layout,
.fe-disclaimer-bar,
.mobile-header,
.sidebar-backdrop {
    position: relative;
    z-index: 3;
}
.sidebar { z-index: 100; }      /* keep prior contract */
.mobile-header { z-index: 200; }
.sidebar-backdrop.active { z-index: 99; }
.fe-disclaimer-bar { z-index: 99; }
#fe-toast-stack { z-index: 100020; }
#fe-loading-bar { z-index: 99999; }

/* Pause the canvas in print + when a modal-class element is open */
@media print {
    #fe-particles, #fe-spotlight { display: none !important; }
}

/* ── Film grain — subtle SVG noise on premium hero surfaces.
   Inline data-URI keeps it cache-friendly and avoids a static
   asset request. 2% opacity only — easy to overlook, lifts the
   surface materially. ── */
.fe-premium-hero,
.fe-auth-card,
.fe-pricing-hero,
.fe-tail-shell {
    position: relative;
}
.fe-premium-hero::after,
.fe-auth-card::after,
.fe-pricing-hero::after,
.fe-tail-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.22;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
    background-size: 200px 200px;
    mix-blend-mode: overlay;
    border-radius: inherit;
}
.fe-premium-hero > *,
.fe-auth-card > *,
.fe-pricing-hero > *,
.fe-tail-shell > * {
    position: relative;
    z-index: 1;
}
[data-theme="light"] .fe-premium-hero::after,
[data-theme="light"] .fe-auth-card::after,
[data-theme="light"] .fe-pricing-hero::after,
[data-theme="light"] .fe-tail-shell::after {
    opacity: 0.10;
    mix-blend-mode: multiply;
}

/* ── Hot-streak heat halo — when streak ≥ 7, pulse the chip. ── */
.fe-streak-chip.fe-streak-chip--hot {
    background: linear-gradient(135deg, rgba(var(--accent-red-rgb), 0.20), rgba(var(--accent-orange-rgb), 0.08));
    border-color: rgba(var(--accent-orange-rgb), 0.42);
    color: #fbbf77;
    box-shadow:
        0 0 16px rgba(var(--accent-orange-rgb), 0.30),
        0 0 0 0 rgba(var(--accent-orange-rgb), 0.45);
    animation: fe-streak-heat 3.2s var(--ease-apple-soft, cubic-bezier(0.4,0,0.2,1)) infinite;
}
.fe-streak-chip.fe-streak-chip--blaze {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.30), rgba(var(--accent-orange-rgb), 0.16));
    border-color: rgba(220, 38, 38, 0.50);
    color: #fde68a;
    box-shadow:
        0 0 22px rgba(220, 38, 38, 0.40),
        0 0 0 0 rgba(220, 38, 38, 0.55);
    animation: fe-streak-blaze 2.6s var(--ease-apple-soft, cubic-bezier(0.4,0,0.2,1)) infinite;
}
@keyframes fe-streak-heat {
    0%, 100% { box-shadow: 0 0 16px rgba(var(--accent-orange-rgb), 0.30), 0 0 0 0 rgba(var(--accent-orange-rgb), 0); }
    50%      { box-shadow: 0 0 22px rgba(var(--accent-orange-rgb), 0.45), 0 0 0 6px rgba(var(--accent-orange-rgb), 0); }
}
@keyframes fe-streak-blaze {
    0%, 100% { box-shadow: 0 0 22px rgba(220, 38, 38, 0.40), 0 0 0 0 rgba(220, 38, 38, 0); transform: scale(1); }
    50%      { box-shadow: 0 0 30px rgba(220, 38, 38, 0.62), 0 0 0 8px rgba(220, 38, 38, 0); transform: scale(1.02); }
}

/* ── Octagon glyph spin on click ── */
.fe-wordmark__glyph.fe-spinning {
    animation: fe-glyph-spin 720ms var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1)) forwards;
}
@keyframes fe-glyph-spin {
    0%   { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(180deg) scale(1.18); filter: drop-shadow(0 0 24px rgba(var(--accent-teal-rgb), 0.85)); }
    100% { transform: rotate(360deg) scale(1); }
}

/* ── Reduced motion / touch overrides ── */
@media (prefers-reduced-motion: reduce) {
    #fe-particles,
    #fe-spotlight { display: none !important; }
    .fe-streak-chip--hot,
    .fe-streak-chip--blaze { animation: none !important; }
    .fe-wordmark__glyph.fe-spinning { animation: none !important; }
}
@media (hover: none) {
    /* On touch devices, no spotlight (no real cursor). Keep particles
       though — they look great drifting with no interaction. */
    #fe-spotlight { display: none !important; }
    #fe-particles { opacity: 0.42; }
}

/* ─────────────────────────────────────────────────────────────────
   v3.12.0 — Operations Console
   Right-rail widgets, hero stat dominance, sparklines, cmd-K
   palette, live ET clock, focus mode. All gated, all defensive.
   ───────────────────────────────────────────────────────────────── */

/* ── Dashboard wrap — main column + right ops rail ── */
body:has(.fe-dashboard-page) .main-content {
    max-width: 1500px;
}
.fe-dashboard-page {
    width: 100%;
}
.dashboard-shell-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}
@media (min-width: 1480px) {
    .dashboard-shell-wrap {
        grid-template-columns: minmax(0, 1fr) 340px;
    }
}
.dashboard-main-col { min-width: 0; }

/* ── Right ops rail ── */
.fe-ops-rail {
    display: none;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 24px;
    align-self: start;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding-right: 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-teal-rgb), 0.20) transparent;
}
.fe-ops-rail::-webkit-scrollbar { width: 5px; }
.fe-ops-rail::-webkit-scrollbar-track { background: transparent; }
.fe-ops-rail::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-teal-rgb), 0.22);
    border-radius: 999px;
}
@media (min-width: 1480px) {
    .fe-ops-rail { display: flex; }
}

.fe-ops-card {
    padding: 14px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--hairline, rgba(255,255,255,0.06));
    background: linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0.004)), var(--bg-card);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.035) inset, 0 14px 32px rgba(0, 0, 0, 0.18);
    position: relative;
    overflow: hidden;
}
.fe-ops-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 14px;
    right: 14px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-teal-rgb), 0.28), transparent);
    opacity: 0.6;
}
.fe-ops-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--hairline, rgba(255,255,255,0.06));
}
.fe-ops-card__icon {
    font-size: 13px;
    line-height: 1;
}
.fe-ops-card__title {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--accent-teal);
    text-transform: uppercase;
    letter-spacing: 1.4px;
}
.fe-ops-card__sub {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 9.5px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-left: auto;
    font-weight: 700;
}

/* Live ticker rows */
.fe-ticker-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fe-ticker-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px dashed var(--hairline, rgba(255,255,255,0.06));
    font-size: 12.5px;
    line-height: 1.4;
}
.fe-ticker-item:last-child { border-bottom: 0; }
.fe-ticker-item__dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-top: 6px;
    background: var(--accent-teal);
    box-shadow: 0 0 6px rgba(var(--accent-teal-rgb), 0.55);
}
.fe-ticker-item__dot--blue { background: var(--accent-blue); box-shadow: 0 0 6px rgba(var(--accent-blue-rgb), 0.55); }
.fe-ticker-item__dot--green { background: var(--accent-green); box-shadow: 0 0 6px rgba(var(--accent-green-rgb), 0.55); }
.fe-ticker-item__dot--amber { background: var(--accent-pro-light, var(--accent-yellow)); box-shadow: 0 0 6px var(--accent-pro-glow, rgba(244,209,128,0.4)); }
.fe-ticker-item__line {
    color: var(--text-heading);
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: -0.05px;
}
.fe-ticker-item__meta {
    color: var(--text-dim);
    font-size: 11px;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
.fe-ticker-item__line a,
.fe-ticker-item__meta a {
    color: var(--accent-teal);
    text-decoration: none;
    font-weight: 700;
}
.fe-ticker-item__line a:hover { color: var(--accent-teal-light); }

/* Compact metric row inside ops cards */
.fe-ops-metric {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    font-size: 12.5px;
    color: var(--text-secondary);
    border-bottom: 1px dashed var(--hairline, rgba(255,255,255,0.06));
}
.fe-ops-metric:last-child { border-bottom: 0; }
.fe-ops-metric__label { color: var(--text-muted); }
.fe-ops-metric__val {
    font-family: var(--font-display, 'Sora', 'Inter', sans-serif);
    font-weight: 800;
    color: var(--text-heading);
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum","lnum";
    letter-spacing: -0.2px;
}
.fe-ops-metric__val--pos { color: var(--accent-green); }
.fe-ops-metric__val--neg { color: var(--accent-red-light); }
.fe-ops-metric__val--teal { color: var(--accent-teal-light); }

/* Ops empty state */
.fe-ops-empty {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.55;
    padding: 6px 0 2px;
}
.fe-ops-empty-cta {
    display: inline-block;
    margin-top: 8px;
    color: var(--accent-teal);
    text-decoration: none;
    font-weight: 700;
    font-size: 12px;
}
.fe-ops-empty-cta:hover { color: var(--accent-teal-light); }

/* Mini countdown progress bar inside ops card */
.fe-ops-progress {
    height: 4px;
    background: var(--bg-bar);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 10px;
    position: relative;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset;
}
.fe-ops-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-teal), var(--accent-teal-light));
    box-shadow: 0 0 8px rgba(var(--accent-teal-rgb), 0.45);
    border-radius: 999px;
    transition: width 0.6s var(--ease-apple, cubic-bezier(0.32,0.72,0,1));
}

/* ── Hero stat dominance — Walk-Forward Accuracy is THE number ── */
.stat-card.fe-stat-card--hero {
    grid-column: span 1;
    background:
        radial-gradient(circle at 50% 0%, rgba(var(--accent-teal-rgb), 0.10), transparent 50%),
        linear-gradient(180deg, rgba(var(--accent-teal-rgb), 0.06), rgba(255, 255, 255, 0.012)),
        var(--surface-quiet);
    border-color: rgba(var(--accent-teal-rgb), 0.22);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
                0 18px 48px rgba(0, 0, 0, 0.22),
                0 0 0 1px rgba(var(--accent-teal-rgb), 0.08);
}
.stat-card.fe-stat-card--hero::before {
    background: linear-gradient(90deg, transparent, rgba(var(--accent-teal-rgb), 0.55), transparent);
    opacity: 0.95;
    height: 2px;
}
.stat-card.fe-stat-card--hero .value {
    font-size: 38px !important;
    letter-spacing: -1.4px;
    background: linear-gradient(135deg, var(--accent-teal-light) 0%, var(--accent-teal) 50%, var(--accent-teal-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 28px rgba(var(--accent-teal-rgb), 0.30);
}
.stat-card.fe-stat-card--hero .label {
    color: var(--accent-teal-light) !important;
}
[data-theme="light"] .stat-card.fe-stat-card--hero .value {
    text-shadow: none;
}

/* ── Inline sparkline — small SVG trend line at the bottom of stat cards ── */
.fe-sparkline {
    display: block;
    margin: 10px auto 0;
    width: 100%;
    max-width: 92px;
    height: 18px;
    overflow: visible;
}
.fe-sparkline__line {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.85;
    filter: drop-shadow(0 0 4px currentColor);
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: fe-sparkline-draw 1.2s var(--ease-apple, cubic-bezier(0.32,0.72,0,1)) 0.3s forwards;
}
.fe-sparkline__area {
    fill: currentColor;
    opacity: 0.10;
}
.fe-sparkline__dot {
    fill: currentColor;
    filter: drop-shadow(0 0 4px currentColor);
}
@keyframes fe-sparkline-draw {
    to { stroke-dashoffset: 0; }
}
.stat-card .fe-sparkline { color: var(--accent-teal); }
.stat-card.fe-stat-card--hero .fe-sparkline { color: var(--accent-teal-light); }

.fe-sparkline--placeholder {
    height: 14px;
    background:
        repeating-linear-gradient(90deg, transparent 0 4px, rgba(255,255,255,0.04) 4px 5px);
    border-radius: 2px;
    margin: 12px auto 4px;
    max-width: 80px;
    opacity: 0.55;
}
.fe-sparkline-caption {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 8.5px;
    color: var(--text-dim);
    text-align: center;
    margin-top: 4px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
}

/* ── Live ET clock chip — fixed top-right, doesn't fight the disclaimer bar ── */
.fe-clock-chip {
    position: fixed;
    top: 18px;
    right: 22px;
    z-index: 95;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)),
                rgba(8, 8, 12, 0.88);
    border: 1px solid var(--hairline, rgba(255,255,255,0.08));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.6px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity var(--motion-natural, 320ms) var(--ease-apple, cubic-bezier(0.32,0.72,0,1)),
                transform var(--motion-natural, 320ms) var(--ease-apple, cubic-bezier(0.32,0.72,0,1));
}
.fe-clock-chip.is-ready {
    opacity: 1;
    transform: translateY(0);
}
.fe-clock-chip__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-teal);
    box-shadow: 0 0 6px rgba(var(--accent-teal-rgb), 0.6);
    animation: fe-live-pulse-refined 2.4s var(--ease-apple-soft, cubic-bezier(0.4,0,0.2,1)) infinite;
}
.fe-clock-chip__time {
    color: var(--text-heading);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
.fe-clock-chip__sep {
    color: var(--text-dim);
    opacity: 0.5;
}
.fe-clock-chip__window {
    color: var(--accent-teal-light);
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
@media (max-width: 768px) {
    .fe-clock-chip { display: none; }
}
[data-theme="light"] .fe-clock-chip {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78));
    border-color: rgba(15, 23, 42, 0.10);
    color: var(--text-secondary);
}

/* ── Focus mode — collapse the sidebar, stretch the content ── */
body.fe-focus-mode .sidebar {
    transform: translateX(-100%);
    transition: transform var(--motion-natural, 320ms) var(--ease-apple, cubic-bezier(0.32,0.72,0,1));
}
body.fe-focus-mode .main-content {
    margin-left: 0;
    max-width: 100%;
    transition: margin-left var(--motion-natural, 320ms) var(--ease-apple, cubic-bezier(0.32,0.72,0,1)),
                max-width var(--motion-natural, 320ms) var(--ease-apple, cubic-bezier(0.32,0.72,0,1));
}
body.fe-focus-mode .fe-disclaimer-bar { left: 0; }
.fe-focus-pill {
    position: fixed;
    bottom: 36px;
    left: 22px;
    z-index: 95;
    padding: 6px 12px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(var(--accent-teal-rgb), 0.16), rgba(var(--accent-teal-rgb), 0.05)),
                rgba(8, 8, 12, 0.92);
    border: 1px solid rgba(var(--accent-teal-rgb), 0.32);
    backdrop-filter: blur(14px);
    color: var(--accent-teal-light);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    box-shadow: 0 6px 22px rgba(var(--accent-teal-rgb), 0.18);
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--motion-quick, 180ms) var(--ease-apple, cubic-bezier(0.32,0.72,0,1)),
                transform var(--motion-quick, 180ms) var(--ease-apple, cubic-bezier(0.32,0.72,0,1));
    pointer-events: none;
}
body.fe-focus-mode .fe-focus-pill {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.fe-focus-pill:hover { background: linear-gradient(180deg, rgba(var(--accent-teal-rgb), 0.22), rgba(var(--accent-teal-rgb), 0.08)), rgba(8, 8, 12, 0.94); }

/* ── Cmd-K command palette ── */
.fe-cmdk-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99000;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 14vh;
    opacity: 0;
    transition: opacity var(--motion-quick, 180ms) var(--ease-apple-soft, cubic-bezier(0.4,0,0.2,1));
}
.fe-cmdk-backdrop.is-open {
    display: flex;
    opacity: 1;
}
.fe-cmdk {
    width: min(620px, calc(100vw - 32px));
    max-height: 64vh;
    border-radius: var(--radius-lg);
    border: 1px solid var(--hairline-strong, rgba(255,255,255,0.10));
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)), rgba(12, 13, 17, 0.98);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset,
                0 28px 80px rgba(0, 0, 0, 0.55),
                0 0 0 1px rgba(var(--accent-teal-rgb), 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.96) translateY(-8px);
    opacity: 0;
    transition: transform var(--motion-natural, 320ms) var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1)),
                opacity var(--motion-quick, 180ms) var(--ease-apple, cubic-bezier(0.32,0.72,0,1));
}
.fe-cmdk-backdrop.is-open .fe-cmdk {
    transform: scale(1) translateY(0);
    opacity: 1;
}
.fe-cmdk__searchwrap {
    position: relative;
    border-bottom: 1px solid var(--hairline, rgba(255,255,255,0.06));
}
.fe-cmdk__icon {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: var(--accent-teal);
    font-size: 16px;
    pointer-events: none;
}
.fe-cmdk__input {
    width: 100%;
    padding: 18px 60px 18px 52px;
    border: 0;
    background: transparent;
    color: var(--text-heading);
    font-family: var(--font-display, 'Sora', 'Inter', sans-serif);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.2px;
    outline: none;
}
.fe-cmdk__input::placeholder { color: var(--text-muted); font-weight: 500; }
.fe-cmdk__hint {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 9.5px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 8px;
    border: 1px solid var(--hairline, rgba(255,255,255,0.06));
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.025);
    pointer-events: none;
}
.fe-cmdk__list {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-teal-rgb), 0.20) transparent;
}
.fe-cmdk__list::-webkit-scrollbar { width: 4px; }
.fe-cmdk__list::-webkit-scrollbar-thumb { background: rgba(var(--accent-teal-rgb), 0.22); border-radius: 999px; }
.fe-cmdk__group-label {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 9.5px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1.4px;
    padding: 12px 14px 6px;
    font-weight: 700;
}
.fe-cmdk__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 13.5px;
    cursor: pointer;
    transition: background var(--motion-instant, 80ms) var(--ease-apple-soft, cubic-bezier(0.4,0,0.2,1)),
                color var(--motion-instant, 80ms) var(--ease-apple-soft, cubic-bezier(0.4,0,0.2,1));
}
.fe-cmdk__row.is-active,
.fe-cmdk__row:hover {
    background: linear-gradient(90deg, rgba(var(--accent-teal-rgb), 0.12), rgba(var(--accent-teal-rgb), 0.02));
    color: var(--text-heading);
}
.fe-cmdk__row-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(var(--accent-teal-rgb), 0.10);
    border: 1px solid rgba(var(--accent-teal-rgb), 0.18);
    color: var(--accent-teal-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}
.fe-cmdk__row-text { flex: 1; min-width: 0; }
.fe-cmdk__row-label {
    font-family: var(--font-display, 'Sora', 'Inter', sans-serif);
    font-weight: 700;
    color: var(--text-heading);
    font-size: 13.5px;
    letter-spacing: -0.1px;
}
.fe-cmdk__row-sub {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 2px;
}
.fe-cmdk__row-shortcut {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 0.6px;
    flex-shrink: 0;
}
.fe-cmdk__footer {
    padding: 10px 16px;
    border-top: 1px solid var(--hairline, rgba(255,255,255,0.06));
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 1px;
    text-transform: uppercase;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}
.fe-cmdk__footer kbd {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--hairline, rgba(255,255,255,0.06));
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 9.5px;
    margin-right: 4px;
    color: var(--text-secondary);
    font-family: inherit;
}
.fe-cmdk__empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .fe-sparkline__line { animation: none !important; stroke-dashoffset: 0 !important; }
    .fe-clock-chip__dot { animation: none !important; }
    .fe-cmdk { transition: none !important; transform: none !important; opacity: 1 !important; }
    body.fe-focus-mode .sidebar,
    body.fe-focus-mode .main-content { transition: none !important; }
}

/* ─────────────────────────────────────────────────────────────────
   v3.12.1 — Living Canvas v2 supporting CSS
   Radial vignette for cinematic corners. Pure CSS, fixed,
   pointer-events:none, behind everything (between body bg and
   particle canvas).
   ───────────────────────────────────────────────────────────────── */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 130% 100% at 50% 50%,
            transparent 0%,
            transparent 45%,
            rgba(0, 0, 0, 0.18) 80%,
            rgba(0, 0, 0, 0.42) 100%);
    mix-blend-mode: multiply;
}
[data-theme="light"] body::after {
    background:
        radial-gradient(ellipse 130% 100% at 50% 50%,
            transparent 0%,
            transparent 50%,
            rgba(15, 23, 42, 0.05) 82%,
            rgba(15, 23, 42, 0.10) 100%);
    mix-blend-mode: multiply;
}
@media print {
    body::after { display: none !important; }
}

/* ── Live data pulse — refined ── */
@keyframes fe-live-pulse-refined {
    0%   { box-shadow: 0 0 0 0 rgba(var(--accent-teal-rgb), 0.55); transform: scale(1); }
    50%  { transform: scale(1.06); }
    70%  { box-shadow: 0 0 0 12px rgba(var(--accent-teal-rgb), 0); transform: scale(1); }
    100% { box-shadow: 0 0 0 0 rgba(var(--accent-teal-rgb), 0); transform: scale(1); }
}
.fe-live-dot {
    animation: fe-live-pulse-refined 2.6s var(--ease-apple-soft) infinite;
}

/* ── Reduced motion — kill all the new animations ── */
@media (prefers-reduced-motion: reduce) {
    .main-content,
    .main-content > *,
    .fe-auth-shell,
    .fe-auth-shell--wide > *,
    .fe-stagger > *,
    .fe-magnetic,
    .fe-sidebar-pro-cta,
    .fe-live-dot {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .fe-magnetic:hover { transform: none !important; }
    [data-reveal] .fe-kicker::before,
    [data-reveal] .fe-kicker::after,
    [data-reveal] .section-kicker::before,
    [data-reveal] .section-kicker::after,
    [data-reveal] .fe-page-header__kicker::before {
        transform: scaleX(1) !important;
        transition: none !important;
    }
}

/* v3.15.179 r12 - Phase 3 platform polish */
.fe-responsible-callout {
    margin: 0 0 18px;
    padding: 12px 14px;
    border-left: 3px solid var(--accent-teal);
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, rgba(var(--accent-teal-rgb), 0.055), rgba(var(--accent-teal-rgb), 0.012)), var(--bg-subtle);
    color: var(--text-secondary);
    font-size: 12.5px;
    line-height: 1.6;
}
.fe-responsible-callout strong { color: var(--text-heading); }
.fe-responsible-callout a {
    color: var(--accent-teal);
    font-weight: 700;
    text-decoration: none;
}
.fe-trial-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid rgba(var(--accent-teal-rgb), 0.24);
    border-left: 3px solid var(--accent-teal);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(var(--accent-teal-rgb), 0.08), rgba(var(--accent-blue-rgb), 0.025)), var(--bg-card);
}
.fe-trial-banner__title {
    color: var(--text-heading);
    font-size: 13.5px;
    font-weight: 800;
}
.fe-trial-banner__copy {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.5;
    margin-top: 2px;
}
.fe-trial-banner__dismiss {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-subtle);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}
.fe-reactivation-note {
    margin-bottom: 14px;
    padding: 11px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(244, 209, 128, 0.25);
    background: rgba(244, 209, 128, 0.07);
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.55;
}
.fe-reactivation-note strong { color: var(--accent-pro-light, #f4d180); }
.fe-whatif > summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--accent-teal);
    font-size: 12px;
    font-weight: 700;
    list-style: none;
}
.fe-whatif > summary::-webkit-details-marker { display: none; }
.fe-whatif > summary::after {
    content: "\25B8";
    margin-left: 8px;
    color: var(--text-dim);
    font-size: 10px;
    transition: transform 0.15s ease;
}
.fe-whatif[open] > summary::after { transform: rotate(90deg); }
.fe-profile-jumpnav {
    position: sticky;
    top: 56px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -8px 0 18px;
    padding: 9px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: rgba(12, 13, 17, 0.94);
    box-shadow: var(--shadow-card);
    overflow-x: auto;
}
.fe-profile-jumpnav span {
    flex-shrink: 0;
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.fe-profile-jumpnav a {
    flex-shrink: 0;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}
.fe-profile-jumpnav a:hover,
.fe-profile-jumpnav a.is-active {
    border-color: rgba(var(--accent-teal-rgb), 0.35);
    color: var(--accent-teal-light);
    background: rgba(var(--accent-teal-rgb), 0.08);
}
.fe-profile-section { scroll-margin-top: 104px; }
.fe-profile-section > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    list-style: none;
}
.fe-profile-section > summary::-webkit-details-marker { display: none; }
.fe-profile-section > summary + .card-title { display: none; }
.fe-profile-section > summary::after {
    content: "\25BE";
    margin-left: auto;
    color: var(--text-dim);
    font-size: 11px;
}
.fe-profile-section[open] > summary::after { content: "\25B4"; }
.fe-search-example-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: -34px;
    margin-bottom: 24px;
}
.fe-search-example-row a { text-decoration: none; }
@media (max-width: 768px) {
    .card,
    .stat-card,
    .table-container,
    .trust-table,
    .fe-report-card,
    .fe-action-panel,
    .fe-auth-banner,
    .fe-empty-state,
    thead th {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .card,
    .fe-report-card,
    .fe-action-panel { background: var(--bg-card) !important; }
    .stat-card,
    .table-container,
    .trust-table,
    .fe-empty-state { background: var(--bg-subtle) !important; }
    .fe-profile-jumpnav {
        top: 0;
        margin-top: -4px;
    }
    .fe-profile-section > summary { margin-bottom: 0 !important; }
    .fe-profile-section[open] > summary { margin-bottom: 16px !important; }
    .fe-trial-banner { align-items: flex-start; }
}

/* ROI tracker page components */
.fe-roi-supporting {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.fe-roi-supporting > div {
    padding: 12px 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005)),
                var(--bg-subtle);
    border: 1px solid var(--hairline, rgba(255,255,255,0.06));
    border-radius: var(--radius-sm);
    position: relative;
    overflow: hidden;
}
.fe-roi-supporting > div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12px;
    right: 12px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-teal-rgb), 0.32), transparent);
    opacity: 0.6;
}
.fe-roi-supporting__lbl {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-weight: 700;
}
.fe-roi-supporting__val {
    font-family: var(--font-display, 'Sora', 'Inter', sans-serif);
    font-size: 20px;
    font-weight: 800;
    margin-top: 6px;
    letter-spacing: -0.4px;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum","lnum";
}
.fe-roi-low-data {
    margin: 12px 0 0;
    padding: 12px 14px;
    border: 1px solid rgba(var(--accent-yellow-rgb), 0.22);
    border-radius: var(--radius-sm);
    background: rgba(var(--accent-yellow-rgb), 0.08);
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.45;
}
.fe-roi-low-data strong {
    color: var(--accent-yellow);
}
.fe-roi-empty-cta {
    text-align: center;
    padding: 36px 24px;
    border-left: 3px solid var(--accent-teal);
    margin-bottom: 22px;
    background:
        radial-gradient(circle at 0% 0%, rgba(var(--accent-teal-rgb), 0.06), transparent 50%),
        var(--bg-card);
}
.fe-roi-empty-cta__title {
    color: var(--text-heading);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -0.3px;
    margin-bottom: 6px;
    font-family: var(--font-display, 'Sora', 'Inter', sans-serif);
}
.fe-roi-empty-cta__copy {
    color: var(--text-secondary);
    font-size: 13.5px;
    line-height: 1.65;
    margin-bottom: 18px;
    text-wrap: pretty;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}
.fe-roi-example-watermark {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 5;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--hairline, rgba(255,255,255,0.06));
    color: var(--text-muted);
    font-weight: 700;
}
.fe-roi-odds-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.fe-roi-clv {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 999px;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 9px;
    line-height: 1.2;
    letter-spacing: 0.4px;
    font-weight: 800;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,0.08);
}
.fe-roi-clv--pos {
    color: var(--accent-green);
    background: rgba(74, 222, 128, 0.08);
    border-color: rgba(74, 222, 128, 0.22);
}
.fe-roi-clv--neg {
    color: var(--accent-red);
    background: rgba(var(--accent-red-rgb), 0.08);
    border-color: rgba(var(--accent-red-rgb), 0.22);
}

/* Phase 4 trust and personalization surfaces */
.fe-card-mb-sm { margin-bottom: 16px; }
.fe-card-mb-md { margin-bottom: 20px; }
.fe-card-mb-lg { margin-bottom: 24px; }
.section-title-tight { margin-bottom: 12px; }
.chip-xs { font-size: 10px; }

.fe-paper-notice {
    border-left: 4px solid var(--accent-yellow);
    margin-bottom: 18px;
    background: rgba(var(--accent-yellow-rgb),0.04);
}

.fe-flex-between-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.fe-trust-eyebrow {
    font-size: 13px;
    font-weight: 800;
    color: var(--accent-yellow);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.fe-trust-copy {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 5px;
    line-height: 1.6;
}

.fe-trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap: 12px;
}

.fe-trust-grid--wide { grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); }

.fe-trust-tile {
    padding: 14px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.fe-trust-tile--compact { padding: 12px; }

.fe-trust-tile__title {
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 6px;
}

.fe-trust-tile--compact .fe-trust-tile__title {
    font-weight: 750;
    margin-bottom: 5px;
}

.fe-trust-tile__copy {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
}

.fe-trust-tile--compact .fe-trust-tile__copy { line-height: 1.55; }

.fe-zone-note {
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.55;
    margin-top: 10px;
}

.fe-table-center { text-align: center; }
.fe-table-primary-strong {
    font-weight: 700;
    color: #fff;
}
.fe-table-muted-sm {
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
}
.fe-hit-rate {
    text-align: center;
    font-weight: 800;
}
.fe-hit-rate--strong { color: var(--accent-green); }
.fe-hit-rate--solid { color: var(--accent-teal); }
.fe-hit-rate--muted { color: var(--text-secondary); }

.fe-follow-peer-copy {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.55;
}

.fe-follow-peer-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fe-follow-peer-main { min-width: 0; }
.fe-follow-peer-name {
    display: block;
    color: #fff;
    font-size: 13px;
}
.fe-follow-peer-display {
    display: block;
    color: var(--text-dim);
    font-size: 11px;
}
.fe-follow-peer-score {
    text-align: right;
    white-space: nowrap;
}
.fe-follow-peer-score__accuracy {
    font-size: 12px;
    color: var(--accent-teal);
    font-weight: 800;
}
.fe-follow-peer-score__sample {
    font-size: 10px;
    color: var(--text-dim);
}
.fe-small-peer-note {
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 8px;
}

.fe-unsubscribe-card { max-width: 720px; }
.fe-unsubscribe-copy {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.7;
}
.fe-button-row {
    margin-top: 18px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Phase 5 growth/network surfaces */
.fe-beta-copy {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.55;
}
.fe-beta-copy--spaced { margin-top: 10px; }
.fe-growth-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap: 14px;
}
.fe-growth-card {
    padding: 14px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}
.fe-growth-card__label {
    color: var(--text-dim);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    font-weight: 800;
}
.fe-growth-card__value {
    color: #fff;
    font-size: 24px;
    font-weight: 900;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}
.fe-growth-card__copy {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
    margin-top: 6px;
}
.fe-action-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.fe-action-row--spaced { margin-top: 16px; }
.fe-share-url {
    word-break: break-all;
    color: var(--accent-teal);
    font-size: 13px;
}
.fe-legal-note {
    border-left: 3px solid var(--accent-yellow);
    background: rgba(var(--accent-yellow-rgb),0.05);
}
.fe-legal-note--blue {
    border-left-color: var(--accent-blue);
    background: rgba(var(--accent-blue-rgb),0.05);
}
.fe-trust-metric {
    display: grid;
    grid-template-columns: minmax(140px,1.4fr) repeat(4,minmax(88px,0.7fr));
    gap: 10px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-subtle);
}
.fe-trust-metric:last-child { border-bottom: 0; }
.fe-trust-metric__book {
    color: #fff;
    font-weight: 800;
}
.fe-trust-metric__cell {
    color: var(--text-secondary);
    font-size: 13px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.fe-trust-metric__head {
    color: var(--text-dim);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 800;
}
.fe-parlay-leg {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle);
}
.fe-parlay-leg:last-child { border-bottom: 0; }
.fe-parlay-leg__main {
    color: #fff;
    font-weight: 750;
}
.fe-parlay-leg__meta {
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 3px;
}
.fe-parlay-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle);
}
.fe-parlay-check:last-child { border-bottom: 0; }
.fe-referral-code {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(var(--accent-teal-rgb),0.25);
    background: rgba(var(--accent-teal-rgb),0.08);
    color: var(--accent-teal);
    font-weight: 900;
    letter-spacing: 1.2px;
}
@media (max-width: 760px) {
    .fe-trust-metric {
        grid-template-columns: 1fr 1fr;
    }
    .fe-trust-metric__book {
        grid-column: 1 / -1;
    }
    .fe-trust-metric__cell {
        text-align: left;
    }
}

/* ============================================================
   r51 light-theme rescue block (UI/UX audit 2026-06-10).
   Later rules win at equal specificity, so this block lives at
   the end of the file by design. Dark theme is untouched.
   ============================================================ */

/* Command palette: panel hardcoded a near-black background while its
   text uses theme tokens that flip dark in light mode (unreadable). */
[data-theme="light"] .fe-cmdk {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
                0 28px 80px rgba(15, 23, 42, 0.18),
                0 0 0 1px rgba(var(--accent-teal-rgb), 0.10);
}
[data-theme="light"] .fe-cmdk__hint {
    background: rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.10);
}
[data-theme="light"] .fe-cmdk__footer kbd {
    background: rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.10);
}
[data-theme="light"] .fe-cmdk__row.is-active,
[data-theme="light"] .fe-cmdk__row:hover {
    background: rgba(var(--accent-teal-rgb), 0.08);
}

/* KO/TKO method badge: #fca5a5 text was ~1.7:1 on the pale light-theme
   gradient. --accent-blood is redefined to #991b1b in light theme. */
[data-theme="light"] .method-badge--ko {
    color: var(--accent-blood) !important;
}

/* Admin System Health sticky section nav: dark slab + light-theme
   dark-gray link tokens was ~2:1 contrast, pinned all page. */
[data-theme="light"] .admin-ops-nav {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(15, 23, 42, 0.10);
}
[data-theme="light"] .admin-ops-nav a:hover,
[data-theme="light"] .admin-ops-nav a:focus {
    background: rgba(0, 0, 0, 0.04);
}

/* Mobile unread-notifications dot on the hamburger (audit: zero passive
   notification signal existed on phones — badge was buried in the drawer). */
.hamburger { position: relative; }
.hamburger-dot {
    position: absolute;
    top: 9px;
    right: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-teal);
    box-shadow: 0 0 5px rgba(var(--accent-teal-rgb), 0.6);
}

/* Live-event leaderboard rows: a CLASS so the div[style*="minmax(120px"]
   mobile override net cannot clobber the 5-column alignment on phones
   (audit: rows collapsed to an unlabeled checkerboard on event night). */
.fe-live-lb-row {
    display: grid;
    grid-template-columns: 24px minmax(120px, 1fr) 72px 72px 86px;
    gap: 8px;
    align-items: center;
}
@media (max-width: 480px) {
    .fe-live-lb-row {
        grid-template-columns: 18px minmax(0, 1fr) 44px 52px 60px;
        gap: 6px;
    }
}

/* My Bets Real/Paper ledger switch: proper tap target (was a 17px chip
   on a money-mode control). Exempt from the 480px chip shrink. */
.chip.fe-ledger-switch {
    padding: 8px 14px;
    font-size: 12px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
}
@media (max-width: 480px) {
    .chip.fe-ledger-switch { padding: 8px 14px; font-size: 12px; }
}

/* Dashboard snapshot grid 2-up modifier — replaces the inline style that
   beat the page's own <=480px single-column rule. */
.dashboard-snapshot-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 480px) {
    .dashboard-snapshot-grid--two { grid-template-columns: 1fr; }
}

/* Lock or Fade free-user empty/progress states. */
.lof-zero-value { color: var(--text-dim) !important; }
.lof-stat-note {
    font-size: 9px;
    color: var(--text-dim);
    margin-top: 4px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.lof-progress-status--complete { color: var(--accent-green); }
.lof-progress-status--empty { color: var(--text-dim); }

/* Premium gate static previews: show value without leaking paid data. */
.fe-premium-preview-card {
    background: linear-gradient(135deg, rgba(var(--accent-teal-rgb), 0.08), rgba(255, 255, 255, 0.02));
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 18px;
}
.fe-premium-preview-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.fe-premium-preview-row {
    align-items: center;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    display: flex;
    justify-content: space-between;
    padding: 12px 14px;
}
.fe-premium-preview-title {
    color: var(--text-heading);
    font-size: 13px;
    font-weight: 800;
}
.fe-premium-preview-meta {
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.fe-premium-preview-value {
    color: var(--accent-teal);
    font-size: 18px;
    font-weight: 900;
}

/* Reusable fight-result table cells. Keeps generated report/component markup
   aligned with the app chrome without growing inline-style drift. */
.fe-cell-secondary-center { text-align: center; color: var(--text-secondary); }
.fe-cell-secondary-pad { padding: 5px 8px; color: var(--text-secondary); }
.fe-cell-heading-center-strong { text-align: center; font-weight: 700; color: var(--text-heading); }
.fe-cell-heading-center { text-align: center; font-weight: 600; color: var(--text-heading); }
.fe-cell-dim-center-xs { text-align: center; color: var(--text-dim); font-size: 11px; }