/* Mirror Control — dark operator surface.
   Palette and rules are recorded in DESIGN.md. Colour is reserved for state,
   so an amber value on this page always means something. */

:root {
  --bg: #0f1012;
  --surface: #16181c;
  --raised: #1c1f24;
  --line: #262a31;
  --line-strong: #333942;

  --text: #e8eaed;
  --dim: #9ba1ab;
  --faint: #7c8390;

  --live: #46b37f;
  --paused: #c9973e;
  --blocked: #c75b57;
  --idle: #6e757f;
  --danger: #c0413c;
  --danger-hi: #d24a44;

  --r: 10px;
  --r-lg: 14px;
  --pad: clamp(16px, 3vw, 28px);
  --tap: 44px;

  /* Spacing scale, 4-unit base. */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;

  --ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .7);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }

/* `hidden` outranks every display rule below. Without this, .login's own
   `display: grid` wins and the sign-in panel stays visible behind the app. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.5 var(--ui);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* Browser surfaces belong to the design too. */
::selection { background: rgba(70, 179, 127, .28); color: #fff; }
:root { caret-color: var(--live); accent-color: var(--live); scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; border: 3px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

:focus-visible {
  outline: 2px solid var(--live);
  outline-offset: 2px;
  border-radius: 4px;
}

a { color: var(--text); text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
a:hover { text-decoration-color: var(--dim); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; flex: none; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- Sign in */

.login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--pad);
}

.login__panel {
  width: min(400px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 5vw, 36px);
  box-shadow: var(--shadow);
}

.login__title { margin: 0; font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; }
.login__sub { margin: 6px 0 26px; color: var(--dim); font-size: .92rem; }

/* --------------------------------------------------------------- Topbar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px var(--pad);
  padding-top: max(14px, env(safe-area-inset-top));
  background: rgba(15, 16, 18, .88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.topbar__name { margin: 0; font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em; }
.topbar__meta { margin: 2px 0 0; font-size: .76rem; color: var(--faint); }
.topbar__right { display: flex; align-items: center; gap: 10px; }
.topbar__status { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 0; }
.topbar__summary { margin: 0; font-size: .74rem; color: var(--dim); text-align: right; }
/* On a narrow phone the qualifier would push the buttons off the row. */
@media (max-width: 560px) { .topbar__summary { display: none; } }

.iconbtn {
  width: var(--tap); height: var(--tap);
  display: grid; place-items: center;
  background: transparent;
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: pointer;
  transition: color .12s var(--ease), border-color .12s var(--ease), background .12s var(--ease);
}
.iconbtn:hover { color: var(--text); border-color: var(--line-strong); background: var(--raised); }
.iconbtn:active { transform: scale(.96); }
.iconbtn[data-busy="1"] { color: var(--live); }

/* ---------------------------------------------------------------- Badge */

.badge {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 13px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: .76rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  white-space: nowrap;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

.badge--live    { color: var(--live);    border-color: rgba(70,179,127,.35);  background: rgba(70,179,127,.09); }
.badge--paused  { color: var(--paused);  border-color: rgba(201,151,62,.35);  background: rgba(201,151,62,.09); }
.badge--blocked { color: var(--blocked); border-color: rgba(199,91,87,.35);   background: rgba(199,91,87,.09); }
.badge--idle    { color: var(--faint); }

/* The one authored moment: only a genuinely live system breathes. */
.badge--live .dot { animation: breathe 3.4s var(--ease) infinite; }
@keyframes breathe {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(70,179,127,.45); }
  50%      { opacity: .72; box-shadow: 0 0 0 5px rgba(70,179,127,0); }
}

/* ----------------------------------------------------------------- Page */

.page {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--pad);
  padding-bottom: max(var(--pad), env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 44px);
}

.block { animation: rise .4s var(--ease) both; min-width: 0; }
.block:nth-child(2) { animation-delay: .04s; }
.block:nth-child(3) { animation-delay: .08s; }
.block:nth-child(4) { animation-delay: .12s; }
.split .block:nth-child(2) { animation-delay: .14s; }
.block--last { animation-delay: .18s; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.block__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.block__head .h { margin: 0; }

.h {
  margin: 0 0 14px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--faint);
}

.subh {
  margin: 0 0 var(--s2);
  font-size: .72rem; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
  color: var(--faint);
}

.label {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ------------------------------------------------------------- Overview */
/* One surface, ruled into cells. Each cell draws its own right and bottom
   rule, so an incomplete last row stays clean instead of showing grey holes. */

.overview {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
@media (min-width: 620px) { .overview { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .overview { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.ov {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
  padding: var(--s4) var(--s4) 15px;
  box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line);
}
/* Labels wrap rather than truncate: "Automatic Margin Sync" must read whole. */
.ov .label { line-height: 1.3; overflow-wrap: anywhere; }
.ov__v {
  margin: 0;
  font-size: 1.28rem; font-weight: 650; letter-spacing: -.015em; line-height: 1.15;
  color: var(--text);
}
.ov__v--live    { color: var(--live); }
.ov__v--paused  { color: var(--paused); }
.ov__v--blocked { color: var(--blocked); }
.ov__v--idle    { color: var(--dim); }
.ov__note { margin: 0; font-size: .76rem; color: var(--dim); line-height: 1.4; }
.ov--loading .ov__v { color: var(--line-strong); }

/* --------------------------------------------------------- Symbol panels */

.symbols { display: grid; grid-template-columns: 1fr; gap: var(--s4); align-items: start; }
@media (min-width: 900px) { .symbols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(17px, 2.4vw, 22px);
  display: flex; flex-direction: column; gap: var(--s4);
  box-shadow: var(--shadow);
  min-width: 0;
}

.panel--loading { min-height: 290px; position: relative; overflow: hidden; }
.shimmer { position: absolute; inset: 0; background:
  linear-gradient(100deg, transparent 20%, rgba(255,255,255,.035) 45%, transparent 70%);
  background-size: 220% 100%; animation: sweep 1.5s linear infinite; }
@keyframes sweep { to { background-position: -220% 0; } }

.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel__sym { margin: 0; font-size: 1.16rem; font-weight: 600; letter-spacing: -.01em; }

/* Three facts on one ruled line: multiplier, leverage, parity. */
.kv {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3);
  margin: 0;
}
.kv > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.kv dd { margin: 0; font-size: 1.12rem; font-weight: 600; }
.kv__v--ok { color: var(--live); }
.kv__v--bad { color: var(--blocked); }

/* Positions: a real table, three narrow columns, so it never needs to scroll. */
.pos { width: 100%; border-collapse: collapse; font-size: .92rem; }
.pos th, .pos td { padding: 9px 0; border-top: 1px solid var(--line); text-align: right; }
.pos thead th {
  border-top: none; padding-top: 0;
  font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
}
.pos th[scope="row"] { text-align: left; font-weight: 500; color: var(--text); }
.pos th[scope="row"] span { display: block; font-size: .72rem; font-weight: 400; color: var(--faint); }
.pos td { font-family: var(--mono); font-variant-numeric: tabular-nums; width: 30%; }
.pos tr.pos__expected th, .pos tr.pos__expected td { color: var(--dim); }

/* The client's own legacy position: a quiet ruled band, never a nested card,
   never red. Protected is the system working. */
.legacy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--s3);
  row-gap: 2px;
  padding: var(--s3) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.legacy__icon { grid-row: span 3; color: var(--dim); margin-top: 1px; }
.legacy__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.legacy__label { font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.legacy__pos { margin: 0; font-size: 1.02rem; font-weight: 600; }
.legacy__why { margin: 0; font-size: .82rem; color: var(--dim); line-height: 1.45; max-width: 60ch; }

.tag {
  font-size: .66rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px; border: 1px solid var(--line); color: var(--faint);
  white-space: nowrap;
}
.tag--protected { color: var(--text); border-color: var(--line-strong); background: var(--raised); }
.tag--critical { color: var(--blocked); border-color: rgba(199,91,87,.4); background: rgba(199,91,87,.08); }
.tag--error { color: var(--paused); border-color: rgba(201,151,62,.4); background: rgba(201,151,62,.08); }
.tag--test { color: var(--faint); }

.held { margin: 0; font-size: .84rem; color: var(--paused); }

/* The blocker callout: the first thing read inside a panel that has a problem. */
.callout {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 13px 15px;
  background: var(--raised);
}
.callout__title { margin: 0 0 4px; font-size: .95rem; font-weight: 600; }
.callout__body { margin: 0; font-size: .88rem; color: var(--dim); line-height: 1.5; }
.callout__link {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--tap); margin-top: 4px;
  font-size: .86rem; font-weight: 600;
}
.callout__link .icon { width: 16px; height: 16px; }

.callout--paused  { border-color: rgba(201,151,62,.4);  background: rgba(201,151,62,.08); }
.callout--paused .callout__title  { color: var(--paused); }
.callout--blocked { border-color: rgba(199,91,87,.4);   background: rgba(199,91,87,.08); }
.callout--blocked .callout__title { color: var(--blocked); }
.callout--live    { border-color: rgba(70,179,127,.4);  background: rgba(70,179,127,.08); }
.callout--live .callout__title    { color: var(--live); }

.others { margin-top: var(--s6); }

/* A disabled control always travels with the sentence explaining itself. */
.actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px 14px;
  align-items: start;
}
.action { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.action .btn { width: 100%; }
.hint { font-size: .78rem; color: var(--faint); line-height: 1.45; }

.footnote { margin: 0; font-size: .76rem; color: var(--faint); line-height: 1.45; }
.reason { margin: 0; font-size: .9rem; color: var(--dim); }
.reason strong { color: var(--text); font-weight: 600; }

/* ------------------------------------------------------------- Row lists */

.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }

.row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.row__main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.row__title { font-size: .95rem; font-weight: 600; }
.row__note { font-size: .84rem; color: var(--dim); overflow-wrap: anywhere; }
.row__time { font-size: .74rem; color: var(--faint); white-space: nowrap; padding-top: 2px; }

.rows--compact .row { padding: 10px 0; align-items: center; }
.rows--compact .badge { height: 28px; font-size: .68rem; padding: 0 10px; }

.row--empty { color: var(--faint); font-size: .89rem; padding: 22px 0; justify-content: center; }

/* Not-trading instruments are deliberately recessive against the live pair. */
.row--quiet .row__title { color: var(--dim); font-weight: 500; }
.row--quiet .row__note { color: var(--faint); }

/* The healthy empty state for alerts: reassuring, not blank. */
.row--ok {
  display: flex; align-items: center; justify-content: flex-start; gap: 9px;
  color: var(--live); font-size: .9rem; font-weight: 500;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}

.split { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 44px); }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }

/* ---------------------------------------------------- Automatic margin sync */

.sync {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(17px, 2.4vw, 22px);
  display: flex; flex-direction: column; gap: var(--s4);
  box-shadow: var(--shadow);
}
.sync__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.sync__heading { min-width: 0; flex: 1 1 28ch; }
.sync__title { margin: 0; font-size: 1.16rem; font-weight: 600; letter-spacing: -.01em; }
.sync__detail { margin: 4px 0 0; font-size: .88rem; color: var(--dim); max-width: 70ch; }
.sync__state { height: 38px; font-size: .86rem; padding: 0 16px; }

/* Four legs on a ruled grid inside the panel: cells, not cards. */
.leggrid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr;
  border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden;
}
@media (min-width: 620px) { .leggrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .leggrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.leg {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px var(--s4);
  box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line);
  min-width: 0;
}
.leg__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.leg__title { font-size: .98rem; font-weight: 600; }
.leg__status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: .78rem; font-weight: 700; letter-spacing: .08em;
}
.leg__status .icon { width: 15px; height: 15px; }
.leg__summary { margin: 0; font-size: .84rem; color: var(--dim); line-height: 1.4; }

.leg--on .leg__status { color: var(--live); }
.leg--ready .leg__status { color: var(--text); }
.leg--blocked .leg__status, .leg--off .leg__status { color: var(--faint); }
.leg--blocked .leg__title { color: var(--dim); }

.sync__foot { display: flex; flex-direction: column; gap: var(--s3); }
.sync__actions { display: grid; grid-template-columns: 1fr; gap: var(--s3); }
@media (min-width: 620px) { .sync__actions { grid-template-columns: minmax(0, 320px); } }

/* The per-leg verdict inside the confirmation dialog. */
.verdict {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .09em;
  font-weight: 600;
  white-space: nowrap;
  padding-top: 2px;
}
.verdict--enable { color: var(--live); }
.verdict--blocked { color: var(--faint); }

/* --------------------------------------------------------------- Activity */

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); padding: 2px; gap: 2px; }
.seg__btn {
  min-height: var(--tap); padding: 0 14px;
  background: transparent; color: var(--dim);
  border: 0; border-radius: 7px;
  font: 600 .82rem/1 var(--ui);
  cursor: pointer;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.seg__btn:hover { color: var(--text); }
.seg__btn[aria-pressed="true"] { background: var(--raised); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }

.acts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.act { border-bottom: 1px solid var(--line); }
.act__row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--s3);
  padding: 12px 0;
  min-height: var(--tap);
}
details.act__wrap > summary { list-style: none; cursor: pointer; }
details.act__wrap > summary::-webkit-details-marker { display: none; }
details.act__wrap > summary:hover .act__title { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.act__kind {
  font-size: .64rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); padding-top: 3px;
}
.act__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.act__title { font-size: .92rem; font-weight: 600; }
.act__note { font-size: .82rem; color: var(--dim); overflow-wrap: anywhere; }
.act__time { font-size: .74rem; color: var(--faint); white-space: nowrap; padding-top: 2px; display: inline-flex; align-items: center; gap: 4px; }
.act__chev { width: 14px; height: 14px; transition: transform .16s var(--ease); }
details[open] .act__chev { transform: rotate(90deg); }
.act--ok .act__kind { color: var(--live); }
.act--warn .act__kind { color: var(--paused); }
.act--warn .act__title { color: var(--text); }

.act__detail {
  margin: 0 0 12px calc(64px + var(--s3));
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px var(--s4);
  font-size: .8rem;
}
.act__detail dt { color: var(--faint); }
.act__detail dd { margin: 0; color: var(--dim); font-family: var(--mono); overflow-wrap: anywhere; }

@media (max-width: 480px) {
  .act__row { grid-template-columns: minmax(0, 1fr) auto; }
  .act__kind { grid-column: 1 / -1; padding-top: 0; }
  .act__detail { margin-left: 0; }
}

/* ---------------------------------------------------------- Diagnostics */

.diag { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.diag__summary {
  list-style: none;
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  min-height: 56px; padding: var(--s3) var(--s4);
  cursor: pointer;
}
.diag__summary::-webkit-details-marker { display: none; }
.diag__chev { color: var(--faint); transition: transform .16s var(--ease); }
.diag[open] .diag__chev { transform: rotate(90deg); }
.diag__title { font-size: .95rem; font-weight: 600; }
.diag__hint { font-size: .8rem; color: var(--faint); }

.diag__body {
  border-top: 1px solid var(--line);
  padding: var(--s4);
  display: grid; grid-template-columns: 1fr; gap: var(--s6);
}
@media (min-width: 900px) { .diag__body { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s8); } }

.dg__title { margin: 0 0 var(--s2); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.dg__list { margin: 0; border-top: 1px solid var(--line); }
.dg__row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--s3); padding: 7px 0; border-bottom: 1px solid var(--line);
  font-size: .8rem;
}
.dg__row dt { color: var(--dim); font-family: var(--mono); overflow-wrap: anywhere; }
.dg__row dd { margin: 0; color: var(--text); font-family: var(--mono); overflow-wrap: anywhere; }

/* ---------------------------------------------------------- Danger zone */

.danger {
  border: 1px solid rgba(192, 65, 60, .38);
  border-radius: var(--r-lg);
  background: rgba(192, 65, 60, .035);
  padding: clamp(17px, 2.4vw, 24px);
  display: flex; flex-direction: column; gap: var(--s4);
}
.danger__title {
  margin: 0; display: flex; align-items: center; gap: var(--s2);
  font-size: 1.02rem; font-weight: 600; color: var(--danger-hi);
}
.danger__lede { margin: 6px 0 0; font-size: .86rem; color: var(--dim); max-width: 70ch; }

.dz { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(192, 65, 60, .2); }
.dz__row {
  display: grid; grid-template-columns: 1fr;
  gap: var(--s3); padding: 14px 0;
  border-bottom: 1px solid rgba(192, 65, 60, .2);
}
@media (min-width: 620px) {
  .dz__row { grid-template-columns: minmax(0, 1fr) minmax(0, 240px); align-items: center; }
}
.dz__title { margin: 0; font-size: .94rem; font-weight: 600; }
.dz__note { margin: 3px 0 0; font-size: .82rem; color: var(--dim); }

.stopzone {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s4);
  padding-top: var(--s2);
}
.stopzone__text { min-width: 0; flex: 1 1 30ch; }
.stopzone__title { margin: 0 0 4px; font-size: .95rem; font-weight: 600; }
.stopzone__copy { margin: 0; max-width: 62ch; font-size: .86rem; color: var(--dim); }

/* -------------------------------------------------------------- Controls */

.btn {
  min-height: var(--tap);
  padding: 0 18px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--raised);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  font: 600 .92rem/1 var(--ui);
  cursor: pointer;
  transition: background .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease);
}
.btn:hover:not(:disabled) { background: #23272e; border-color: #414852; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .42; cursor: not-allowed; }

.btn--primary { background: var(--text); color: #101114; border-color: var(--text); }
.btn--primary:hover:not(:disabled) { background: #fff; border-color: #fff; }

.btn--danger { background: transparent; color: var(--danger-hi); border-color: rgba(192,65,60,.5); }
.btn--danger:hover:not(:disabled) { background: rgba(192,65,60,.12); border-color: var(--danger); }

/* STOP: the only filled, saturated button on the page. Never an everyday control. */
.btn--stop {
  min-height: 52px; padding: 0 22px;
  background: var(--danger); color: #fff; border-color: var(--danger);
  letter-spacing: .06em;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px -10px rgba(192,65,60,.9);
}
.btn--stop:hover:not(:disabled) { background: var(--danger-hi); border-color: var(--danger-hi); }

.btn--block { width: 100%; margin-top: 6px; }

/* ----------------------------------------------------------------- Forms */

.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }

.input {
  min-height: var(--tap);
  width: 100%;
  padding: 10px 13px;
  background: var(--raised);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  font: 400 1rem/1.4 var(--ui);
  transition: border-color .12s var(--ease);
}
.input:hover { border-color: #414852; }
.input:focus { border-color: var(--live); outline: none; box-shadow: 0 0 0 3px rgba(70,179,127,.16); }
.input::placeholder { color: var(--faint); }

.help { margin: 0; font-size: .79rem; color: var(--faint); }

.notice {
  margin: 0 0 16px;
  padding: 11px 13px;
  border-radius: var(--r);
  font-size: .87rem;
  border: 1px solid var(--line);
  background: var(--raised);
  color: var(--dim);
}
.notice--bad  { color: #e79a97; border-color: rgba(199,91,87,.45);  background: rgba(199,91,87,.1); }
.notice--warn { color: #e0b978; border-color: rgba(201,151,62,.45); background: rgba(201,151,62,.1); }
.notice--ok   { color: #7fcfa6; border-color: rgba(70,179,127,.45); background: rgba(70,179,127,.1); }
.notice--info { color: inherit; border-color: rgba(127,127,127,.35); background: rgba(127,127,127,.08); }
/* A required acknowledgement (2026-09-29): a whole-row tap target, at least 44 px. */
.ack { display: flex; align-items: center; gap: .6rem; min-height: 44px; margin-top: .6rem; cursor: pointer; }
.ack input { width: 22px; height: 22px; flex: none; }

.confirmbox {
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  padding: 14px;
  margin-bottom: 18px;
  background: var(--raised);
}
.confirmbox__text { margin: 0; font-size: .88rem; color: var(--dim); }
.confirmbox__text strong { color: var(--text); }

/* ---------------------------------------------------------------- Modals */

.modal {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
  padding: 0;
  width: min(480px, calc(100vw - 32px));
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8);
}
.modal::backdrop { background: rgba(8, 9, 10, .68); backdrop-filter: blur(3px); }
.modal__body { padding: clamp(20px, 3.5vw, 28px); }
.modal__title { margin: 0 0 8px; font-size: 1.12rem; font-weight: 600; letter-spacing: -.01em; }
.modal__lede { margin: 0 0 20px; font-size: .9rem; color: var(--dim); }
.modal__actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.modal__actions .btn { flex: 1 1 auto; }
@media (min-width: 520px) { .modal__actions .btn { flex: 0 0 auto; } }

/* --------------------------------------------------------------- Motion */

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

/* ------------------------------------------------ Insights (2026-09-27)
   Today, mirror time, recent fills and alert history. Built on the existing
   tokens: colour still means state, and nothing here restyles a badge, banner,
   callout or notice, so every warning keeps its exact prominence. */

.topbar__tz { margin: 2px 0 0; font-size: .72rem; color: var(--faint); }

.h__note { margin-left: var(--s2); font-size: .74rem; font-weight: 400; color: var(--faint); letter-spacing: 0; text-transform: none; }

/* Coin marks: bundled SVGs, or a letter badge when none exists. */
.coin {
  width: 20px; height: 20px; flex: none;
  border-radius: 50%;
  vertical-align: -4px;
  margin-right: var(--s2);
}
.coin--letter {
  display: inline-grid; place-items: center;
  background: var(--raised); border: 1px solid var(--line-strong);
  color: var(--dim); font-size: .66rem; font-weight: 600;
}
.panel__sym { display: flex; align-items: center; }
.row__title { display: flex; align-items: center; }

/* Margin sync collapsed to one line on a cross-margin account. */
.naline {
  margin: 0; padding: var(--s3) var(--s4);
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); color: var(--dim); font-size: .88rem;
}

/* Today: one row per instrument, mirror time beside it. */
.today { display: grid; grid-template-columns: 1fr; gap: var(--s4); }
@media (min-width: 900px) { .today { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; } }

.daylist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.day {
  display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
  gap: 6px var(--s4); align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.day--empty { display: block; color: var(--faint); font-size: .89rem; }
.day__name { display: flex; align-items: center; font-weight: 600; }
.day__figs { display: flex; flex-wrap: wrap; gap: 4px var(--s4); font-size: .88rem; color: var(--dim); }
.day__ok.is-ok { color: var(--live); }
.day__flags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.day__flags:empty { display: none; }
@media (min-width: 620px) {
  .day { grid-template-columns: minmax(110px, auto) minmax(0, 1fr) auto; }
  .day__flags { grid-column: auto; justify-content: flex-end; }
}

.flag {
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: .72rem; font-weight: 600; white-space: nowrap;
}
.flag--info { color: var(--dim); }
.flag--warn { color: var(--paused);  border-color: rgba(201,151,62,.4); background: rgba(201,151,62,.08); }
.flag--bad  { color: var(--blocked); border-color: rgba(199,91,87,.4);  background: rgba(199,91,87,.08); }

.stat {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); padding: var(--s4);
  display: flex; flex-direction: column; gap: var(--s3);
}
.stat:empty { display: none; }
.stat .subh { margin: 0; }
.stat__nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin: 0; }
.stat__nums dd { margin: 2px 0 0; }
.stat__v { font-size: 1.5rem; font-weight: 600; color: var(--text); }
.stat__n, .stat__none { margin: 0; font-size: .82rem; color: var(--dim); }

/* Recent fills: a table on wide screens, stacked cards on phones. */
.fillwrap { overflow-x: auto; }
.fills { width: 100%; border-collapse: collapse; font-size: .86rem; }
.fills th {
  text-align: left; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint); padding: 0 var(--s3) 8px 0; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.fills td { padding: 9px var(--s3) 9px 0; border-bottom: 1px solid var(--line); color: var(--dim); white-space: nowrap; }
.fills td.fills__sym { color: var(--text); font-weight: 600; }
.fills__sym { display: flex; align-items: center; }
.fills tr.is-attn td.fills__status { color: var(--paused); font-weight: 600; }

@media (max-width: 640px) {
  .fillwrap { overflow: visible; }
  .fills thead { display: none; }
  .fills, .fills tbody, .fills tr, .fills td { display: block; width: 100%; }
  .fills tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .fills td { border: 0; padding: 2px 0; display: flex; justify-content: space-between; gap: var(--s3); white-space: normal; }
  .fills td::before { content: attr(data-label); color: var(--faint); font-size: .76rem; }
  .fills td.fills__sym::before { content: none; }
}

/* Alert history: resolved rows are quiet, open ones keep the critical tag. */
.tag--resolved { color: var(--dim); border-color: var(--line-strong); background: transparent; }
.hist .row__note + .row__note { color: var(--faint); }

/* ======================================================= Redesign 2026-09-27
   Same tokens, same radii (--r / --r-lg), colour only for state, and every
   state also in words. Phones get the System overview and folding cards;
   wide screens keep their layout. */

.tag--warn { color: var(--paused); border-color: rgba(201,151,62,.4); background: rgba(201,151,62,.08); }

/* Compact header: title, pill, refresh, sign out; the zone as a short label. */
.topbar__zone { color: var(--faint); }
@media (max-width: 767px) {
  .topbar { padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: 10px; }
  .topbar__tz { display: none; }
  .topbar__right { gap: 8px; }
  .topbar .badge { height: var(--tap); }
}
@media (min-width: 768px) { .topbar__zone { display: none; } }

/* System overview: phones only. The overview strip is the wide-screen form. */
.sysov { display: block; }
@media (min-width: 768px) { .sysov { display: none; } }
@media (max-width: 767px) { .ovblock { display: none; } }

.sysov__word { margin: 0; font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.sysov__word--live { color: var(--live); }
.sysov__word--paused { color: var(--paused); }
.sysov__word--blocked { color: var(--blocked); }
.sysov__word--idle { color: var(--dim); }
.sysov__summary { margin: 4px 0 0; color: var(--dim); font-size: .92rem; }
.sysov__seen { margin: 4px 0 0; color: var(--paused); font-size: .86rem; font-weight: 600; }
/* The backup line: quiet when verified, coloured and bold only when not. */
.sysov__backup { margin: 6px 0 0; color: var(--dim); font-size: .86rem; }
.sysov__backup--paused { color: var(--paused); font-weight: 600; }
.sysov__backup--blocked { color: var(--blocked); font-weight: 600; }

.symgrid {
  list-style: none; margin: var(--s4) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2);
}
.tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 12px; min-height: var(--tap); min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.tile--empty { grid-column: 1 / -1; color: var(--faint); }
.tile__name { display: flex; align-items: center; font-weight: 600; font-size: .95rem; }
.tile__state { font-weight: 700; font-size: .9rem; letter-spacing: .02em; }
.tile--live .tile__state { color: var(--live); }
.tile--paused .tile__state { color: var(--paused); }
.tile--blocked .tile__state { color: var(--blocked); }
.tile--idle .tile__state { color: var(--dim); }
.tile--paused, .tile--blocked { border-color: var(--line-strong); }
.tile--blocked { box-shadow: inset 3px 0 0 var(--blocked); }
.tile--paused { box-shadow: inset 3px 0 0 var(--paused); }
.tile__pos { font-size: .8rem; color: var(--text); overflow-wrap: anywhere; }
.tile__meta { font-size: .76rem; color: var(--faint); }

/* Instrument cards are <details>: fold on phones, always open on wide screens. */
details.panel > summary { list-style: none; cursor: pointer; min-height: var(--tap); }
details.panel > summary::-webkit-details-marker { display: none; }
.panel__head { flex-wrap: wrap; }
.panel__right { display: inline-flex; align-items: center; gap: var(--s2); margin-left: auto; }
.panel__pos { font-size: .82rem; color: var(--dim); display: none; }
.panel__chev { width: 16px; height: 16px; color: var(--faint); transition: transform .16s var(--ease); }
details.panel[open] .panel__chev { transform: rotate(90deg); }
@media (max-width: 767px) {
  .panel__pos { display: block; order: 3; flex-basis: 100%; }
  details.panel:not([open]) { gap: 0; }
}
@media (min-width: 768px) {
  .panel__chev { display: none; }
  details.panel > summary { cursor: default; }
}

/* Activity: actual time first, the relative time after it. */
.act__abs { color: var(--dim); }
.act__rel::before { content: "("; }
.act__rel::after { content: ")"; }
.act__title { display: flex; align-items: center; flex-wrap: wrap; overflow-wrap: anywhere; }
.act__note--warn { color: var(--paused); font-weight: 600; }
.act__wrap .fills { margin: 0 0 12px calc(64px + var(--s3)); width: calc(100% - 64px - var(--s3)); }
@media (max-width: 480px) {
  .act__time { flex-wrap: wrap; justify-content: flex-end; }
  .act__wrap .fills { margin-left: 0; width: 100%; }
}

/* Alert history: brief catch-ups are muted; a real incident keeps a warning. */
.hist--brief .row__title { color: var(--dim); font-weight: 500; }
.hist--real { box-shadow: inset 3px 0 0 var(--paused); padding-left: 10px; }
.hist--open { box-shadow: inset 3px 0 0 var(--blocked); padding-left: 10px; }

/* Nothing may push the page sideways at 360 px. */
.page, .block { min-width: 0; }
.row__title, .row__note { overflow-wrap: anywhere; }

/* Phone header: two compact rows. Title, time and buttons; then the pill. */
@media (max-width: 767px) {
  .topbar { flex-wrap: wrap; row-gap: 8px; }
  .topbar__right { display: contents; }
  .topbar__id { order: 1; flex: 1 1 auto; min-width: 0; }
  #refresh { order: 2; }
  #signout { order: 3; }
  .topbar__status { order: 4; flex-basis: 100%; flex-direction: row; align-items: center; }
  .topbar__name, .topbar__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Activity: the coin sits in front of the words, not above them. */
.act__title { display: block; }
.act__title .coin { vertical-align: -4px; }

/* An order's fills on a phone: two lines each, not five labelled rows. */
@media (max-width: 640px) {
  .act__wrap .fills tr {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "time time status" "bybit bitget mirror";
    column-gap: var(--s2); padding: 8px 0;
  }
  .act__wrap .fills td { display: block; padding: 0; white-space: nowrap; }
  .act__wrap .fills td::before { content: none; }
  .act__wrap .fills td:nth-child(1) { grid-area: time; }
  .act__wrap .fills td:nth-child(2) { grid-area: bybit; }
  .act__wrap .fills td:nth-child(3) { grid-area: bitget; overflow: hidden; text-overflow: ellipsis; }
  .act__wrap .fills td:nth-child(3)::before { content: "\2192  "; color: var(--faint); }
  .act__wrap .fills td:nth-child(4) { grid-area: status; text-align: right; }
  .act__wrap .fills td:nth-child(5) { grid-area: mirror; text-align: right; }
}

/* ================================================== Overview refresh 2026-09-27
   Wide screens only (the overview is hidden on phones). Status cells in their
   own row; instruments in a balanced grid whose rows are always full. A
   coloured left edge reads at a glance; the state is always written too.
   No transitions and no motion: the only movement is the jump to a card,
   which is instant under reduced motion. */

/* Five status cells since 2026-09-28 (system, trading, margin, backup, last
   refreshed): one full row, no empty cell. */
@media (min-width: 620px) { .overview { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.ov--live { box-shadow: inset 3px 0 0 var(--live), 1px 0 0 var(--line), 0 1px 0 var(--line); }
.ov--paused { box-shadow: inset 3px 0 0 var(--paused), 1px 0 0 var(--line), 0 1px 0 var(--line); }
.ov--blocked { box-shadow: inset 3px 0 0 var(--blocked), 1px 0 0 var(--line), 0 1px 0 var(--line); }
.ov--idle { box-shadow: inset 3px 0 0 var(--idle), 1px 0 0 var(--line), 0 1px 0 var(--line); }

.ovsym {
  --per: 7;
  list-style: none; margin: var(--s3) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s2);
}
.ovt {
  flex: 1 1 calc((100% - (var(--per) - 1) * var(--s2)) / var(--per));
  min-width: 0;
  display: flex;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: inset 3px 0 0 var(--idle);
}
.ovt--live { box-shadow: inset 3px 0 0 var(--live); }
.ovt--paused { box-shadow: inset 3px 0 0 var(--paused); border-color: var(--line-strong); }
.ovt--blocked { box-shadow: inset 3px 0 0 var(--blocked); border-color: var(--line-strong); }
.ovt--empty { padding: var(--s4); color: var(--faint); flex-basis: 100%; }
/* Hover and focus belong to the tile, not the link: the tile's own background
   fills exactly within its radius and its inset edge always paints above it,
   so the edge is the same in every state. The link carries no background. */
.ovt:hover { background: var(--raised); }
.ovt:has(> .ovt__link:focus-visible) { outline: 2px solid var(--live); outline-offset: 2px; }
.ovt__link {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
  min-height: var(--tap);
  padding: 12px var(--s4) 12px calc(var(--s4) + 2px);
  color: inherit; text-decoration: none;
}
.ovt__link:focus-visible { outline: 2px solid var(--live); outline-offset: -2px; border-radius: calc(var(--r) - 1px); }
@supports selector(:has(a)) { .ovt__link:focus-visible { outline: none; } }
.ovt__name { display: flex; align-items: center; font-weight: 600; font-size: .95rem; }
.ovt__v { font-size: 1.15rem; font-weight: 650; letter-spacing: -.01em; }
.ovt--live .ovt__v { color: var(--live); }
.ovt--paused .ovt__v { color: var(--paused); }
.ovt--blocked .ovt__v { color: var(--blocked); }
.ovt--idle .ovt__v { color: var(--dim); }
/* Each note line is a whole phrase: it never breaks mid-phrase, and a tile too
   narrow for it ends the line with an ellipsis rather than wrapping. */
.ovt__note { font-size: .78rem; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ovt__note + .ovt__note { margin-top: -4px; }

/* A card reached from a tile lands below the sticky header, not under it. */
.panel { scroll-margin-top: 88px; }

/* ================================================== Improvements 2026-10-01
   Same tokens. Colour still means state and every state is also in words;
   nothing here restyles a badge, banner, callout or notice. */

/* Six status cells (system, trading, margin, backup, off-server, last
   refreshed): two full rows of three, or one row of six. */
@media (min-width: 620px) { .overview { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .overview { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Safety test: the tracker's verdicts, a bar, and the numbers in words. */
.safety__card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3);
  box-shadow: inset 3px 0 0 var(--idle), var(--shadow);
}
.safety__card--live { box-shadow: inset 3px 0 0 var(--live), var(--shadow); }
.safety__card--paused { box-shadow: inset 3px 0 0 var(--paused), var(--shadow); border-color: var(--line-strong); }
.safety__card--blocked { box-shadow: inset 3px 0 0 var(--blocked), var(--shadow); border-color: var(--line-strong); }
.safety__top { display: flex; flex-direction: column; gap: var(--s2); }
.safety__head { margin: 0; font-size: 1.28rem; font-weight: 650; letter-spacing: -.015em; }
.safety__card--blocked .safety__head { color: var(--blocked); }
.safety__bar { height: 8px; border-radius: 99px; background: var(--raised); border: 1px solid var(--line); overflow: hidden; }
.safety__fill { display: block; height: 100%; background: var(--live); border-radius: 99px; }
.safety__card--blocked .safety__fill { background: var(--blocked); }
.safety__nums { margin: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); }
.safety__num { display: flex; flex-direction: column; gap: 2px; }
.safety__num dd { margin: 0; font-size: 1.1rem; font-weight: 600; }
.safety__num--ok dd { color: var(--live); }
.safety__num--warn dd { color: var(--paused); }
.safety__num--bad dd { color: var(--blocked); }
.safety__meta, .safety__est { margin: 0; font-size: .84rem; color: var(--dim); overflow-wrap: anywhere; }
.safety__warn { margin: 0; font-size: .86rem; font-weight: 600; color: var(--paused); }
.safety__bad { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.safety__bad li { padding: 8px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.safety__badpos { font-weight: 600; color: var(--blocked); font-size: .88rem; }
.safety__why { font-size: .82rem; color: var(--dim); overflow-wrap: anywhere; }

/* A pending multiplier change: information, quiet, never a warning colour. */
.pending {
  border: 1px solid var(--line-strong); border-radius: var(--r);
  padding: 10px 13px; background: var(--raised);
}
.pending__line { margin: 0; font-size: .9rem; font-weight: 600; }
.pending__cancel { margin: 3px 0 0; font-size: .82rem; color: var(--dim); line-height: 1.45; }
.tile__pending { font-size: .76rem; font-weight: 600; color: var(--text); }
.dz__row--pending .dz__note { color: var(--text); }

/* Flat, healthy instruments on a wide screen: one line, full width, that opens
   on a click. Phones keep folding cards exactly as before. */
.panel__line { display: none; }
@media (min-width: 768px) {
  .panel--compact { grid-column: 1 / -1; padding-top: 10px; padding-bottom: 10px; }
  .panel--compact > summary { cursor: pointer; }
  .panel--compact .panel__chev { display: inline-block; }
  .panel--compact .panel__head { flex-wrap: nowrap; }
  .panel--compact .panel__sym { font-size: 1rem; flex: none; }
  .panel--compact .panel__line {
    display: flex; align-items: baseline; gap: var(--s4); min-width: 0;
    font-size: .86rem; color: var(--dim);
  }
  .panel--compact .panel__line > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .panel__pend { color: var(--text); font-weight: 600; }
}

/* Today on a phone: instruments with no fills and nothing flagged share one
   line. Wide screens keep a row each. */
.day--zeros { display: none; }
.day__zeros { grid-column: 1 / -1; color: var(--dim); font-size: .88rem; }
@media (max-width: 767px) {
  .day--zero { display: none; }
  .day--zeros { display: grid; }
}

/* Alert history: older resolved rows behind "Show older". */
.older { margin-top: var(--s2); }
.older__summary {
  list-style: none; cursor: pointer; min-height: var(--tap);
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: .86rem; font-weight: 600; color: var(--dim);
}
.older__summary::-webkit-details-marker { display: none; }
.older__chev { width: 16px; height: 16px; color: var(--faint); }
.older[open] .older__chev { transform: rotate(90deg); }

/* Bitget free margin (2026-10-01): one ruled line; colour only for state. */
.mline {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s3);
  margin: 0 0 var(--s4); padding: 10px var(--s4);
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  box-shadow: inset 3px 0 0 var(--idle);
}
.mline--live { box-shadow: inset 3px 0 0 var(--live); }
.mline--paused { box-shadow: inset 3px 0 0 var(--paused); border-color: var(--line-strong); }
.mline--blocked { box-shadow: inset 3px 0 0 var(--blocked); border-color: var(--line-strong); }
.mline__v { font-weight: 650; }
.mline--blocked .mline__v { color: var(--blocked); }
.mline--paused .mline__v { color: var(--paused); }
.mline__note { font-size: .84rem; color: var(--dim); flex-basis: 100%; overflow-wrap: anywhere; }
.mline--blocked .mline__note { color: var(--blocked); font-weight: 600; }
.room { margin: 0; font-size: .84rem; color: var(--dim); }

/* ================================================ Redesign round 2 (2026-10-01)
   Wide screens: a sticky status sidebar beside one main column. Phones: a slim
   top bar, four bottom tabs, and a warning banner on every tab. Same tokens,
   one radius scale (--r / --r-lg), colour only for state and always with a
   word. No transitions and no animation are added here. */

:root { --head-h: 64px; --side-w: 300px; --tabs-h: 60px; }

/* The header is solid: content never reads through it, and every jump lands
   below it (its height is measured, not guessed). */
html { scroll-padding-top: calc(var(--head-h) + 12px); }
.topbar { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
.panel { scroll-margin-top: calc(var(--head-h) + 12px); }

/* ------------------------------------------------------------ the shell */
.shell { width: 100%; max-width: 1480px; margin: 0 auto; }
.shell > .page { max-width: none; }

.side {
  padding: var(--s4) var(--pad) 0;
  display: flex; flex-direction: column; gap: var(--s3);
  min-width: 0;
}
.side > * { flex-shrink: 0; }
.side__word { margin: 0; font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.side__word--live { color: var(--live); }
.side__word--paused { color: var(--paused); }
.side__word--blocked { color: var(--blocked); }
.side__word--idle { color: var(--dim); }
.side__summary { margin: -4px 0 0; color: var(--dim); font-size: .9rem; line-height: 1.45; }
.side__seen { margin: -4px 0 0; color: var(--paused); font-size: .84rem; font-weight: 600; }

/* Status rows: label, value in words, note. A coloured edge reads at a glance. */
.srows {
  margin: 0; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden;
}
.srow {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 14px 10px 16px;
  border-bottom: 1px solid var(--line);
  box-shadow: inset 3px 0 0 var(--idle);
  min-width: 0;
}
.srow:last-child { border-bottom: 0; }
.srow--live { box-shadow: inset 3px 0 0 var(--live); }
.srow--paused { box-shadow: inset 3px 0 0 var(--paused); }
.srow--blocked { box-shadow: inset 3px 0 0 var(--blocked); }
.srow dd { margin: 0; }
.srow__v { font-size: 1.02rem; font-weight: 650; letter-spacing: -.01em; overflow-wrap: anywhere; }
.srow__v--live { color: var(--live); }
.srow__v--paused { color: var(--paused); }
.srow__v--blocked { color: var(--blocked); }
.srow__v--idle { color: var(--text); }
.srow__note { font-size: .78rem; color: var(--dim); line-height: 1.4; overflow-wrap: anywhere; }
.srow__note--warn { color: var(--paused); font-weight: 600; }
.srow__note--bad { color: var(--blocked); font-weight: 600; }
/* An excluded position is neutral by the operator's decision: grey, never red or amber. */
.srow__note--neutral { color: var(--dim); }
.srow--loading .srow__v { color: var(--line-strong); }
.srow__bad { display: flex; flex-direction: column; gap: 1px; padding-top: 4px; border-top: 1px solid var(--line); margin-top: 2px; }
.srow__badpos { font-size: .8rem; font-weight: 600; color: var(--blocked); }
.srow__why { font-size: .76rem; color: var(--dim); overflow-wrap: anywhere; }
.srow__excl { display: flex; flex-direction: column; gap: 1px; padding-top: 4px; border-top: 1px solid var(--line); margin-top: 2px; }
.srow__exclpos { font-size: .8rem; font-weight: 600; color: var(--dim); }

/* The safety bar: slim, no track fill beyond what is earned. */
.sbar { height: 6px; margin: 2px 0 1px !important; border-radius: 99px; background: var(--raised); border: 1px solid var(--line); overflow: hidden; }
.sbar__fill { display: block; height: 100%; background: var(--live); }
.srow--blocked .sbar__fill { background: var(--blocked); }

.side__nav { display: none; }
.side__stop { display: none; }
.symgrid { margin-top: 0; }

/* ---------------------------------------------- instruments, tighter */
.panel { padding: 16px 18px; gap: 12px; }
.panel--open { box-shadow: inset 3px 0 0 var(--live), var(--shadow); }
.panel--open.panel--paused { box-shadow: inset 3px 0 0 var(--paused), var(--shadow); }
.panel--open.panel--blocked { box-shadow: inset 3px 0 0 var(--blocked), var(--shadow); }
.panel--paused:not(.panel--open), .panel--blocked:not(.panel--open) { border-color: var(--line-strong); }
.kv dd { font-size: 1.02rem; }
.pos th, .pos td { padding: 7px 0; }

/* Tiles are links on the phone overview: the whole tile is the target. */
.tile { padding: 0; }
.tile__link {
  display: flex; flex-direction: column; gap: 2px; min-height: var(--tap);
  padding: 12px; color: inherit; text-decoration: none; border-radius: inherit;
}
.tile__link:focus-visible { outline: 2px solid var(--live); outline-offset: -2px; }

/* -------------------------------------------- wide screens: the sidebar */
@media (min-width: 1024px) {
  .shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); column-gap: var(--s6); padding: 0 var(--pad); }
  .shell > .page { padding-left: 0; padding-right: 0; }
  .side {
    position: sticky; top: calc(var(--head-h) + 16px); align-self: start;
    max-height: calc(100dvh - var(--head-h) - 32px); overflow-y: auto;
    padding: 0; margin-top: var(--pad); padding-bottom: var(--s4);
    scrollbar-width: thin;
  }
  .side .symgrid { display: none; }
  .side__nav { display: flex; flex-direction: column; border-top: 1px solid var(--line); padding-top: var(--s2); }
  .side__nav a {
    display: flex; align-items: center; min-height: 36px; padding: 0 var(--s2);
    color: var(--dim); font-size: .88rem; text-decoration: none; border-radius: var(--r);
  }
  .side__nav a:hover, .side__nav a:focus-visible { color: var(--text); background: var(--raised); }
  .side__stop {
    display: flex; align-items: center; gap: var(--s2); min-height: var(--tap); padding: 0 var(--s3);
    border: 1px solid rgba(199,91,87,.45); border-radius: var(--r); background: rgba(199,91,87,.08);
    color: #e79a97; font-weight: 600; font-size: .9rem; text-decoration: none;
  }
  .side__stop:hover, .side__stop:focus-visible { background: rgba(199,91,87,.16); }
  .side__stop .icon { width: 18px; height: 18px; }

  /* Activity is the wider column; alerts beside it. */
  .split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }

  /* Compact rows: one line, much less padding. */
  .panel--compact { padding: 4px 14px; min-height: 0; }
  .panel--compact:not([open]) { gap: 0; }
  .panel--compact > summary { min-height: 34px; }
  .panel--compact .panel__sym { font-size: .95rem; }
  .panel--compact .badge { height: 26px; padding: 0 10px; font-size: .7rem; }
  .symbols { gap: 10px; }
  /* The open position reads first on its own card: Bybit to Bitget on the heading line. */
  .panel--open .panel__pos { display: block; font-size: .9rem; color: var(--text); }
}

/* Between phone and sidebar widths: the status panel sits on top, full width. */
@media (min-width: 768px) and (max-width: 1023px) {
  .side { padding-top: var(--pad); }
  .side .symgrid { display: none; }
  .srows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .srow { border-right: 1px solid var(--line); }
}

/* ----------------------------------------------- phones: tabs and banner */
.mbar { display: none; }
.wbanner { display: none; }
.tabs { display: none; }
.tabsignout { display: none; }
.panel__pendm { display: none; }

@media (max-width: 767px) {
  /* Slim top bar: the word, the margin, refresh. Sign out lives in Controls. */
  .topbar { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: 8px; flex-wrap: nowrap; row-gap: 0; }
  .topbar__id, .topbar__status, .topbar__signout { display: none; }
  .mbar { display: flex; align-items: baseline; gap: var(--s3); min-width: 0; flex: 1 1 auto; order: 1; }
  #refresh { order: 2; }
  .mbar__word { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
  .mbar__word--live { color: var(--live); }
  .mbar__word--paused { color: var(--paused); }
  .mbar__word--blocked { color: var(--blocked); }
  .mbar__word--idle { color: var(--dim); }
  .mbar__margin { font-size: .82rem; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .mbar__margin--paused { color: var(--paused); font-weight: 600; }
  .mbar__margin--blocked { color: var(--blocked); font-weight: 600; }

  /* The banner: on every tab, every warning named; a tap goes to its tab. */
  .wbanner {
    position: sticky; top: var(--head-h); z-index: 9;
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px var(--pad) 10px;
    border-bottom: 1px solid var(--line);
    background: #241a12;
  }
  .wbanner[hidden] { display: none; }
  .wbanner--blocked { background: #2a1615; }
  .wbanner__item {
    display: flex; align-items: center; min-height: var(--tap); padding: 0;
    background: none; border: 0; text-align: left; cursor: pointer;
    font: inherit; font-size: .9rem; font-weight: 600; color: #e0b978;
  }
  .wbanner--blocked .wbanner__item { color: #e79a97; }
  .wbanner__more { font-size: .82rem; color: var(--dim); }

  /* One tab at a time. Only sections inside the shell are tabbed. */
  body[data-tab="overview"] .shell [data-tab]:not([data-tab="overview"]),
  body[data-tab="positions"] .shell [data-tab]:not([data-tab="positions"]),
  body[data-tab="activity"] .shell [data-tab]:not([data-tab="activity"]),
  body[data-tab="controls"] .shell [data-tab]:not([data-tab="controls"]) { display: none; }
  body:not([data-tab="overview"]) .side { display: none; }
  /* Controls opens on the controls: the Danger Zone first, margin sync and diagnostics after. */
  body[data-tab="controls"] #danger { order: -1; }
  .split { gap: 0; }
  .block { animation: none; }
  .page { padding-bottom: calc(var(--tabs-h) + var(--pad) + env(safe-area-inset-bottom)); }
  .side { padding-bottom: calc(var(--tabs-h) + var(--pad) + env(safe-area-inset-bottom)); }
  body[data-tab="overview"] .page { padding-top: 0; }
  body[data-tab="overview"] .side { padding-bottom: var(--s4); }
  .tabsignout { display: flex; justify-content: center; margin-top: var(--s6); min-height: var(--tap); }
  .panel__pendm { display: block; order: 4; flex-basis: 100%; font-size: .82rem; font-weight: 600; color: var(--text); }
  details.panel[open] .panel__pendm { display: none; }

  /* The top bar already says the word: the Overview tab does not repeat it. */
  .side__word { display: none; }
  .side__summary { margin-top: 0; }

  /* Flat, healthy instruments: one line on a phone too, so an open position
     stands out. Still a 44 px tap target; still opens on a tap. */
  .panel--compact { padding: 0 12px; gap: 0; }
  .panel--compact .panel__head { flex-wrap: nowrap; }
  .panel--compact .panel__sym { font-size: .95rem; flex: none; }
  .panel--compact .panel__pos { display: block; order: 0; flex-basis: auto; font-size: .8rem; }
  .panel--compact .badge { height: 26px; padding: 0 9px; font-size: .68rem; }
  .panel--compact[open] { padding: 12px; gap: 12px; }
  .symbols { gap: 8px; }

  .tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--bg); border-top: 1px solid var(--line);
  }
  .tab {
    position: relative; min-height: var(--tabs-h);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    background: none; border: 0; cursor: pointer; color: var(--dim);
    font: inherit; font-size: .8rem; font-weight: 600;
  }
  .tab[aria-current="page"] { color: var(--text); box-shadow: inset 0 2px 0 var(--live); }
  .tab:focus-visible { outline: 2px solid var(--live); outline-offset: -2px; }
  .tab__badge {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px;
    background: var(--blocked); color: #fff3f2; font-size: .7rem; font-weight: 700;
    display: inline-grid; place-items: center;
  }
  .tab__badge[hidden] { display: none; }
}

/* Alert emails: a resolved one is quiet; a long engine message is two lines,
   the whole text on hover. */
.row--resolved .row__title { color: var(--dim); font-weight: 500; }
.row__title--clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ====================================================== Polish (2026-10-01)
   ONE spacing scale, from the existing 4-unit tokens:
     --card-pad   16  inside every card and panel
     --card-gap   12  between the parts of a card, and between cards
     --row-gap     4  between the lines of one heading
   No transitions, no animation. Colour only for state, always with a word. */

:root { --card-pad: var(--s4); --card-gap: var(--s3); --row-gap: var(--s1); }

/* Cards: the heading, then ONE body whose parts are evenly spaced. */
.panel, .panel.panel--compact[open] { padding: var(--card-pad); gap: 0; }
.panel__body { display: flex; flex-direction: column; gap: var(--card-gap); padding-top: var(--card-gap); min-width: 0; }
.panel__body > * { margin-top: 0; margin-bottom: 0; }
.symbols { gap: var(--card-gap); }
.pending { padding: var(--s3) var(--s3); }

/* The heading: name and state pill share row one at every width; the
   positions take row two; a pending change row three. */
.panel__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "sym right" "pos pos" "pend pend";
  align-items: center;
  gap: var(--row-gap) var(--s3);
}
.panel__sym { grid-area: sym; min-width: 0; }
.panel__right { grid-area: right; margin-left: 0; }
.panel__pos {
  grid-area: pos; display: block; order: 0; flex-basis: auto;
  font-size: .86rem; color: var(--dim); overflow-wrap: anywhere;
}
.panel--open .panel__pos { color: var(--text); }
.panel__pendm { grid-area: pend; }

/* A compact (flat, healthy) card is one row: name, one-line facts, pill. */
.panel--compact .panel__head { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "sym line right"; }
.panel--compact .panel__pos { display: none; }
.panel--compact .panel__line {
  grid-area: line; display: flex; align-items: baseline; gap: var(--s3); min-width: 0;
  font-size: .82rem; color: var(--dim);
}
.panel--compact .panel__line > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel--compact .panel__pend { color: var(--text); font-weight: 600; }
.panel.panel--compact:not([open]) { padding-top: var(--s1); padding-bottom: var(--s1); }
.panel--compact > summary { min-height: 36px; }

/* Side status rows and the safety bar keep the same rhythm. */
.srow { padding: var(--s3) var(--s4); }

@media (max-width: 767px) {
  /* A phone's compact row is still a 44 px target. */
  .panel--compact > summary { min-height: var(--tap); }
  .panel--compact .panel__line .panel__pend { display: none; }

  /* Tabs: an icon above each label; the count sits on the icon. */
  .tab { gap: 3px; padding-top: 6px; }
  .tab__ico { position: relative; display: inline-grid; place-items: center; width: 24px; height: 24px; }
  .tab__svg { width: 22px; height: 22px; }
  .tab__ico .tab__badge { position: absolute; top: -6px; left: 14px; min-width: 18px; height: 18px; padding: 0 5px; font-size: .66rem; }
  .tab[aria-current="page"] { color: var(--text); background: var(--raised); box-shadow: inset 0 2px 0 var(--live); }
  .tab[aria-current="page"] .tab__svg { color: var(--live); }

  /* Overview tiles: warnings and open positions keep their detail; flat ones
     are one line across the grid. */
  .symgrid { gap: var(--s2); }
  .tile--compact { grid-column: 1 / -1; }
  .tile--compact .tile__link { flex-direction: row; align-items: center; gap: var(--s3); padding: 0 var(--s3); }
  .tile--compact .tile__name { flex: none; }
  .tile--compact .tile__pos { flex: 1 1 auto; min-width: 0; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tile--compact .tile__state { flex: none; font-size: .8rem; }
}

/* An odd last full card spans the row (2026-10-01): nothing floats beside it. */
.panel--wide { grid-column: 1 / -1; }
.tile--wide { grid-column: 1 / -1; }
@media (max-width: 767px) {
  .panel__fact--2, .panel__fact--3 { display: none; }
  .panel--compact .panel__head { column-gap: var(--s2); }
}

/* ------------------------------------------------ Large orders (2026-10-19)
   A phone gets each order as a small card (labelled figures); from 900 px the
   same list is one row per order under a header row. Same tokens throughout. */
.lo__summary { margin: 0 0 var(--s3, 12px); font-size: .92rem; color: var(--dim); overflow-wrap: anywhere; }
.lo { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.lo__row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(5.5rem, auto); gap: 6px 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line); min-width: 0;
}
.lo__row--head { display: none; }
.lo__when { grid-column: 1 / 3; font-size: .78rem; color: var(--faint); align-self: center; }
.lo__who { grid-column: 3; justify-self: end; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .92rem; }
.lo__fig { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: .92rem; }
.lo__lab { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); }
.lo__bad { color: #e79a97; }
.lo__row--over { box-shadow: inset 3px 0 0 var(--blocked); padding-left: 10px; }
.lo__shadow { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; font-size: .86rem; min-width: 0; }
.lo__shnote { color: var(--dim); font-size: .8rem; overflow-wrap: anywhere; }
@media (min-width: 900px) {
  .lo__row { grid-template-columns: 9rem 8rem 6.5rem 6rem 6rem minmax(0, 1fr); align-items: center; padding-top: 10px; padding-bottom: 10px; }
  .lo__row--head { display: grid; padding-top: 8px; padding-bottom: 8px; }
  .lo__h { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); }
  .lo__when, .lo__who { grid-column: auto; justify-self: start; }
  .lo__fig .lo__lab, .lo__shadow .lo__lab { display: none; }
  .lo__shadow { grid-column: auto; }
}

/* ------------------------------------ Bitget orders not placed by the mirror (2026-10-21)
   Same shape as the Large orders list: labelled cards on a phone, one row per order from 900 px. */
.xo { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.xo__row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(5.5rem, auto); gap: 6px 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line); min-width: 0;
}
.xo__row--head { display: none; }
.xo__row--take-profit, .xo__row--stop-loss, .xo__row--liquidation { box-shadow: inset 3px 0 0 var(--blocked); padding-left: 10px; }
.xo__when { grid-column: 1 / 3; font-size: .78rem; color: var(--faint); align-self: center; }
.xo__who { grid-column: 3; justify-self: end; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .92rem; }
.xo__fig { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: .92rem; }
.xo__lab { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); }
.xo__type { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: .9rem; }
.xo__kind { font-weight: 600; }
.xo__tnote { color: var(--dim); font-size: .8rem; overflow-wrap: anywhere; }
.xo__more { padding: 10px 0; font-size: .85rem; color: var(--dim); border-bottom: 1px solid var(--line); }
@media (min-width: 900px) {
  .xo__row { grid-template-columns: 9rem 11rem 6.5rem 7rem 6rem minmax(0, 1fr); align-items: center; padding-top: 10px; padding-bottom: 10px; }
  .xo__row--head { display: grid; padding-top: 8px; padding-bottom: 8px; }
  .xo__h { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); }
  .xo__when, .xo__who { grid-column: auto; justify-self: start; }
  .xo__fig .xo__lab, .xo__type .xo__lab { display: none; }
  .xo__type { grid-column: auto; }
}