/* TAOPERP v0 — built on Brand System v1 (../brand/BRAND.md).
   Square corners, 1px borders, no shadows. Metal is reserved for the primary
   CTA and the mark's band; green/red/amber are position-semantic only. */

:root {
  /* neutral ramp (cool) */
  --ink-000: #08080A;
  --ink-025: #0A0C10;
  --ink-050: #0D0E11;
  --ink-100: #13151A;
  --ink-200: #1C1F26;
  --ink-300: #2A2F38;
  --ink-400: #4A525E;
  --ink-500: #6C7683;
  --ink-600: #94A0AD;
  --ink-800: #E7EEF5;

  /* brand */
  --ice: #A8E4FF;
  --glyph: #E9F4FC;
  --metal: linear-gradient(178deg, #F4F9FD, #C2D0DC 46%, #93A1AF);
  --emphasis: #55636F;

  /* semantic — locked */
  --long: #3FD694;
  --short: #E2563F;
  --warn: #F0B45C;
  --liq: #FF3B2F;

  --display: Michroma, "SF Mono", ui-monospace, monospace;
  --mono: "DM Mono", "SF Mono", ui-monospace, Menlo, monospace;

  /* spacing scale: 4 · 8 · 12 · 16 · 24 · 32 · 44 · 56 */
  --grid: 44px;

  /* Native widgets — scrollbars, select menus, the caret — follow this. */
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* The UA stylesheet gives [hidden] `display: none` at the lowest specificity,
   so any author rule that sets `display` beats it and the element stays on
   screen with its hidden attribute set. Settle it once, globally. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background-color: var(--ink-000);
  /* 44px background grid motif */
  background-image:
    linear-gradient(rgba(168, 228, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 228, 255, .05) 1px, transparent 1px);
  background-size: var(--grid) var(--grid);
  color: var(--ink-800);
  font: 400 14px/1.7 var(--mono);
  -webkit-font-smoothing: antialiased;
  /* One column the height of the viewport: masthead, the three panels, the
     ledger, the debug strip. The panels take whatever is left, so nothing has
     to guess at pixel heights that drift the moment content changes. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

@media (max-width: 760px) { :root { --grid: 30px; } }

h2, h3, h4 { margin: 0; }

/* Section head — Michroma 20 / .08em / uppercase, scaled for panel chrome */
.head {
  font: 400 11px/1 var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-600);
}

/* Micro label — DM Mono 10 / .22em / uppercase */
.micro {
  font: 400 10px/1 var(--mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.data { font: 500 15px/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-600); }
.small { font-size: 12px; }

/* Semantic hues never decorate; they only ever carry direction. */
.up { color: var(--long); }
.down { color: var(--short); }
.flat { color: var(--ink-500); }

/* Number change: 120ms color flash, no movement. */
@keyframes flash-up   { from { color: var(--long); }  to { color: inherit; } }
@keyframes flash-down { from { color: var(--short); } to { color: inherit; } }
.tick-up   { animation: flash-up 120ms ease-out; }
.tick-down { animation: flash-down 120ms ease-out; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- masthead ---------- */

.topbar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* min-height, not height: the bar wraps on narrow screens and a fixed
     height would push the controls over the horizon rule. */
  padding: 10px 24px;
  min-height: 56px;
  background: var(--ink-025);
  border-bottom: 1px solid var(--ink-200);
  flex-wrap: wrap;
  position: relative;
}

/* Horizon rule — one per composition, fading to transparent at both ends. */
.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--emphasis) 22%, var(--emphasis) 78%, transparent);
  opacity: .55;
}

/* Mark: the glyph never appears alone — always paired with PERP. */
.mark { display: flex; align-items: baseline; gap: 5px; }
.mark .glyph { font: 400 20px/1 var(--display); color: var(--glyph); }
.mark .word { font: 400 15px/1 var(--display); letter-spacing: .05em; color: var(--ink-800); }
.mark .rev {
  font: 400 9px/1 var(--mono);
  letter-spacing: .18em;
  color: var(--ink-500);
  border-left: 1px solid var(--ink-300);
  padding-left: 8px;
  margin-left: 4px;
}

.topbar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 400 10px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.status .dot { width: 5px; height: 5px; background: var(--ink-400); }
.status[data-state="open"] .dot { background: var(--long); }
.status[data-state="open"] { color: var(--ink-600); }
.status[data-state="connecting"] .dot { background: var(--warn); }
.status[data-state="closed"] .dot,
.status[data-state="error"] .dot { background: var(--short); }
.status.live .dot { background: var(--long); }

/* ---------- buttons ---------- */

.btn {
  font: 400 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 9px 16px;
  border: 1px solid var(--ink-300);
  border-radius: 0;
  background: transparent;
  color: var(--ink-800);
  cursor: pointer;
  transition: border-color 90ms ease-out, color 90ms ease-out;
}
.btn:hover:not(:disabled) { border-color: var(--emphasis); color: #fff; }
.btn:disabled { color: var(--ink-400); border-color: var(--ink-200); cursor: not-allowed; }
.btn:focus-visible { outline: 1px solid var(--ice); outline-offset: 2px; }

/* Metal: primary CTA only. */
.btn-primary {
  background: var(--metal);
  border-color: transparent;
  color: var(--ink-000);
  font-weight: 500;
}
.btn-primary:hover:not(:disabled) { color: var(--ink-000); filter: brightness(1.07); }
.btn-primary:disabled { background: var(--ink-100); color: var(--ink-400); }

.btn-sm { padding: 6px 10px; font-size: 10px; letter-spacing: .12em; }

/* ---------- layout ---------- */

.layout {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr) 336px;
  gap: 1px;
  background: var(--ink-200);
  border-bottom: 1px solid var(--ink-200);
  flex: 1;
  /* Enough for the centre column's own minimums (quote header, chart, books).
     Below this the page scrolls rather than squashing the chart to a line. */
  min-height: 566px;
  /* Without this the columns paint past their allotted height and bleed over
     the ledger below. Each panel scrolls inside itself instead. */
  overflow: hidden;
}
@media (max-width: 1180px) { .layout { grid-template-columns: 216px minmax(0, 1fr); } }
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; flex: none; overflow: visible; }
  .chart-panel { height: 300px; flex: none; }
  .panel { overflow: visible; }
  .book { min-height: 260px; }
  .ledger-body { height: auto; max-height: 320px; }
}

.panel {
  background: var(--ink-050);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  animation: enter 180ms ease-out;
}
@keyframes enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  height: 40px;
  flex: none;
  border-bottom: 1px solid var(--ink-200);
}

.empty { padding: 24px 16px; color: var(--ink-500); font-size: 13px; }
.empty p { margin: 0 0 8px; }
.empty p:last-child { margin: 0; }

/* ---------- market rail ---------- */

.market-list { overflow-y: auto; flex: 1; }

.market-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 12px;
  width: 100%;
  padding: 10px 16px;
  border: 0;
  border-bottom: 1px solid var(--ink-200);
  border-left: 2px solid transparent;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: background-color 90ms ease-out, border-color 90ms ease-out;
}
.market-row:hover { background: var(--ink-100); }
.market-row.active { background: var(--ink-100); border-left-color: var(--ice); }
.market-row:focus-visible { outline: 1px solid var(--ice); outline-offset: -1px; }

.market-row .sym { font: 500 13px/1.3 var(--mono); letter-spacing: .04em; }
.market-row .px { font: 500 13px/1.3 var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.market-row .cat { font: 400 9px/1 var(--mono); letter-spacing: .18em; color: var(--ink-500); text-transform: uppercase; }
.market-row .chg { font: 400 11px/1 var(--mono); font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- market detail ---------- */

.detail-head { padding: 20px 24px; border-bottom: 1px solid var(--ink-200); flex: none; }
.detail-title { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.detail-title h2 { font: 400 20px/1 var(--display); letter-spacing: .04em; }
.contract-line { margin-top: 10px; display: flex; gap: 18px; flex-wrap: wrap; }
.contract-line span { font: 400 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500); }
.contract-line b { color: var(--ink-600); font-weight: 400; }

/* Fixed columns, not auto-fit: eight cells divide evenly into two full rows,
   so the grid never ends on a stray empty tile. */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--ink-200);
  border: 1px solid var(--ink-200);
  margin-top: 20px;
}
@media (max-width: 620px) { .quote-grid { grid-template-columns: repeat(2, 1fr); } }
.quote { background: var(--ink-050); padding: 11px 14px; }
.quote .label { display: block; margin-bottom: 7px; }
/* Display number — Michroma, tabular. The heroes of the page. */
.quote .value { font: 400 15px/1.2 var(--display); letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.quote.hero .value { font-size: 19px; }

/* ---------- chart ---------- */

.chart-panel { display: flex; flex-direction: column; flex: 1; min-height: 220px; border-bottom: 1px solid var(--ink-200); }
.chart-host { flex: 1; min-height: 0; position: relative; }

.intervals { display: flex; gap: 0; }
.interval {
  background: transparent;
  border: 0;
  color: var(--ink-500);
  padding: 6px 11px;
  font: 400 10px/1 var(--mono);
  letter-spacing: .12em;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color 90ms ease-out, border-color 90ms ease-out;
}
.interval:hover { color: var(--ink-800); }
.interval.active { color: var(--ice); border-bottom-color: var(--ice); }
.interval:focus-visible { outline: 1px solid var(--ice); outline-offset: -2px; }

.books { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ink-200); height: 196px; flex: none; overflow: hidden; }
@media (max-width: 820px) { .books { grid-template-columns: 1fr; } }
.book { background: var(--ink-050); display: flex; flex-direction: column; min-height: 0; }
.book-body { overflow-y: auto; flex: 1; padding: 4px 0; }

.col-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 8px 16px 6px;
  border-bottom: 1px solid var(--ink-200);
}
.col-head span:last-child { text-align: right; }
.col-head.three { grid-template-columns: 1fr 1fr auto; }

.level {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 2px 16px;
  font: 400 12px/1.7 var(--mono);
  font-variant-numeric: tabular-nums;
  position: relative;
}
.level { cursor: pointer; transition: background-color 90ms ease-out; }
.level:hover { background: var(--ink-100); }
.level:focus-visible { outline: 1px solid var(--ice); outline-offset: -1px; }

.level .depth { position: absolute; inset: 0 auto 0 0; opacity: .10; }
.level span { position: relative; }
.level .qty { text-align: right; color: var(--ink-600); }

.spread {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  margin: 5px 0;
  border-top: 1px solid var(--ink-200);
  border-bottom: 1px solid var(--ink-200);
  font: 400 11px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-500);
}

.trade-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  padding: 2px 16px;
  font: 400 12px/1.7 var(--mono);
  font-variant-numeric: tabular-nums;
}
.trade-row .qty { text-align: right; color: var(--ink-600); }
.trade-row .time { color: var(--ink-400); font-size: 11px; }

/* ---------- account ---------- */

.kv { display: grid; grid-template-columns: 1fr auto; gap: 9px 12px; padding: 16px; margin: 0; border-bottom: 1px solid var(--ink-200); }
.kv dt { margin: 0; }
.kv dd { margin: 0; font: 500 13px/1.2 var(--mono); font-variant-numeric: tabular-nums; text-align: right; }

.rows { border-bottom: 1px solid var(--ink-200); }
.rows > .micro { display: block; padding: 12px 16px 8px; }
.row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--ink-200);
  font-size: 12px;
}
.row .r-sym { font: 500 12px/1.3 var(--mono); letter-spacing: .04em; }
.row .r-meta { font: 400 10px/1.4 var(--mono); letter-spacing: .06em; color: var(--ink-500); text-transform: uppercase; }
.row .r-val { font: 500 12px/1.3 var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.row .r-act { grid-column: 2; justify-self: end; }

/* ---------- order ticket ---------- */

.ticket { border-top: 1px solid var(--ink-200); padding-bottom: 16px; }
.ok-chip {
  font: 400 9px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--long);
  border: 1px solid rgba(63, 214, 148, .35);
  padding: 5px 7px;
}

.warn-chip {
  font: 400 9px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--warn);
  border: 1px solid rgba(240, 180, 92, .35);
  padding: 5px 7px;
}

.ticket-locked { padding: 18px 16px 4px; display: grid; gap: 12px; justify-items: start; }
.ticket-locked p { margin: 0; font-size: 12.5px; color: var(--ink-600); line-height: 1.65; }
.ticket-locked b { color: var(--ink-800); font-weight: 400; }

.slot.optional { border-left: 2px solid var(--ink-300); }
.slot.optional .slot-value { color: var(--ink-500); font-size: 11.5px; }
.slot.optional.found .slot-value { color: var(--ink-800); font-size: 12px; }

.note-line.dim { color: var(--ink-400); }
.note-line.dim b { color: var(--ink-600); }

.ticket-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ink-200); margin: 16px; border: 1px solid var(--ink-200); }
.tab {
  border: 0;
  background: var(--ink-050);
  color: var(--ink-500);
  padding: 10px;
  font: 400 10px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 90ms ease-out, background-color 90ms ease-out;
}
.tab:hover { color: var(--ink-800); }
.tab.active[data-side="BID"] { background: rgba(63, 214, 148, .12); color: var(--long); }
.tab.active[data-side="ASK"] { background: rgba(226, 86, 63, .12); color: var(--short); }

.field { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 12px; padding: 6px 16px; }
.field input, .field select {
  width: 100%;
  background: var(--ink-025);
  border: 1px solid var(--ink-300);
  border-radius: 0;
  padding: 9px 11px;
  color: var(--ink-800);
  font: 500 13px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  transition: border-color 90ms ease-out;
}
.field input::placeholder { color: var(--ink-400); }
.field input:focus, .field select:focus { outline: none; border-color: var(--ice); }
.field .unit { color: var(--ink-500); }

.qty-shortcuts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 8px 16px 0; background: var(--ink-200); border: 1px solid var(--ink-200); }
.qty-shortcuts button {
  background: var(--ink-050);
  border: 0;
  color: var(--ink-500);
  padding: 8px 0;
  font: 400 10px/1 var(--mono);
  letter-spacing: .1em;
  cursor: pointer;
  transition: color 90ms ease-out, background-color 90ms ease-out;
}
.qty-shortcuts button:hover:not(:disabled) { color: var(--ink-800); background: var(--ink-100); }
.qty-shortcuts button:disabled { color: var(--ink-400); cursor: not-allowed; }

.ticket-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px 12px;
  margin: 14px 16px 0;
  padding-top: 12px;
  border-top: 1px solid var(--ink-200);
}
.ticket-summary:empty { display: none; }
.ticket-summary dt { margin: 0; font: 400 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-500); }
.ticket-summary dd { margin: 0; font: 500 12px/1 var(--mono); font-variant-numeric: tabular-nums; text-align: right; }

.ticket .btn-submit { margin: 12px 16px 0; width: calc(100% - 32px); padding: 12px; }
.ticket-note { padding: 10px 16px 0; font-size: 12px; color: var(--ink-500); min-height: 20px; line-height: 1.55; }
.ticket-note.error { color: var(--short); }
.ticket-note.ok { color: var(--long); }

/* ---------- ledger ---------- */
/* Positions and orders live full-width below the three columns, the way a
   terminal puts the blotter under the chart. */

.ledger { flex: none; background: var(--ink-050); border-bottom: 1px solid var(--ink-200); }

.ledger-tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-bottom: 1px solid var(--ink-200);
  overflow-x: auto;
}
.ledger-tab {
  flex: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--ink-500);
  padding: 12px 20px;
  font: 400 11px/1 var(--mono);
  letter-spacing: .14em;
  cursor: pointer;
  white-space: nowrap;
  transition: color 90ms ease-out, border-color 90ms ease-out;
}
.ledger-tab:hover { color: var(--ink-800); }
.ledger-tab.active { color: var(--ink-800); border-bottom-color: var(--ice); }
.ledger-tab:focus-visible { outline: 1px solid var(--ice); outline-offset: -2px; }
.ledger-tab .count { color: var(--ink-400); font-size: 10px; }
.ledger-tab.active .count { color: var(--ice); }

.ledger-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 0 16px; }

.ledger-body { height: 180px; overflow-y: auto; }

.ledger-table { width: 100%; border-collapse: collapse; font: 400 12px/1 var(--mono); min-width: 780px; }
.ledger-table th {
  position: sticky;
  top: 0;
  background: var(--ink-050);
  text-align: left;
  font: 400 10px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-500);
  padding: 11px 14px;
  border-bottom: 1px solid var(--ink-200);
  white-space: nowrap;
}
.ledger-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--ink-200);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  vertical-align: middle;
}
.ledger-table tr:last-child td { border-bottom: 0; }
.ledger-table tr:hover td { background: var(--ink-100); }
.ledger-table th.num, .ledger-table td.num { text-align: right; }
.ledger-table .sym-cell { color: var(--ink-800); letter-spacing: .04em; }
.ledger-table .sub { display: block; font-size: 10px; opacity: .7; margin-top: 3px; }
.ledger-table .muted { color: var(--ink-500); }

.warn-text { color: var(--warn); }

/* margin gauge in the account summary */
.margin-bar { padding: 14px 16px; border-bottom: 1px solid var(--ink-200); display: grid; gap: 8px; }
.margin-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.margin-bar .bar { height: 3px; background: var(--ink-200); }
.margin-bar .bar i { display: block; height: 100%; background: var(--ice); transition: width 180ms ease-out; }

/* ---------- debug ---------- */

.debug { flex: none; background: var(--ink-025); border-top: 1px solid var(--ink-200); }
.debug-toggle {
  width: 100%;
  text-align: left;
  padding: 12px 24px;
  background: transparent;
  border: 0;
  color: var(--ink-500);
  font: 400 10px/1 var(--mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 90ms ease-out;
}
.debug-toggle:hover { color: var(--ink-600); }
.debug-toggle span { color: var(--ice); }
.debug-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--ink-200); border-top: 1px solid var(--ink-200); }
@media (max-width: 820px) { .debug-cols { grid-template-columns: 1fr; } }
.debug-cols > div { background: var(--ink-050); padding: 14px 24px 18px; min-width: 0; }
.debug-cols .micro { display: block; margin-bottom: 10px; }
.debug pre {
  margin: 0;
  font: 400 11px/1.75 var(--mono);
  color: var(--ink-600);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 200px;
  overflow-y: auto;
}

/* ---------- connect flow ---------- */
/* A full-bleed takeover rather than a small dialog: this is the single moment
   that decides whether someone trades here, so it gets the whole viewport.
   Two columns: a sticky step rail on the left — the spine — and the step body
   against it. The rail's 2px edge is the progress bar; the hairline between
   the columns is the only structural rule in the composition. */

.connect[hidden] { display: none; }
.connect {
  position: fixed;
  inset: 0;
  background: var(--ink-000);
  z-index: 20;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  padding: 0 clamp(16px, 4vw, 48px) 72px;

  /* Vertical rhythm for everything below — one scale, no ad-hoc margins.
     4 · 8 · 12 · 16 · 24 · 32 · 44 (BRAND.md). */
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 44px;
  --rail: 248px;
  /* Unframed prose measure. Framed blocks run the full column instead, so the
     panel edge — not a ragged right — draws the boundary. */
  --measure: 70ch;
}

.connect-inner {
  width: 100%;
  max-width: 1080px;
  animation: enter 180ms ease-out;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  /* Second row takes the rest of the viewport, so the hairline between rail
     and body runs the full height even on a short step. Without it a
     three-line step leaves the two columns hanging in the middle of the
     black. */
  grid-template-rows: auto 1fr;
  align-items: start;
  min-height: calc(100vh - 72px);
}

.connect-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s5);
  padding: var(--s7) 0 var(--s5);
  border-bottom: 1px solid var(--ink-200);
  position: relative;
}
/* Horizon rule: one 1px line fading to transparent at both ends, once per
   composition. It belongs to the masthead of this screen and nowhere else. */
.connect-head::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--emphasis) 20%, var(--emphasis) 80%, transparent);
  opacity: .5;
}
.connect-head h2 {
  font: 400 clamp(19px, 1.9vw, 26px)/1.32 var(--display);
  letter-spacing: .03em;
  margin: var(--s3) 0 var(--s3);
}
.connect-head p { margin: 0; font-size: 13px; max-width: 60ch; line-height: 1.75; }

.modal-close {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: 1px solid var(--ink-300);
  color: var(--ink-600);
  padding: 9px 14px;
  font: 400 11px/1 var(--mono);
  letter-spacing: .14em;
  cursor: pointer;
  flex: none;
  margin-top: 2px;
  transition: color 90ms ease-out, border-color 90ms ease-out;
}
.modal-close::after { content: "关闭"; }
.modal-close:hover { color: var(--ink-800); border-color: var(--emphasis); }
.modal-close:focus-visible { outline: 1px solid var(--ice); outline-offset: 2px; }

/* ---- the spine: a sticky vertical step rail ---- */

.stepper {
  grid-column: 1;
  list-style: none;
  margin: var(--s6) 0 0;
  padding: 0;
  display: block;
  position: sticky;
  top: var(--s5);
  align-self: start;
}
/* No gap between items, so the 2px edges below stack into one unbroken bar. */
.stepper li {
  display: block;
  border-left: 2px solid var(--ink-300);
  transition: border-color 180ms ease-out, background-color 180ms ease-out;
}
.step-hit {
  /* flex:1 + min-width:0 rather than width:100% — as a grid inside a block the
     button shrank to its icon column and every label wrapped one character per
     line. */
  display: grid;
  width: 100%;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 4px 14px;
  padding: 15px 20px 15px 16px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.step-hit:focus-visible { outline: 1px solid var(--ice); outline-offset: -2px; }
.step-hit .n {
  grid-row: 1 / 3;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font: 400 11px/1 var(--mono);
  border: 1px solid var(--ink-300);
  color: var(--ink-500);
  transition: color 90ms ease-out, border-color 90ms ease-out;
}
.step-hit .label {
  font: 400 12.5px/1.55 var(--mono);
  letter-spacing: .03em;
  color: var(--ink-500);
  transition: color 90ms ease-out;
}
.step-hit .where {
  font: 400 9px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-400);
  align-self: start;
}
.step-hit:hover .label { color: var(--ink-800); }

/* Ticked only where we can observe it — green is "done", never decoration. */
.stepper li.done { border-left-color: var(--long); }
.stepper li.done .n { border-color: rgba(63, 214, 148, .45); color: var(--long); }
.stepper li.done .label { color: var(--ink-600); }
/* Ice — the one non-semantic accent — marks where you are. The metal gradient
   is not used here: it belongs to the primary CTA alone. */
.stepper li.current { border-left-color: var(--ice); background: var(--ink-050); }
.stepper li.current .n { border-color: var(--ice); color: var(--ice); }
.stepper li.current .label { color: var(--ink-800); }
.stepper li.current .where { color: var(--ink-500); }

/* ---- step body ---- */

.step-body {
  grid-column: 2;
  align-self: stretch;
  border-left: 1px solid var(--ink-200);
  padding: var(--s6) 0 64px var(--s7);
  animation: enter 180ms ease-out;
  min-width: 0;
}

/* Tier 1 of the type hierarchy: what this step is. */
.step-body .lead {
  margin: 0 0 var(--s5);
  padding: 0 0 var(--s5);
  border-bottom: 1px solid var(--ink-200);
}
.step-body .lead h3 {
  font: 400 20px/1.45 var(--display);
  letter-spacing: .03em;
  margin: 0 0 10px;
}
.step-body .lead.ok h3 { position: relative; padding-left: 20px; }
.step-body .lead.ok h3::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 8px; height: 8px;
  background: var(--long);
}
.step-body .lead p { margin: 0; font-size: 13.5px; color: var(--ink-600); max-width: var(--measure); line-height: 1.8; }
.step-body b { color: var(--ink-800); font-weight: 400; }
.step-body code { background: var(--ink-025); border: 1px solid var(--ink-300); padding: 1px 5px; font-size: 11.5px; }

/* Tier 2: the numbered movements inside a step. The trailing rule gives each
   one a shoulder to sit on, so the body reads as sections and not as one wall. */
.sub { margin-top: var(--s6); }
.sub:first-child { margin-top: 0; }
.sub h4 {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: 0 0 var(--s4);
  font: 400 13px/1.4 var(--mono);
  letter-spacing: .08em;
  color: var(--ink-800);
}
.sub h4::after { content: ""; flex: 1; height: 1px; background: var(--ink-200); }
.sub-n { flex: none; color: var(--ice); font-size: 13px; }
/* One rhythm rule instead of a margin per block. Adjacent margins collapse, so
   a block that already carries a bottom margin keeps the larger of the two. */
.sub > * + * { margin-top: var(--s4); }

/* The launch bar: the one place the metal CTA appears on this screen. */
.step-cta {
  border: 1px solid var(--ink-200);
  background: var(--ink-050);
  padding: var(--s3) var(--s4);
  margin: 0 0 var(--s2);
  justify-content: space-between;
}

.mini-actions { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.mini .mini-actions { margin-top: var(--s3); }

/* Tier 4: supporting detail, no frame — it must not compete with a callout. */
.hint { font-size: 12px; color: var(--ink-500); line-height: 1.75; max-width: var(--measure); margin: 0; }
p.hint + p.hint { margin-top: var(--s3); }
.linkish { background: none; border: 0; color: var(--ice); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; }
.linkish:hover { color: var(--ink-800); }

/* Tier 3a: a framed statement of fact. Hairline rows, dash markers — a
   specification, not a bulleted aside. */
.facts {
  list-style: none;
  margin: 0 0 var(--s5);
  padding: 0;
  border-top: 1px solid var(--ink-200);
}
.facts li {
  position: relative;
  margin: 0;
  padding: 13px 0 13px 24px;
  border-bottom: 1px solid var(--ink-200);
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--ink-600);
}
.facts li::before {
  content: "";
  position: absolute;
  left: 4px; top: 22px;
  width: 8px; height: 1px;
  background: var(--ink-400);
}

/* An ordered procedure. Same row-list family as .facts — hairline rows that
   run the full column — so a step made of instructions and a step made of
   statements share one skeleton. */
.mini {
  list-style: none;
  counter-reset: mini;
  margin: 0 0 var(--s5);
  padding: 0;
  border-top: 1px solid var(--ink-200);
}
.mini li {
  counter-increment: mini;
  position: relative;
  margin: 0;
  padding: var(--s4) 0 18px 44px;
  border-bottom: 1px solid var(--ink-200);
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink-600);
}
.mini li::before {
  content: counter(mini, decimal-leading-zero);
  position: absolute;
  left: 0; top: 15px;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--ink-300);
  font: 400 10px/1 var(--mono);
  letter-spacing: .06em;
  color: var(--ink-500);
}

/* Tier 3b: a bordered aside. Same family as .facts, one notch heavier. */
.callout {
  border: 1px solid var(--ink-200);
  border-left: 2px solid var(--ink-400);
  background: var(--ink-050);
  padding: var(--s4) 18px;
  margin: 0 0 var(--s4);
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--ink-600);
}
.callout .hint { margin-top: var(--s2); display: block; }

/* Tier 5 — the top of the hierarchy: the thing that will cost you money if you
   skip it. Raised surface, brighter text, amber marker. Amber is caution and
   nothing else, so this treatment cannot be reused for emphasis. */
.callout.warn-callout {
  /* Absolute marker rather than a grid column: the callout's contents are a
     mix of elements and bare text, and grid would hand each text run its own
     18px track. */
  position: relative;
  border-color: rgba(240, 180, 92, .3);
  border-left: 2px solid var(--warn);
  background: var(--ink-100);
  color: var(--ink-800);
  padding: 18px 20px 18px 52px;
  font-size: 13px;
}
.callout.warn-callout::before {
  content: "!";
  position: absolute;
  left: 20px; top: 20px;
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--warn);
  color: var(--warn);
  font: 400 11px/1 var(--mono);
}
.callout.warn-callout b { color: var(--warn); font-weight: 400; }

.reinstall { border: 1px solid var(--ink-200); background: var(--ink-050); margin-top: var(--s4); }
.reinstall summary { padding: 13px 16px; cursor: pointer; font-size: 12.5px; color: var(--ink-500); list-style: none; transition: color 90ms ease-out; }
.reinstall summary::-webkit-details-marker { display: none; }
.reinstall summary::before { content: "+ "; color: var(--ink-400); }
.reinstall[open] summary::before { content: "\2212 "; }
.reinstall summary:hover { color: var(--ink-800); }
.reinstall[open] summary { color: var(--ink-800); border-bottom: 1px solid var(--ink-200); }
.reinstall-body { padding: var(--s4) 16px; display: grid; gap: var(--s3); justify-items: start; }

/* Promises left, the picture of the dialog right — the two halves of "what a
   trading key is" side by side instead of stacked down a narrow column. */
.key-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 376px);
  gap: var(--s6);
  align-items: start;
  margin: 0 0 var(--s2);
}
.key-pair .facts { margin-bottom: 0; }

/* --- a drawing of Hibachi's own dialog --- */
/* It is a picture of somebody else's product, so it is built out of a
   different set of surfaces than ours: a hatched mat, a title bar with window
   chrome, and a raised face. Nothing in it is clickable, and it should not
   look like it is. */

.hb {
  margin: 0;
  padding: var(--s4);
  border: 1px solid var(--ink-200);
  background-color: var(--ink-025);
  background-image: repeating-linear-gradient(45deg, rgba(168, 228, 255, .05) 0 1px, transparent 1px 7px);
  pointer-events: none;
  user-select: none;
}
.hb figcaption {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--ink-300);
  border-bottom: 0;
  background: var(--ink-200);
  font: 400 9.5px/1.2 var(--mono);
  letter-spacing: .02em;
  color: var(--ink-600);
  /* A title bar is one line or it stops reading as a title bar. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hb-dots { display: flex; gap: 5px; flex: none; }
.hb-dots i { width: 5px; height: 5px; background: var(--ink-400); display: block; }
.hb-body { border: 1px solid var(--ink-300); background: var(--ink-100); padding: 18px; display: grid; gap: var(--s3); }
.hb-field { display: grid; gap: 6px; }
.hb-field > span { font: 400 11px/1 var(--mono); color: var(--ink-500); }
.hb-control { border: 1px solid var(--ink-300); background: var(--ink-025); padding: 9px 10px; font: 400 12px/1 var(--mono); color: var(--ink-600); }
.hb-seg { display: flex; gap: 8px; }
.hb-seg i { border: 1px solid var(--ink-300); padding: 7px 12px; font: 400 11px/1 var(--mono); font-style: normal; color: var(--ink-500); }
.hb-seg i.on { border-color: var(--ice); color: var(--ice); }
.hb-checks { display: grid; gap: 9px; padding: var(--s3) 0; border-top: 1px solid var(--ink-200); border-bottom: 1px solid var(--ink-200); }
.hb-checks label { display: flex; align-items: center; gap: 9px; font: 400 12px/1 var(--mono); color: var(--ink-500); }
.hb-checks i { width: 14px; height: 14px; border: 1px solid var(--ink-300); display: flex; align-items: center; justify-content: center; font-size: 9px; font-style: normal; flex: none; }
.hb-checks i.on { border-color: var(--long); color: var(--long); }
.hb-checks b { margin-left: auto; font: 400 10px/1 var(--mono); letter-spacing: .1em; }
.hb-checks b.yes { color: var(--long); }
.hb-checks b.no { color: var(--short); }
.hb-note { margin: 0; font: 400 11px/1.65 var(--mono); color: var(--ink-400); }

/* --- paste route --- */

.key-facts { display: grid; gap: 1px; background: var(--ink-200); border: 1px solid var(--ink-200); margin: 0 0 var(--s5); }
.fact { background: var(--ink-050); padding: 13px 16px; font-size: 12.5px; line-height: 1.7; color: var(--ink-500); border-left: 2px solid var(--ink-300); }
.fact b { color: var(--ink-600); font-weight: 400; }
.fact.ok { border-left-color: var(--long); }
.fact.ok b { color: var(--long); }
.fact.warn { border-left-color: var(--warn); }
.fact.warn b { color: var(--warn); }

/* One panel, two halves: what you paste, and what we got out of it. */
.paste-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: stretch;
  border: 1px solid var(--ink-200);
}
/* auto row for the checkbox, 1fr for the box: the paste area grows to match
   the slot column so the panel has no dead half. */
.paste-form { padding: var(--s5); display: grid; gap: var(--s4); grid-template-rows: auto minmax(120px, 1fr); }

.session-only { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; color: var(--ink-500); cursor: pointer; line-height: 1.6; }
.session-only input { accent-color: var(--ice); margin-top: 3px; flex: none; }
.session-only:hover { color: var(--ink-600); }

#pasteBox {
  width: 100%;
  background: var(--ink-025);
  border: 1px solid var(--ink-300);
  border-radius: 0;
  padding: var(--s3);
  color: var(--ink-800);
  font: 400 12px/1.7 var(--mono);
  resize: vertical;
  transition: border-color 90ms ease-out;
}
#pasteBox:focus { outline: none; border-color: var(--ice); }

.popup-state { color: var(--ink-500); display: inline-flex; align-items: center; gap: 7px; }
.popup-state::before {
  content: "";
  width: 5px; height: 5px;
  background: var(--ink-400);
  display: none;
}
.popup-state.open::before { display: block; background: var(--long); animation: pulse 1.4s ease-in-out infinite; }
.popup-state.open { color: var(--ink-600); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* Wallet pre-flight: what this browser has, before the user leaves for it. */
.wallet-state {
  font-size: 12px;
  line-height: 1.65;
  padding: 10px 12px;
  border: 1px solid var(--ink-300);
  border-left-width: 2px;
  color: var(--ink-500);
  margin-bottom: var(--s4);
}
.wallet-state b { font-weight: 400; }
.wallet-state.ok { border-left-color: var(--long); color: var(--ink-600); }
.wallet-state.ok b { color: var(--long); }
.wallet-state.warn { border-left-color: var(--warn); color: var(--ink-600); }
.wallet-state.warn b { color: var(--warn); }

.link-sm {
  font: 400 11px/1 var(--mono);
  color: var(--ink-500);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-300);
  padding-bottom: 2px;
  transition: color 90ms ease-out, border-color 90ms ease-out;
}
.link-sm:hover { color: var(--ice); border-bottom-color: var(--ice); }

/* --- credential slots --- */

.slots { background: var(--ink-050); display: flex; flex-direction: column; border-left: 1px solid var(--ink-200); }
.slots-head {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  padding: 0 20px;
  height: 46px;
  align-items: center;
  border-bottom: 1px solid var(--ink-200);
}
.slot-list { flex: 1; }

.slot {
  display: grid;
  gap: 5px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--ink-200);
}
.slot-label { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.slot-name { font: 400 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-500); }
.slot-check { font: 400 11px/1 var(--mono); color: var(--ink-300); }
.slot-value { font: 400 12px/1.4 var(--mono); color: var(--ink-400); word-break: break-all; }

.slot.found .slot-name { color: var(--ink-600); }
.slot.found .slot-check { color: var(--long); }
.slot.found .slot-value { color: var(--ink-800); }

/* The derived row reads as satisfied-by-us, not as something still owed. */
.slot.derived { border-left: 2px solid var(--ink-300); }
.slot.derived .slot-value { font-style: italic; }
.slot.derived.found { border-left-color: var(--ice); }
.slot.derived.found .slot-check { color: var(--ice); }
.slot.derived.found .slot-value { color: var(--ink-500); }

.slots-foot { padding: 20px; border-top: 1px solid var(--ink-200); display: grid; gap: var(--s4); }
.slots-foot p { margin: 0; line-height: 1.7; letter-spacing: .1em; }
.slots-foot .btn { width: 100%; padding: 12px; }

/* ---- narrow: the rail stops being a column and stacks above the body ---- */
/* It stays a vertical rail rather than flipping to a horizontal band: side by
   side there is not enough width for "在 Hibachi 开户、入金、建 key" and the
   labels ellipsise into nonsense. One stepper, two placements. */

@media (max-width: 980px) {
  /* Plain block flow, not a one-column grid: a horizontal-scrolling child in
     an auto grid row is a family of sizing bugs we do not need here. */
  .connect-inner { display: block; min-height: 0; }
  .stepper { position: static; margin: var(--s5) 0 0; max-width: 480px; }
  .step-body { border-left: 0; padding: var(--s6) 0 56px; }
  .key-pair { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .hb { max-width: 420px; }
}

@media (max-width: 760px) {
  .connect { padding-bottom: 48px; }
  /* wrap-reverse puts the close control on its own line above the title
     instead of stranding it under the copy. */
  .connect-head { padding-top: var(--s6); flex-wrap: wrap-reverse; gap: var(--s3); }
  .connect-head h2 { margin-top: 10px; }
  .connect-head p { font-size: 12.5px; }
  .modal-close { margin-left: auto; }

  .stepper { margin-top: var(--s4); }
  .step-hit { padding: 11px 14px 11px 12px; gap: 3px 11px; }
  .step-hit .label { font-size: 12px; }

  .paste-grid { grid-template-columns: minmax(0, 1fr); }
  .paste-form { padding: var(--s4); }
  .slots { border-left: 0; border-top: 1px solid var(--ink-200); }
  .sub { margin-top: var(--s5); }
  .step-body { padding: var(--s5) 0 48px; }
  .step-body .lead h3 { font-size: 17px; }
  .callout.warn-callout { padding: var(--s4) var(--s4) var(--s4) 46px; }
  .callout.warn-callout::before { left: 16px; top: 17px; }
}