/* ── tokens ──────────────────────────────────────────────────────────── */
:root {
  --bg: #05070c;
  --panel: #0a0f18;
  --panel-2: #0c121d;
  --panel-3: #111a29;
  --line: #1e2a3c;
  --line-2: #2f4363;
  --text: #dde6f4;
  --dim: #8b9ab0;
  --dim-2: #78879d;
  --green: #16d97d;
  --green-dk: #0e8f53;
  --red: #ff4d6a;
  --red-dk: #a32639;
  /* Overwritten at runtime by the colourblind setting. */
  --up: #16d97d;
  --down: #ff4d6a;
  --up-soft: rgba(22, 217, 125, .16);
  --down-soft: rgba(255, 77, 106, .16);
  --ui-scale: 1;
  --blue: #4c8dff;
  --cyan: #22d3ee;
  --purple: #a855f7;
  --pink: #f472b6;
  --amber: #f5c451;
  --mono: "DM Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --r: 0;
  --gut: 8px;
  --grid: #0f1724;
  --axis: #5a6b81;
  --shadow: rgba(0, 0, 0, .6);
  --scrim: rgba(3, 6, 12, .72);
  --raise: #16243b;
  --raise-2: #1d2b3f;
  --sunken: #070c14;
  --accent: #4c8dff;
  --accent-ink: #8ec5ff;

  /* UNSELECTED CONTROLS.
     A button drawn on its card's own background, edged in the same line
     colour as the card, reads as a label rather than as something you press.
     Every control that is not currently chosen sits on this surface instead,
     one clear step above whatever it sits on, with a border bright enough to
     find and a label brighter than the description text beside it. */
  --ctl: #1b2941;
  --ctl-hover: #263754;
  --ctl-line: #3a4f72;
  --ctl-text: #c6d2e4;
}

/*
 * OLED. Black is a pixel that is switched off, so the background is actually
 * #000 rather than the near-black the dark theme uses, and every surface above
 * it is spaced further apart than usual to make up for losing the gentle step
 * a lifted background gives you. Text and lines are pushed brighter for the
 * same reason: on a true black ground the dark theme's greys read as murk.
 */
:root[data-theme="oled"] {
  --bg: #000000;
  --panel: #000000;
  --panel-2: #0a0a0d;
  --panel-3: #14151a;
  --line: #2b2e36;
  --line-2: #474b57;
  --text: #ffffff;
  --dim: #b4bcca;
  --dim-2: #9aa3b2;
  --grid: #16181d;
  --axis: #8c96a6;
  --shadow: rgba(0, 0, 0, .9);
  --scrim: rgba(0, 0, 0, .8);
  --raise: #16181f;
  --raise-2: #1f222b;
  --sunken: #000000;
  --accent-ink: #b8d8ff;
  --ctl: #1b1e26;
  --ctl-hover: #272b36;
  --ctl-line: #5a6072;
  --ctl-text: #e6ebf4;
}

/* Light surfaces. Gains and losses are set separately by the palette so the
   colourblind mode keeps working in either theme. */
:root[data-theme="light"] {
  --bg: #eef1f6;
  --panel: #ffffff;
  --panel-2: #f6f8fb;
  --panel-3: #eaeff7;
  --line: #cdd6e3;
  --line-2: #a9b6ca;
  --text: #17202e;
  --dim: #515e73;
  --dim-2: #5c6878;
  --green: #0a8f52;
  --red: #c8203c;
  --blue: #1d63d8;
  --cyan: #0e7f96;
  --purple: #7a34c9;
  --pink: #c02d78;
  --amber: #9a6b09;
  --grid: #e6ebf3;
  --axis: #7c8aa0;
  --shadow: rgba(23, 32, 46, .16);
  --scrim: rgba(120, 132, 152, .38);
  --raise: #e4ebf7;
  --raise-2: #d7e1f2;
  --sunken: #f2f5fa;
  --accent: #1d63d8;
  --accent-ink: #1550b8;
  --ctl: #e3e9f4;
  --ctl-hover: #d4dcec;
  --ctl-line: #93a4c0;
  --ctl-text: #2b3648;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
input { background: none; border: none; outline: none; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--dim-2); }
[hidden] { display: none !important; }

.up { color: var(--up); }
.down { color: var(--down); }
.muted { color: var(--dim); }
.tabnum { font-variant-numeric: tabular-nums; }

/* ── app frame ───────────────────────────────────────────────────────── */
/*
 * THE EFFECTIVE ZOOM, IN ONE PLACE.
 *
 * `--ui-scale` is the player's own setting, written inline on :root. This
 * composes a device factor on top, so the phone default is 80% while the
 * setting still means what it says: pick 120% there and you get 0.96.
 *
 * The height has to be divided back out. Inside `zoom: 0.8`, `height: 100dvh`
 * computes the full screen and then renders at 80% of it, which left a fifth
 * of the screen empty below the status bar at every scale under 100%.
 */
/* The desk renders a hair under full size. It went to 140% for a while, which
   was too big: the way that reads on a real monitor is the browser's own zoom
   pulled down to about two thirds to get back to here, so here is where it
   sits by default instead.
 *
 * One number rather than a ladder of them. 140% needed steps because the desk
 * is three columns wide and the chart toolbar is one row that scrolls rather
 * than wrapping, so on a narrower screen that zoom hid the right hand end of
 * the toolbar instead of shrinking it. At this scale there is nothing to step
 * around.
 *
 * --ui-scale is still the player's own setting on top, and still means what
 * it says: pick 120% and you get a fifth more than this. */
:root { --zoom: calc(var(--ui-scale) * 0.94); }

.app {
  zoom: var(--zoom);
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: calc(100dvh / var(--zoom));
  gap: var(--gut);
  padding: var(--gut);
}
/* Grid items default to min-width: auto, which lets a long unbreakable child
   push the whole row wider than the viewport. */
.app > * { min-width: 0; }
.topbar > * { min-width: 0; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0;
  min-height: 0;
}

/* ── top bar ─────────────────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0;
  flex-wrap: wrap;
}
.brand {
  min-width: 96px; text-align: left; padding: 2px 4px; margin-left: -4px;
  border: 1px solid transparent;
  display: flex; align-items: center; gap: 9px;
}
.brand:hover { border-color: var(--line-2); }
.brand:hover .brand-mark { color: var(--accent-ink); }
/* Its own square is already drawn into the file, so it needs no background
   here and no border: on a light theme the dark tile is the point. */
.brand-logo { flex: none; width: 30px; height: 30px; display: block; }
.brand-words { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.brand-mark {
  font-size: 18px; font-weight: 700; letter-spacing: 1.2px; white-space: nowrap;
  color: var(--text);
}
.brand-sub { font-size: 11px; color: var(--dim-2); letter-spacing: 1.1px; }

.viewnav { display: flex; gap: 4px; background: var(--sunken); padding: 3px; border-radius: 0; border: 1px solid var(--line); }
.viewtab {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 18px; border-radius: 0; font-size: 13.5px; letter-spacing: 1px;
  color: var(--dim); position: relative;
}
.viewtab .ico { opacity: .7; }
.viewtab:hover { color: var(--text); }
.viewtab.is-active { background: var(--raise); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent); }
.dot {
  width: 6px; height: 6px; border-radius: 0; background: var(--amber);
  position: absolute; top: 4px; right: 4px;
}

.statcards { display: flex; gap: 8px; margin-left: auto; }
.statcard {
  text-align: left; min-width: 158px; padding: 10px 14px;
  background: var(--sunken); border: 1px solid var(--line-2); border-radius: 0;
  transition: border-color .15s, box-shadow .15s;
}
.statcard:hover { border-color: var(--line-2); box-shadow: 0 0 0 1px var(--line-2); }
.statcard-top { display: flex; align-items: baseline; gap: 8px; }
.statcard-label { font-size: 11px; letter-spacing: 1.2px; color: var(--dim-2); }
.statcard-delta { font-size: 11.5px; margin-left: auto; }
.statcard-value { font-size: 20.4px; font-weight: 600; letter-spacing: .5px; }
.statcard-next { font-size: 11px; color: var(--dim); letter-spacing: .6px; margin-top: 1px; }
.statcard-level { min-width: 150px; }
.xpbar { height: 4px; background: var(--panel-3); border-radius: 0; margin-top: 5px; overflow: hidden; }
.xpbar i { display: block; height: 100%; background: var(--accent); width: 0%; transition: width .3s; }

/* ROOM, NOT MORE STUFF.
   Fourteen buttons at five pixels apart read as one dense block of chrome
   competing with the chart, which is the thing anybody came to look at. The
   buttons are bigger and further apart, and the strip is grouped so the eye
   lands on three or four short runs instead of scanning one long one. Nothing
   was removed: it is the same tools with space around them. */
.toolstrip { display: flex; align-items: center; gap: 9px; }
.tool {
  position: relative; width: 40px; height: 40px; border-radius: 0;
  background: var(--ctl); border: 1px solid var(--ctl-line); font-size: 15.6px; color: var(--ctl-text);
  display: inline-flex; align-items: center; justify-content: center;
}
.tool .ico-svg { width: 19px; height: 19px; }
.tool:hover { background: var(--raise); color: #fff; border-color: var(--line-2); }
/* A hairline between groups, drawn by the strip rather than by extra markup. */
.tool-sep { flex: none; width: 1px; height: 22px; background: var(--line-2); opacity: .8; }
.tool-tag {
  position: absolute; bottom: -2px; right: -2px; font-size: 10px; font-style: normal;
  background: var(--raise); border-radius: 0; padding: 0 2px; color: var(--cyan);
}
.badge-count {
  position: absolute; top: -5px; right: -5px; min-width: 14px; height: 14px;
  font-size: 11px; font-style: normal; border-radius: 0; background: var(--red);
  color: #fff; display: grid; place-items: center; padding: 0 3px;
}
.badge-count[hidden] { display: none; }
.shopbtn {
  padding: 7px 14px; border-radius: 0; font-size: 13.5px; letter-spacing: 1px;
  background: var(--accent); color: #fff; font-weight: 600;
}
.shopbtn:hover { filter: brightness(1.1); }

/* ── workspace ───────────────────────────────────────────────────────── */
.workspace {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 320px;
  gap: var(--gut);
  min-height: 0;
}
/* Every rail must be allowed to shrink below its content, or a nowrap cell
   inside the chart column widens the whole page on a phone. */
.workspace > * { min-width: 0; }
.center {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--gut); min-height: 0; min-width: 0;
}
.center > * { min-width: 0; }

.panel-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-bottom: 1px solid var(--line);
}
.panel-title { font-size: 12px; letter-spacing: 1.2px; color: var(--dim); }
.live-pill {
  margin-left: auto; font-size: 11px; letter-spacing: 1px; color: var(--green);
  border: 1px solid rgba(22, 217, 125, .35); border-radius: 0; padding: 2px 7px;
  background: rgba(22, 217, 125, .08);
}

/* ── explorer ────────────────────────────────────────────────────────── */
.explorer { display: grid; grid-template-rows: auto auto auto auto minmax(0, 1fr); }
.searchrow {
  display: flex; align-items: center; gap: 7px; margin: 8px; padding: 7px 9px;
  background: var(--sunken); border: 1px solid var(--line); border-radius: 0;
}
.search-ico { color: var(--dim-2); }
.searchrow input { width: 100%; font-size: 14px; }
.searchrow input::placeholder { color: var(--dim-2); }

.chiprow { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 8px 8px; }
.chip {
  font-size: 11.5px; letter-spacing: 1px; padding: 4px 8px; border-radius: 0;
  border: 1px solid currentColor; background: var(--panel-2);
}
.chip:hover { filter: brightness(1.35); }
.chip-green { color: #16d97d; } .chip-cyan { color: #22d3ee; }
.chip-purple { color: #a855f7; } .chip-blue { color: #4c8dff; } .chip-pink { color: #f472b6; }

.classtabs {
  display: flex; flex-wrap: wrap; gap: 3px 10px; padding: 7px 10px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.classtab { font-size: 12px; letter-spacing: .8px; color: var(--dim-2); padding: 4px 0; }
.classtab:hover { color: var(--text); }
.classtab.is-active { color: var(--accent-ink); border-bottom: 2px solid var(--accent); }
/* Gold, because this is the list somebody comes looking for rather than
   scrolls past. Selected still wins: the underline says where you are. */
.classtab.is-hot { color: var(--amber); font-weight: 700; }
.classtab.is-hot:hover { filter: brightness(1.15); }
.classtab.is-hot.is-active { color: var(--amber); border-bottom-color: var(--amber); }

.assetlist { overflow-y: auto; overflow-x: hidden; }
.assetrow {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 54px auto 18px;
  align-items: center; gap: 9px; padding: 10px 11px; width: 100%; text-align: left;
  border-bottom: 1px solid var(--line); position: relative;
}
.assetrow:hover { background: var(--panel-2); }
.assetrow.is-active { background: var(--raise); box-shadow: inset 2px 0 0 var(--accent); }
.assetrow.is-locked { opacity: .72; background: linear-gradient(90deg, rgba(245,196,81,.06), transparent); }
.avatar {
  width: 32px; height: 32px; border-radius: 0; display: grid; place-items: center;
  font-size: 14px; font-weight: 700; color: #05070c;
}
.assetrow-id { min-width: 0; }
.assetrow-sym { font-size: 14.5px; font-weight: 600; letter-spacing: .3px; display: flex; align-items: center; gap: 4px; }
.assetrow-name { font-size: 11.5px; color: var(--dim-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assetrow-px { text-align: right; }
.assetrow-price { font-size: 14px; font-variant-numeric: tabular-nums; }
.assetrow-chg { font-size: 12px; font-variant-numeric: tabular-nums; }
.spark { display: block; }
.star { font-size: 13px; color: var(--line-2); }
.star.on { color: var(--amber); }
.lockpill {
  font-size: 10.5px; letter-spacing: 1px; color: var(--amber);
  border: 1px solid rgba(245,196,81,.4); border-radius: 0; padding: 1px 4px;
}
.live-dot { width: 5px; height: 5px; border-radius: 0; background: var(--green); }

/* ── asset header ────────────────────────────────────────────────────── */
.asset-head { padding: 10px 14px; }
.ah-top { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; min-width: 0; }
.ah-sym { font-size: 30.7px; font-weight: 700; letter-spacing: 1px; line-height: 1; }
.ah-name { font-size: 13px; color: var(--dim); margin-top: 4px; }
.kindbadge {
  font-size: 11px; letter-spacing: 1px; padding: 3px 8px; border-radius: 0;
  background: var(--raise); color: var(--accent-ink); vertical-align: middle; margin-left: 8px;
  border: 1px solid var(--line-2);
}
.ah-price { margin-left: 28px; }
.ah-last { font-size: 29.5px; font-weight: 600; letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.ah-chg {
  display: inline-block; margin-top: 5px; font-size: 14px; padding: 3px 10px; border-radius: 0;
  font-variant-numeric: tabular-nums;
}
.ah-chg.up { background: var(--up-soft); }
.ah-chg.down { background: var(--down-soft); }
.ah-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.mission-pill {
  font-size: 12px; color: var(--dim); background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 0; padding: 5px 12px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.boost-pill {
  font-size: 12px; padding: 5px 11px; border-radius: 0; letter-spacing: .8px;
  background: rgba(245,196,81,.14); color: var(--amber); border: 1px solid rgba(245,196,81,.35);
}
.ah-stats {
  display: flex; flex-wrap: wrap; gap: 7px 22px; margin-top: 10px; min-width: 0;
  padding-top: 9px; border-top: 1px solid var(--line);
}
.ah-stat { font-size: 12px; color: var(--dim-2); letter-spacing: .6px; white-space: nowrap; }
.ah-stat b { color: var(--text); font-weight: 500; margin-left: 5px; font-variant-numeric: tabular-nums; }

/* ── chart ───────────────────────────────────────────────────────────── */
.chartpanel { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
/* One row that scrolls sideways when it runs out of space. Wrapping to a
   second row used to steal height straight out of the chart. */
.charttools {
  display: flex; align-items: center; gap: 3px; padding: 6px 8px;
  border-bottom: 1px solid var(--line); min-width: 0;
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
.charttools::-webkit-scrollbar { display: none; }
.charttools > * { flex: none; }
.charttools .tf { padding: 7px 9px; }
.tf {
  font-size: 12.5px; padding: 7px 11px; border-radius: 0; color: var(--dim);
  letter-spacing: .5px;
}
.tf:hover { background: var(--raise); color: var(--text); }
.tf.is-active { background: var(--raise); color: var(--accent-ink); }
.toolsep { width: 1px; height: 16px; background: var(--line); margin: 0 5px; }
.ctool {
  width: 32px; height: 30px; border-radius: 0; color: var(--dim); font-size: 15px;
}
.ctool:hover { background: var(--raise); color: #fff; }
.ctool.is-active { background: var(--raise); color: var(--cyan); }
.ctool.wide { width: auto; padding: 0 8px; font-size: 12.5px; letter-spacing: .8px; }
.ctool.danger { color: var(--red); }

.chartwrap { position: relative; min-height: 0; }
#chart { display: block; width: 100%; height: 100%; }
.chart-legend { position: absolute; top: 8px; left: 10px; pointer-events: none; }
.legend-ohlc { font-size: 12.5px; color: var(--dim); letter-spacing: .4px; font-variant-numeric: tabular-nums; }
.legend-ohlc b { color: var(--text); font-weight: 500; }
.legend-chip {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 5px;
  font-size: 12px; padding: 2px 7px; border-radius: 0;
  background: var(--panel); border: 1px solid var(--line);
}
.legend-row { display: block; }
.signal-chip { margin-top: 4px; font-size: 12px; letter-spacing: .5px; }
.chart-float {
  position: absolute; inset: 0; pointer-events: none;
  display: grid; place-items: center;
}
.float-xp {
  font-size: 18px; font-weight: 700; color: var(--blue);
  animation: floatup 1.1s ease-out forwards;
}
@keyframes floatup {
  from { opacity: 1; transform: translateY(10px); }
  to { opacity: 0; transform: translateY(-34px); }
}

/* ── bottom panel ────────────────────────────────────────────────────── */
.bottompanel {
  display: grid; grid-template-rows: auto auto 1fr;
  height: min(var(--dock-h, 240px), 34vh); min-width: 0; position: relative;
}
.dock-grip {
  height: 9px; cursor: ns-resize; display: grid; place-items: center;
  border-bottom: 1px solid var(--line);
}
.dock-grip i { width: 40px; height: 3px; background: var(--line-2); display: block; }
.dock-grip:hover i { background: var(--accent); }
.dock-grip.dragging i { background: var(--accent); }
.tabrow {
  display: flex; align-items: center; gap: 2px; padding: 6px 8px;
  border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none;
}
.tabrow::-webkit-scrollbar { display: none; }
.tabrow > * { flex: 0 0 auto; }
.tabbtn {
  font-size: 12.5px; letter-spacing: 1px; padding: 8px 14px; border-radius: 0; color: var(--dim);
}
.tabbtn:hover { color: var(--text); }
.tabbtn.is-active { color: var(--accent-ink); box-shadow: inset 0 -2px 0 var(--accent); }
.tabbtn .count { color: var(--green); margin-left: 4px; }
.exitall {
  margin-left: auto; font-size: 12px; letter-spacing: 1px; padding: 5px 11px; border-radius: 0;
  background: rgba(255,77,106,.14); color: var(--red); border: 1px solid rgba(255,77,106,.3);
}
.exitall:hover { background: rgba(255,77,106,.25); }
.tabbody { overflow: auto; padding: 4px 0; min-width: 0; }

.empty { display: grid; place-items: center; height: 100%; text-align: center; padding: 18px; gap: 6px; }
.empty-title { font-size: 14px; color: var(--dim); }
.empty-sub { font-size: 12.5px; color: var(--dim-2); max-width: min(460px, 100%); }

table.grid { width: 100%; border-collapse: collapse; }
table.grid th {
  font-size: 11px; letter-spacing: 1.2px; color: var(--dim-2); text-align: left;
  padding: 8px 13px; font-weight: 400; position: sticky; top: 0; background: var(--panel);
}
table.grid td { padding: 11px 13px; font-size: 13.5px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
table.grid tr:hover td { background: var(--panel-2); }
.sidetag {
  font-size: 11.5px; letter-spacing: 1px; padding: 3px 9px; border-radius: 0; font-weight: 600;
}
.sidetag.long { background: var(--up-soft); color: var(--up); }
.sidetag.short { background: var(--down-soft); color: var(--down); }
.minibtn {
  font-size: 11.5px; padding: 3px 8px; border-radius: 0; background: var(--raise);
  border: 1px solid var(--line-2); color: var(--dim); margin-left: 4px;
}
.minibtn:hover { background: var(--raise-2); color: #fff; }
.minibtn.red { background: rgba(255,77,106,.16); border-color: rgba(255,77,106,.3); color: var(--red); }

/* flow / tape */
.flowgrid { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 1px; background: var(--line); height: 100%; }
.flowcol { background: var(--panel); padding: 6px 8px; overflow: auto; }
.flowhead { font-size: 11px; letter-spacing: 1.2px; color: var(--dim-2); margin-bottom: 5px; }
.bookrow { position: relative; display: flex; justify-content: space-between; font-size: 13px; padding: 2px 4px; font-variant-numeric: tabular-nums; }
.bookrow .depth { position: absolute; inset: 0 auto 0 0; opacity: .18; border-radius: 0; }
.bookrow span { position: relative; }
.imbalance { height: 5px; background: var(--red); border-radius: 0; overflow: hidden; margin-bottom: 6px; }
.imbalance i { display: block; height: 100%; background: var(--green); }

/* pnl calendar */
.calendar { padding: 8px 10px; }
.calgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; max-width: 460px; }
.calcell {
  min-height: 30px; border-radius: 0; background: var(--panel-2); border: 1px solid var(--line);
  display: grid; place-content: center; text-align: center; font-size: 11.5px; padding: 2px 1px;
}
.calcell .d { color: var(--dim-2); font-size: 10.5px; }
.calcell .v { font-variant-numeric: tabular-nums; font-size: 11.5px; }
.calhead { display: flex; gap: 14px; align-items: baseline; margin-bottom: 8px; flex-wrap: wrap; }
.calwrap { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.calstat { font-size: 12px; color: var(--dim-2); letter-spacing: .8px; }
.calstat b { display: block; font-size: 15.6px; margin-top: 2px; }

/* feed */
.feeditem { display: flex; gap: 9px; padding: 7px 11px; border-bottom: 1px solid var(--line); }
.feedtag { font-size: 11px; letter-spacing: 1px; padding: 2px 6px; border-radius: 0; height: fit-content; white-space: nowrap; }
.feedtag.bull { background: var(--up-soft); color: var(--up); }
.feedtag.bear { background: var(--down-soft); color: var(--down); }
.feedtag.info { background: rgba(76,141,255,.14); color: var(--blue); }
.feedbody { min-width: 0; }
.feedhead { font-size: 13.5px; }
.feedsub { font-size: 12px; color: var(--dim-2); margin-top: 2px; }

/* ── order ticket ────────────────────────────────────────────────────── */
.ticket { overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 9px; }
.ticket-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.ticket-tab {
  font-size: 12px; letter-spacing: 1px; padding: 6px; border-radius: 0;
  background: var(--ctl); border: 1px solid var(--ctl-line); color: var(--ctl-text);
}
.ticket-tab:hover { background: var(--ctl-hover); border-color: var(--accent); }
.ticket-tab.is-active { background: var(--raise); border-color: var(--accent); color: var(--accent-ink); }
.ticket-tab.locked { color: var(--dim-2); }

.sidetoggle { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.sidebtn {
  padding: 9px; border-radius: 0; font-size: 14px; letter-spacing: 1px; font-weight: 600;
  background: var(--ctl); border: 1px solid var(--ctl-line); color: var(--ctl-text);
}
.sidebtn:hover { background: var(--ctl-hover); }
.sidebtn.long.is-active { background: var(--up-soft); border-color: var(--up); color: var(--up); }
.sidebtn.short.is-active { background: var(--down-soft); border-color: var(--down); color: var(--down); }

.typetoggle { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.typebtn {
  padding: 6px; border-radius: 0; font-size: 12.5px; letter-spacing: 1px;
  background: var(--ctl); border: 1px solid var(--ctl-line); color: var(--ctl-text);
}
.typebtn:hover { background: var(--ctl-hover); border-color: var(--accent); }
.typebtn.is-active { background: var(--raise); border-color: var(--accent); color: var(--accent-ink); }

.field label { display: block; font-size: 11px; letter-spacing: 1.2px; color: var(--dim-2); margin-bottom: 4px; }
.field input {
  width: 100%; padding: 11px 12px; font-size: 15px; border-radius: 0;
  background: var(--sunken); border: 1px solid var(--line); font-variant-numeric: tabular-nums;
}
.field input:focus { border-color: var(--accent); }
.field input::placeholder { color: var(--dim-2); font-size: 13px; }
.field2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

.quickrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.quick {
  padding: 8px 4px; font-size: 12px; border-radius: 0; background: var(--ctl);
  border: 1px solid var(--ctl-line); color: var(--ctl-text);
}
.quick:hover, .quick.is-active { background: var(--raise); color: var(--accent-ink); border-color: var(--accent); }
.quickwrap { display: flex; align-items: stretch; gap: 4px; }
.quickwrap .quickrow { flex: 1; }
.quick-input {
  width: 100%; text-align: center; padding: 8px 4px; font-size: 12px; border-radius: 0;
  background: var(--sunken); border: 1px solid var(--accent); color: var(--text);
  font-family: inherit; outline: none;
}
.quick-edit {
  flex: none; padding: 0 8px; font-size: 10px; letter-spacing: 1px; border-radius: 0;
  background: var(--ctl); border: 1px solid var(--ctl-line); color: var(--ctl-text);
}
.quick-edit:hover, .quick-edit.is-on { color: var(--accent-ink); border-color: var(--accent); }

.levrow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.lev {
  padding: 8px 3px; font-size: 12px; border-radius: 0; background: var(--ctl);
  border: 1px solid var(--ctl-line); color: var(--ctl-text); text-align: center;
}
.lev:hover { background: var(--ctl-hover); border-color: var(--accent); }
.lev.is-active { background: rgba(76,141,255,.18); border-color: var(--blue); color: var(--accent-ink); }
.lev.locked { color: var(--dim-2); }

.preview { background: var(--sunken); border: 1px solid var(--line); border-radius: 0; padding: 8px 10px; }
.preview-title { font-size: 11px; letter-spacing: 1.2px; color: var(--dim-2); margin-bottom: 6px; }
.prow { display: flex; justify-content: space-between; font-size: 12.5px; padding: 4px 0; }
.prow span:first-child { color: var(--dim-2); }
.prow span:last-child { font-variant-numeric: tabular-nums; }

.bigbtn {
  padding: 17px; border-radius: 0; font-size: 15.6px; font-weight: 700; letter-spacing: 1px;
  background: linear-gradient(180deg, #4c9bff, #2f6df6); color: #fff;
  box-shadow: 0 3px 16px rgba(59,130,246,.32);
}
.bigbtn:hover { filter: brightness(1.08); }
.bigbtn.short { background: linear-gradient(180deg, #ff5f79, #d6314c); color: #fff; box-shadow: 0 3px 16px rgba(255,77,106,.3); }
.bigbtn.confirm { background: linear-gradient(180deg, #f7d774, #e0a83a); color: #241a03; }
.bigbtn.disabled { background: var(--panel-3); color: var(--dim-2); box-shadow: none; cursor: not-allowed; }
.bigbtn-note { text-align: center; font-size: 12px; color: var(--dim-2); margin-top: 5px; }

.section-label { font-size: 11px; letter-spacing: 1.1px; color: var(--dim-2); }
.poscard {
  background: var(--sunken); border: 1px solid var(--line); border-radius: 0; padding: 8px; margin-top: 6px;
}
.poscard-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.poscard-side { font-size: 13px; font-weight: 600; }
.poscard-sub { font-size: 11.5px; color: var(--dim-2); margin-top: 2px; }
.poscard-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 7px; }
.poscard-actions button { font-size: 11.5px; padding: 5px; border-radius: 0; background: var(--raise); border: 1px solid var(--line-2); color: var(--dim); }
.poscard-actions button.red { background: rgba(255,77,106,.14); border-color: rgba(255,77,106,.3); color: var(--red); }

.acctstats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.acctstat span { display: block; font-size: 11px; letter-spacing: 1.1px; color: var(--dim-2); }
.acctstat b { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }

.hint {
  font-size: 12px; color: var(--dim); background: rgba(76,141,255,.08);
  border: 1px solid rgba(76,141,255,.25); border-radius: 0; padding: 8px 10px;
}
.hint b { color: var(--accent-ink); display: block; font-size: 11.5px; letter-spacing: 1.2px; margin-bottom: 4px; }
.warn { color: var(--amber); border-color: rgba(245,196,81,.3); background: rgba(245,196,81,.08); }
.warn b { color: var(--amber); }

/* ── status bar ──────────────────────────────────────────────────────── */
.statusbar {
  display: flex; align-items: center; gap: 20px; padding: 6px 12px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line); border-radius: 0;
  font-size: 12px; letter-spacing: .8px; color: var(--dim-2);
}
.status-session { color: var(--green); }
.status-session.closed { color: var(--dim); }
.status-regime { color: var(--amber); }
.status-spacer { flex: 1; }
.status-tip { color: var(--dim); }
/* Bottom left, because a shortcut nobody can see is a shortcut nobody uses.
   The whole strip opens the full list, so it is a way in as well as a
   reminder. */
.keylegend {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: 0; background: none; border: none; color: var(--dim-2);
  font-size: 11px; letter-spacing: .4px;
}
.keylegend:hover { color: var(--text); }
.keylegend-pair { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.keylegend kbd {
  font: inherit; padding: 1px 5px; border: 1px solid var(--ctl-line);
  background: var(--ctl); color: var(--ctl-text); border-radius: 0;
}

/* ── toasts & celebration ────────────────────────────────────────────── */
.toasts {
  position: fixed; top: 76px; right: 16px; width: 250px; z-index: 60;
  display: flex; flex-direction: column; gap: 6px; pointer-events: none;
}
.toast {
  display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 0;
  background: var(--panel); border: 1px solid var(--line-2); font-size: 13px;
  animation: slidein .22s ease-out; backdrop-filter: blur(6px);
}
.toast.good { border-left: 3px solid var(--up); }
.toast.bad { border-left: 3px solid var(--down); }
.toast.info { border-left: 3px solid var(--blue); }
.toast.fade { opacity: 0; transition: opacity .4s, transform .4s; transform: translateX(12px); }
@keyframes slidein { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

.celebration {
  position: fixed; inset: 0; display: grid; place-items: center; z-index: 70; pointer-events: none;
}
.celebration-inner {
  text-align: center; animation: pop 2.4s ease-out forwards;
  /* IT HAS TO BE READABLE OVER CANDLES.
     This was gradient text on nothing, so an offline bonus landed on top of a
     red and green chart and could barely be made out. It gets a surface. */
  padding: 20px 28px; max-width: min(520px, calc(100vw - 32px));
  background: var(--panel); border: 1px solid var(--line-2);
  box-shadow: 0 24px 70px var(--shadow);
}
.celebration-inner { text-shadow: 0 0 34px rgba(76, 155, 255, .4); }
.celebration-inner.gold { text-shadow: 0 0 34px rgba(245, 196, 81, .35); }
.celebration-title {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: clamp(28px, 6vw, 54px); font-weight: 800; letter-spacing: 2px;
}
/*
 * THE GRADIENT GOES ON THE WORDS, NOT THE ROW.
 *
 * This used to be one rule on .celebration-title itself: background-clip:text
 * needs an element's own text to clip to, which was fine when the title was a
 * single text node. Once an icon sat beside it as a sibling, that same rule
 * put color:transparent on the icon too, by inheritance, with nothing to make
 * it visible again - fill and stroke both read currentColor. The icon simply
 * vanished, and the space it still took up in the centered row pushed the
 * words it used to sit beside off to one side, closer to the icon's own
 * invisible edge than to the middle of the box. So the gradient targets the
 * word span alone now, and the icon gets a plain, visible colour of its own.
 */
.celebration-title .ico-svg { width: 1.3em; height: 1.3em; color: #cfe0ff; }
.celebration-inner.gold .celebration-title .ico-svg { color: #f7dfa0; }
.celebration-word {
  background: linear-gradient(90deg, #4c9bff, #e8f2ff, #4c9bff);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.celebration-inner.gold .celebration-word {
  background: linear-gradient(90deg, #f5c451, #fff3c4, #f5c451);
  -webkit-background-clip: text; background-clip: text;
}
.celebration-sub { font-size: 15.6px; color: var(--text); letter-spacing: 1px; margin-top: 4px; }
@keyframes pop {
  0% { opacity: 0; transform: scale(.82); }
  12% { opacity: 1; transform: scale(1.04); }
  20% { transform: scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.02); }
}

/* ── modals ──────────────────────────────────────────────────────────── */
.modal-root {
  position: fixed; inset: 0; background: var(--scrim); z-index: 80;
  display: grid; place-items: center; padding: 20px; backdrop-filter: blur(3px);
}
.modal {
  width: min(760px, 100%); max-height: 84dvh; overflow: auto;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 0;
  box-shadow: 0 24px 70px var(--shadow);
}
.modal-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); z-index: 2;
}
.modal-title { font-size: 15px; letter-spacing: 1.2px; }
.modal-close { margin-left: auto; font-size: 18px; color: var(--text); }
.modal-close:hover { color: #fff; }
.modal-body { padding: 14px 16px; }
.modal-body h4 { font-size: 12px; letter-spacing: 1.1px; color: var(--dim-2); margin: 14px 0 8px; font-weight: 400; }
.modal-body h4:first-child { margin-top: 0; }

.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 9px; }
.ccard { background: var(--panel-2); border: 1px solid var(--line); border-radius: 0; padding: 11px; }
.ccard-title { font-size: 14px; display: flex; align-items: center; gap: 7px; }
.ccard-sub { font-size: 12px; color: var(--dim-2); margin-top: 4px; line-height: 1.5; }
.ccard-foot { display: flex; align-items: center; gap: 6px; margin-top: 9px; }
.ccard.locked { opacity: .55; }

.btn {
  padding: 8px 14px; border-radius: 0; font-size: 13px; letter-spacing: 1px;
  background: var(--ctl); border: 1px solid var(--ctl-line); color: var(--text);
}
.btn:hover { background: var(--ctl-hover); border-color: var(--accent); }
.btn-primary { background: linear-gradient(180deg, #2ee08a, #14b86a); color: #04130b; border: none; font-weight: 700; }
.btn-blue { background: var(--accent); color: #fff; border: none; }
.btn-red { background: rgba(255,77,106,.16); border-color: rgba(255,77,106,.35); color: var(--red); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-sm { padding: 5px 10px; font-size: 12px; }

.rowlist { display: flex; flex-direction: column; gap: 6px; }
.listrow {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 0;
}
.listrow.you { border-color: var(--accent); background: var(--raise); }
.rank { font-size: 14px; color: var(--dim-2); width: 26px; font-variant-numeric: tabular-nums; }
.rank.top { color: var(--amber); }
.grow { flex: 1; min-width: 0; }
.nowrap { white-space: nowrap; }

.progressbar { height: 6px; background: var(--panel-3); border-radius: 0; overflow: hidden; margin-top: 6px; }
.progressbar i { display: block; height: 100%; background: var(--accent); }
.progressbar.green i { background: var(--up); }

.pill {
  font-size: 11px; letter-spacing: 1px; padding: 2px 7px; border-radius: 0;
  border: 1px solid var(--ctl-line); color: var(--ctl-text);
}
.pill.on { color: var(--green); border-color: rgba(22,217,125,.4); background: rgba(22,217,125,.08); }

/* ── views ───────────────────────────────────────────────────────────── */
.viewpage { overflow: auto; min-height: 0; }
.pagegrid { display: grid; gap: var(--gut); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.pagepanel { background: var(--panel); border: 1px solid var(--line); border-radius: 0; }
.pagepanel > .panel-head { border-radius: 0; }
.pagepanel-body { padding: 12px 14px; }

.botcard { display: grid; gap: 9px; }
.botcard-head { display: flex; align-items: center; gap: 9px; }
.boticon { width: 32px; height: 32px; border-radius: 0; display: grid; place-items: center; font-size: 19.2px; background: var(--panel-3); }
.statline { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--dim-2); }
.statline b { color: var(--text); font-weight: 500; margin-left: 4px; font-variant-numeric: tabular-nums; }

.collectgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 7px; }
.collectcell {
  border: 1px solid var(--line); border-radius: 0; padding: 9px 5px; text-align: center;
  background: var(--panel-2);
}
.collectcell.have { border-color: currentColor; }
.collectcell .ci { font-size: 23.6px; filter: grayscale(1); opacity: .3; }
.collectcell.have .ci { filter: none; opacity: 1; }
.collectcell .cn { font-size: 11px; margin-top: 4px; color: var(--dim); }
.collectcell .cr { font-size: 10.5px; letter-spacing: 1px; margin-top: 2px; }

/* ── promo card ──────────────────────────────────────────────────────── */
.promo {
  position: fixed; left: 16px; bottom: 46px; width: 272px; z-index: 55;
  background: var(--panel); border: 1px solid #3a3050; border-radius: 0; padding: 12px;
  box-shadow: 0 18px 50px var(--shadow);
}
.promo-head { display: flex; align-items: flex-start; }
.promo-title { font-size: 14px; letter-spacing: 1px; color: var(--amber); }
.promo-tag { font-size: 10.5px; letter-spacing: 1px; color: var(--dim-2); margin-top: 3px; }
.promo-perks { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 10px 0; }
.promo-perk {
  font-size: 11px; padding: 5px; border-radius: 0; background: var(--panel-2);
  border: 1px solid var(--line); text-align: center; color: var(--text);
}
.promo-perk.full { grid-column: 1 / -1; }
.promo-buy {
  width: 100%; padding: 10px; border-radius: 0; font-size: 13.5px; font-weight: 700; letter-spacing: 1px;
  background: linear-gradient(180deg, #f7d774, #e0a83a); color: #241a03;
}
.promo-note { text-align: center; font-size: 10.5px; color: var(--dim-2); margin-top: 6px; }

/* ── boot ────────────────────────────────────────────────────────────── */
.boot { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; background: radial-gradient(1000px 600px at 50% 0%, #0d1729, #04060b); z-index: 100; }
.boot-card { width: min(430px, 100%); background: var(--panel); border: 1px solid var(--line-2); border-radius: 0; padding: 24px; text-align: center; }
.boot-mark { font-size: 38.1px; font-weight: 800; letter-spacing: 2px; background: linear-gradient(90deg, #eaf2ff, #6ea8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.boot-title { font-size: 13px; letter-spacing: 3px; color: var(--dim); margin-top: 2px; }
.boot-copy { font-size: 14px; color: var(--dim); line-height: 1.65; margin: 18px 0; }
.boot-row { margin-bottom: 12px; }
.boot-row input { width: 100%; text-align: center; padding: 10px; background: var(--sunken); border: 1px solid var(--line); border-radius: 0; font-size: 15px; }
.boot-actions { display: flex; gap: 8px; justify-content: center; }
.boot-note { font-size: 11.5px; color: var(--dim-2); margin-top: 16px; line-height: 1.6; }

/* ── responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1240px) {
  .workspace { grid-template-columns: 268px minmax(0, 1fr) 292px; }
  .statcard { min-width: 112px; }
}
/* Between the phone layout and a full desk the top bar has to stay compact.
   Left alone it wraps into three rows and takes the chart's height with it. */
@media (max-width: 1100px) {
  .brand-sub { display: none; }
  .viewtab .ico { display: none; }
  .viewtab { padding: 7px 10px; }
  .statcard { padding: 6px 9px; }
  .statcard-label { font-size: 10px; letter-spacing: .7px; white-space: nowrap; }
  .statcard-value { font-size: 17px; white-space: nowrap; }
  .statcard-next { display: none; }
  .statcard-level { min-width: 0; }
  .tool { width: 34px; height: 34px; font-size: 15px; }
  .toolstrip { gap: 6px; }
  .shopbtn { padding: 6px 9px; font-size: 12px; }
  .ah-stats { gap: 4px 14px; }
  .ah-stat { font-size: 11.5px; }
  /* A wrapping status bar costs the chart three lines of height. */
  .statusbar { flex-wrap: nowrap; overflow: hidden; }
  .status-tip, .status-wire, .keylegend { display: none; }
}

/* A short window has to give the chart room from somewhere. */
@media (max-height: 820px) {
  .bottompanel { height: min(var(--dock-h, 240px), 200px); }
}
@media (max-height: 720px) {
  .bottompanel { height: min(var(--dock-h, 240px), 150px); }
  .ah-stats { display: none; }
}
@media (max-width: 1040px) {
  .workspace { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "center ticket"; }
  .explorer { display: none; }
  .explorer.mobile-open {
    display: grid; position: fixed; inset: 60px auto 40px 8px; width: min(300px, 88vw); z-index: 50;
    box-shadow: 0 20px 60px var(--shadow);
  }
  .center { grid-area: center; }
  .ticket { grid-area: ticket; }
  .mobile-only { display: inline-flex !important; }
}
@media (max-width: 760px) {
  body { font-size: 15px; }
  .app { padding: 6px; gap: 6px; }
  .topbar { gap: 6px; padding: 6px 7px; }
  .brand { min-width: 0; flex: 0 1 auto; gap: 7px; }
  .brand-sub { display: none; }
  .brand-logo { width: 24px; height: 24px; }
  .brand-mark { font-size: 12.5px; white-space: normal; line-height: 1.15; letter-spacing: .8px; }
  .viewnav { order: 3; width: 100%; }
  .viewtab { flex: 1; justify-content: center; padding: 7px 6px; }
  .statcards { width: 100%; margin-left: 0; order: 2; }
  .statcard { flex: 1; min-width: 0; }
  .statcard { padding: 5px 8px; min-width: 0; }
  .statcard-value { font-size: 16.8px; }
  .statcard-next { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .statcard-delta { font-size: 10.5px; }
  .viewtab { font-size: 12.5px; }
  .tool { width: 34px; height: 34px; font-size: 15px; }
  .shopbtn { padding: 6px 10px; font-size: 12.5px; }
  .toolstrip { order: 4; width: 100%; overflow-x: auto; padding-bottom: 2px; }
  .charttools { padding: 5px 6px; }
  .workspace { grid-template-columns: minmax(0, 1fr); grid-template-areas: "center"; }
  .ticket {
    position: fixed; inset: auto 6px calc(78px + env(safe-area-inset-bottom)) 6px;
    max-height: 68dvh; z-index: 50; display: none;
    box-shadow: 0 20px 60px var(--shadow);
  }
  .sheet-head { display: flex !important; }
  .ticket.mobile-open { display: flex; }
  .ah-price { margin-left: 0; }
  .ah-right { margin-left: 0; width: 100%; }
  .ah-top { gap: 8px; }
  .ah-stats { gap: 3px 12px; }
  .ah-sym { font-size: 24.8px; }
  .ah-last { font-size: 23.6px; }
  .toasts { top: auto; bottom: 60px; right: 8px; width: 210px; }
  .promo { left: 6px; right: 6px; width: auto; bottom: 56px; }
  .statusbar { gap: 10px; font-size: 11.5px; }
  .status-wire { display: none; }
}
.mobile-only { display: none; }
.sheet-head {
  display: none; align-items: center; gap: 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line); position: sticky; top: -10px;
  background: var(--panel); margin: -2px 0 2px; z-index: 3;
}
.sheet-head .grab { width: 34px; height: 3px; border-radius: 0; background: var(--line-2); }

/* ── options chain ───────────────────────────────────────────────────── */
.chain { border: 1px solid var(--line); border-radius: 0; overflow: hidden; }
.chainhead, .chainrow {
  display: grid; grid-template-columns: 1.2fr 1fr .8fr .7fr;
  gap: 4px; padding: 5px 8px; align-items: center; text-align: left; width: 100%;
  font-variant-numeric: tabular-nums;
}
.chainhead { font-size: 10.5px; letter-spacing: 1px; color: var(--dim-2); background: var(--sunken); }
.chainrow { font-size: 13px; border-top: 1px solid var(--line); }
.chainrow:hover { background: var(--panel-2); }
.chainrow.is-active { background: var(--raise); box-shadow: inset 2px 0 0 var(--accent); }
.chainrow .atm {
  font-style: normal; font-size: 10px; letter-spacing: .8px; color: var(--amber);
  border: 1px solid rgba(245,196,81,.4); border-radius: 0; padding: 0 3px; margin-left: 3px;
}

/* ── settings rows ───────────────────────────────────────────────────── */
.setrow {
  display: flex; align-items: center; gap: 16px; padding: 14px 15px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 0; margin-bottom: 6px;
}
.setrow-body { flex: 1; min-width: 0; }
.setrow-title { font-size: 13.5px; letter-spacing: .6px; }
.setrow-desc { font-size: 12px; color: var(--dim-2); margin-top: 3px; line-height: 1.5; }
.switch {
  flex: 0 0 auto; width: 62px; padding: 7px 0; border-radius: 0; text-align: center;
  font-size: 12px; letter-spacing: 1.2px; font-weight: 600;
  background: var(--ctl); color: var(--ctl-text); border: 1px solid var(--ctl-line);
}
.switch:hover { background: var(--ctl-hover); border-color: var(--accent); }
.switch.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.scalerow { display: flex; gap: 5px; flex-wrap: wrap; }
.scalebtn {
  padding: 6px 12px; border-radius: 0; font-size: 12.5px;
  background: var(--ctl); border: 1px solid var(--ctl-line); color: var(--ctl-text);
}
.scalebtn:hover { background: var(--ctl-hover); border-color: var(--accent); }
.scalebtn.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.bigrow {
  display: block; width: 100%; padding: 12px; border-radius: 0; margin-top: 6px;
  font-size: 13.5px; letter-spacing: 1.2px; text-align: center;
  background: rgba(76,141,255,.14); border: 1px solid rgba(76,141,255,.3); color: var(--accent-ink);
}
.bigrow:hover { background: rgba(76,141,255,.22); }
.bigrow.purple { background: rgba(168,85,247,.14); border-color: rgba(168,85,247,.4); color: var(--purple); }
.bigrow.plain { background: var(--ctl); border-color: var(--ctl-line); color: var(--ctl-text); }
.bigrow.plain:hover { background: var(--ctl-hover); border-color: var(--accent); }
/* The one action a screen is built around, filled rather than outlined, so
   there is never a question about which of two buttons is the main one. */
.bigrow.solid {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700;
}
.bigrow.solid:hover { filter: brightness(1.1); background: var(--accent); }
.bigrow.danger {
  background: transparent; border-color: var(--down); color: var(--down); font-weight: 600;
}
.bigrow.danger:hover { background: var(--down-soft); }
.bigrow:disabled { opacity: .5; cursor: not-allowed; }

/* ── time machine & rewards ──────────────────────────────────────────── */
.tmrow {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 0; margin-bottom: 7px;
}
.tmrow-body { flex: 1; min-width: 0; }
.tmrow-title { font-size: 14px; }
.tmrow-desc { font-size: 12px; color: var(--dim-2); margin-top: 3px; }
.tmbtn {
  flex: 0 0 auto; min-width: 86px; padding: 9px 14px; border-radius: 0;
  font-size: 13px; letter-spacing: 1px; font-weight: 700;
  background: var(--accent); color: #fff;
}
.tmbtn.free { background: linear-gradient(180deg, #2ee08a, #14b86a); color: #04130b; }
.tmbtn:disabled { background: var(--ctl); border: 1px solid var(--ctl-line); color: var(--dim); cursor: not-allowed; }

/* ── alerts ──────────────────────────────────────────────────────────── */
.alertbell { font-size: 12px; color: var(--amber); margin-left: 3px; }
.livebtn {
  position: absolute; right: 62px; bottom: 26px; z-index: 5;
  padding: 5px 12px; border-radius: 0; font-size: 12px; letter-spacing: 1px;
  background: var(--accent); color: #fff; box-shadow: 0 4px 14px var(--shadow);
}

/* ── empire / research sub-nav ───────────────────────────────────────── */
.subnav { display: flex; gap: 5px; flex-wrap: wrap; padding: 10px 12px; }
.subtab {
  position: relative; padding: 9px 18px; border-radius: 0; font-size: 12.5px; letter-spacing: 1.1px;
  background: var(--ctl); border: 1px solid var(--ctl-line); color: var(--ctl-text); flex: 1;
}
.subtab:hover { background: var(--ctl-hover); color: var(--text); border-color: var(--accent); }
.subtab.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.pagehead { padding: 12px 14px 2px; }
.pagehead-title { font-size: 12px; letter-spacing: 1.2px; color: var(--dim); }
.pagehead-sub { font-size: 12.5px; color: var(--dim-2); margin-top: 4px; }

.bigrows { display: flex; flex-direction: column; }
.bigstat {
  display: flex; align-items: center; gap: 16px; padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}
.bigstat-body { flex: 1; min-width: 0; }
.bigstat-label { font-size: 11px; letter-spacing: 1.1px; color: var(--dim-2); }
.bigstat-value { font-size: 24.8px; font-weight: 600; margin-top: 2px; }
.bigstat-sub { font-size: 12px; color: var(--dim-2); margin-top: 3px; }
.bigstat-value.amber { color: var(--amber); }
.bigstat-value.blue { color: var(--accent); }
.bigstat-value.dim { color: var(--dim-2); }

.calrow {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.calrow:hover { background: var(--panel-2); }
.calrow-icon { font-size: 18px; flex: 0 0 auto; }
.calrow-body { flex: 1; min-width: 0; }
.calrow-title { font-size: 13.5px; }
.calrow-sub { font-size: 11.5px; color: var(--dim-2); margin-top: 2px; letter-spacing: .5px; }
.calrow-in { font-size: 12px; color: var(--dim); white-space: nowrap; }

/* Cash card flashes the realised P&L of the trade that just closed. */
.statcard.flash { transition: background .15s, border-color .15s; }
.statcard.flash-up { background: var(--up-soft); border-color: var(--up); }
.statcard.flash-up .statcard-value { color: var(--up); }
.statcard.flash-down { background: var(--down-soft); border-color: var(--down); }
.statcard.flash-down .statcard-value { color: var(--down); }

/* The theme switch shows which mode is active. */
#btn-theme { font-size: 16.8px; }

/* Swatches in the terminal customization panel. */
.scalebtn .swatch {
  display: inline-block; width: 12px; height: 12px; margin-right: 6px;
  vertical-align: -2px; border: 1px solid var(--line-2);
}
.scalebtn { display: inline-flex; align-items: center; }

/* Reduced motion strips the celebratory animation without hiding the message. */
:root[data-motion="reduced"] .celebration-inner { animation: none; opacity: 1; }
:root[data-motion="reduced"] .toast { animation: none; }
:root[data-motion="reduced"] .float-xp { animation: none; opacity: .9; }
:root[data-motion="reduced"] .statcard.flash { transition: none; }

/* Chip accents need darker inks on a light ground to stay legible. */
:root[data-theme="light"] .chip-green { color: #0a8f52; }
:root[data-theme="light"] .chip-cyan { color: #0e7f96; }
:root[data-theme="light"] .chip-purple { color: #7a34c9; }
:root[data-theme="light"] .chip-blue { color: #1d63d8; }
:root[data-theme="light"] .chip-pink { color: #b02a6d; }

:root[data-theme="light"] {
  --up: #0a8f52;
  --down: #c8203c;
  --up-soft: rgba(10, 143, 82, .14);
  --down-soft: rgba(200, 32, 60, .14);
}
:root[data-theme="light"] .live-pill { color: #07733f; border-color: rgba(7, 115, 63, .5); }
:root[data-theme="light"] .chip-green { color: #07733f; }

/* ── rewarded ad overlay ─────────────────────────────────────────────── */
.ad-root {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: var(--scrim); padding: 20px; backdrop-filter: blur(3px);
}
.ad-card {
  width: min(440px, 100%); background: var(--panel);
  border: 1px solid var(--line-2); padding: 18px; text-align: center;
}
.ad-tag { font-size: 10px; letter-spacing: 1.4px; color: var(--dim-2); }
.ad-slot {
  margin: 14px 0; padding: 34px 16px; border: 1px dashed var(--line-2);
  background: var(--panel-2);
}
.ad-slot-label { font-size: 18px; letter-spacing: 3px; color: var(--dim); }
.ad-slot-note { font-size: 11px; color: var(--dim-2); margin-top: 8px; }
.ad-reward { font-size: 14px; color: var(--text); }
.ad-count { font-size: 30px; font-weight: 700; margin-top: 8px; font-variant-numeric: tabular-nums; }
.ad-bar { height: 5px; background: var(--panel-3); margin: 12px 0; overflow: hidden; }
.ad-bar i { display: block; height: 100%; width: 0%; background: var(--accent); transition: width 1s linear; }
.ad-skip {
  width: 100%; padding: 10px; font-size: 11px; letter-spacing: 1.2px;
  background: var(--ctl); border: 1px solid var(--ctl-line); color: var(--ctl-text);
}
.ad-skip:hover { color: var(--text); }
.adpill {
  font-size: 10px; letter-spacing: 1px; padding: 2px 7px; margin-left: 6px;
  border: 1px solid var(--line-2); color: var(--dim-2);
}

/* ── quick trade buttons on the chart toolbar ─────────────────────────── */
.quickbtn {
  height: 30px; padding: 0 10px; border-radius: 0; font-size: 12.5px; font-weight: 600;
  letter-spacing: .8px; border: 1px solid transparent; white-space: nowrap;
}
.quickbtn.buy { color: var(--up); background: var(--up-soft); border-color: var(--up); }
.quickbtn.sell { color: var(--down); background: var(--down-soft); border-color: var(--down); }
.quickbtn:hover:not(:disabled) { filter: brightness(1.25); }
.quickbtn.is-idle { opacity: .6; }
.quickbtn:disabled { opacity: .35; cursor: not-allowed; }

/* ── dropdown menu (indicators) ───────────────────────────────────────── */
.dropmenu {
  position: fixed; z-index: 60; min-width: 210px; max-width: min(300px, 92vw);
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 0;
  padding: 5px; box-shadow: 0 18px 50px var(--shadow); overflow-y: auto;
}
.dropmenu-head {
  font-size: 10.5px; letter-spacing: 1.2px; color: var(--dim-2);
  padding: 7px 8px 5px; border-top: 1px solid var(--line);
}
.dropmenu-head:first-child { border-top: 0; padding-top: 3px; }
.dropmenu-empty { font-size: 12px; color: var(--dim-2); padding: 4px 8px 7px; }
.dropitem {
  display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
  padding: 7px 8px; font-size: 12.5px; letter-spacing: .5px; color: var(--dim);
  border-radius: 0;
}
.dropitem:hover { background: var(--raise); color: var(--text); }
.dropitem.is-active { color: var(--accent-ink); background: var(--raise); }
.dropitem-tick { width: 12px; flex: none; color: var(--accent); font-size: 12px; }
.dropitem-dot { width: 9px; height: 9px; flex: none; display: block; }
.dropitem-go { color: var(--accent-ink); }

/* ── alerts form ──────────────────────────────────────────────────────── */
.alert-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; }
.alert-form .bigrow { margin: 0; height: 38px; white-space: nowrap; }

/* ── indicator builder ────────────────────────────────────────────────── */
.bld-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.bld-row { display: flex; align-items: center; gap: 12px; margin: 10px 0; flex-wrap: wrap; }
.bld-row > label {
  flex: none; width: 118px; font-size: 11px; letter-spacing: 1.2px; color: var(--dim-2);
}
.bld-row .field { flex: 1; min-width: 140px; }
.bld-row .field input { width: 100%; }
.bld-seg { display: flex; flex-wrap: wrap; gap: 3px; flex: 1; min-width: 160px; }
.bld-seg .tf { border: 1px solid var(--line); padding: 6px 9px; font-size: 11.5px; }
.bld-seg .tf.is-active { border-color: var(--accent); }
.bld-slider { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 160px; }
.bld-slider input[type="range"] { flex: 1; min-width: 90px; accent-color: var(--accent); }
.bld-val { font-size: 13px; min-width: 74px; text-align: right; letter-spacing: .5px; }
.bld-swatches { display: flex; gap: 5px; flex-wrap: wrap; }
.bld-swatch { width: 26px; height: 26px; border: 2px solid transparent; border-radius: 0; }
.bld-swatch.is-active { border-color: var(--text); }
.bld-dot { width: 10px; height: 10px; flex: none; display: block; }
.bld-formula {
  width: 100%; background: var(--panel-2); border: 1px solid var(--line); border-radius: 0;
  color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13.5px; padding: 9px 10px; resize: vertical; line-height: 1.5;
}
.bld-formula:focus { border-color: var(--accent); outline: none; }
.bld-status {
  font-size: 12.5px; letter-spacing: .4px; padding: 8px 10px; margin-top: 10px;
  border: 1px solid var(--line); background: var(--panel-2);
}
.bld-status.good { color: var(--up); border-color: var(--up); background: var(--up-soft); }
.bld-status.bad { color: var(--down); border-color: var(--down); background: var(--down-soft); }
.bld-preview {
  margin-top: 8px; padding: 10px; background: var(--panel-2); border: 1px solid var(--line);
}
.bld-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.bld-actions .bigrow { flex: 1; min-width: 150px; margin: 0; }
.bld-help { display: grid; gap: 5px; font-size: 12.5px; }
.bld-help div { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.bld-help code { color: var(--accent-ink); font-family: ui-monospace, monospace; min-width: 170px; }
.bld-help span { color: var(--dim-2); }

@media (max-width: 760px) {
  .alert-form { grid-template-columns: 1fr; }
  .bld-row > label { width: 100%; }
  .bld-val { text-align: left; }
}

/* ── phone layout ─────────────────────────────────────────────────────────
   Below 760px the terminal reduces to a price, a chart and two full-width
   buttons. Everything else moves into sheets that slide over the top. */
/* Turned on only inside the phone query, where the strip it replaces is off. */
.mobile-menu {
  display: none; align-items: center; justify-content: center;
  padding: 6px 10px; font-size: 11.5px; letter-spacing: 1.2px; font-weight: 600;
  color: var(--ctl-text); background: var(--ctl);
  border: 1px solid var(--ctl-line); border-radius: 0; margin-left: auto;
}

/*
 * THE PHONE MENU DRAWER. See openMobileMenu.
 *
 * From the right, full height, text rows. A bottom sheet put the first item
 * under the thumb and the last one off the top; a drawer reads top down like
 * the list it is.
 */
.mmenu-scrim {
  position: absolute; inset: 0; background: var(--scrim);
  opacity: 0; transition: opacity .18s ease;
}
.modal-root.is-open .mmenu-scrim { opacity: 1; }
.mmenu {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(300px, 82vw); display: flex; flex-direction: column;
  background: var(--panel); border-left: 1px solid var(--line-2);
  box-shadow: -18px 0 50px var(--shadow);
  transform: translateX(100%); transition: transform .2s cubic-bezier(.2, .8, .3, 1);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.modal-root.is-open .mmenu { transform: translateX(0); }
.mmenu-list { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 0; flex: 1; }
.mmenu-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 15px 20px; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; border-radius: 0;
  font-size: 15.5px; color: var(--text);
}
.mmenu-row:last-child { border-bottom: 0; }
.mmenu-row:active { background: var(--raise); }
.mmenu-hint { flex: none; font-size: 13px; color: var(--dim-2); }
.mmenu-section {
  padding: 22px 20px 8px; font-size: 10.5px; letter-spacing: 1.4px;
  color: var(--dim-2); text-transform: uppercase; word-break: break-all;
  border-top: 1px solid var(--line-2); margin-top: 6px;
}

.mbar { display: none; }
.msheet-root { display: none; }

@media (max-width: 760px) {
  .mbar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--bg) 62%, transparent);
  }
  .mbtn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; height: 62px; border-radius: 0; border: 1px solid transparent;
    font-weight: 700; letter-spacing: 1.4px;
  }
  .mbtn.buy { background: var(--up); color: #04120a; border-color: var(--up); }
  .mbtn.sell { background: var(--down); color: #16050a; border-color: var(--down); }
  :root[data-theme="light"] .mbtn.buy,
  :root[data-theme="light"] .mbtn.sell { color: #fff; }
  .mbtn:active { filter: brightness(.88); }
  .mbtn.is-locked { opacity: .45; }
  .mbtn-label { font-size: 19px; }
  .mbtn-sub { font-size: 12.5px; font-weight: 500; letter-spacing: .6px; opacity: .8; }

  /* the sheet */
  .msheet-root { display: block; position: fixed; inset: 0; z-index: 70; }
  .msheet-root[hidden] { display: none; }
  .msheet-scrim {
    position: absolute; inset: 0; background: var(--scrim);
    opacity: 0; transition: opacity .18s ease;
  }
  .msheet-root.is-open .msheet-scrim { opacity: 1; }
  /* HALF THE SCREEN, NOT ALL OF IT.
     At 92dvh the sheet covered the thing being bought, so somebody sized a
     position against a price they could no longer see. 52dvh leaves the chart
     behind it visible and still fits the form; the body scrolls if the
     brackets and positions need more than that. */
  .msheet {
    position: absolute; left: 0; right: 0; bottom: 0; max-height: 52dvh;
    display: flex; flex-direction: column;
    background: var(--panel); border-top: 1px solid var(--line-2);
    box-shadow: 0 -20px 60px var(--shadow);
    transform: translateY(100%); transition: transform .22s cubic-bezier(.2, .8, .3, 1);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .msheet-root.is-open .msheet { transform: translateY(0); }


  .msheet-head {
    display: flex; align-items: center; gap: 8px; padding: 10px 12px;
    border-bottom: 1px solid var(--line); flex: none;
  }

  /* The chart above the order form. `flex: none` so it keeps its height while
     the body below it scrolls, and a fixed height so the canvas has something
     to measure itself against. */
  .msheet-collapse {
    width: 34px; height: 34px; border: 1px solid var(--line-2); border-radius: 0;
    color: var(--dim); font-size: 17px; line-height: 1; flex: none;
  }
  .msheet-tabs { display: flex; gap: 4px; flex: 1; min-width: 0; }
  .msheet-tab {
    padding: 8px 10px; font-size: 13.5px; letter-spacing: .8px; color: var(--dim);
    border-radius: 0; border-bottom: 2px solid transparent;
  }
  .msheet-tab.is-active { color: var(--text); border-bottom-color: var(--accent); }
  .msheet-tab.is-locked { opacity: .5; }
  .msheet-chip {
    height: 34px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 0;
    color: var(--text); font-size: 13px; letter-spacing: .6px; flex: none;
  }

  .msheet-body { overflow-y: auto; padding: 12px; display: grid; gap: 11px; }

  .mseg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .mseg-btn {
    height: 46px; border-radius: 0; border: 1px solid var(--line-2);
    font-size: 16px; font-weight: 600; color: var(--dim); background: var(--panel-2);
  }
  .mseg-btn.buy.is-active { background: var(--up); color: #04120a; border-color: var(--up); }
  .mseg-btn.sell.is-active { background: var(--down); color: #16050a; border-color: var(--down); }
  :root[data-theme="light"] .mseg-btn.is-active { color: #fff; }
  .mseg-btn.is-locked { opacity: .45; }

  .mamount {
    display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 12px;
    background: var(--panel-2); border: 1px solid var(--line);
  }
  .mamount:focus-within { border-color: var(--accent); }
  .mamount-cur { color: var(--dim-2); font-size: 17px; }
  .mamount-input {
    flex: 1; min-width: 0; background: none; border: 0; outline: none;
    color: var(--text); font-size: 17px; font-family: inherit;
  }
  .mamount-input::placeholder { color: var(--dim-2); font-size: 15.5px; }
  .mamount-sym {
    flex: none; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 0;
    color: var(--text); font-size: 13.5px; letter-spacing: .6px;
  }

  .mlev { display: flex; flex-wrap: wrap; gap: 5px; }
  .mlev[hidden] { display: none; }
  .mlev-btn {
    flex: 1; min-width: 58px; height: 38px; border: 1px solid var(--line-2);
    border-radius: 0; color: var(--dim); font-size: 13.5px; letter-spacing: .6px;
  }
  .mlev-btn.is-active { background: var(--raise); color: var(--accent-ink); border-color: var(--accent); }

  .mrow {
    display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--dim);
  }
  .mrow-value { margin-left: auto; color: var(--text); font-size: 15px; }
  .mrow-add {
    width: 28px; height: 28px; border: 1px solid var(--line-2); border-radius: 0;
    color: var(--accent-ink); font-size: 17px; line-height: 1; flex: none;
  }
  .mrow-meta { justify-content: space-between; font-size: 13px; }
  .mrow-note { color: var(--dim-2); }
  .mrow-link { color: var(--accent-ink); font-size: 13px; border-radius: 0; padding: 4px 0; }
  .mrow-link.is-locked { color: var(--dim-2); }

  .mfields { display: grid; gap: 8px; }
  .mfields[hidden] { display: none; }
  .mfield { display: grid; gap: 4px; }
  .mfield[hidden] { display: none; }
  .mfield span { font-size: 11px; letter-spacing: 1.2px; color: var(--dim-2); }
  .mfield input {
    height: 46px; padding: 0 11px; background: var(--panel-2); border: 1px solid var(--line);
    border-radius: 0; color: var(--text); font-size: 15.5px; font-family: inherit; outline: none;
  }
  .mfield input:focus { border-color: var(--accent); }

  .msubmit {
    height: 58px; border-radius: 0; border: 1px solid transparent;
    font-size: 18px; font-weight: 700; letter-spacing: 1.2px;
  }
  .msubmit.buy { background: var(--up); color: #04120a; border-color: var(--up); }
  .msubmit.sell { background: var(--down); color: #16050a; border-color: var(--down); }
  :root[data-theme="light"] .msubmit { color: #fff; }
  .msubmit:disabled { opacity: .45; }

  .mnote { font-size: 12.5px; color: var(--dim-2); text-align: center; line-height: 1.5; }
  .mnote:empty { display: none; }
  .mpreview {
    display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--dim-2);
    padding: 9px 10px; background: var(--panel-2); border: 1px solid var(--line);
  }
  .mpreview:empty { display: none; }
  .mpreview b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }

  /* Above the form, so a fresh fill needs no scrolling to look at, and capped
     so that holding several names cannot push the form off the screen: past
     two cards the block scrolls inside itself instead of growing. */
  /* THE STRIP, ABOVE WHICHEVER BAR IS SHOWING.
     Closed it rides on the BUY and SHORT bar; open, on the sheet, whose height
     is already published as --sheet-h for the chart to size against. Its own
     z-index sits between the two so it is never behind the thing it is
     standing on. */
  .mposbar {
    position: fixed; left: 0; right: 0; z-index: 46;
    bottom: calc(78px + env(safe-area-inset-bottom));
    padding: 0 8px 6px;
    pointer-events: auto;
  }
  .mposbar[hidden] { display: none; }
  /* Divided by the zoom the app is rendered at, because --panel-h is measured
     in viewport pixels and spent here inside that zoom. Without it the strip
     lands four fifths of the way up and overlaps the sheet it is meant to be
     standing on. */
  body.sheet-open .mposbar {
    z-index: 71;
    bottom: calc(var(--panel-h, 40dvh) / var(--zoom));
  }

  /* No cap and no scroller. Clipping the card to a fixed height is what put a
     scrollbar through the middle of it; the band is as tall as what it holds,
     and the chart above gives up the difference. Past three names it does
     scroll, because at that point the alternative is a band taller than the
     screen. */
  .mpositions {
    display: grid; gap: 6px; max-height: 52dvh; overflow-y: auto;
    overscroll-behavior: contain;
  }
  .mpos { background: var(--panel-2); border: 1px solid var(--line); }
  .mpos-head { display: flex; align-items: center; gap: 7px; padding: 10px 10px 0; }
  .mpos-sym-s { font-size: 14px; color: var(--text); }
  .mpos-side { font-size: 11px; letter-spacing: .7px; }
  .mpos-tag {
    font-size: 9.5px; letter-spacing: 1px; padding: 2px 5px;
    border: 1px solid var(--accent); color: var(--accent-ink);
  }
  .mpos-sub { font-size: 12px; color: var(--dim-2); }
  .mpos-pnl {
    text-align: right; font-size: 14px; font-variant-numeric: tabular-nums;
    display: flex; align-items: baseline; gap: 6px;
  }
  .mpos > .mpos-sub { padding: 4px 10px 0; }
  .mpos-actions {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 10px 0;
  }
  .mpos .mflip { margin: 6px 10px 10px; width: calc(100% - 20px); }
  .mpos-actions button {
    height: 36px; border: 1px solid var(--line-2); border-radius: 0;
    color: var(--dim); font-size: 12.5px; letter-spacing: .6px;
  }
  .mpos-actions button.red { color: var(--down); border-color: var(--down); }

  /* Eighty per cent on a phone. The same layout, more of it on screen, which
     is what zooming the browser out to 80% was doing by hand. */
  :root { --zoom: calc(var(--ui-scale) * 0.8); }

  /* Strip the trade view back to a price and a chart. */
  body.sheet-open { overflow: hidden; }

  /* THE CHART IS THE SCREEN ABOVE THE FORM.
     The app is squeezed into what the sheet leaves rather than being covered
     by it, so the real chart resizes into the gap instead of hiding behind a
     scrim. Everything that is a label rather than the product gets out of the
     way while the form is open: the account cards, the status bar and the
     pinned buttons the sheet came from. */
  body.sheet-open .app { height: calc((100dvh - var(--sheet-h, 50dvh)) / var(--zoom)); }
  body.sheet-open .statcards,
  body.sheet-open .statusbar,
  body.sheet-open .mbar { display: none; }
  /* Transparent, because its job is to catch the tap that dismisses the form,
     not to dim the chart the player is reading. */
  body.sheet-open .msheet-scrim { background: transparent; }

  /* A compact head: one brand row, one readout row, one tool row. */
  .topbar { gap: 5px; padding: 5px 7px; }
  .brand { order: 1; }
  .brand-mark { font-size: 13px; }
  /* Default order 0 put MENU ahead of the title. It belongs at the far right
     of the title's own row, which is order 1 plus the auto margin. */
  .mobile-menu { order: 1; margin-left: auto; }
  .viewnav { order: 1; width: auto; margin-left: auto; gap: 3px; }
  .viewtab { padding: 6px 9px; font-size: 11.5px; }
  .viewtab .ico { display: none; }
  .statcards { order: 2; gap: 5px; }
  /* Size to content, so the portfolio card is not clipped by an equal share. */
  .statcard { flex: 0 1 auto; padding: 5px 7px; }
  .statcard-level { flex: 1 1 auto; }
  .statcard-top { gap: 5px; }
  .statcard-label { font-size: 9.5px; letter-spacing: .6px; white-space: nowrap; }
  .statcard-value { font-size: 15px; white-space: nowrap; }
  .statcard-delta { font-size: 9.5px; }
  .statcard-next { display: none; }
  .statcard-level { min-width: 0; }
  .xpbar { margin-top: 3px; }

  /* The chart's own buy and sell would duplicate the pinned bar. */
  .quickbtn { display: none; }

  /* NOTHING SITS ON THE CANDLES UNLESS A FINGER IS ON THEM.
     The header already carries the symbol, the price and the change, so a
     standing OHLC line, an indicator chip and a signal chip were three labels
     covering the thing they were labelling. */
  .chart-legend { display: none; }
  .chart-legend.is-live {
    display: block; left: 8px; top: 6px;
    background: var(--panel); border: 1px solid var(--line-2);
    padding: 5px 8px; max-width: calc(100% - 16px);
  }
  .chart-legend.is-live .legend-chip,
  .chart-legend.is-live .signal-chip { display: none; }
  .chart-legend.is-live .legend-ohlc {
    font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* Keyboard hints mean nothing on a touch screen. */
  .status-tip, .status-regime { display: none; }
  .statusbar { flex-wrap: nowrap; overflow: hidden; }
  .app { min-height: 0; padding-bottom: 0; }
  .workspace { min-height: 0; }
  .center { grid-template-rows: auto minmax(0, 1fr); gap: 6px; }
  .chartpanel { min-height: 0; }
  .bottompanel { display: none; }
  .ticket { display: none; }   /* still reachable from the toolbar */
  /* THE PRICE IS A LABEL, THE CHART IS THE PRODUCT.
     The header was two 27px numbers and a name stacked above the chart, which
     on a phone is most of the first screen spent on a figure that is also
     printed on both buttons at the bottom. Shrunk to a single line so the
     chart gets the room. */
  .asset-head { padding: 5px 10px; }
  .ah-stats, .ah-right, .ah-tag, .ah-name { display: none; }
  .ah-top { flex-wrap: nowrap; align-items: baseline; gap: 8px; }
  .ah-sym { font-size: 15px; letter-spacing: .6px; }
  .ah-last { font-size: 17px; }
  .ah-chg { font-size: 12px; padding: 1px 5px; }
  /* ONE LINE, NOT TWO. .ah-price stacks the price over the change, which on a
     phone put the percentage on a row of its own and spent another twenty
     pixels of chart on it. Side by side, and pushed to the right edge so the
     symbol and the price are not crowded together. */
  .ah-price { display: flex; align-items: baseline; gap: 8px; margin-left: auto; }
  .kindbadge { display: none; }

  /* WHAT THE ICON ROW AND THE VIEW TABS COST: two full rows of chrome above
     the chart, on the one screen size with none to spare. Both are gone, and
     everything they reached is behind the single MENU button that replaces
     them, so nothing is stranded. */
  .toolstrip { display: none; }
  .viewnav { display: none; }
  .mobile-menu { display: inline-flex; }
  .statusbar { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  /* TOASTS HAVE TO OUTRANK THE SHEET THEY REPORT ON.
     These were z-index 60 against the trade sheet's 70, pinned to the bottom,
     which is precisely where the sheet sits. Every fill confirmation rendered
     behind the form that placed the order. */
  .toasts {
    z-index: 80; left: 8px; right: 8px; width: auto;
    top: auto; bottom: calc(86px + env(safe-area-inset-bottom));
  }
  body.sheet-open .toasts { top: 8px; bottom: auto; }
  /* The bar runs the whole width of the phone, so a line of text starting
     after the icon reads as pushed off to one side. The icon and the words
     are centred as one group instead. */
  .toast { justify-content: center; text-align: center; padding: 10px 12px; }
  .toast .grow { flex: 0 1 auto; }
  .promo { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .explorer.mobile-open { inset: 56px 8px calc(80px + env(safe-area-inset-bottom)) 8px; width: auto; }
}

/* ── the store ────────────────────────────────────────────────────────── */
.st-vip {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 12px; background: var(--panel-2); border: 1px solid var(--line);
  margin-bottom: 12px;
}
.st-vip-badge {
  flex: none; padding: 7px 12px; font-size: 15px; font-weight: 700; letter-spacing: 1px;
  color: #2a1a00; background: linear-gradient(180deg, #ffd469, var(--amber));
  border: 1px solid #b07f10;
}
.st-vip-copy { flex: 1; min-width: 150px; font-size: 13px; }
.st-vipbar {
  position: relative; flex: 1 1 190px; min-width: 150px; height: 26px;
  background: var(--sunken); border: 1px solid var(--line-2);
}
.st-vipbar i {
  position: absolute; inset: 0 auto 0 0; display: block;
  background: linear-gradient(180deg, #ffd469, var(--amber));
}
.st-vipbar span {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--text);
  text-shadow: 0 1px 2px var(--panel);
}
.st-vip-btn {
  flex: none; padding: 8px 12px; border-radius: 0; font-size: 12px; letter-spacing: .8px;
  color: #2a1a00; background: linear-gradient(180deg, #ffd469, var(--amber));
  border: 1px solid #b07f10; font-weight: 700;
}

.st-body { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; }
.st-rail { display: flex; flex-direction: column; gap: 6px; }
.st-cat {
  padding: 12px 10px; border-radius: 0; border: 1px solid var(--ctl-line);
  background: var(--ctl); color: var(--ctl-text); font-size: 12.5px; letter-spacing: 1px;
  text-align: left; font-weight: 600;
}
.st-cat.is-active {
  color: #2a1a00; background: linear-gradient(180deg, #ffd469, var(--amber));
  border-color: #b07f10;
}

.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 10px; }
.st-card {
  position: relative; display: flex; flex-direction: column; gap: 5px;
  padding: 12px 11px 11px; background: var(--panel-2); border: 1px solid var(--line);
}
.st-card.is-owned { opacity: .62; }
.st-bonus {
  position: absolute; top: -1px; right: -1px; padding: 3px 7px;
  font-size: 10px; letter-spacing: .6px; font-weight: 700;
  color: #2a1a00; background: var(--amber); border: 1px solid #b07f10;
}
.st-card-name { font-size: 13.5px; letter-spacing: .8px; font-weight: 600; padding-right: 60px; }
.st-card-cash { font-size: 23px; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.st-card-tag { font-size: 11px; letter-spacing: .7px; color: var(--amber); }
.st-perks { margin: 4px 0 0; padding-left: 15px; display: grid; gap: 3px; }
.st-perks li { font-size: 12px; color: var(--dim-2); line-height: 1.45; }
.st-vippts { font-size: 11px; color: var(--dim-2); margin-top: auto; padding-top: 6px; }
.st-buy {
  height: 40px; border-radius: 0; font-size: 15px; font-weight: 700; letter-spacing: .8px;
  color: #04120a; background: var(--up); border: 1px solid var(--up);
}
:root[data-theme="light"] .st-buy { color: #fff; }
.st-buy:hover:not(:disabled) { filter: brightness(1.12); }
.st-buy.is-owned, .st-buy:disabled {
  background: var(--ctl); border-color: var(--ctl-line); color: var(--ctl-text);
}

.st-vip-list { display: grid; gap: 7px; }
.st-tier { padding: 10px 11px; background: var(--panel-2); border: 1px solid var(--line); }
.st-tier.is-on { border-color: var(--amber); }
.st-tier-head { display: flex; align-items: center; gap: 9px; font-size: 13.5px; }
.st-tier-head .pill { margin-left: auto; }
.st-legal {
  margin-top: 14px; padding: 10px; font-size: 11.5px; line-height: 1.6;
  color: var(--dim-2); background: var(--sunken); border: 1px solid var(--line);
}

/* ── the ad upsell ────────────────────────────────────────────────────── */
.ad-offers { display: grid; gap: 6px; margin-top: 12px; border-top: 1px solid var(--line); padding-top: 11px; }
.ad-offers-head { font-size: 10.5px; letter-spacing: 1.3px; color: var(--dim-2); }
.ad-offer {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 11px; border-radius: 0; border: 1px solid var(--line-2); background: var(--panel-2);
}
.ad-offer.is-best { border-color: var(--amber); background: rgba(245, 196, 81, .09); }
.ad-offer b { display: block; font-size: 13px; letter-spacing: .6px; color: var(--text); }
.ad-offer small { display: block; font-size: 11.5px; color: var(--dim-2); margin-top: 2px; }
.ad-offer-price {
  flex: none; padding: 6px 10px; font-size: 14px; font-weight: 700;
  color: #04120a; background: var(--up); border: 1px solid var(--up);
}
:root[data-theme="light"] .ad-offer-price { color: #fff; }
.ad-offer-more {
  font-size: 12px; color: var(--accent-ink); border-radius: 0; padding: 6px;
  text-decoration: underline;
}

/* ── the undo prompt ──────────────────────────────────────────────────── */
.undobar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 54px; z-index: 58;
  display: flex; align-items: center; gap: 10px; max-width: min(440px, calc(100vw - 24px));
  padding: 9px 10px 9px 13px;
  background: var(--panel); border: 1px solid var(--line-2);
  box-shadow: 0 14px 40px var(--shadow);
}
.undobar[hidden] { display: none; }
.undobar-copy { display: flex; align-items: baseline; gap: 7px; font-size: 13px; color: var(--dim); }
.undobar-copy b { font-variant-numeric: tabular-nums; }
.undobar-go {
  flex: none; padding: 9px 12px; border-radius: 0; font-size: 12.5px; font-weight: 700;
  letter-spacing: .7px; color: #2a1a00;
  background: linear-gradient(180deg, #ffd469, var(--amber)); border: 1px solid #b07f10;
}
.undobar-x { flex: none; width: 26px; height: 26px; color: var(--dim-2); border-radius: 0; }

/* ── the revert prompt ────────────────────────────────────────────────── */
/* The five-second ask after a losing close. Above nearly everything -
   the moment it answers is right now - but below the wipeout screen, which
   never has to compete with it: main.js skips this entirely once the desk
   is wiped out, so the two never stack. */
.revert-root {
  position: fixed; inset: 0; z-index: 91; display: grid; place-items: center; padding: 16px;
}
.revert-root[hidden] { display: none; }
.revert-scrim { position: absolute; inset: 0; background: var(--scrim); backdrop-filter: blur(2px); }

.revert-card {
  position: relative; width: min(320px, 100%); background: var(--panel);
  border: 1px solid var(--down); border-top: 3px solid var(--down);
  padding: 22px 20px 20px; text-align: center;
  box-shadow: 0 20px 60px var(--shadow);
  animation: revert-in .22s cubic-bezier(.2, .8, .3, 1);
}
:root[data-motion="reduced"] .revert-card { animation: none; }
@keyframes revert-in {
  from { opacity: 0; transform: scale(.94); }
  to { opacity: 1; transform: none; }
}

/* The ring's depletion is driven inline from JS, where its radius and
   circumference are already known - this only styles what does not change. */
.revert-dial { position: relative; width: 62px; height: 62px; margin: 0 auto 14px; }
.revert-ring { width: 62px; height: 62px; transform: rotate(-90deg); }
.revert-ring-bg { fill: none; stroke: var(--line-2); stroke-width: 3; }
.revert-ring-fg { fill: none; stroke: var(--down); stroke-width: 3; stroke-linecap: round; }
.revert-count {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text);
}

.revert-copy { font-size: 14px; color: var(--dim); line-height: 1.5; }
.revert-copy b { font-size: 15px; }
.revert-copy b.down { color: var(--down); }

.revert-acts { display: grid; gap: 8px; margin-top: 18px; }
.revert-go {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; border-radius: 0; font-size: 13.5px; font-weight: 700; letter-spacing: .5px;
  background: var(--accent); border: 1px solid var(--accent); color: #fff;
}
.revert-go:active { filter: brightness(.9); }
.revert-keep {
  min-height: 38px; border-radius: 0; background: none; border: 0;
  color: var(--dim-2); font-size: 12px; letter-spacing: .5px;
}
.revert-keep:hover { color: var(--text); }

@media (max-width: 760px) {
  .st-body { grid-template-columns: minmax(0, 1fr); }
  .st-rail { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .st-rail::-webkit-scrollbar { display: none; }
  .st-cat { flex: none; padding: 9px 12px; }
  .st-grid { grid-template-columns: minmax(0, 1fr); }
  .undobar { bottom: calc(84px + env(safe-area-inset-bottom)); left: 8px; right: 8px; transform: none; max-width: none; }
  body.sheet-open .undobar { z-index: 79; top: 64px; bottom: auto; }
  /* Above the phone's own trade bar and sheet, same reasoning as the undo
     bar just above: the thing it is asking about was just done here. */
  .revert-root { z-index: 91; padding: 16px calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); }
}

/* ── sign in ──────────────────────────────────────────────────────────── */
.auth-root { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; }
.auth-root[hidden] { display: none; }
.auth-scrim { position: absolute; inset: 0; background: var(--scrim); }
.auth-card {
  position: relative; width: min(440px, 100%); max-height: 92dvh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line-2); padding: 18px;
  box-shadow: 0 24px 70px var(--shadow);
}
.auth-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.auth-title { font-size: 15px; letter-spacing: 1.2px; font-weight: 600; }
.auth-head .modal-close { margin-left: auto; }
.auth-reason {
  font-size: 12.5px; color: var(--amber); line-height: 1.5;
  padding: 9px 10px; background: rgba(245, 196, 81, .1);
  border: 1px solid rgba(245, 196, 81, .35); margin-bottom: 11px;
}
.auth-copy { font-size: 13.5px; color: var(--dim); line-height: 1.6; margin: 0 0 14px; }
.auth-copy b { color: var(--text); }
.auth-field { display: grid; gap: 5px; margin-bottom: 10px; }
.auth-field span { font-size: 11px; letter-spacing: 1.2px; color: var(--dim-2); }
.auth-input {
  height: 48px; padding: 0 12px; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 0; color: var(--text); font-size: 16px; font-family: inherit; outline: none;
  width: 100%;
}
.auth-input:focus { border-color: var(--accent); }
.auth-go {
  width: 100%; height: 50px; border-radius: 0; border: 1px solid var(--accent);
  background: var(--accent); color: #fff; font-size: 15px; font-weight: 700; letter-spacing: 1px;
  margin-top: 4px;
}
.auth-go:disabled { opacity: .55; }
.auth-note { font-size: 12.5px; color: var(--down); line-height: 1.5; min-height: 1px; margin-bottom: 6px; }
.auth-note:empty { display: none; }
.auth-fine { font-size: 11.5px; color: var(--dim-2); line-height: 1.6; margin-top: 11px; }
.auth-link { color: var(--accent-ink); text-decoration: underline; }
.auth-checks { display: grid; gap: 11px; margin: 12px 0; }
.auth-check {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 12.5px; color: var(--dim); line-height: 1.55; cursor: pointer;
}
.auth-box {
  flex: none; width: 20px; height: 20px; margin-top: 1px;
  accent-color: var(--accent); border-radius: 0;
}
.auth-alts { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; }

/* The code box, which opens on the sign-up form rather than replacing it. */
.auth-codewrap { margin: 2px 0 4px; }
.auth-codewrap .auth-copy { margin-bottom: 10px; }
.auth-code {
  font-size: 22px; letter-spacing: 8px; text-align: center; font-variant-numeric: tabular-nums;
}
.auth-code::placeholder { letter-spacing: 8px; color: var(--dim-2); }
/* Locked, not gone: the address the code went to is the thing worth seeing. */
.auth-field input:disabled, .auth-pass input:disabled { opacity: .55; cursor: not-allowed; }
.auth-check input:disabled + span { opacity: .55; }
.auth-alt { font-size: 12.5px; color: var(--accent-ink); border-radius: 0; text-decoration: underline; padding: 2px 0; }
.auth-alt:disabled { color: var(--dim-2); text-decoration: none; }
.auth-choice {
  display: block; width: 100%; text-align: left; padding: 13px; border-radius: 0;
  border: 1px solid var(--line-2); background: var(--panel-2); margin-bottom: 8px;
}
.auth-choice:hover { border-color: var(--accent); }
.auth-choice b { display: block; font-size: 13.5px; letter-spacing: .8px; color: var(--text); }
.auth-choice small { display: block; font-size: 12px; color: var(--dim-2); margin-top: 3px; }
.legal-links { display: flex; gap: 14px; font-size: 12.5px; margin: 10px 0; }

@media (max-width: 760px) {
  .auth-root { padding: 10px; align-items: flex-end; }
  .auth-card { width: 100%; padding: 15px; }
}

/* ── take profit and stop loss on the phone ───────────────────────────── */
@media (max-width: 760px) {
  /* One row that opens the two bracket fields, so BUY stays above the fold. */
  .mfold {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 11px 12px; border-radius: 0; border: 1px solid var(--line-2);
    background: var(--panel-2); color: var(--dim); text-align: left;
  }
  .mfold.is-open { border-color: var(--accent); color: var(--accent-ink); }
  .mfold-label { font-size: 11.5px; letter-spacing: 1px; }
  .mfold-sum { margin-left: auto; font-size: 12.5px; color: var(--dim-2); }
  .mfold-sum.is-set { color: var(--accent-ink); }
  .mfold-caret { font-size: 11px; color: var(--dim-2); }

  .mbrackets { display: grid; gap: 10px; }
  .mbrackets[hidden] { display: none; }
  .mbracket { display: grid; gap: 6px; }
  .mbracket .mfield span.up { color: var(--up); }
  .mbracket .mfield span.down { color: var(--down); }
  .mpresets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .mpreset {
    height: 34px; border: 1px solid var(--line-2); border-radius: 0;
    color: var(--dim); font-size: 12.5px; letter-spacing: .4px;
  }
  .mpreset:active { background: var(--raise); color: var(--accent-ink); }
  .mbracket-note {
    font-size: 12.5px; color: var(--dim-2); padding: 8px 10px;
    background: var(--panel-2); border: 1px solid var(--line);
    font-variant-numeric: tabular-nums; line-height: 1.5;
  }
  .mbracket-note[hidden] { display: none; }
  .mrow-note.down { color: var(--down); }
}

/* ── the sign-up form ─────────────────────────────────────────────────── */
.auth-card h2.auth-title {
  font-size: 26px; font-weight: 700; letter-spacing: -.2px; margin: 0;
  text-align: center; width: 100%;
}
.auth-card .auth-head { position: relative; }
.auth-card .auth-head .modal-close { position: absolute; right: 0; top: 0; }
.auth-switch {
  display: flex; gap: 6px; justify-content: center; align-items: baseline;
  font-size: 14px; color: var(--dim); margin-bottom: 16px; flex-wrap: wrap;
}
.auth-swap { color: var(--accent-ink); font-size: 14px; border-radius: 0; }
.auth-swap:hover { text-decoration: underline; }
.auth-oauth {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; border: 1px solid var(--line-2); background: var(--panel-2);
  color: var(--text); text-decoration: none; font-size: 16px; margin-bottom: 18px;
}
.auth-oauth:hover { background: var(--raise); }
.auth-oauth b { font-weight: 600; }
.auth-or {
  display: flex; align-items: center; gap: 12px; margin: 18px 0;
  color: var(--dim-2); font-size: 11px; letter-spacing: 1.4px;
}
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--line-2); }
.auth-pass { position: relative; display: block; }
.auth-pass .auth-input { padding-right: 46px; }
.auth-eye {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 0; font-size: 15px;
  color: var(--dim-2); opacity: .7;
}
.auth-eye:hover, .auth-eye.is-on { opacity: 1; color: var(--text); }
.auth-card .auth-go {
  height: 54px; font-size: 16px; font-weight: 600; letter-spacing: 0; margin-top: 14px;
}
.auth-card .auth-check { font-size: 13.5px; }
.auth-card .auth-checks { margin: 16px 0 4px; }

/* ── the owner panel ──────────────────────────────────────────────────── */
.own-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 7px; }
.own-btn {
  height: 42px; border: 1px solid var(--line-2); border-radius: 0;
  background: var(--panel-2); color: var(--text); font-size: 12.5px; letter-spacing: .6px;
}
.own-btn:hover { border-color: var(--accent); color: var(--accent-ink); }
.own-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 9px; }
.own-form .mfield { display: grid; gap: 4px; }
.own-form .mfield[hidden] { display: none; }
.own-form .mfield span { font-size: 11px; letter-spacing: 1.2px; color: var(--dim-2); }
.own-form input, .own-select {
  height: 42px; padding: 0 10px; background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 0; color: var(--text); font-size: 14px; font-family: inherit; outline: none;
}
.own-form input:focus, .own-select:focus { border-color: var(--accent); }
.own-select[hidden] { display: none; }
.own-id {
  font-size: 11.5px; color: var(--dim-2); font-family: ui-monospace, monospace;
  overflow: hidden; text-overflow: ellipsis; max-width: 210px; white-space: nowrap;
}

@media (max-width: 760px) {
  .auth-card h2.auth-title { font-size: 22px; }
  .auth-oauth { height: 48px; }
  .own-grid { grid-template-columns: 1fr 1fr; }
}

/* ── the ticker is the way into the universe ──────────────────────────── */
.ah-caret { margin-left: 6px; color: var(--dim-2); font-size: .72em; }
.ah-sym { border-radius: 0; text-align: left; }

@media (max-width: 760px) {
  .ah-sym { padding: 2px 4px; margin-left: -4px; }
  .ah-sym:active { background: var(--raise); }

  /* Full screen, because picking from a list of everything on a phone is the
     whole task for as long as it lasts, not a panel floating over another. */
  .explorer.mobile-open.is-full {
    inset: 0; width: auto; max-width: none; z-index: 75;
    border: 0; box-shadow: none;
  }
  .explorer.mobile-open.is-full .panel-head { padding-top: env(safe-area-inset-top); }
  .explorer.mobile-open.is-full .assetlist { padding-bottom: env(safe-area-inset-bottom); }
  .explorer.mobile-open.is-full .explorer-close { display: inline-flex; }
}
.explorer-close { display: none; margin-left: auto; font-size: 18px; color: var(--dim); border-radius: 0; }
.explorer-close:hover { color: var(--text); }

/* ── a refusal you can feel ───────────────────────────────────────────── */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15%, 45%, 75% { transform: translateX(-6px); }
  30%, 60%, 90% { transform: translateX(6px); }
}
.shake { animation: shake .34s cubic-bezier(.36, .07, .19, .97); }
.shake .auth-input, .shake.auth-input { border-color: var(--down); }
/* Somebody who asked not to be moved is not shown a wobble. */
:root[data-motion="reduced"] .shake { animation: none; outline: 2px solid var(--down); }

/* ── the drawer's one action ──────────────────────────────────────────── */
.mmenu-cta { padding: 12px 16px 6px; display: grid; gap: 8px; }
.mmenu-signup {
  height: 48px; border-radius: 0; border: 1px solid var(--accent);
  background: var(--accent); color: #fff; font-size: 15.5px; font-weight: 600;
}
.mmenu-signup:active { filter: brightness(.9); }
.mmenu-signin {
  border-radius: 0; color: var(--accent-ink); font-size: 13.5px; padding: 4px;
  background: none; border: 0;
}

/* ── size presets ─────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .msize-row { display: flex; align-items: center; gap: 6px; }
  .msizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; flex: 1; }
  .msize {
    height: 44px; border: 1px solid var(--line-2); border-radius: 0;
    color: var(--dim); font-size: 14px; letter-spacing: .4px; background: var(--panel-2);
  }
  .msize.is-active {
    background: var(--raise); color: var(--accent-ink); border-color: var(--accent);
  }
  .msize-input {
    height: 44px; width: 100%; text-align: center; border-radius: 0;
    background: var(--sunken); border: 1px solid var(--accent); color: var(--text);
    font-size: 14px; font-family: inherit; outline: none;
  }
  .msizes-edit {
    flex: none; height: 44px; padding: 0 10px; border-radius: 0;
    border: 1px solid var(--line-2); background: var(--panel-2);
    color: var(--dim-2); font-size: 11px; letter-spacing: 1px;
  }
  .msizes-edit.is-on { color: var(--accent-ink); border-color: var(--accent); }
}

/* ── the icon set ─────────────────────────────────────────────────────── */
/* Drawn icons rather than emoji: they take the colour of whatever they sit
   in, so a toolbar button, a toast and a locked button all read as one piece
   of software instead of three different fonts. */
.ico-svg { flex: none; vertical-align: -0.18em; }
button > .ico-svg { pointer-events: none; }

.toast { align-items: center; }
.toast-ico { display: inline-flex; align-items: center; flex: none; }
.toast.good .toast-ico { color: var(--up); }
.toast.bad .toast-ico { color: var(--down); }
.toast.info .toast-ico { color: var(--accent-ink); }

.tmrow-title { display: flex; align-items: center; gap: 8px; }
.boticon { display: flex; align-items: center; justify-content: center; }
.calrow-icon .ico-svg { vertical-align: -0.2em; }
.shopbtn { display: inline-flex; align-items: center; gap: 6px; }

.msubmit { display: flex; align-items: center; justify-content: center; gap: 8px; }

/* ── wiped out ────────────────────────────────────────────────────────── */
/* Above everything, the ad overlay included, because it is the thing that
   opens the ad. Not dismissible: there is no desk left to go back to. */
.wipe-root {
  position: fixed; inset: 0; z-index: 95; display: grid; place-items: center;
  padding: 20px calc(16px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom))
    calc(16px + env(safe-area-inset-left));
}
.wipe-root[hidden] { display: none; }
.wipe-scrim { position: absolute; inset: 0; background: var(--scrim); backdrop-filter: blur(4px); }
.wipe-card {
  position: relative; width: min(420px, 100%); background: var(--panel);
  border: 1px solid var(--down); border-top: 3px solid var(--down);
  padding: 26px 22px; text-align: center;
  box-shadow: 0 0 60px rgba(0, 0, 0, .6), 0 0 90px rgba(239, 83, 80, .12);
  animation: wipe-in .3s cubic-bezier(.2, .8, .3, 1);
}
@keyframes wipe-in {
  from { opacity: 0; transform: scale(.94); }
  to { opacity: 1; transform: none; }
}
:root[data-motion="reduced"] .wipe-card { animation: none; }

.wipe-mark { color: var(--down); line-height: 0; margin-bottom: 14px; }
.wipe-title {
  margin: 0; font-size: 30px; letter-spacing: 4px; color: var(--down);
  font-weight: 700;
}
.wipe-sub { margin: 10px 0 0; font-size: 14px; line-height: 1.65; color: var(--dim); }
.wipe-sub b { color: var(--text); }

.wipe-acts { display: grid; gap: 9px; margin-top: 22px; }
.wipe-go, .wipe-alt {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; border-radius: 0; font-size: 15px; font-weight: 600;
  padding: 0 14px; text-align: center;
}
.wipe-go { background: var(--accent); border: 1px solid var(--accent); color: #fff; }
.wipe-go:active { filter: brightness(.9); }
.wipe-alt {
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--text);
  font-weight: 500;
}
.wipe-alt:hover, .wipe-alt:active { border-color: var(--accent); color: var(--accent-ink); }
.wipe-alt:disabled { opacity: .6; }
.wipe-note { margin-top: 12px; font-size: 12.5px; color: var(--down); min-height: 1em; }

@media (max-width: 760px) {
  .wipe-title { font-size: 26px; letter-spacing: 3px; }
  .wipe-card { padding: 22px 16px; }
  .wipe-alt { font-size: 13.5px; }
}

/* ── first-run pointers ───────────────────────────────────────────────── */
/* The root takes no taps: every step is dismissed by using the control it
   points at, so the control has to stay reachable through it. */
.coach-root { position: fixed; inset: 0; z-index: 88; pointer-events: none; }
.coach-root[hidden] { display: none; }

/* The dimming is the halo's own shadow, spread far enough to cover the
   screen, which cuts a hole exactly where the control is. */
.coach-halo {
  position: absolute; border-radius: 2px;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .64), 0 0 22px rgba(76, 155, 255, .55);
  transition: none;
}

.coach-bubble {
  position: absolute; pointer-events: auto;
  width: min(290px, calc(100vw - 20px));
  background: var(--accent); color: #fff; border-radius: 4px;
  padding: 13px 14px 10px; font-size: 13.5px; line-height: 1.55;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .55);
  animation: coach-in .22s ease-out;
}
@keyframes coach-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
:root[data-motion="reduced"] .coach-bubble { animation: none; }

/* Drawn as a rotated square so it takes the bubble's own colour. */
.coach-arrow {
  position: absolute; top: -5px; width: 12px; height: 12px;
  background: var(--accent); transform: translateX(-50%) rotate(45deg);
}
.coach-bubble.is-above .coach-arrow { top: auto; bottom: -5px; }

.coach-text b { font-weight: 700; }
.coach-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 9px; font-size: 11.5px;
}
.coach-count { opacity: .75; letter-spacing: 1px; }
.coach-skip {
  border-radius: 0; background: none; border: 0; padding: 3px 2px;
  color: #fff; opacity: .8; font-size: 11.5px; letter-spacing: 1px;
}
.coach-skip:hover { opacity: 1; text-decoration: underline; }
.coach-got {
  display: block; width: 100%; margin-top: 11px; min-height: 40px; border-radius: 3px;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .5);
  color: #fff; font-size: 13.5px; font-weight: 600; letter-spacing: .4px;
  touch-action: manipulation;
}
.coach-got:hover { background: rgba(255, 255, 255, .26); }

/* ── changing your own credentials ────────────────────────────────────── */
.credpanel { display: grid; gap: 8px; margin: 0 0 14px; }
.credpanel[hidden] { display: none; }
.credpanel .auth-input { width: 100%; }
.credpanel .bigrow { margin-top: 2px; }

/* ── account settings ────────────────────────────────────────────────────
   Labelled sections rather than one long column of controls, so the field
   that changes your password cannot be mistaken for the one that changes
   your address. */
.acct-label {
  font-size: 11px; letter-spacing: 1.4px; color: var(--dim);
  margin: 16px 0 6px; text-transform: uppercase;
}
.acct-label.danger { color: var(--down); }
.acct-note { font-size: 12.5px; color: var(--dim-2); line-height: 1.6; margin: 8px 0 10px; }
.acct-hr { border: none; border-top: 1px solid var(--line-2); margin: 20px 0 4px; }
.acct-note + .auth-input, .acct-label + .auth-input { margin-bottom: 8px; }

/* ── help and support ──────────────────────────────────────────────────── */
.help-message {
  width: 100%; min-height: 120px; padding: 11px 12px; border-radius: 0;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  font-family: inherit; font-size: 14.5px; line-height: 1.55; outline: none;
  resize: vertical; margin-bottom: 8px;
}
.help-message:focus { border-color: var(--accent); }
.help-topic {
  width: 100%; height: 48px; padding: 0 12px; border-radius: 0;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  font-family: inherit; font-size: 15px; margin-bottom: 8px;
}
.help-topic:focus { border-color: var(--accent); outline: none; }
/* Off screen rather than display:none: something that fills every field it
   finds still finds this one, which is the whole point of it. */
.help-trap {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.auth-input + .auth-input { margin-top: 8px; }
.auth-note.good { color: var(--up); }

/* ── the reveal, big enough to hit ────────────────────────────────────── */
/* It rendered at 30 physical pixels inside the phone's 0.8 zoom, under every
   touch-target floor there is, which is why it kept being missed rather than
   pressed. Sized so it clears 44 after the zoom, and the glyph is centred in
   it rather than sitting wherever an inline SVG lands. */
.auth-eye {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; touch-action: manipulation;
}
@media (max-width: 760px) {
  .auth-eye { width: 56px; height: 56px; right: 2px; }
  .auth-pass .auth-input { padding-right: 58px; }
}

/* ── flip ─────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .mflip {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1px; width: 100%; min-height: 46px; margin-top: 6px; border-radius: 0;
    background: var(--panel); border: 1px dashed var(--line-2); color: var(--dim);
  }
  .mflip-word { font-size: 12.5px; letter-spacing: 1.4px; font-weight: 600; }
  .mflip-note { font-size: 10.5px; letter-spacing: .4px; color: var(--dim-2); }
  /* Faded, not hidden: a control nobody can see is a control nobody buys. */
  .mflip.is-locked { opacity: .45; }
  .mflip.is-armed {
    border-style: solid; border-color: var(--accent);
    background: var(--raise); color: var(--accent-ink);
  }
  .mflip.is-armed .mflip-note { color: var(--accent-ink); opacity: .8; }
}