:root {
  color-scheme: light;
  --canvas: oklch(0.975 0.008 188);
  --surface: oklch(1 0 0);
  --surface-subtle: oklch(0.955 0.012 188);
  --surface-teal: oklch(0.955 0.035 188);
  --ink: oklch(0.21 0.025 215);
  --ink-soft: oklch(0.42 0.025 215);
  --ink-faint: oklch(0.58 0.02 215);
  --line: oklch(0.89 0.014 200);
  --brand: oklch(0.49 0.125 188);
  --brand-deep: oklch(0.34 0.10 190);
  --success: oklch(0.49 0.14 153);
  --warning: oklch(0.68 0.15 78);
  --danger: oklch(0.55 0.17 27);
  --shadow-soft: 0 6px 18px oklch(0.22 0.025 215 / 0.06);
  --radius-sm: 7px;
  --radius-md: 12px;
  --sidebar: 230px;
  font-family: Inter, "Noto Sans SC", "PingFang SC", system-ui, -apple-system, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--canvas); }
body { margin: 0; min-width: 320px; background: var(--canvas); color: var(--ink); font-size: 14px; line-height: 1.5; }
button, a, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 3px solid oklch(0.58 0.13 188); outline-offset: 3px; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 30; padding: 8px 12px; background: var(--ink); color: white; border-radius: var(--radius-sm); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.demo-shell { display: flex; min-height: 100vh; }

.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 10; display: flex; flex-direction: column; width: var(--sidebar); padding: 25px 16px 18px; border-right: 1px solid var(--line); background: oklch(0.99 0.004 188); }
.brand { display: inline-flex; align-items: center; gap: 10px; padding: 0 8px; color: var(--ink); text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 8px; background: var(--brand); color: white; font-size: 20px; font-weight: 700; letter-spacing: -0.08em; }
.brand-copy { display: grid; line-height: 1.15; }
.brand-copy strong { font-size: 16px; letter-spacing: -0.02em; }
.brand-copy small { margin-top: 3px; color: var(--ink-faint); font-size: 10px; }
.sidebar-rule { height: 1px; margin: 25px 8px 22px; background: var(--line); }
.nav-heading { margin: 0 10px 9px; color: var(--ink-faint); font-size: 11px; font-weight: 600; }
.nav-heading-spaced { margin-top: 30px; }
.nav-list { display: grid; gap: 3px; }
.nav-link { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--ink-soft); text-decoration: none; }
.nav-link:hover { background: var(--surface-subtle); color: var(--ink); }
.nav-link.active { background: var(--surface-teal); color: var(--brand-deep); font-weight: 600; }
.nav-icon { width: 18px; color: currentColor; font-size: 17px; text-align: center; }
.sidebar-bottom { margin-top: auto; display: grid; gap: 16px; }
.health-mini { display: flex; gap: 9px; align-items: flex-start; padding: 11px 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.health-mini div { display: grid; gap: 2px; }
.health-mini strong { font-size: 11px; font-weight: 600; }
.health-mini small { color: var(--ink-faint); font-size: 10px; }
.pulse-dot, .status-dot, .demo-dot { display: inline-block; flex: 0 0 auto; width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px oklch(0.49 0.14 153 / 0.13); }
.account-button { display: flex; align-items: center; gap: 8px; padding: 7px 4px; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; text-align: left; }
.account-button:hover { color: var(--ink); }
.avatar { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: oklch(0.85 0.04 188); color: var(--brand-deep); font-size: 12px; font-weight: 600; }
.chevron { margin-left: auto; color: var(--ink-faint); }

.main-content { width: calc(100% - var(--sidebar)); margin-left: var(--sidebar); padding: 0 44px 35px; }
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 70px; border-bottom: 1px solid var(--line); }
.breadcrumb { display: flex; gap: 9px; align-items: center; color: var(--ink-faint); font-size: 13px; }
.breadcrumb strong { color: var(--ink); font-weight: 600; }
.crumb-separator { color: var(--line); }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.demo-tag { display: inline-flex; gap: 7px; align-items: center; color: var(--ink-soft); font-size: 11px; }
.demo-dot { width: 6px; height: 6px; margin: 0; background: var(--warning); box-shadow: none; }
.icon-button, .outline-button, .ghost-button, .primary-button, .text-button, .more-button { cursor: pointer; }
.icon-button { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-soft); font-size: 17px; }
.icon-button:hover, .outline-button:hover, .ghost-button:hover { border-color: oklch(0.75 0.06 188); color: var(--brand-deep); background: var(--surface-teal); }
.outline-button { min-height: 34px; padding: 6px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-soft); font-size: 12px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding: 46px 0 28px; }
.eyebrow { margin: 0 0 9px; color: var(--brand); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; }
h1, h2, p { margin-top: 0; }
h1 { max-width: 650px; margin-bottom: 9px; font-size: 32px; line-height: 1.17; letter-spacing: -0.035em; font-weight: 650; text-wrap: balance; }
.lede { max-width: 620px; margin-bottom: 0; color: var(--ink-soft); font-size: 15px; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 39px; padding: 9px 14px; border: 1px solid var(--brand); border-radius: var(--radius-sm); background: var(--brand); color: white; font-weight: 600; white-space: nowrap; }
.primary-button:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.primary-button span { font-size: 17px; line-height: 1; }
.full-width { width: 100%; }

.signal-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); background: var(--surface); }
.signal-cell { display: grid; gap: 2px; padding: 15px 18px; border-right: 1px solid var(--line); }
.signal-cell:last-child { border-right: 0; }
.signal-label { color: var(--ink-faint); font-size: 11px; }
.signal-cell strong { color: var(--brand-deep); font-size: 23px; font-variant-numeric: tabular-nums; font-weight: 650; letter-spacing: -0.03em; }
.signal-cell small { color: var(--ink-soft); font-size: 11px; }
.signal-total { color: var(--ink-faint); font-size: 14px; font-weight: 500; }
.signal-time strong { color: var(--ink); font-size: 18px; }

.workspace-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 25px; margin-top: 31px; }
.primary-column, .secondary-column { display: grid; align-content: start; gap: 22px; min-width: 0; }
.match-card, .odds-panel, .history-card, .opportunity-card, .source-status-card, .evidence-card { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.match-card { padding: 20px 22px 15px; }
.match-topline, .match-footline, .panel-heading, .card-heading, .opportunity-header, .section-bar, .match-title-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.match-meta { display: flex; align-items: center; gap: 8px; color: var(--ink-faint); font-size: 11px; }
.live-state { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 7px; border-radius: 5px; font-size: 10px; font-weight: 650; }
.upcoming { background: oklch(0.95 0.035 78); color: oklch(0.44 0.10 78); }
.ghost-button { border: 0; background: transparent; color: var(--ink-faint); font-size: 11px; }
.ghost-button:hover { background: transparent; color: var(--brand); }
.match-title-row { align-items: flex-end; padding: 24px 0 19px; }
.teams h2 { margin-bottom: 6px; font-size: 23px; font-weight: 650; letter-spacing: -0.025em; }
.teams h2 span { margin: 0 5px; color: var(--ink-faint); font-size: 14px; font-weight: 400; }
.teams p { margin: 0; color: var(--ink-faint); font-size: 11px; }
.verified { margin-left: 9px; color: var(--success); }
.match-score { display: grid; justify-items: end; gap: 2px; }
.match-score small { color: var(--ink-faint); font-size: 10px; }
.match-score strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.match-footline { padding-top: 13px; border-top: 1px solid var(--line); color: var(--ink-faint); font-size: 11px; }
.match-footline .status-dot { margin: 0 7px 0 0; }
.text-button { padding: 0; border: 0; background: transparent; color: var(--brand-deep); font-size: 11px; font-weight: 600; }
.text-button:hover { color: var(--brand); text-decoration: underline; }
.section-bar { align-items: flex-end; }
.section-bar h2 { margin: 0 0 3px; font-size: 16px; font-weight: 650; letter-spacing: -0.015em; }
.section-bar p { margin: 0; color: var(--ink-faint); font-size: 11px; }
.format-switch, .range-switch { display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-subtle); }
.format-button, .range-button { min-height: 26px; padding: 4px 9px; border: 0; border-radius: 5px; background: transparent; color: var(--ink-faint); cursor: pointer; font-size: 11px; }
.format-button.selected, .range-button.active { background: var(--surface); color: var(--brand-deep); box-shadow: 0 1px 3px oklch(0.22 0.02 215 / 0.1); font-weight: 650; }
.market-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.market-tab { position: relative; min-height: 37px; padding: 8px 11px; border: 0; background: transparent; color: var(--ink-faint); cursor: pointer; font-size: 12px; }
.market-tab span { margin-left: 5px; color: inherit; font-variant-numeric: tabular-nums; }
.market-tab.active { color: var(--brand-deep); font-weight: 650; }
.market-tab.active::after { position: absolute; right: 8px; bottom: -1px; left: 8px; height: 2px; background: var(--brand); content: ""; }

.odds-panel { overflow: hidden; }
.panel-heading { padding: 18px 20px 12px; }
.panel-heading strong { display: block; font-size: 14px; }
.panel-subtitle { display: block; margin-top: 3px; color: var(--ink-faint); font-size: 11px; }
.source-filter { display: flex; gap: 6px; padding: 0 20px 15px; overflow-x: auto; }
.source-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 27px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink-soft); cursor: pointer; font-size: 11px; white-space: nowrap; }
.source-chip:hover { border-color: oklch(0.75 0.06 188); }
.source-chip.active { border-color: oklch(0.75 0.08 188); background: var(--surface-teal); color: var(--brand-deep); font-weight: 600; }
.source-chip span:last-child { color: var(--ink-faint); font-size: 10px; }
.source-mark { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; font-size: 9px; font-weight: 700; }
.hkjc-mark { background: oklch(0.90 0.05 155); color: oklch(0.37 0.12 153); }
.exchange-mark { width: auto; min-width: 20px; padding: 0 3px; background: oklch(0.91 0.055 75); color: oklch(0.46 0.11 75); }
.ps-mark { background: oklch(0.91 0.035 245); color: oklch(0.42 0.10 245); }
.crown-mark { background: oklch(0.92 0.04 25); color: oklch(0.48 0.13 25); }
.chip-muted { color: var(--ink-faint) !important; }
.odds-table-wrap { overflow-x: auto; }
.odds-table { width: 100%; border-collapse: collapse; min-width: 700px; text-align: left; }
.odds-table th { padding: 10px 20px; border-block: 1px solid var(--line); color: var(--ink-faint); font-size: 10px; font-weight: 600; white-space: nowrap; }
.odds-table td { padding: 13px 20px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.odds-table tbody tr:last-child td { border-bottom: 0; }
.odds-table tbody tr:hover { background: oklch(0.988 0.006 188); }
.source-cell { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.source-cell strong { font-size: 12px; }
.back-badge { padding: 2px 4px; border-radius: 4px; background: var(--surface-teal); color: var(--brand-deep); font-size: 9px; font-weight: 650; }
.table-status, .format-label { color: var(--success); font-size: 11px; font-weight: 600; }
.odds-table td strong { display: block; font-size: 17px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.odds-secondary, .odds-table td small { display: block; margin-top: 2px; color: var(--ink-faint); font-size: 10px; font-variant-numeric: tabular-nums; }
.odds-table td:nth-child(5) strong { font-size: 12px; }
.muted-status { color: var(--ink-faint) !important; }
.is-unavailable { background: oklch(0.985 0.004 215); }
.missing-copy { color: var(--ink-faint); font-size: 11px; }
.panel-footnote { display: flex; gap: 8px; align-items: flex-start; padding: 12px 20px 14px; background: var(--surface-subtle); color: var(--ink-soft); font-size: 11px; }
.info-icon { display: inline-grid; place-items: center; width: 15px; height: 15px; border: 1px solid oklch(0.70 0.035 188); border-radius: 50%; color: var(--brand-deep); font-size: 10px; font-weight: 700; }

.history-card { padding: 19px 20px 0; }
.section-bar.compact { align-items: flex-start; }
.chart-wrap { display: flex; gap: 8px; margin-top: 20px; }
.chart-y-labels { display: grid; align-content: space-between; padding: 2px 0 20px; color: var(--ink-faint); font-size: 10px; font-variant-numeric: tabular-nums; }
.line-chart { width: 100%; height: 188px; overflow: visible; }
.line-chart line { stroke: var(--line); stroke-width: 1; }
.line-chart polyline { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.line-hkjc { stroke: var(--success); }
.line-198 { stroke: var(--brand); }
.point-hkjc { fill: var(--success); }
.point-198 { fill: var(--brand); }
.chart-marker { stroke: oklch(0.68 0.15 78) !important; stroke-dasharray: 3 4; }
.line-chart text { fill: var(--ink-faint); font-size: 10px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 18px; padding: 3px 0 17px 26px; color: var(--ink-soft); font-size: 11px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-line { width: 17px; height: 2px; }
.hkjc-line { background: var(--success); }.exchange-line { background: var(--brand); }
.chart-legend strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.chart-event { color: var(--ink-faint) !important; }.chart-event i { width: 6px; height: 6px; border-radius: 50%; background: var(--warning); }
.history-events { margin-inline: -20px; border-top: 1px solid var(--line); }
.event-row { display: grid; grid-template-columns: 76px 102px 1fr auto; gap: 10px; align-items: center; min-height: 45px; padding: 8px 20px; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: 11px; }
.event-row:last-child { border-bottom: 0; }.event-row time { color: var(--ink-faint); font-variant-numeric: tabular-nums; }.event-row strong { color: var(--ink); }.event-source { font-weight: 600; }.hkjc-text { color: oklch(0.40 0.11 153); }.exchange-text { color: oklch(0.46 0.11 75); }.crown-text { color: oklch(0.48 0.13 25); }
.event-type { padding: 3px 6px; border-radius: 4px; font-size: 10px; white-space: nowrap; }.event-type.changed { background: oklch(0.95 0.025 188); color: var(--brand-deep); }.event-type.warning { background: oklch(0.96 0.035 78); color: oklch(0.46 0.10 78); }

.secondary-column > article { padding: 19px; }
.opportunity-card { background: var(--brand-deep); border-color: var(--brand-deep); color: white; }
.opportunity-kicker { color: oklch(0.85 0.05 188); font-size: 11px; }.classification-pill { padding: 4px 7px; border-radius: 5px; background: oklch(0.87 0.09 153); color: oklch(0.31 0.09 153); font-size: 10px; font-weight: 700; }
.margin-value { display: flex; align-items: baseline; justify-content: space-between; margin-top: 23px; }.margin-value span { color: oklch(0.78 0.04 188); font-size: 11px; }.margin-value strong { font-size: 31px; font-weight: 650; letter-spacing: -0.04em; }.margin-value strong span { margin-left: 2px; color: inherit; font-size: 15px; }
.margin-bar { height: 4px; margin: 10px 0 13px; overflow: hidden; border-radius: 3px; background: oklch(0.26 0.07 190); }.margin-bar span { display: block; width: 72%; height: 100%; background: oklch(0.72 0.13 153); }
.opportunity-copy { color: oklch(0.84 0.03 188); font-size: 11px; }.opportunity-copy strong { color: white; }.legs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 7px; align-items: center; margin: 17px 0; }.legs div:not(.leg-arrow) { display: grid; gap: 3px; padding: 9px; border: 1px solid oklch(0.62 0.06 188 / 0.5); border-radius: 7px; }.legs small { color: oklch(0.78 0.04 188); font-size: 9px; }.legs strong { font-size: 10px; }.legs span { color: oklch(0.80 0.04 188); font-size: 10px; }.legs b { color: white; }.leg-arrow { color: oklch(0.76 0.08 188); font-size: 15px; }.opportunity-meta { display: flex; justify-content: space-between; padding: 11px 0; border-top: 1px solid oklch(0.62 0.06 188 / 0.5); color: oklch(0.80 0.04 188); font-size: 10px; }.opportunity-meta .status-dot { margin: 0 5px 0 0; background: oklch(0.76 0.15 153); box-shadow: none; }
.opportunity-card .primary-button { background: white; border-color: white; color: var(--brand-deep); }.opportunity-card .primary-button:hover { background: oklch(0.93 0.03 188); }
.card-heading { align-items: flex-start; margin-bottom: 16px; }.card-heading h2 { margin: 0 0 3px; font-size: 15px; font-weight: 650; }.card-heading p { margin: 0; color: var(--ink-faint); font-size: 11px; }.more-button { border: 0; background: transparent; color: var(--ink-faint); font-size: 17px; }.lock-mark { padding: 3px 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink-faint); font-size: 10px; }
.source-status-card { padding-bottom: 13px !important; }.source-status-row { display: flex; gap: 9px; align-items: center; min-height: 48px; border-top: 1px solid var(--line); }.source-status-row > div { display: grid; gap: 1px; flex: 1; }.source-status-row strong { font-size: 11px; }.source-status-row small { color: var(--ink-faint); font-size: 10px; }.status-word { font-size: 10px; font-weight: 650; }.status-word.good { color: var(--success); }.status-word.pending { color: oklch(0.53 0.12 78); }.source-status-card .text-button { margin-top: 13px; }
.evidence-card { background: var(--surface-subtle); }.evidence-list { display: grid; gap: 0; margin: 0 0 15px; }.evidence-list div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }.evidence-list dt { color: var(--ink-faint); font-size: 10px; }.evidence-list dd { max-width: 160px; margin: 0; color: var(--ink); font-size: 10px; font-weight: 600; text-align: right; overflow-wrap: anywhere; }.good-text { color: var(--success); }
.align-left { display: block; text-align: left; }
.demo-footer { display: flex; justify-content: space-between; gap: 15px; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-faint); font-size: 10px; }.demo-footer b { color: var(--ink-soft); font-weight: 650; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 25; max-width: min(360px, calc(100vw - 48px)); padding: 11px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--ink); color: white; box-shadow: var(--shadow-soft); opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; font-size: 12px; }.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 1100px) {
  :root { --sidebar: 204px; }
  .main-content { padding-inline: 28px; }
  .workspace-grid { grid-template-columns: minmax(0, 1fr) 270px; gap: 18px; }
  .event-row { grid-template-columns: 68px 88px 1fr auto; padding-inline: 15px; }
}
@media (max-width: 820px) {
  :root { --sidebar: 0px; }
  .sidebar { position: sticky; top: 0; width: 100%; height: auto; min-height: 58px; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar-rule, .nav-heading, .nav-list, .health-mini { display: none; }
  .sidebar-bottom { margin: 0 0 0 auto; }.account-button { padding: 0; }.account-button > span:not(.avatar):not(.chevron) { display: none; }
  .demo-shell { display: block; }.main-content { width: 100%; margin: 0; padding: 0 20px 28px; }.topbar { min-height: 58px; }.topbar-actions .outline-button { display: none; }.page-heading { align-items: flex-start; flex-direction: column; gap: 20px; padding: 32px 0 23px; }.page-heading .primary-button { width: 100%; }.signal-strip { grid-template-columns: repeat(2, 1fr); }.signal-cell:nth-child(2) { border-right: 0; }.signal-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.signal-time strong { font-size: 16px; }.workspace-grid { grid-template-columns: 1fr; margin-top: 24px; }.secondary-column { grid-row: 1; }.opportunity-card { order: -1; }.demo-footer { flex-direction: column; }
}
@media (max-width: 560px) {
  .main-content { padding-inline: 14px; }.demo-tag { display: none; }.breadcrumb { font-size: 12px; }.page-heading { padding-top: 27px; }.eyebrow { font-size: 9px; } h1 { font-size: 27px; }.lede { font-size: 13px; }.signal-cell { padding: 13px 12px; }.signal-cell strong { font-size: 20px; }.signal-label, .signal-cell small { font-size: 10px; }.match-card, .secondary-column > article, .history-card { padding-inline: 14px; }.match-meta { flex-wrap: wrap; }.match-title-row { align-items: flex-start; flex-direction: column; gap: 14px; padding-block: 20px 15px; }.match-score { justify-items: start; }.match-footline { align-items: flex-start; flex-wrap: wrap; }.match-footline .text-button { width: 100%; }.section-bar { align-items: flex-start; flex-direction: column; }.format-switch { align-self: stretch; }.format-button { flex: 1; }.panel-heading { align-items: flex-start; padding-inline: 14px; }.source-filter { padding-inline: 14px; }.odds-table th, .odds-table td { padding-inline: 14px; }.chart-legend { padding-left: 0; gap: 10px; }.event-row { grid-template-columns: 67px 1fr auto; gap: 7px; padding-inline: 14px; }.event-row > span:nth-child(3) { grid-column: 2 / -1; grid-row: 2; }.event-type { grid-column: 3; grid-row: 1; }.legs { grid-template-columns: 1fr; }.leg-arrow { display: none; }.opportunity-meta { gap: 8px; flex-wrap: wrap; }.secondary-column > article { padding-block: 16px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }

/* Admin-only controls and simulation readiness surface */
.admin-card { background: oklch(0.982 0.018 78); border-color: oklch(0.89 0.07 78) !important; }
.admin-badge { padding: 3px 6px; border-radius: 4px; background: oklch(0.93 0.08 78); color: oklch(0.46 0.11 78); font-size: 10px; font-weight: 650; }
.admin-identity { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; padding: 9px; border: 1px solid oklch(0.89 0.07 78); border-radius: 7px; background: oklch(0.98 0.03 78); }
.admin-shield { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: oklch(0.56 0.14 153); color: white; font-size: 11px; }
.admin-identity div { display: grid; gap: 1px; }.admin-identity strong { font-size: 10px; }.admin-identity small { color: var(--ink-soft); font-size: 9px; }
.admin-toggle { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 13px; cursor: pointer; }.admin-toggle input { accent-color: var(--brand); margin-top: 3px; }.admin-toggle span { display: grid; gap: 2px; }.admin-toggle strong { font-size: 11px; }.admin-toggle small { color: var(--ink-soft); font-size: 10px; }
.mini-field { display: grid; gap: 5px; margin-bottom: 12px; color: var(--ink-faint); font-size: 10px; }.mini-field input { width: 100%; min-height: 31px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: 11px; }
.admin-meta { display: flex; justify-content: space-between; gap: 8px; padding: 9px 0; border-top: 1px solid oklch(0.89 0.07 78); color: var(--ink-faint); font-size: 10px; }.admin-meta strong { color: var(--ink-soft); font-size: 10px; }.admin-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 13px; }.admin-actions .primary-button, .admin-actions .outline-button { min-height: 31px; padding: 6px 9px; font-size: 10px; }
.simulation-section { margin-top: 27px; padding-top: 2px; }.phase-pill { padding: 5px 8px; border: 1px solid oklch(0.86 0.055 78); border-radius: 5px; background: oklch(0.96 0.045 78); color: oklch(0.46 0.10 78); font-size: 10px; font-weight: 650; white-space: nowrap; }.simulation-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(330px, 1fr) auto; gap: 15px; align-items: center; margin-top: 15px; padding: 17px 19px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }.simulation-status { display: flex; gap: 11px; align-items: flex-start; }.simulation-icon { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px; background: var(--surface-subtle); color: var(--ink-faint); font-size: 20px; }.simulation-status strong { font-size: 12px; }.simulation-status p { max-width: 48ch; margin: 4px 0 0; color: var(--ink-soft); font-size: 11px; }.simulation-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }.simulation-facts div { display: grid; gap: 2px; padding-inline: 12px; border-left: 1px solid var(--line); }.simulation-facts span { color: var(--ink-faint); font-size: 9px; }.simulation-facts strong { font-size: 11px; }.simulation-facts small { color: var(--ink-soft); font-size: 9px; }.simulation-grid > .outline-button { white-space: nowrap; }.simulation-grid > .outline-button:disabled { cursor: not-allowed; opacity: .55; }.simulation-note { display: flex; gap: 8px; align-items: flex-start; margin: 11px 0 0; color: var(--ink-faint); font-size: 10px; }.simulation-note .info-icon { flex: 0 0 auto; margin-top: 1px; }
@media (max-width: 820px) { .simulation-grid { grid-template-columns: 1fr; }.simulation-grid > .outline-button { width: 100%; } }
@media (max-width: 560px) { .simulation-section .section-bar { flex-direction: row; align-items: flex-start; }.simulation-section .section-bar .phase-pill { flex: 0 0 auto; }.simulation-facts div { padding-inline: 7px; }.simulation-facts div:first-child { padding-left: 0; border-left: 0; } }