/* 策略實驗室 — component styles. Every colour, space and radius is a token from tokens.json. */
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 14px; line-height: 22px; -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sl-num, .is-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* preview scaffolding */
.sl-demo { padding: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.sl-demo--col { flex-direction: column; align-items: stretch; }
.sl-demo--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); align-items: stretch; }

/* ---------- Panel */
.sl-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); min-width: 0; }
.sl-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5) 0; flex-wrap: wrap; }
.sl-panel__titles { min-width: 0; }
.sl-panel__title { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; }
.sl-panel__sub { margin: 2px 0 0; font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.sl-panel__actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.sl-panel__body { padding: var(--space-4) var(--space-5) var(--space-5); position: relative; }
.sl-panel--flush .sl-panel__body { padding: var(--space-3) 0 0; }
@media (max-width: 640px) {
  .sl-panel__head { padding: var(--space-4) var(--space-4) 0; }
  .sl-panel__body { padding: var(--space-3) var(--space-4) var(--space-4); }
}

/* ---------- PageHeader */
.sl-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.sl-pagehead__main { min-width: 0; }
.sl-pagehead__back { display: inline-block; margin-bottom: var(--space-2); font-size: 12px; line-height: 18px; color: var(--accent); text-decoration: none; }
.sl-pagehead__back:hover { text-decoration: underline; }
.sl-pagehead__title { margin: 0; font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.01em; }
.sl-pagehead__meta { margin-top: var(--space-2); display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.sl-pagehead__sub { margin-right: var(--space-1); }
.sl-pagehead__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
@media (max-width: 640px) { .sl-pagehead__title { font-size: 22px; line-height: 30px; } }

/* ---------- Button */
.sl-btn { font: inherit; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.sl-btn--md { height: var(--control-md); padding: 0 var(--space-4); font-size: 14px; }
.sl-btn--sm { height: var(--control-sm); padding: 0 var(--space-3); font-size: 12px; }
.sl-btn--primary { background: var(--accent); color: var(--on-accent); }
.sl-btn--primary:hover { filter: brightness(1.08); }
.sl-btn--secondary { background: var(--surface-raised); color: var(--ink); border-color: var(--line-strong); }
.sl-btn--secondary:hover { border-color: var(--ink-muted); }
.sl-btn--ghost { background: transparent; color: var(--ink-muted); }
.sl-btn--ghost:hover { color: var(--ink); background: var(--surface-raised); }
.sl-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- SegmentedControl */
.sl-seg { display: inline-flex; padding: 2px; gap: 2px; border-radius: var(--radius-md); background: var(--surface-raised); border: 1px solid var(--line); }
.sl-seg__opt { font: inherit; font-size: 13px; font-weight: 500; height: 30px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-muted); cursor: pointer; white-space: nowrap; }
.sl-seg__opt:hover { color: var(--ink); }
.sl-seg__opt.is-on { background: var(--accent-soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); }
.sl-seg--sm .sl-seg__opt { height: 24px; font-size: 12px; padding: 0 var(--space-2); }

/* ---------- NumberField */
.sl-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sl-field__label { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }
.sl-field__box { display: flex; align-items: center; height: var(--control-md); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); padding: 0 var(--space-3); }
.sl-field__box:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
.sl-field__input { flex: 1; min-width: 0; font: inherit; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 14px; color: var(--ink); background: transparent; border: 0; outline: none; padding: 0; height: 100%; }
.sl-field__box--select .sl-field__input { font-family: var(--font-sans); cursor: pointer; }
.sl-field__box--select .sl-field__input option { background: var(--surface); color: var(--ink); }
.sl-field__unit { font-size: 12px; color: var(--ink-muted); margin-left: var(--space-2); font-family: var(--font-mono); }
.sl-field__range { -webkit-appearance: none; appearance: none; width: 100%; height: 20px; background: transparent; margin: 2px 0 0; cursor: pointer; }
.sl-field__range::-webkit-slider-runnable-track { height: 4px; border-radius: var(--radius-pill); background: linear-gradient(to right, var(--accent) var(--sl-fill, 0%), var(--line) var(--sl-fill, 0%)); }
.sl-field__range::-moz-range-track { height: 4px; border-radius: var(--radius-pill); background: var(--line); }
.sl-field__range::-moz-range-progress { height: 4px; border-radius: var(--radius-pill); background: var(--accent); }
.sl-field__range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--ink); border: 3px solid var(--accent); }
.sl-field__range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); border: 3px solid var(--accent); }
.sl-field__presets { display: flex; flex-wrap: wrap; gap: 6px; }
.sl-field__hint { margin: 0; font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.sl-chip { font: inherit; font-family: var(--font-mono); font-size: 12px; height: 26px; padding: 0 10px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: transparent; color: var(--ink-muted); cursor: pointer; }
.sl-chip:hover { color: var(--ink); border-color: var(--line-strong); }
.sl-chip.is-on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* ---------- Badge */
.sl-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-sm); font-size: 12px; line-height: 22px; font-weight: 500; white-space: nowrap; background: var(--surface-raised); color: var(--ink-muted); }
.sl-badge__dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; }
.sl-badge--up { background: var(--up-soft); color: var(--up); }
.sl-badge--down { background: var(--down-soft); color: var(--down); }
.sl-badge--live { background: var(--accent-soft); color: var(--live); }
.sl-badge--accent { background: var(--accent-soft); color: var(--accent); }
.sl-badge--warn { background: var(--warn-soft); color: var(--warn); }
.sl-badge--danger { background: var(--danger-soft); color: var(--danger); }

/* ---------- PnL */
.sl-pnl { display: inline-flex; align-items: baseline; gap: var(--space-1); font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sl-pnl--up { color: var(--up); }
.sl-pnl--down { color: var(--down); }
.sl-pnl--flat { color: var(--flat); }
.sl-pnl__arrow { font-size: .7em; transform: translateY(-.08em); }
.sl-pnl__unit { margin-left: .35em; font-size: .72em; color: var(--ink-muted); font-family: var(--font-sans); }
.sl-pnl__amt + .sl-pnl__pct { margin-left: var(--space-1); }
.sl-pnl--sm { font-size: 13px; line-height: 20px; }
.sl-pnl--md { font-size: 14px; line-height: 20px; font-weight: 500; }
.sl-pnl--lg { font-size: 18px; line-height: 24px; font-weight: 500; }
.sl-pnl--xl { font-size: 28px; line-height: 34px; font-weight: 500; letter-spacing: -0.02em; }
.sl-pnl--xl .sl-pnl__unit { font-size: 13px; letter-spacing: 0; }

/* ---------- StatTile */
.sl-stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.sl-stat__label { font-size: 12px; line-height: 20px; font-weight: 500; color: var(--ink-muted); display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); min-height: 20px; }
.sl-stat__value { min-height: 34px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 28px; line-height: 34px; font-weight: 500; letter-spacing: -0.02em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-stat__value .sl-strong { font-family: var(--font-sans); font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: 0; }
.sl-stat__sub { font-size: 12px; line-height: 18px; color: var(--ink-muted); display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap; }

/* ---------- Sparkline */
.sl-spark { display: block; overflow: visible; }
.sl-spark__base { stroke: var(--line); stroke-width: 1; }
.sl-spark__line { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.sl-spark__dot { stroke: var(--surface); stroke-width: 1.5; }
.sl-spark--up .sl-spark__line { stroke: var(--up); } .sl-spark--up .sl-spark__dot { fill: var(--up); }
.sl-spark--down .sl-spark__line { stroke: var(--down); } .sl-spark--down .sl-spark__dot { fill: var(--down); }
.sl-spark--flat .sl-spark__line, .sl-spark--neutral .sl-spark__line { stroke: var(--ink-muted); } .sl-spark--flat .sl-spark__dot, .sl-spark--neutral .sl-spark__dot { fill: var(--ink-muted); }

/* ---------- charts */
.sl-chart { position: relative; width: 100%; min-width: 0; }
.sl-chart svg { display: block; overflow: visible; }
.sl-chart--empty { display: flex; align-items: center; justify-content: center; color: var(--ink-muted); font-size: 13px; border: 1px dashed var(--line); border-radius: var(--radius-md); }
.sl-chart__grid { stroke: var(--line); stroke-width: 1; }
.sl-chart__base { stroke: var(--line-strong); stroke-width: 1; }
.sl-chart__tick { fill: var(--ink-muted); font-family: var(--font-mono); font-size: 11px; }
.sl-chart__value { fill: var(--ink); font-family: var(--font-mono); font-size: 11px; font-weight: 500; }
.sl-chart__line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sl-chart__line--up { stroke: var(--up); }
.sl-chart__line--down { stroke: var(--down); }
.sl-chart__area--up { fill: var(--up); opacity: .1; }
.sl-chart__area--down { fill: var(--down); opacity: .1; }
.sl-chart__dot { stroke: var(--surface); stroke-width: 2; }
.sl-chart__dot--up { fill: var(--up); } .sl-chart__dot--down { fill: var(--down); } .sl-chart__dot--flat { fill: var(--ink-muted); }
.sl-chart__cross { stroke: var(--ink-muted); stroke-width: 1; }
.sl-chart__marker-line { stroke: var(--danger); stroke-width: 1; }
.sl-chart__marker-text { fill: var(--danger); font-size: 11px; font-weight: 600; }
.sl-chart__hit { fill: transparent; cursor: crosshair; }
.sl-bar--up { fill: var(--up); } .sl-bar--down { fill: var(--down); } .sl-bar--flat { fill: var(--ink-muted); }
.is-hover .sl-bar { opacity: .75; }

/* ---------- tooltip */
.sl-tip { position: absolute; z-index: 5; pointer-events: none; min-width: 168px; padding: var(--space-2) 10px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); font-size: 12px; line-height: 18px; color: var(--ink); white-space: nowrap; }
.sl-tip__title { font-weight: 600; margin-bottom: 2px; }
.sl-tip__row { display: flex; justify-content: space-between; gap: var(--space-4); align-items: baseline; }
.sl-tip__k { color: var(--ink-muted); }
.sl-tip__v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- heat scale (calendar + heatmap) */
.sl-heat-u1 { background: var(--heat-up-1); } .sl-heat-u2 { background: var(--heat-up-2); } .sl-heat-u3 { background: var(--heat-up-3); }
.sl-heat-d1 { background: var(--heat-down-1); } .sl-heat-d2 { background: var(--heat-down-2); } .sl-heat-d3 { background: var(--heat-down-3); }
.sl-heat-zero { background: var(--heat-zero); } .sl-heat-empty { background: var(--heat-empty); }
.sl-heatlegend { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--ink-muted); }
.sl-heatlegend i { width: 14px; height: 10px; border-radius: 2px; display: inline-block; }
.sl-heatlegend span:first-child { margin-right: 4px; } .sl-heatlegend span:last-child { margin-left: 4px; }

/* ---------- PnLCalendar */
.sl-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.sl-cal__wd { font-size: 11px; line-height: 16px; color: var(--ink-muted); text-align: center; padding-bottom: 2px; }
.sl-cal__blank { min-height: 52px; }
.sl-cal__cell { font: inherit; min-height: 52px; border: 0; border-radius: var(--radius-sm); padding: 6px 8px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; text-align: left; color: var(--ink); cursor: pointer; position: relative; }
.sl-cal__cell:disabled { cursor: default; }
.sl-cal__cell:not(:disabled):hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.sl-cal__day { font-size: 11px; line-height: 14px; color: var(--ink-muted); font-family: var(--font-mono); }
.sl-cal__amt { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; line-height: 16px; font-weight: 500; }
.sl-cal__cell.is-today { box-shadow: inset 0 0 0 2px var(--accent); }
.sl-cal__cell.is-selected { box-shadow: inset 0 0 0 2px var(--ink); }
.sl-cal__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); }
.sl-cal__sum { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: 12px; color: var(--ink-muted); align-items: baseline; }
.sl-cal__sum b { color: var(--ink); font-family: var(--font-mono); font-weight: 500; }
@media (max-width: 480px) { .sl-cal__cell { min-height: 44px; padding: 4px; } .sl-cal__amt { font-size: 10px; } }

/* ---------- StrategyHeatmap */
.sl-hm { position: relative; }
.sl-hm__scroll { overflow-x: auto; }
.sl-hm__table { display: flex; flex-direction: column; gap: 2px; min-width: max-content; }
.sl-hm__row { display: flex; align-items: center; gap: var(--space-3); border-radius: var(--radius-sm); }
.sl-hm__row[tabindex] { cursor: pointer; }
.sl-hm__row.is-hover, .sl-hm__row:hover { background: var(--surface-raised); }
.sl-hm__row--head { position: sticky; top: 0; background: var(--surface); }
.sl-hm__row--head:hover { background: var(--surface); }
.sl-hm__label { width: 168px; flex: none; display: flex; gap: var(--space-2); align-items: baseline; font-size: 12px; line-height: 16px; overflow: hidden; white-space: nowrap; padding-left: 4px; }
.sl-hm__row--head .sl-hm__label, .sl-hm__day, .sl-hm__row--head .sl-hm__total { color: var(--ink-muted); font-size: 11px; }
.sl-hm__id { font-family: var(--font-mono); color: var(--ink-faint); font-size: 11px; flex: none; }
.sl-hm__name { overflow: hidden; text-overflow: ellipsis; }
.sl-hm__cells { display: grid; grid-template-columns: repeat(var(--sl-hm-cols), 16px); gap: 2px; }
.sl-hm__cell { height: 12px; border-radius: 2px; }
.sl-hm__day { text-align: center; font-family: var(--font-mono); height: 14px; line-height: 14px; }
.sl-hm__day.is-today { color: var(--accent); font-weight: 600; }
.sl-hm__total { width: 76px; flex: none; text-align: right; padding-right: 4px; font-size: 12px; }
.sl-hm__foot { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; align-items: center; margin-top: var(--space-3); }
.sl-hm__note { font-size: 12px; color: var(--ink-muted); }

/* ---------- tables */
.sl-tablewrap { overflow: auto; container-type: inline-size; max-width: 100%; }
.sl-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.sl-table th { position: sticky; top: 0; z-index: 1; background: var(--surface); text-align: left; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); padding: 10px var(--space-3); border-bottom: 1px solid var(--line); white-space: nowrap; }
.sl-table td { padding: 0 var(--space-3); height: var(--row); border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.sl-table--dense td { height: var(--row-dense); font-size: 13px; }
.sl-table th:first-child, .sl-table td:first-child { padding-left: var(--space-5); }
.sl-table th:last-child, .sl-table td:last-child { padding-right: var(--space-5); }
.sl-table .is-num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; }
.sl-table th.is-num { font-family: var(--font-sans); font-size: 12px; }
.sl-table .is-rank { color: var(--ink-faint); width: 40px; }
.sl-table .is-mono { font-size: 13px; color: var(--ink-muted); }
.sl-table tbody tr:last-child td { border-bottom: 0; }
.sl-table tbody tr.is-clickable { cursor: pointer; }
.sl-table tbody tr:hover td { background: var(--surface-raised); }
.sl-table tbody tr.is-selected td { background: var(--accent-soft); }
.sl-table tbody tr:focus-visible { outline-offset: -2px; }
.sl-table__empty { text-align: center; color: var(--ink-muted); height: 96px !important; }
.sl-th-btn { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
.sl-th-btn:hover, .sl-th-btn.is-on { color: var(--ink); }
.sl-th-ind { font-size: 10px; opacity: .6; } .sl-th-btn.is-on .sl-th-ind { opacity: 1; color: var(--accent); }
.sl-strat { display: flex; flex-direction: column; line-height: 18px; }
.sl-strat__name { font-weight: 500; }
.sl-strat__sub { font-family: var(--font-mono); font-size: 11px; line-height: 16px; color: var(--ink-faint); }
@container (max-width: 760px) {
  .sl-col-opt { display: none; }
  .sl-table th:first-child, .sl-table td:first-child { padding-left: var(--space-4); }
  .sl-table th:last-child, .sl-table td:last-child { padding-right: var(--space-4); }
}

/* ---------- SimulationPanel */
.sl-sim { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: var(--space-6); }
.sl-sim__inputs { display: flex; flex-direction: column; gap: var(--space-5); }
.sl-sim__warn { margin: calc(var(--space-3) * -1) 0 0; font-size: 12px; line-height: 18px; color: var(--ink-muted); display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.sl-sim__result { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.sl-sim__headline { display: flex; flex-direction: column; gap: var(--space-1); }
.sl-sim__label { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink-muted); }
.sl-sim__sub { display: flex; gap: var(--space-4); align-items: baseline; flex-wrap: wrap; font-size: 12px; color: var(--ink-muted); }
.sl-sim__sub b { color: var(--ink); font-weight: 500; font-size: 13px; }
.sl-sim__liq { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--danger-soft); color: var(--ink); font-size: 13px; line-height: 20px; flex-wrap: wrap; }
.sl-sim__metrics { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sl-sim__metrics dt { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.sl-sim__metrics dd { margin: 2px 0 0; font-size: 14px; line-height: 20px; }
.sl-sim__note { margin: 0; font-size: 12px; line-height: 18px; color: var(--ink-muted); }
@media (max-width: 860px) { .sl-sim { grid-template-columns: 1fr; } .sl-sim__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- app shell (pages) */
.sl-app { min-height: 100vh; background: var(--bg); }
.sl-topbar { display: flex; align-items: center; gap: var(--space-6); height: 56px; padding: 0 var(--space-6); border-bottom: 1px solid var(--line); background: var(--surface); }
.sl-topbar__brand { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.sl-topbar__mark { width: 18px; height: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.sl-topbar__mark i { border-radius: 2px; }
.sl-topbar__mark i:nth-child(1) { background: var(--up); } .sl-topbar__mark i:nth-child(2) { background: var(--heat-zero); }
.sl-topbar__mark i:nth-child(3) { background: var(--heat-zero); } .sl-topbar__mark i:nth-child(4) { background: var(--down); }
.sl-nav { display: flex; gap: var(--space-1); }
.sl-nav a { font-size: 14px; color: var(--ink-muted); text-decoration: none; padding: 6px var(--space-3); border-radius: var(--radius-md); }
.sl-nav a:hover { color: var(--ink); }
.sl-nav a[aria-current="page"] { color: var(--ink); background: var(--accent-soft); }
.sl-topbar__right { margin-left: auto; display: flex; gap: var(--space-4); align-items: center; font-size: 12px; color: var(--ink-faint); white-space: nowrap; }
.sl-page { max-width: var(--page-max); margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); }
.sl-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }
.sl-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-4); }
.sl-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sl-search { height: var(--control-sm); width: 180px; font: inherit; font-size: 13px; color: var(--ink); background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: 0 var(--space-3); }
.sl-search::placeholder { color: var(--ink-faint); }
@media (max-width: 960px) { .sl-split, .sl-split--even { grid-template-columns: 1fr; } .sl-nav { display: none; } }
@media (max-width: 640px) { .sl-page { padding: var(--space-5) var(--space-4); gap: var(--space-4); } .sl-topbar { padding: 0 var(--space-4); } .sl-topbar__right .sl-hide-sm { display: none; } }
.sl-kv { margin: 0; display: flex; flex-direction: column; }
.sl-kv__row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-3); padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 20px; }
.sl-kv__row:last-child { border-bottom: 0; }
.sl-kv dt { color: var(--ink-muted); }
.sl-kv dd { margin: 0; }