/* Brokerage UI — dark trading-terminal design system.
   No inline styles anywhere (CSP), so every visual state is a class or a :checked/:has selector. */

:root {
  /* Obsidian and brushed metal: near-black graphite surfaces, platinum accents, hairline
     highlights where light would catch an edge. Buy/sell stay green/red, slightly tempered. */
  --bg: #060709;
  --panel: #0c0d10;
  --panel-2: #131519;
  --raise: #1a1d22;
  --line: #1d2025;
  --line-2: #2b2f36;
  --text: #e9ebee;
  --muted: #8a9099;
  --faint: #545a63;
  --accent: #cfd5dc;
  --accent-ink: #0a0b0d;
  --accent-soft: rgba(207, 213, 220, 0.09);
  --metal: linear-gradient(180deg, #f2f4f6 0%, #cdd2d8 46%, #a8afb7 54%, #d6dade 100%);
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0) 38%);
  --edge: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  --buy: #36b98c;
  --buy-soft: rgba(54, 185, 140, 0.13);
  --sell: #e3586f;
  --sell-soft: rgba(227, 88, 111, 0.13);
  --warn: #d9ad5b;
  --warn-soft: rgba(217, 173, 91, 0.11);
  --radius: 8px;
  --radius-sm: 6px;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 13px/1.45 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "tnum" 1, "cv11" 1;
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--mono); font-size: 12px; color: var(--accent); }
h1 { font-size: 20px; font-weight: 650; margin: 0 0 12px; letter-spacing: -0.015em; }
h2 { font-size: 14px; font-weight: 600; margin: 0 0 10px; color: var(--text); letter-spacing: -0.005em; }
h3 { font-size: 12px; font-weight: 600; margin: 14px 0 6px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
h1.ok { color: var(--buy); } h1.bad { color: var(--sell); } h1.warn { color: var(--warn); }
.up { color: var(--buy); } .down { color: var(--sell); }
.muted, .hint, .empty, .refresh { color: var(--muted); }
.hint, .refresh { font-size: 12px; }
.empty { padding: 18px 0; text-align: center; font-size: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------------------------------------------------------------- shell */
.top {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 20px; height: 52px; padding: 0 16px;
  background: rgba(6, 7, 9, 0.86); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.brand { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 650; font-size: 15px; letter-spacing: -0.02em; }
.brand:hover { text-decoration: none; }
.brand svg { width: 22px; height: 22px; }
.brand .mark-a { fill: var(--accent); } .brand .mark-b { fill: var(--accent); opacity: 0.45; }
.top nav { display: flex; gap: 2px; margin-right: auto; overflow-x: auto; scrollbar-width: none; }
.top nav a { color: var(--muted); padding: 7px 11px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; white-space: nowrap; }
.top nav a:hover { color: var(--text); background: var(--panel-2); text-decoration: none; }
.top nav a[aria-current="page"] { color: var(--text); background: var(--panel-2); }
.who { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.role { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.role.owner { background: var(--warn-soft); color: var(--warn); }
.role.admin { background: var(--sell-soft); color: var(--sell); }
.top .signin { background: var(--accent); color: var(--accent-ink); padding: 7px 14px; border-radius: var(--radius-sm); font-weight: 600; }
main { flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: 18px 20px 28px; }
main.wide { max-width: none; padding: 8px; }
footer {
  display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 6px 16px; border-top: 1px solid var(--line); color: var(--faint); font-size: 11px; background: var(--bg);
}
footer .live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); margin-right: 6px; vertical-align: middle; }
footer.is-live .live-dot { background: var(--buy); box-shadow: 0 0 0 3px var(--buy-soft); }
@media (max-width: 860px) {
  .top { height: auto; flex-wrap: wrap; padding: 8px 12px; gap: 8px 12px; }
  .top nav { order: 3; width: 100%; margin-right: 0; }
  main { padding: 12px; }
}

/* ---------------------------------------------------------------- surfaces */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin: 0 0 14px; min-width: 0; }
/* Single-column forms don't stretch across wide cards. */
.card form > input, .card form > select, .card form > textarea, .card form > .pair { max-width: 440px; }
.card > h2:first-child { display: flex; align-items: center; gap: 8px; }
.narrow { max-width: 520px; margin: 32px auto; padding: 22px 24px; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-bottom: 12px; }
.cols > .card { margin: 0; }
.grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 12px; }
.grid > .card { margin: 0 0 12px; }
@media (max-width: 860px) { .grid { grid-template-columns: minmax(0, 1fr); } }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1 1 150px; }
.scroll { overflow-x: auto; }
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin: 6px 0 18px; }
.pagehead h1 { margin: 0; }
.pagehead .sub, .section-head .sub { margin: 4px 0 0; color: var(--muted); max-width: 72ch; }
.pagehead .sub { font-size: 13px; }
.head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.head-actions .primary, .head-actions button { margin-top: 0; }
.section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.section-head h2 { margin: 0; }
.section-head .sub { font-size: 12px; }

/* section tabs under the header (grouped pages) */
.subnav { display: flex; gap: 22px; border-bottom: 1px solid var(--line); margin: -4px 0 18px; overflow-x: auto; scrollbar-width: none; }
.subnav a { color: var(--muted); font-size: 13px; font-weight: 500; padding: 8px 0 10px; border-bottom: 2px solid transparent; white-space: nowrap; }
.subnav a:hover { color: var(--text); text-decoration: none; }
.subnav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }

/* compact GET filter bar */
.toolbar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 0 0 12px; }
.toolbar > div { flex: 0 1 180px; }
.toolbar label { margin-top: 0; }
.toolbar button { margin-top: 0; }

/* collapsible advanced content */
details.disclosure { border: 1px solid var(--line); border-radius: var(--radius-sm); margin: 10px 0; background: var(--bg); }
details.disclosure > summary { list-style: none; display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 12px; color: var(--text); font-size: 13px; font-weight: 500; }
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); transition: transform 0.15s ease; }
details.disclosure[open] > summary::before { transform: rotate(45deg); }
details.disclosure > summary:hover { background: var(--panel-2); }
.disclosure-body { padding: 4px 12px 12px; border-top: 1px solid var(--line); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; margin: 0 0 12px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stats > div { background: var(--panel); padding: 12px 16px; }
.stats > div > span { display: block; color: var(--muted); font-size: 11px; margin-bottom: 4px; }
.stats strong { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- tables */
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { text-align: left; padding: 7px 10px; white-space: nowrap; }
th { color: var(--muted); font-weight: 500; font-size: 11px; border-bottom: 1px solid var(--line); letter-spacing: 0.01em; }
td .sub { display: block; color: var(--faint); font-size: 11px; }
td { border-bottom: 1px solid rgba(28, 48, 56, 0.55); }
tbody tr:hover td { background: var(--panel-2); }
tbody tr:last-child td { border-bottom: 0; }
.n { text-align: right; }
td.n, .stats strong, .num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- forms */
label, legend { display: block; font-size: 11px; color: var(--muted); margin: 10px 0 4px; }
input, select, textarea {
  width: 100%; font: inherit; font-size: 13px; color: var(--text);
  background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 8px 10px;
}
input:hover, select:hover { border-color: var(--faint); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input::placeholder { color: var(--faint); }
input[readonly] { color: var(--accent); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
label.check { display: flex; gap: 8px; align-items: center; color: var(--text); font-size: 13px; margin: 8px 0; }
label.check input, .sides input { width: auto; accent-color: var(--accent); }
.sides { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.sides legend { width: 100%; }
.sides label { display: flex; gap: 6px; align-items: center; margin: 0; color: var(--text); font-size: 13px; }
.secret { font-family: var(--mono); font-size: 13px; letter-spacing: 0.02em; }

button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none;
  color: var(--text); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 8px 14px;
}
button:hover, .button:hover { background: var(--raise); text-decoration: none; }
button.primary, .button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); margin-top: 14px; }
button.primary:hover, .button.primary:hover { filter: brightness(1.08); }
button.primary.buy { background: var(--buy); border-color: var(--buy); color: #021a12; }
button.primary.sell, button.primary.danger, .button.primary.danger { background: var(--sell); border-color: var(--sell); color: #23040b; }
button.small { padding: 3px 10px; font-size: 12px; font-weight: 500; }
button.link { border: 0; background: none; color: var(--muted); padding: 0; font-weight: 500; }
button.link:hover { color: var(--text); background: none; }
button.danger-link { border: 0; background: none; color: var(--sell); padding: 0; }
button.danger, .button.danger { color: var(--sell); border-color: rgba(240, 96, 125, 0.4); }
button.danger:hover, .button.danger:hover { background: var(--sell-soft); }
.inline { display: inline; margin: 0; }
.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.actions .primary { margin-top: 0; }

/* ---------------------------------------------------------------- messages */
.flash, .banner, .checks li { border-radius: var(--radius-sm); padding: 9px 12px; margin: 0 0 12px; border: 1px solid var(--line-2); background: var(--panel-2); font-size: 12px; }
.flash.ok, .banner.ok { border-color: rgba(46, 189, 142, 0.4); background: var(--buy-soft); }
.flash.bad, .banner.bad { border-color: rgba(240, 96, 125, 0.4); background: var(--sell-soft); }
.banner.warn, .warn { border-color: rgba(233, 180, 76, 0.4); background: var(--warn-soft); }
.banner.info, .info { background: var(--panel-2); }
.checks { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 6px; }
.checks li { margin: 0; }
.checks li.warn { border-color: rgba(233, 180, 76, 0.45); background: var(--warn-soft); }
.checks li.bad { border-color: rgba(240, 96, 125, 0.45); background: var(--sell-soft); }
.checks li.ok { border-color: rgba(46, 189, 142, 0.4); background: var(--buy-soft); }
.checks li .hint { display: block; margin-top: 4px; }
h1.warn, h2.warn { background: none; border: 0; color: var(--warn); }
h1.bad, h2.bad { color: var(--sell); }
h1.ok, h2.ok { color: var(--buy); }
.fix { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 12px; }
.tag { display: inline-block; font-size: 11px; font-weight: 500; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); }
.tag.ok { color: var(--buy); border-color: rgba(46, 189, 142, 0.4); background: var(--buy-soft); }
.tag.warn { color: var(--warn); border-color: rgba(233, 180, 76, 0.4); background: var(--warn-soft); }
.tag.bad { color: var(--sell); border-color: rgba(240, 96, 125, 0.4); background: var(--sell-soft); }
.summary { font-size: 16px; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 7px 24px; margin: 12px 0; font-size: 13px; }
dl.kv { grid-template-columns: minmax(120px, max-content) 1fr; }
dt { color: var(--muted); } dd { margin: 0; font-variant-numeric: tabular-nums; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 11px/1.5 var(--mono); color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px; max-height: 480px; overflow-y: auto; }
details summary { cursor: pointer; color: var(--muted); font-size: 12px; margin: 8px 0; }

/* ---------------------------------------------------------------- chart */
.chart { width: 100%; height: auto; display: block; }
.chart .line { fill: none; stroke: var(--accent); stroke-width: 1.6; }
.chart .up { fill: var(--buy); stroke: var(--buy); }
.chart .down { fill: var(--sell); stroke: var(--sell); }
.chart .grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.chart text { fill: var(--faint); font-size: 11px; font-family: var(--mono); }

/* ---------------------------------------------------------------- terminal (trader home) */
.term { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) 280px 320px; grid-template-areas: "bar bar order" "chart side order" "tabs tabs order"; align-items: start; }
.term > * { min-width: 0; }
.t-bar { grid-area: bar; } .t-chart { grid-area: chart; } .t-side { grid-area: side; } .t-order { grid-area: order; position: sticky; top: 60px; } .t-tabs { grid-area: tabs; }
.term .card { margin: 0; }
@media (max-width: 1180px) {
  .term { grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "bar order" "chart order" "side order" "tabs tabs"; }
}
@media (max-width: 820px) {
  .term { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bar" "chart" "order" "side" "tabs"; }
  .t-order { position: static; }
}

.mkt { display: flex; align-items: center; gap: 22px; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; }
.mkt .kv > span { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; }
.mkt .kv strong { font-size: 13px; font-weight: 500; white-space: nowrap; }
.mkt .kv .price { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.symsel { position: relative; }
.symsel summary { list-style: none; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 650; color: var(--text); margin: 0; padding: 4px 8px 4px 0; }
.symsel summary::-webkit-details-marker { display: none; }
.symsel summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-3px); margin-left: 2px; }
.symsel[open] summary::after { transform: rotate(225deg) translateY(-1px); }
.symsel .menu { position: absolute; z-index: 20; top: calc(100% + 8px); left: -6px; width: 320px; max-height: 380px; overflow-y: auto; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); padding: 6px; }
.symsel .menu a { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; padding: 7px 10px; border-radius: var(--radius-sm); color: var(--text); font-size: 12px; }
.symsel .menu a:hover, .symsel .menu a[aria-current="true"] { background: var(--panel-2); text-decoration: none; }
.symsel .menu .n { min-width: 70px; }
.badge { font-size: 10px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 4px; padding: 2px 6px; }

.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -2px 0 8px; }
.tfs { display: flex; gap: 2px; }
.tfs a { color: var(--muted); font-size: 12px; font-weight: 500; padding: 3px 8px; border-radius: 4px; }
.tfs a:hover { color: var(--text); background: var(--panel-2); text-decoration: none; }
.tfs a[aria-current="true"] { color: var(--text); background: var(--raise); }

/* ---------------------------------------------------------------- order book panel */
.t-side, .obcard { padding: 0; overflow: hidden; }
/* Pinned to the card corner at 1px: left at their static spot, the hidden radios could sit past
   the right edge (outside the card's clip) and widen the page. */
.obcard { position: relative; }
.obtabs > input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.obnav { display: flex; border-bottom: 1px solid var(--line); }
.obnav label { flex: 1; text-align: center; padding: 9px 4px 8px; font-size: 12px; font-weight: 500; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.obnav label:hover { color: var(--text); }
#obt-book:checked ~ .obnav label[for="obt-book"], #obt-trades:checked ~ .obnav label[for="obt-trades"], #obt-x:checked ~ .obnav label[for="obt-x"] { color: var(--text); border-bottom-color: var(--accent); }
.obtabs > input:not(.obv):focus-visible ~ .obnav { outline: 2px solid var(--accent); outline-offset: -2px; }
.ob-pane { display: none; padding: 6px 8px 8px; }
#obt-book:checked ~ .p-book, #obt-trades:checked ~ .p-trades, #obt-x:checked ~ .p-x { display: block; }
.ob-head, .ob-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 6px; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 11.5px; }
.ob-head { color: var(--faint); font-family: inherit; font-size: 11px; padding: 2px 4px 5px; }
.ob-head span + span, .ob-row span + span { text-align: right; }
.ob-row { position: relative; padding: 2.5px 4px; line-height: 15px; border-radius: 2px; }
.ob-row > span { position: relative; }
.ob-row.ask > span:first-of-type, .ob-row.sell > span:first-of-type { color: var(--sell); }
.ob-row.bid > span:first-of-type, .ob-row.buy > span:first-of-type { color: var(--buy); }
.ob-row > span:nth-of-type(3) { color: var(--muted); }
.ob-ladder .ob-row[data-px] { cursor: pointer; }
.ob-ladder .ob-row[data-px]:hover { background: var(--panel-2); }
.ob-row.empty > span { color: var(--faint) !important; }
.ob-bar { position: absolute; top: 1px; bottom: 1px; right: 0; border-radius: 2px; transition: width 0.25s ease; }
.ob-row.ask .ob-bar { background: var(--sell-soft); } .ob-row.bid .ob-bar { background: var(--buy-soft); }
.ob-row.grew > span:nth-of-type(2), .ob-row.shrank > span:nth-of-type(2) { animation: ob-size 0.6s ease-out; }
@keyframes ob-size { from { color: var(--accent); } to { color: var(--text); } }
.ob-mid { display: flex; align-items: baseline; justify-content: space-between; padding: 6px 4px; margin: 3px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ob-mid strong { font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; }
.ob-mid span { color: var(--muted); font-size: 11px; }
/* Venues (agent market): a segmented selector in the book and trades panes, one book per venue,
   shown by the checked obvenue radio. Ids come from a fixed list, so the selectors are spelled out. */
.obvnav { display: flex; gap: 2px; margin: 0 0 6px; padding: 2px; background: var(--panel-2); border-radius: var(--radius-sm); }
.obvnav label { flex: 1; text-align: center; padding: 3px 4px; font-size: 11px; font-weight: 500; color: var(--muted); border-radius: 4px; cursor: pointer; white-space: nowrap; }
.obvnav label:hover { color: var(--text); }
#obv-consolidated:checked ~ .ob-pane label[for="obv-consolidated"], #obv-ALPHA:checked ~ .ob-pane label[for="obv-ALPHA"], #obv-BETA:checked ~ .ob-pane label[for="obv-BETA"] { color: var(--text); background: var(--raise); }
#obv-consolidated:focus-visible ~ .ob-pane label[for="obv-consolidated"], #obv-ALPHA:focus-visible ~ .ob-pane label[for="obv-ALPHA"], #obv-BETA:focus-visible ~ .ob-pane label[for="obv-BETA"] { outline: 2px solid var(--accent); outline-offset: -2px; }
.ob-venue { display: none; }
#obv-consolidated:checked ~ .ob-pane .v-consolidated, #obv-ALPHA:checked ~ .ob-pane .v-ALPHA, #obv-BETA:checked ~ .ob-pane .v-BETA { display: block; }
.ob-mid { flex-wrap: wrap; row-gap: 2px; }
.ob-mid .ob-nbbo { flex-basis: 100%; font-family: var(--mono); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.ob-nbbo b { font-weight: 500; }
abbr.vt { text-decoration: none; cursor: help; font-family: inherit; font-size: 10px; color: var(--faint); }
.ob-mid abbr.vt { color: var(--muted); }
.ob-head.tagged, .ob-tape.tagged .ob-row { grid-template-columns: 1.1fr 1fr 1fr 1.3em; }
.ob-tape.tagged .ob-row .vt { text-align: center; line-height: 15px; }
.ob-swap { margin-top: 6px; padding: 6px 4px 2px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.ob-swap > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.ob-swap > div + div { margin-top: 2px; }
.ob-swap strong, .ob-swap b, .ob-swap .sw-gap { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; color: var(--text); }
.ob-swap abbr.vt { font-size: 10px; letter-spacing: 0.04em; padding: 0 5px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--muted); }
.ob-tape { max-height: 452px; overflow-y: auto; scrollbar-width: thin; }
.ob-tape .ob-row.new { animation: ob-new 0.8s ease-out; }
@keyframes ob-new { from { background: var(--raise); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .ob-bar { transition: none; } .ob-tape .ob-row.new, .ob-row.grew > span, .ob-row.shrank > span { animation: none; } }
.p-x .mini, .p-x .kv { margin: 0; }
.ob-bar.w0 { width: 0%; } .ob-bar.w1 { width: 5%; } .ob-bar.w2 { width: 10%; } .ob-bar.w3 { width: 15%; } .ob-bar.w4 { width: 20%; } .ob-bar.w5 { width: 25%; } .ob-bar.w6 { width: 30%; }
.ob-bar.w7 { width: 35%; } .ob-bar.w8 { width: 40%; } .ob-bar.w9 { width: 45%; } .ob-bar.w10 { width: 50%; } .ob-bar.w11 { width: 55%; } .ob-bar.w12 { width: 60%; } .ob-bar.w13 { width: 65%; }
.ob-bar.w14 { width: 70%; } .ob-bar.w15 { width: 75%; } .ob-bar.w16 { width: 80%; } .ob-bar.w17 { width: 85%; } .ob-bar.w18 { width: 90%; } .ob-bar.w19 { width: 95%; } .ob-bar.w20 { width: 100%; }
.mini { margin-top: 0; }
.mini a { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 5px 2px; font-size: 12px; color: var(--text); border-radius: 4px; }
.mini a:hover { background: var(--panel-2); text-decoration: none; }
.mini .n { min-width: 64px; }

/* order entry */
.order { padding: 12px; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 2px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); margin: 0 0 10px; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.seg label { margin: 0; text-align: center; padding: 6px 4px; border-radius: 4px; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; user-select: none; }
.seg label:hover { color: var(--text); }
.seg input:focus-visible + label { outline: 2px solid var(--accent); }
.seg input:checked + label { background: var(--raise); color: var(--text); }
.seg.sides2 input#side-buy:checked + label { background: var(--buy); color: #021a12; }
.seg.sides2 input#side-sell:checked + label { background: var(--sell); color: #23040b; }
.seg.types { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0; gap: 12px; grid-auto-columns: max-content; }
.seg.types label { padding: 6px 0; border-radius: 0; border-bottom: 2px solid transparent; font-weight: 500; }
.seg.types input:checked + label { background: none; color: var(--text); border-bottom-color: var(--accent); }
.order .f-limit, .order .f-stop { display: none; }
.order:has(#type-limit:checked) .f-limit, .order:has(#type-stop_limit:checked) .f-limit { display: block; }
.order:has(#type-stop:checked) .f-stop, .order:has(#type-stop_limit:checked) .f-stop { display: block; }
.order .submit { width: 100%; padding: 10px; }
.order:has(#side-buy:checked) .submit { background: var(--buy); border-color: var(--buy); color: #021a12; }
.order:has(#side-sell:checked) .submit { background: var(--sell); border-color: var(--sell); color: #23040b; }
.order .submit .s-sell { display: none; }
.order:has(#side-sell:checked) .submit .s-sell { display: inline; }
.order:has(#side-sell:checked) .submit .s-buy { display: none; }
.acct { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 6px; font-size: 12px; }
.acct div { display: flex; justify-content: space-between; gap: 8px; }
.acct span { color: var(--muted); }
.acct strong { font-weight: 500; font-variant-numeric: tabular-nums; }

/* CSS-only tabs: radio inputs + labels, panels shown by :checked */
.tabs { padding: 0; overflow: hidden; }
.tabs > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.tabs .tabbar { display: flex; gap: 18px; padding: 0 14px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs .tabbar label { margin: 0; padding: 10px 0; font-size: 12px; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.tabs .tabbar label:hover { color: var(--text); }
.tabs .tabbar a { margin-left: auto; align-self: center; font-size: 12px; }
.tabs .pane { display: none; padding: 4px 4px 8px; }
.tabs .pane .scroll { padding: 0 4px; }
#tab-1:checked ~ .tabbar label[for="tab-1"], #tab-2:checked ~ .tabbar label[for="tab-2"], #tab-3:checked ~ .tabbar label[for="tab-3"] { color: var(--text); border-bottom-color: var(--accent); }
#tab-1:checked ~ .p-1, #tab-2:checked ~ .p-2, #tab-3:checked ~ .p-3 { display: block; }
#tab-1:focus-visible ~ .tabbar label[for="tab-1"], #tab-2:focus-visible ~ .tabbar label[for="tab-2"], #tab-3:focus-visible ~ .tabbar label[for="tab-3"] { outline: 2px solid var(--accent); }

/* live tick flashes (live.js toggles these) */
.tick-up { animation: tick-up 0.9s ease-out; }
.tick-down { animation: tick-down 0.9s ease-out; }
@keyframes tick-up { from { background: var(--buy-soft); color: var(--buy); } to { background: transparent; } }
@keyframes tick-down { from { background: var(--sell-soft); color: var(--sell); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .tick-up, .tick-down { animation: none; } }

/* sign-in */
.auth { max-width: 420px; margin: 7vh auto 0; }
.auth .card { padding: 24px; }
.auth h1 { font-size: 20px; }
.auth ul.hint { padding-left: 18px; margin: 12px 0; display: grid; gap: 4px; }
.auth button.primary { width: 100%; padding: 10px; }
.ops table { table-layout: fixed; min-width: 940px; }
.ops th, .ops td { padding: 5px 4px; }
.ops th:first-child, .ops td:first-child { padding-left: 8px; }
.ops th:nth-child(1) { width: 34px; }
.ops th:nth-child(2) { width: 16%; }
.ops th:nth-child(3) { width: 10%; }
.ops th:nth-child(4) { width: 8%; }
.ops th:nth-child(5) { width: 8%; }
.ops th:nth-child(6) { width: 11%; }
.ops th:nth-child(7), .ops th:nth-child(8) { width: 9%; }
.ops th:nth-child(9) { width: 8%; }
.ops input, .ops select { padding: 6px 8px; }
.ops details.disclosure { margin: 8px 0; }
.ops .disclosure-body { padding: 0 0 4px; }
.head-actions .button.primary, .head-actions button.primary { margin-top: 0; }
.head-actions .button, .head-actions button { white-space: nowrap; }
.card > .empty:only-child { padding: 18px 0; margin: 0; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 12px; align-items: start; }
.split > * > .card { margin: 0 0 12px; }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }
.head-actions .tfs + .hint { margin-left: 6px; }
.stats strong { white-space: nowrap; }
/* guard policy: one compact row per rule */
.rulelist { display: grid; }
.rule { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 200px); gap: 2px 16px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
.rule:first-child { border-top: 0; padding-top: 0; }
.rule-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rule-name strong { font-weight: 550; }
.rule-main .sub { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.rule-mode select { padding: 6px 8px; }
.rule > .rule-more { grid-column: 1 / -1; }
.rule > .rule-more > summary { margin: 2px 0 0; font-size: 11px; }
.rule > .rule-more[open] { padding: 4px 12px 10px; margin-top: 4px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
@media (max-width: 600px) { .rule { grid-template-columns: minmax(0, 1fr); } }
/* main content + side action panel (approval detail) */

/* ------------------------------------------------------------------ agent chat */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.agent-wrap { align-items: start; }
.chat { display: flex; flex-direction: column; padding: 0; height: calc(100vh - 220px); min-height: 460px; overflow: hidden; }
.chat-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: auto; }
.chat-empty { margin: auto; max-width: 520px; text-align: center; color: var(--muted); }
.chat-empty .prompts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; }
.msg { display: flex; }
.msg .bubble { max-width: 78%; padding: 9px 12px; border-radius: 12px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.msg.user { justify-content: flex-end; }
.msg.user .bubble { background: var(--accent-soft); border: 1px solid rgba(94, 227, 200, 0.3); border-bottom-right-radius: 4px; }
.msg.agent .bubble { background: var(--panel-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
details.thought { align-self: flex-start; max-width: 78%; font-size: 12px; color: var(--muted); }
details.thought summary { cursor: pointer; color: var(--faint); }
details.thought > div { white-space: pre-wrap; margin: 4px 0 0; padding-left: 10px; border-left: 2px solid var(--line-2); }
.tool { align-self: stretch; margin-left: 18px; padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid var(--line-2); border-radius: var(--radius-sm); background: var(--bg); font-size: 13px; }
.tool.ok { border-left-color: var(--buy); background: var(--bg); }
.tool.warn { border-color: var(--line); border-left-color: var(--warn); background: var(--bg); }
.tool.bad { border-color: var(--line); border-left-color: var(--sell); background: var(--bg); }
.tool-head { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.tool-verb { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); }
.tool-head .tool-sum { flex: 1; min-width: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.tool .flow { margin: 12px 0 8px; max-width: 420px; }
.tool ul.why { margin: 8px 0 2px; }
.tool ul.why > li { background: var(--panel); }
.tool-next { margin: 6px 0; font-size: 12.5px; color: var(--muted); }
.tool-next span { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); margin-bottom: 2px; }
.tool details.raw { margin-top: 6px; }
.tool details.raw summary { cursor: pointer; font-size: 11.5px; color: var(--faint); }
.tool details.raw pre { margin-top: 6px; max-height: 320px; }
/* Read-only calls: one quiet line. */
.tool.mini { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 4px 10px; border: 0; border-left: 2px solid var(--line-2); border-radius: 0; background: none; font-size: 12.5px; }
.tool.mini .tool-head { flex: 1; min-width: 0; }
.tool.mini .tool-sum { color: var(--muted); }
.tool.mini details.raw { margin: 0; }
.tool.mini details.raw[open] { flex-basis: 100%; }
.tool.slim { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 12px; }
.tool.slim .tool-head { flex: 1; min-width: 0; }
.tool.slim details.raw { margin: 0; }
.tool.slim details.raw[open] { flex-basis: 100%; }
.notice { margin: 0; padding: 7px 10px; border-radius: var(--radius-sm); font-size: 12.5px; border: 1px solid var(--line); }
.notice.warn { border-color: rgba(233, 180, 76, 0.4); background: var(--warn-soft); }
.notice.bad { border-color: rgba(240, 96, 125, 0.45); background: var(--sell-soft); }
.notice.info { background: var(--panel-2); color: var(--muted); }
.tool .notice { margin-top: 6px; }
.chat-status { margin: 0; padding: 6px 16px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); }
.chat-status::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--accent); animation: agent-pulse 1.1s ease-in-out infinite; vertical-align: 1px; }
@keyframes agent-pulse { 50% { opacity: 0.25; } }
.composer { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--panel); }
.composer textarea { flex: 1; resize: none; min-height: 42px; max-height: 160px; max-width: none; }
.composer-actions { display: flex; gap: 6px; }
.agent-side .card + .card { margin-top: 12px; }
.agent-side .banner { margin-top: 0; }
.tool-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.tool-list li { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.tool-list code { font: 12px var(--mono); color: var(--accent); }
.tool-list span { color: var(--muted); }
@media (max-width: 860px) {
  .chat { height: 70vh; }
  .msg .bubble, details.thought { max-width: 92%; }
  .tool { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .chat-status::before { animation: none; } }

/* ------------------------------------------------------------------ explain: pipeline, verdict, why */
.flow { list-style: none; display: flex; max-width: 640px; margin: 0 0 18px; padding: 0; counter-reset: none; }
.flow li, .flow li.warn, .flow li.bad, .flow li.ok { background: none; border: 0; padding: 0; margin: 0; }
.flow li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11.5px; color: var(--muted); text-align: center; min-width: 0; }
.flow li::before { content: ""; position: absolute; top: 7px; left: -50%; width: 100%; height: 2px; background: var(--line-2); z-index: 0; }
.flow li:first-child::before { display: none; }
.flow li i { position: relative; z-index: 1; width: 16px; height: 16px; border-radius: 50%; background: var(--panel-2); border: 2px solid var(--line-2); }
.flow li span { font-weight: 550; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.flow li em { font-style: normal; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; }
.flow li.done i { background: var(--accent); border-color: var(--accent); }
.flow li.done::before, .flow li.here::before, .flow li.ok::before, .flow li.warn::before, .flow li.bad::before { background: var(--accent); }
.flow li.here i { background: var(--bg); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.flow li.here em { color: var(--accent); }
.flow li.ok i { background: var(--buy); border-color: var(--buy); box-shadow: 0 0 0 4px var(--buy-soft); }
.flow li.ok em { color: var(--buy); }
.flow li.warn i { background: var(--warn); border-color: var(--warn); box-shadow: 0 0 0 4px var(--warn-soft); }
.flow li.warn em { color: var(--warn); }
.flow li.bad i { background: var(--sell); border-color: var(--sell); box-shadow: 0 0 0 4px var(--sell-soft); }
.flow li.bad em { color: var(--sell); }
.flow li.off span { color: var(--faint); }
.flow li.off i { opacity: 0.6; }

.result h1 { margin-bottom: 4px; }
.verdict, .verdict.warn, .verdict.bad, .verdict.ok { background: none; border: 0; padding: 0; }
.verdict { display: flex; gap: 14px; align-items: center; margin: 0 0 10px; }
.verdict .vi { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; font-weight: 700; }
.verdict.ok .vi { color: var(--buy); background: var(--buy-soft); }
.verdict.warn .vi { color: var(--warn); background: var(--warn-soft); }
.verdict.bad .vi { color: var(--sell); background: var(--sell-soft); }
.verdict h1 { margin: 0; font-size: 19px; background: none; border: 0; }
.verdict p { margin: 2px 0 0; color: var(--muted); }
.lead { color: var(--muted); margin: 0 0 12px; }
.order-big { font-size: 22px; margin: 2px 0 2px; letter-spacing: -0.01em; }
.terms { color: var(--muted); margin: 0 0 12px; }
.est { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 12px; margin: 0 0 12px; border-radius: var(--radius-sm); background: var(--panel-2); border: 1px solid var(--line); }
.est span { color: var(--muted); font-size: 12.5px; }
.est strong { font-size: 18px; font-variant-numeric: tabular-nums; }

ul.why { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
ul.why > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line-2); border-left-width: 3px; background: var(--panel-2); font-size: 13px; }
ul.why > li.bad { border-left-color: var(--sell); }
ul.why > li.warn { border-left-color: var(--warn); }
ul.why > li.info { border-left-color: var(--line-2); }
ul.why > li > strong { font-weight: 600; }
ul.why > li > span { color: var(--muted); font-variant-numeric: tabular-nums; }
ul.why > li > span.sug { flex-basis: 100%; color: var(--accent); font-size: 12.5px; }
ul.why details { flex-basis: 100%; font-size: 12px; }
ul.why details summary { cursor: pointer; color: var(--faint); }
ul.why details p { margin: 4px 0 0; color: var(--muted); }
@media (max-width: 600px) {
  .flow li { font-size: 10.5px; }
  .flow li em { font-size: 9.5px; }
}

/* ---------------------------------------------------------------- smart orders (smart.rs, exec.js) */
/* Ticket: "Smart" shows the algo, its one-line hint and the deadline; the limit is optional and
   time in force doesn't apply. */
.order .f-smart, .order .f-opt, .order .ah { display: none; }
.order:has(#type-smart:checked) .f-smart, .order:has(#type-smart:checked) .f-limit { display: block; }
.order:has(#type-smart:checked) .f-opt { display: inline; color: var(--muted); font-weight: 400; }
.order:has(#type-smart:checked) .f-tif { display: none; }
.seg.algos { margin: 6px 0 4px; }
.seg.algos label { padding: 5px 2px; font-size: 11.5px; }
.order:has(#algo-auto:checked) .ah-auto, .order:has(#algo-now:checked) .ah-now, .order:has(#algo-slice:checked) .ah-slice,
.order:has(#algo-passive:checked) .ah-passive, .order:has(#algo-dark:checked) .ah-dark { display: block; margin: 0 0 8px; }
/* Dashboard tab 4 (smart orders) */
#tab-4:checked ~ .tabbar label[for="tab-4"] { color: var(--text); border-bottom-color: var(--accent); }
#tab-4:checked ~ .p-4 { display: block; }
#tab-4:focus-visible ~ .tabbar label[for="tab-4"] { outline: 2px solid var(--accent); }

/* Venue split: a stacked bar (widths are w0–w20 classes, 5% steps) and a legend. */
.vs-alpha { --vc: var(--accent); } .vs-beta { --vc: #7aa7ff; } .vs-midx { --vc: #b48cf2; } .vs-swap { --vc: var(--warn); }
.vsplit { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); margin: 6px 0; }
.vsplit i { display: block; height: 100%; background: var(--vc); }
.vsplit i + i { box-shadow: inset 1px 0 0 var(--bg); }
.vs-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 4px; padding: 0; font-size: 12px; color: var(--muted); }
.vs-legend i, .vs-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; background: var(--vc); }
.vs-legend b { color: var(--text); font-weight: 550; font-variant-numeric: tabular-nums; }
.vsplit .w0 { width: 0%; } .vsplit .w1 { width: 5%; } .vsplit .w2 { width: 10%; } .vsplit .w3 { width: 15%; } .vsplit .w4 { width: 20%; } .vsplit .w5 { width: 25%; } .vsplit .w6 { width: 30%; }
.vsplit .w7 { width: 35%; } .vsplit .w8 { width: 40%; } .vsplit .w9 { width: 45%; } .vsplit .w10 { width: 50%; } .vsplit .w11 { width: 55%; } .vsplit .w12 { width: 60%; } .vsplit .w13 { width: 65%; }
.vsplit .w14 { width: 70%; } .vsplit .w15 { width: 75%; } .vsplit .w16 { width: 80%; } .vsplit .w17 { width: 85%; } .vsplit .w18 { width: 90%; } .vsplit .w19 { width: 95%; } .vsplit .w20 { width: 100%; }

/* The plan on the review page and in the agent's preview card. */
.plan { display: grid; gap: 10px; margin: 0 0 12px; }
.plan-cost { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.plan-cost > div { background: var(--panel-2); padding: 9px 12px; min-width: 0; }
.plan-cost span, .plan-split > span, .plan-first > span { display: block; color: var(--muted); font-size: 11px; margin-bottom: 2px; }
.plan-cost strong { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-cost em { display: block; font-style: normal; font-size: 11px; color: var(--muted); }
.plan-first strong { font-weight: 550; }
.plan-first p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.alts { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font-size: 12px; }
.alts li { display: flex; justify-content: space-between; gap: 12px; }
.alts b { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tool .plan { margin: 10px 0 4px; max-width: 560px; }
.tool .tool-link { display: inline-block; margin: 8px 0 0; font-size: 12px; }
@media (max-width: 600px) { .plan-cost { grid-template-columns: minmax(0, 1fr); } }

/* Execution page: progress bar, end banner, decision. */
.xprog { margin: 0 0 12px; }
.xprog p { margin: 6px 0 0; }
.xbar { height: 8px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); overflow: hidden; }
.xbar i { display: block; height: 100%; background: var(--accent); transition: width 0.3s ease; }
.exec[data-st="completed"] .xbar i { background: var(--buy); }
.exec[data-st="cancelled"] .xbar i, .exec[data-st="expired"] .xbar i { background: var(--warn); }
.exec[data-st="stopped"] .xbar i { background: var(--sell); }
.xbar .w0 { width: 0%; } .xbar .w1 { width: 5%; } .xbar .w2 { width: 10%; } .xbar .w3 { width: 15%; } .xbar .w4 { width: 20%; } .xbar .w5 { width: 25%; } .xbar .w6 { width: 30%; }
.xbar .w7 { width: 35%; } .xbar .w8 { width: 40%; } .xbar .w9 { width: 45%; } .xbar .w10 { width: 50%; } .xbar .w11 { width: 55%; } .xbar .w12 { width: 60%; } .xbar .w13 { width: 65%; }
.xbar .w14 { width: 70%; } .xbar .w15 { width: 75%; } .xbar .w16 { width: 80%; } .xbar .w17 { width: 85%; } .xbar .w18 { width: 90%; } .xbar .w19 { width: 95%; } .xbar .w20 { width: 100%; }
.x-act { margin: 0 0 6px; }
.x-why { margin: 0 0 6px; color: var(--muted); font-size: 12.5px; }
@media (prefers-reduced-motion: reduce) { .xbar i { transition: none; } }
/* ------------------------------------------------------------------ owner: signals, packs, thesis, guardian */
.acct-tabs { margin-top: 0; }
.sig-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); grid-template-areas: "name meter" "name facts"; gap: 2px 18px; padding: 9px 10px; border-left: 3px solid var(--line-2); border-radius: var(--radius-sm); }
.sig:nth-child(odd) { background: var(--panel-2); }
.sig.bad { border-left-color: var(--sell); }
.sig.warn { border-left-color: var(--warn); }
.sig-name { grid-area: name; min-width: 0; }
.sig-name .hint { display: block; margin-top: 2px; }
.sig-meter { grid-area: meter; display: flex; align-items: center; gap: 8px; min-width: 0; }
.sig-facts { grid-area: facts; margin: 0; color: var(--muted); font-size: 11.5px; }
.sig-score { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 2.6em; text-align: right; }
svg.sig-bar { flex: 1; min-width: 60px; height: 8px; display: block; }
.sig-bar .track { fill: var(--line); }
.sig-bar .fill.lo { fill: var(--buy); }
.sig-bar .fill.mid { fill: var(--warn); }
.sig-bar .fill.hot { fill: var(--sell); }
.sig-bar .fill.none { fill: none; }
.sig-bar .thr { fill: var(--text); opacity: 0.8; }
svg.spark { width: 60px; height: 16px; flex: none; }
.spark polyline { fill: none; stroke: var(--accent); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.spark .thr { stroke: var(--sell); stroke-width: 1; stroke-dasharray: 2 2; opacity: 0.6; vector-effect: non-scaling-stroke; }
.sig-meter .tag { white-space: nowrap; }
.sig-mini { list-style: none; margin: 8px 0 4px; padding: 0; display: grid; gap: 4px; max-width: 520px; }
.sig-mini li { display: grid; grid-template-columns: 9em minmax(60px, 1fr) 3em auto; align-items: center; gap: 8px; font-size: 12.5px; }
.packs .pack.current { border-color: rgba(46, 189, 142, 0.45); }
.packs .pack form { margin-top: 6px; }
.thesis-rows .toolbar { margin-bottom: 4px; }
.pre { white-space: pre-wrap; }
.notice.ok { border-color: rgba(46, 189, 142, 0.4); background: var(--buy-soft); }
.tool.propose { border-left-color: var(--warn); background: var(--panel); }
.tool-reason { margin: 8px 0 4px; font-size: 13px; }
.tool-reason span { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); margin-bottom: 2px; }
.tool-links { margin: 6px 0 0; font-size: 12px; }
.proposal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; }
.proposal-actions .hint { flex-basis: 100%; }
.tool .disclosure { margin-top: 8px; }
@media (max-width: 700px) {
  .sig { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "meter" "facts"; }
  .sig-mini li { grid-template-columns: minmax(0, 1fr) 3em auto; }
  .sig-mini li svg.sig-bar { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------------------------------------------------------------- phone fixes (integration) */
@media (max-width: 600px) {
  /* A tool card's summary gets its own line under the verb and pill instead of a thin column. */
  .tool-head .tool-sum { flex: 1 1 100%; order: 1; }
  /* Two stat columns: an odd last stat spans the row instead of leaving an empty cell. */
  .stats > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Public terminal: the order panel is a way in. */
.t-order > .button { display: block; text-align: center; margin-top: 10px; }
.t-order > .button.primary { margin-top: 14px; }

/* ---------------------------------------------------------------- trading terminal as an app
   The terminal fills the window like an exchange app: no page scroll; each panel scrolls or
   clips on its own. Wide screens show every panel; phones show one at a time with a tab bar. */
.mv { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.mtabs { display: none; }
body:has(.term) { height: 100vh; height: 100dvh; overflow: hidden; }
body:has(.term) main.wide { display: flex; flex-direction: column; min-height: 0; padding: 6px; }
body:has(.term) main.wide > .banner { margin: 0 0 6px; }
.term { flex: 1; min-height: 0; gap: 6px; align-items: stretch;
  grid-template-columns: minmax(0, 1fr) 280px 320px; grid-template-rows: auto minmax(0, 1fr) minmax(130px, 28%);
  grid-template-areas: "bar bar order" "chart side order" "tabs side order"; }
.term > .card { min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.term > .t-bar { overflow: visible; z-index: 3; }
.term > .t-order { position: static; overflow-y: auto; }
.term > .t-chart { padding: 10px 12px 8px; }
.term .chart-box { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.term .chart-box > .chart { flex: 1; min-height: 0; height: 100%; }
.term .chart-box.fit > .chart { flex: none; height: auto; }
.term .chart-box > .hint { margin: 4px 0 0; }
.term .obtabs { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.term #obt-book:checked ~ .p-book, .term #obt-trades:checked ~ .p-trades, .term #obt-x:checked ~ .p-x { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.term .p-x { overflow-y: auto; }
.term #obv-consolidated:checked ~ .ob-pane .v-consolidated, .term #obv-ALPHA:checked ~ .ob-pane .v-ALPHA, .term #obv-BETA:checked ~ .ob-pane .v-BETA { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.term .ob-ladder { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* Asks hug the spread from below: when space is short, the far levels are what get cut. */
.term .ob-asks { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.term .ob-bids { flex: 1; min-height: 0; overflow: hidden; }
.term .ob-tape { flex: 1; min-height: 0; max-height: none; }
.term > .t-tabs .pane { flex: 1; min-height: 0; overflow: auto; }
.term > .t-tabs > .empty { margin: auto; }
@media (max-width: 1180px) and (min-width: 821px) {
  .term { grid-template-columns: minmax(0, 1fr) 250px 290px; grid-template-areas: "bar bar order" "chart side order" "tabs side order"; }
}
@media (max-width: 820px) {
  body:has(.term) footer { display: none; }
  body:has(.term) main.wide { padding: 4px 4px 0; }
  .term { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "bar" "view" "mtabs"; gap: 4px; }
  .term > .t-bar { overflow-x: auto; scrollbar-width: none; }
  .term > .t-chart, .term > .t-side, .term > .t-order, .term > .t-tabs { grid-area: view; display: none; }
  #mv-chart:checked ~ .t-chart, #mv-book:checked ~ .t-side, #mv-trade:checked ~ .t-order, #mv-acct:checked ~ .t-tabs { display: flex; }
  .mtabs { grid-area: mtabs; display: flex; border-top: 1px solid var(--line); background: var(--bg); padding-bottom: env(safe-area-inset-bottom); }
  .mtabs label { flex: 1; margin: 0; padding: 12px 4px; text-align: center; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; border-top: 2px solid transparent; }
  #mv-chart:checked ~ .mtabs label[for="mv-chart"], #mv-book:checked ~ .mtabs label[for="mv-book"], #mv-trade:checked ~ .mtabs label[for="mv-trade"], #mv-acct:checked ~ .mtabs label[for="mv-acct"] { color: var(--text); border-top-color: var(--accent); }
  #mv-chart:focus-visible ~ .mtabs label[for="mv-chart"], #mv-book:focus-visible ~ .mtabs label[for="mv-book"], #mv-trade:focus-visible ~ .mtabs label[for="mv-trade"], #mv-acct:focus-visible ~ .mtabs label[for="mv-acct"] { outline: 2px solid var(--accent); outline-offset: -2px; }
}


/* ---------------------------------------------------------------- obsidian and metal finish
   Depth from light, not colour: a faint cool glow behind the page, a sheen on each panel's
   top, a hairline highlight on raised edges, and brushed-metal primary buttons. One slow
   shimmer runs along the header's lower edge; it stops for reduced motion. */
body { background: radial-gradient(1100px 520px at 18% -12%, rgba(170, 182, 198, 0.07), transparent 62%), radial-gradient(900px 480px at 100% 110%, rgba(150, 160, 175, 0.04), transparent 60%), var(--bg); background-attachment: fixed; }
.card { background: var(--sheen), var(--panel); box-shadow: var(--edge), 0 10px 30px rgba(0, 0, 0, 0.35); border-color: var(--line); }
.top { position: sticky; }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(214, 220, 228, 0) 30%, rgba(214, 220, 228, 0.45) 50%, rgba(214, 220, 228, 0) 70%, transparent 100%);
  background-size: 220% 100%; animation: edge-shimmer 14s ease-in-out infinite; }
@keyframes edge-shimmer { 0% { background-position: 110% 0; } 50% { background-position: -10% 0; } 100% { background-position: 110% 0; } }
button, .button { box-shadow: var(--edge); background-image: var(--sheen); }
button.primary, .button.primary, .top .signin { background: var(--metal); color: var(--accent-ink); border-color: #dfe3e8; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 0 rgba(0, 0, 0, 0.6), 0 4px 14px rgba(0, 0, 0, 0.35); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }
button.primary:hover, .button.primary:hover, .top .signin:hover { filter: brightness(1.05) contrast(1.03); text-decoration: none; }
/* Buy and sell keep their colours, with the same metal sheen on top. */
button.primary.buy, .order:has(#side-buy:checked) .submit, .seg.sides2 input#side-buy:checked + label { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%); background-color: var(--buy); text-shadow: none; }
button.primary.sell, button.primary.danger, .button.primary.danger, .order:has(#side-sell:checked) .submit, .seg.sides2 input#side-sell:checked + label { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 55%); background-color: var(--sell); text-shadow: none; }
input, select, textarea { background-color: #08090b; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6); }
.top nav a[aria-current="page"] { background: linear-gradient(180deg, #1c1f24, #14161a); box-shadow: var(--edge); }
.ob-mid { background: linear-gradient(90deg, transparent, rgba(207, 213, 220, 0.035), transparent); }
@media (prefers-reduced-motion: reduce) { .top::after { animation: none; background-position: 50% 0; } }
input:focus, select:focus, textarea:focus { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 0 3px var(--accent-soft); }

/* ---------------------------------------------------------------- bank.xyz
   Pure black, a faint dot grid like a star chart, a serif wordmark, and the planet
   (static/planet.js) drifting in behind translucent panels now and then. */
:root { --bg: #000; --display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif; }
body { background:
  radial-gradient(1100px 520px at 18% -12%, rgba(170, 182, 198, 0.06), transparent 62%),
  radial-gradient(circle, rgba(255, 255, 255, 0.075) 0.7px, transparent 1px) 0 0 / 7px 7px,
  #000; background-attachment: fixed; }
canvas.planet { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 3.5s ease; }
canvas.planet.on { opacity: 0.9; }
canvas.planet.still.on { opacity: 0.45; }
body > header, body > main, body > footer { position: relative; z-index: 1; }
body > header.top { position: sticky; z-index: 10; }
.card { background: var(--sheen), rgba(8, 9, 11, 0.78); }
.top { background: rgba(0, 0, 0, 0.72); }
footer { background: rgba(0, 0, 0, 0.72); }
.brand { gap: 9px; color: #fff; }
.brand svg { width: 20px; height: 20px; fill: none; stroke: currentColor; }
.brand span { font-family: var(--display); font-weight: 500; font-size: 19px; letter-spacing: 0.02em; }
h1 { font-family: var(--display); font-weight: 500; letter-spacing: 0.01em; }
.kv > span, .acct span, .ob-head, .tabs .tabbar label, .obnav label { letter-spacing: 0.06em; }
.kv > span { text-transform: uppercase; font-size: 10px; }
/* The trading terminal has no planet behind it, so its panels stay solid. */
body:has(.term) .card { background: var(--sheen), var(--panel); }

/* ---------------------------------------------------------------- chart opening (chart.js)
   An old TV switching on, made modern: a bright line draws across the middle, then the chart
   opens out of it with a brief cyan/magenta edge glow that settles to nothing. ~0.8 s, once. */
.chart-box { position: relative; }
.chart-box.tv-wait > * { opacity: 0; }
.chart-box.tv > .chart { transform-origin: 50% 50%; animation: tv-open 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
.chart-box.tv > .hint { animation: tv-fade 0.4s 0.55s ease-out both; }
.chart-box.tv::after {
  content: ""; position: absolute; left: 4%; right: 4%; top: calc(50% - 13px); height: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(120, 225, 255, 0.85) 18%, #fff 50%, rgba(255, 110, 210, 0.85) 82%, transparent);
  box-shadow: 0 0 10px rgba(120, 225, 255, 0.65), 0 0 28px rgba(255, 90, 200, 0.28);
  animation: tv-line 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes tv-line {
  0% { transform: scaleX(0); opacity: 0; }
  10% { opacity: 1; }
  30% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1) scaleY(0.5); opacity: 0; }
}
@keyframes tv-open {
  0%, 26% { transform: scaleY(0.006); opacity: 0; filter: brightness(2.6); }
  30% { opacity: 1; }
  68% { transform: scaleY(1.012); filter: brightness(1.2) drop-shadow(1.5px 0 rgba(255, 70, 180, 0.5)) drop-shadow(-1.5px 0 rgba(70, 220, 255, 0.5)); }
  100% { transform: scaleY(1); opacity: 1; filter: none; }
}
@keyframes tv-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chart-box.tv > .chart, .chart-box.tv > .hint, .chart-box.tv::after { animation: none; } .chart-box.tv-wait > * { opacity: 1; } }