/* ============================================================
   SYNAPSE ARENA — Design System v7 port
   ============================================================ */
:root {
  --ink:           #15171C;
  --ink-deep:      #0F1115;
  --ink-soft:      #1B1E24;
  --card:          #20232A;
  --card-hi:       #282C35;
  --card-edge:     #2D323C;
  --border:        rgba(255,255,255,0.06);
  --border-mid:    rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.16);
  --synapse:       #4F62EE;
  --synapse-deep:  #3849D0;
  --synapse-soft:  rgba(79,98,238,0.14);
  --synapse-glow:  rgba(79,98,238,0.35);
  --iris:          #B5A6FF;
  --iris-soft:     rgba(181,166,255,0.14);
  --profit:        #34D399;
  --profit-soft:   rgba(52,211,153,0.10);
  --loss:          #F25E73;
  --loss-soft:     rgba(242,94,115,0.10);
  --watch:         #F2A93B;
  --watch-soft:    rgba(242,169,59,0.12);
  --gold:          #E5C97B;
  --text:          #ECEAE4;
  --text-dim:      #A6ACB8;
  --text-muted:    #6E7686;
  --text-faint:    #3B414C;
  --font-sans:     'Geist', system-ui, sans-serif;
  --font-mono:     'Geist Mono', ui-monospace, monospace;
  --font-edit:     'Newsreader', Georgia, serif;
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 22px;
  --sh-card: 0 1px 0 rgba(255,255,255,0.03) inset, 0 24px 48px -24px rgba(0,0,0,0.45);
  --sh-deep: 0 40px 100px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.04) inset;
}

/* Model brand colors */
:root {
  --anthropic:  #D4A684;
  --openai:     #74AA9C;
  --google:     #4285F4;
  --deepseek:   #4D6BFE;
  --xai:        #AAAAAA;
  --kimi:       #FF6B35;
  --mistral:    #F06B45;
  --meta:       #0668E1;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--ink);color:var(--text);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;line-height:1.5;font-size:15px;min-height:100vh;overflow-x:hidden}
body{background:radial-gradient(1200px 700px at 90% -10%,rgba(79,98,238,0.07),transparent 65%),radial-gradient(900px 600px at -10% 30%,rgba(181,166,255,0.04),transparent 60%),var(--ink)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:var(--synapse);color:var(--ink)}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-mid);border-radius:8px}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:sticky;top:0;z-index:80;background:rgba(15,17,21,0.82);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid var(--border)}
.nav-inner{max-width:1320px;margin:0 auto;padding:14px 32px;display:flex;align-items:center;gap:28px}
.brand-lockup{display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.brand-lockup svg{width:20px;height:20px;color:var(--synapse)}
.brand-name{font-size:16px;letter-spacing:-0.01em;color:var(--text-dim);font-weight:400}
.brand-name span{color:var(--text);font-weight:500}
.nav-links{display:flex;gap:4px;margin-left:12px}
.nav-links button{background:none;border:none;padding:6px 14px;border-radius:var(--r-sm);font-size:13px;color:var(--text-dim);transition:all .15s}
.nav-links button:hover{color:var(--text);background:var(--card)}
.nav-links button.active{color:var(--text);background:var(--card-hi)}
.nav-spacer{flex:1}
.nav-pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-muted);border:1px solid var(--border-mid);padding:4px 10px;border-radius:999px}
.nav-pill .dot{width:5px;height:5px;border-radius:50%;background:var(--profit);box-shadow:0 0 8px var(--profit);animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.45}}
.btn{font-size:12px;font-weight:500;padding:7px 16px;border-radius:var(--r-md);border:1px solid;transition:all .15s;cursor:pointer}
.btn-primary{background:var(--synapse);color:#fff;border-color:var(--synapse)}
.btn-primary:hover{background:var(--synapse-deep);border-color:var(--synapse-deep)}
.btn-ghost{background:transparent;color:var(--text-dim);border-color:var(--border-mid)}
.btn-ghost:hover{color:var(--text);border-color:var(--border-strong)}
.btn-iris{background:var(--iris-soft);color:var(--iris);border-color:rgba(181,166,255,0.3)}
.btn-iris:hover{background:rgba(181,166,255,0.22)}

/* ============================================================
   LAYOUT
   ============================================================ */
.shell{max-width:1320px;margin:0 auto;padding:0 32px}
.page-layout{display:grid;grid-template-columns:1fr;gap:0}
.section{padding:72px 0;border-top:1px solid var(--border)}
.section:first-child{border-top:none;padding-top:56px}

/* Section divider — visual break between sibling product areas inside
   a single view (e.g. between Synapse Arena and Beat the AI Challenge
   on the main Arena view). The eyebrow label is the boundary marker so
   the user always knows which surface they're on. */
.section-divider{margin:48px 0 24px;padding-top:24px;border-top:1px solid var(--border-mid);position:relative}
.section-eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:0.18em;color:var(--text-muted);text-transform:uppercase}

/* Public Activity Log — every LLM decision streamed from
   arena_decision_log. Rows are clickable to expand the full reasoning
   inline. Action coloring picks up the project's profit/loss/muted
   tokens so BUY reads green, SELL reads red, HOLD reads muted. */
.activity-card .activity-body{max-height:520px;overflow-y:auto}
.activity-row{padding:9px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s}
.activity-row:hover{background:var(--card-hi)}
.activity-row.expanded{background:var(--card-hi)}
.activity-row-main{display:flex;align-items:center;gap:10px;font-size:12px;font-family:var(--font-mono);line-height:1.4}
.activity-time{color:var(--text-muted);min-width:54px;letter-spacing:0.04em}
.activity-bullet{color:var(--text-faint)}
.activity-model{color:var(--text);font-weight:500;min-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.activity-action{font-weight:600;letter-spacing:0.06em;min-width:36px;text-align:center;padding:1px 7px;border-radius:3px;font-size:10.5px}
.activity-action.act-buy{color:var(--profit);background:var(--profit-soft)}
.activity-action.act-sell{color:var(--loss);background:var(--loss-soft)}
.activity-action.act-hold{color:var(--text-muted);background:rgba(255,255,255,0.04)}
.activity-sym{color:var(--text);font-weight:500;min-width:46px}
.activity-conf{color:var(--text-muted);min-width:36px;text-align:right}
.activity-exec{color:var(--text-muted);font-size:11px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.activity-exec.exec-yes{color:var(--profit)}
.activity-exec.exec-no{color:var(--text-muted)}
.activity-caret{color:var(--text-faint);font-size:10px;width:14px;text-align:right}
.activity-reasoning{padding:4px 0 0 64px;font-size:12px;color:var(--text-dim);line-height:1.55;font-style:italic;font-family:var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.activity-reasoning-full{padding:6px 0 2px 64px;font-size:12.5px;color:var(--text-dim);line-height:1.6;font-family:var(--font-sans);white-space:pre-wrap;word-wrap:break-word}

/* ============================================================
   CARDS
   ============================================================ */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-card)}
.card-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px}
.card-head .label{font-size:12px;font-weight:500;color:var(--text-dim);letter-spacing:0.02em;flex:1}
.card-body{padding:20px}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--text-muted);display:inline-flex;align-items:center;gap:12px}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--synapse)}
.eyebrow.iris::before{background:var(--iris)}
.eyebrow.profit::before{background:var(--profit)}
h1.hero-h{font-size:clamp(32px,5vw,64px);line-height:1.04;font-weight:500;letter-spacing:-0.03em;margin:20px 0 16px}
.serif-em{font-family:var(--font-edit);font-style:italic;font-weight:400;color:var(--synapse);letter-spacing:-0.01em}
.sub{color:var(--text-dim);font-size:16px;max-width:680px;line-height:1.6;margin-bottom:32px}

/* ============================================================
   SEAT COUNTER
   ============================================================ */
.seat-counter{background:var(--ink-soft);border:1px solid var(--border-mid);border-radius:var(--r-lg);padding:20px 24px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;overflow:hidden}
.seat-col{padding:0 20px;border-right:1px solid var(--border)}
.seat-col:first-child{padding-left:0}
.seat-col:last-child{border-right:none}
.seat-label{font-family:var(--font-mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:6px}
.seat-label.iris{color:var(--iris)}
.seat-label.synapse{color:var(--synapse)}
.seat-label.profit{color:var(--profit)}
.seat-label.muted{color:var(--text-muted)}
.seat-num{font-size:36px;font-weight:600;letter-spacing:-0.03em;font-variant-numeric:tabular-nums;line-height:1}
.seat-num.iris{color:var(--iris)}
.seat-num.synapse{color:var(--synapse)}
.seat-num.profit{color:var(--profit)}
.seat-num.muted{color:var(--text-faint)}
.seat-of{font-size:14px;color:var(--text-muted);font-weight:400;margin-left:4px}
.seat-status{font-size:12px;color:var(--text-muted);margin-top:4px}
.seat-status.active{color:var(--text-dim)}
.seat-bar-wrap{height:3px;background:var(--card-edge);border-radius:2px;margin-top:10px;overflow:hidden}
.seat-bar{height:100%;border-radius:2px;transition:width .5s ease}
.seat-locked-badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-faint);background:var(--ink);border:1px solid var(--border);border-radius:4px;padding:2px 8px;margin-top:6px}

/* ============================================================
   TIER CARDS
   ============================================================ */
.tier-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:32px}
.tier-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;position:relative;display:flex;flex-direction:column;gap:0;overflow:hidden;transition:border-color .2s}
.tier-card.active{border-color:rgba(181,166,255,0.4);box-shadow:0 0 0 1px rgba(181,166,255,0.15),var(--sh-card)}
.tier-card.active.synapse-active{border-color:rgba(79,98,238,0.5);box-shadow:0 0 0 1px rgba(79,98,238,0.2),var(--sh-card)}
.tier-accent{position:absolute;top:0;left:0;width:3px;height:100%;border-radius:4px 0 0 4px}
.tier-name{font-family:var(--font-mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;margin-bottom:16px;padding-left:10px}
.tier-price-row{display:flex;align-items:baseline;gap:4px;margin-bottom:4px;padding-left:10px}
.tier-price{font-size:38px;font-weight:600;letter-spacing:-0.03em;line-height:1}
.tier-unit{font-size:14px;color:var(--text-dim)}
.tier-duration{font-size:12px;color:var(--text-muted);padding-left:10px;margin-bottom:16px;font-style:italic}
.tier-divider{height:1px;background:var(--border);margin:16px 0}
.tier-remaining-label{font-family:var(--font-mono);font-size:9px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px;padding-left:10px}
.tier-remaining{font-size:20px;font-weight:600;letter-spacing:-0.02em;padding-left:10px;margin-bottom:2px}
.tier-state{font-size:12px;color:var(--text-muted);padding-left:10px;margin-bottom:16px}
.tier-state.active-state{color:var(--text-dim)}
.tier-features{list-style:none;padding-left:10px;display:flex;flex-direction:column;gap:6px;margin-bottom:20px;flex:1}
.tier-features li{font-size:12px;color:var(--text-dim);display:flex;align-items:flex-start;gap:8px}
.tier-features li::before{content:'✓';color:var(--profit);font-size:11px;margin-top:1px;flex-shrink:0}
.tier-features li.locked::before{content:'—';color:var(--text-faint)}
.tier-features li.locked{color:var(--text-faint)}
.tier-cta{margin-top:auto;width:100%;padding:10px;border-radius:var(--r-md);font-size:13px;font-weight:500;border:1px solid;transition:all .15s}
.tier-cta.iris{background:var(--iris-soft);color:var(--iris);border-color:rgba(181,166,255,0.35)}
.tier-cta.iris:hover{background:rgba(181,166,255,0.22)}
.tier-cta.synapse{background:var(--synapse-soft);color:var(--synapse);border-color:var(--synapse-glow)}
.tier-cta.synapse:hover{background:rgba(79,98,238,0.22)}
.tier-cta.locked-cta{background:transparent;color:var(--text-faint);border-color:var(--border);cursor:not-allowed}

/* S-L1 — six-tier grid + founding badge + pulse */
.tier-grid-six{grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
@media (max-width:980px){.tier-grid-six{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.tier-grid-six{grid-template-columns:1fr}}
.tier-founding-badge{display:inline-block;font-family:var(--font-mono);font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:var(--profit);background:rgba(52,211,153,0.10);border:1px solid rgba(52,211,153,0.30);border-radius:var(--r-xs);padding:3px 8px;margin:0 0 10px 10px;align-self:flex-start}
@keyframes seat-pulse{0%,100%{opacity:1}50%{opacity:0.55}}
.seat-pulse{animation:seat-pulse 1.6s ease-in-out infinite}

/* Legal disclaimer strip */
.disclaimer{background:var(--ink-soft);border:1px solid rgba(242,169,59,0.25);border-radius:var(--r-md);padding:12px 16px;display:flex;gap:12px;align-items:flex-start;margin-top:16px}
.disclaimer svg{flex-shrink:0;color:var(--watch);margin-top:1px}
.disclaimer p{font-size:12px;color:var(--text-dim);line-height:1.5;font-style:italic}

/* ============================================================
   LEADERBOARD
   ============================================================ */
/* Session 7a: collapsed the pre-7a 2-column arena-layout (1fr 340px)
   to a single-column flow. The right-rail's selectedModel panel +
   "Click a model row" stub were removed; Market Pulse moved into a
   new below-chart-row; the BYOK run-form stays in the same DOM
   position but now spans the full width as the last section. */
.arena-layout{display:block;align-items:start}
.lb-table{width:100%;border-collapse:collapse}
.lb-table th{font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-muted);padding:10px 14px;text-align:left;border-bottom:1px solid var(--border)}
.lb-table th.right{text-align:right}
.lb-table td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle;font-size:13px}
.lb-table tr:last-child td{border-bottom:none}
.lb-table tr{transition:background .12s;cursor:pointer}
.lb-table tr:hover td{background:rgba(255,255,255,0.02)}
.lb-table tr.selected td{background:var(--synapse-soft)}
.lb-rank{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);width:32px}
.lb-model-cell{display:flex;align-items:center;gap:10px}
.model-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.model-name{font-weight:500;color:var(--text)}
.model-provider{font-size:11px;color:var(--text-muted);font-family:var(--font-mono)}
.lb-num{font-family:var(--font-mono);font-size:12px;font-variant-numeric:tabular-nums;text-align:right}
.lb-num.profit{color:var(--profit)}
.lb-num.loss{color:var(--loss)}
.lb-num.muted{color:var(--text-muted)}

/* Equity chart SVG */
.chart-area{background:var(--ink-deep);border-radius:var(--r-md);overflow:hidden;position:relative}
.chart-svg{display:block;width:100%}
.chart-labels{display:flex;justify-content:space-between;padding:6px 12px;font-family:var(--font-mono);font-size:10px;color:var(--text-muted)}

/* Period tabs */
.period-tabs{display:flex;gap:2px}
.period-tab{background:none;border:none;padding:4px 8px;border-radius:var(--r-xs);font-family:var(--font-mono);font-size:10px;color:var(--text-muted);cursor:pointer;transition:all .15s;letter-spacing:0.08em}
.period-tab:hover{color:var(--text-dim)}
.period-tab.on{color:var(--text);background:var(--card-hi)}

/* Market Pulse */
.pulse-table{width:100%;border-collapse:collapse}
.pulse-table th{font-family:var(--font-mono);font-size:9px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-muted);padding:8px 10px;text-align:left;border-bottom:1px solid var(--border)}
.pulse-table td{padding:8px 10px;border-bottom:1px solid var(--border);font-size:12px;font-family:var(--font-mono);vertical-align:middle}
.pulse-table tr:last-child td{border-bottom:none}
.pulse-kind{display:inline-block;padding:1px 7px;border-radius:3px;font-size:10px;text-transform:uppercase;letter-spacing:0.1em}
.pulse-kind.price{background:var(--synapse-soft);color:var(--synapse)}
.pulse-kind.volume{background:var(--iris-soft);color:var(--iris)}
.pulse-dir.up{color:var(--profit);font-weight:600}
.pulse-dir.down{color:var(--loss);font-weight:600}
.pulse-mag{color:var(--text-dim);text-align:right}

/* ============================================================
   ONBOARDING WIZARD  (matches Trade screenshots exactly)
   ============================================================ */
.wizard-overlay{position:fixed;inset:0;background:rgba(10,11,14,0.85);backdrop-filter:blur(6px);z-index:200;display:flex;align-items:center;justify-content:center;padding:24px}
.wizard-shell{background:var(--ink-soft);border:1px solid var(--border-mid);border-radius:var(--r-xl);width:100%;max-width:720px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh-deep)}
.wizard-header{padding:16px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.wizard-brand{display:flex;align-items:center;gap:8px}
.wizard-brand svg{width:16px;height:16px;color:var(--synapse)}
.wizard-brand-label{font-size:14px;color:var(--text-dim)}
.wizard-brand-label b{color:var(--text)}
.wizard-close{background:none;border:none;color:var(--text-muted);font-size:18px;line-height:1;cursor:pointer;padding:4px 8px;border-radius:var(--r-sm);transition:all .15s}
.wizard-close:hover{background:var(--card-hi);color:var(--text)}

/* Step bar — top stepper identical to Trade onboarding */
.step-bar{padding:16px 24px 0;background:var(--ink)}
.step-bar-inner{display:flex;justify-content:center;gap:6px}
.step-item{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;min-width:64px}
.step-circle{width:32px;height:32px;border-radius:50%;border:2px solid var(--border-mid);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--text-muted);transition:all .2s;background:var(--ink)}
.step-circle.done{background:var(--synapse);border-color:var(--synapse);color:#fff}
.step-circle.active{background:var(--card-hi);border-color:var(--synapse);color:var(--text)}
.step-label{font-size:10px;color:var(--text-muted);text-align:center;line-height:1.2;white-space:nowrap;font-family:var(--font-mono);letter-spacing:0.04em}
.step-label.active{color:var(--text-dim)}
.step-label.done{color:var(--synapse)}

/* Wizard body */
.wizard-body{flex:1;overflow-y:auto;padding:28px 32px}
.wizard-step-title{font-size:22px;font-weight:500;letter-spacing:-0.02em;margin-bottom:6px}
.wizard-step-sub{font-size:13px;color:var(--text-dim);margin-bottom:24px;line-height:1.5}

/* Field components */
.field{margin-bottom:16px}
.field-label{font-size:11px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;display:block}
.input{background:var(--ink);border:1px solid var(--border-mid);border-radius:var(--r-md);padding:10px 14px;color:var(--text);font-family:var(--font-sans);font-size:13px;width:100%;transition:border .15s,box-shadow .15s}
.input:focus{outline:none;border-color:var(--synapse);box-shadow:0 0 0 3px var(--synapse-soft)}
.input-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
select.input{cursor:pointer}
select.input option{background:var(--card)}

/* OTP input */
.otp-wrap{display:flex;gap:10px;margin-top:8px}
.otp-digit{width:52px;height:56px;border-radius:var(--r-md);border:1px solid var(--border-mid);background:var(--ink);color:var(--text);font-size:24px;font-family:var(--font-mono);font-weight:600;text-align:center;transition:border .15s}
.otp-digit:focus{outline:none;border-color:var(--synapse);box-shadow:0 0 0 3px var(--synapse-soft)}

/* Email verified badge */
.verified-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(52,211,153,0.12);border:1px solid rgba(52,211,153,0.25);border-radius:var(--r-sm);padding:5px 12px;font-size:12px;color:var(--profit);font-family:var(--font-mono)}

/* Harness notice (like Trade dev mode) */
.harness-notice{background:var(--synapse-soft);border:1px solid rgba(79,98,238,0.3);border-radius:var(--r-md);padding:12px 14px;margin:12px 0}
.harness-notice .label{font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--synapse);margin-bottom:4px}
.harness-notice p{font-size:12px;color:var(--text-dim)}

/* Tier selector in onboarding */
.tier-select-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.tier-select-card{border:1px solid var(--border-mid);border-radius:var(--r-lg);padding:20px;cursor:pointer;transition:all .15s;background:var(--ink);position:relative;overflow:hidden}
.tier-select-card:hover{border-color:var(--border-strong)}
.tier-select-card.selected.iris{border-color:rgba(181,166,255,0.5);background:var(--iris-soft);box-shadow:0 0 0 1px rgba(181,166,255,0.2)}
.tier-select-card.selected.synapse{border-color:var(--synapse-glow);background:var(--synapse-soft);box-shadow:0 0 0 1px var(--synapse-soft)}
.tier-select-card .sold-out{position:absolute;top:10px;right:10px;font-family:var(--font-mono);font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-faint);background:var(--card-edge);border-radius:3px;padding:2px 6px}
.tier-select-name{font-family:var(--font-mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:10px}
.tier-select-name.iris{color:var(--iris)}
.tier-select-name.synapse{color:var(--synapse)}
.tier-select-price{font-size:28px;font-weight:600;letter-spacing:-0.03em;margin-bottom:2px}
.tier-select-unit{font-size:12px;color:var(--text-dim)}
.tier-select-features{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:5px}
.tier-select-features li{font-size:11px;color:var(--text-dim);display:flex;align-items:center;gap:6px}
.tier-select-features li::before{content:'✓';color:var(--profit);font-size:10px;flex-shrink:0}

/* Sign-up wizard step-1 plan cards (local_otp_admin signup). Compact
   click-to-select selector built from the SAME tier tokens as the
   .tier-select-card / pricing cards — no new palette. Selected card gets
   the synapse-glow highlight the pricing "active" card already uses.
   3-col at modal width; stacks to 1-col on narrow viewports. */
.wizard-plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
.wizard-plan-card{text-align:left;display:flex;flex-direction:column;gap:4px;background:var(--ink);border:1px solid var(--border-mid);border-radius:var(--r-md);padding:12px 11px;cursor:pointer;transition:all .15s;font-family:inherit;color:inherit}
.wizard-plan-card:hover{border-color:var(--border-strong)}
.wizard-plan-card.is-selected{border-color:var(--synapse-glow);background:var(--synapse-soft);box-shadow:0 0 0 1px var(--synapse-soft)}
.wizard-plan-card .wpc-name{font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text)}
.wizard-plan-card .wpc-state{font-family:var(--font-mono);font-size:8.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-faint)}
.wizard-plan-card .wpc-price{font-size:18px;font-weight:600;letter-spacing:-0.02em;color:var(--text)}
.wizard-plan-card .wpc-period{font-size:11px;font-weight:400;color:var(--text-dim);margin-left:2px}
.wizard-plan-card .wpc-bullets{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:3px}
.wizard-plan-card .wpc-bullets li{font-size:10.5px;color:var(--text-dim);line-height:1.35;display:flex;gap:5px}
.wizard-plan-card .wpc-bullets li::before{content:'✓';color:var(--profit);font-size:9px;flex-shrink:0}
@media (max-width:520px){.wizard-plan-grid{grid-template-columns:1fr}}

/* Payment section */
.payment-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)}
.payment-row:last-child{border-bottom:none}
.payment-total{font-size:18px;font-weight:600;color:var(--text)}
.stripe-badge{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-muted)}
.card-field-row{display:grid;grid-template-columns:1fr 80px 80px;gap:8px}

/* Doc acknowledgment rows (like Trade ADV + AI Disclosure) */
.doc-row{background:var(--ink);border:1px solid var(--border-mid);border-radius:var(--r-md);padding:14px 16px;display:flex;align-items:center;gap:14px;margin-bottom:10px}
.doc-info{flex:1}
.doc-title{font-size:13px;font-weight:500;color:var(--text);margin-bottom:2px}
.doc-sub{font-size:11px;color:var(--text-muted)}
.doc-actions{display:flex;gap:8px;align-items:center}
.doc-toggle{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-muted)}
.toggle-track{width:38px;height:22px;border-radius:11px;background:var(--card-edge);border:1px solid var(--border-mid);position:relative;cursor:pointer;transition:all .2s;flex-shrink:0}
.toggle-track::before{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--text-dim);transition:all .2s}
.toggle-on .toggle-track{background:var(--synapse);border-color:var(--synapse)}
.toggle-on .toggle-track::before{left:18px;background:#fff}

/* E-signature block */
.esig-block{background:var(--ink);border:1px solid var(--border-mid);border-radius:var(--r-md);padding:14px 16px;margin:16px 0}
.esig-consent{font-size:12px;color:var(--text-dim);line-height:1.6;margin-top:10px}
.esig-checkbox{display:flex;gap:10px;align-items:flex-start;margin-top:12px;cursor:pointer}
.esig-checkbox input{margin-top:2px;accent-color:var(--synapse)}
.esig-label{font-size:12px;color:var(--text-dim);line-height:1.5}

/* Profile section (review page) */
.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.profile-row{display:flex;flex-direction:column;gap:2px}
.profile-key{font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted)}
.profile-val{font-size:13px;color:var(--text)}
.profile-edit{font-size:11px;color:var(--synapse);cursor:pointer;margin-left:8px}

/* Wizard footer */
.wizard-footer{padding:16px 32px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--ink)}
.footer-hint{font-size:11px;color:var(--text-muted);font-family:var(--font-mono);font-size:10px;letter-spacing:0.06em}

/* ============================================================
   WELCOME / SUCCESS
   ============================================================ */
.welcome-card{text-align:center;padding:40px 24px}
.badge-display{display:inline-flex;align-items:center;justify-content:center;margin:0 auto 20px;padding:12px 24px;border-radius:var(--r-lg);font-family:var(--font-mono);font-size:14px;letter-spacing:0.14em;font-weight:600;text-transform:uppercase}
.badge-display.genesis{background:var(--iris-soft);border:1px solid rgba(181,166,255,0.4);color:var(--iris)}
.badge-display.founder{background:var(--synapse-soft);border:1px solid var(--synapse-glow);color:var(--synapse)}
.badge-display.early{background:rgba(52,211,153,0.1);border:1px solid rgba(52,211,153,0.3);color:var(--profit)}

/* ============================================================
   SIDEBAR PANELS (right rail)
   ============================================================ */
.right-rail{display:flex;flex-direction:column;gap:12px}

/* Mini stats row above leaderboard */
.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.stat-mini{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 14px}
.stat-mini .lab{font-family:var(--font-mono);font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px}
.stat-mini .val{font-size:18px;font-weight:600;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.stat-mini .val.profit{color:var(--profit)}
.stat-mini .val.dim{color:var(--text)}

/* Model detail side panel */
.model-panel{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.model-panel-head{padding:16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.model-panel-dot{width:12px;height:12px;border-radius:50%}
.model-panel-info{}
.model-panel-name{font-size:15px;font-weight:500;color:var(--text)}
.model-panel-sub{font-size:11px;color:var(--text-muted);font-family:var(--font-mono)}
.model-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.model-stat{padding:12px 14px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.model-stat:nth-child(2n){border-right:none}
.model-stat:nth-last-child(-n+2){border-bottom:none}
.model-stat .k{font-family:var(--font-mono);font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px}
.model-stat .v{font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-0.01em}
.model-stat .v.profit{color:var(--profit)}
.model-stat .v.loss{color:var(--loss)}

/* Create run form */
.run-form{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px}
.run-form-title{font-size:13px;font-weight:500;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.run-form-title svg{color:var(--synapse);width:15px;height:15px}
.run-form-note{font-size:11px;color:var(--text-muted);margin-top:8px;font-style:italic}
.locked-overlay{text-align:center;padding:24px 16px}
.locked-overlay svg{color:var(--text-faint);margin:0 auto 10px;display:block}
.locked-overlay p{font-size:12px;color:var(--text-muted);margin-bottom:12px}

/* ============================================================
   MEMBER DASHBOARD
   ============================================================ */
.dash-layout{display:grid;grid-template-columns:240px 1fr;min-height:calc(100vh - 57px)}
.dash-sidebar{background:var(--ink-deep);border-right:1px solid var(--border);padding:20px 0}
.dash-nav-section{padding:0 12px;margin-bottom:4px}
.dash-nav-section-label{font-family:var(--font-mono);font-size:9px;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-faint);padding:8px 12px}
.dash-nav-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--r-sm);font-size:13px;color:var(--text-dim);cursor:pointer;transition:all .15s;margin-bottom:1px}
.dash-nav-item svg{width:15px;height:15px;flex-shrink:0}
.dash-nav-item:hover{background:var(--card);color:var(--text)}
.dash-nav-item.on{background:var(--card-hi);color:var(--text)}
.dash-nav-item.on::before{content:'';position:absolute;left:12px;width:2px;height:20px;background:var(--synapse);border-radius:2px}
.dash-nav-item{position:relative}
.dash-main{padding:32px}
.member-hero{display:flex;align-items:center;gap:20px;margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--border)}
.member-avatar{width:56px;height:56px;border-radius:50%;background:var(--synapse);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:600;color:#fff;flex-shrink:0}
.member-info{}
.member-name{font-size:20px;font-weight:500;letter-spacing:-0.02em;margin-bottom:4px}
.member-badge-row{display:flex;align-items:center;gap:10px}
.member-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:4px;font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;font-weight:600}
.member-badge.genesis{background:var(--iris-soft);border:1px solid rgba(181,166,255,0.35);color:var(--iris)}
.member-badge.founder{background:var(--synapse-soft);border:1px solid var(--synapse-glow);color:var(--synapse)}
.member-since{font-size:12px;color:var(--text-muted)}
.dash-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}
.dash-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px}
.dash-card .label{font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
.dash-card .value{font-size:26px;font-weight:600;letter-spacing:-0.03em;margin-bottom:4px}
.dash-card .sub{font-size:12px;color:var(--text-muted)}

/* ============================================================
   LANDING HERO
   ============================================================ */
.hero-section{padding:80px 0 56px;text-align:center}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--iris-soft);border:1px solid rgba(181,166,255,0.25);border-radius:999px;padding:5px 14px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;color:var(--iris);text-transform:uppercase;margin-bottom:24px}
.hero-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--iris);box-shadow:0 0 8px var(--iris)}
.hero-h{font-size:clamp(36px,6vw,72px);line-height:1.02;font-weight:500;letter-spacing:-0.035em;max-width:900px;margin:0 auto 20px}
.hero-sub{font-size:17px;color:var(--text-dim);max-width:600px;margin:0 auto 40px;line-height:1.6}
.hero-ctas{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:56px}
.hero-cta-primary{background:var(--synapse);color:#fff;border:none;padding:13px 28px;border-radius:var(--r-md);font-size:15px;font-weight:500;cursor:pointer;transition:all .15s}
.hero-cta-primary:hover{background:var(--synapse-deep)}
.hero-cta-ghost{background:transparent;color:var(--text-dim);border:1px solid var(--border-mid);padding:13px 24px;border-radius:var(--r-md);font-size:15px;cursor:pointer;transition:all .15s}
.hero-cta-ghost:hover{color:var(--text);border-color:var(--border-strong)}

/* Mini preview of leaderboard above the fold */
.lb-preview{max-width:900px;margin:0 auto;background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,0.4)}
.lb-preview-header{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.lb-preview-dot{width:12px;height:12px;border-radius:50%;background:var(--profit);box-shadow:0 0 8px var(--profit);animation:pulse 1.6s infinite}
.lb-preview-label{font-family:var(--font-mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted)}
.lb-preview-count{font-family:var(--font-mono);font-size:11px;color:var(--synapse);margin-left:auto}

/* Model provider color dots */
.dot-anthropic{background:var(--anthropic)}
.dot-openai{background:var(--openai)}
.dot-google{background:var(--google)}
.dot-deepseek{background:var(--deepseek)}
.dot-xai{background:var(--xai)}
.dot-kimi{background:var(--kimi)}
.dot-mistral{background:var(--mistral)}
.dot-meta{background:var(--meta)}
.dot-human{background:#F5C842;box-shadow:0 0 6px rgba(245,200,66,0.5)}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{border-top:1px solid var(--border);padding:32px;text-align:center;font-size:12px;color:var(--text-muted);font-family:var(--font-mono);letter-spacing:0.06em}
.site-footer a{color:var(--text-muted);transition:color .15s}
.site-footer a:hover{color:var(--text-dim)}

/* ============================================================
   UTILITIES
   ============================================================ */
.flex{display:flex}.items-center{align-items:center}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.flex-1{flex:1}
.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mb-4{margin-bottom:4px}.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}
.text-right{text-align:right}.text-center{text-align:center}
.mono{font-family:var(--font-mono)}.text-muted{color:var(--text-muted)}.text-dim{color:var(--text-dim)}
.text-profit{color:var(--profit)}.text-loss{color:var(--loss)}.text-synapse{color:var(--synapse)}.text-iris{color:var(--iris)}
.hidden{display:none!important}

/* Responsive */
@media(max-width:900px){
  .nav-inner{padding:12px 16px}
  .shell{padding:0 16px}
  .tier-grid{grid-template-columns:1fr 1fr}
  .arena-layout{grid-template-columns:1fr}
  .stats-strip{grid-template-columns:repeat(2,1fr)}
  .hero-h{font-size:clamp(28px,7vw,48px)}
  .input-row{grid-template-columns:1fr}
  .tier-select-grid{grid-template-columns:1fr}
}
/* ============================================================
   v2 ADDITIONS — Models, Methodology, Settings
   ============================================================ */

/* Status strip used above grids */
.status-strip{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);letter-spacing:0.1em;margin-bottom:24px;text-transform:uppercase}
.status-strip b{color:var(--text)}
.status-strip .live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--profit);margin:0 4px 1px 0;box-shadow:0 0 6px var(--profit);animation:pulse 1.6s infinite}
.status-strip .idle-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--text-faint);margin:0 4px 1px 0}

/* Section header with eyebrow + h2 + sub */
.page-head{margin-bottom:32px}
.page-head h2{font-size:32px;font-weight:500;letter-spacing:-0.025em;margin:8px 0 12px;line-height:1.1}
.page-head p.lead{font-size:15px;color:var(--text-dim);max-width:680px;line-height:1.6;margin:0}

/* ============================================================
   MODELS PAGE
   ============================================================ */

/* Provider filter pills */
.provider-filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:24px}
.provider-pill{background:transparent;border:1px solid var(--border);color:var(--text-muted);padding:6px 14px;border-radius:999px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.06em;cursor:pointer;transition:all .15s;text-transform:uppercase}
.provider-pill:hover{border-color:var(--border-strong);color:var(--text-dim)}
.provider-pill.active{background:var(--card-hi);border-color:var(--border-strong);color:var(--text)}
.provider-pill .pill-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px;vertical-align:middle}

/* Models grid */
.models-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:48px}
.model-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;transition:border-color .15s,transform .15s;cursor:pointer;position:relative;overflow:hidden}
.model-card:hover{border-color:var(--border-strong);transform:translateY(-1px)}
.model-card-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px}
.model-card-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:5px}
.model-card-title{font-size:15px;font-weight:500;color:var(--text);letter-spacing:-0.01em}
.model-card-id{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);margin-top:2px}
.model-card-arch{font-family:var(--font-mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-dim);margin:12px 0 14px;padding:4px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.model-card-spark{height:32px;margin-bottom:12px;display:block;width:100%}
.model-card-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* Session 6: model-card operator-key status pill. One per provider's
   live state from operator_key_status. Pulled into the card's flex
   header next to the colored provider dot. */
.model-status-pill{
  padding:3px 8px;
  border-radius:3px;
  font-size:10px;
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-weight:500;
  margin-left:auto;
  margin-top:3px;
  flex-shrink:0;
  align-self:flex-start;
}
.model-status-pill.status-live{
  background:var(--profit-soft, rgba(0,200,83,0.15));
  color:var(--profit, #00C853);
}
.model-status-pill.status-degraded{
  background:rgba(255,180,0,0.15);
  color:#FFB400;
}
.model-status-pill.status-invalid{
  background:var(--loss-soft, rgba(255,59,48,0.15));
  color:var(--loss, #FF3B30);
}
.model-status-pill.status-unknown{
  background:var(--card-hi);
  color:var(--text-muted);
}
.model-stat-cell{display:flex;flex-direction:column;gap:2px}
.model-stat-cell .k{font-family:var(--font-mono);font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted)}
.model-stat-cell .v{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-0.01em}
.model-stat-cell .v.profit{color:var(--profit)}
.model-stat-cell .v.loss{color:var(--loss)}
.model-stat-cell .v.muted{color:var(--text-faint)}

/* BYOK API Keys section */
.byok-section{margin-top:48px;padding-top:48px;border-top:1px solid var(--border)}
.byok-table{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.byok-row{display:grid;grid-template-columns:200px 120px 1fr 100px 140px;gap:16px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border);transition:background .12s}
.byok-row:last-child{border-bottom:none}
.byok-row:hover{background:rgba(255,255,255,0.015)}
.byok-row.head{background:var(--ink-deep);font-family:var(--font-mono);font-size:9px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-muted);padding:10px 18px}
.byok-provider{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500;color:var(--text)}
.byok-provider .dot{width:9px;height:9px;border-radius:50%}
.byok-status{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-family:var(--font-mono);letter-spacing:0.06em;text-transform:uppercase}
.byok-status.connected{color:var(--profit)}
.byok-status.connected::before{content:'●';color:var(--profit)}
.byok-status.disconnected{color:var(--text-faint)}
.byok-status.disconnected::before{content:'○';color:var(--text-faint)}
.byok-status.invalid{color:var(--loss)}
.byok-status.invalid::before{content:'✕';color:var(--loss)}
.byok-key-display{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);letter-spacing:0.02em}
.byok-key-display.empty{color:var(--text-faint);font-style:italic}
.byok-meta{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);text-align:right}
.byok-actions{display:flex;gap:6px;justify-content:flex-end}
.byok-actions button{font-size:11px;padding:5px 10px;border-radius:var(--r-sm);border:1px solid;cursor:pointer;font-family:inherit;transition:all .15s}
.byok-action-add{background:var(--synapse-soft);color:var(--synapse);border-color:var(--synapse-glow)}
.byok-action-add:hover{background:rgba(79,98,238,.22)}
.byok-action-test{background:transparent;color:var(--text-dim);border-color:var(--border-mid)}
.byok-action-test:hover{color:var(--text);border-color:var(--border-strong)}
.byok-action-remove{background:transparent;color:var(--loss);border-color:rgba(242,94,115,.3)}
.byok-action-remove:hover{background:var(--loss-soft)}

/* API key entry modal */
.byok-modal-backdrop{position:fixed;inset:0;background:rgba(10,11,14,0.85);backdrop-filter:blur(6px);z-index:300;display:flex;align-items:center;justify-content:center;padding:24px}
.byok-modal{background:var(--ink-soft);border:1px solid var(--border-mid);border-radius:var(--r-xl);width:100%;max-width:520px;padding:28px;box-shadow:var(--sh-deep)}
.byok-modal h3{font-size:18px;font-weight:500;letter-spacing:-0.01em;margin-bottom:6px}
.byok-modal-sub{font-size:12px;color:var(--text-dim);margin-bottom:20px;line-height:1.5}
.byok-modal-key{font-family:var(--font-mono)}
.byok-modal-help{background:var(--ink);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 14px;margin-top:14px;font-size:11px;color:var(--text-muted);line-height:1.6}
.byok-modal-help code{color:var(--synapse);font-family:var(--font-mono);font-size:11px}
.byok-modal-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}

/* Custom model CTA */
.custom-model-cta{margin-top:32px;background:linear-gradient(135deg,var(--card),var(--card-hi));border:1px solid var(--border);border-radius:var(--r-lg);padding:32px;text-align:center;position:relative;overflow:hidden}
.custom-model-cta::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--iris),transparent)}
.custom-model-cta h3{font-size:20px;font-weight:500;margin-bottom:8px;letter-spacing:-0.01em}
.custom-model-cta p{font-size:13px;color:var(--text-dim);max-width:520px;margin:0 auto 20px;line-height:1.6}

/* ============================================================
   METHODOLOGY PAGE
   ============================================================ */

.methodology-shell{max-width:740px;margin:0 auto;padding:48px 32px}
.methodology-shell h2{font-size:42px;font-weight:500;letter-spacing:-0.03em;line-height:1.05;margin:8px 0 16px}
.methodology-shell .lead{font-size:18px;color:var(--text-dim);line-height:1.55;margin-bottom:48px;font-family:var(--font-edit);font-style:italic}
.methodology-section{margin-bottom:48px}
.methodology-section h3{font-size:13px;font-weight:600;font-family:var(--font-mono);letter-spacing:0.16em;text-transform:uppercase;color:var(--synapse);margin-bottom:18px;display:flex;align-items:baseline;gap:14px}
.methodology-section h3 .num{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);font-weight:400}
.methodology-section h3 .title{color:var(--text);font-family:var(--font-sans);font-size:22px;font-weight:500;text-transform:none;letter-spacing:-0.02em}
.methodology-section .body{font-family:var(--font-edit);font-size:17px;line-height:1.7;color:var(--text);max-width:660px}
.methodology-section .body p{margin-bottom:16px}
.methodology-section .body p:last-child{margin-bottom:0}
.methodology-section .body em{color:var(--iris);font-style:italic}
.methodology-section .body strong{color:var(--text);font-weight:600;background:var(--synapse-soft);padding:0 4px;border-radius:3px}
.methodology-section .body code{font-family:var(--font-mono);font-size:14px;background:var(--ink);padding:1px 6px;border-radius:4px;color:var(--synapse)}

/* Cycle diagram */
.cycle-diagram{margin:24px 0;background:var(--ink-deep);border:1px solid var(--border);border-radius:var(--r-md);padding:24px;display:flex;flex-direction:column;gap:14px}
.cycle-step{display:flex;align-items:center;gap:14px;font-family:var(--font-mono);font-size:12px}
.cycle-step .step-num{width:24px;height:24px;border-radius:50%;background:var(--synapse-soft);color:var(--synapse);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:11px;flex-shrink:0}
.cycle-step .step-name{font-weight:600;color:var(--text);width:120px}
.cycle-step .step-desc{color:var(--text-muted);font-family:var(--font-sans);font-size:12px;font-style:italic}

/* Risk caps callout */
.risk-callout{background:var(--ink-deep);border:1px solid rgba(242,169,59,.3);border-radius:var(--r-md);padding:20px 24px;margin:20px 0}
.risk-callout-head{font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--watch);margin-bottom:12px}
.risk-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 32px}
.risk-line{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--font-mono);font-size:13px;padding:6px 0;border-bottom:1px dashed var(--border)}
.risk-line:last-child{border-bottom:none}
.risk-line .lab{color:var(--text-dim)}
.risk-line .val{color:var(--watch);font-weight:600}

.methodology-foot{margin-top:64px;padding-top:32px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.methodology-foot .stamp{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);letter-spacing:0.08em;font-style:italic}
.methodology-foot a.cta{font-size:14px;color:var(--synapse);font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:color .15s}
.methodology-foot a.cta:hover{color:var(--text)}

/* ============================================================
   SETTINGS PAGE
   ============================================================ */

.settings-layout{display:grid;grid-template-columns:240px 1fr;min-height:calc(100vh - 57px)}
.settings-sidebar{background:var(--ink-deep);border-right:1px solid var(--border);padding:24px 0}
.settings-section-label{font-family:var(--font-mono);font-size:9px;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-faint);padding:0 24px 8px}
.settings-nav-item{display:flex;align-items:center;gap:10px;padding:9px 24px;font-size:13px;color:var(--text-dim);cursor:pointer;transition:all .12s;border-left:2px solid transparent}
.settings-nav-item:hover{background:var(--card);color:var(--text)}
.settings-nav-item.on{background:var(--card-hi);color:var(--text);border-left-color:var(--synapse)}
.settings-nav-item svg{width:14px;height:14px;flex-shrink:0;opacity:0.8}
.settings-nav-item.danger{color:var(--loss)}
.settings-nav-item.danger.on{color:var(--loss);border-left-color:var(--loss)}

.settings-main{padding:32px 40px;max-width:840px}
.settings-section-head{margin-bottom:24px}
.settings-section-head h2{font-size:24px;font-weight:500;letter-spacing:-0.02em;margin-bottom:6px}
.settings-section-head p{font-size:13px;color:var(--text-dim);line-height:1.5}

.settings-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 24px;margin-bottom:14px}
.settings-card-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px}
.settings-card-head h3{font-size:14px;font-weight:500;letter-spacing:-0.01em;color:var(--text);margin-bottom:2px}
.settings-card-head .desc{font-size:12px;color:var(--text-muted);line-height:1.5}

.settings-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);gap:16px}
.settings-row:last-child{border-bottom:none}
.settings-row-label{font-size:13px;color:var(--text);min-width:140px}
.settings-row-sub{font-size:11px;color:var(--text-muted);margin-top:2px}
.settings-row-control{flex-shrink:0}

/* Risk management hard caps display */
.risk-hard-caps{background:var(--ink-deep);border:1px solid rgba(242,169,59,.25);border-radius:var(--r-md);padding:18px 20px;margin-bottom:20px}
.risk-hard-caps-head{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.risk-hard-caps-head .lock{color:var(--watch)}
.risk-hard-caps-head .label{font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--watch)}
.risk-hard-caps-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 24px}
.risk-cap-item{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;border-bottom:1px dashed var(--border)}
.risk-cap-item:last-child,.risk-cap-item:nth-last-child(2){border-bottom:none}
.risk-cap-item .lab{font-size:12px;color:var(--text-dim)}
.risk-cap-item .val{font-family:var(--font-mono);font-size:13px;color:var(--watch);font-weight:600}

/* User preference sliders */
.pref-slider-wrap{display:flex;align-items:center;gap:12px;flex:1}
.pref-slider{flex:1;height:4px;border-radius:2px;background:var(--ink);appearance:none;cursor:pointer;outline:none}
.pref-slider::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;background:var(--synapse);cursor:pointer;border:2px solid var(--ink-soft);box-shadow:0 0 0 1px var(--synapse-glow)}
.pref-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--synapse);cursor:pointer;border:2px solid var(--ink-soft)}
.pref-value{font-family:var(--font-mono);font-size:13px;color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;min-width:48px;text-align:right}
.pref-disabled{opacity:0.4;pointer-events:none}

/* Data export panel */
.export-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.export-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column}
.export-card-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.export-card-head svg{width:18px;height:18px;color:var(--synapse)}
.export-card-head h4{font-size:14px;font-weight:500;color:var(--text)}
.export-card .desc{font-size:12px;color:var(--text-dim);line-height:1.5;margin-bottom:14px;flex:1}
.export-meta{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);margin-bottom:14px;letter-spacing:0.04em}
.export-filter-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.export-filter-row .input{font-size:12px;padding:7px 10px}
.export-cta{align-self:flex-start;padding:8px 14px;border-radius:var(--r-md);background:var(--synapse-soft);color:var(--synapse);border:1px solid var(--synapse-glow);font-size:12px;font-weight:500;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:6px}
.export-cta:hover{background:rgba(79,98,238,.22)}
.export-cta svg{width:13px;height:13px}

/* Notification toggles row */
.notif-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border)}
.notif-toggle-row:last-child{border-bottom:none}
.notif-toggle-info{flex:1}
.notif-toggle-info .name{font-size:13px;color:var(--text);margin-bottom:2px}
.notif-toggle-info .desc{font-size:11px;color:var(--text-muted)}

/* Danger zone */
.danger-card{background:var(--card);border:1px solid rgba(242,94,115,.25);border-radius:var(--r-lg);padding:20px 24px;margin-bottom:14px}
.danger-card h4{font-size:13px;color:var(--loss);font-weight:500;margin-bottom:6px}
.danger-card .desc{font-size:12px;color:var(--text-dim);line-height:1.5;margin-bottom:14px}
.btn-danger{background:transparent;color:var(--loss);border:1px solid rgba(242,94,115,.4);padding:7px 14px;border-radius:var(--r-md);font-size:12px;cursor:pointer;font-family:inherit;transition:all .15s}
.btn-danger:hover{background:var(--loss-soft);border-color:var(--loss)}

/* Toast notification (for actions like CSV download) */
.toast-stack{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;gap:8px;z-index:500;pointer-events:none}
.toast{background:var(--card-hi);border:1px solid var(--border-strong);border-radius:var(--r-md);padding:12px 16px;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text);box-shadow:var(--sh-deep);min-width:280px;animation:toast-in .25s ease-out;pointer-events:auto}
.toast.profit{border-left:3px solid var(--profit)}
.toast.synapse{border-left:3px solid var(--synapse)}
.toast.loss{border-left:3px solid var(--loss)}
.toast .toast-icon{width:16px;height:16px;flex-shrink:0}
.toast .toast-icon.profit{color:var(--profit)}
.toast .toast-icon.synapse{color:var(--synapse)}
.toast .toast-msg{flex:1}
.toast .toast-sub{font-size:11px;color:var(--text-muted);margin-top:2px}
@keyframes toast-in{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}

/* Session 9 — Google Sign-In button + "or" divider on wizard Step 0 */
.google-signin-btn{width:100%;padding:11px 16px;border-radius:var(--r-md);border:1px solid var(--border-mid);background:var(--card);color:var(--text);font-size:14px;font-weight:500;font-family:var(--font-sans);display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;transition:all .15s}
.google-signin-btn:hover{background:var(--card-hi);border-color:var(--border-strong)}
.google-signin-btn:active{background:var(--card-edge)}
.oauth-divider{display:flex;align-items:center;gap:12px;margin:16px 0 0;color:var(--text-muted);font-size:12px;font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
.oauth-divider::before,.oauth-divider::after{content:'';flex:1;height:1px;background:var(--border)}

@media(max-width:900px){
  .models-grid{grid-template-columns:1fr 1fr}
  .byok-row{grid-template-columns:1fr 1fr;gap:8px}
  .byok-row.head{display:none}
  .settings-layout{grid-template-columns:1fr}
  .settings-sidebar{display:none}
  .export-grid{grid-template-columns:1fr}
  .risk-hard-caps-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .models-grid{grid-template-columns:1fr}
  .methodology-shell{padding:32px 16px}
  .methodology-shell h2{font-size:32px}
}

/* ── Session 13-A: guest timer + utility classes ─────────────────── */

.guest-timer{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:12px;color:var(--text-dim);
  background:var(--card);border:1px solid var(--border-mid);
  border-radius:var(--r-sm);padding:4px 10px;
  margin-left:12px;transition:all .2s ease;
}
.guest-timer.urgent{
  color:var(--watch,#F2A93B);
  border-color:rgba(242,169,59,0.3);
  background:rgba(242,169,59,0.06);
}

/* Tiny inline link button — used in upgrade prompts + overlay copy
   where a plain anchor wouldn't carry Alpine click handlers. */
.btn-link{
  background:none;border:none;padding:0;
  color:var(--synapse);font-size:inherit;font-family:inherit;
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;
}
.btn-link:hover{color:var(--iris)}

/* Compact button variant used in the nav + leaderboard upgrade prompt. */
.btn-sm{padding:6px 14px;font-size:13px}

/* ── Session 11: legal pages (Terms + Privacy) ───────────────────── */

.legal-wrap{
  max-width:740px;margin:0 auto;padding:48px 24px 80px;
}
.legal-back{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:12px;color:var(--text-muted);
  letter-spacing:0.04em;cursor:pointer;margin-bottom:40px;
  background:none;border:none;padding:0;transition:color .15s;
}
.legal-back:hover{color:var(--text)}

.legal-kicker{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--synapse);margin-bottom:10px;
}
.legal-title{
  font-size:28px;font-weight:600;color:var(--text);
  line-height:1.25;margin-bottom:8px;
}
.legal-meta{
  font-family:var(--font-mono);font-size:12px;color:var(--text-muted);
  margin-bottom:36px;display:flex;gap:20px;flex-wrap:wrap;
}

.legal-notice{
  padding:16px 20px;border-radius:var(--r-md);margin-bottom:32px;
  font-size:13px;line-height:1.65;color:var(--text-dim);
}
.legal-notice.info{
  background:var(--synapse-soft);border-left:3px solid var(--synapse);
}
.legal-notice.warning{
  background:var(--watch-soft);border-left:3px solid var(--watch);
  color:var(--text);
}
.legal-notice strong{color:var(--text)}

.legal-toc{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-md);padding:20px 24px;margin-bottom:40px;
}
.legal-toc-title{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:12px;
}
.legal-toc ol{
  margin:0;padding-left:20px;display:grid;
  grid-template-columns:1fr 1fr;gap:4px 24px;
}
.legal-toc li{font-size:13px;color:var(--text-muted);line-height:1.6}

.legal-section{margin-bottom:40px}

.legal-h2{
  font-family:var(--font-sans);font-size:15px;font-weight:600;color:var(--text);
  padding-bottom:10px;border-bottom:1px solid var(--border);
  margin-bottom:16px;margin-top:0;
}
.legal-h3{
  font-family:var(--font-sans);font-size:13px;font-weight:600;color:var(--text);
  margin:20px 0 8px;
}

.legal-body{
  font-family:var(--font-edit);font-size:15px;color:var(--text-dim);
  line-height:1.8;margin-bottom:12px;
}
.legal-body strong{color:var(--text);font-weight:600}

.legal-list{
  font-family:var(--font-edit);font-size:15px;color:var(--text-dim);
  line-height:1.75;padding-left:22px;margin-bottom:12px;
}
.legal-list li{margin-bottom:4px}
.legal-alpha{list-style-type:lower-alpha}

.legal-table{
  width:100%;border-collapse:collapse;font-size:13px;margin-bottom:16px;
}
.legal-table th{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--text-muted);text-align:left;
  padding:8px 12px;border-bottom:1px solid var(--border-mid);
}
.legal-table td{
  font-family:var(--font-sans);font-size:13px;color:var(--text-dim);
  padding:10px 12px;border-bottom:1px solid var(--border);
  vertical-align:top;line-height:1.55;
}
.legal-table tr:last-child td{border-bottom:none}

.legal-divider{
  border:none;border-top:1px solid var(--border);margin:40px 0;
}

.legal-footer-strip{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.06em;
  color:var(--text-faint);text-align:center;padding-top:32px;
  border-top:1px solid var(--border);line-height:1.8;
}

@media(max-width:600px){
  .legal-wrap{padding:32px 18px 60px}
  .legal-title{font-size:22px}
  .legal-toc ol{grid-template-columns:1fr}
}


/* Session 15: Beat the AI trading challenge */
.field-input{
  background:var(--ink);border:1px solid var(--border-mid);
  border-radius:var(--r-md);padding:10px 14px;color:var(--text);
  font-family:var(--font-sans);font-size:13px;width:100%;
  transition:border .15s,box-shadow .15s;
}
.field-input:focus{
  outline:none;border-color:var(--synapse);
  box-shadow:0 0 0 3px var(--synapse-soft);
}
.beat-form{
  background:var(--ink-soft);border:1px solid var(--border-mid);
  border-radius:var(--r-lg);padding:24px;
}
.beat-form-title{font-size:16px;font-weight:600;margin-bottom:4px}
.beat-form-sub{font-size:13px;color:var(--text-dim);margin-bottom:20px}
.pick-btns{display:flex;gap:8px}
.pick-btn{
  flex:1;padding:10px;border-radius:var(--r-md);
  border:1px solid var(--border-mid);background:transparent;cursor:pointer;
  font-family:var(--font-mono);font-size:12px;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--text-muted);transition:all .15s;
}
.pick-btn:hover{border-color:var(--border-strong);color:var(--text)}
.pick-btn.home-pick.on{
  background:var(--profit-soft);border-color:rgba(52,211,153,0.4);
  color:var(--profit);
}
.pick-btn.draw-pick.on{
  background:var(--synapse-soft);border-color:var(--synapse-glow);
  color:var(--synapse);
}
.pick-btn.away-pick.on{
  background:var(--loss-soft);border-color:rgba(242,94,115,0.35);
  color:var(--loss);
}
.pitch-lb-row{
  display:grid;align-items:center;gap:10px;padding:8px 14px;
  border-bottom:1px solid var(--border);font-size:13px;
}
.pitch-lb-row.header{
  font-family:var(--font-mono);font-size:10px;
  letter-spacing:0.1em;text-transform:uppercase;
  color:var(--text-muted);padding:10px 14px;
}
.pitch-rank{
  font-family:var(--font-mono);font-size:12px;font-weight:600;
  text-align:center;color:var(--text-muted);
}
.pitch-rank.gold{color:#FFC857}
.pitch-rank.silver{color:#C0C0C0}
.pitch-rank.bronze{color:#CD7F32}


/* ──────────────────────────────────────────────────────────────
   Session 16: Synapse Pitch (FIFA 2026 prediction benchmark)
   ────────────────────────────────────────────────────────────── */
.pitch-hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(52,211,153,0.1);
  border:1px solid rgba(52,211,153,0.25);
  border-radius:999px;padding:5px 14px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;
  color:var(--profit);text-transform:uppercase;
}
.pitch-badge-dot{
  width:6px;height:6px;border-radius:50%;background:var(--profit);
  box-shadow:0 0 8px var(--profit);animation:pulse 1.6s infinite;
}
.match-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;transition:border-color .2s;
}
.match-card:hover{border-color:var(--border-mid)}
.match-card-head{
  padding:12px 16px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:8px;background:var(--ink-soft);
}
.match-status-live{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--loss);background:var(--loss-soft);
  border:1px solid rgba(242,94,115,0.25);border-radius:3px;padding:2px 8px;
}
.match-status-live::before{
  content:'';width:5px;height:5px;border-radius:50%;
  background:var(--loss);display:inline-block;animation:pulse 1s infinite;
}
.match-status-upcoming{
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--text-muted);
  background:var(--card-hi);border-radius:3px;padding:2px 8px;
}
.match-status-done{
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--profit);background:var(--profit-soft);
  border-radius:3px;padding:2px 8px;
}
.match-teams{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;
}
.match-team{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  min-width:80px;
}
.match-flag{font-size:32px;line-height:1}
.match-team-name{font-size:12px;font-weight:500;color:var(--text);text-align:center}
.match-score{
  font-size:32px;font-weight:600;letter-spacing:-0.03em;color:var(--text);
  font-variant-numeric:tabular-nums;text-align:center;min-width:60px;
}
.match-score.upcoming{font-size:18px;color:var(--text-muted);font-weight:400}
.match-minute{
  font-family:var(--font-mono);font-size:11px;color:var(--loss);
  letter-spacing:0.1em;text-align:center;margin-top:2px;
}
.prob-bar{
  height:6px;background:var(--card-edge);border-radius:3px;
  overflow:hidden;display:flex;gap:1px;margin:0 20px 16px;
}
.prob-seg{height:100%;transition:width .5s ease}
.prob-labels{
  display:flex;justify-content:space-between;padding:0 20px 12px;
  font-family:var(--font-mono);font-size:10px;color:var(--text-muted);
}
.llm-pred-row{
  display:flex;align-items:center;gap:10px;padding:8px 16px;
  border-top:1px solid var(--border);font-size:12px;
}
.llm-pred-row:hover{background:rgba(255,255,255,0.015)}
.pred-model-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.pred-model-name{flex:1;font-size:12px;color:var(--text-dim)}
.pred-pick{font-family:var(--font-mono);font-size:11px;font-weight:600}
.pred-pick.home{color:var(--profit)}
.pred-pick.draw{color:var(--text-muted)}
.pred-pick.away{color:var(--loss)}
.pred-conf{
  font-family:var(--font-mono);font-size:10px;color:var(--text-faint);
  min-width:32px;text-align:right;
}
.pred-reasoning{
  font-size:11px;color:var(--text-muted);font-style:italic;
  line-height:1.4;padding:8px 16px 10px;border-top:1px solid var(--border);
}

/* Synapse Pitch — FIFA-style group header + matchday divider */
.pitch-group{display:flex;align-items:center;gap:12px;margin:26px 0 14px}
.pitch-group:first-child{margin-top:6px}
.pitch-group-title{
  font-size:12px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--text-muted);margin:0;white-space:nowrap;
}
.pitch-group-line{flex:1;height:1px;background:var(--border)}
.pitch-group-md{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.06em;
  color:var(--text-faint);white-space:nowrap;
}

/* Live-card emphasis + in-play note */
.match-card-live{border-color:rgba(242,94,115,0.35)}
.match-live-note{
  padding:0 20px 14px;font-family:var(--font-mono);font-size:11px;
  color:var(--text-muted);text-align:center;
}

/* FINAL: per-model results table (pick + ✓/✗) */
.match-models{
  padding:10px 16px 14px;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:5px;
}
.match-models-hdr{
  display:flex;justify-content:space-between;font-family:var(--font-mono);
  font-size:9px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--text-faint);padding:0 2px 2px;
}
.match-model-row{
  display:grid;grid-template-columns:1fr auto 18px auto;align-items:center;
  gap:10px;font-size:12px;padding:3px 2px;border-radius:4px;
}
.match-model-row:hover{background:rgba(255,255,255,0.015)}
.mm-name{
  font-family:var(--font-mono);font-size:11px;color:var(--text-dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mm-pick{font-size:11px;color:var(--text-muted);white-space:nowrap}
.mm-pick.home{color:var(--profit)}
.mm-pick.draw{color:var(--text-muted)}
.mm-pick.away{color:var(--loss)}
.mm-res{font-weight:700;font-size:12px;text-align:center}
.mm-res.ok{color:var(--profit)}
.mm-res.no{color:var(--loss)}
.mm-why{font-size:10px;color:var(--text-faint);white-space:nowrap}
.match-models-summary{font-size:11px;color:var(--text-muted);margin-top:5px}
.match-models-summary b{color:var(--profit);font-weight:600}
.match-models-empty{
  font-size:12px;color:var(--text-muted);text-align:center;padding:8px 0;
}

/* Interactive probability bar (UPCOMING cards) — "showing" line + chips */
.pitch-showing{
  margin:8px 20px 0;font-size:11px;color:var(--text-faint);min-height:15px;
}
.pitch-showing b{color:var(--text)}
.pitch-conf{color:var(--profit)}
.pitch-chips{
  display:flex;flex-wrap:wrap;gap:6px;margin:12px 20px 4px;padding-top:12px;
  border-top:1px solid var(--border);
}
.pitch-chip{
  font-family:var(--font-mono);font-size:11px;color:var(--text-muted);
  background:var(--card-hi);border:1px solid var(--border);
  padding:4px 9px;border-radius:999px;cursor:pointer;user-select:none;
  transition:all .15s;
}
.pitch-chip:hover{border-color:var(--border-mid);color:var(--text-dim)}
.pitch-chip.active{
  background:var(--profit-soft);border-color:var(--profit);color:var(--profit);
}

.prize-banner{
  background:linear-gradient(135deg,rgba(52,211,153,0.08) 0%,rgba(79,98,238,0.08) 100%);
  border:1px solid rgba(52,211,153,0.2);border-radius:var(--r-lg);
  padding:24px 28px;display:flex;align-items:center;gap:24px;
  margin-bottom:24px;
}
.prize-icon{font-size:40px;flex-shrink:0}
.prize-text h3{font-size:17px;font-weight:600;margin-bottom:4px}
.prize-text p{font-size:13px;color:var(--text-dim);line-height:1.55}
.admin-tab{
  background:none;border:none;padding:10px 18px;
  font-size:13px;color:var(--text-muted);cursor:pointer;
  border-bottom:2px solid transparent;transition:all .15s;
}
.admin-tab:hover{color:var(--text)}
.admin-tab.on{color:var(--text);border-bottom-color:var(--synapse)}


/* ──────────────────────────────────────────────────────────────
   Session 18-B: Committee + threshold activity log line styles.
   Applied to rows in the arena activity log when a 🧠 COMMITTEE or
   ⚡ THRESHOLD HIT line is rendered. The left-border colour signals
   the kind at a glance.
   ────────────────────────────────────────────────────────────── */
.log-committee{
  border-left:3px solid var(--synapse);
  padding-left:10px;
  background:var(--synapse-soft);
}
.log-threshold{
  border-left:3px solid var(--watch);
  padding-left:10px;
  background:var(--watch-soft);
}

/* ──────────────────────────────────────────────────────────────
   Price chart with ticker search (below the equity chart). Source
   badges use the brokers' own brand colours — Alpaca iris purple
   (#635bff), Binance sunflower yellow (#f0b90b) — so the user
   never confuses which broker is feeding live data.
   ────────────────────────────────────────────────────────────── */
.price-search-wrap{
  position:relative;
  width:260px;
  max-width:100%;
}
.price-search-input{
  width:100%;
  background:var(--bg-mid);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  color:var(--text);
  font-family:var(--font-mono);
  font-size:12px;
  padding:6px 10px;
  outline:none;
  transition:border-color 0.12s ease;
}
.price-search-input:focus{
  border-color:var(--synapse);
}
.price-search-input::placeholder{
  color:var(--text-faint);
}
.price-search-dropdown{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  right:0;
  max-height:280px;
  overflow-y:auto;
  background:var(--bg-mid);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  box-shadow:0 8px 24px rgba(0,0,0,0.45);
  z-index:50;
}
.price-search-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  cursor:pointer;
  border-bottom:1px solid var(--border);
  transition:background 0.08s ease;
}
.price-search-row:last-child{
  border-bottom:none;
}
.price-search-row:hover{
  background:var(--bg-deep);
}
.price-search-row-left{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
  flex:1;
}
.price-search-sym{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  color:var(--text);
  letter-spacing:0.02em;
}
.price-search-name{
  font-size:11px;
  color:var(--text-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.price-search-empty{
  padding:14px 10px;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--text-muted);
  text-align:center;
}
.ticker-badge{
  font-family:var(--font-mono);
  font-size:9.5px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:3px 7px;
  border-radius:4px;
  line-height:1;
  white-space:nowrap;
}
.ticker-badge--alpaca{
  background:rgba(99,91,255,0.14);
  color:#a098ff;
  border:1px solid rgba(99,91,255,0.30);
}
.ticker-badge--binance{
  background:rgba(240,185,11,0.12);
  color:#f0b90b;
  border:1px solid rgba(240,185,11,0.30);
}

/* ============================================================
   Redesign Session 1 — Champion Spotlight + Scoreboard Rail
   Ported from docs/Synapse_Arena_Full_standalone.html. Token
   references reuse the existing :root vars (--gold was added
   for the gold/silver/bronze rank chips).
   ============================================================ */

/* Champion row: 2-column above the chart card. Stacks ≤ 1100px. */
.champion-row{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:16px;
  margin-bottom:24px;
}

/* Champion card: left side, leader spotlight. Real <button> so it
   reacts to keyboard focus + click; text-align reset because <button>
   defaults to centre. */
.champion-card{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0)) var(--card);
  border:1px solid var(--border-mid);
  border-radius:var(--r-lg);
  padding:22px 24px;
  overflow:hidden;
  cursor:pointer;
  transition:border-color .2s;
  text-align:left;
  color:var(--text);
  font-family:inherit;
  width:100%;
  display:block;
}
.champion-card:hover{ border-color:var(--border-strong); }
.champion-crown{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--gold);
  margin-bottom:14px;position:relative;
}
.champion-name-row{
  display:flex;align-items:center;gap:14px;margin-bottom:14px;
  position:relative;
}
.champion-name{
  font-size:24px;font-weight:600;letter-spacing:-0.02em;line-height:1.1;
  color:var(--text);
}
.champion-provider{
  font-family:var(--font-mono);font-size:11px;color:var(--text-muted);
  margin-top:2px;letter-spacing:0.04em;
}
.champion-equity{
  display:flex;align-items:baseline;gap:14px;margin-bottom:14px;
  position:relative;flex-wrap:wrap;
}
.champion-equity-big{
  font-size:52px;font-weight:600;letter-spacing:-0.035em;
  font-variant-numeric:tabular-nums;line-height:1;
  animation:countUp .5s ease;
  color:var(--text);
}
@keyframes countUp{
  from{ opacity:0; transform:translateY(4px); }
  to  { opacity:1; transform:translateY(0); }
}
.champion-delta{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:999px;
  font-family:var(--font-mono);font-size:12px;font-weight:600;
}
.champion-delta.up{
  background:var(--profit-soft);color:var(--profit);
  border:1px solid rgba(52,211,153,0.25);
}
.champion-delta.down{
  background:var(--loss-soft);color:var(--loss);
  border:1px solid rgba(242,94,115,0.25);
}
.champion-spark{ margin:6px 0 18px; position:relative; }
.champion-meta{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  position:relative;padding-top:14px;border-top:1px solid var(--border);
}
.champion-meta-label{
  font-family:var(--font-mono);font-size:9px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:5px;
}
.champion-meta-value{
  font-size:16px;font-weight:600;font-variant-numeric:tabular-nums;
  letter-spacing:-0.01em;color:var(--text);
}
.champion-meta-value.profit{ color:var(--profit); }
.champion-meta-value.loss  { color:var(--loss); }

/* Right column: today's movers + worst performer */
.champion-side{
  display:flex;flex-direction:column;gap:14px;
}
.movers-card,
.loser-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:14px 16px;
}
.loser-card{
  cursor:pointer;transition:border-color .15s;
  flex:1;display:flex;flex-direction:column;
  color:var(--text);font-family:inherit;text-align:left;width:100%;
}
.loser-card:hover{ border-color:var(--border-mid); }

.movers-head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:10px;
}
.movers-title{ font-size:13px;font-weight:500;color:var(--text); }
.movers-sub{
  font-family:var(--font-mono);font-size:10px;color:var(--text-muted);
  letter-spacing:0.1em;text-transform:uppercase;
}
.movers-list{ display:flex;flex-direction:column;gap:4px; }
.mover-row{
  display:grid;grid-template-columns:48px 10px 1fr 60px;
  align-items:center;gap:10px;
  padding:6px 8px;cursor:pointer;
  border-radius:var(--r-sm);
  transition:background .12s;
  background:transparent;border:none;width:100%;
  color:var(--text);font-family:inherit;text-align:left;
}
.mover-row:hover{ background:rgba(255,255,255,0.02); }
.rank-chip{
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  padding:2px 6px;border-radius:var(--r-xs);text-align:center;
  letter-spacing:0.03em;
}
.rank-chip.up   { color:var(--profit);background:var(--profit-soft); }
.rank-chip.down { color:var(--loss);  background:var(--loss-soft); }
.rank-chip.flat { color:var(--text-muted);background:rgba(255,255,255,0.04); }
.mover-dot{ width:8px;height:8px;border-radius:50%; }
.mover-name{
  font-size:13px;font-weight:500;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.mover-pct{
  font-family:var(--font-mono);font-size:11px;
  text-align:right;font-weight:600;
}
.mover-pct.up   { color:var(--profit); }
.mover-pct.down { color:var(--loss); }

.loser-head{
  display:flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--loss);margin-bottom:12px;
}
.loser-body{ display:flex;align-items:center;gap:12px;flex:1; }
.loser-name{
  flex:1;font-size:15px;font-weight:600;letter-spacing:-0.01em;
  color:var(--text);
}
.loser-pct{
  font-family:var(--font-mono);font-size:18px;font-weight:600;
  color:var(--loss);font-variant-numeric:tabular-nums;
}

/* Chart card — minimal wrapper modifier on the existing .card. */
.chart-card{ /* margin-bottom inline on the element to stay consistent */ }
.chart-head{ justify-content:flex-start; }
.chart-title{
  flex:1;display:flex;flex-direction:column;gap:2px;
}
.chart-title-main{ font-size:14px;font-weight:500;color:var(--text); }
.chart-title-sub{
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--text-muted);
}
.isolate-pill{
  background:var(--synapse-soft);color:var(--iris);
  border:1px solid rgba(181,166,255,0.3);border-radius:999px;
  padding:5px 12px;font-size:11px;font-family:var(--font-mono);
  letter-spacing:0.06em;cursor:pointer;
}
.isolate-pill:hover{ background:rgba(79,98,238,0.22); }

/* Chart body: chart-area | scoreboard rail */
.chart-body{
  display:grid;grid-template-columns:1fr 320px;gap:0;
}

/* Scoreboard rail */
.scoreboard{
  border-left:1px solid var(--border);
  background:var(--ink-soft);
  overflow:hidden;
  display:flex;flex-direction:column;
}
.scoreboard-head{
  padding:10px 14px;border-bottom:1px solid var(--border);
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--text-muted);
  background:var(--ink-deep);
}
.scoreboard-list{
  flex:1;overflow-y:auto;max-height:320px;
}
.sb-row{
  display:grid;
  grid-template-columns:28px 3px 1fr auto auto;
  gap:8px;align-items:center;
  padding:7px 14px 7px 10px;cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,0.03);
  transition:background .12s, opacity .15s;
  background:transparent;border-left:none;border-right:none;border-top:none;
  width:100%;color:var(--text);font-family:inherit;text-align:left;
}
.sb-row:hover{ background:rgba(255,255,255,0.025); }
.sb-row.active{ background:var(--card-hi); }
.sb-row.dim   { opacity:0.35; }
.sb-rank{
  font-family:var(--font-mono);font-size:10px;color:var(--text-muted);
  font-variant-numeric:tabular-nums;letter-spacing:0.04em;
}
.sb-row:nth-child(1) .sb-rank{ color:var(--gold);font-weight:600; }
.sb-row:nth-child(2) .sb-rank{ color:#C7CAD1;font-weight:600; }
.sb-row:nth-child(3) .sb-rank{ color:#CD7F32;font-weight:600; }
.sb-stripe{ height:18px;border-radius:1px; }
.sb-name{
  font-size:12px;font-weight:500;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.sb-val{
  font-family:var(--font-mono);font-size:11px;color:var(--text-dim);
  font-variant-numeric:tabular-nums;
}
.sb-pct{
  font-family:var(--font-mono);font-size:10px;font-weight:600;
  min-width:50px;text-align:right;
}
.sb-pct.up   { color:var(--profit); }
.sb-pct.down { color:var(--loss); }

@media (max-width: 1280px){
  .chart-body{ grid-template-columns:1fr 270px; }
}
@media (max-width: 1100px){
  .champion-row{ grid-template-columns:1fr; }
  .chart-body{ grid-template-columns:1fr; }
  .scoreboard{ border-left:none;border-top:1px solid var(--border); }
  .scoreboard-list{ max-height:260px; }
}

@media (prefers-reduced-motion: reduce){
  .champion-equity-big{ animation:none; }
}

/* ============================================================
   Redesign Session 2 — Timeframe pills + Cross-hair tooltip
   ============================================================ */

/* Project-wide x-cloak — prevents the tooltip card (and any other
   x-cloak'd Alpine block) from flashing before Alpine boots. */
[x-cloak]{ display:none !important; }

/* Timeframe pills (24H / 3D / 7D / ALL) — segmented control sitting
   inside .chart-head. The container styles ported verbatim from
   the prototype; .tf-btn re-resets <button> defaults because Alpine
   binds to real <button>s for keyboard focus. */
.tf-group{
  display:flex;gap:2px;
  background:var(--ink);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:2px;
}
.tf-btn{
  padding:5px 12px;
  border-radius:var(--r-sm);
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:0.06em;
  color:var(--text-muted);
  transition:all .15s;
  font-weight:600;
  background:transparent;border:none;
  cursor:pointer;
}
.tf-btn:hover{ color:var(--text-dim); }
.tf-btn.on{ background:var(--card-hi); color:var(--text); }
.tf-btn:focus-visible{
  outline:1px solid var(--iris);
  outline-offset:1px;
}

/* Cross-hair tooltip card — absolutely positioned inside chart-area
   by `hoverTooltipStyle()`. pointer-events:none lets the mousemove
   pass through to the chart so the cross-hair keeps tracking even
   when the cursor moves over the tooltip itself. */
.chart-tooltip{
  position:absolute;
  background:var(--ink-deep);
  border:1px solid var(--border-mid);
  border-radius:var(--r-md);
  padding:10px 12px;
  min-width:200px;
  pointer-events:none;
  box-shadow:0 12px 40px rgba(0,0,0,0.55);
  transform:translateX(-50%);
  z-index:5;
  animation:tooltip-fadeIn .12s ease;
}
.tt-time{
  font-family:var(--font-mono);font-size:10px;
  color:var(--text-muted);letter-spacing:0.1em;
  text-transform:uppercase;margin-bottom:6px;
}
.tt-row{
  display:grid;
  grid-template-columns:8px 1fr auto;
  gap:8px;align-items:center;
  padding:3px 0;font-size:11px;
}
.tt-dot{ width:8px;height:8px;border-radius:50%; }
.tt-name{
  color:var(--text-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tt-val{
  font-family:var(--font-mono);
  color:var(--text);font-weight:500;
}
.tt-more{
  font-family:var(--font-mono);font-size:10px;
  color:var(--text-muted);margin-top:4px;
}

/* tooltip-fadeIn preserves the .chart-tooltip's translateX(-50%) so
   the animation doesn't slide the centred card off-axis. */
@keyframes tooltip-fadeIn{
  from{ opacity:0;transform:translateX(-50%) translateY(4px); }
  to  { opacity:1;transform:translateX(-50%) translateY(0); }
}

/* Generic fadeIn — no transform so callers (event-reasoning panel,
   future polish) can compose it without clobbering their own
   positioning. */
@keyframes fadeIn{
  from{ opacity:0;transform:translateY(4px); }
  to  { opacity:1;transform:translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .chart-tooltip{ animation:none; }
}

/* ============================================================
   Redesign Session 3 — three-mode Activity Log
   ============================================================ */

.activity-head{ justify-content:flex-start; }
.activity-title{ display:flex;flex-direction:column;gap:2px;flex:0 0 auto; }
.activity-title-main{ font-size:14px;font-weight:500;color:var(--text); }
.activity-title-sub{
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--text-muted);
}

.view-switch{
  display:flex;gap:2px;
  background:var(--ink);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:2px;
}
.view-btn{
  padding:6px 12px;border-radius:var(--r-sm);
  font-size:12px;color:var(--text-muted);font-weight:500;
  display:inline-flex;align-items:center;gap:6px;
  transition:all .15s;
  background:transparent;border:none;cursor:pointer;font-family:inherit;
}
.view-btn:hover{ color:var(--text-dim); }
.view-btn.on{ background:var(--card-hi);color:var(--text); }
.view-btn:focus-visible{
  outline:1px solid var(--iris);outline-offset:1px;
}

/* Focus banner shown on top of the activity card when
   focusedModelId is set from Spotlight / Scoreboard Rail / row chip. */
.focus-banner{
  background:var(--synapse-soft);
  border-bottom-color:rgba(181,166,255,0.18);
}

/* Filter bar — action chips + spacer + search box. */
.filter-bar{
  padding:12px 18px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:14px;
  background:var(--ink-soft);
}
.filter-spacer{ flex:1; }
.filter-label{
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--text-muted);
  white-space:nowrap;padding-top:5px;
}

.action-tabs{ display:flex;gap:4px;flex-wrap:wrap; }
.action-tab{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 11px;border-radius:var(--r-sm);
  background:transparent;border:1px solid var(--border-mid);
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.06em;
  color:var(--text-muted);transition:all .15s;
  cursor:pointer;
}
.action-tab:hover{ color:var(--text-dim);border-color:var(--border-strong); }
.action-tab.on{
  color:var(--text);background:var(--card-hi);
  border-color:var(--border-strong);
}
.action-tab-count{
  padding:1px 6px;border-radius:8px;
  background:var(--ink-deep);color:var(--text-faint);
  font-size:9px;font-weight:600;
}
.action-tab.on .action-tab-count{ background:var(--synapse);color:#fff; }

.search-box{
  display:flex;align-items:center;gap:8px;
  background:var(--ink);
  border:1px solid var(--border-mid);
  border-radius:var(--r-sm);
  padding:5px 10px;min-width:240px;
  color:var(--text-muted);
}
.search-box input{
  background:transparent;border:none;outline:none;
  color:var(--text);font-family:inherit;font-size:12px;
  flex:1;width:100%;
}
.search-box input::placeholder{ color:var(--text-faint); }

.model-pill-row{
  display:flex;align-items:flex-start;gap:12px;
  padding:10px 18px;border-bottom:1px solid var(--border);
  background:var(--ink-deep);
}
.model-pill-list{ display:flex;flex-wrap:wrap;gap:5px; }
.model-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;border-radius:999px;
  background:var(--ink);
  border:1px solid var(--border-mid);
  font-size:11px;color:var(--text-dim);
  font-family:inherit;cursor:pointer;
  transition:all .12s;
}
.model-pill:hover{ color:var(--text);border-color:var(--border-strong); }
.model-pill.on{ font-weight:500; }
.model-pill.clear{
  color:var(--iris);
  border-color:rgba(181,166,255,0.3);
  background:rgba(181,166,255,0.06);
}
.pill-dot{ width:7px;height:7px;border-radius:50%;flex-shrink:0; }

/* ── Action chip — semantic colors per spec ─────────────────── */
.action-chip{
  display:inline-block;padding:2px 9px;border-radius:var(--r-xs);
  font-family:var(--font-mono);font-size:9px;font-weight:700;
  letter-spacing:0.08em;border:1px solid;text-align:center;
}
.action-chip.action-buy   { color:var(--profit);background:var(--profit-soft);border-color:rgba(52,211,153,0.25); }
.action-chip.action-sell  { color:var(--loss);  background:var(--loss-soft);  border-color:rgba(242,94,115,0.25); }
.action-chip.action-short { color:var(--loss);  background:var(--loss-soft);  border-color:rgba(242,94,115,0.25); }
.action-chip.action-cover { color:var(--profit);background:var(--profit-soft);border-color:rgba(52,211,153,0.25); }
.action-chip.action-hold  { color:var(--text-muted);background:rgba(255,255,255,0.04);border-color:var(--border); }

/* ── Stream view ────────────────────────────────────────────── */
.stream-view{ background:var(--card); }
.event-header{
  display:grid;
  grid-template-columns: 3px 70px 180px 70px 60px 130px 90px 80px 110px 12px;
  align-items:center;gap:12px;
  padding:10px 18px;
  background:var(--ink-deep);
  border-bottom:1px solid var(--border);
  font-family:var(--font-mono);font-size:9px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--text-muted);
}
.event-header .h-value,
.event-header .h-pnl  { text-align:right; }

.event-list{ max-height:680px;overflow-y:auto; }
.event-row{ border-bottom:1px solid var(--border);transition:background .12s; }
.event-row.expanded{ background:var(--ink-soft); }
.event-main{
  display:grid;
  grid-template-columns: 3px 70px 180px 70px 60px 130px 90px 80px 110px 12px;
  align-items:center;gap:12px;
  padding:9px 18px;cursor:pointer;font-size:12px;
}
.event-lane{ height:24px;border-radius:1px;align-self:center; }
.event-time{ font-family:var(--font-mono);font-size:10px;color:var(--text-muted); }
.event-model{
  display:flex;align-items:center;gap:7px;
  padding:3px 8px;border-radius:var(--r-sm);
  background:rgba(255,255,255,0.025);
  border:1px solid var(--border);
  min-width:0;
  color:var(--text-dim);font-family:inherit;
  cursor:pointer;
}
.event-model:hover{ background:rgba(255,255,255,0.06); }
.event-model-dot{ width:6px;height:6px;border-radius:50%;flex-shrink:0; }
.event-model-name{
  font-size:11px;color:var(--text-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.event-symbol{
  font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--text);
}
.event-qty{
  font-family:var(--font-mono);font-size:11px;color:var(--text-muted);
}
.event-value{
  font-family:var(--font-mono);font-size:11px;color:var(--text-dim);
  text-align:right;
}
.event-pnl{
  font-family:var(--font-mono);font-size:11px;font-weight:600;text-align:right;
}
.event-pnl.up  { color:var(--profit); }
.event-pnl.down{ color:var(--loss); }
.event-conf{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:10px;color:var(--text-muted);
}
.conf-bar{
  flex:1;height:3px;
  background:var(--card-edge);
  border-radius:2px;overflow:hidden;min-width:50px;
}
.conf-fill{ height:100%; }
.chev{ color:var(--text-muted);transition:transform .15s; }
.chev.rot{ transform:rotate(180deg); }

.event-reasoning{
  padding:0 18px 16px 109px;
  animation:fadeIn .15s ease;
}
.reasoning-label{
  font-family:var(--font-mono);font-size:9px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;
}
.reasoning-text{
  font-family:var(--font-edit);font-style:italic;
  font-size:14px;color:var(--text);line-height:1.55;max-width:740px;
}
.reasoning-meta{
  font-family:var(--font-mono);font-size:10px;color:var(--text-faint);
  margin-top:8px;display:flex;gap:8px;flex-wrap:wrap;
}

.empty-state{
  padding:48px 18px;text-align:center;color:var(--text-muted);font-size:13px;
}
.empty-state.small{ padding:24px 12px;font-size:11px;font-style:italic; }

/* ── Swimlane view ──────────────────────────────────────────── */
.swimlane-view{ padding:14px 18px;background:var(--ink-deep); }
.swimlane-hint{
  font-size:12px;color:var(--text-muted);margin-bottom:12px;font-style:italic;
}
.swim-grid{ display:grid;gap:12px;max-height:720px; }
.swim-col{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  overflow:hidden;
  display:flex;flex-direction:column;min-width:0;
}
.swim-col-head{
  padding:10px 12px;
  border-top:3px solid;
  border-bottom:1px solid var(--border);
  background:var(--ink-soft);
  cursor:pointer;
  text-align:left;color:var(--text);font-family:inherit;
  width:100%;
}
.swim-col-name{
  display:flex;align-items:center;gap:7px;
  font-size:12px;font-weight:600;margin-bottom:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.swim-col-meta{
  display:flex;align-items:center;gap:8px;justify-content:space-between;
}
.tag{
  font-family:var(--font-mono);font-size:10px;font-weight:600;
  padding:1px 7px;border-radius:var(--r-xs);
}
.tag.up  { color:var(--profit);background:var(--profit-soft); }
.tag.down{ color:var(--loss);  background:var(--loss-soft); }
.swim-count{
  font-family:var(--font-mono);font-size:10px;color:var(--text-muted);
}
.swim-col-body{
  padding:8px;flex:1;overflow-y:auto;max-height:640px;
  display:flex;flex-direction:column;gap:6px;
}
.swim-card{
  background:var(--ink-soft);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  padding:8px 10px;cursor:pointer;
  transition:border-color .15s;
}
.swim-card:hover{ border-color:var(--border-mid); }
.swim-card.expanded{
  border-color:var(--border-strong);
  background:var(--card-hi);
}
.swim-card-top{ display:flex;align-items:center;gap:6px;margin-bottom:4px; }
.swim-symbol{
  font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--text);
}
.swim-time{
  font-family:var(--font-mono);font-size:9px;color:var(--text-muted);
  margin-left:auto;
}
.swim-card-meta{
  font-family:var(--font-mono);font-size:10px;color:var(--text-muted);
}
.pnl-inline.up  { color:var(--profit); }
.pnl-inline.down{ color:var(--loss); }
.swim-reason{
  margin-top:6px;padding-top:6px;border-top:1px solid var(--border);
  font-family:var(--font-edit);font-style:italic;
  font-size:11px;color:var(--text-dim);line-height:1.5;
}

/* ── Symbol view ────────────────────────────────────────────── */
.symbol-view{ padding:16px 18px;background:var(--ink-deep); }
.symbol-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:12px;
}
.symbol-block{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:14px;
}
.symbol-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;padding-bottom:10px;
  border-bottom:1px solid var(--border);
}
.symbol-tick{
  font-family:var(--font-mono);font-size:18px;font-weight:700;
  letter-spacing:0.02em;color:var(--text);
}
.symbol-counts{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  justify-content:flex-end;
}
.bs-pill{
  font-family:var(--font-mono);font-size:9px;font-weight:600;
  padding:2px 7px;border-radius:var(--r-xs);letter-spacing:0.04em;
}
.bs-pill.buy { color:var(--profit);background:var(--profit-soft); }
.bs-pill.sell{ color:var(--loss);  background:var(--loss-soft); }
.bs-net{ font-family:var(--font-mono);font-size:10px;font-weight:600; }
.bs-net.up  { color:var(--profit); }
.bs-net.down{ color:var(--loss); }
.symbol-stream{ display:flex;flex-direction:column;gap:4px; }
.sym-mini{
  display:grid;
  grid-template-columns:8px auto 1fr auto;
  gap:8px;align-items:center;
  padding:5px 0;cursor:pointer;font-size:11px;
  background:transparent;border:none;
  color:var(--text);text-align:left;font-family:inherit;
}
.sym-mini-dot{ width:7px;height:7px;border-radius:50%; }
.sym-mini-model{
  color:var(--text-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.sym-mini-time{
  font-family:var(--font-mono);font-size:9px;color:var(--text-muted);
}
.sym-more{
  font-family:var(--font-mono);font-size:10px;
  color:var(--text-muted);text-align:center;margin-top:6px;
}

/* Responsive — drop the lower-priority columns on smaller screens.
   The grid-template-columns string must mirror the header row so the
   two stay in sync. */
@media (max-width: 1280px){
  .event-header,
  .event-main{
    grid-template-columns: 3px 60px 140px 60px 50px 110px 80px 70px 90px 12px;
    padding-left:14px;padding-right:14px;
  }
}
@media (max-width: 1100px){
  /* Drop NOTIONAL + P&L — they're the columns most often empty (the
     server doesn't ship them for skipped HOLDs anyway). */
  .event-header,
  .event-main{
    grid-template-columns: 3px 60px 1fr 60px 60px 110px 90px 12px;
  }
  .event-header .h-value,
  .event-header .h-pnl,
  .event-value,
  .event-pnl{ display:none; }
  .event-reasoning{ padding-left:78px; }
}
@media (max-width: 720px){
  /* Mobile: lane | time | model | action | symbol | chev. */
  .event-header,
  .event-main{
    grid-template-columns: 3px 50px 1fr 60px 60px 12px;
    font-size:11px;padding:8px 12px;
  }
  .event-header .h-conf,
  .event-qty,
  .event-conf{ display:none; }
  .event-reasoning{ padding-left:62px;padding-right:12px; }
  .symbol-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   Redesign Session 5 — Detective + News + shared cited-chip
   ============================================================ */

/* Clickable filter buttons in the page-stats strip (News view). */
.page-stats .ps{
  cursor:pointer;
  transition:background .15s, border-color .15s;
}
.page-stats .ps:hover{ border-color:var(--border-strong); }
.page-stats .ps.active{
  background:var(--card-hi);
  border-color:var(--border-strong);
}
.page-stats .ps-value.watch{ color:var(--watch); }
.page-stats .ps-value.loss { color:var(--loss); }
.page-stats .ps-value.profit{ color:var(--profit); }

/* ── Shared cited-model chip (Detective + News + Pitch matches) ── */
.cited-label{
  font-family:var(--font-mono);font-size:9px;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--text-muted);
  margin-right:4px;
}
.cited-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:2px 8px;
  border-radius:var(--r-xs);
  background:rgba(255,255,255,0.025);
  border:1px solid var(--border-mid);
  font-size:11px;color:var(--text-dim);
  white-space:nowrap;
}
.cited-dot{ width:7px;height:7px;border-radius:50%;flex-shrink:0; }

/* ── Detective view ─────────────────────────────────────────── */
.detective-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(420px, 1fr));
  gap:14px;
}
.detective-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:18px 20px;
  display:flex;flex-direction:column;gap:10px;
  transition:border-color .15s;
}
.detective-card:hover{ border-color:var(--border-mid); }

.detective-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
}
.detective-symbol{
  font-family:var(--font-mono);
  font-size:20px;font-weight:700;
  letter-spacing:0.02em;
  color:var(--iris);
}
.detective-target{
  font-family:var(--font-mono);
  font-size:11px;font-weight:600;
  padding:3px 10px;border-radius:999px;
  letter-spacing:0.04em;
  border:1px solid;
}
.detective-target.up      { color:var(--profit);background:var(--profit-soft);border-color:rgba(52,211,153,0.25); }
.detective-target.down    { color:var(--loss);  background:var(--loss-soft);  border-color:rgba(242,94,115,0.25); }
.detective-target.neutral { color:var(--watch); background:var(--watch-soft); border-color:rgba(242,169,59,0.25); }

.detective-headline{
  font-size:15px;font-weight:600;
  letter-spacing:-0.01em;
  color:var(--text);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.35;
  /* Two-line cap so cards line up consistently. */
}
.detective-narrative{
  font-size:13px;color:var(--text-dim);
  line-height:1.7;
  display:-webkit-box;
  -webkit-line-clamp:5;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.detective-foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-top:6px;
  padding-top:10px;
  border-top:1px solid var(--border);
  flex-wrap:wrap;
}
.detective-cited{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}

/* Synapse → iris gradient confidence bar — reused on the Detective
   foot AND potentially future surfaces (e.g. Pitch match card
   confidence). */
.confidence-display{
  display:flex;align-items:center;gap:10px;min-width:160px;
  font-family:var(--font-mono);font-size:10px;
  color:var(--text-muted);
}
.confidence-bar-wrap{
  flex:1;height:4px;
  background:var(--card-edge);
  border-radius:2px;
  overflow:hidden;
  min-width:60px;
}
.confidence-fill{
  height:100%;
  background:linear-gradient(90deg, var(--synapse) 0%, var(--iris) 100%);
  transition:width .25s ease;
}

/* ── News view ──────────────────────────────────────────────── */
.news-list{
  display:flex;flex-direction:column;gap:10px;
}
.news-item{
  display:flex;align-items:flex-start;gap:14px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:14px 16px;
  transition:border-color .15s;
}
.news-item:hover{ border-color:var(--border-mid); }

.news-icon{
  font-size:18px;
  background:var(--ink-soft);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.news-headline{
  font-size:14px;font-weight:500;
  line-height:1.45;
  color:var(--text);
  margin-bottom:6px;
}
.news-meta{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:11px;
  color:var(--text-muted);
}
.news-cited{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  margin-top:8px;
}

/* Urgency / sentiment badge — same class shape as the spec; the
   modifiers map to the urgency taxonomy. */
.sentiment-badge{
  display:inline-block;
  font-family:var(--font-mono);font-size:9px;font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;
  padding:2px 7px;border-radius:var(--r-xs);
  border:1px solid;
}
.sentiment-badge.critical{
  color:var(--loss);background:var(--loss-soft);
  border-color:rgba(242,94,115,0.30);
}
.sentiment-badge.high{
  color:var(--watch);background:var(--watch-soft);
  border-color:rgba(242,169,59,0.30);
}
.sentiment-badge.medium{
  color:var(--text-dim);background:rgba(255,255,255,0.04);
  border-color:var(--border);
}
.sentiment-badge.low{
  color:var(--text-muted);background:rgba(255,255,255,0.025);
  border-color:var(--border);
}
/* Spec-shape aliases so a future shift to sentiment data wires the
   same CSS without code-side rename. */
.sentiment-badge.bullish{
  color:var(--profit);background:var(--profit-soft);
  border-color:rgba(52,211,153,0.30);
}
.sentiment-badge.bearish{
  color:var(--loss);background:var(--loss-soft);
  border-color:rgba(242,94,115,0.30);
}
.sentiment-badge.neutral{
  color:var(--text-dim);background:rgba(255,255,255,0.04);
  border-color:var(--border);
}

@media (max-width: 1100px){
  .detective-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   Redesign Session 6 — polish: density / a11y / motion / print
   ============================================================ */

/* ── Screen-reader-only utility ─────────────────────────────── */
.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;
}

/* ── Global focus ring for keyboard users ───────────────────── */
/* :focus-visible only triggers on keyboard / programmatic focus, so
   mouse-click users don't see the outline. Synapse outline on most
   elements; iris on buttons/links so they stand out. */
*:focus-visible{
  outline:2px solid var(--synapse);
  outline-offset:2px;
  border-radius:var(--r-xs);
}
button:focus-visible,
a:focus-visible{
  outline-color:var(--iris);
}
/* Don't double-up the focus ring on the chart-svg children that
   already get a tooltip; the SVG is keyboard-uninteractive anyway. */
.chart-svg:focus-visible{ outline:none; }

/* ── Density toggle visual ──────────────────────────────────── */
.density-toggle{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.04em;
}
.density-toggle[aria-pressed="true"]{
  background:var(--card-hi);
  border-color:var(--border-strong);
  color:var(--text);
}

/* ── Trend icon (▲/▼ next to color-coded percentages) ────────── */
.trend-icon{
  font-size:0.75em;
  margin-right:3px;
  display:inline-block;
  /* The icon inherits color from its parent's .up/.down class so
     it's never just decoration — it carries the same semantic
     signal as the text color, on a separate channel. */
  line-height:1;
}

/* ── Dense modifier — body.dense tightens row padding ─────────── */
body.dense .event-main{ padding:6px 18px;font-size:11px; }
body.dense .event-header{ padding:7px 18px; }
body.dense .sb-row{ padding:5px 14px 5px 10px; }
body.dense .swim-card{ padding:6px 9px; }
body.dense .swim-col-body{ padding:6px;gap:4px; }
body.dense .news-item{ padding:12px 14px; }
body.dense .detective-card{ padding:16px 18px;gap:8px; }
body.dense .mover-row{ padding:4px 8px; }
body.dense .filter-bar{ padding:9px 18px; }
body.dense .model-pill-row{ padding:8px 18px; }
body.dense .symbol-block{ padding:11px 13px; }
body.dense .champion-card{ padding:18px 20px; }
body.dense .champion-equity-big{ font-size:46px; }

/* ── Responsive sweep ───────────────────────────────────────── */

/* The 1280 + 1100 blocks already declared earlier in this file
   (chart-body / scoreboard / event-main) stand. Add the missing
   720px mobile rules here. */

@media (max-width: 720px){
  .shell{ padding:16px 18px 60px; }
  .topbar{ padding:10px 14px;gap:10px;flex-wrap:wrap; }
  /* Hide the top nav on phones — direct URLs still work. A proper
     hamburger menu is queued for a polish v2; for now this is the
     least surprising fallback. */
  .nav-links{ display:none; }
  .page-stats{ display:none; }
  .nav-pill{ display:none; }
  .density-toggle{ display:none; }
  .hero-h{ font-size:32px; }
  .champion-row{ grid-template-columns:1fr; }
  .champion-equity-big{ font-size:40px; }
  .matches-grid{ grid-template-columns:1fr; }
  .symbol-grid{ grid-template-columns:1fr; }
  .detective-grid{ grid-template-columns:1fr; }
  .swim-grid{ grid-template-columns:1fr !important; }
  .arena-layout{ grid-template-columns:1fr; }
  /* The event-list mobile column shrink is already declared in the
     earlier 720px block; here we just ensure pidth-aware caps. */
  .activity-card .filter-bar{ flex-direction:column;align-items:stretch;gap:10px; }
  .search-box{ min-width:0;width:100%; }
}

/* ── Reduced-motion override ─────────────────────────────────
   Cancels every animation + transition + scroll-behavior when the
   user prefers reduced motion. The 0.01ms duration is the canonical
   override pattern — long enough to fire the `animationend` event
   (some app code depends on it) but short enough to be invisible. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ── countUp animation trigger for champion equity ───────────── */
.count-up-anim{ animation:countUp 0.5s ease; }

/* ── View-change fadeIn ─────────────────────────────────────── */
/* Each .shell that's swapped in by view changes does a subtle 150ms
   slide-up + fade. Tooltip-fadeIn and the generic fadeIn keyframes
   are already declared (S2 + S3). */
.shell{ animation:fadeIn 150ms ease; }

/* ── Print stylesheet — one-page Arena ──────────────────────── */
@media print{
  /* Hide everything that doesn't print well: top nav, footers,
     activity log, beat-ai trade form, model pill rows. */
  .topbar,
  .activity-card,
  .filter-bar,
  .model-pill-row,
  .beat-form,
  .pitch-cross-links,
  .site-footer,
  .nav-spacer{ display:none !important; }

  /* The chart-area's dark canvas doesn't translate to ink; let the
     SVG paths render against the printed page directly. */
  body, body.dense{
    background:#fff !important;
    color:#000 !important;
  }
  .card, .champion-card, .detective-card, .news-item,
  .symbol-block, .swim-col, .scoreboard, .chart-area{
    background:#fff !important;
    color:#000 !important;
    border:1px solid #ccc !important;
    box-shadow:none !important;
  }
  .chart-svg line[stroke^="rgba(255,255,255"]{ stroke:#ccc !important; }

  /* Compact typography. */
  body{ font-size:11pt; }
  .champion-equity-big{ font-size:36pt;animation:none !important; }
  .champion-name{ font-size:18pt; }
  .page-stats{ break-inside:avoid; }
  .champion-row{ break-inside:avoid; }
  .chart-card{ break-inside:avoid; }
}

/* ============================================================
   Session 7a — Arena layout cleanup
     • performer-strip replaces the pre-7a movers-card + loser-card
     • below-chart-row hosts Market Pulse + News Feed Summary
     • run-section is the formerly-right-rail BYOK form, now full-
       width because arena-layout collapsed to single column
   ============================================================ */

/* ── Performer strip (top + worst, stacked) ─────────────────── */
.performer-strip{
  display:flex;flex-direction:column;gap:14px;
  height:100%;
}
.performer-row{
  background:var(--card-edge);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:14px 18px;
  display:block;width:100%;
  text-align:left;
  cursor:pointer;
  font-family:inherit;color:var(--text);
  transition:border-color .15s, background .15s;
}
.performer-row:hover{
  border-color:var(--border-strong);
  background:var(--card-hi);
}
.performer-row.top   { border-top:2px solid rgba(52,211,153,0.45); }
.performer-row.worst { border-top:2px solid rgba(242,94,115,0.45); }

.performer-label{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:0.18em;
  color:var(--text-muted);text-transform:uppercase;
  margin-bottom:8px;
}
.performer-row .trend-icon.up   { color:var(--profit); }
.performer-row .trend-icon.down { color:var(--loss); }

.performer-body{
  display:flex;align-items:baseline;
  justify-content:space-between;gap:12px;
  min-width:0;
}
.performer-name{
  font-weight:600;font-size:18px;
  flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  letter-spacing:-0.01em;
}
.performer-pct{
  font-family:var(--font-mono);
  font-size:16px;font-weight:600;
  flex-shrink:0;
  font-variant-numeric:tabular-nums;
}
.performer-pct.up   { color:var(--profit); }
.performer-pct.down { color:var(--loss); }

/* ── Below-chart row (Market Pulse + News Feed Summary) ─────── */
.below-chart-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:18px;
  margin-bottom:28px;
}

/* Shared card-head shape — works alongside the existing .card-head
   styles. The wrapped `.card-head-titles` lets a sibling
   `.pulse-scope` or `.card-link` sit on the right of the same row. */
.card-head .card-head-titles{
  display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;
}
.card-h-main{ font-size:14px;font-weight:500;color:var(--text); }
.card-h-sub{
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--text-muted);
}
.card-link{
  font-family:var(--font-mono);font-size:11px;
  color:var(--iris);text-decoration:none;
  letter-spacing:0.04em;
}
.card-link:hover{ text-decoration:underline; }

/* Pulse card body (placeholder until S7b wires Layer 2). */
.pulse-card .pulse-body{
  padding:8px 0;
  max-height:280px;overflow-y:auto;
}
.pulse-scope{
  font-family:var(--font-mono);font-size:11px;
  color:var(--iris);letter-spacing:0.04em;
}
.pulse-row{
  display:grid;
  grid-template-columns:60px 1fr 70px 70px 60px;
  gap:10px;align-items:center;
  padding:7px 18px;
  font-family:var(--font-mono);font-size:11px;
  border-bottom:1px solid var(--border);
}
.pulse-row:last-child{ border-bottom:none; }
.pulse-row-time{ color:var(--text-muted); }
.pulse-row-sym{ color:var(--text);font-weight:600; }
.pulse-row-mag{ text-align:right;color:var(--text-dim); }

/* News Feed Summary card */
.news-summary-card .news-summary-body{
  padding:4px 0;
  max-height:280px;overflow-y:auto;
}
.news-summary-row{
  display:grid;
  grid-template-columns:88px 1fr auto;
  gap:14px;align-items:baseline;
  padding:10px 18px;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--border);
  text-align:left;
  width:100%;
  cursor:pointer;
  transition:background .12s;
  color:var(--text);
  font-family:inherit;
}
.news-summary-row:last-child{ border-bottom:none; }
.news-summary-row:hover{ background:var(--card-hi); }
.news-summary-urgency{
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:0.12em;
  font-weight:600;
}
.news-summary-urgency.critical { color:var(--loss);font-weight:700; }
.news-summary-urgency.high     { color:var(--watch); }
.news-summary-urgency.medium,
.news-summary-urgency.low,
.news-summary-urgency.neutral  { color:var(--text-muted); }
/* Spec-alias modifiers for the rare case where the upstream feed
   ships sentiment rather than urgency. Same color tokens. */
.news-summary-urgency.bullish  { color:var(--profit); }
.news-summary-urgency.bearish  { color:var(--loss);font-weight:700; }
.news-summary-headline{
  font-size:13px;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.news-summary-time{
  font-family:var(--font-mono);font-size:11px;
  color:var(--text-muted);
  flex-shrink:0;
}

/* Run-section spacing — formerly .right-rail. Now full-width. */
.run-section{ margin-top:18px; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px){
  .below-chart-row{ grid-template-columns:1fr; }
}
@media (max-width: 720px){
  .performer-row{ padding:12px 14px; }
  .performer-name{ font-size:16px; }
  .performer-pct{ font-size:14px; }
  .news-summary-row{
    grid-template-columns:72px 1fr auto;
    padding:9px 14px;gap:10px;
  }
}

/* ===========================================================
   Arena v2_3 — top-row 3-col + full-width equity chart (?v=72)
   =========================================================== */
.arena-top-row {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(420px, 1.6fr) minmax(260px, 0.85fr);
  gap: 16px;
  margin-bottom: 16px;
  align-items: stretch;
}
.arena-top-row > .card { margin: 0; height: 100%; display: flex; flex-direction: column; }

/* --- Compact Champion (left) --------------------------------- */
.champ-compact { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.champ-compact .champ-eyebrow {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--profit); display: flex; align-items: center; gap: 6px;
}
.champ-compact .champ-eyebrow .trophy { font-size: 12px; }
.champ-compact .champ-model { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.champ-compact .champ-name { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.champ-compact .champ-provider {
  font-size: 10px; color: var(--text-muted); font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.champ-compact .champ-equity {
  font-size: 28px; font-weight: 600; letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums; line-height: 1.05;
}
.champ-compact .champ-delta {
  font-size: 12px; font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 10px; align-self: flex-start;
}
.champ-compact .champ-delta.profit { background: rgba(0, 214, 143, 0.10); color: var(--profit); }
.champ-compact .champ-delta.loss   { background: rgba(255, 92, 141, 0.10); color: var(--loss); }
.champ-compact .champ-spark { height: 32px; margin: 2px 0 4px; }
.champ-compact .champ-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px 14px; padding-top: 10px; border-top: 1px solid var(--border); margin-top: auto;
}
.champ-compact .champ-stat .k {
  font-size: 9px; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.08em; font-family: var(--font-mono); margin-bottom: 2px;
}
.champ-compact .champ-stat .v {
  font-size: 14px; font-variant-numeric: tabular-nums; font-family: var(--font-mono);
}

/* --- Ranking (middle) ---------------------------------------- */
.rank-mid { padding: 14px 16px; display: flex; flex-direction: column; flex: 1; }
.rank-mid .rank-head {
  display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px;
}
.rank-mid .rank-head .label {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.rank-mid .rank-head .hint {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-muted);
}
.rank-mid .rank-list { display: flex; flex-direction: column; gap: 4px; flex: 1; }
/* F4 sub-C: .rank-row is now a stacked two-tier container
   (.rank-row-primary on top, .rank-row-secondary below). The
   4-col CSS grid that used to live on .rank-row moved down to
   .rank-row-primary so the primary tier renders identically to
   the pre-enrichment single-row layout. The secondary tier holds
   the trades / WR / Sharpe micro-stats that the now-retired
   standalone "Ranking · 7d" table used to carry. */
.rank-mid .rank-row {
  display: flex; flex-direction: column; gap: 2px;
  padding: 7px 10px; border-radius: 6px;
  cursor: pointer; transition: background 0.12s ease;
  font-family: var(--font-mono); font-size: 12px;
}
.rank-mid .rank-row-primary {
  display: grid; grid-template-columns: 22px 1fr auto auto;
  gap: 10px; align-items: center;
}
.rank-mid .rank-row-secondary {
  display: flex; gap: 14px; justify-content: flex-end;
  font-size: 10px; color: var(--text-muted);
  padding-right: 2px;
}
.rank-mid .rank-row-secondary .rank-micro {
  display: inline-flex; align-items: baseline; gap: 4px;
}
.rank-mid .rank-row-secondary .micro-label {
  text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7;
}
.rank-mid .rank-row-secondary .micro-val {
  font-variant-numeric: tabular-nums; color: var(--text);
}
.rank-mid .rank-row:hover { background: var(--card-2); }
.rank-mid .rank-row.selected { background: var(--card-2); box-shadow: inset 2px 0 0 var(--synapse); }
.rank-mid .rank-pos { color: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.rank-mid .rank-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rank-mid .rank-name .lbl {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.rank-mid .rank-equity { font-variant-numeric: tabular-nums; min-width: 90px; text-align: right; }
.rank-mid .rank-ret {
  font-variant-numeric: tabular-nums; min-width: 60px; text-align: right;
  display: inline-flex; align-items: center; gap: 2px; justify-content: flex-end;
}
.rank-mid .rank-ret.profit { color: var(--profit); }
.rank-mid .rank-ret.loss   { color: var(--loss); }

/* --- Top/Worst Performer (right) ----------------------------- */
.perf-rail { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.perf-rail .perf-block { padding: 12px 14px; background: var(--card-2); border-radius: 8px; }
.perf-rail .perf-block.top   { border-left: 3px solid var(--profit); }
.perf-rail .perf-block.worst { border-left: 3px solid var(--loss); }
.perf-rail .perf-lab {
  font-size: 10px; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.10em; font-family: var(--font-mono); margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.perf-rail .perf-lab .arrow.up   { color: var(--profit); }
.perf-rail .perf-lab .arrow.down { color: var(--loss); }
.perf-rail .perf-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.perf-rail .perf-name { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perf-rail .perf-ret  {
  font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums;
  font-family: var(--font-mono); white-space: nowrap;
}
.perf-rail .perf-ret.profit { color: var(--profit); }
.perf-rail .perf-ret.loss   { color: var(--loss); }

/* --- Full-width equity chart --------------------------------- */
.equity-chart-full { width: 100%; margin-bottom: 16px; }
.equity-chart-full .chart-area { height: 380px; padding: 16px 80px 28px 16px; position: relative; }
.equity-chart-full .chart-svg  { width: 100%; height: 100%; }
.equity-chart-full .chart-labels {
  position: absolute; left: 16px; right: 80px; bottom: 8px;
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10px; color: var(--text-muted);
}

/* --- Responsive --------------------------------------------- */
@media (max-width: 1100px) {
  .arena-top-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "champ rank" "perf perf";
  }
  .arena-top-row .champ-compact { grid-area: champ; }
  .arena-top-row .rank-mid      { grid-area: rank; }
  .arena-top-row .perf-rail     { grid-area: perf; }
  .perf-rail { flex-direction: row; }
  .perf-rail .perf-block { flex: 1; }
}
@media (max-width: 720px) {
  .arena-top-row {
    grid-template-columns: 1fr;
    grid-template-areas: "champ" "rank" "perf";
  }
  .perf-rail { flex-direction: column; }
  .equity-chart-full .chart-area { height: 260px; padding: 12px 16px 24px 12px; }
  .equity-chart-full .chart-labels { left: 12px; right: 16px; }
}

/* ─── Position card rail (F4 sub-C) ────────────────────────────────
   Single-column stack of position cards rendered below the equity
   chart when focusedModelId is set. Data source: the sub-B endpoint
   `/api/arena/run/{run_id}/model/{model_id}/positions` (d599ddb).
   Each card carries the MVP+ field set: economics (entry / current /
   move / qty / notional / PnL) on top, risk levels (stop / target /
   max-risk / target%) on a divided second tier, then a meta lane
   (held / updates) and the LLM's entry rationale + confidence. The
   x-cloak rule hides the <aside> during Alpine's pre-init pass so
   the rail doesn't briefly flash empty before the focus state lands.
   ─────────────────────────────────────────────────────────────── */

/* F4 follow-up: the rail now follows .arena-top-row instead of the
   equity chart (Q4=β layout swap). A slightly wider top margin
   gives visual breathing room from the 3-col cluster above. */
.position-rail { margin: 24px 0 16px; }
.position-rail[x-cloak] { display: none; }
.position-rail .rail-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}
.position-rail .rail-label {
  color: var(--text-muted); font-size: 13px; letter-spacing: 0.02em;
}
.position-rail .rail-model {
  color: var(--text); font-weight: 600; font-family: var(--font-mono);
}
.position-rail .rail-count {
  font-family: var(--font-mono); color: var(--text-muted);
  font-size: 11px; font-variant-numeric: tabular-nums;
  display: inline-flex; gap: 4px;
}

.position-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.position-card {
  background: var(--card-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px;
}
.position-card-head {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 8px; align-items: center; margin-bottom: 12px;
}
.position-symbol {
  font-family: var(--font-mono); font-weight: 600; font-size: 15px;
  color: var(--text);
}
.position-side-badge {
  padding: 2px 8px; border-radius: 4px; font-size: 10px;
  font-weight: 600; font-family: var(--font-mono);
  letter-spacing: 0.06em;
}
.position-side-badge.side-long {
  background: rgba(46, 213, 115, 0.15); color: var(--profit);
}
.position-side-badge.side-short {
  background: rgba(255, 99, 132, 0.15); color: var(--loss);
}
.position-side-badge.side-flat {
  background: var(--card-1); color: var(--text-muted);
}
.position-current {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--text); font-weight: 500; font-size: 13px;
}

.position-economics, .position-risk {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px 14px; margin: 0 0 10px 0;
}
.position-risk {
  padding-top: 10px; margin-top: 4px;
  border-top: 1px solid var(--border);
}
.position-economics > div, .position-risk > div {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px;
}
.position-economics dt, .position-risk dt {
  color: var(--text-muted); font-size: 10px;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.position-economics dd, .position-risk dd {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: 500; margin: 0; color: var(--text); font-size: 12px;
}
.position-economics dd.pnl-up,
.position-risk dd.pnl-up   { color: var(--profit); }
.position-economics dd.pnl-down,
.position-risk dd.pnl-down { color: var(--loss); }

.position-meta {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--text-muted);
  margin-bottom: 10px; padding-top: 8px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
}

.position-rationale {
  background: var(--card-1); border-radius: 8px; padding: 10px 12px;
  margin-top: 6px;
}
.position-rationale .rationale-label {
  font-size: 10px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 4px; font-family: var(--font-mono);
}
.position-rationale .rationale-text {
  font-style: italic; color: var(--text);
  font-size: 12px; line-height: 1.5;
}
.position-rationale .rationale-conf {
  margin-top: 6px; font-size: 10px; color: var(--text-muted);
  font-family: var(--font-mono);
}

.position-rail .rail-loading,
.position-rail .rail-empty {
  padding: 14px; text-align: center; color: var(--text-muted);
  font-size: 13px;
}
.position-rail .rail-empty {
  background: var(--card-2); border-radius: 12px;
  border: 1px dashed var(--border);
}

@media (max-width: 800px) {
  .position-grid { grid-template-columns: 1fr; }
}


/* ── Price Chart (chartCard) + admin Full-Reset block ──────────────── */
/* All chart-* rules below are scoped under .chart-card so they don't
   collide with the equity chart's .chart-body / .chart-svg rules
   declared earlier in this file. */
.chart-card { padding: 20px 24px; }
.chart-card .chart-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.chart-card .chart-meta { flex: 1; min-width: 220px; }
.chart-card .card-title {
  font-size: 14px; font-weight: 600;
  margin: 0 0 4px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.chart-card .card-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.chart-card .chart-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}
.chart-card .chart-search {
  width: 220px;
  font-size: 13px;
  font-family: var(--font-mono);
}
.chart-card .interval-toggle { display: flex; gap: 4px; }
.chart-card .interval-btn {
  background: transparent;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  color: var(--text-faint, rgba(255, 255, 255, 0.45));
  padding: 4px 10px;
  font-size: 11px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.chart-card .interval-btn:hover { color: var(--text, rgba(255, 255, 255, 0.9)); }
.chart-card .interval-btn.on {
  background: var(--synapse, #4F62EE);
  border-color: var(--synapse, #4F62EE);
  color: white;
}
.chart-card .chart-body {
  width: 100%;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chart-card .chart-empty-state {
  color: var(--text-faint, rgba(255, 255, 255, 0.45));
  font-size: 14px;
  text-align: center;
  line-height: 1.6;
}
.chart-card .chart-empty-state.err { color: var(--loss, #ef4444); }
.chart-card .chart-empty-state .link-soft { color: var(--profit, #22c55e); }
.chart-card .chart-empty-state .small { font-size: 12px; margin-top: 4px; }
.chart-card .chart-empty-state .muted { color: var(--text-muted); }
.chart-card .chart-svg {
  width: 100%;
  height: 380px;
  display: block;
}
.chart-card .pos { color: var(--profit, #22c55e); }
.chart-card .neg { color: var(--loss, #ef4444); }
.chart-card .muted { color: var(--text-muted); }

/* Admin Full-Reset block (Arena Control tab). Solid-red destructive
   variant of the existing .btn-danger; scoped to .danger-zone so the
   ghost variant elsewhere stays untouched. */
.danger-zone {
  border: 1px solid var(--loss, #ef4444);
  border-radius: 8px;
  padding: 20px;
  margin-top: 24px;
  background: rgba(239, 68, 68, 0.04);
}
.danger-zone .danger-title {
  color: var(--loss, #ef4444);
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.danger-zone .muted { color: var(--text-muted); }
.danger-zone .small { font-size: 12px; line-height: 1.5; }
.danger-zone .btn-danger {
  background: var(--loss, #ef4444);
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 12px;
  font-size: 13px;
}
.danger-zone .btn-danger:hover {
  background: var(--loss, #ef4444);
  filter: brightness(1.1);
}
.danger-zone .btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }
.reset-summary {
  margin-top: 16px;
  background: rgba(0, 0, 0, 0.3);
  padding: 12px;
  border-radius: 4px;
  font-size: 11px;
  white-space: pre-wrap;
  color: var(--text);
}