.replay-mode-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:min(640px,100%);margin:0 0 12px;padding:5px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--panel-solid) 74%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.replay-mode-switch button{display:grid;gap:4px;justify-items:start;padding:12px 15px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--muted);cursor:pointer;text-align:left}
.replay-mode-switch button span{font-size:11px;font-weight:800;letter-spacing:.13em}
.replay-mode-switch button small{font-size:10px;letter-spacing:.02em}
.replay-mode-switch button.active{color:var(--text);border-color:color-mix(in srgb,var(--emerald) 42%,var(--line));background:linear-gradient(145deg,color-mix(in srgb,var(--emerald) 14%,transparent),color-mix(in srgb,var(--panel-solid) 88%,transparent));box-shadow:inset 0 1px 0 color-mix(in srgb,var(--emerald) 25%,transparent),0 10px 28px rgba(0,0,0,.15)}
.replay-mode-switch button.active span{color:var(--emerald);text-shadow:0 0 18px color-mix(in srgb,var(--emerald) 32%,transparent)}
.portfolio-bot-field{min-width:0;margin:0;padding:7px 11px;border:1px solid var(--line);border-radius:9px;background:color-mix(in srgb,var(--panel-solid) 80%,transparent);display:flex;align-items:center;gap:12px}
.portfolio-bot-field legend{padding:0 4px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.1em}
.portfolio-bot-field label{display:flex;align-items:center;gap:6px;color:var(--text);font-size:10px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.portfolio-bot-field input{width:15px;height:15px;margin:0;accent-color:var(--emerald)}
body[data-surface="replay"] .control-deck.client-net-mode{grid-template-columns:1.4fr 1.05fr .85fr .85fr .85fr 1fr!important}
.net-economics{display:grid;grid-template-columns:1.25fr .75fr;gap:12px}
.net-cost-card{position:relative;overflow:hidden}
.net-cost-card::after{content:"";position:absolute;right:-80px;bottom:-110px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--emerald) 15%,transparent),transparent 70%);pointer-events:none}
.net-cost-card header>strong{color:var(--emerald);font-size:22px;font-weight:520}
.net-cost-rows{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:15px}
.net-cost-rows>div,.net-allocation-rows>div{position:relative;z-index:1;border:1px solid var(--line);border-radius:10px;padding:13px;background:color-mix(in srgb,var(--panel-solid) 62%,transparent)}
.net-cost-rows span,.net-allocation-rows span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.09em}
.net-cost-rows strong,.net-allocation-rows strong{display:block;margin-top:7px;font-size:16px;font-weight:560}
.net-cost-card>p,.net-break-even>p{color:var(--muted);font-size:11px;line-height:1.65;margin:14px 0 0}
.net-break-even h2{color:var(--emerald)}
.net-allocation-rows{display:grid;gap:7px;margin-top:14px}
.net-allocation-rows>div{display:grid;grid-template-columns:1fr auto;align-items:center}
.net-allocation-rows>div strong{margin:0;text-align:right}
.net-allocation-rows small{grid-column:1/3;color:var(--muted);font-size:10px;margin-top:4px}
@media(max-width:1400px){body[data-surface="replay"] .control-deck.client-net-mode{grid-template-columns:repeat(3,minmax(0,1fr))!important}.net-economics{grid-template-columns:1fr}}
@media(max-width:900px){body[data-surface="replay"] .control-deck.client-net-mode{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:720px){.replay-mode-switch{grid-template-columns:1fr}body[data-surface="replay"] .control-deck.client-net-mode{grid-template-columns:1fr!important}.portfolio-bot-field{flex-wrap:wrap}.net-cost-rows{grid-template-columns:1fr}.net-cost-card header>strong{font-size:18px}}

/* Replay accessibility floor: no visible supporting label is rendered below 10px. */
.brand small,.safety,.eyebrow,.login-card label,.control-deck label,
.dataset-badge span,.dataset-badge small,.control-deck>button small,.metric span,
.chart-actions button,.chart-legend,.chart-axis,.month-cell span,.month-cell b,
.trades-panel header>span,table,.disclosure{font-size:10px}

html[data-theme="light"] body[data-surface="replay"] :is(.control-deck,.metrics,.chart-panel,.panel){
  background:linear-gradient(145deg,#fbfdfc,#e8efed)!important;color:#142127!important;
}
html[data-theme="light"] body[data-surface="replay"] :is(.metric span,.chart-legend,.chart-axis,.net-cost-card p,.net-break-even p,.net-allocation-rows small){color:#52666c!important}
html[data-theme="light"] body[data-surface="replay"] .portfolio-bot-field{background:#f6faf8;color:#142127}
html[data-theme="light"] body[data-surface="replay"] #replayForm :is(input,select){background:#fbfdfc!important;color:#142127!important;border-color:#80989d!important;box-shadow:inset 0 1px 5px rgba(40,65,66,.08)!important}
html[data-theme="light"] body[data-surface="replay"] #metrics.metrics{background:linear-gradient(145deg,#fbfdfc,#e8efed)!important;color:#142127!important}
html[data-theme="light"] body[data-surface="replay"] #metrics .metric{background:transparent!important}
html[data-theme="light"] body[data-surface="replay"] #metrics .metric span{color:#52666c!important}
html[data-theme="light"] body[data-surface="replay"] #metrics .metric strong:not(.good){color:#142127!important}
