:root {
  /* ---- brand ---- */
  --brand: #5045e8;          /* manypad purple, from the mark */
  --brand-hot: #6f63ff;
  --brand-deep: #372dbd;
  --brand-tint: rgba(80, 69, 232, 0.14);
  /* --brand-tint composites to #161532 over --bg-raised. --brand-hot reads
     4.1:1 there and --text-faint 4.2:1, both under AA, so text on a tinted
     surface uses these instead: 5.9:1 and 6.4:1. */
  --brand-on-tint: #8f86ff;
  --text-on-tint: var(--text-dim);

  /* ---- terminal surface ---- */
  --bg: #08080d;
  --bg-raised: #0d0d14;
  --bg-sunken: #050508;
  --surface: #12121c;
  --surface-hover: #181826;
  --border: #1d1d2c;
  --border-strong: #2b2b42;

  --text: #eeeef6;
  --text-dim: #9a9ab2;
  /* Carries every hint, step subtitle, table header and empty state, so it is
     read as often as --text. At #5c5c74 it measured 2.99:1 on --bg-raised —
     below AA, on a surface that spends money. #7a7a95 keeps the cool cast and
     the hierarchy while clearing 4.5:1 on all three surfaces: 4.65:1 on
     --bg-raised, 4.80:1 on --bg, 4.89:1 on --bg-sunken. */
  --text-faint: #7a7a95;

  --accent: var(--brand);
  --accent-hot: var(--brand-hot);
  --accent-dim: var(--brand-tint);
  --pump: #3ddc84;
  --pump-dim: rgba(61, 220, 132, 0.12);

  --ok: #3ddc84;
  --warn: #f5b944;
  --bad: #ff5c74;
  --pending: #5aa7ff;

  /* ---- type ---- */
  --font: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;
  /* 11px carried 62% of the workspace's text, including hint sentences of
     ~57 characters in the faintest colour on the page. A label can live at
     11px; prose cannot, and most of this was prose. */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-lg: 16px;
  --fs-xl: 21px;
  --fs-2xl: 32px;

  /* ---- space & shape ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 22px;
  --sp-6: 30px;
  --sp-7: 44px;
  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 12px;
  --shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
  --ring: 0 0 0 3px var(--brand-tint);
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  /* Two full-viewport gradient washes used to sit behind everything. They
     read as decoration rather than surface and made the purple ambient, which
     is exactly what stops it meaning anything where it is used on purpose. */
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: var(--fs-base); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/*
 * The surfaces the browser draws for us.
 *
 * Selection, the caret and the scrollbar shipped as Chrome's defaults on a
 * near-black terminal: a bright blue selection band that made selected text
 * harder to read than unselected text, and a light scrollbar track cutting
 * down the side of every scrolling panel. Wallet addresses and transaction
 * hashes get selected constantly here, so selection is a working surface
 * rather than a nicety.
 */
::selection { background: var(--brand); color: #fff; }
input, textarea, select { caret-color: var(--brand-hot); }
* { scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 6px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

a { color: var(--accent-hot); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
code, .mono { font-family: var(--mono); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

.wrap { max-width: 1240px; min-height:100vh; margin: 0 auto; padding: 0 var(--sp-4); display:flex; flex-direction:column; }

/* ---------------------------------------------------------- topbar --- */
header {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) 0; margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
}
.brand { display: flex; align-items: center; gap: 10px; color:var(--text); }
.brand:hover { text-decoration:none; }
.brand svg { display: block; }
.logo {
  font-size: 24px; font-weight: 800; letter-spacing: -0.04em; margin: 0;
  line-height: 1; color: var(--text);
}
.header-status { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.spacer { flex: 1; }
.pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 5px 11px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--text-dim); white-space: nowrap;
  font-family: var(--mono);
}
/*
 * The landing page is reachable from inside the terminal, so the top bar
 * carries its own navigation. It hides in the terminal, where the tab strip
 * below it is the navigation and two competing rows would compete.
 */
.landing-nav { display:flex; align-items:center; gap:var(--sp-4); }
.landing-nav a {
  font-size: var(--fs-xs); color: var(--text-dim); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.landing-nav a:hover { color: var(--text); border-bottom-color: var(--border-strong); }
.header-cta { color: var(--text); border-color: var(--border-strong); }
.header-cta:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 720px) {
  .landing-nav { display: none; }
  /*
   * The header is sticky, so every wrapped row is permanently lost viewport.
   * Dashboard earns its place there; the walkthrough does not — it is one tap
   * away under Settings, and keeping it here cost a whole extra row.
   */
  #btn-guide { display: none; }
  /* A long connect label ("local preview · throwaway wallets") was forcing a
     row of its own. Let it truncate instead of pushing the pills apart. */
  #connect { max-width: 48vw; overflow: hidden; text-overflow: ellipsis; display: block; }
}
.header-action { cursor:pointer; }
.header-action:hover { color:var(--text); border-color:var(--border-strong); background:var(--surface-hover); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); flex: none; }
.dot.ok { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.dot.bad { background: var(--bad); box-shadow: 0 0 8px var(--bad); }
.dot.warn { background: var(--warn); }

/* ------------------------------------------------------------ rail --- */
.tabs {
  display: inline-flex; gap: 2px; margin-bottom: var(--sp-5);
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 3px;
}
.tab {
  padding: 7px 18px; border-radius: var(--radius-sm);
  background: transparent; border: none; color: var(--text-dim);
  font-family: var(--font); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: 0.02em; cursor: pointer;
}
.tab:hover { color: var(--text); }
.tab[aria-selected='true'] { background: var(--brand); color: #fff; }
@media (max-width: 620px) {
  /*
   * The rail scrolls rather than clipping. It already had overflow-x, but no
   * padding at the end, so the last tab sat flush against the edge and read as
   * cut off rather than as scrollable. The inline padding and the momentum
   * scroll are what make it obvious there is more.
   */
  /*
   * Six tabs do not fit 375px, so the rail scrolls and its scrollbar is
   * hidden. That left Portfolio and Settings 161px off-screen with nothing
   * saying they were there. The mask fades the right edge so the strip
   * visibly continues.
   */
  .tabs {
    display: flex; width: 100%; max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-right: var(--sp-4);
    mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; padding-inline: 14px; min-height: 34px; }
  /* Thumb-sized on touch without changing the desktop density. */
  .quick button { min-height: 34px; }
}

/* ------------------------------------------------------- touch --- */
/*
 * Density is correct for a mouse on an operator terminal, so it is kept.
 * A finger is not a mouse: on a coarse pointer the tab rail was 29px tall and
 * the header pills 24px, well under the 44px a thumb needs. Raising them only
 * where the pointer is coarse fixes touch without loosening the desktop grid.
 */
@media (pointer: coarse) {
  .tab { min-height: 44px; display: inline-flex; align-items: center; }
  .pill, .header-action { min-height: 44px; padding-block: 0; }
  .btn.small { min-height: 44px; padding-block: 0; }
  .stepper button { min-width: 44px; min-height: 44px; }
  .check { width: 24px; height: 24px; }
  summary { min-height: 44px; display: flex; align-items: center; }
}

/* ---------------------------------------------------------- panels --- */
.layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--sp-4); align-items: start; }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }

.step {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-5); margin-bottom: var(--sp-4);
  box-shadow:0 1px 0 rgba(255,255,255,.015);
}
.step-head { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.step-n {
  width: 22px; height: 22px; flex: none; border-radius: var(--radius-sm);
  background: var(--brand-tint); color: var(--brand-on-tint);
  display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 800;
  align-self: center; font-family: var(--mono);
}
.step h2 {
  margin: 0; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim);
}
.step-sub { color: var(--text-faint); font-size: var(--fs-xs); font-family: var(--mono); }

/* ---------------------------------------------------------- fields --- */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-3); }
.field { min-width: 0; }
label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--fs-xs); color: var(--text-faint); margin-bottom: var(--sp-1);
  font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.counter { font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-faint); text-transform: none; }
.counter.over { color: var(--bad); font-weight: 700; }
input, select, textarea {
  width: 100%; padding: 9px 11px;
  background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text); font-family: var(--font); font-size: var(--fs-base);
  transition:border-color .15s, box-shadow .15s, background .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
input.invalid { border-color: var(--bad); }
input[readonly] { color: var(--text-faint); }
textarea { resize: vertical; min-height: 72px; }
/*
 * Hints explain a field, in sentences. They were the smallest and faintest
 * text in the workspace, which put the explanation of a control below the
 * legibility of the control's own label.
 */
.hint {
  font-size: var(--fs-sm); line-height: 1.5; color: var(--text-dim);
  margin-top: var(--sp-2); max-width: 68ch;
}
/*
 * A field group, shown. These were <details>, which put required inputs one
 * click out of sight: socials, Pons economics and the guardrails are all
 * things a launch is expected to carry, and hiding them behind a disclosure
 * made a form look finished when half of it had not been seen. Same rule as
 * the divider above, no toggle.
 */
.field-group { margin-top: var(--sp-4); border-top: 1px solid var(--border); padding-top: var(--sp-3); }
.field-group-head {
  margin: 0 0 var(--sp-3); color: var(--text-dim); font-size: var(--fs-xs);
  font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
details.more { margin-top: var(--sp-4); border-top: 1px solid var(--border); padding-top: var(--sp-3); }
details.more summary {
  cursor: pointer; color: var(--text-dim); font-size: var(--fs-xs); user-select: none;
  font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
details.more[open] summary { margin-bottom: var(--sp-3); color: var(--text); }
.summary-note {
  margin-left: var(--sp-2); color: var(--text-faint);
  font-weight: 400; letter-spacing: 0; text-transform: none;
}

/* ------------------------------------------------------ launchpads --- */
.pads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
@media (max-width: 820px) { .pads { grid-template-columns: 1fr; } }
.pad {
  position: relative; text-align: left; cursor: pointer;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius);
  background: var(--bg-sunken); border: 1px solid var(--border); color: var(--text);
  font-family: var(--font); font-size: var(--fs-base);
  transition: border-color .1s, background .1s;
  display: flex; gap: var(--sp-3); align-items: flex-start;
}
.pad:hover:not(.disabled) { border-color: var(--border-strong); }
.pad.on { border-color: var(--brand); background: var(--brand-tint); }
.pad.on p { color: var(--text-on-tint); }
.pad[data-venue='pumpfun'].on { border-color: var(--pump); background: var(--pump-dim); }
.pad.disabled { opacity: .45; cursor: not-allowed; }
.check {
  width: 18px; height: 18px; flex: none; border-radius: 5px;
  border: 1.5px solid var(--border-strong); display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: transparent; margin-top: 3px;
}
.pad.on .check { background: var(--brand); border-color: var(--brand); color: #fff; }
.pad[data-venue='pumpfun'].on .check { background: var(--pump); border-color: var(--pump); color: #06240f; }
.pad h3 { margin: 0 0 2px; font-size: var(--fs-base); font-weight: 700; }
.pad p { margin: 0; color: var(--text-faint); font-size: var(--fs-xs); line-height: 1.45; font-family: var(--mono); }

/* ----------------------------------------------------------- count --- */
.count-row { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.stepper { display: flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.stepper button {
  width: 36px; height: 38px; border: none; border-radius: 0; background: var(--surface);
  color: var(--text); font-size: var(--fs-lg); font-weight: 600; cursor: pointer;
}
.stepper button:hover:not(:disabled) { background: var(--surface-hover); }
.stepper input {
  width: 64px; text-align: center; border: none; border-radius: 0;
  background: var(--bg-sunken); font-family: var(--mono); font-size: var(--fs-lg); font-weight: 700;
}
.stepper input:focus { box-shadow: none; }
.quick { display: flex; gap: var(--sp-1); }
.quick button {
  padding: 5px 10px; font-size: var(--fs-xs); font-weight: 700;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-dim); cursor: pointer; font-family: var(--mono);
}
.quick button:hover, .quick button.on { background: var(--brand-tint); color: var(--brand-on-tint); border-color: var(--brand); }

.preview {
  margin-top: var(--sp-4); background: var(--bg-sunken); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: var(--sp-3);
  max-height: 140px; overflow-y: auto;
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
.chip {
  padding: 2px 8px; border-radius: 4px; background: var(--surface);
  border: 1px solid var(--border); font-size: var(--fs-xs); font-family: var(--mono); color: var(--text-dim);
}

/* --------------------------------------------------------- summary --- */
.summary { position: sticky; top: 64px; }
.line { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 7px 0; font-size: var(--fs-sm); }
.line + .line { border-top: 1px solid var(--border); }
.line .k { color: var(--text-dim); }
.line .v { font-family: var(--mono); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.total { border-top: 1px solid var(--border-strong); margin-top: var(--sp-2); padding-top: var(--sp-3);
  display: flex; justify-content: space-between; align-items: baseline; }
.total .k { font-weight: 700; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); }
.total .v { font-family: var(--mono); font-size: var(--fs-lg); font-weight: 700; color: var(--brand-hot); }

/* --------------------------------------------------------- buttons --- */
button { font-family: var(--font); font-weight: 700; cursor: pointer; }
.btn {
  border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); padding: 10px 16px; font-size: var(--fs-base); width: 100%;
  transition:background .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s;
}
.btn:hover:not(:disabled) { background: var(--surface-hover); border-color:#3a3a54; transform:translateY(-1px); }
.btn:active:not(:disabled) { transform:translateY(0); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.primary {
  background: var(--brand); border-color: var(--brand); color: #fff;
  /* Was an 18px purple bloom. A glow reads as decoration and made the accent
     ambient on a page where purple is supposed to mean "this is the action".
     A tight neutral shadow still lifts the button off the surface. */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.btn.primary:hover:not(:disabled) { background: var(--brand-deep); border-color: var(--brand-hot); }
.btn.danger { color:#ff9aab; border-color:rgba(255,92,116,.32); background:rgba(255,92,116,.06); }
.btn.danger:hover:not(:disabled) { border-color:var(--bad); background:rgba(255,92,116,.12); }
.btn.small { width: auto; padding: 6px 12px; font-size: var(--fs-xs); font-weight: 600; }
.row { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }

/* --------------------------------------------------------- results --- */
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
th {
  text-align: left; padding: 7px var(--sp-2); color: var(--text-faint);
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  border-bottom: 1px solid var(--border-strong);
}
td { padding: 7px var(--sp-2); border-bottom: 1px solid var(--border); vertical-align: top; font-family: var(--mono); font-size: var(--fs-sm); }
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(80, 69, 232, 0.04); }

.status { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: var(--fs-xs); font-weight: 700; font-family: var(--mono); }
.status.launched, .status.simulated, .status.sent { background: var(--pump-dim); color: var(--ok); }
.status.pending, .status.queued, .status.running { background: rgba(90,167,255,.12); color: var(--pending); }
.status.reverted, .status.failed, .status.timeout, .status[class*='fail'] { background: rgba(255,92,116,.12); color: var(--bad); }

.log {
  font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-dim);
  background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--sp-3); max-height: 200px; overflow-y: auto; white-space: pre-wrap;
}

.notice { padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
  font-size: var(--fs-sm); margin-bottom: var(--sp-3); border: 1px solid; }
.notice.bad { background: rgba(255,92,116,.07); border-color: rgba(255,92,116,.3); color: #ff9aab; }
.notice.warn { background: rgba(245,185,68,.07); border-color: rgba(245,185,68,.3); color: #f8d087; }
.notice.info { background: var(--brand-tint); border-color: var(--border-strong); color: var(--text-dim); }
.notice.ok { background: var(--pump-dim); border-color: rgba(61,220,132,.3); color: #7fe8ac; }
.error-summary { display:flex; align-items:flex-start; gap:var(--sp-3); }
.error-summary strong { flex:none; color:var(--warn); }
.error-summary span { color:var(--text-dim); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); }
.kv dt { color: var(--text-faint); }
.kv dd { margin: 0; font-family: var(--mono); font-size: var(--fs-xs); word-break: break-all; }

.hidden { display: none !important; }
.truncate { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
.tweet-picker {
  display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-2);
}
.tweet-picker button {
  padding: 0; border: 2px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-sunken); cursor: pointer; overflow: hidden;
  width: 64px; height: 64px;
}
.tweet-picker button:hover { border-color: var(--border-strong); }
.tweet-picker button.selected { border-color: var(--brand); box-shadow: var(--ring); }
.tweet-picker img { width: 100%; height: 100%; object-fit: cover; display: block; }

.logo-preview { width: 42px; height: 42px; border-radius: var(--radius-sm); object-fit: cover;
  border: 1px solid var(--border); background: var(--bg-sunken); }
/*
 * Until a URI is entered the <img> has no src, and an empty replaced element
 * reads as a failed load rather than as a waiting slot. The dashed border and
 * the glyph say "image goes here" without shipping a placeholder asset.
 */
.logo-preview.is-empty {
  border-style: dashed; border-color: var(--border-strong);
  background: var(--bg-sunken) no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a7a95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E");
}

/* ------------------------------------------------ landing & public --- */
/*
 * One spacing rhythm, one border treatment, one panel. The previous landing
 * page had a different radius on nearly every block (14, 16, 20px), a blurred
 * purple disc behind the hero, a second gradient wash behind the body, and put
 * every idea inside its own bordered card, which left nothing looking more
 * important than anything else. Hierarchy here comes from space and type
 * weight; a border is used only where something is genuinely a surface.
 */
:root {
  --landing-max: 1080px;
  --rule: 1px solid var(--border);
  --section-gap: clamp(64px, 8vw, 104px);
}

#landing { padding-bottom: var(--sp-7); }
/* The header is sticky, so an anchored section must clear it. */
.landing-section, #landing [id] { scroll-margin-top: 84px; }
.landing-section { padding-top: var(--section-gap); }
.landing-section + .landing-section { border-top: var(--rule); }

.section-head { max-width: 62ch; margin-bottom: var(--sp-6); }
.section-head h2 {
  margin: 0; font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.15; letter-spacing: -0.025em; font-weight: 700;
}
.section-head p { margin: var(--sp-3) 0 0; color: var(--text-dim); font-size: var(--fs-lg); }
.section-note { margin: var(--sp-4) 0 0; color: var(--text-faint); font-size: var(--fs-sm); }

/* ------------------------------------------------------------ hero --- */
/*
 * Deliberately short: the whole proposition, the custody model and both
 * actions inside one screen. The old hero was a 76px headline over a rotated,
 * drop-shadowed mockup and needed most of a viewport to say less.
 */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
  /* The section below supplies its own top gap; adding one here too made
     the first fold read as empty. */
  padding: clamp(32px, 5vw, 56px) 0 0;
}
.hero-copy { max-width: 58ch; }
.hero-eyebrow {
  margin: 0 0 var(--sp-4); color: var(--text-faint);
  font-family: var(--mono); font-size: var(--fs-xs);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.hero-title {
  margin: 0; font-size: clamp(32px, 3.8vw, 46px); font-weight: 700;
  line-height: 1.08; letter-spacing: -0.035em;
}
.hero-sub { margin: var(--sp-4) 0 0; max-width: 54ch; color: var(--text-dim); font-size: var(--fs-lg); line-height: 1.55; }
.hero-trust { margin: var(--sp-3) 0 0; color: var(--text); font-size: var(--fs-base); }
.hero-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5); }
.hero-actions .btn { width: auto; min-width: 168px; }
.hero-actions .text-link {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 0 var(--sp-2); color: var(--text-dim); font-weight: 600;
}
.hero-actions .text-link:hover { color: var(--text); text-decoration: none; }
.hero-proof {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  margin: var(--sp-6) 0 0; padding: var(--sp-4) 0 0; border-top: var(--rule);
  list-style: none; color: var(--text-dim); font-size: var(--fs-sm);
}

/* ----------------------------------------------------------- panel --- */
/*
 * The one surface primitive, shaped like the workspace's own panels so a
 * product shot on the landing page and the real thing are the same object.
 */
.panel { border: var(--rule); border-radius: var(--radius); background: var(--bg-raised); overflow: hidden; }
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: 9px var(--sp-4); border-bottom: var(--rule); background: var(--bg-sunken);
  font-family: var(--mono); font-size: var(--fs-xs);
}
.panel-path { color: var(--text-faint); }
.panel-state { color: var(--text-dim); }
.panel-state.live { color: var(--ok); }
.panel-body { padding: var(--sp-4); }

.hero-panel-title {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-4);
}
.hero-panel-title strong { font-size: var(--fs-xl); letter-spacing: -0.02em; }
.hero-panel-title span { color: var(--text-faint); font-family: var(--mono); font-size: var(--fs-xs); }

.wallet-rows { display: grid; gap: 1px; background: var(--border); border: var(--rule); border-radius: var(--radius-sm); overflow: hidden; }
.wallet-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: var(--sp-3);
  align-items: center; padding: 8px 11px; background: var(--bg-raised);
  font-family: var(--mono); font-size: var(--fs-xs);
}
.wallet-row b { color: var(--text-dim); font-weight: 400; }
.wallet-row span { color: var(--text); font-variant-numeric: tabular-nums; }
.wallet-row em { color: var(--text-faint); font-style: normal; }
.panel-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: var(--rule);
  font-family: var(--mono); font-size: var(--fs-sm);
}
.panel-total span { color: var(--text-faint); }
.panel-total b { color: var(--text); font-variant-numeric: tabular-nums; }

.readout { display: grid; gap: 1px; margin: 0; background: var(--border); }
.readout > div {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding: 10px 0; background: var(--bg-raised);
}
.readout dt { color: var(--text-faint); font-size: var(--fs-sm); }
.readout dd {
  margin: 0; font-family: var(--mono); font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums; color: var(--text);
}

/* ---------------------------------------------------- venue table --- */
.venue-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.venue-table th {
  padding: 0 var(--sp-4) var(--sp-2) 0; border-bottom: var(--rule); text-align: left;
  color: var(--text-faint); font-family: var(--mono); font-size: var(--fs-xs);
  font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
}
.venue-table td { padding: 11px var(--sp-4) 11px 0; border-bottom: var(--rule); color: var(--text-dim); }
.venue-table tbody tr:last-child td { border-bottom: 0; }
.venue-table td:first-child { color: var(--text); font-family: var(--mono); }
.venue-table .yes { color: var(--ok); }
.venue-table .no { color: var(--text-faint); }

/* --------------------------------------------------------- steps --- */
/*
 * Numbered editorial rows rather than four identical cards. The number is the
 * only ornament and it carries real meaning, because the order matters.
 */
.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--border); }
.steps li {
  counter-increment: step; display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--sp-4);
  padding: var(--sp-5) 0; background: var(--bg);
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  color: var(--text-faint); font-family: var(--mono); font-size: var(--fs-sm);
  padding-top: 2px;
}
/* Both belong in the prose column; without this the paragraph wraps onto a
   second row and is laid out inside the 2.5rem number column. */
.steps h3 { grid-column: 2; margin: 0; font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; }
.steps p { grid-column: 2; margin: 6px 0 0; max-width: 68ch; color: var(--text-dim); font-size: var(--fs-base); line-height: 1.6; }

/* ---------------------------------------------------------- rows --- */
/* Related points as a plain divided list. No borders, no boxes, no icons. */
.rows { display: grid; gap: 1px; background: var(--border); }
.rows article {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--sp-4) var(--sp-6); padding: var(--sp-5) 0; background: var(--bg);
}
.rows h3 { margin: 0; font-size: var(--fs-base); font-weight: 600; }
.rows p { margin: 0; max-width: 68ch; color: var(--text-dim); font-size: var(--fs-base); line-height: 1.6; }

/* --------------------------------------------------------- split --- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.split-copy h2 { margin: 0 0 var(--sp-4); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -0.025em; font-weight: 700; }
.split-copy p { margin: 0 0 var(--sp-3); max-width: 58ch; color: var(--text-dim); font-size: var(--fs-base); line-height: 1.6; }
.split-copy p:last-child { margin-bottom: 0; }
.split-copy b { color: var(--text); }

.stat-row { display: grid; gap: 1px; margin: 0; background: var(--border); border-top: var(--rule); border-bottom: var(--rule); }
.stat-row > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) 0; background: var(--bg); }
.stat-row dt { color: var(--text-dim); font-size: var(--fs-sm); }
.stat-row dd { margin: 0; font-family: var(--mono); font-size: var(--fs-lg); color: var(--text); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- token --- */
/*
 * Deliberately the quietest section on the page. It is not the product, and
 * giving it the same lead-in and heading size as the launch sections would say
 * it is. Smaller heading, tighter gap, no accent until the ladder itself.
 */
#token { padding-top: clamp(44px, 5vw, 68px); }
#token .split-copy h2 { font-size: var(--fs-xl); }
.token-split { align-items: start; }
.token-scale { display: grid; gap: 1px; background: var(--border); border: var(--rule); border-radius: var(--radius); overflow: hidden; }
.token-rung {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--bg-raised);
}
.token-rung b { font-family: var(--mono); font-size: var(--fs-lg); color: var(--text); font-variant-numeric: tabular-nums; }
.token-rung span { color: var(--text-dim); font-size: var(--fs-sm); }
.ladder-caption {
  margin: 0 0 var(--sp-3); color: var(--text-faint);
  font-family: var(--mono); font-size: var(--fs-xs);
  letter-spacing: 0.05em; text-transform: uppercase;
}
.token-rung.capped b { color: var(--brand-hot); }

/* -------------------------------------------------------- access --- */
.access {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.6fr);
  gap: clamp(24px, 5vw, 56px); align-items: center;
  padding: clamp(28px, 4vw, 44px); border: var(--rule);
  border-radius: var(--radius-lg); background: var(--bg-raised);
}
.access-copy h2 { margin: 0; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -0.025em; font-weight: 700; }
.access-copy p { margin: var(--sp-3) 0 0; max-width: 46ch; color: var(--text-dim); }
.access-action .btn { width: 100%; }
.access-action .hint { margin: var(--sp-3) 0 0; }

/* -------------------------------------------------------- footer --- */
.site-footer {
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-5); align-items: end;
  margin-top: auto; padding: var(--sp-6) 0; border-top: var(--rule);
  color: var(--text-faint); font-size: var(--fs-xs);
}
.footer-brand { display: flex; align-items: center; gap: 9px; color: var(--text); font-weight: 700; font-size: var(--fs-base); }
.footer-brand:hover { text-decoration: none; }
.footer-copy { max-width: 480px; margin: 7px 0 0; }
.footer-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.footer-links { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.footer-links a { color: var(--text-dim); }
.footer-links a:hover { color: var(--text); text-decoration: none; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .rows article { grid-template-columns: 1fr; gap: 6px; }
  /* Its second column has a 280px minimum, so below that the first column was
     squeezed to a single pixel rather than wrapping. */
  .access { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .wrap { padding-inline: var(--sp-3); }
  header { padding-block: 10px; }
  .header-status { width: 100%; gap: var(--sp-2); overflow-x: auto; }
  .hero { padding-top: var(--sp-6); }
  .hero-actions { display: grid; }
  .hero-actions .btn, .hero-actions .text-link { width: 100%; justify-content: center; }
  .hero-proof { display: grid; gap: 6px; }
  .steps li { grid-template-columns: 1fr; gap: 6px; }
  .steps li::before { padding: 0; }
  .steps h3, .steps p { grid-column: 1; }
  .wallet-row { grid-template-columns: 1fr auto; }
  .wallet-row em { display: none; }
  .access { padding: var(--sp-5); }
  /* A four-column table cannot be honestly squeezed into 375px, so it becomes
     a labelled list of the same rows rather than a horizontal scroller. */
  .venue-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .venue-table tr { display: grid; gap: 2px; padding: var(--sp-4) 0; border-bottom: var(--rule); }
  .venue-table td { display: flex; justify-content: space-between; gap: var(--sp-4); padding: 2px 0; border: 0; }
  .venue-table td::before { content: attr(data-label); color: var(--text-faint); font-family: var(--mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; }
  .site-footer { grid-template-columns: 1fr; align-items: start; }
  .footer-meta { align-items: flex-start; }
}

/* --------------------------------------------------------- wallets --- */
.wallet {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--bg-sunken); margin-bottom: var(--sp-2);
}
.wallet.active { border-color: var(--brand); background: var(--brand-tint); }
.wallet .idx {
  width: 24px; height: 24px; flex: none; border-radius: var(--radius-sm);
  background: var(--surface); display: grid; place-items: center;
  /* --text-faint measured 4.47:1 here, just under AA, on a number that
     identifies which wallet a row is about. */
  font-family: var(--mono); font-size: var(--fs-xs); color: var(--text-dim);
}
.wallet .addr { font-family: var(--mono); font-size: var(--fs-sm); }
.wallet .addr.copyable { cursor: pointer; }
.wallet .addr.copyable:hover { color: var(--brand-hot); }
.wallet .bal { font-family: var(--mono); font-size: var(--fs-sm); color: var(--text-dim); }
.chain-tag {
  /* 9px put these under the legible floor. They are short uppercase badges, so
     11px costs a few pixels of row width and nothing else. */
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; font-weight: 800;
  padding: 1px 5px; border-radius: 3px; background: var(--brand-tint); color: var(--brand-on-tint);
}

/* ---------------------------------------------- operations system --- */
.mode-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (max-width: 720px) { .mode-grid { grid-template-columns: 1fr; } }
.mode-card {
  padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-sunken); color: var(--text); text-align: left; min-height: 112px;
}
.mode-card:hover { border-color: var(--border-strong); background: var(--surface); }
.mode-card.on { border-color: var(--brand); background: var(--brand-tint); box-shadow: var(--ring); }
/* Selected, this card's ground is the tint, where the default body and eyebrow
   colours fall to 4.25:1 and 4.13:1. Same correction as .pad.on. */
.mode-card.on span { color: var(--text-on-tint); }
.mode-card.on .eyebrow { color: var(--brand-on-tint); }
.mode-card strong { display: block; font-size: var(--fs-lg); margin-bottom: var(--sp-1); }
.mode-card span { display: block; color: var(--text-faint); font-size: var(--fs-sm); font-weight: 500; line-height: 1.45; }
.eyebrow { color: var(--brand-hot); font: 700 var(--fs-xs)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 9px; }
.launch-flow { display: flex; flex-direction: column; }
.flow-mode { order: 1; } .flow-token { order: 2; } .flow-venues { order: 3; } .flow-plan { order: 4; }
.batch-tools { display: flex; gap: var(--sp-2); align-items: end; flex-wrap: wrap; margin-bottom: var(--sp-3); }
.batch-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.batch-table { min-width: 850px; }
.batch-table td { padding: 5px; }
.batch-table input, .batch-table select { min-width: 92px; padding: 7px 8px; border-color: transparent; background: transparent; }
.batch-table input:focus, .batch-table select:focus { background: var(--bg-sunken); border-color: var(--brand); }
.batch-table .token-name { min-width: 170px; }
.batch-table .status-ready { color: var(--ok); }
.batch-table .status-blocked { color: var(--bad); }
.icon-btn { border: 0; background: transparent; color: var(--text-faint); padding: 7px; }
.icon-btn:hover { color: var(--bad); }
.plan-summary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--border); margin-top: var(--sp-3);
}
.plan-stat { padding: var(--sp-3); background: var(--bg-sunken); }
.plan-stat b { display: block; font: 700 var(--fs-lg)/1.2 var(--mono); }
.plan-stat span { color: var(--text-faint); font-size: var(--fs-xs); }
.readiness { margin-top: var(--sp-4); border-top: 1px solid var(--border); padding-top: var(--sp-3); }
.readiness-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:var(--sp-2); }
.readiness-head strong { font-size: var(--fs-sm); }
.ready-score { color: var(--ok); font-family: var(--mono); }
.checkline { display:flex; gap:8px; align-items:flex-start; padding:4px 0; color:var(--text-dim); font-size:var(--fs-xs); }
.checkline .mark { color: var(--ok); font-family: var(--mono); width: 14px; }
.checkline.fail .mark, .checkline.fail { color: var(--bad); }
.inbox-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); margin-bottom:var(--sp-4); }
@media (max-width: 760px) { .inbox-grid, .plan-summary { grid-template-columns:1fr; } }
.inbox-card { background:var(--bg-sunken); border:1px solid var(--border); border-radius:var(--radius); padding:var(--sp-4); }
.inbox-card .metric { font:700 24px/1.1 var(--mono); margin:5px 0; }
.inbox-card .action { color:var(--brand-hot); font-size:var(--fs-xs); }
.warning-strip { display:flex; gap:10px; align-items:flex-start; background:rgba(245,185,68,.07); border:1px solid rgba(245,185,68,.25); border-radius:var(--radius-sm); padding:var(--sp-3); color:#f8d087; font-size:var(--fs-xs); margin-bottom:var(--sp-4); }
.queue-empty { padding:var(--sp-6); text-align:center; color:var(--text-faint); }
.mode-only.hidden { display:none !important; }

/* ------------------------------------------------ premium execute --- */
.execute-hero {
  position:relative; overflow:hidden; display:grid; grid-template-columns:1fr auto; gap:var(--sp-5); align-items:center;
  background:linear-gradient(135deg, rgba(80,69,232,.20), var(--bg-raised) 55%); border-color:rgba(111,99,255,.42);
}
.execute-hero::after { content:''; position:absolute; width:260px; height:260px; right:-90px; top:-150px; border-radius:50%; background:rgba(111,99,255,.13); filter:blur(2px); pointer-events:none; }
.execute-hero h2 { margin:0; color:var(--text); font-size:var(--fs-2xl); letter-spacing:-.035em; text-transform:none; }
.execute-hero p { margin:6px 0 0; color:var(--text-dim); max-width:650px; }
.price-lockup { position:relative; z-index:1; text-align:right; min-width:180px; }
.price-lockup b { display:block; color:var(--brand-hot); font:800 30px/1 var(--mono); }
.price-lockup span { color:var(--text-faint); font-size:var(--fs-xs); }
.execute-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:var(--sp-4); align-items:start; }
@media (max-width:900px) { .execute-layout { grid-template-columns:1fr; } .price-lockup { text-align:left; } .execute-hero { grid-template-columns:1fr; } }
.controlled-note { display:flex; gap:10px; align-items:flex-start; padding:var(--sp-3); background:rgba(90,167,255,.07); border:1px solid rgba(90,167,255,.24); border-radius:var(--radius-sm); color:#9dcaff; font-size:var(--fs-xs); }
.allocation-hero { display:flex; align-items:center; justify-content:center; gap:var(--sp-4); padding:var(--sp-5); margin-top:var(--sp-4); background:var(--bg-sunken); border:1px solid var(--border); border-radius:var(--radius); text-align:center; }
.allocation-hero strong { font:800 23px/1.1 var(--mono); }
.allocation-hero .arrow { color:var(--brand-hot); font-size:24px; }
.execution-flow { display:grid; grid-template-columns:1fr 30px 1fr 30px 1fr; align-items:center; margin-top:var(--sp-4); }
.flow-node { padding:var(--sp-3); border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-sunken); text-align:center; }
.flow-node b { display:block; font-size:var(--fs-sm); }
.flow-node span { color:var(--text-faint); font-size:var(--fs-xs); }
.flow-arrow { color:var(--brand-hot); text-align:center; }
@media (max-width:620px) { .execution-flow { grid-template-columns:1fr; gap:6px; } .flow-arrow { transform:rotate(90deg); } .allocation-hero { align-items:flex-start; flex-direction:column; } }
.premium-banner { display:flex; gap:var(--sp-3); align-items:center; padding:var(--sp-4); border:1px solid rgba(111,99,255,.35); border-radius:var(--radius); background:linear-gradient(90deg,rgba(80,69,232,.13),var(--bg-sunken)); }
.premium-banner b { display:block; }
.premium-banner span { color:var(--text-faint); font-size:var(--fs-xs); }
.position-head { display:flex; gap:var(--sp-3); align-items:flex-start; flex-wrap:wrap; }
.token-orb { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:var(--brand); color:#fff; font-weight:800; font-size:18px; }
.position-head h3 { margin:0; font-size:24px; }
.position-head p { margin:2px 0 0; color:var(--text-faint); font-size:var(--fs-xs); }
.position-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:var(--sp-4) 0; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.position-stat { background:var(--bg-sunken); padding:var(--sp-3); }
.position-stat b { display:block; font:700 var(--fs-lg)/1.2 var(--mono); }
.position-stat span { color:var(--text-faint); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; }
@media (max-width:620px) { .position-stats { grid-template-columns:1fr 1fr; } }
.action-bar { display:grid; grid-template-columns:repeat(6,1fr); gap:var(--sp-2); }
.action-bar .btn { padding:8px 7px; }
@media (max-width:700px) { .action-bar { grid-template-columns:repeat(3,1fr); } }
.execute-tabs { display:flex; gap:2px; border-bottom:1px solid var(--border); margin-bottom:var(--sp-4); }
.execute-subtab { border:0; border-bottom:2px solid transparent; background:transparent; color:var(--text-faint); padding:8px 12px; }
.execute-subtab.on { color:var(--text); border-color:var(--brand-hot); }
.plan-preview { padding:var(--sp-3); border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-sunken); color:var(--text-dim); font-size:var(--fs-sm); }
.plan-preview strong { color:var(--text); }
.fee-box { padding:var(--sp-4); border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-sunken); }
.fee-box .fee-row { display:flex; justify-content:space-between; padding:6px 0; font-size:var(--fs-xs); }
.fee-box .fee-row + .fee-row { border-top:1px solid var(--border); }
.fee-box .fee-row b { font-family:var(--mono); }
.success-only { color:var(--ok); }
.wallet-allocation td input { width:86px; padding:5px 7px; }

/* ------------------------------------------------- coin terminal --- */
/*
 * A chart, the position's own figures, and the two buttons that act on them,
 * close enough together to be read in one glance. The chart is the only thing
 * given room to breathe; everything else is dense on purpose, because this is
 * read while a price is moving.
 */
.term-intervals { display: inline-flex; gap: 2px; background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px; }
.term-interval {
  padding: 4px 9px; border: none; border-radius: 4px; background: transparent;
  color: var(--text-faint); font: 700 var(--fs-xs)/1 var(--mono); cursor: pointer;
}
.term-interval:hover { color: var(--text); }
.term-interval.on { background: var(--brand); color: #fff; }

.term-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  gap: 1px; background: var(--border); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; margin-bottom: var(--sp-4);
}
.term-stat { padding: var(--sp-3); background: var(--bg-sunken); }
.term-stat-k { display: block; color: var(--text-faint); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; }
.term-stat-v { display: block; margin-top: 5px; font: 700 var(--fs-lg)/1.1 var(--mono); font-variant-numeric: tabular-nums; }
.term-stat-v.up { color: var(--ok); }
.term-stat-v.down { color: var(--bad); }

.term-layout { display: grid; grid-template-columns: 1fr 340px; gap: var(--sp-4); align-items: start; }
.term-chart {
  height: 380px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-sunken); overflow: hidden;
}
.term-side { display: grid; gap: var(--sp-3); }
.term-actions { display: grid; gap: var(--sp-2); }
.term-action-row { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.term-action-row .eyebrow { width: 34px; margin: 0; }
.btn.small.buy { border-color: rgba(61,220,132,.4); color: var(--ok); }
.btn.small.buy:hover:not(:disabled) { background: var(--pump-dim); border-color: var(--ok); }
.btn.small.sell { border-color: rgba(255,92,116,.35); color: var(--bad); }
.btn.small.sell:hover:not(:disabled) { background: rgba(255,92,116,.1); border-color: var(--bad); }

.term-feed-head { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.term-feed {
  max-height: 300px; overflow-y: auto; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--bg-sunken);
}
.term-tx {
  display: grid; grid-template-columns: 42px 1fr auto auto; gap: var(--sp-2);
  align-items: baseline; padding: 7px var(--sp-3);
  border-bottom: 1px solid var(--border); font: var(--fs-xs)/1.4 var(--mono);
  font-variant-numeric: tabular-nums;
}
.term-tx:last-child { border-bottom: none; }
.term-tx-side { font-weight: 800; text-transform: uppercase; }
.term-tx.buy .term-tx-side { color: var(--ok); }
.term-tx.sell .term-tx-side { color: var(--bad); }
.term-tx-amt { color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.term-tx-quote, .term-tx-when { color: var(--text-faint); white-space: nowrap; }

@media (max-width: 900px) {
  .term-layout { grid-template-columns: 1fr; }
  .term-chart { height: 280px; }
}
.term-mark { color: var(--brand-on-tint); flex: none; align-self: center; }
/* Our own trades, picked out of the market's flow. */
.term-tx.mine { background: var(--brand-tint); }
.term-tx.mine .term-tx-when { color: var(--brand-on-tint); font-weight: 700; }


/* Whether the numbers on screen are pushed or fetched — never implied. */
.term-live { font: 700 var(--fs-xs)/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; display: inline-flex; align-items: center; gap: 6px; }
.term-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.term-live.live { color: var(--ok); }
.term-live.reconnecting { color: var(--warn); }
.term-live.polling { color: var(--text-faint); }
.term-live.closed::before { display: none; }
/* One flash on arrival, so a new row is noticed without the list moving. */
@keyframes term-fresh { from { background: var(--brand-tint); } to { background: transparent; } }
.term-tx.fresh { animation: term-fresh 1.2s ease-out; }
@media (prefers-reduced-motion: reduce) { .term-tx.fresh { animation: none; } }


/* ------------------------------------------------- accessibility --- */
/*
 * A visible focus ring on everything focusable.
 *
 * Only inputs had one, and theirs was a 14%-alpha brand tint that is
 * effectively invisible. Every button, tab, pad and link now shows where the
 * keyboard is, using :focus-visible so a mouse click does not leave a ring
 * behind.
 */
:focus-visible {
  outline: 2px solid var(--brand-hot);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.btn:focus-visible, .tab:focus-visible, .pad:focus-visible,
.quick button:focus-visible, .term-interval:focus-visible {
  outline: 2px solid var(--brand-hot);
  outline-offset: 2px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brand-hot);
  outline-offset: 0;
}

/* Past the sticky header, straight to the work. */
.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 100;
  background: var(--brand); color: #fff; padding: 10px var(--sp-4);
  border-radius: var(--radius-sm); font-weight: 700; font-size: var(--fs-sm);
}
.skip-link:focus { top: var(--sp-3); text-decoration: none; }

/*
 * A section heading outranked its own subheadings: .step h2 renders at 11px
 * while h3 renders at 16px, so heading navigation returned twenty same-level
 * items in a smaller size than the text under them. The label keeps its
 * uppercase-eyebrow treatment — that is the committed look — but at a size and
 * weight that reads as the heading it is.
 */
.step h2 { font-size: var(--fs-sm); }

/*
 * Reduced motion means less movement, not less feedback.
 *
 * The blanket `*{animation:0.01ms}` rule is the tempting version and the wrong
 * one: it also kills the 150ms colour and border transitions that tell someone
 * a button took their hover, which is information, not decoration. What
 * actually moves here is the new-trade flash and smooth scrolling, so those
 * are what stop.
 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .term-tx.fresh { animation: none; background: var(--brand-tint); }
  /* Transforms move; colour does not. */
  .btn, .pad, .mode-card { transition-property: background-color, border-color, color, box-shadow; }
}

/* The batch, readable before it fires. */
.vary-toggle { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; color: var(--text-dim); font-size: var(--fs-sm); text-transform: none; letter-spacing: 0; margin: 0; }
.vary-toggle input { width: auto; }
.preview-names { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-3); }
.preview-name {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 4px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-sunken); font: var(--fs-xs)/1 var(--mono); max-width: 100%;
}
.preview-name b { color: var(--brand-on-tint); font-weight: 700; }
.preview-name span { color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-more { align-self: center; color: var(--text-faint); font: var(--fs-xs)/1 var(--mono); }

/* Named wallet sets, and the split preview. */
.wallet-groups { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); background: var(--bg-sunken); }
.group-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.group-chip { display: inline-flex; align-items: stretch; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.group-pick { border: none; background: transparent; color: var(--text); padding: 6px 10px; font: 600 var(--fs-sm)/1.2 var(--font); cursor: pointer; }
.group-pick:hover { background: var(--surface-hover); }
.group-count { align-self: center; padding: 0 8px; color: var(--text-faint); font: var(--fs-xs)/1 var(--mono); border-left: 1px solid var(--border); }
.group-remove { border: none; border-left: 1px solid var(--border); background: transparent; color: var(--text-faint); cursor: pointer; padding: 0 9px; font-size: 14px; }
.group-remove:hover { color: var(--bad); background: rgba(255,92,116,.08); }

/* ----------------------------------------------------- onboarding --- */
/*
 * A real <dialog>, so focus trapping, Esc and the top layer are the
 * platform's job rather than a div pretending to be modal.
 */
#onboarding {
  width: min(680px, calc(100vw - 2 * var(--sp-4)));
  max-height: min(88vh, 900px);
  padding: var(--sp-5);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  overflow: hidden;
}
/*
 * Only the step content scrolls. On a short laptop viewport a single scroll
 * region pushed Continue off the bottom, so the way forward was hidden by the
 * step that was asking you to move forward. Guarded on [open] because a
 * <dialog> is display:none until it is.
 */
#onboarding[open] { display: flex; flex-direction: column; }
#ob-content { overflow: auto; min-height: 0; flex: 1; }
.ob-head, #onboarding h2, .ob-blurb, .ob-foot { flex: none; }
#onboarding::backdrop { background: rgb(8 8 14 / 72%); backdrop-filter: blur(3px); }
.ob-head { display: flex; align-items: center; gap: var(--sp-3); }
.ob-eyebrow {
  font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
}
#onboarding h2 {
  margin: var(--sp-2) 0 var(--sp-2); font-size: var(--fs-xl);
  letter-spacing: -0.02em; outline: none;
}
.ob-blurb { color: var(--text-dim); margin: 0 0 var(--sp-4); max-width: 60ch; }
.ob-body { display: grid; gap: var(--sp-3); }

.ob-points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.ob-points li {
  display: grid; gap: 3px; padding: var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-hover);
}
.ob-points b { font-size: var(--fs-sm); }
.ob-points span { color: var(--text-dim); font-size: var(--fs-sm); }

.ob-fields { display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Declared per field rather than by position: a positional rule stranded
   whichever field happened to land alone on the last row. */
.ob-fields .field.wide { grid-column: 1 / -1; }
.ob-fields .hint { margin: 4px 0 0; }

.ob-panels { display: grid; gap: var(--sp-2); }
.ob-panel {
  display: grid; gap: 3px; text-align: left; cursor: pointer;
  padding: var(--sp-3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface-hover);
  color: var(--text); font: inherit;
}
.ob-panel:hover { border-color: var(--border-strong); }
.ob-panel[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-dim); }
.ob-panel b { font-size: var(--fs-sm); }
.ob-panel span { color: var(--text-dim); font-size: var(--fs-sm); }

.ob-foot {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-5); padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}
.ob-dots { display: flex; gap: 6px; }
.ob-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--border-strong);
}
.ob-dot.done { background: var(--text-faint); }
.ob-dot.on { background: var(--accent); transform: scale(1.35); }


@media (max-width: 620px) {
  .ob-fields { grid-template-columns: 1fr; }
  .ob-foot { flex-wrap: wrap; }
}


/* ---------------------------------------------------------- feed --- */
/*
 * What a batch run looks like from the outside: the same launch arriving on
 * one venue after another. It is an illustration and says so by carrying no
 * live data, but it is the one thing on the page that shows the effect rather
 * than describing it, so it keeps its place on mobile.
 */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li {
  display: grid; grid-template-columns: 1fr auto auto; gap: var(--sp-3);
  align-items: baseline; padding: 9px var(--sp-4);
  border-bottom: var(--rule); font-family: var(--mono); font-size: var(--fs-xs);
}
.feed li:last-child { border-bottom: 0; }
.feed b { color: var(--text-dim); font-weight: 400; }
.feed span { color: var(--text-faint); }
.feed em { color: var(--text-faint); font-style: normal; font-variant-numeric: tabular-nums; }
.feed .mine { background: var(--accent-dim); }
.feed .mine b { color: var(--text); }

.fee-table td:last-child { font-family: var(--mono); color: var(--text); }

/* --------------------------------------------------------- toasts --- */
/*
 * Copying a wallet address used to be silent in both directions: no
 * confirmation, and no report when the clipboard write rejected. Someone who
 * believes they copied an address and pastes a stale one can send funds to the
 * wrong place, so the result is now always visible.
 */
.toasts {
  position: fixed; left: 50%; bottom: var(--sp-5); transform: translateX(-50%);
  z-index: 60; display: grid; gap: var(--sp-2); justify-items: center;
  pointer-events: none; width: max-content; max-width: calc(100vw - 2 * var(--sp-4));
}
.toast {
  padding: 9px var(--sp-4); border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); font-size: var(--fs-sm); box-shadow: var(--shadow);
}
.toast.ok { border-color: color-mix(in srgb, var(--ok) 45%, var(--border-strong)); }
.toast.bad { border-color: color-mix(in srgb, var(--bad) 55%, var(--border-strong)); color: var(--text); }

/* ---------------------------------------------------- wallet pill --- */
/*
 * Connection state first, holding second. The dot answers "am I connected"
 * without reading, which is the question a header is actually asked.
 */
.wallet-pill { gap: var(--sp-2); }
.wallet-holding {
  padding-left: var(--sp-2); margin-left: 2px;
  border-left: 1px solid var(--border-strong);
  color: var(--text); font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------- docs --- */
/*
 * Read mode: a fixed sidebar for orientation, one column of prose at a
 * readable measure, and no cards. Docs are public because reference material
 * behind a wallet connection is reference material nobody reads.
 */
.docs-layout {
  display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px); align-items: start;
  padding: clamp(32px, 5vw, 56px) 0 var(--sp-7);
}
.docs-nav { position: sticky; top: 84px; display: grid; gap: 2px; }
.docs-nav a {
  padding: 6px var(--sp-3); border-radius: var(--radius-sm);
  color: var(--text-dim); font-size: var(--fs-sm); line-height: 1.35;
}
.docs-nav a:hover { color: var(--text); background: var(--surface-hover); text-decoration: none; }

.docs-body { max-width: 74ch; }
.docs-head { padding-bottom: var(--sp-5); margin-bottom: var(--sp-6); border-bottom: var(--rule); }
.docs-head h1 { margin: 0; font-size: clamp(28px, 3.2vw, 38px); letter-spacing: -0.035em; line-height: 1.1; }
.docs-head p { margin: var(--sp-3) 0 0; color: var(--text-dim); font-size: var(--fs-lg); }

.docs-body > section { padding-top: var(--sp-7); }
.docs-body > section + section { border-top: var(--rule); }
.docs-body h2 { margin: 0 0 var(--sp-4); font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -0.025em; }
.docs-body h3 { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-lg); font-weight: 600; }
.docs-body p { margin: 0 0 var(--sp-3); color: var(--text-dim); line-height: 1.65; }
.docs-body b { color: var(--text); }
.docs-body code {
  padding: 1px 5px; border-radius: 4px;
  background: var(--surface); color: var(--text); font-size: 0.92em;
}
.docs-note { color: var(--text-faint); font-size: var(--fs-sm); }

.docs-steps { margin: 0; padding-left: 1.4em; display: grid; gap: var(--sp-2); }
.docs-steps li { color: var(--text-dim); line-height: 1.6; padding-left: var(--sp-1); }
.docs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.docs-list li { color: var(--text-dim); line-height: 1.6; }

.docs-table { width: 100%; border-collapse: collapse; margin: var(--sp-4) 0; font-size: var(--fs-sm); }
.docs-table th {
  padding: 0 var(--sp-4) var(--sp-2) 0; border-bottom: var(--rule); text-align: left;
  color: var(--text-faint); font-family: var(--mono); font-size: var(--fs-xs);
  font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase;
}
.docs-table td { padding: 11px var(--sp-4) 11px 0; border-bottom: var(--rule); color: var(--text-dim); vertical-align: top; }
.docs-table tr:last-child td { border-bottom: 0; }
.docs-table td:first-child { color: var(--text); }
.docs-table .yes { color: var(--ok); }
.docs-table .no { color: var(--text-faint); }

.landing-nav a.on { color: var(--text); border-bottom-color: var(--accent); }

@media (max-width: 860px) {
  .docs-layout { grid-template-columns: 1fr; gap: var(--sp-5); }
  /* Sticky is worth nothing at the top of a stacked page. */
  .docs-nav {
    position: static; grid-auto-flow: column; grid-auto-columns: max-content;
    overflow-x: auto; gap: var(--sp-1); padding-bottom: var(--sp-2);
    border-bottom: var(--rule); scrollbar-width: none;
  }
  .docs-nav::-webkit-scrollbar { display: none; }
  .docs-nav a { white-space: nowrap; }
  .docs-table { display: block; overflow-x: auto; }
}