/* Quiver dashboard. Colour tokens follow a validated light/dark palette (see dataviz reference);
   the dark set is its own stepped palette, not an inverted light one. */
:root {
  color-scheme: light;
  --bg: #f9f9f7; --surface: #fcfcfb; --surface-2: #f3f2ee; --surface-3: #ebeae4;
  --ink: #0b0b0b; --ink-2: #52514e; --muted: #898781; --grid: #e1e0d9; --axis: #c3c2b7;
  --border: rgba(11, 11, 11, .10);
  --accent: #2a78d6; --pos: #006300; --neg: #d03b3b; --warn: #fab219;
  --warn-wash: rgba(250, 178, 25, .22); --good-wash: rgba(12, 163, 12, .14);
  --bad-wash: rgba(208, 59, 59, .14); --accent-wash: rgba(42, 120, 214, .14);
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100;
  --series-5: #e87ba4; --series-6: #008300; --series-7: #6250d6; --series-8: #e34948;
  --viz-up: #2a78d6; --viz-down: #e34948;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0d0d0d; --surface: #1a1a19; --surface-2: #222221; --surface-3: #2c2c2a;
    --ink: #f0efec; --ink-2: #c3c2b7; --muted: #898781; --grid: #2c2c2a; --axis: #383835;
    --border: rgba(255, 255, 255, .10);
    --accent: #3987e5; --pos: #0ca30c; --neg: #e66767;
    --warn-wash: rgba(250, 178, 25, .24); --good-wash: rgba(12, 163, 12, .24);
    --bad-wash: rgba(230, 103, 103, .22); --accent-wash: rgba(57, 135, 229, .24);
    --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
    --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767;
    --viz-up: #3987e5; --viz-down: #e66767;
  }
}

* { box-sizing: border-box; }
html { font-size: 15px; }
body { margin: 0; background: var(--bg); color: var(--ink); line-height: 1.45;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
pre { background: var(--surface-2); padding: 10px 12px; border-radius: 6px; overflow-x: auto; margin: 0; }
h1 { font-size: 1.6rem; margin: 0 0 4px; line-height: 1.2; }
h2 { font-size: 1.1rem; margin: 28px 0 10px; }
h2 .small { font-weight: 400; }
.muted { color: var(--ink-2); }
.small { font-size: .85rem; }
.nowrap { white-space: nowrap; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }

/* nav */
.topbar { position: sticky; top: 0; z-index: 10; background: var(--surface); border-bottom: 1px solid var(--border); }
.nav { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 4px; height: 48px; }
.nav a { color: var(--ink-2); padding: 6px 10px; border-radius: 6px; font-weight: 500; }
.nav a:hover { background: var(--surface-2); text-decoration: none; }
.nav a.active { color: var(--ink); background: var(--surface-3); }
.nav .brand { font-weight: 700; color: var(--ink); margin-right: 8px; letter-spacing: .02em; }
.nav .logout { margin-left: auto; }
.linklike { background: none; border: 0; color: var(--ink-2); font: inherit; cursor: pointer; padding: 6px 10px; border-radius: 6px; }
.linklike:hover { background: var(--surface-2); }

/* layout */
.page { max-width: 1200px; margin: 0 auto; padding: 20px 20px 60px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.head-actions { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.crumbs { margin: 0; color: var(--muted); font-size: .85rem; }
.meta-line { margin: 4px 0; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.verdict-line { margin: 6px 0 0; }
.notes { color: var(--ink-2); white-space: pre-wrap; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.two-col > * { min-width: 0; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; }
.panel h2 { margin-top: 0; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
.kv dt { color: var(--ink-2); }
.kv dd { margin: 0; font-variant-numeric: tabular-nums; }
details.panel summary { cursor: pointer; font-weight: 600; }
details.panel > *:not(summary) { margin-top: 10px; }

/* controls */
.btn { display: inline-block; padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
  color: var(--ink); font: inherit; cursor: pointer; line-height: 1.3; }
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent); filter: brightness(1.08); }
.btn-danger { color: var(--neg); border-color: var(--neg); }
.btn-danger:hover { background: var(--bad-wash); }
.btn-ghost { border-color: transparent; }
.btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
summary.btn { list-style: none; }
summary.btn::-webkit-details-marker { display: none; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
textarea { width: 100%; resize: vertical; }
label { display: flex; flex-direction: column; gap: 3px; font-size: .85rem; color: var(--ink-2); }
label > input, label > select, label > textarea { color: var(--ink); font-size: .95rem; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 14px; }
.filters input[type=search] { min-width: 200px; flex: 1 1 200px; }
.filters.inline { margin: 0; }
.toggle { flex-direction: row; align-items: center; gap: 6px; cursor: pointer; }
.form-actions { display: flex; gap: 8px; }

/* tables */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.small { font-size: .82rem; }
th, td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--grid); vertical-align: top; }
th { color: var(--ink-2); font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
th.n, td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody tr:nth-child(even) { background: var(--surface-2); }
tbody tr:hover { background: var(--surface-3); }
tbody tr:last-child td { border-bottom: 0; }
.sortable th:not([data-nosort]) { cursor: pointer; user-select: none; }
.sortable th:not([data-nosort]):hover { color: var(--ink); }
.sortable th[data-dir="asc"]::after { content: " \25B4"; }
.sortable th[data-dir="desc"]::after { content: " \25BE"; }
td.empty { text-align: center; color: var(--muted); padding: 28px; }
.runs-table { font-size: .82rem; }
.runs-table th, .runs-table td { padding: 6px 7px; }
.runs-table th { letter-spacing: .01em; }
.run-name { font-weight: 600; }
.tags { margin-top: 2px; }
.tag { display: inline-block; font-size: .72rem; padding: 0 7px; border-radius: 999px; background: var(--surface-3); color: var(--ink-2); margin-right: 4px; }
.excerpt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 560px; }
.metrics-table td:first-child { color: var(--ink-2); }
.corr-table th:first-child { text-transform: none; letter-spacing: 0; font-size: .82rem; }
.all-row td { font-weight: 600; border-top: 2px solid var(--axis); }

/* badges & flags (status colours always travel with a text label) */
.badge { display: inline-block; font-size: .75rem; padding: 1px 8px; border-radius: 999px; background: var(--surface-3); color: var(--ink); border: 1px solid var(--border); white-space: nowrap; }
a.badge:hover { text-decoration: none; filter: brightness(.95); }
.badge.verdict-confirmed, .badge.status-tested-oos, .badge.status-paper, .badge.src-live { background: var(--good-wash); }
.badge.verdict-rejected, .badge.status-rejected { background: var(--bad-wash); }
.badge.verdict-inconclusive, .badge.status-hypothesis { background: var(--warn-wash); }
.badge.status-tested-is, .badge.src-paper { background: var(--accent-wash); }
.flag { background: var(--warn-wash); border-left: 3px solid var(--warn); padding: 1px 6px; border-radius: 3px; }
.notice { background: var(--warn-wash); border-left: 3px solid var(--warn); padding: 8px 12px; border-radius: 4px; }
.error { background: var(--bad-wash); color: var(--neg); padding: 8px 12px; border-radius: 6px; }

/* metric cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.card .label { font-size: .72rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: .03em; }
.card .value { font-size: 1.45rem; font-weight: 600; margin-top: 2px; }
.card .hint { font-size: .75rem; color: var(--muted); margin-top: 2px; }

/* charts */
.chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.chart-head h2 { margin-bottom: 6px; }
.chart { position: relative; width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px; margin-bottom: 8px; }
.legend-list { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.swatch { display: inline-block; width: 14px; height: 4px; border-radius: 2px; vertical-align: middle; margin-right: 6px; background: var(--muted); }
.s1 { background: var(--series-1); } .s2 { background: var(--series-2); } .s3 { background: var(--series-3); } .s4 { background: var(--series-4); }
.s5 { background: var(--series-5); } .s6 { background: var(--series-6); } .s7 { background: var(--series-7); } .s8 { background: var(--series-8); }

/* run page extras */
.edit-box { position: relative; }
.edit-form { position: absolute; right: 0; top: 38px; z-index: 5; width: min(440px, 92vw); background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px; display: grid; gap: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .14); }
.danger-zone { margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.confirm-box { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--bad-wash); padding: 10px 12px; border-radius: 8px; }

/* login */
.login-box { max-width: 360px; margin: 12vh auto 0; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 28px; }
.login-box form { display: grid; gap: 12px; margin-top: 12px; }

/* journal */
.journal-form { display: grid; gap: 12px; }
.form-row { display: flex; gap: 10px; flex-wrap: wrap; }
.form-row .grow { flex: 1 1 260px; }
.editor { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.editor textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; min-height: 440px; }
.editor .label { font-size: .85rem; color: var(--ink-2); margin-bottom: 3px; }
.md { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px 18px; min-height: 120px; overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md h1 { font-size: 1.35rem; margin-top: .6em; }
.md h2 { font-size: 1.1rem; margin: 1.2em 0 .4em; }
.md h3 { font-size: 1rem; }
.md table { width: auto; margin: 8px 0; }
.md th, .md td { border: 1px solid var(--grid); }
.md pre { margin: 10px 0; }
.md blockquote { border-left: 3px solid var(--axis); margin: 0; padding-left: 12px; color: var(--ink-2); }
.md img { max-width: 100%; }
.md-raw { white-space: pre-wrap; background: none; padding: 0; font-size: .9rem; }

@media (max-width: 760px) {
  .page { padding: 14px 14px 48px; }
  .nav { padding: 0 10px; }
  .two-col, .editor { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .card .value { font-size: 1.25rem; }
  .edit-form { position: static; width: 100%; box-shadow: none; margin-top: 8px; }
}

/* strategies page */
.badge{display:inline-block;padding:.1rem .45rem;border-radius:.5rem;font-size:.8em;background:#8884;white-space:nowrap}
.badge-in-sample{background:#4a90e233}.badge-robustness{background:#9b59b633}.badge-walk-forward{background:#16a08533}
.badge-hold-out{background:#e67e2233}.badge-qc-confirm{background:#2c3e5033;color:inherit}.badge-paper{background:#f1c40f33}.badge-live{background:#e74c3c33}
.badge-rejected{background:#e74c3c33}
.kv th{text-align:left;padding:.15rem .6rem .15rem 0;white-space:nowrap;vertical-align:top}.kv td{padding:.15rem 0}

.strat-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
@media (max-width:800px){.strat-grid{grid-template-columns:1fr}}
.strat-grid h3,section.card h3{margin:.6rem 0 .3rem;font-size:.95rem;text-transform:uppercase;letter-spacing:.04em;opacity:.75}
.params{background:#8881;padding:.6rem .8rem;border-radius:.5rem;font-size:.85rem;line-height:1.5;overflow-x:auto}
.kv code{background:#8882;padding:0 .3rem;border-radius:.3rem}
.verdict{padding:.6rem .8rem;border-left:3px solid #e67e22;background:#e67e2211;border-radius:.3rem}
.small{font-size:.85rem}

/* index provenance: inferred values are dotted, edited values are listed */
.badge.inferred { border-style: dashed; }
.inferred-mark { text-decoration: underline dotted var(--muted); text-underline-offset: 3px; }
code.wrap { white-space: normal; overflow-wrap: anywhere; }
.export-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.artifacts td, .artifacts th { padding: 4px 8px; }
.edit-form-reset { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.btn.small { font-size: .8rem; padding: 3px 8px; }
tr.auto-sep td { background: var(--surface-3); color: var(--ink-2); font-size: .8rem; }
tr.auto-row td:first-child .badge { border-style: dashed; }

.badge-benchmark-fail{background:#e67e2233}.badge-paper-ready{background:#27ae6033}.badge-benchmark{background:#8e44ad33}

.coverage table td{vertical-align:top}.cov-todo td:nth-child(4){color:#c0392b}.cov-partial td:nth-child(4){color:#d68910}.cov-done td:nth-child(4){color:#1e8449}

/* ================================================================ broker pages (bk-*) ================================== */
:root { --live: #d9480f; --live-wash: rgba(217, 72, 15, .10); --paper: #3b5bdb; --paper-wash: rgba(59, 91, 219, .10);
  --ok: #2b8a3e; --ok-wash: rgba(43, 138, 62, .12); --ac-equity: #3b5bdb; --ac-futures: #e8590c; --ac-forex: #0c8599;
  --ac-crypto: #ae3ec9; --ac-option: #f08c00; --ac-other: #868e96; --radius: 12px; --shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.05); }
@media (prefers-color-scheme: dark) {
  :root { --live: #ff8a4c; --live-wash: rgba(255, 138, 76, .14); --paper: #7c94ff; --paper-wash: rgba(124, 148, 255, .14);
    --ok: #51cf66; --ok-wash: rgba(81, 207, 102, .14); --ac-equity: #7c94ff; --ac-futures: #ff8a4c; --ac-forex: #3bc9db;
    --ac-crypto: #da77f2; --ac-option: #ffc078; --ac-other: #adb5bd; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3); }
}
.bk { font-variant-numeric: tabular-nums; }
.bk .n, .bk td.n { font-variant-numeric: tabular-nums; }
.bk-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.bk-head h1 { margin: 0; font-size: 1.7rem; letter-spacing: -.01em; }
.bk-head .sub { color: var(--ink-2); font-size: .9rem; margin-top: 4px; }
.bk-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.bk-actions form { margin: 0; }
.bk-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); font-size: .88rem; cursor: pointer; font-weight: 500; }
.bk-btn:hover { background: var(--surface-2); text-decoration: none; }
.bk-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.bk-btn.primary:hover { filter: brightness(1.08); }
.bk-btn svg { width: 15px; height: 15px; }
.bk-market { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--surface-2);
  font-size: .85rem; color: var(--ink-2); max-width: 100%; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--muted); flex: none; }
.dot.ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-wash); }
.dot.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-wash); }
.dot.bad { background: var(--neg); box-shadow: 0 0 0 3px var(--bad-wash); }
.dot.live { background: var(--live); } .dot.paper { background: var(--paper); }

/* KPI tiles */
.bk-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 12px; margin-bottom: 16px; }
.bk-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow);
  position: relative; overflow: hidden; min-width: 0; }
.bk-kpi .k { font-size: .78rem; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.bk-kpi .v { font-size: 1.55rem; font-weight: 700; margin-top: 4px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-kpi .s { font-size: .82rem; color: var(--ink-2); margin-top: 2px; }
.bk-kpi.live::before, .bk-kpi.paper::before, .bk-kpi.state::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.bk-kpi.live::before { background: var(--live); } .bk-kpi.paper::before { background: var(--paper); }
.bk-kpi.state.ok::before { background: var(--ok); } .bk-kpi.state.warn::before { background: var(--warn); } .bk-kpi.state.bad::before { background: var(--neg); }
.bk-kpi.small .v { font-size: 1.15rem; }

/* pills */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600;
  white-space: nowrap; line-height: 1.6; }
.pill.live { background: var(--live); color: #fff; } .pill.paper { background: var(--paper); color: #fff; }
.pill.pos { background: var(--ok-wash); color: var(--pos); } .pill.neg { background: var(--bad-wash); color: var(--neg); }
.pill.flat { background: var(--surface-3); color: var(--ink-2); }
.pill.ok { background: var(--ok-wash); color: var(--pos); } .pill.open { background: var(--warn-wash); color: var(--ink); }
.pill.bad { background: var(--bad-wash); color: var(--neg); } .pill.muted { background: var(--surface-3); color: var(--ink-2); font-weight: 500; }
.pill.big { font-size: .95rem; padding: 4px 12px; }
.tagc { display: inline-block; font-size: .72rem; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--ink-2); margin-left: 4px; white-space: nowrap; }

/* alerts */
.bk-alerts { display: grid; gap: 6px; margin: 0 0 16px; }
.bk-alert { display: flex; gap: 10px; align-items: center; padding: 9px 14px; border-radius: 10px; font-size: .9rem; border: 1px solid transparent; min-width: 0; }
.bk-alert > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.bk-alert.warn { background: var(--warn-wash); border-color: rgba(250, 178, 25, .35); }
.bk-alert.bad { background: var(--bad-wash); border-color: rgba(208, 59, 59, .3); }
.bk-alert a { font-weight: 600; }

/* filter chips */
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 14px; }
.chip-btn { border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 5px 13px;
  font-size: .85rem; cursor: pointer; }
.chip-btn:hover { background: var(--surface-2); }
.chip-btn.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.chip-btn .c { opacity: .7; margin-left: 4px; }

/* account cards */
.bk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 16px; }
.bk-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); color: inherit; overflow: hidden; transition: transform .12s ease, box-shadow .12s ease; min-width: 0; }
.bk-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 10px 24px rgba(0,0,0,.08); text-decoration: none; }
.bk-card .band { height: 4px; background: var(--paper); } .bk-card.live .band { background: var(--live); }
.bk-card .body { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.bk-card .top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bk-card .top .who { margin-left: auto; }
.bk-card .who { font-size: .8rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-card .name { font-size: 1.08rem; font-weight: 650; line-height: 1.3; }
.bk-card .strat { font-size: .85rem; color: var(--ink-2); margin-top: -4px; }
.bk-card .eqrow { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.bk-card .eq { font-size: 1.9rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.1; }
.bk-card .eq .cur { font-size: .85rem; font-weight: 500; color: var(--ink-2); margin-left: 4px; letter-spacing: 0; }
.bk-card .since { font-size: .8rem; color: var(--ink-2); }
.spark2 { display: block; width: 100%; height: 56px; }
.spark2 .ln { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.spark2.up .ln { stroke: var(--pos); } .spark2.down .ln { stroke: var(--neg); }
.spark2.up .ar { fill: var(--ok-wash); } .spark2.down .ar { fill: var(--bad-wash); }
.spark-empty { height: 56px; border-radius: 8px; background: repeating-linear-gradient(90deg, var(--surface-2), var(--surface-2) 6px, transparent 6px, transparent 12px);
  display: flex; align-items: center; justify-content: center; font-size: .78rem; color: var(--muted); }
.minis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mini { background: var(--surface-2); border-radius: 8px; padding: 6px 8px; min-width: 0; }
.mini .k { font-size: .7rem; color: var(--ink-2); white-space: nowrap; }
.mini .v { font-size: .95rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.allocbar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--surface-3); }
.allocbar span { display: block; height: 100%; }
.ac-equity { background: var(--ac-equity); } .ac-futures { background: var(--ac-futures); } .ac-forex { background: var(--ac-forex); }
.ac-crypto { background: var(--ac-crypto); } .ac-option { background: var(--ac-option); } .ac-other { background: var(--ac-other); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .75rem; color: var(--ink-2); }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.bk-card .foot { border-top: 1px solid var(--border); padding: 9px 16px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  font-size: .8rem; color: var(--ink-2); background: var(--surface-2); }
.bk-card .foot span { display: inline-flex; align-items: center; gap: 6px; }
.bk-card.lv-warn .foot { background: var(--warn-wash); } .bk-card.lv-bad .foot { background: var(--bad-wash); }
.bk-card .warns { display: grid; gap: 4px; }
.bk-card .warns div { font-size: .8rem; padding: 4px 8px; border-radius: 6px; }
.bk-card .warns .warn { background: var(--warn-wash); } .bk-card .warns .bad { background: var(--bad-wash); }
.bk-empty { border: 1px dashed var(--border); border-radius: var(--radius); padding: 28px; text-align: center; color: var(--ink-2); background: var(--surface); }
.bk-empty b { color: var(--ink); }
.bk-section-title { display: flex; align-items: center; gap: 10px; margin: 22px 0 10px; font-size: 1.05rem; }
.bk-section-title .line { flex: 1; height: 1px; background: var(--border); }

/* account page */
.bk-back { font-size: .88rem; display: inline-block; margin-bottom: 6px; }
.bk-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bk-meta { display: flex; gap: 6px 16px; flex-wrap: wrap; color: var(--ink-2); font-size: .86rem; margin-top: 6px; align-items: center; }
.bk-meta .lk, .bk-card .foot span { display: inline-flex; align-items: center; gap: 6px; }
.bk-card .flag { font-size: .75rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.bk-card .flag.warn { background: var(--warn-wash); } .bk-card .flag.bad { background: var(--bad-wash); color: var(--neg); }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin: 18px 0 16px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 9px 14px; font-size: .92rem; color: var(--ink-2); cursor: pointer;
  white-space: nowrap; font-weight: 500; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 650; }
.tab .c { font-size: .75rem; background: var(--surface-3); border-radius: 999px; padding: 0 7px; margin-left: 4px; color: var(--ink-2); }
.tab .c.bad { background: var(--bad-wash); color: var(--neg); }
.tabs-ready .bk-panel { display: none; } .tabs-ready .bk-panel.on { display: block; }
.bk-panel > h2.ptitle { font-size: 1.05rem; margin: 22px 0 10px; }
.tabs-ready .bk-panel > h2.ptitle { display: none; }
.cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } .minis { grid-template-columns: repeat(2, 1fr); } }
.boxx { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; min-width: 0; }
.boxx h3 { margin: 0 0 10px; font-size: .95rem; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ranges { display: inline-flex; gap: 2px; background: var(--surface-2); border-radius: 999px; padding: 2px; }
.ranges button { border: 0; background: none; padding: 3px 10px; border-radius: 999px; font-size: .78rem; color: var(--ink-2); cursor: pointer; }
.ranges button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.12); font-weight: 600; }
.hbars { display: grid; gap: 8px; }
.hbar { display: grid; grid-template-columns: 90px 1fr 64px; gap: 10px; align-items: center; font-size: .85rem; }
.hbar .track { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.hbar .fill { height: 100%; border-radius: 999px; }
.hbar .val { text-align: right; color: var(--ink-2); }
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.feed li { display: grid; grid-template-columns: 58px 14px 1fr; gap: 8px; padding: 7px 0; border-bottom: 1px dashed var(--border); align-items: start; font-size: .87rem; }
.feed li:last-child { border-bottom: 0; }
.feed .t { color: var(--ink-2); font-size: .8rem; padding-top: 1px; }
.feed .ic { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; }
.feed .ic.sent { background: var(--accent); } .feed .ic.filled { background: var(--ok); } .feed .ic.bad { background: var(--neg); }
.feed .sub { color: var(--ink-2); font-size: .78rem; }
.wbar { display: inline-block; width: 60px; height: 6px; background: var(--surface-3); border-radius: 999px; overflow: hidden; vertical-align: middle; margin-right: 6px; }
.wbar i { display: block; height: 100%; background: var(--accent); }
table.bkt { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.bkt th { text-align: left; font-weight: 600; color: var(--ink-2); font-size: .78rem; padding: 8px 10px; border-bottom: 1px solid var(--border);
  white-space: nowrap; background: var(--surface-2); position: sticky; top: 0; }
table.bkt td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.bkt th.n, table.bkt td.n { text-align: right; }
table.bkt tr.grp td { background: var(--surface-2); font-weight: 650; }
table.bkt tr.today td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
table.bkt tr.k-bad td { background: var(--bad-wash); }
table.bkt tbody tr:hover td { background: var(--surface-2); }
.sym { font-weight: 650; }
.subt { color: var(--ink-2); font-size: .78rem; }
.tablebox { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: auto; box-shadow: var(--shadow); max-height: 70vh; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.toolbar input[type=search] { border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; background: var(--surface); color: var(--ink); min-width: 160px; }
.toolbar .grow { flex: 1; }
details.hist summary { cursor: pointer; color: var(--accent); font-size: .78rem; list-style: none; }
details.hist summary::-webkit-details-marker { display: none; }
details.hist ol { margin: 6px 0 0; padding-left: 16px; font-size: .78rem; color: var(--ink-2); }
.note { font-size: .8rem; color: var(--muted); margin-top: 18px; }
.bk-toast { position: fixed; right: 20px; bottom: 20px; background: var(--ink); color: var(--surface); padding: 10px 16px; border-radius: 10px; font-size: .9rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.25); z-index: 20; }
@media (max-width: 560px) {
  .bk-grid { grid-template-columns: minmax(0, 1fr); } .bk-card .eq { font-size: 1.6rem; } .bk-kpi .v { font-size: 1.3rem; }
  .bk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .bk-kpi { padding: 10px 12px; }
  .bk-head h1 { font-size: 1.4rem; } .bk-market { font-size: .78rem; } .nav { overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; } .bk-card .foot { gap: 6px 12px; }
  .hbar { grid-template-columns: 70px 1fr 54px; } .page { padding: 14px 12px 50px; }
}
/* mobile overflow guards: flex/grid children must be allowed to shrink, long code tokens may break */
.bk { max-width: 100%; }
.bk-head > * { min-width: 0; max-width: 100%; }
.bk-meta, .bk-card .strat, .bk-card .name { min-width: 0; overflow-wrap: anywhere; }
.bk code, .note code { overflow-wrap: anywhere; word-break: break-word; }
@media (max-width: 900px) { .cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .bk-market { white-space: normal; } .ranges button { padding: 3px 8px; } }