/* Claude Trading Desk — dark & light themes via CSS variables */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root, [data-theme="dark"] {
  --bg: #0d1117;
  --bg2: #131a23;
  --card: #161f2b;
  --card2: #1b2634;
  --border: #253243;
  --text: #dbe4ef;
  --muted: #8b98ab;
  --accent: #e8833a;         /* claude orange */
  --accent2: #4f8ff7;
  --green: #2ebd85;
  --red: #f6465d;
  --amber: #f0b90b;
  --chip: #22304296;
  --violet: #b04bff;
  --indigo: #8a7cff;
  --shadow: 0 6px 24px rgba(0,0,0,.35);
  --chat-user: #1b2634;
  --chat-claude: #21283a;
  --chat-action: transparent;
  color-scheme: dark;
}
[data-theme="light"] {
  --bg: #f3f5f8;
  --bg2: #eaeef4;
  --card: #ffffff;
  --card2: #f6f8fb;
  --border: #dbe2ec;
  --text: #1c2733;
  --muted: #64748b;
  --accent: #d97528;
  --violet: #7b2fd4;
  --indigo: #5b4fd0;
  --accent2: #2f6fdb;
  --green: #14915f;
  --red: #dc3545;
  --amber: #b8860b;
  --chip: #e8edf4;
  --shadow: 0 4px 18px rgba(20,30,50,.08);
  --chat-user: #eef2f7;
  --chat-claude: #fdf3ea;
  --chat-action: transparent;
  color-scheme: light;
}

html, body { height: 100%; }
body {
  font-family: 'Segoe UI', 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  overflow: hidden;
}
[dir="rtl"] body { font-family: 'Segoe UI', Tahoma, system-ui, sans-serif; }

#app { display: flex; height: 100vh; height: 100dvh; }   /* dvh: mobile URL-bar safe */

/* ---------- sidebar ---------- */
.sidebar {
  width: 220px; min-width: 220px;
  background: var(--bg2);
  border-inline-end: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 14px 10px;
  gap: 4px;
}
.logo { display: flex; align-items: center; gap: 10px; padding: 6px 10px 18px; }
.logo-img { width: 40px; height: 40px; flex: none; object-fit: contain; }
.logo-mark {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: linear-gradient(135deg, var(--accent), #c05621);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 17px;
}
.logo-name { font-weight: 700; font-size: 15px; line-height: 1.15; }
.logo-sub { font-size: 11px; color: var(--muted); }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 9px; cursor: pointer;
  color: var(--muted); font-weight: 600; user-select: none;
}
.nav-item:hover { background: var(--card); color: var(--text); }
.nav-item.active { background: var(--card); color: var(--accent); }
.nav-item .ico { width: 18px; text-align: center; }
.sidebar .spacer { flex: 1; }
.side-status { padding: 10px 12px; font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--border); display: grid; gap: 5px; }
.side-status b { color: var(--text); font-weight: 600; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; background: var(--green); margin-inline-end:5px; }
.dot.bad { background: var(--red); }

/* ---------- main area ---------- */
.main { flex: 1; overflow-y: auto; padding: 22px 26px; }
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
.page-title { font-size: 21px; font-weight: 700; }

/* ---------- buttons / inputs ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--card2); color: var(--text);
  border: 1px solid var(--border); border-radius: 9px;
  padding: 8px 15px; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: filter .12s, transform .05s;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); border-color: transparent; color: #fff; }
.btn.blue { background: var(--accent2); border-color: transparent; color: #fff; }
.btn.green { background: var(--green); border-color: transparent; color: #fff; }
.btn.red { background: var(--red); border-color: transparent; color: #fff; }
.btn.ghost { background: transparent; }
.btn.sm { padding: 5px 10px; font-size: 12.5px; border-radius: 7px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

input, select, textarea {
  background: var(--bg2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 11px; font-size: 13.5px; width: 100%;
  outline: none; font-family: inherit;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent2); }
label.fld { display: grid; gap: 5px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.hint { font-size: 11.5px; color: var(--muted); font-weight: 400; line-height: 1.45; }

/* ---------- cards & grid ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; }
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow);
}
.bot-card { cursor: pointer; transition: border-color .15s, background-color .15s; display: grid; gap: 12px; }
/* the card says whether the bot is working before any text is read:
   running = a light green wash, stopped = a light red one */
.bot-card.st-running { background: color-mix(in srgb, var(--green) 13%, var(--card)); border-color: color-mix(in srgb, var(--green) 45%, var(--border)); }
.bot-card.st-stopped { background: color-mix(in srgb, var(--red) 13%, var(--card)); border-color: color-mix(in srgb, var(--red) 42%, var(--border)); }
.bot-card:hover { border-color: var(--accent2); }
.bot-card .head { display: flex; align-items: center; gap: 10px; }
.bot-name { font-weight: 700; font-size: 16px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge {
  font-size: 10.5px; font-weight: 800; letter-spacing: .4px;
  padding: 3px 8px; border-radius: 6px; text-transform: uppercase; flex: none;
}
.badge.running { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); }
.badge.stopped { background: var(--chip); color: var(--muted); }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.kv .k { font-size: 11.5px; color: var(--muted); }
.kv .v { font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pnl-pos { color: var(--green); }
.pnl-neg { color: var(--red); }
.progress { height: 7px; border-radius: 4px; background: var(--bg2); overflow: hidden; }
.progress > div { height: 100%; background: var(--green); border-radius: 4px; transition: width .4s; }
.progress.over > div { background: var(--amber); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: var(--chip); border-radius: 6px; padding: 3px 9px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.mono { font-variant-numeric: tabular-nums; }

/* empty state */
.empty { text-align: center; padding: 70px 20px; color: var(--muted); }
.empty .big { font-size: 44px; margin-bottom: 12px; }
.empty h3 { color: var(--text); margin-bottom: 8px; }
.empty p { max-width: 440px; margin: 0 auto 18px; line-height: 1.55; }

/* ---------- bot detail ---------- */
/* In detail view the header+tabs live OUTSIDE the scroll area entirely:
   .main stops scrolling and #tabBody becomes the scroll container. No
   overlap, no bleed-through, nothing hidden under the header. */
.main.detail-mode { overflow: hidden; display: flex; flex-direction: column; }
.main.detail-mode .detail-headwrap { flex: none; }
.main.detail-mode #tabBody {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  margin: 0 -26px -22px; padding: 16px 26px 22px;
}
.detail-headwrap .tabs { margin-bottom: 0; }
.detail-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }

/* per-message translation keys (EN · TR · AR) on Claude messages */
.lang-keys { display: inline-flex; gap: 2px; margin-inline-start: auto; }
.lang-keys span {
  font-size: 9.5px; font-weight: 800; letter-spacing: .5px; cursor: pointer;
  padding: 2px 7px; border-radius: 5px; color: var(--muted); user-select: none;
}
.lang-keys span:hover { background: var(--chip); color: var(--text); }
.lang-keys span.active { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.detail-head .grow { flex: 1; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.tab {
  padding: 9px 16px; cursor: pointer; color: var(--muted); font-weight: 650;
  border-bottom: 2px solid transparent; margin-bottom: -1px; user-select: none;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.stat .k { font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
.stat .v { font-size: 17px; font-weight: 750; font-variant-numeric: tabular-nums; }
.stat .sub { font-size: 11px; color: var(--muted); margin-top: 3px; }

/* ---------- tables ---------- */
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  text-align: start; color: var(--muted); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .4px; padding: 8px 10px; border-bottom: 1px solid var(--border);
}
.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td { background: var(--card2); }
.side-long { color: var(--green); font-weight: 700; }
.side-short { color: var(--red); font-weight: 700; }
.role-tag { font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 5px; }
.role-maker { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.role-taker { background: color-mix(in srgb, var(--amber) 20%, transparent); color: var(--amber); }

/* ---------- chat ---------- */
.chat-wrap { display: flex; flex-direction: column; gap: 12px; max-width: 900px; }
.msg { display: grid; gap: 6px; }
.msg .meta { font-size: 11px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.msg .avatar { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff; flex: none; }
.msg .bubble { border-radius: 12px; padding: 12px 14px; border: 1px solid var(--border); line-height: 1.55; }
.msg.user .bubble { background: var(--chat-user); }
.msg.user .avatar { background: var(--accent2); }
.msg.assistant .bubble { background: var(--chat-claude); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.msg.assistant .avatar { background: var(--accent); }
.msg.action { font-size: 12.5px; color: var(--muted); padding-inline-start: 36px; }
.msg.action .txt { border-inline-start: 2px solid var(--border); padding: 2px 10px; }
.msg.action.err .txt { border-color: var(--red); color: var(--red); }
.decision-grid { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.dchip { background: var(--chip); border-radius: 7px; padding: 4px 10px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dchip.act-OPEN, .dchip.act-HOLD { color: var(--green); }
.dchip.act-CLOSE { color: var(--red); }
.dchip.act-WAIT, .dchip.act-UPDATE_SLTP, .dchip.act-CANCEL_ENTRY { color: var(--amber); }
/* the money a rung made, on the rung. A ladder exists so that different
   parts of the position are worth different amounts; a single "banked"
   total hides exactly the thing the ladder was built to show. */
/* the prices a decision actually moved, under the decision that moved them */
.bl-move { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--accent2);
  margin-top: 2px; letter-spacing: .2px; }
/* A live number has to LOOK live. The flash is short and low-contrast on
   purpose: this panel updates every couple of seconds and a bright blink
   that often becomes noise the eye learns to ignore. */
@keyframes ctd-tick-up { from { background: color-mix(in srgb, var(--green) 34%, transparent); }
  to { background: transparent; } }
@keyframes ctd-tick-dn { from { background: color-mix(in srgb, var(--red) 34%, transparent); }
  to { background: transparent; } }
.tick-up { animation: ctd-tick-up .55s ease-out; border-radius: 5px; }
.tick-dn { animation: ctd-tick-dn .55s ease-out; border-radius: 5px; }

/* the LIVE dot breathes while the feed is fresh, and stops when it is not */
@keyframes ctd-beat { 0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.72); } }
.live .dot.beat { animation: ctd-beat 1.6s ease-in-out infinite; }

/* someone who asked the system not to animate things means it */
@media (prefers-reduced-motion: reduce) {
  .tick-up, .tick-dn, .live .dot.beat { animation: none; }
}

/* A real switch, because "on or off" should be readable at a glance and
   changeable in one click — not two menus away in a settings page. */
.sec-tools { display: flex; align-items: center; gap: 9px; margin-inline-start: auto; flex-wrap: wrap; }
/* the risk cap no longer SHRINKS the trade, so the true cost of a stop-out
   is the only warning left. It gets to look like one. */
.rk.rk-over { border-color: color-mix(in srgb, var(--red) 45%, transparent);
  background: color-mix(in srgb, var(--red) 9%, transparent); }
.rk.rk-over .s { color: var(--red); font-weight: 700; }
.sw { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; }
/* Where price has to get back to before the stop can be touched again.
   Dashed, because nothing executes here — it only re-arms the counter. */
.ladder .pin.rearm-pin .stick { width: 2px; opacity: .75;
  background-image: repeating-linear-gradient(to bottom, currentColor 0 3px, transparent 3px 6px) !important; }
.ladder .pin.rearm-pin .flag { font-size: 9.5px; font-weight: 700; }
.ladder .pin.rearm-pin .price { opacity: .8; }

/* Two stops on one rail. The emergency level is the one the exchange holds,
   so it draws solid; the counted level survives contact and draws dashed. */
.ladder .pin.em-pin .stick { width: 3px; }
.ladder .pin.em-pin .flag { font-weight: 800; }

/* which optional behaviours were in force for this trade. The card already
   changes SHAPE when the ladder is off; these say why. */
.feat-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .2px;
  background: var(--chip); color: var(--muted); border: 1px solid var(--border);
  white-space: nowrap; }
.feat-tag.on { color: var(--fg); border-color: color-mix(in srgb, var(--accent2) 40%, transparent);
  background: color-mix(in srgb, var(--accent2) 10%, transparent); }

/* a change that is waiting for the next scan says so where the change was made */
.bs-pending { padding: 11px 13px; border-radius: 11px; font-size: 12.5px; line-height: 1.5;
  background: color-mix(in srgb, var(--amber) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 38%, transparent); }
/* the bot settings are a form now, so it needs the same bottom bar the
   system settings have — and the same room above it */
.bs-wrap { padding-bottom: 84px; }
/* the per-bot market-entry switch sits between the chips and the big CTA */
.bot-me { margin: 2px 0 10px; font-size: 12px; }
.sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.sw-track { width: 34px; height: 19px; border-radius: 999px; background: var(--chip);
  border: 1px solid var(--border); position: relative; transition: background .18s, border-color .18s; }
.sw-knob { position: absolute; top: 2px; inset-inline-start: 2px; width: 13px; height: 13px;
  border-radius: 50%; background: var(--muted); transition: transform .18s, background .18s; }
.sw input:checked + .sw-track { background: color-mix(in srgb, var(--green) 30%, transparent);
  border-color: color-mix(in srgb, var(--green) 55%, transparent); }
.sw input:checked + .sw-track .sw-knob { background: var(--green); transform: translateX(15px); }
.sw input:focus-visible + .sw-track { outline: 2px solid var(--accent2); outline-offset: 2px; }
.sw-lbl { font-size: 11.5px; font-weight: 700; letter-spacing: .3px; color: var(--muted); }
.sw input:checked ~ .sw-lbl { color: var(--fg); }
/* RTL: the knob travels the other way */
[dir="rtl"] .sw input:checked + .sw-track .sw-knob { transform: translateX(-15px); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ─────────────────────────────────────────────────── settings shell ──
   Ten cards in one column is a scroll, not a page. The rail turns them
   into ten destinations and leaves exactly one on screen: the page stops
   growing every time a feature is added, which is the actual problem. */
/* the bill, read at a glance. The active-hour tile is the one that matters:
   an average across quiet hours hides where the money actually goes. */
.us-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
  margin-top: 12px; }
.us-tile { background: var(--bg2); border: 1px solid var(--border); border-radius: 11px;
  padding: 12px 13px; }
.us-tile .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .55px;
  color: var(--muted); font-weight: 700; }
.us-tile .v { font-variant-numeric: tabular-nums; font-weight: 800; margin-top: 5px; }
.us-tile .v.big { font-size: 21px; letter-spacing: -.3px; }
.us-tile .s { font-size: 11px; color: var(--muted); margin-top: 3px;
  font-variant-numeric: tabular-nums; }
/* the all-time figure leads: it is the one that never resets, and the one
   the trader is actually asking about */
.us-tile.lead { border-color: color-mix(in srgb, var(--accent2) 40%, transparent);
  background: color-mix(in srgb, var(--accent2) 8%, var(--bg2)); }

/* two keys are two bills; the split only draws when there really are two */
.us-keys { margin-top: 12px; padding: 11px 13px; border-radius: 10px;
  background: var(--bg2); border: 1px solid var(--border); font-size: 12.5px; }
.us-keys .t { font-weight: 800; margin-bottom: 6px; letter-spacing: .2px; }
.us-keys .row { display: flex; align-items: center; gap: 10px;
  padding: 3px 0; font-variant-numeric: tabular-nums; }
.us-keys .row span:first-child { min-width: 128px; color: var(--muted); }
.us-keys .row b { min-width: 76px; }
.us-keys .row span:last-child { color: var(--muted); font-size: 11.5px; }

.us-lever { margin-top: 12px; padding: 11px 13px; border-radius: 10px; font-size: 12.5px;
  line-height: 1.5; background: color-mix(in srgb, var(--accent2) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent2) 30%, transparent); }
.us-lever .t { font-weight: 800; margin-bottom: 4px; letter-spacing: .2px; }

.set-shell { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 16px;
  align-items: start; }
.set-rail { display: flex; flex-direction: column; gap: 3px; position: sticky; top: 12px;
  padding: 7px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--border); }
.set-tab { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start;
  padding: 9px 11px; border: 0; border-radius: 8px; cursor: pointer; background: transparent;
  color: var(--muted); font-size: 12.5px; font-weight: 650; letter-spacing: .2px;
  transition: background .14s, color .14s; }
.set-tab .ic { font-size: 14px; line-height: 1; width: 18px; text-align: center; flex: none;
  filter: grayscale(.55); transition: filter .14s; }
.set-tab .tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-tab:hover { background: var(--chip); color: var(--fg); }
.set-tab.on { background: color-mix(in srgb, var(--accent2) 15%, transparent); color: var(--fg); }
.set-tab.on .ic { filter: none; }
.set-tab:focus-visible { outline: 2px solid var(--accent2); outline-offset: -2px; }
/* the accent rail on the selected tab reads as "you are here" without a border
   on every other row */
.set-tab.on { box-shadow: inset 3px 0 0 var(--accent2); }
[dir="rtl"] .set-tab.on { box-shadow: inset -3px 0 0 var(--accent2); }

/* one section at a time. They are all in the DOM so every handler still
   binds; only the chosen one is laid out. */
.set-sections > .set-sec { display: none; }
.set-sections > .set-sec.on { display: block; animation: ctd-sec-in .18s ease-out; }
@keyframes ctd-sec-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .set-sections > .set-sec.on { animation: none; } }

/* narrow screens: the rail is a chip strip above the card.

   It used to hide every label and show eleven bare emoji, revealing the
   name only of the tab you were already on — so the one thing the strip
   is for, telling you where else you can go, was the thing it withheld.
   Two of the icons were 💵 and 💸 side by side.

   The main tab strip a few hundred lines down already solved this: keep
   the words, let it scroll, fade the edge so the scroll is visible. The
   rail now does the same, so the two strips behave alike. */
@media (max-width: 760px) {
  .set-shell { grid-template-columns: minmax(0, 1fr); }
  .set-rail { flex-direction: row; overflow-x: auto; position: static;
    scrollbar-width: none; padding: 6px; gap: 4px;
    -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
    mask-image: linear-gradient(90deg, #000 90%, transparent); }
  [dir="rtl"] .set-rail {
    -webkit-mask-image: linear-gradient(270deg, #000 90%, transparent);
    mask-image: linear-gradient(270deg, #000 90%, transparent); }
  .set-rail::-webkit-scrollbar { display: none; }
  /* 40px tall: a thumb target, not a mouse target */
  .set-tab { flex: none; padding: 10px 13px; white-space: nowrap; }
  .set-tab .ic { font-size: 15px; }
  /* the accent moves from the leading edge to the bottom — a left bar on a
     horizontal strip points at nothing */
  .set-tab.on, [dir="rtl"] .set-tab.on { box-shadow: inset 0 -2.5px 0 var(--accent2); }
}

.rung-pnl { margin-inline-start: 6px; font-variant-numeric: tabular-nums; font-weight: 800; }
.rung.neg { background: color-mix(in srgb, var(--red) 16%, transparent); }
.shots { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
/* A thumbnail with no picture in it yet must still take up its space. Left
   at auto height every unloaded shot collapsed to zero, the whole history
   stacked into one screen, and the lazy loader dutifully fetched all of it
   at once — the very thing it exists to prevent. 1600x1300 captures. */
.shots img { width: 170px; aspect-ratio: 16 / 13; object-fit: cover; background: var(--bg2);
  border-radius: 8px; border: 1px solid var(--border); cursor: zoom-in; display: block; }
.prompt-toggle { font-size: 11.5px; color: var(--accent2); cursor: pointer; user-select: none; }
pre.prompt {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 9px;
  padding: 10px 12px; font-size: 11.5px; white-space: pre-wrap; word-break: break-word;
  max-height: 300px; overflow-y: auto; color: var(--muted); direction: ltr; text-align: left;
}

/* ---------- modal ---------- */
.modal-back {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; z-index: 8500; padding: 20px;
  /* above .bottom-nav (8000) and the composer (800); below the image
     viewer (9500) and toasts (9100), which must still reach the user */
}
.modal {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  width: 560px; max-width: 96vw; max-height: 92vh; max-height: 92dvh; overflow-y: auto;
  padding: 22px 24px; box-shadow: var(--shadow);
}
.modal.wide { width: 860px; }
.modal h3 { margin-bottom: 16px; font-size: 17px; }
.modal .frm { display: grid; gap: 13px; }
.modal .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal .row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.modal .foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.img-zoom { max-width: 92vw; max-height: 88vh; border-radius: 10px; display: block; }

/* settings */
.set-sections { display: grid; gap: 16px; max-width: 760px; }
.set-sections h4 { font-size: 14.5px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.test-result { font-size: 12.5px; font-weight: 700; white-space: pre-line; }
.test-result.ok { color: var(--green); }
.test-result.fail { color: var(--red); }
/* the 💡 checklist appended to -2015 reads as prose, not as an alarm */
.test-result.fail { font-weight: 600; }

/* toast */
#toasts { position: fixed; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); inset-inline-end: 18px; display: grid; gap: 8px; z-index: 9100; }
body:has(.up-banner) #toasts { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }   /* never hide behind the update banner */
.toast {
  background: var(--card); color: var(--text); border: 1px solid var(--border);
  border-inline-start: 3px solid var(--accent2); border-radius: 10px; padding: 11px 16px;
  font-size: 13px; box-shadow: var(--shadow); max-width: min(380px, calc(100vw - 32px)); animation: slide .2s ease;
}
.toast.err { border-inline-start-color: var(--red); }
.toast.ok { border-inline-start-color: var(--green); }
@keyframes slide { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Claude analysis card (chat) ---------- */
.an-card { display: grid; gap: 11px; }
.bias-row { display: flex; align-items: center; gap: 10px; border-radius: 10px; padding: 9px 13px; }
.bias-row.b-BULLISH { background: color-mix(in srgb, var(--green) 10%, transparent); border: 1px solid color-mix(in srgb, var(--green) 30%, transparent); }
.bias-row.b-BEARISH { background: color-mix(in srgb, var(--red) 10%, transparent); border: 1px solid color-mix(in srgb, var(--red) 30%, transparent); }
.bias-row.b-NEUTRAL { background: var(--bg2); border: 1px solid var(--border); }
.bias-row .lbl { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; font-weight: 700; }
.bias-pill { font-weight: 800; padding: 3px 12px; border-radius: 7px; font-size: 12.5px; letter-spacing: .5px; }
.bias-pill.b-BULLISH { background: var(--green); color: #06251a; }
.bias-pill.b-BEARISH { background: var(--red); color: #fff; }
.bias-pill.b-NEUTRAL { background: var(--muted); color: var(--bg); }
/* the instrument leads the row: it is what the whole card is about, and it
   stays on one line so 1000FLOKIUSDT cannot shove the bias off the end */
.coin-pill { font-weight: 800; font-size: 12px; letter-spacing: .4px; padding: 3px 10px; border-radius: 7px;
  background: var(--chip); color: var(--fg); border: 1px solid var(--border); white-space: nowrap; }
.setup-pill { margin-inline-start: auto; background: color-mix(in srgb, var(--accent2) 16%, transparent); color: var(--accent2); font-weight: 800; font-size: 11px; padding: 4px 11px; border-radius: 7px; letter-spacing: .4px; }
.read-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rchip { background: var(--chip); border-radius: 7px; padding: 4px 10px; font-size: 11.5px; display: inline-flex; gap: 6px; align-items: center; }
.rchip .k { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .4px; }
.rchip .v { font-weight: 700; font-variant-numeric: tabular-nums; }
.rchip .v.up { color: var(--green); } .rchip .v.dn { color: var(--red); } .rchip .v.wr { color: var(--amber); }
.why-box { background: color-mix(in srgb, var(--accent2) 9%, transparent); border-inline-start: 3px solid var(--accent2); border-radius: 8px; padding: 9px 13px; }
.why-box .t { font-size: 10.5px; font-weight: 800; color: var(--accent2); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 3px; }
.lv-table { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.lv { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; background: var(--card2); padding: 8px 13px; }
.lv .k { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.lv .p { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 14px; }
.lv .d { font-variant-numeric: tabular-nums; font-size: 11px; color: var(--muted); min-width: 84px; text-align: end; }
.conf-row { display: flex; align-items: center; gap: 11px; }
.conf-row .clbl { font-size: 10.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.conf-row .bar { flex: 1; height: 7px; border-radius: 5px; background: var(--bg2); overflow: hidden; }
.conf-row .bar > div { height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--amber), var(--green)); }
.conf-row b { font-variant-numeric: tabular-nums; font-size: 12.5px; }

/* ---------- risk card (chat action) ---------- */
.risk-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; max-width: 720px; }
.risk-head { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.risk-head .sh { width: 24px; height: 24px; border-radius: 7px; background: color-mix(in srgb, var(--accent2) 18%, transparent); color: var(--accent2); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.risk-head b { font-size: 12.5px; text-transform: uppercase; letter-spacing: .7px; }
.risk-head .tag { margin-inline-start: auto; font-size: 10px; color: var(--muted); background: var(--chip); border-radius: 6px; padding: 3px 8px; font-weight: 700; }
.risk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 10px; }
@media (max-width: 1200px) { .risk-grid { grid-template-columns: repeat(2, 1fr); } }
.rk { background: var(--card2); border: 1px solid var(--border); border-radius: 9px; padding: 8px 11px; }
.rk .k { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 3px; }
.rk .v { font-size: 14.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rk .s { font-size: 10.5px; color: var(--muted); margin-top: 1px; font-variant-numeric: tabular-nums; }
.rk.hl { border-color: color-mix(in srgb, var(--green) 40%, var(--border)); }
.rk .v.red { color: var(--red); } .rk .v.green { color: var(--green); } .rk .v.blue { color: var(--accent2); }
.risk-lock { display: flex; gap: 8px; align-items: center; background: var(--bg2); border-radius: 8px; padding: 8px 12px; font-size: 11.5px; color: var(--muted); }

/* ---------- market watch ---------- */
/* Claude-style "update ready — relaunch" banner (web/thin clients only) */
.up-banner { position: fixed; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); z-index: 9000;
  display: flex; align-items: center; gap: 11px; background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 11px 16px; box-shadow: 0 12px 40px rgba(0,0,0,.5); animation: upIn .4s cubic-bezier(.2,.9,.3,1.2); max-width: 92vw; }
@keyframes upIn { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
.up-banner .up-ico { font-size: 17px; }
.up-banner .up-txt { font-size: 13px; font-weight: 700; }
.up-banner .up-txt small { display: block; font-size: 10.5px; color: var(--muted); font-weight: 600; }
.up-banner .up-btn { background: var(--accent2); color: #fff; border: none; border-radius: 9px; padding: 8px 13px;
  font-size: 12.5px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.up-banner .up-btn:hover { filter: brightness(1.12); }

.beta-tag { display: inline-block; background: var(--green); color: #06170f; font-size: 8.5px; font-weight: 900;
  letter-spacing: .6px; border-radius: 5px; padding: 1px 5px; vertical-align: 2px; margin-inline-start: 5px; }

.side-user:not(:empty) { padding: 10px 12px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }
.side-user .u-chip { font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.side-user .btn { padding: 5px 9px; font-size: 11.5px; }
.users-list { display: grid; gap: 7px; }
.user-row { display: flex; align-items: center; gap: 10px; background: var(--chip); border-radius: 9px; padding: 8px 11px; }
.user-row .u-name { font-size: 13px; }
.user-row .u-you { font-size: 10px; color: var(--accent2); font-weight: 800; letter-spacing: .4px; }
.user-row .u-meta { margin-inline-start: auto; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.user-row .btn { padding: 4px 9px; font-size: 11px; }

.side-dl:not(:empty) { padding: 10px 12px; border-top: 1px solid var(--border); display: grid; gap: 6px; }
.side-dl .dl-title { font-size: 10.5px; font-weight: 800; letter-spacing: .5px; color: var(--muted); text-transform: uppercase; }
.dl-btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: flex-start; gap: 7px; font-size: 12px; padding: 7px 10px; }
.dl-btn.disabled { opacity: .55; cursor: default; pointer-events: none; }

.mw-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 18px; }
.mw-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; cursor: pointer; transition: border-color .15s, opacity .2s; }
.mw-card:hover { border-color: var(--accent2); }
/* coin states: BLUE = live trade, red = active but no trade, dimmed = OFF */
.mw-card.mw-open { border-color: color-mix(in srgb, var(--accent2) 75%, var(--border)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent2) 40%, transparent), 0 0 12px color-mix(in srgb, var(--accent2) 22%, transparent); }
.mw-card.mw-flat { border-color: color-mix(in srgb, var(--red) 45%, var(--border)); }
.mw-card.mw-off { opacity: .55; filter: saturate(.35); }
.mw-card .state-badge { font-size: 9px; font-weight: 800; letter-spacing: .5px; }
.mw-card.mw-open .state-badge { color: var(--accent2); }
.mw-card.mw-off .state-badge { color: var(--muted); }
.mw-btn { border: 1px solid var(--border); background: transparent; color: var(--muted); border-radius: 7px;
  width: 22px; height: 22px; line-height: 1; font-size: 11px; cursor: pointer; padding: 0; transition: all .15s; }
.mw-btn:hover { color: var(--text); border-color: var(--accent2); }
.mw-btn.danger:hover { color: var(--red); border-color: var(--red); }
.pick-list { max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--bg2); }
.pick-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; font-size: 13px; font-weight: 700; }
.pick-row:hover { background: var(--chip); }
.pick-row.added { opacity: .55; }
.pick-row .p-added { margin-inline-start: auto; font-size: 10.5px; color: var(--green); font-weight: 700; }
.pick-empty { padding: 12px; font-size: 12px; color: var(--muted); text-align: center; }
/* Six things want this row and there is room for four. Wrapping is the only
   honest answer: hiding a chip would hide whether a coin is OFF or in a
   trade, and truncating the symbol makes two similar tickers look alike. */
.mw-card .top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; flex-wrap: wrap; row-gap: 5px; }
.mw-card .sym { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mw-card .top > span { flex: none; white-space: nowrap; }
/* the indicator keeps its own line-end even after the row has wrapped */
.mw-card .live { margin-inline-start: auto; }
.mw-card .mw-btn { flex: none; }
.mw-card .sym { font-weight: 800; font-size: 13px; }
.mw-card .live { margin-inline-start: auto; display: flex; gap: 5px; align-items: center; font-size: 9.5px; color: var(--green); font-weight: 800; letter-spacing: .6px; }
.mw-card .live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); }
.mw-card .live.stale { color: var(--red); } .mw-card .live.stale .dot { background: var(--red); box-shadow: none; }
.mw-card .px { font-size: 17.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mw-card .chg { font-size: 11.5px; font-weight: 700; margin-inline-start: 7px; font-variant-numeric: tabular-nums; }
.mw-card .chg.up { color: var(--green); } .mw-card .chg.dn { color: var(--red); }
.mw-card svg { display: block; width: 100%; height: 34px; margin-top: 7px; }
.mw-card .foot { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); margin-top: 6px; font-variant-numeric: tabular-nums; }

/* ---------- open position card (overview) ---------- */
.pos-card .pos-head { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; flex-wrap: wrap; }
.pos-card .sym { font-size: 15.5px; font-weight: 800; }
.prot-tag { margin-inline-start: auto; font-size: 10px; color: var(--muted); background: var(--chip); padding: 4px 10px; border-radius: 6px; }
.prot-tag b { color: var(--green); }
.pos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 14px; }
.pk .k { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 3px; }
.pk .v { font-size: 14.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pk .v.cur { color: var(--accent2); }
.pk .v.big { font-size: 17px; }
.pk .s { font-size: 10px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
/* ladder: labels in separate bands so nothing hides behind the rail —
   flags + current price ABOVE, price + level-PnL BELOW (chip backgrounds) */
.ladder { position: relative; height: 74px; margin: 4px 8px 6px; }
.ladder .pin, .ladder .cur-pin { top: 0; bottom: 0; }
.ladder .pin .flag { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.ladder .pin .stick { position: absolute; top: 15px; height: 18px; left: 50%; transform: translateX(-50%); margin: 0; }
.ladder .pin .price { position: absolute; top: 36px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: var(--card); padding: 0 3px; border-radius: 4px; }
.ladder .pin .lpnl { position: absolute; top: 49px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: 10px; font-weight: 700; background: var(--card); padding: 0 3px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.ladder .cur-pin .dotp { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); margin: 0; }
.ladder .cur-pin .cp { position: absolute; top: 1px; left: 50%; transform: translateX(-50%); margin: 0;
  background: var(--card); padding: 0 4px; border-radius: 4px; }
.ladder .rail { position: absolute; top: 24px; left: 0; right: 0; height: 6px; border-radius: 4px;
  background: linear-gradient(90deg, var(--red) 0%, color-mix(in srgb, var(--red) 30%, var(--bg2)) 22%, var(--bg2) 42%, color-mix(in srgb, var(--green) 30%, var(--bg2)) 70%, var(--green) 100%); }
.ladder .pin { position: absolute; transform: translateX(-50%); text-align: center; }
.ladder .pin .flag { font-size: 9.5px; font-weight: 800; letter-spacing: .4px; }
.ladder .pin .stick { width: 2px; border-radius: 2px; }
.ladder .pin .price { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ladder .cur-pin { position: absolute; transform: translateX(-50%); text-align: center; z-index: 2; }
.ladder .cur-pin .dotp { width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 3px solid var(--accent2); box-shadow: 0 0 9px var(--accent2); box-sizing: border-box; }
.ladder .cur-pin .cp { font-size: 10.5px; font-weight: 800; color: var(--accent2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos-foot { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.fchip { background: var(--chip); border-radius: 7px; padding: 4px 10px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fchip .mut { color: var(--muted); font-weight: 600; }
.fchip.warn { color: var(--amber); }

/* ---------- chat UX ---------- */
.day-sep { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: capitalize; }
.day-sep::before, .day-sep::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.msg.thinking .bubble { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.dots i { display: inline-block; width: 5px; height: 5px; margin: 0 1.5px; border-radius: 50%; background: var(--accent); animation: dotpulse 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dotpulse { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
/* it must clear the composer (fixed, ~60px tall) — at bottom:14px it was
   sitting behind it and looked missing */
.jump-latest { position: sticky; bottom: 78px; z-index: 805; margin-inline-start: auto; display: block; box-shadow: var(--shadow); }
@media (max-width: 540px) {
  /* phones: composer sits above the nav, and the trade-brain peek bar above that */
  .jump-latest { bottom: calc(126px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- add-coin card ---------- */
.mw-add { display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; border-style: dashed; min-height: 118px; color: var(--muted); }
.mw-add:hover { color: var(--accent2); border-color: var(--accent2); }
.mw-add .add-big { font-size: 26px; line-height: 1; margin-bottom: 6px; }
.mw-add .add-lbl { font-size: 12px; font-weight: 700; }

/* ---------- analytics tab ---------- */
.ana-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.ana-card h4 { margin-bottom: 12px; font-size: 13.5px; }
.ana-flex { display: flex; align-items: center; gap: 18px; }
.ana-leg { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin-bottom: 7px; }
.ana-leg .sw { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.ana-leg b { margin-inline-start: auto; font-variant-numeric: tabular-nums; }

/* per-model breakdown + shadow A/B */
.lv .k .sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-inline-end: 7px; }
.mdl-blk { border: 1px solid var(--border); border-radius: 11px; padding: 12px; margin-bottom: 11px; }
.mdl-blk:last-of-type { margin-bottom: 0; }
.mdl-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; font-size: 13.5px; flex-wrap: wrap; }
.mdl-cur { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--green); border: 1px solid var(--green); border-radius: 999px; padding: 1px 7px; }
.mdl-net { margin-inline-start: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.mdl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mdl-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 3px 8px; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mdl-chip i { font-style: normal; font-weight: 600; color: var(--muted); }
.mdl-chip.grn { border-color: var(--green); }
.mdl-chip.red { border-color: var(--red); }
.mdl-chip.amb { border-color: var(--amber); }
.sh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 11px; margin-top: 11px; }
.sh-stat { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; }
.sh-stat .k { font-size: 11px; color: var(--muted); font-weight: 700; }
.sh-stat .v { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 2px; }
.sh-row { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-bottom: 1px solid var(--border); font-size: 12px; flex-wrap: wrap; }
.sh-row:last-child { border-bottom: 0; }
.sh-row .sh-t { color: var(--muted); font-variant-numeric: tabular-nums; }
.sh-tag { font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 1px 7px; border: 1px solid var(--border); }
.sh-tag.same { color: var(--green); border-color: var(--green); }
.sh-tag.diff { color: var(--amber); border-color: var(--amber); }
.sh-live { margin-inline-start: auto; font-size: 11px; color: var(--muted); }
@media (max-width: 620px) {
  .mdl-chip { font-size: 11px; padding: 3px 6px; }
  .mdl-head { font-size: 12.5px; }
}

/* ---------- portfolio bar (28) ---------- */
.pf-bar { display: flex; gap: 10px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px 16px; margin-bottom: 14px; }
.pf-bar .pf { min-width: 0; }
.pf-bar .k { display: block; color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.pf-bar .v { font-size: 19px; font-weight: 800; }
.pf-bar .pf + .pf { padding-inline-start: 14px; border-inline-start: 1px solid var(--border); }
.pf-bar .upd { margin-inline-start: auto; text-align: end; }
.pf-bar .upd .v { font-size: 13px; font-weight: 600; color: var(--muted); }
.sec-head { display: flex; align-items: center; justify-content: space-between; margin: 4px 2px 10px; font-size: 14px; font-weight: 800; }

/* dashboard bot card extras (29/19) */
.pos-strip { display: flex; align-items: center; gap: 8px; background: var(--chip); border-radius: 9px; padding: 8px 11px; font-size: 13px; flex-wrap: wrap; }
.pos-strip .pp { font-size: 16px; font-weight: 800; }
.pos-strip .sd { color: var(--muted); font-size: 11.5px; }
.btn.big-cta { width: 100%; padding: 12px 0; font-size: 14.5px; font-weight: 800; margin-top: 4px; }
.mw-card.mw-idle { border-color: var(--border); }   /* (31) idle = neutral, red stays for losses */

/* coin/bot action sheets (18/5) */
.sheet { display: grid; gap: 9px; }
.sheet-b { text-align: start; padding: 13px 15px; font-size: 14px; }
.sheet-b.danger { color: var(--red); }

/* in-app confirm (38) */
.cfm { display: flex; gap: 13px; align-items: flex-start; }
.cfm-ico { font-size: 26px; }
.cfm-text { font-size: 14px; line-height: 1.55; padding-top: 3px; }

/* error center (41) */
.err-list { display: grid; gap: 7px; max-height: 55vh; overflow-y: auto; }
.err-row { display: flex; gap: 10px; background: var(--chip); border-inline-start: 3px solid var(--red); border-radius: 8px; padding: 8px 11px; font-size: 12px; }
.err-row .tm { color: var(--muted); flex: none; }
.empty-mini { text-align: center; color: var(--muted); padding: 18px 0; }
.empty-mini .big { font-size: 30px; margin-bottom: 6px; }
.bn-badge { position: absolute; top: -4px; inset-inline-end: -8px; background: var(--red); color: #fff; font-size: 9px; font-weight: 800;
  border-radius: 9px; padding: 1px 5px; }

/* bottom navigation (2) — phones only, shown via media query */
.bottom-nav { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 8000;
  background: color-mix(in srgb, var(--bg2) 92%, transparent); backdrop-filter: blur(10px);
  border-top: 1px solid var(--border); padding: 6px 0 calc(7px + env(safe-area-inset-bottom, 0px)); }
.bn-item { flex: 1; text-align: center; color: var(--muted); font-size: 10px; font-weight: 700; cursor: pointer; }
.bn-item b { display: block; position: relative; width: max-content; margin: 0 auto 2px; font-size: 19px; font-weight: 400; }
.bn-item.active { color: var(--orange, #e8833a); color: var(--accent, #e8833a); }

/* Q&A composer (35): WhatsApp-style — flush full-width bar pinned to the very
   bottom (above the bottom nav on phones), chat gets bottom padding so the
   last message is never hidden behind it */
.qa-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 800; display: flex; gap: 8px; align-items: center;
  padding: 9px 14px calc(9px + env(safe-area-inset-bottom, 0px));
  background: var(--bg2); border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .35); }
.qa-bar input { flex: 1; min-width: 0; background: var(--card); border: 1px solid var(--border); color: var(--text);
  border-radius: 20px; padding: 11px 15px; font-size: 13.5px; outline: none; }
.qa-bar input:focus { border-color: var(--accent2); }
.qa-bar .btn { border-radius: 50%; width: 42px; height: 42px; padding: 0; font-size: 16px; flex: none; }
.chat-wrap { padding-bottom: 74px; }
@media (min-width: 921px) {
  [dir="ltr"] .qa-bar { left: 220px; }
  [dir="rtl"] .qa-bar { right: 220px; }
}
.msg.qa-user { display: flex; flex-direction: column; align-items: flex-end; margin: 10px 0; }
.msg.qa-user .bubble { background: color-mix(in srgb, var(--accent2) 22%, var(--card)); border: 1px solid color-mix(in srgb, var(--accent2) 45%, var(--border)); max-width: 85%; border-radius: 14px 14px 4px 14px; padding: 10px 14px; font-size: 13.5px; }
.msg.qa-user .meta { font-size: 10px; color: var(--muted); margin-top: 3px; }
.bubble.qa-a { white-space: pre-wrap; }
.jump-latest.new { background: var(--green); border-color: var(--green); color: #fff; }

/* image viewer (16/36) */
.iv-back { position: fixed; inset: 0; z-index: 9500; background: #000000ee; display: flex; flex-direction: column; }
.iv-top { display: flex; align-items: center; justify-content: space-between; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px; color: #cfd8e3; font-size: 12.5px; }
.iv-x { background: #ffffff18; border: none; color: #fff; width: 34px; height: 34px; border-radius: 10px; font-size: 15px; cursor: pointer; }
.iv-body { flex: 1; overflow: auto; display: flex; align-items: center; justify-content: center; }
.iv-img { max-width: 100%; max-height: 100%; display: block; }
.iv-img.zoomed { max-width: none; max-height: none; width: 230%; }
.iv-nav { display: flex; justify-content: center; gap: 14px; padding: 10px 0 calc(14px + env(safe-area-inset-bottom, 0px)); }
.iv-b { background: #ffffff14; border: 1px solid #ffffff22; color: #fff; min-width: 46px; height: 40px; border-radius: 12px; font-size: 18px; cursor: pointer; }

/* phone position history cards (49) */
.ph-list { display: none; }
.ph-row { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; margin-bottom: 8px; }
.ph-row .l { flex: 1; min-width: 0; }
.ph-row .s { font-size: 13.5px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ph-row .m { color: var(--muted); font-size: 11px; margin-top: 3px; }
.ph-row .r { font-size: 16px; font-weight: 800; flex: none; }

/* closed-trade badges (32): dedicated win/loss colors */
.badge.st-win { background: #12331f; color: var(--green); }
.badge.st-loss { background: #3a1a22; color: var(--red); }

/* position detail modal X (48) */
.modal { position: relative; }
.modal-x { position: absolute; top: 12px; inset-inline-end: 12px; width: 34px; height: 34px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--chip); color: var(--text); font-size: 14px; cursor: pointer; z-index: 2; }

/* loading states (40): boot + tab switches never show a dead void */
.boot-load, .tab-load { display: flex; align-items: center; justify-content: center; min-height: 40vh; }
.spin { width: 34px; height: 34px; border: 3px solid var(--border); border-top-color: var(--accent2);
  border-radius: 50%; animation: spinA .8s linear infinite; }
@keyframes spinA { to { transform: rotate(360deg); } }

/* settings save (24): WhatsApp-style flush bottom bar — opaque, full width,
   never lets content bleed through (same treatment as the chat composer) */
.set-save { position: fixed; inset-inline: 0; bottom: 0; z-index: 800; display: flex; justify-content: flex-end;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--bg2); border-top: 1px solid var(--border); box-shadow: 0 -8px 24px rgba(0, 0, 0, .35); }
.set-save .btn { min-width: 140px; }
.set-sections { padding-bottom: 84px; }
@media (min-width: 921px) {
  [dir="ltr"] .set-save { left: 220px; }
  [dir="rtl"] .set-save { right: 220px; }
}

/* users list layout (22) */
.user-row .u-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.user-row .u-rm { margin-inline-start: auto; }

/* pos card close button (30) */
.pos-close { margin-inline-start: auto; }
.sym-row { display: flex; gap: 8px; }
.sym-row input { flex: 1; }

/* signed numerics must not bidi-flip in RTL (a wrong-side minus misleads) */
.chg, .dchip, .kv .v, .rk .v, .pk .v, .fchip, .lv .p, .lv .d { unicode-bidi: plaintext; }
.action-indent { padding-inline-start: 36px; }

/* ---------- responsive: phones & foldables (same design, adapted) ---------- */
@media (max-width: 920px) {
  #app { flex-direction: column; }
  .sidebar {
    width: 100%; min-width: 0; flex-direction: row; align-items: center;
    padding: 8px 12px; gap: 8px;
    border-inline-end: none; border-bottom: 1px solid var(--border);
  }
  .logo { padding: 0; }
  .logo-sub, .sidebar .spacer { display: none; }
  .side-status { display: flex; gap: 10px; border-top: none; padding: 0; margin-inline-start: auto; font-size: 10px; }
  .side-status > div:nth-child(2) { display: none; }
  .side-dl:not(:empty) { display: flex; gap: 6px; border-top: none; padding: 0; }
  .side-dl .dl-title, .side-dl .dl-lbl { display: none; }
  .side-dl .dl-btn { padding: 6px 8px; font-size: 13px; }
  .side-user:not(:empty) { border-top: none; padding: 0; }
  .side-user .u-chip { display: none; }
  .side-user .lo-lbl { display: none; }
  .user-row { flex-wrap: wrap; }
  .user-row .u-meta { flex-basis: 100%; margin-inline-start: 0; order: 3; }
  .nav-item { padding: 8px 10px; font-size: 13px; }
  .main { padding: 14px; }
  /* horizontal-overflow guards: grid/flex children may never force the page
     wider than the phone screen */
  html, body { max-width: 100vw; overflow-x: hidden; }
  .mw-card, .stat, .card, .pk, .chip { min-width: 0; }
  .mw-card .top { flex-wrap: wrap; row-gap: 3px; }
  .mw-card .px { font-size: 16px; }
  .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .pos-foot .fchip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .main.detail-mode #tabBody { margin: 0 -14px -14px; padding: 12px 14px 14px; }
  .grid { grid-template-columns: 1fr; }
  .mw-strip { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .mw-card { padding: 10px 11px; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .risk-grid { grid-template-columns: repeat(2, 1fr); }
  .pos-grid { grid-template-columns: repeat(2, 1fr); }
  .ana-grid { grid-template-columns: 1fr; }
  .row2, .row3, .set-grid { grid-template-columns: 1fr; }
  .modal { padding: 16px 14px; }
  .detail-head { gap: 8px; }
  .detail-head .page-title { font-size: 16px; }
  .tabs { overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 9px 11px; white-space: nowrap; }
  .chat-wrap { max-width: 100%; }
  .shots img { width: 120px; }
  .page-head { gap: 8px; }
  .tbl th, .tbl td { white-space: nowrap; }   /* tables scroll in their wrapper instead of crushing */
  .msg .meta { flex-wrap: wrap; row-gap: 3px; min-width: 0; }
  .lang-keys span { padding: 3px 8px; }        /* larger touch targets */
  .btn { padding: 9px 14px; }
}
/* normal phones (360-540px): market-watch cards go full width — two columns
   cannot fit the price + state badges + ⏻/✕ buttons without overflowing */
@media (max-width: 540px) {
  /* Settings on a phone were still cramped: card padding tuned for a mouse,
     inputs at desktop height, and section headings the same size as body
     text. The rail was fixed earlier; the CARDS were not. */
  .set-sections > .set-sec, .bs-wrap > .card { padding: 13px 12px; border-radius: 13px; }
  .set-sections h4, .bs-wrap h4 { font-size: 13.5px; margin-bottom: 10px; }
  .set-sections .fld input, .set-sections .fld select,
  .bs-wrap .fld input, .bs-wrap .fld select { height: 42px; font-size: 15px; }
  /* 16px would stop iOS zooming on focus, but 15px + the taller box is the
     compromise that keeps two fields on a 375px row */
  .set-sections .hint, .bs-wrap .hint { font-size: 11.5px; line-height: 1.5; }
  .set-sections .set-grid, .bs-wrap .set-grid { gap: 11px; }
  .bs-wrap { padding-bottom: 92px; }
  /* compact TWO-column market watch on normal phones (single ⋯ button fits);
     folded phones (<=400) drop to one column below */
  .mw-strip { grid-template-columns: 1fr 1fr; gap: 8px; }
  .mw-card { padding: 10px 11px; }
  .mw-card .px { font-size: 15.5px; }
  .mw-card .foot span:first-child { display: none; }   /* funding lives in the detail */
  .mw-btn { width: 32px; height: 32px; }
  /* (2) bottom navigation on phones; the top bar slims to identity + status */
  .bottom-nav { display: flex; }
  .nav-item { display: none; }
  .side-user .lo-lbl { display: none; }
  .side-user .btn { padding: 5px 7px; font-size: 12px; }
  .logo-name, .logo-sub { display: none; }
  .logo-img { width: 32px; height: 32px; }
  /* specificity ≥ the :not(:empty) base rule — downloads live in Settings here */
  .side-dl:not(:empty) { display: none; }
  /* (3) version noise off the top bar (it stays on the login page + Settings) */
  .side-status > div:nth-child(4) { display: none; }
  .side-status { flex-basis: auto; margin-inline-start: auto; }
  .sidebar { flex-wrap: nowrap; }
  .main { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .main.detail-mode #tabBody { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  /* (49) history: cards on, table off */
  .ph-list { display: block; }
  .tbl-card { display: none; }
  .pf-bar .v { font-size: 16px; }
  .pf-bar .upd { display: none; }
  .qa-bar { bottom: calc(52px + env(safe-area-inset-bottom, 0px)); padding-bottom: 9px; }
  .chat-wrap { padding-bottom: 80px; }
  .set-save { bottom: calc(52px + env(safe-area-inset-bottom, 0px)); padding-bottom: 10px; }
  .set-sections { padding-bottom: 92px; }
  .side-status { font-size: 9.5px; gap: 9px; }
  /* the tab strip scrolls — fade its right edge so users KNOW there is more */
  .tabs { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  /* trader-safe touch targets */
  .mw-btn { width: 36px; height: 36px; font-size: 13px; }
  .btn.sm { padding: 10px 14px; }
  .lang-keys { gap: 4px; }
  .lang-keys span { padding: 7px 10px; font-size: 10.5px; }
  .mw-card .state-badge, .mw-card .live { font-size: 10.5px; }
  .ladder { margin-inline: 34px; }            /* room for edge SL/TP labels */
  .ana-flex { flex-wrap: wrap; }
  .ana-leg { min-width: 0; }
  .modal .foot { position: sticky; bottom: 0; background: var(--card); padding: 10px 0 2px; }
  .sidebar { padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
  .action-indent { padding-inline-start: 10px; }
  .ana-card .lv { flex-wrap: wrap; }
  .ana-card .lv .d { flex-basis: 100%; text-align: start; margin-top: 2px; }
  /* the top bar can't fit logo+nav+session+downloads+status on one row:
     let it wrap — status drops to its own compact second row */
  .sidebar { flex-wrap: wrap; row-gap: 4px; }
  .side-status { margin-inline-start: 0; flex-basis: 100%; justify-content: flex-start; gap: 12px; }
  .side-status > div:nth-child(3) { margin-inline-start: auto; }
}
/* very narrow (folded phones ~340-360px) */
@media (max-width: 370px) {
  .mw-strip { grid-template-columns: 1fr; }
  .stat-row, .risk-grid, .pos-grid { grid-template-columns: 1fr 1fr; }
  .kv { grid-template-columns: 1fr 1fr; }
  .msg.action { padding-inline-start: 10px; }
  .action-indent { padding-inline-start: 10px; }
}
/* iOS Safari zooms the page on <16px inputs — keep fields at 16px on phones */
@media (max-width: 430px) {
  input, select, textarea { font-size: 16px; }
}

.lvl-basis { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 9px; display: grid; gap: 4px; }
.lb-title { font-size: 10.5px; font-weight: 800; color: var(--muted); letter-spacing: .3px; margin-bottom: 2px; }
.lb-row { display: flex; gap: 8px; font-size: 11.5px; line-height: 1.5; }
.lb-k { font-weight: 800; flex: 0 0 auto; min-width: 46px; }
.lb-v { color: var(--muted); }

/* ---------------- Claude indicator board ---------------- */
.ind-board { margin-top: 16px; }
.ind-board h4 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ind-sub { font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: .2px; }
.ind-summary { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; }
.ind-tally { font-size: 11.5px; font-weight: 800; padding: 3px 10px; border-radius: 20px; background: var(--bg2, rgba(255,255,255,.03)); border: 1px solid var(--border); }
.ind-tally.act { color: var(--muted); font-weight: 600; }
.ind-tally.act b { color: var(--accent); }
.ind-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 10px; }
.ind-card { border: 1px solid var(--border); border-radius: 11px; padding: 10px 12px; border-inline-start-width: 3px; }
.ind-card.sig-bull { border-inline-start-color: var(--green); }
.ind-card.sig-bear { border-inline-start-color: var(--red); }
.ind-card.sig-flat { border-inline-start-color: var(--muted); }
.ic-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ic-name { font-size: 12px; font-weight: 800; letter-spacing: .2px; }
.ic-sig { font-size: 12px; font-weight: 900; }
.sig-bull .ic-sig { color: var(--green); }
.sig-bear .ic-sig { color: var(--red); }
.sig-flat .ic-sig { color: var(--muted); }
.ic-read { font-size: 12px; line-height: 1.5; margin-bottom: 7px; font-variant-numeric: tabular-nums; }
.ic-rule { font-size: 11px; line-height: 1.5; color: var(--muted); border-top: 1px dashed var(--border); padding-top: 6px; }
.ic-arrow { color: var(--accent); font-weight: 800; }
/* phones: 16 full cards = a 2-metre wall. Compact rows, rule opens on tap. */
@media (max-width: 540px) {
  .ind-grid { grid-template-columns: 1fr; gap: 6px; }
  .ind-card { padding: 8px 11px; border-radius: 9px; cursor: pointer; }
  .ic-top { margin-bottom: 3px; }
  .ic-name { font-size: 11.5px; }
  .ic-read { font-size: 11.5px; line-height: 1.4; margin-bottom: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ic-rule { display: none; margin-top: 7px; }
  .ind-card.open .ic-rule { display: block; }
  .ind-card.open .ic-read { -webkit-line-clamp: unset; }
  .ic-chev { font-size: 10px; color: var(--muted); transition: transform .15s; }
  .ind-card.open .ic-chev { transform: rotate(180deg); }
  .ind-summary { gap: 6px; margin-bottom: 10px; }
  .ind-tally { font-size: 10.5px; padding: 3px 8px; }
  .ind-board h4 { font-size: 14px; }
  .ind-sub { font-size: 10px; }
}
/* the chevron only means something on phones */
.ic-chev { display: none; }
@media (max-width: 540px) { .ic-chev { display: inline; } }

/* coin card: "TV layout not arranged yet" warning badge */
.tv-warn { font-size: 9.5px; font-weight: 800; letter-spacing: .3px; padding: 2px 7px; border-radius: 20px;
  background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); white-space: nowrap; cursor: help; }

/* ---------------- guided tour (TradingView guide) ---------------- */
.tour-body { text-align: center; padding: 10px 6px 4px; min-height: 210px; }
.tour-ico { font-size: 44px; margin-bottom: 6px; }
.tour-step { font-size: 10.5px; font-weight: 800; letter-spacing: 1px; color: var(--muted); margin-bottom: 8px; }
.tour-title { font-size: 17px; font-weight: 800; margin-bottom: 10px; }
.tour-text { font-size: 13px; line-height: 1.65; color: var(--muted); text-align: start; }
.tour-dots { display: flex; justify-content: center; gap: 7px; padding: 10px 0 2px; }
.tour-dots .td { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.tour-dots .td.on { background: var(--accent); }

/* ---------------- Binance API permission checklist ---------------- */

/* ---------------- coin picker volatility board ---------------- */
.vol-hot { color: var(--accent); font-weight: 800; }
.vol-warm { color: var(--amber); font-weight: 700; }
.vol-cool { color: var(--muted); }
.pick-row { display: flex; align-items: center; gap: 8px; }
.pick-row .p-sym { flex: 0 0 auto; }
.pick-row .p-meta { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.pick-row .p-chg.up { color: var(--green); }
.pick-row .p-chg.dn { color: var(--red); }
.sort-chips { display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; flex-wrap: wrap; row-gap: 7px; }
.sort-chips .sc { padding: 4px 12px; border: 1px solid var(--border); border-radius: 20px; font-size: 11.5px; font-weight: 700; cursor: pointer; color: var(--muted); }
.sort-chips .sc.active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.sort-chips .sc-live { margin-inline-start: auto; font-size: 10px; font-weight: 800; letter-spacing: .5px; color: var(--green); display: flex; align-items: center; }

/* ---------------- Trust Wallet ---------------- */
.wl-purpose { border: 1px dashed var(--border); border-radius: 10px; padding: 10px 14px; font-size: 12.5px; }
.wl-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wl-sum-card .k { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.wl-sum-card .v { font-size: 26px; font-weight: 800; }
.wl-sum-card .v small { font-size: 13px; color: var(--muted); font-weight: 700; }
.wl-sum-card .hint { margin-top: 8px; }
.wl-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.wl-row:last-child { border-bottom: none; }
.wl-bot { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
.wl-bot b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-mid { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 1 auto; min-width: 0; }
.wl-amt { font-weight: 800; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.wl-note { font-size: 10.5px; color: var(--muted); text-align: end; }
.wl-row .btn[disabled] { opacity: .45; cursor: not-allowed; }
.wl-ledger { display: flex; flex-direction: column; }
.wl-lrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.wl-lrow:last-child { border-bottom: none; }
.wl-ltime { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.wl-lbot { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.wl-lamt { margin-inline-start: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.wl-lkind { font-size: 11px; }
.wl-lst { font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 20px; letter-spacing: .4px; }
.wl-lst.ok { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.wl-lst.err { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }
.wl-lst.pend { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }
.wl-ltx { font-size: 10.5px; }
.wl-lerr { flex-basis: 100%; font-size: 11px; color: var(--red); padding-inline-start: 2px; }
.pv-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.pv-row span { color: var(--muted); }
.pv-row.pv-net { border-bottom: none; font-size: 15px; }
.pv-row.pv-net b { font-size: 17px; }
@media (max-width: 540px) {
  .wl-summary { grid-template-columns: 1fr; }
  .wl-sum-card .v { font-size: 22px; }
  .wl-row { flex-wrap: wrap; }
  .wl-bot { flex-basis: 100%; }
  .wl-mid { align-items: flex-start; flex: 1 1 auto; }
  .wl-note { text-align: start; }
  .wl-lbot { max-width: 110px; }
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }
.be-pin .flag { font-size: 9px; font-weight: 800; }

/* ---------------- position history: filters, day pager, reasons ---------------- */
.ph-filters { padding: 12px 14px; margin-bottom: 10px; }
.ph-frow { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.ph-frow .fld.sm { flex: 1 1 130px; min-width: 110px; font-size: 11px; }
.ph-frow .fld.sm select { padding: 6px 8px; font-size: 12px; }
.ph-frow .btn.sm { height: 32px; }
.sort-chips .ph-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
.ph-day { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 10px; }
.ph-dmain { flex: 1; min-width: 0; }
/* the popup a select opens is drawn by the browser, not by this stylesheet —
   it only obeys the element's own colour scheme and the option colours */
select { color-scheme: dark; }
[data-theme="light"] select { color-scheme: light; }
select option {
  background: var(--card);
  color: var(--text);
}
/* a transparent control resolves as a LIGHT popup in Chromium, so the day
   picker keeps a real background even though it reads as bare text */
.ph-dsel { background: var(--card); border: 0; color: var(--text); font-size: 14px;
  font-weight: 800; padding: 2px 4px; border-radius: 7px; max-width: 100%; }
.ph-dsel:hover { background: var(--chip); }
.ph-dsub { font-size: 11.5px; color: var(--muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
.ph-dpage { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rsn { display: inline-block; font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 2px 8px; border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.rsn-tp { color: var(--green); border-color: var(--green); }
.rsn-sl { color: var(--red); border-color: var(--red); }
.rsn-claude { color: var(--accent2); border-color: var(--accent2); }
.rsn-band { color: var(--amber); border-color: var(--amber); }
/* through tokens, so the light theme gets a darker ink for the same hue —
   the literals below were picked against a near-black card and dropped to
   about 2.9:1 on a white one, under the 4.5:1 a 10.5px bold pill needs */
.rsn-liq { color: var(--violet); border-color: var(--violet); }
.rsn-manual { color: var(--accent2); border-color: var(--accent2); }
.rsn-reconciled { color: var(--indigo); border-color: var(--indigo); }
@media (max-width: 620px) {
  .ph-frow .fld.sm { flex: 1 1 45%; }
  .ph-day { gap: 8px; padding: 9px 11px; }
  .ph-dsel { font-size: 12.5px; }
  .ph-dsub { font-size: 10.5px; }
}
/* ---------------- position brain (chat side panel) ----------------
   Three shapes, one panel:
     >=1200px  docked column beside the chat (sticky, scrolls with nothing)
     541-1199  overlay drawer from the inline end, with a scrim
     <=540px   a peek bar above the composer that grows into a sheet
   The phone shape is deliberate: the headline (net after fees + Claude's last
   call) is ALWAYS on screen, and the full journal is one tap or thumb-drag
   away — no navigating away from the conversation to see what the bot thinks. */
.chat-stage { position: relative; }

.brain-pull { position: fixed; inset-inline-end: 0; top: 50%; transform: translateY(-50%);
  z-index: 810; display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 14px 7px; border: 1px solid var(--border); border-inline-end: 0;
  border-radius: 12px 0 0 12px; background: var(--card); color: var(--muted);
  cursor: pointer; font: inherit; box-shadow: -4px 0 16px rgba(0,0,0,.28); }
.brain-pull:hover { color: var(--text); border-color: var(--accent2); }
/* with a trade running the handle stops whispering: accent colours, a wider
   tab and a soft glow, because a panel nobody can find is a panel nobody uses */
.brain-pull.live { color: var(--text); border-color: var(--accent2); padding: 18px 9px;
  background: color-mix(in srgb, var(--accent2) 14%, var(--card));
  box-shadow: -6px 0 22px color-mix(in srgb, var(--accent2) 30%, transparent); }
.brain-btn.on { border-color: var(--accent2); color: var(--accent2); }
.brain-pull .bp-ico { font-size: 17px; line-height: 1; }
.brain-pull .bp-txt { writing-mode: vertical-rl; font-size: 10.5px; font-weight: 800;
  letter-spacing: .6px; text-transform: uppercase; }
[dir="rtl"] .brain-pull .bp-txt { writing-mode: vertical-lr; }
/* a live trade puts a pulse on the handle so the panel advertises itself */
.brain-pull.live .bp-ico::after { content: ""; position: absolute; inset-block-start: 9px;
  inset-inline-start: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 70%, transparent); animation: brainPulse 2.4s infinite; }
@keyframes brainPulse { 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.brain-scrim { position: fixed; inset: 0; z-index: 880; background: rgba(0,0,0,.5);
  opacity: 0; pointer-events: none; transition: opacity .22s; }
.brain-scrim.on { opacity: 1; pointer-events: auto; }

.brain { position: fixed; z-index: 900; inset-block: 0; inset-inline-end: 0;
  width: min(380px, 92vw); display: flex; flex-direction: column;
  background: var(--bg2); border-inline-start: 1px solid var(--border);
  transform: translateX(102%); transition: transform .26s cubic-bezier(.22,.8,.3,1); }
[dir="rtl"] .brain { transform: translateX(-102%); }
.brain.on { transform: none; }
.brain-peek { display: none; }
.brain-head { flex: none; display: flex; align-items: center; gap: 9px; padding: 13px 14px;
  border-bottom: 1px solid var(--border); font-size: 13.5px; }
.brain-sym { font-size: 11px; font-weight: 800; }
.brain-x { margin-inline-start: auto; background: transparent; border: 0; color: var(--muted);
  font-size: 15px; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.brain-x:hover { color: var(--text); background: var(--card); }
.brain-body { flex: 1; min-height: 0; overflow-y: auto; padding: 13px 14px 20px; }

.brain-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.bn { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.bn .k { font-size: 10.5px; color: var(--muted); font-weight: 700; }
.bn .v { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 1px; }
.bn .v.amber { color: var(--amber); }
.bn .v .sep { color: var(--muted); font-weight: 400; }
.bn .s { font-size: 10px; color: var(--muted); margin-top: 2px; }
.brain-fee { margin-top: 9px; font-size: 11px; color: var(--muted); line-height: 1.5;
  border: 1px dashed var(--border); border-radius: 9px; padding: 7px 10px; }

.brain-sec { margin-top: 15px; }
.bs-h { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); margin-bottom: 7px; display: flex; align-items: center; gap: 7px; }
.bs-n { background: var(--card); border: 1px solid var(--border); border-radius: 999px;
  padding: 0 7px; font-size: 10px; }
.bs-body { font-size: 12.5px; line-height: 1.6; color: var(--text); }

.brain-log { list-style: none; margin: 0; padding: 0; position: relative; }
.brain-log::before { content: ""; position: absolute; inset-block: 6px; inset-inline-start: 4px;
  width: 2px; background: var(--border); }
.bl { position: relative; padding-inline-start: 18px; padding-bottom: 13px; }
.bl::before { content: ""; position: absolute; inset-inline-start: 0; top: 5px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--bg2); border: 2px solid var(--border); }
.bl.newest::before { border-color: var(--accent2); background: var(--accent2); }
.bl-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.bl-act { font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 1px 8px;
  border: 1px solid var(--border); color: var(--muted); }
.bl-act.a-hold { color: var(--muted); }
.bl-act.a-close { color: var(--red); border-color: var(--red); }
.bl-act.a-upd { color: var(--amber); border-color: var(--amber); }
.bl-act.a-cancel { color: var(--red); border-color: var(--border); }
.bl-conf { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bl-t { margin-inline-start: auto; font-size: 10.5px; color: var(--muted); }
.bl-basis { font-size: 11px; color: var(--accent2); margin-top: 4px; line-height: 1.45; }
.bl-c { font-size: 12px; color: var(--muted); line-height: 1.55; margin-top: 4px; cursor: pointer;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bl-c.open { -webkit-line-clamp: unset; }
.brain-empty { text-align: center; padding: 34px 10px; }
.brain-empty .be-ico { font-size: 34px; margin-bottom: 10px; }
.brain-empty p { font-size: 13px; font-weight: 700; margin-bottom: 6px; }

/* --- wide: dock it beside the chat instead of floating over it --- */
@media (min-width: 1200px) {
  .chat-stage.brain-open { display: grid; grid-template-columns: minmax(0, 1fr) 344px; gap: 20px; align-items: start; }
  .chat-stage.brain-open .chat-wrap { max-width: none; }
  .chat-stage.brain-open .brain { position: sticky; top: 0; inset-block: auto; width: auto;
    transform: none; max-height: calc(100vh - 215px); border: 1px solid var(--border);
    border-radius: 14px; }
  .chat-stage.brain-open .brain-pull, .chat-stage.brain-open .brain-scrim { display: none; }
}

/* --- phone: a peek bar riding above the composer, growing into a sheet --- */
@media (max-width: 540px) {
  .brain-pull { display: none; }
  .brain { inset-inline: 0; inset-block-start: auto;
    inset-block-end: calc(52px + 60px + env(safe-area-inset-bottom, 0px));
    width: auto; height: 54px; max-height: 54px; transform: none;
    border: 1px solid var(--border); border-bottom: 0;
    border-radius: 16px 16px 0 0; overflow: hidden;
    box-shadow: 0 -10px 30px rgba(0,0,0,.45);
    transition: height .28s cubic-bezier(.22,.8,.3,1), max-height .28s cubic-bezier(.22,.8,.3,1); }
  [dir="rtl"] .brain { transform: none; }
  .brain.on { height: min(68vh, 520px); max-height: min(68vh, 520px); }
  .brain-peek { display: flex; align-items: center; gap: 9px; width: 100%; height: 54px;
    padding: 0 14px; background: transparent; border: 0; color: var(--text);
    font: inherit; cursor: pointer; position: relative; flex: none; }
  .brain-peek::before { content: ""; position: absolute; top: 6px; inset-inline: 0; margin: 0 auto;
    width: 34px; height: 4px; border-radius: 2px; background: var(--border); }
  .pk-sym { font-size: 12px; font-weight: 800; }
  .pk-net { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
  .pk-act { margin-inline-start: auto; font-size: 10.5px; font-weight: 800; border-radius: 999px;
    padding: 2px 9px; border: 1px solid var(--border); color: var(--muted); }
  .pk-act.a-close { color: var(--red); border-color: var(--red); }
  .pk-act.a-upd { color: var(--amber); border-color: var(--amber); }
  .pk-grip { width: 9px; height: 9px; border-inline-end: 2px solid var(--muted);
    border-block-start: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .26s; }
  .brain.on .pk-grip { transform: rotate(135deg); }
  .brain.on .brain-peek::before { background: var(--accent2); }
  .brain-head { display: none; }
  .brain.on .brain-head { display: flex; }
  .brain-scrim { display: none; }
  /* the last message must clear the peek bar as well as the composer */
  .chat-wrap { padding-bottom: 132px; }
  .brain-nums { grid-template-columns: 1fr 1fr; }
  .brain-body { padding: 11px 13px 18px; }
}

/* folded phones and other very narrow screens: two columns still fit, but
   only because the tiles are allowed to go single-column below 330px */
@media (max-width: 330px) {
  .brain-nums { grid-template-columns: 1fr; }
  .pk-sym { display: none; }
}
/* open sheet: the peek bar stops repeating what the header already says and
   becomes just the grab strip */
@media (max-width: 540px) {
  .brain.on .brain-peek { height: 30px; }
  .brain.on .pk-sym, .brain.on .pk-net, .brain.on .pk-act { display: none; }
  .brain.on .pk-grip { margin-inline-start: auto; }
}

/* last-resort placement: used only when the panel opened somewhere the user
   cannot see it. Explicit and !important on purpose — this is the fallback. */
.brain.brain-rescued {
  position: fixed !important; inset-block: 0 !important; inset-inline-end: 0 !important;
  inset-inline-start: auto !important; width: min(380px, 92vw) !important;
  height: auto !important; max-height: none !important;
  transform: none !important; z-index: 9500 !important;
  display: flex !important; opacity: 1 !important; visibility: visible !important;
  border-inline-start: 1px solid var(--border); box-shadow: -12px 0 40px rgba(0,0,0,.55);
}
@media (max-width: 540px) {
  .brain.brain-rescued { inset-block-start: auto !important;
    inset-block-end: calc(52px + 60px + env(safe-area-inset-bottom, 0px)) !important;
    inset-inline: 0 !important; width: auto !important; height: min(68vh, 520px) !important; }
}
/* ---------------- exit ladder, candle clock and hand-controls ---------------- */
.pk .v.neg-soft { color: var(--amber); }
.pk .v.small .rung { display: inline-block; font-size: 11.5px; font-weight: 700; margin-inline-end: 6px;
  padding: 1px 7px; border: 1px solid var(--border); border-radius: 999px; font-variant-numeric: tabular-nums; }
.mx-pin .flag { font-size: 9px; font-weight: 800; letter-spacing: .3px; }
.candle-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card); font-size: 11.5px; margin-inline-end: 4px; }
.candle-chip i { font-style: normal; color: var(--accent2); font-size: 9px; }
.candle-chip span { color: var(--muted); font-weight: 600; }
.candle-chip b { font-variant-numeric: tabular-nums; font-weight: 700; }
.pos-half { border-color: var(--accent2); color: var(--accent2); }
.pos-freeze.on { border-color: var(--amber); color: var(--amber); }
.fld.chk { display: flex; align-items: flex-start; gap: 9px; flex-direction: row; flex-wrap: wrap; }
.fld.chk input { width: 16px; height: 16px; margin-top: 2px; flex: none; }
.fld.chk .hint { flex-basis: 100%; margin: 2px 0 0; }
@media (max-width: 620px) {
  .candle-chip { padding: 2px 7px; font-size: 11px; }
  .pos-half, .pos-freeze { font-size: 11px; padding: 3px 8px; }
}

/* profit & loss per coin */
.coin-table { display:flex; flex-direction:column; gap:2px; overflow-x:auto; }
.coin-row { display:grid; grid-template-columns:minmax(110px,1.4fr) .7fr .7fr 1fr minmax(90px,1.2fr) .9fr 1.4fr;
  gap:10px; align-items:center; padding:7px 8px; border-radius:7px; font-size:13px; min-width:640px; }
/* theme tokens, not white-on-white: these were invisible in the light theme */
.coin-row:nth-child(odd of :not(.head)) { background:var(--bg2); }
.coin-row.head { font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); padding-bottom:2px; }
.coin-row .sym { font-weight:700; }
.coin-row .num { font-variant-numeric:tabular-nums; }
.coin-row .mut { color:var(--muted); }
.coin-row .small { font-size:11.5px; }
.coin-row .open-dot { color:var(--accent2); font-size:9px; vertical-align:middle; }
.coin-row.sub-open { padding-top:0; padding-bottom:9px; font-size:12px; background:none; }
.coin-bar { position:relative; display:block; height:8px; border-radius:4px; background:var(--bg2); border:1px solid var(--border); }
.coin-bar .axis { position:absolute; left:50%; top:-2px; bottom:-2px; width:1px; background:var(--muted); opacity:.55; }
.coin-bar .fill { position:absolute; top:0; bottom:0; border-radius:4px; }
/* the candle pill, when a cooldown is holding the door shut */
.candle-chip.held { opacity:.72; }
.candle-chip b { font-variant-numeric:tabular-nums; }
.candle-chip.held i { color:var(--amber); }
@media (max-width: 720px) { .coin-row { min-width:560px; } }
/* the pill's second number: what the entry is actually waiting for */
.candle-chip u { text-decoration:none; margin-inline-start:6px; padding-inline-start:6px;
  border-inline-start:1px solid var(--border); color:var(--amber); font-weight:700;
  font-variant-numeric:tabular-nums; }
.candle-chip u::before { content:"⏳"; margin-inline-end:3px; font-size:.85em; }

/* a modal on a phone must clear the bottom nav, not hide behind it */
@media (max-width: 720px) {
  .modal-back { padding: 12px 12px calc(72px + env(safe-area-inset-bottom, 0px)); align-items: flex-end; }
  .modal { max-height: calc(88dvh - 72px); width: 100%; }
}

/* a ladder rung that has already paid out */
.rung.hit { color: var(--green); border-color: var(--green); font-weight: 800; }
.rung.hit::after { content: none; }

/* the coins Claude read and passed over */
.passed-box { margin-top: 10px; padding: 9px 11px; border-radius: 9px;
  background: var(--bg2); border: 1px solid var(--border); }
.passed-box .t { font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px; }
.passed { display: grid; grid-template-columns: minmax(80px, auto) 1fr; gap: 10px;
  align-items: baseline; padding: 3px 0; font-size: 12.5px; }
.passed + .passed { border-top: 1px solid var(--border); }
.passed b { color: var(--text); font-weight: 700; }
.passed span { color: var(--muted); }
@media (max-width: 520px) { .passed { grid-template-columns: 1fr; gap: 2px; } }

/* a position whose job is already banked — the one tile allowed to look
   settled rather than urgent */
.pos-grid .pk.tg-ok { border-color: rgba(34,197,94,.45); background: rgba(34,197,94,.07); }
.pos-grid .pk.tg-ok .v { color: var(--green); }

/* money coming IN reads green and signed — a deposit sitting in the same
   list as withdrawals must never be scannable as one */
.wl-ledger .wl-lamt.wl-in { color: var(--green); }

/* a manage row whose position has since closed — history, not a live claim */
.msg.user .meta .chip-closed { margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 11px; background: var(--chip, rgba(148,163,184,.16)); color: var(--muted); }

/* Gate card. The switches here decide whether a trade happens at all, so
   they get finger-sized targets rather than the 19px the other rows use. */
.gate-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gate-head h4 { margin: 0; }
.set-card .gate-sw { min-height: 44px; display: flex; align-items: center; gap: 10px; }
.set-card .gate-sw .sw-track { width: 46px; height: 26px; }
.set-card .gate-sw .sw-knob { width: 20px; height: 20px; }
.set-card .gate-sw input:checked + .sw-track .sw-knob { transform: translateX(20px); }
.gate-count { margin-bottom: 10px; }
.gate-count.gate-dirty { color: var(--warn, #f59e0b); font-weight: 600; }
@media (max-width: 640px) {
  .set-card .gate-sw .sw-track { width: 52px; height: 30px; }
  .set-card .gate-sw .sw-knob { width: 24px; height: 24px; }
  .set-card .gate-sw input:checked + .sw-track .sw-knob { transform: translateX(22px); }
}

/* Prompt editor. The diff is the part that matters: "are you sure" is a
   useless question if you cannot see what you changed. */
.pr-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 10px; }
.pr-tab { padding: 8px 12px; min-height: 40px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--card); color: var(--muted); cursor: pointer; font-size: 13px; }
.pr-tab.on { color: var(--text); border-color: var(--accent, #d97706); background: var(--bg2, rgba(217,119,6,.08)); }
.pr-dot { color: var(--warn, #f59e0b); }
.pr-desc { margin-bottom: 8px; }
.pr-warn { margin: 8px 0; padding: 8px 10px; border-radius: 8px; font-size: 13px;
  background: rgba(245,158,11,.12); color: var(--warn, #f59e0b); }
.pr-view, .pr-area { width: 100%; box-sizing: border-box; margin-top: 8px; max-height: 46vh;
  overflow: auto; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, monospace;
  font-size: 12.5px; line-height: 1.55; background: var(--bg2, rgba(0,0,0,.18)); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.pr-area { min-height: 46vh; resize: vertical; }
.pr-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }
.pd { margin-top: 8px; max-height: 46vh; overflow: auto; border: 1px solid var(--line);
  border-radius: 10px; font-family: ui-monospace, monospace; font-size: 12.5px; }
.pd-row { display: flex; gap: 8px; padding: 1px 10px; white-space: pre-wrap; word-break: break-word; }
.pd-mark { flex: 0 0 1ch; opacity: .6; }
.pd-same { color: var(--muted); }
.pd-add { background: rgba(34,197,94,.12); color: var(--green); }
.pd-del { background: rgba(239,68,68,.12); color: var(--red); }
.pd-gap { padding: 2px 10px; color: var(--muted); opacity: .6; }
@media (max-width: 640px) { .pr-view, .pr-area, .pd { max-height: 40vh; } .pr-area { min-height: 40vh; } }

/* Sprint progress — the counter the owner asked to be able to watch. */
.sprint-bar { height: 8px; border-radius: 999px; background: var(--line);
  overflow: hidden; margin: 10px 0 6px; }
.sprint-fill { height: 100%; background: var(--accent, #d97706); transition: width .3s ease; }

/* the sprint counter on the dashboard card */
.sprint-strip { margin-top: 10px; }

/* shadow model picker: more than one model may answer the same prompt */
.shadow-pick { display: flex; flex-direction: column; gap: 8px; }
.shadow-pick .sw { min-height: 40px; }

/* the gates card with its master switch down: the dials are still there,
   still editable, but nothing reads them until the switch comes back up */
.set-card.gates-down .set-grid,
.set-card.gates-down .gate-sw,
.set-card.gates-down .gate-sw + .hint { opacity: .42; }
.gate-master { margin-top: 2px; }

/* a re-baseline is a marker, not a transfer: no sign, no money colour */
.wl-lamt.wl-mark { opacity: .6; font-style: italic; }

/* BOT SETTINGS: use the window it is given.
 *
 * .bs-wrap also carries .set-sections, whose max-width: 760px is right for
 * the system settings — one narrow column of prose-ish sections. The bot
 * page is a dozen short cards, and in that column they became a very long
 * scroll with the rest of the window empty beside it.
 *
 * auto-fit rather than auto-fill so a single card still stretches, and
 * align-items:start so a short card next to a tall one keeps its own height
 * instead of growing to match it. */
.bs-wrap {
  max-width: 1320px;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  align-items: start;
}
/* identity and the coin picker read across, so they take the whole row */
.bs-wrap > .bs-wide { grid-column: 1 / -1; }
.bs-wrap > .set-save { grid-column: 1 / -1; }
/* A card in a three-column layout is ~430px, and two fields inside it are
 * ~195px each — workable. At 1100px the columns narrow to 356 and the fields
 * to 159, where a label like "Margin per position (USDT)" wraps to three
 * lines. auto-fit lets the inner grid fall to ONE field per row exactly when
 * that happens. Scoped to .bs-wrap: the system settings page is a single 760px
 * column where auto-fit would give four fields per row instead of two. */
.bs-wrap .set-grid { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
@media (max-width: 900px) {
  .bs-wrap { grid-template-columns: 1fr; max-width: 760px; }
}

/* A position whose every unit has already left. The card cannot show live
   distances to a stop that guards nothing, and it must not look like it is
   simply idle — it is finished, and the books are catching up. */
.prot-tag.pos-drained {
  color: var(--good, #4ade80);
  border-color: color-mix(in srgb, var(--good, #4ade80) 45%, transparent);
  font-weight: 600;
}


/* ═══ SPOT ═════════════════════════════════════════════════════════════════
 * Every bot on the desk trades spot, and its card says so in gold. */
:root, [data-theme="dark"] { --sp: #d9a441; --sp-soft: #d9a44122; --sp-line: #d9a44155; }
[data-theme="light"] { --sp: #a9761b; --sp-soft: #a9761b18; --sp-line: #a9761b44; }
.badge.sp-badge { background: var(--sp-soft); color: var(--sp); border: 1px solid var(--sp-line); }

/* a start that failed, with the one button that fixes the common case */
.boot-fail { padding: 60px 20px; }
.boot-fail h3 { margin-bottom: 8px; }
.boot-fail p { color: var(--muted); max-width: 460px; margin: 0 auto 18px; line-height: 1.55; }

/* ═══ KAYAGLOBAL API'S (settings tab — design only for now) ═════════════════ */
.kg-card h4 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kg-soon { font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; color: var(--accent2);
  background: color-mix(in srgb, var(--accent2) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent2) 35%, transparent); }
.kg-status { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12.5px;
  padding: 8px 11px; border-radius: 9px; background: var(--card2); border: 1px solid var(--border); }
.kg-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--muted) 18%, transparent); flex: none; }
.kg-card input:disabled { opacity: .6; cursor: not-allowed; }
.kg-list { margin-top: 14px; border: 1px dashed var(--border); border-radius: 10px; padding: 10px 12px; }
.kg-list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.kg-empty { color: var(--muted); font-size: 12.5px; padding: 14px 0 6px; text-align: center; }
.kg-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.kg-foot button:disabled { opacity: .55; cursor: not-allowed; }