/* ═══════════════════════════════════════════════════════════════════════
   main.css — Shim / catch-all
   All component styles have been moved to their dedicated files:
     theme.css       → design tokens (variables, fonts, keyframes)
     base.css        → login, topbar, tabs, symbol bar, content, status bar
     exchanges.css   → Exchanges tab
     signal.css      → Signal tab, Liquidity tab, exchange toggle pills
     chart.css       → Chart tab, order book, trades tape
     calculator.css  → Trade Calc tab
     bot.css         → Bot tab, user cards, connect wizard
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Global resets (supplement theme.css) ────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  height: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
/* Anything numeric or code stays monospace */
.mono, table, .factor-table, .ob-row, .tape-row,
#ob-mid-price, #ob-mid-dir, #ob-spread, #ob-spread-pct,
#ob-imbal-num, .tick-btn, .ob-price, .ob-usd, .ob-cum-val,
.tape-price, .tape-qty, .tape-time, #clock,
.sig-stat .s-val, .cell .c-val, .ob-val { font-family: var(--mono); }

/* ── Header ─────────────────────────────────────────────────────────────── */
#topbar {
  display: flex; align-items: stretch; height: 48px;
  background: var(--green); border-bottom: 3px solid var(--green-lt);
  padding: 0 20px; z-index: 100;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  color: #ffffff; font-size: 13px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding-right: 24px; border-right: 1px solid rgba(255,255,255,.2); margin-right: 8px;
  white-space: nowrap;
}
.pulse-dot { width: 7px; height: 7px; background: #7fff9a; border-radius: 50%; animation: pulse 2s infinite; flex-shrink: 0; }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.3} }
#clock { display: flex; align-items: center; color: rgba(255,255,255,.85); font-size: 12px; letter-spacing: .06em; margin-left: auto; white-space: nowrap; }

/* ── Tabs in header ─────────────────────────────────────────────────────── */
#tabs { display: flex; align-items: stretch; flex: 1; }
.tab {
  display: flex; align-items: center;
  padding: 0 22px; background: none; border: none; border-bottom: 3px solid transparent;
  color: rgba(255,255,255,.6); font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: all .15s;
  white-space: nowrap;
}
.tab:hover  { color: rgba(255,255,255,.9); }
.tab.active { color: #ffffff; border-bottom-color: #7fff9a; }

/* ── Symbol Bar ─────────────────────────────────────────────────────────── */
#symbol-bar {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg1); border-bottom: 1px solid var(--border);
  padding: 5px 16px; overflow-x: auto;
}
#symbol-bar::-webkit-scrollbar { display: none; }
.bar-label { color: var(--dim); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.divider   { width: 1px; height: 18px; background: var(--border2); margin: 0 4px; flex-shrink: 0; }
#symbol-select { background: #fff; border: 1px solid var(--border2); color: var(--green); font-family: var(--mono); font-size: 12px; font-weight: 600; padding: 3px 8px; cursor: pointer; outline: none; }
#symbol-select:focus { border-color: var(--green); }
#quick-pills { display: flex; gap: 5px; }
.pill { padding: 2px 9px; border: 1px solid var(--border2); color: var(--dim); font-size: 11px; cursor: pointer; white-space: nowrap; transition: all .15s; letter-spacing: .04em; background: #fff; }
.pill:hover, .pill.active { border-color: var(--green); color: var(--green); background: var(--green-bg); font-weight: 600; }

/* ── Content ────────────────────────────────────────────────────────────── */
#content { height: calc(100vh - 48px - 32px - 24px); overflow-y: auto; padding: 16px; background: var(--bg); }
#content::-webkit-scrollbar { width: 4px; }
#content::-webkit-scrollbar-thumb { background: var(--border2); }
.panel { display: none; }
.panel.active { display: block; }

/* ── Shared ─────────────────────────────────────────────────────────────── */
.section-title { color: var(--dim); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.section-title span { color: var(--green); }
.no-data { text-align: center; color: var(--dim); padding: 40px; font-size: 12px; letter-spacing: .1em; }
.no-data strong { display: block; color: var(--green); margin-bottom: 8px; font-size: 14px; }
.tag { display: inline-block; padding: 2px 8px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.tag.long    { background: var(--green-bg); color: var(--green);  border: 1px solid var(--green); }
.tag.short   { background: var(--red-bg);   color: var(--red);    border: 1px solid var(--red); }
.tag.notrade { background: var(--bg2);       color: var(--dim);    border: 1px solid var(--border2); }
.cell-grid { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); }
.cell { background: #fff; padding: 11px 13px; }
.cell .c-lbl { color: var(--dim); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.cell .c-val { font-size: 16px; font-weight: 600; color: var(--white); }
.cell .c-sub { font-size: 12px; color: var(--dim); margin-top: 2px; }
.pos  { color: var(--green) !important; }
.neg  { color: var(--red)   !important; }
.amber{ color: var(--amber) !important; }
.dim  { color: var(--dim); }
.skeleton { background: linear-gradient(90deg,var(--bg2) 25%,var(--bg3) 50%,var(--bg2) 75%); background-size:200%; animation: shimmer 1.5s infinite; }
@keyframes shimmer { 0%{background-position:200% 0}100%{background-position:-200% 0} }

/* ── Exchange Cards ─────────────────────────────────────────────────────── */
.avg-section { text-align: center; padding: 24px 0 18px; border-bottom: 2px solid var(--border); margin-bottom: 16px; background: #fff; border: 1px solid var(--border); padding: 24px; margin-bottom: 16px; }
.avg-label   { color: var(--dim); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
.avg-price   { font-size: 48px; font-weight: 600; color: var(--green); letter-spacing: -.03em; line-height: 1; }
.avg-stats   { display: flex; justify-content: center; gap: 40px; margin-top: 14px; flex-wrap: wrap; }
.avg-stat .as-lbl { color: var(--dim); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 3px; }
.avg-stat .as-val { font-size: 14px; font-weight: 600; color: var(--white); }

.arb-bar { display: flex; gap: 32px; background: var(--green-bg); border: 1px solid var(--green); border-left: 4px solid var(--green); padding: 12px 18px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.arb-item .arb-lbl { color: var(--dim); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 3px; }
.arb-item .arb-val { font-size: 13px; font-weight: 600; color: var(--white); }

#exchange-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.ex-card { background: #fff; padding: 14px 16px; transition: background .15s; border-left: 3px solid transparent; }
.ex-card:hover { background: var(--bg1); border-left-color: var(--green); }
.ex-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ex-name { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--green); font-weight: 700; }
.ex-rank { font-size: 11px; color: var(--dimmer); margin-left: 4px; }
.ex-badge { font-size: 10px; padding: 2px 6px; background: var(--green-bg); color: var(--green); border: 1px solid var(--green); letter-spacing: .06em; font-weight: 600; }
.ex-badge.offline { background: var(--red-bg); color: var(--red); border-color: var(--red); }
.ex-price { font-size: 22px; font-weight: 700; color: var(--white); letter-spacing: -.01em; margin-bottom: 10px; transition: color .3s; }
.ex-price.up   { color: var(--green); }
.ex-price.down { color: var(--red); }
.ex-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.ex-row-item .er-lbl { color: var(--dimmer); font-size: 11px; margin-bottom: 1px; }
.ex-row-item .er-val { font-size: 13px; font-weight: 500; color: var(--white); }
.ex-vol-bar { height: 3px; background: var(--bg3); margin-top: 10px; }
.ex-vol-fill { height: 100%; background: var(--green); transition: width .5s ease; opacity: .6; }

/* ── Signal ─────────────────────────────────────────────────────────────── */
#signal-wrap { background: #fff; border: 1px solid var(--border); padding: 20px; }
.sig-top { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 20px; }
.sig-stat .s-lbl { color: var(--dim); font-size: 11px; margin-bottom: 4px; }
.sig-stat .s-val { font-size: 20px; font-weight: 600; color: var(--white); }
.score-bar { background: var(--border); height: 6px; margin: 4px 0 20px; position: relative; }
.score-fill { position: absolute; top: 0; height: 100%; transition: all .5s ease; }
.score-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--dim); letter-spacing: .1em; margin-bottom: 4px; }
.factor-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.factor-table th { text-align: left; color: var(--dim); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 6px 8px; border-bottom: 2px solid var(--border); font-weight: 500; background: var(--bg1); }
.factor-table td { padding: 7px 8px; font-size: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.factor-table tr:hover td { background: var(--bg1); }
.f-bar { display: inline-block; height: 3px; vertical-align: middle; margin-left: 6px; border-radius: 2px; }
.levels-grid { grid-template-columns: repeat(6, 1fr); margin-top: 16px; }

/* ── Liquidity ──────────────────────────────────────────────────────────── */
.liq-stats { grid-template-columns: repeat(3, 1fr); margin-bottom: 16px; }
.liq-bar-wrap { background: #fff; border: 1px solid var(--border); padding: 14px 16px; margin-bottom: 16px; }
.liq-labels { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 11px; }
.liq-bar { height: 8px; background: var(--bg3); position: relative; border-radius: 2px; overflow: hidden; }
.liq-bar-short { position: absolute; left:0;  height: 100%; background: var(--green); transition: width .5s; }
.liq-bar-long  { position: absolute; right:0; height: 100%; background: var(--red);   transition: width .5s; }
.liq-bias { text-align: center; margin-top: 8px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.liq-clusters { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cluster-header { font-size: 10px; letter-spacing: .15em; text-transform: uppercase; padding: 8px 12px; font-weight: 600; }
.cluster-header.squeeze { background: var(--green-bg); color: var(--green); border: 1px solid var(--green); }
.cluster-header.cascade { background: var(--red-bg);   color: var(--red);   border: 1px solid var(--red); }
.cluster-row { display: grid; grid-template-columns: 24px 1fr 70px 80px 55px; gap: 6px; align-items: center; padding: 8px 12px; background: #fff; border: 1px solid var(--border); border-top: none; }
.cluster-row:hover { background: var(--bg1); }
.cr-sym   { font-size: 14px; text-align: center; }
.cr-price { font-size: 13px; font-weight: 600; color: var(--white); }
.cr-bar   { height: 4px; border-radius: 2px; }
.cr-usd   { font-size: 11px; color: var(--green); text-align: right; font-weight: 600; }
.cr-dist  { font-size: 11px; color: var(--dim); text-align: right; }
.price-marker { background: var(--green-bg); border: 1px solid var(--green); border-top: none; padding: 9px 12px; text-align: center; font-size: 12px; font-weight: 700; color: var(--green); letter-spacing: .05em; }

/* ── Chart layout ────────────────────────────────────────────────────────── */
#panel-chart { height: 100%; overflow: hidden; }

#chart-layout {
  display: grid;
  grid-template-columns: 1fr 280px 160px;
  height: calc(100vh - 148px);
  min-height: 500px;
  overflow: hidden;
  border: 1px solid var(--border);
}
#chart-left {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  border-right: 1px solid var(--border);
}
#chart-subtabs {
  display: flex;
  align-items: stretch;
  height: 30px;
  flex-shrink: 0;
  background: var(--bg1);
  border-bottom: 2px solid var(--border);
}
.ctab-btn {
  padding: 0 20px;
  background: transparent;
  color: var(--dim);
  border: none;
  border-bottom: 2px solid transparent;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  cursor: pointer;
  margin-bottom: -2px;
  transition: color .12s, background .12s;
}
.ctab-btn:hover { color: var(--white); }
#ctab-panel-0,
#ctab-panel-1,
#ctab-panel-2 {
  width: 100%;
  height: calc(100% - 30px);
  overflow: hidden;
}
#chart-main {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
}
#tv-widget {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100% !important;
  height: 100% !important;
}
#vpvr-panel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0b0b0b;
}
#chart-cvd-panel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0b0b0b;
}

/* ── Order Book ──────────────────────────────────────────────────────────── */
#chart-right {
  background: #fff;
  display: flex;
  flex-direction: column;
  font-family: var(--mono);
  font-size: 11px;
  overflow: hidden;
  height: 100%;
  border-right: 1px solid var(--border);
}
#ob-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 8px 10px;
  background: var(--green);
  color: #fff;
  flex-shrink: 0;
}
#ob-symbol  { font-size: 12px; font-weight: 700; letter-spacing: .05em; color: #fff; }
.ob-sub     { font-size: 9px; letter-spacing: .1em; color: rgba(255,255,255,.5); margin-top: 2px; }
.ob-key     { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.ob-val     { font-size: 11px; font-weight: 600; color: #fff; }
#ob-stats   { display: flex; gap: 10px; }
.ob-stat    { text-align: right; }

/* Tick size buttons */
#ob-tick-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  background: var(--bg1);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#ob-tick-bar .ob-key { color: var(--dim); margin-right: 4px; }
.tick-btn {
  padding: 2px 6px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  border: 1px solid var(--border2);
  background: #fff;
  color: var(--dim);
  cursor: pointer;
  transition: all .15s;
  border-radius: 2px;
}
.tick-btn:hover { border-color: var(--green); color: var(--green); }
.tick-btn.active { background: var(--green); color: #fff; border-color: var(--green); }

/* Depth curve */
#ob-depth-wrap {
  height: 80px;
  background: var(--bg1);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
#ob-depth-canvas {
  display: block;
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}

/* Spoof alert */
#ob-spoof {
  background: #fff3cd;
  border-bottom: 1px solid #ffc107;
  color: #856404;
  font-size: 9px;
  font-weight: 600;
  padding: 3px 8px;
  letter-spacing: .03em;
  flex-shrink: 0;
  animation: flash .5s ease infinite alternate;
  display: none;
}
@keyframes flash { from {opacity:1} to {opacity:.5} }

/* Column headers */
.ob-cols-hdr {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  padding: 3px 8px;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
  background: var(--bg1);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* Ask/bid panels */
#ob-asks-wrap {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
#ob-bids-wrap { flex: 1; overflow: hidden; }
#ob-asks, #ob-bids { width: 100%; }

/* Order rows */
.ob-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  align-items: center;
  padding: 2px 8px;
  position: relative;
  transition: background .1s;
  cursor: default;
}
.ob-row:hover { background: var(--bg1); }

/* Wall highlight */
.ob-wall { background: rgba(255,200,0,.07) !important; }
.ob-wall-val { color: #b8860b !important; font-weight: 700 !important; }

/* Background bars — intensity scales with order size */
.ob-bg-bar {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  pointer-events: none;
  transition: width .12s ease, opacity .12s ease;
}
.ask-bg  { background: #c0392b; }
.ask-cum { background: rgba(192,57,43,.08); width: 100% !important; }
.bid-bg  { background: #01411C; }
.bid-cum { background: rgba(1,65,28,.06); width: 100% !important; }

/* Text cells */
.ob-price   { font-weight: 600; font-size: 11px; position: relative; z-index: 1; letter-spacing: -.01em; }
.ob-usd     { text-align: right; font-size: 10px; font-weight: 500; position: relative; z-index: 1; color: var(--white); }
.ob-cum-val { text-align: right; font-size: 10px; color: var(--dimmer); position: relative; z-index: 1; }

/* Mid price */
#ob-mid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 5px 8px;
  background: var(--bg1);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#ob-mid-price { font-size: 14px; font-weight: 700; transition: color .3s; }
#ob-mid-dir   { font-size: 12px; font-weight: 700; }

/* Footer */
#ob-footer {
  padding: 6px 8px;
  background: var(--bg1);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.ob-imbal-bar-wrap {
  display: flex;
  height: 5px;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 5px;
}
.ob-imbal-seg     { height: 100%; transition: width .3s ease; }
.ob-imbal-seg.bid { background: var(--green); }
.ob-imbal-seg.ask { background: var(--red); }
#ob-imbal-labels  { display: flex; justify-content: space-between; font-size: 10px; color: var(--dim); }

/* ── WebSocket status dot ────────────────────────────────────────────────── */
.ws-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  transition: background .3s;
}
.ws-on          { background: #7fff9a; box-shadow: 0 0 4px #00ff55; }
.ws-connecting  { background: #ffd700; animation: pulse 1s infinite; }
.ws-off         { background: #ff6060; }

#ob-mid {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 8px;
  background: var(--bg1);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#ob-mid-inner { display: flex; align-items: center; gap: 8px; }
#ob-mid-price { font-size: 14px; font-weight: 700; transition: color .3s; }
#ob-mid-dir   { font-size: 12px; font-weight: 700; }

/* ── Trades Tape ─────────────────────────────────────────────────────────── */
#chart-tape {
  background: #fff;
  display: flex;
  flex-direction: column;
  font-family: var(--mono);
  font-size: 10px;
  overflow: hidden;
  height: 100%;
}
#tape-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 8px;
  background: var(--green);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  flex-shrink: 0;
}
#tape-cols {
  display: grid;
  grid-template-columns: 1fr 44px 52px;
  padding: 3px 6px;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
  background: var(--bg1);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#tape-rows {
  flex: 1;
  overflow: hidden;
}
.tape-row {
  display: grid;
  grid-template-columns: 1fr 44px 52px;
  padding: 2px 6px;
  position: relative;
  transition: background .1s;
  align-items: center;
}
.tape-bar {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  pointer-events: none;
  transition: width .1s;
}
.tape-large { font-weight: 700; }
.tape-price { font-size: 10px; font-weight: 600; position: relative; z-index: 1; }
.tape-qty   { text-align: right; color: var(--dim); font-size: 9px; position: relative; z-index: 1; }
.tape-time  { text-align: right; color: var(--dimmer); font-size: 9px; position: relative; z-index: 1; }

/* ── Calculator — Quantitative Edition ──────────────────────────────────── */
.calc-layout {
  display: grid; grid-template-columns: 300px 1fr; gap: 14px; align-items: start;
}

/* ── Form (left) ─────────────────────────────────────────────────────────── */
.calc-form {
  background: #fff; border: 1px solid var(--border); padding: 16px;
  position: sticky; top: 0;
}
.calc-section-hdr {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 10px; padding-bottom: 6px;
  border-bottom: 2px solid var(--green);
}
.cff-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.cff-group { display: flex; flex-direction: column; gap: 4px; }
.cff-label { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.cff-sub   { font-size: 9px; color: var(--dimmer); margin-left: 4px; }
.cff-input {
  border: 1px solid var(--border2); padding: 7px 9px; font-size: 13px;
  font-family: var(--mono); color: var(--white); background: var(--bg1); outline: none;
  transition: border-color .15s; width: 100%;
}
.cff-input:focus { border-color: var(--green); background: #fff; }
.cff-sl    { border-color: rgba(192,57,43,.5); }
.cff-tp    { border-color: rgba(1,65,28,.3); }
.cff-select {
  border: 1px solid var(--border2); padding: 7px 9px; font-size: 12px;
  font-family: var(--mono); color: var(--white); background: var(--bg1);
  outline: none; width: 100%; cursor: pointer;
}

/* Direction toggle */
.cff-dir-toggle { display: grid; grid-template-columns: 1fr 1fr; }
.cdir-btn {
  padding: 7px 4px; font-family: var(--mono); font-size: 11px; font-weight: 700;
  border: 1px solid var(--border2); background: var(--bg1); color: var(--dim);
  cursor: pointer; transition: all .15s; letter-spacing: .06em;
}
.cdir-btn.active[id="c-long-btn"]  { background: var(--green-bg); color: var(--green); border-color: var(--green); }
.cdir-btn.active[id="c-short-btn"] { background: var(--red-bg);   color: var(--red);   border-color: var(--red); }

/* Buttons */
.calc-btns { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.calc-btn-primary {
  background: var(--green); color: #fff; border: none; padding: 10px;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background .15s;
}
.calc-btn-primary:hover { background: var(--green-lt); }
.calc-btn-secondary {
  background: #fff; color: var(--green); border: 1px solid var(--green);
  padding: 8px; font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: all .15s;
}
.calc-btn-secondary:hover { background: var(--green-bg); }
.calc-liq-status { margin-top: 8px; font-size: 11px; min-height: 18px; }
.cls-loading { color: var(--amber); }
.cls-ok      { color: var(--green); }
.cls-warn    { color: var(--amber); }

/* ── Results (right) ─────────────────────────────────────────────────────── */
.calc-results { display: flex; flex-direction: column; gap: 10px; }

/* Empty state */
.calc-empty-state {
  background: #fff; border: 1px dashed var(--border2); padding: 48px 24px; text-align: center;
}
.ces-icon  { font-size: 36px; color: var(--border2); margin-bottom: 10px; }
.ces-title { font-size: 16px; font-weight: 600; color: var(--green); margin-bottom: 8px; }
.ces-desc  { font-size: 12px; color: var(--dim); line-height: 1.7; }

/* Result block */
.cres-block {
  background: #fff; border: 1px solid var(--border); padding: 14px 16px;
}
.cres-hdr {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 12px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px;
}
.cres-hdr-warn { color: var(--amber); font-size: 10px; }
.cres-grid4 {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border); margin-bottom: 10px;
}
.cres-cell { background: #fff; padding: 8px 10px; }
.crc-lbl   { font-size: 10px; color: var(--dimmer); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 3px; }
.crc-val   { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--white); }
.crc-unit  { font-size: 10px; color: var(--dimmer); font-weight: 400; }
.crc-sub   { font-size: 10px; color: var(--dimmer); margin-top: 2px; }
.cres-levels {
  display: flex; align-items: center; gap: 8px; font-size: 11px;
  padding: 7px 10px; background: var(--bg1); border: 1px solid var(--border);
  flex-wrap: wrap;
}
.cres-arrow { color: var(--dimmer); }
.cres-insight {
  font-size: 11px; padding: 7px 10px; margin-top: 6px; border-left: 3px solid;
}
.cres-insight.pos { color: var(--green); background: var(--green-bg); border-color: var(--green); }
.cres-insight.neg { color: var(--red);   background: var(--red-bg);   border-color: var(--red); }

/* ── Score block ─────────────────────────────────────────────────────────── */
.score-block { border-top: 3px solid var(--green); }
.cscore-header {
  display: flex; align-items: flex-start; gap: 20px; margin-bottom: 14px;
}
.cscore-circle {
  width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0;
  border: 3px solid var(--sc-color, var(--green));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #fff;
}
.cscore-num    { font-family: var(--mono); font-size: 22px; font-weight: 800; color: var(--sc-color, var(--green)); line-height: 1; }
.cscore-denom  { font-size: 10px; color: var(--dimmer); }
.cscore-meta   { flex: 1; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.cscore-grade  { font-size: 18px; font-weight: 800; letter-spacing: .05em; }
.cscore-dir    { font-family: var(--mono); font-size: 12px; font-weight: 600; }
.cscore-dir.long  { color: var(--green); }
.cscore-dir.short { color: var(--red); }
.cscore-ev     { font-size: 12px; color: var(--dim); display: flex; align-items: center; gap: 8px; }
.ev-positive   { color: var(--green); font-size: 10px; font-weight: 600; letter-spacing: .08em;
                  background: var(--green-bg); border: 1px solid var(--green); padding: 1px 6px; }
.ev-negative   { color: var(--red);   font-size: 10px; font-weight: 600; letter-spacing: .08em;
                  background: var(--red-bg);   border: 1px solid var(--red);   padding: 1px 6px; }
.cscore-details { display: flex; flex-direction: column; gap: 5px; }
.cscore-row    { display: grid; grid-template-columns: 110px 1fr 60px 1fr; align-items: center; gap: 8px; }
.cscore-lbl    { font-size: 11px; color: var(--dim); }
.cscore-bar-wrap { height: 5px; background: var(--bg3); border-radius: 3px; overflow: hidden; }
.cscore-bar    { height: 100%; background: var(--green); border-radius: 3px; transition: width .4s ease; }
.cscore-pts    { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--white); text-align: right; }
.cscore-note   { font-size: 10px; }

/* ── Probability rows ────────────────────────────────────────────────────── */
.ctp-legend {
  display: grid; grid-template-columns: 40px 35px 1fr 40px 72px 90px;
  gap: 6px; padding: 0 0 6px; border-bottom: 1px solid var(--border); margin-bottom: 6px;
}
.ctp-row {
  display: grid; grid-template-columns: 40px 35px 1fr 40px 72px 90px;
  align-items: center; gap: 6px; margin-bottom: 5px;
}
.ctp-row.sl-row { opacity: .85; }
.ctp-label  { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--white); }
.ctp-rr     { font-family: var(--mono); font-size: 11px; color: var(--dimmer); }
.ctp-bar-wrap {
  height: 10px; background: var(--bg3); border-radius: 3px; overflow: hidden; position: relative;
}
.ctp-bar-fill {
  height: 100%; border-radius: 3px; transition: width .5s ease;
}
.ctp-bar-fill.long { background: var(--green); }
.ctp-bar-fill.short{ background: var(--amber); }
.ctp-bar-fill.neg  { background: var(--red); }
.ctp-pct    { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--white); text-align: right; }
.ctp-pnl    { font-family: var(--mono); font-size: 11px; font-weight: 600; text-align: right; }
.ctp-ev     { font-size: 10px; text-align: right; }
.ctp-ev-total {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 12px; padding-top: 10px;
}
.ctp-note { font-size: 10px; color: var(--dimmer); margin-top: 10px; line-height: 1.6; border-top: 1px solid var(--border); padding-top: 8px; }

/* ── Mini map ────────────────────────────────────────────────────────────── */
.mm-wrap  { margin-top: 12px; }
.mm-label { font-size: 10px; color: var(--dimmer); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
.mm-track {
  position: relative; height: 60px; background: var(--bg1);
  border: 1px solid var(--border); overflow: visible;
}
.mm-baseline {
  position: absolute; bottom: 50%; left: 0; right: 0;
  height: 2px; background: var(--border2);
}
.mm-cluster {
  position: absolute; bottom: 50%; width: 3px; transform: translateX(-50%);
  border-radius: 2px 2px 0 0;
}
.mm-level  { position: absolute; bottom: 44%; transform: translateX(-50%); }
.mm-pin    { width: 2px; height: 16px; background: var(--white); margin: 0 auto; }
.mm-tag {
  font-family: var(--mono); font-size: 9px; line-height: 1.3;
  white-space: nowrap; text-align: center; color: var(--white); font-weight: 600;
}
.mm-tag.top { margin-bottom: 2px; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); }
.mm-tag.bot { margin-top:  2px; position: absolute; top:    100%; left: 50%; transform: translateX(-50%); }
.mm-sl .mm-pin   { background: var(--red); }
.mm-sl .mm-tag   { color: var(--red); }
.mm-entry .mm-pin{ background: var(--white); height: 22px; }
.mm-entry .mm-tag{ color: var(--green); font-size: 10px; }
.mm-tp .mm-pin   { background: var(--green); }
.mm-tp .mm-tag   { color: var(--green); }
.mm-price { position: absolute; bottom: 44%; transform: translateX(-50%); }
.mm-price-line { width: 1px; height: 12px; background: var(--amber); margin: 0 auto; }
.mm-price-tag  { font-size: 9px; color: var(--amber); font-weight: 700; text-align: center; }
.mm-legend { display: flex; gap: 14px; margin-top: 6px; font-size: 10px; color: var(--dimmer); }
.mm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 3px; vertical-align: middle; }
.mm-dot.green  { background: var(--green); opacity: .6; }
.mm-dot.red    { background: var(--red);   opacity: .6; }
.mm-dot.entry  { background: var(--white); border: 1px solid var(--border2); }

/* ── Legacy calc styles (kept for backward compat) ───────────────────────── */
.calc-card  { background: #fff; border: 1px solid var(--border); padding: 20px; }
.calc-title { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--green); }
.field { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.field label { color: var(--dim); font-size: 11px; width: 90px; flex-shrink: 0; letter-spacing: .08em; }
.field input, .field select { flex: 1; background: var(--bg1); border: 1px solid var(--border2); color: var(--white); font-family: var(--mono); font-size: 13px; font-weight: 500; padding: 6px 10px; outline: none; transition: border-color .15s; }
.field input:focus, .field select:focus { border-color: var(--green); }
.field input.sl-field { border-color: rgba(192,57,43,.4); }
.field input.tp-field { border-color: rgba(1,65,28,.3); }
.btn { width: 100%; background: var(--green); color: #fff; border: none; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 10px; cursor: pointer; margin-top: 10px; transition: background .15s; }
.btn:hover { background: var(--green-lt); }
.btn.secondary { background: #fff; color: var(--green); border: 1px solid var(--green); margin-top: 6px; }
.btn.secondary:hover { background: var(--green-bg); }
.rr-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rr-lbl { color: var(--dim); font-size: 11px; width: 35px; }
.rr-bg  { flex: 1; height: 4px; background: var(--bg3); border-radius: 2px; }
.rr-fill { height: 100%; border-radius: 2px; background: var(--green); transition: width .3s ease; }
.rr-r   { color: var(--dim); font-size: 11px; width: 35px; text-align: center; }
.rr-pnl { color: var(--green); font-size: 11px; font-weight: 600; width: 70px; text-align: right; }
.calc-note { margin-top: 14px; padding: 10px 12px; background: var(--bg1); border: 1px solid var(--border); font-size: 10px; color: var(--dim); }

/* ── Status Bar ─────────────────────────────────────────────────────────── */
#status-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 24px; background: var(--green); border-top: 1px solid var(--green-lt); display: flex; align-items: center; padding: 0 16px; gap: 16px; font-size: 10px; color: rgba(255,255,255,.6); letter-spacing: .08em; z-index: 100; }
.sb-item { display: flex; align-items: center; gap: 5px; }
.sb-dot { width: 5px; height: 5px; border-radius: 50%; background: #7fff9a; }
.sb-dot.off   { background: #ff8080; }
.sb-dot.pulse { background: #ffff80; animation: pulse 1.5s infinite; }
.spacer { flex: 1; }
#sb-price     { color: #ffffff; font-weight: 600; }
#sb-direction { color: rgba(255,255,255,.7); }

/* ── Exchange Toggles ───────────────────────────────────────────────────── */
#exchange-toggles {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 12px 0 14px; border-bottom: 1px solid var(--border); margin-bottom: 16px;
}
.ex-toggle {
  padding: 4px 12px; font-size: 11px; font-weight: 600; letter-spacing: .06em;
  cursor: pointer; border: 1px solid; border-radius: 2px; transition: all .15s;
  user-select: none;
}
.toggle-on  { background: var(--green-bg); color: var(--green); border-color: var(--green); }
.toggle-off { background: var(--bg2); color: var(--dimmer); border-color: var(--border2); }
.toggle-on:hover  { background: var(--green); color: #fff; }
.toggle-off:hover { background: var(--bg3); color: var(--dim); }
.toggle-all  { background: var(--green); color: #fff; border-color: var(--green); font-size:10px; }
.toggle-none { background: var(--bg2); color: var(--dim); border-color: var(--border2); font-size:10px; }
.toggle-all:hover  { background: var(--green-lt); }
.toggle-none:hover { background: var(--bg3); }

/* Responsive rules consolidated at bottom of file */

/* ── Bot Tab — full rewrite ──────────────────────────────────────────────── */
/* Stats bar */
.bot-statsbar {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: 10px; background: var(--bg1); border: 1px solid var(--border);
  padding: 10px 16px; margin-bottom: 14px;
}
.bsb-group { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.bsb-metric {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 2px 18px 2px 0; min-width: 80px;
}
.bsb-val  { font-family: var(--mono); font-size: 16px; font-weight: 700; color: var(--white); line-height: 1.2; }
.bsb-lbl  { font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: var(--dimmer); margin-top: 1px; }
.bsb-divider { width: 1px; height: 30px; background: var(--border2); margin: 0 10px 0 0; flex-shrink: 0; }
.bsb-right { display: flex; align-items: center; gap: 12px; }
.bsb-signal {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px;
  background: var(--bg); border: 1px solid var(--border); padding: 4px 10px;
}
.bsb-sig-label { color: var(--dimmer); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; }
.bsb-score { font-weight: 700; font-size: 13px; }
.bsb-act   { color: var(--amber); font-weight: 600; letter-spacing: .05em; animation: pulse 1.5s infinite; }

/* Connect button */
.btn-connect {
  background: var(--green); color: #fff; border: none; padding: 7px 16px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; cursor: pointer; white-space: nowrap; transition: background .15s;
}
.btn-connect:hover { background: var(--green-lt); }
.btn-connect-lg    { font-size: 13px; padding: 10px 24px; margin-top: 12px; }

/* User grid */
.bot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.bot-user-card {
  border: 1px solid var(--border); background: #fff;
  display: flex; flex-direction: column;
  transition: border-color .15s, box-shadow .15s;
}
.bot-user-card:hover   { border-color: var(--border2); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.bot-user-card.has-pos { border-color: var(--green); }
.bot-user-card.has-error { border-color: var(--red); }
.bot-user-card.is-paused { opacity: .7; }
.bot-user-card.tm-card   { border-style: dashed; }

/* Card header */
.buc-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 12px; border-bottom: 1px solid var(--border);
  background: var(--bg1);
}
.buc-identity { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.buc-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.buc-dot.live   { background: #2da44e; animation: pulse 2s infinite; }
.buc-dot.paused { background: var(--amber); }
.buc-dot.error  { background: var(--red); animation: pulse .8s infinite; }
.buc-alias { font-weight: 700; font-size: 13px; color: var(--white); }
.buc-exchange-badge {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  padding: 1px 7px; letter-spacing: .05em; text-transform: uppercase;
}
.buc-tm-badge {
  font-size: 9px; color: var(--dimmer); border: 1px solid var(--border2);
  padding: 1px 5px; letter-spacing: .08em;
}
.buc-controls { display: flex; align-items: center; gap: 5px; }
.buc-mode-badge {
  font-family: var(--mono); font-size: 9px; font-weight: 600;
  padding: 2px 6px; letter-spacing: .1em; cursor: pointer; transition: all .15s;
}
.buc-mode-badge.auto   { color: var(--green); background: var(--green-bg); border: 1px solid var(--green); }
.buc-mode-badge.manual { color: var(--amber); background: #fffde7; border: 1px solid var(--amber); }
.buc-btn-pause, .buc-btn-close {
  background: none; border: 1px solid var(--border2); color: var(--dim);
  font-size: 11px; padding: 2px 6px; cursor: pointer; transition: all .15s;
}
.buc-btn-pause:hover { border-color: var(--green); color: var(--green); }
.buc-btn-close:hover { border-color: var(--red); color: var(--red); }

/* Account bar */
.buc-account {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.buc-eq { display: flex; align-items: baseline; gap: 5px; }
.buc-eq-val { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--white); }
.buc-eq-lbl { font-size: 10px; color: var(--dimmer); }
.buc-margin-bar-wrap {
  flex: 1; height: 4px; background: var(--bg2); position: relative; border-radius: 2px; overflow: hidden;
}
.buc-margin-bar-fill {
  position: absolute; right: 0; top: 0; height: 100%; background: var(--green-mid); opacity: .6;
}
.buc-margin-lbl { font-size: 10px; color: var(--dimmer); margin-left: 8px; white-space: nowrap; }

/* Position block */
.buc-position-wrap { padding: 10px 12px; border-bottom: 1px solid var(--border); min-height: 52px; }
.buc-no-pos { color: var(--dimmer); font-size: 11px; font-style: italic; padding: 4px 0; }
.buc-position {}
.buc-pos-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.buc-pos-mark { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--white); }
.buc-pnl-badge {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  margin-left: auto; white-space: nowrap;
}
.buc-pos-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px 20px;
  font-family: var(--mono); font-size: 11px;
}
.bpg-l   { color: var(--dimmer); }
.bpg-v   { color: var(--white); font-weight: 600; }
.bpg-v.sl  { color: var(--red); }
.bpg-v.tp  { color: var(--green); }
.bpg-v.liq { color: var(--amber); }
.be-badge { grid-column: 1/-1; color: var(--amber); font-size: 10px; font-weight: 600; letter-spacing: .1em; }

/* Stats row */
.buc-stats-row {
  display: flex; align-items: stretch; padding: 8px 12px;
  border-bottom: 1px solid var(--border); gap: 0;
}
.buc-stat {
  display: flex; flex-direction: column; align-items: center; flex: 1; gap: 1px;
}
.bcs-val { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--white); }
.bcs-lbl { font-size: 9px; color: var(--dimmer); letter-spacing: .1em; text-transform: uppercase; }
.buc-stat-div { width: 1px; background: var(--border); margin: 0 4px; }

/* Error + last trade */
.buc-error {
  padding: 6px 12px; font-size: 11px; color: var(--red);
  background: var(--red-bg); border-top: 1px solid var(--red);
}
.buc-last-trade {
  padding: 5px 12px; font-size: 11px; font-family: var(--mono);
  display: flex; justify-content: space-between;
  border-top: 1px solid var(--border);
}
.buc-last-trade.ok   { color: var(--green); background: var(--green-bg); }
.buc-last-trade.fail { color: var(--red);   background: var(--red-bg); }
.blt-ts { color: var(--dimmer); font-size: 10px; }

/* Card footer */
.buc-footer {
  display: flex; justify-content: space-between;
  padding: 5px 12px; font-size: 10px; color: var(--dimmer); background: var(--bg1);
}

/* Empty state */
.bot-empty-state {
  text-align: center; padding: 60px 20px;
  border: 1px dashed var(--border2); background: var(--bg1);
  margin-bottom: 16px;
}
.bes-icon  { font-size: 40px; color: var(--border2); margin-bottom: 12px; }
.bes-title { font-size: 18px; font-weight: 600; color: var(--green); margin-bottom: 8px; }
.bes-desc  { font-size: 13px; color: var(--dim); margin-bottom: 16px; line-height: 1.7; }
.bes-exchanges { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.bes-ex {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  padding: 3px 10px; letter-spacing: .06em;
}

/* Security note */
.bot-security-note {
  font-size: 11px; color: var(--dimmer); padding: 8px 0;
  border-top: 1px solid var(--border); display: flex; gap: 6px; align-items: center;
}

/* ── Connect Modal ───────────────────────────────────────────────────────── */
.bot-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: none; align-items: center; justify-content: center; z-index: 9999;
}
.bot-modal-overlay.is-open { display: flex; }
.bot-modal {
  background: #fff; border: 1px solid var(--border2); width: 480px; max-width: 95vw;
  max-height: 92vh; overflow-y: auto; box-shadow: 0 8px 40px rgba(0,0,0,.18);
}
.bm-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px; background: var(--green); border-bottom: 1px solid var(--green-lt);
}
.bm-title  { color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.bm-close  { background: none; border: none; color: rgba(255,255,255,.7); font-size: 18px; cursor: pointer; line-height: 1; }
.bm-close:hover { color: #fff; }
.bm-body   { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.bm-field  { display: flex; flex-direction: column; gap: 5px; }
.bm-label  { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.bm-input  {
  border: 1px solid var(--border2); padding: 9px 11px; font-size: 13px;
  font-family: var(--mono); color: var(--white); background: #fff; outline: none;
  transition: border-color .15s;
}
.bm-input:focus { border-color: var(--green); }
.bm-hint   { font-size: 11px; color: var(--dimmer); }

/* Exchange picker grid */
.bm-exchange-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
.bm-ex-option {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border2); padding: 9px 12px; cursor: pointer;
  font-size: 12px; font-weight: 500; transition: all .15s;
}
.bm-ex-option:hover    { border-color: var(--green); color: var(--green); }
.bm-ex-option.selected { border-color: var(--green); background: var(--green-bg); font-weight: 700; }

/* Auto trade row */
.bm-auto-row { display: flex; align-items: center; gap: 10px; }
.bm-check-label { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.bm-check-label input { accent-color: var(--green); width: 14px; height: 14px; }

.bm-security {
  font-size: 11px; color: var(--dimmer); background: var(--bg1);
  border: 1px solid var(--border); padding: 9px 12px; line-height: 1.6;
}
.bm-error {
  font-size: 12px; color: var(--red); background: var(--red-bg);
  border: 1px solid var(--red); padding: 8px 12px;
}
.bm-submit {
  background: var(--green); color: #fff; border: none; padding: 11px;
  font-size: 13px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; cursor: pointer; transition: background .15s;
}
.bm-submit:hover    { background: var(--green-lt); }
.bm-submit:disabled { background: var(--border2); cursor: not-allowed; }

/* Legacy bot tab styles kept for TM panel backward compat */
.bot-stat {
  font-family: var(--mono); font-size: 11px; color: var(--dim);
  background: var(--bg1); border: 1px solid var(--border); padding: 2px 8px;
}
.bot-stat.in-pos { color: var(--green); border-color: var(--green); background: var(--green-bg); }

/* Signal banner */
.bot-signal-banner {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
  background: var(--bg1); border: 1px solid var(--border); padding: 10px 14px;
  margin-bottom: 16px; font-family: var(--mono); font-size: 11px;
}
.bsb-left  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bsb-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--dim); }
.bsb-label { color: var(--dim); letter-spacing: .12em; text-transform: uppercase; font-size: 10px; }
.bsb-score { font-weight: 600; font-size: 13px; }
.bsb-score.pos { color: var(--green); }
.bsb-score.neg { color: var(--red); }
.bsb-act { color: var(--amber); font-weight: 600; letter-spacing: .05em; }
.bsb-ts  { color: var(--dimmer); }
.bsb-px  { color: var(--white); }
.bsb-px.sl  { color: var(--red); }
.bsb-px.tp  { color: var(--green); }

/* User grid */
.bot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.bot-user-card {
  border: 1px solid var(--border); background: #fff;
  transition: border-color .15s;
}
.bot-user-card.has-position { border-color: var(--green); }
.buc-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 10px 13px; border-bottom: 1px solid var(--border);
  background: var(--bg1);
}
.buc-identity { display: flex; align-items: center; gap: 8px; }
.buc-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.buc-dot.connected { background: #2da44e; animation: pulse 2s infinite; }
.buc-alias { font-weight: 600; font-size: 13px; color: var(--white); }
.buc-exchange {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  padding: 1px 6px; letter-spacing: .06em; text-transform: uppercase;
}
.buc-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.buc-mode {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  padding: 1px 6px; letter-spacing: .08em;
}
.buc-mode.auto   { color: var(--green); background: var(--green-bg); border: 1px solid var(--green); }
.buc-mode.manual { color: var(--amber); background: #fffde7;         border: 1px solid var(--amber); }
.buc-since { font-size: 10px; color: var(--dimmer); }
.buc-body { padding: 10px 13px; }
.buc-pnl { font-family: var(--mono); font-size: 12px; font-weight: 600; margin-top: 8px; }

/* Position block inside user card */
.bot-pos-none { color: var(--dimmer); font-size: 11px; font-style: italic; }
.bot-pos {}
.bot-pos-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bot-pos-entry { font-family: var(--mono); font-size: 12px; color: var(--white); }
.bot-pos-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px 16px; font-family: var(--mono); font-size: 11px;
}
.bpg-l { color: var(--dimmer); margin-right: 4px; }
.bpg-v { color: var(--white); font-weight: 600; }
.bpg-v.sl { color: var(--red); }
.bpg-v.tp { color: var(--green); }
.be-badge {
  grid-column: 1 / -1; color: var(--amber);
  font-size: 10px; letter-spacing: .1em; font-weight: 600; margin-top: 2px;
}

/* Footer */
.bot-pending {
  font-size: 11px; color: var(--dimmer); font-style: italic; margin-bottom: 12px;
}
.bot-footer {
  border-top: 1px solid var(--border); padding-top: 12px; margin-top: 8px;
  font-size: 11px; color: var(--dimmer); display: flex; flex-direction: column; gap: 6px;
}
.bot-footer-exchanges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bot-ex-badge {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  padding: 1px 7px; letter-spacing: .06em; text-transform: uppercase;
}
.bot-footer-note { color: var(--dimmer); }

/* bot-grid responsive rule consolidated at bottom of file */

/* ── Bot stats bar admin header ──────────────────────────────────────────── */
.bsb-left-block { display: flex; align-items: center; gap: 8px; }
.bsb-title {
  font-size: 12px; font-weight: 700; color: var(--green);
  letter-spacing: .1em; text-transform: uppercase;
}
.bsb-admin-badge {
  font-size: 9px; font-weight: 600; letter-spacing: .12em;
  background: var(--green-bg); color: var(--green); border: 1px solid var(--green);
  padding: 1px 6px; text-transform: uppercase;
}

/* ── Bot professional empty state ────────────────────────────────────────── */
.bes-brand { font-size: 22px; font-weight: 800; color: var(--green); letter-spacing: .08em; margin-bottom: 8px; }
.bes-tagline { font-size: 13px; color: var(--dim); margin-bottom: 20px; max-width: 480px; margin-left: auto; margin-right: auto; line-height: 1.6; }
.bes-features { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.bes-feat { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--white); }

/* ── 3-step connect wizard ───────────────────────────────────────────────── */
.bot-wizard { max-width: 500px; }
.bw-steps { display: flex; align-items: center; gap: 0; flex: 1; margin-right: 16px; }
.bw-step {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,.35);
  letter-spacing: .04em; transition: color .2s;
}
.bw-step.active { color: #fff; }
.bw-step.done   { color: rgba(255,255,255,.65); }
.bw-sn {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.15); color: rgba(255,255,255,.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; transition: all .2s;
}
.bw-step.active .bw-sn { background: #fff; color: var(--green); }
.bw-step.done   .bw-sn { background: rgba(255,255,255,.4); color: #fff; }
.bw-sl { display: none; }
@media (min-width: 440px) { .bw-sl { display: inline; } }
.bw-sep { color: rgba(255,255,255,.25); margin: 0 8px; font-size: 14px; }

/* Wizard panels */
.bw-panel { padding: 22px 22px 8px; display: flex; flex-direction: column; gap: 10px; min-height: 220px; }
.bw-panel-title { font-size: 16px; font-weight: 700; color: var(--green); margin-bottom: 2px; }
.bw-info {
  font-size: 11px; color: var(--dimmer); background: var(--bg1);
  border: 1px solid var(--border); padding: 9px 12px; line-height: 1.7; margin-top: 6px;
}
.bw-guide {
  font-size: 12px; color: var(--dim); background: var(--green-bg);
  border-left: 3px solid var(--green); padding: 10px 14px;
  line-height: 1.8; white-space: pre-line;
}
.bm-input-lg { font-size: 15px; padding: 11px 13px; }
.bm-exchange-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.bm-ex-large {
  min-height: 60px; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
}
.beo-icon { font-size: 20px; flex-shrink: 0; }
.beo-name { font-size: 13px; font-weight: 600; color: var(--white); }

/* Wizard footer */
.bw-footer { border-top: 1px solid var(--border); padding: 12px 22px; background: var(--bg1); }
.bw-actions { display: flex; justify-content: space-between; align-items: center; }
.bw-nav { display: flex; align-items: center; gap: 8px; }
.bw-btn-cancel {
  background: none; border: 1px solid var(--border2); color: var(--dim);
  padding: 7px 16px; font-size: 12px; cursor: pointer; transition: all .15s;
}
.bw-btn-cancel:hover { border-color: var(--red); color: var(--red); }
.bw-btn-back {
  background: none; border: 1px solid var(--border2); color: var(--dim);
  padding: 7px 16px; font-size: 12px; cursor: pointer; transition: all .15s;
}
.bw-btn-back:hover { border-color: var(--green); color: var(--green); }
.bw-btn-next {
  background: var(--green); color: #fff; border: none;
  padding: 7px 22px; font-size: 12px; font-weight: 600; letter-spacing: .06em;
  cursor: pointer; transition: background .15s;
}
.bw-btn-next:hover { background: var(--green-lt); }

/* ── Bot Stats Bar (admin header) ────────────────────────────────────────── */
.bot-statsbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  background: var(--bg1); border: 1px solid var(--border);
  padding: 10px 14px; margin-bottom: 14px;
  font-family: var(--mono); font-size: 11px;
}
.bsb-group { display: flex; align-items: center; flex: 1; justify-content: center; flex-wrap: wrap; }
.bsb-metric { display: flex; flex-direction: column; align-items: center; padding: 0 14px; }
.bsb-val { font-size: 16px; font-weight: 700; color: var(--white); line-height: 1.2; }
.bsb-lbl { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--dimmer); margin-top: 1px; }
.bsb-divider { width: 1px; height: 30px; background: var(--border); flex-shrink: 0; }
.bsb-right { display: flex; align-items: center; gap: 10px; }
.bsb-signal { display: flex; align-items: center; gap: 8px; }

/* ── Connect button ──────────────────────────────────────────────────────── */
.btn-connect {
  background: var(--green); color: #fff; border: none;
  padding: 8px 18px; font-size: 12px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
  transition: background .15s; white-space: nowrap;
}
.btn-connect:hover   { background: var(--green-lt); }
.btn-connect-lg      { padding: 12px 32px; font-size: 14px; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.bot-empty-state { max-width: 620px; margin: 24px auto; padding: 8px 4px; }
.bes-header { text-align: center; margin-bottom: 20px; }
.bes-exchanges { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.bes-ex {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  padding: 2px 9px; letter-spacing: .06em; border: 1px solid currentColor;
}

/* TM-first sections */
.bes-section { border: 1px solid var(--border); padding: 18px 20px; margin-bottom: 10px; }
.bes-section-alt { background: var(--bg1); }
.bes-section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bes-section-title { font-size: 14px; font-weight: 700; color: var(--white); }
.bes-badge {
  font-size: 9px; font-weight: 700; letter-spacing: .14em;
  padding: 2px 7px; text-transform: uppercase; flex-shrink: 0;
}
.bes-badge-primary { background: var(--green-bg); color: var(--green); border: 1px solid var(--green); }
.bes-badge-alt { background: var(--bg2); color: var(--dim); border: 1px solid var(--border2); }
.bes-tm-why { font-size: 12px; color: var(--dim); line-height: 1.65; margin-bottom: 14px; }
.bes-tm-steps { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.bes-step { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; color: var(--white); }
.bes-step-n {
  min-width: 20px; height: 20px; border-radius: 50%;
  background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; flex-shrink: 0; margin-top: 1px;
}
.bes-tm-downloads { display: flex; gap: 8px; flex-wrap: wrap; }
.bes-dl-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--green); color: #fff; border: none;
  padding: 8px 16px; font-size: 12px; font-weight: 600; letter-spacing: .04em;
  cursor: pointer; text-decoration: none; transition: background .15s;
}
.bes-dl-btn:hover { background: var(--green-lt); }

/* ── Bot user card — new class names ─────────────────────────────────────── */
.bot-user-card.has-pos     { border-color: var(--green); }
.bot-user-card.has-error   { border-color: var(--red); }
.bot-user-card.is-paused   { opacity: .6; }
.buc-exchange-badge {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  padding: 1px 7px; letter-spacing: .06em; border: 1px solid currentColor;
}
.buc-controls { display: flex; align-items: center; gap: 4px; }
.buc-btn-pause, .buc-btn-close {
  background: none; border: 1px solid var(--border2); color: var(--dim);
  width: 24px; height: 24px; cursor: pointer; font-size: 11px; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.buc-btn-pause:hover { border-color: var(--amber); color: var(--amber); }
.buc-btn-close:hover { border-color: var(--red);   color: var(--red); }
.buc-mode-badge {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  padding: 2px 7px; letter-spacing: .08em; cursor: pointer;
  border: 1px solid; text-transform: uppercase; transition: all .15s;
}
.buc-mode-badge.auto   { color: var(--green); background: var(--green-bg); border-color: var(--green); }
.buc-mode-badge.manual { color: var(--amber); background: #fffde7;         border-color: var(--amber); }

/* Dot state aliases */
.buc-dot.live   { background: #2da44e; animation: pulse 2s infinite; }
.buc-dot.paused { background: var(--amber); }
.buc-dot.error  { background: var(--red); }

/* Account row */
.buc-account {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 13px; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.buc-eq { display: flex; flex-direction: column; min-width: 80px; }
.buc-eq-val { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--white); }
.buc-eq-lbl { font-size: 10px; color: var(--dimmer); letter-spacing: .06em; text-transform: uppercase; }
.buc-margin-bar-wrap {
  flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 60px;
}
.buc-margin-bar-track {
  height: 4px; background: var(--border); position: relative; overflow: hidden;
}
.buc-margin-bar-fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--red); transition: width .4s; }
.buc-margin-lbl { font-size: 10px; color: var(--dimmer); white-space: nowrap; }

/* Position wrapper */
.buc-position-wrap { padding: 8px 13px; border-bottom: 1px solid var(--border); min-height: 38px; }
.buc-no-pos { font-size: 11px; color: var(--dimmer); font-style: italic; }
.buc-pos-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.buc-pos-mark { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--white); }
.buc-pnl-badge { font-family: var(--mono); font-size: 11px; font-weight: 600; padding: 1px 6px; }
.buc-pnl-badge.pos { color: var(--green); background: var(--green-bg); }
.buc-pnl-badge.neg { color: var(--red);   background: var(--red-bg); }
.bpg-v.liq { color: var(--red); }

/* Stats row */
.buc-stats-row {
  display: flex; align-items: stretch; padding: 8px 13px;
  border-bottom: 1px solid var(--border);
}
.buc-stat { display: flex; flex-direction: column; align-items: center; flex: 1; gap: 1px; }
.buc-stat-div { width: 1px; background: var(--border); margin: 0 2px; }
.bcs-val { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--white); }
.bcs-lbl { font-size: 9px; color: var(--dimmer); letter-spacing: .06em; text-transform: uppercase; }
.bcs-val.pos { color: var(--green); }
.bcs-val.neg { color: var(--red); }

/* Error / last trade rows */
.buc-error {
  padding: 6px 13px; font-size: 11px; color: var(--red);
  background: var(--red-bg); border-top: 1px solid var(--red);
}
.buc-last-trade {
  padding: 5px 13px; font-size: 11px;
  display: flex; justify-content: space-between; align-items: center;
}
.buc-last-trade.ok   { color: var(--green); background: var(--green-bg); }
.buc-last-trade.fail { color: var(--red);   background: var(--red-bg); }
.blt-ts { font-size: 10px; color: var(--dimmer); }

/* Card footer */
.buc-footer {
  display: flex; justify-content: space-between; padding: 6px 13px;
  font-size: 10px; color: var(--dimmer);
}
.buc-since, .buc-updated { font-family: var(--mono); }

/* TamperMonkey card */
.buc-tm-badge {
  font-size: 9px; font-weight: 700; letter-spacing: .1em;
  background: var(--amber); color: #fff; padding: 1px 5px;
}
.bot-loading {
  padding: 60px 20px; text-align: center; color: var(--dimmer);
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
}
.bot-render-error {
  padding: 24px; border: 1px solid var(--red); background: var(--red-bg);
  color: var(--red); font-size: 12px; line-height: 1.7; margin: 20px 0;
}
.bot-render-error code { font-family: var(--mono); font-size: 11px; }

/* ── Signal alert toast ──────────────────────────────────────────────────── */
#signal-toast {
  position: fixed; bottom: 36px; left: 50%; transform: translateX(-50%);
  background: var(--green); color: #fff;
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .1em;
  padding: 10px 22px; border: 2px solid var(--green-lt);
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
  z-index: 9998; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
#signal-toast.show { opacity: 1; }
#signal-toast.short-alert { background: var(--red); border-color: #a93226; }

/* ── Signal history — reusable layout classes ────────────────────────────── */
.sh-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: var(--green); color: #fff;
  flex-wrap: wrap; gap: 8px;
}
.sh-title { display: flex; align-items: center; gap: 12px; }
.sh-title span { font-size: 11px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
.sh-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sh-filters select {
  background: #1a1a1a; border: 1px solid #444; color: #e0e0e0;
  font-family: var(--mono); font-size: 11px; padding: 3px 8px; outline: none;
}
.sh-stats { display: flex; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.sh-stat { flex: 1; min-width: 70px; padding: 10px 14px; border-right: 1px solid var(--border); background: #fff; }
.sh-stat-lbl { color: var(--dim); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 3px; }
.sh-stat-val { font-size: 18px; font-weight: 700; }
.sh-revisions { flex: 3; padding: 10px 14px; background: #fff; }
.sh-revisions-lbl { color: var(--dim); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 3px; }
.sh-revisions-body { font-size: 11px; color: var(--white); line-height: 1.7; }

/* ── New signal flash on live card ───────────────────────────────────────── */
@keyframes signal-flash {
  0%   { box-shadow: inset 0 0 0 2px var(--green); }
  50%  { box-shadow: inset 0 0 0 2px transparent; }
  100% { box-shadow: inset 0 0 0 2px var(--green); }
}
#signal-wrap.signal-new { animation: signal-flash 1s ease-in-out 4; }
.signal-new-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--green); color: #fff;
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: .15em; padding: 3px 10px;
  animation: pulse 1s infinite;
}

/* ── Tab notification badge ──────────────────────────────────────────────── */
.tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 7px; height: 7px; border-radius: 50%;
  background: #7fff9a; margin-left: 5px;
  animation: pulse 1.5s infinite; flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   900px  tablet landscape — minor reflow
   768px  tablet portrait  — hide secondary columns
   480px  phone landscape  — single column, hide chart sidebar
   375px  phone portrait   — minimum viable layout
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 900px ──────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .brand        { display: none; }
  #tabs .tab    { padding: 0 10px; font-size: 10px; }

  /* Signal */
  .sig-top      { grid-template-columns: 1fr; }
  .levels-grid  { grid-template-columns: repeat(3, 1fr); }

  /* Liquidity */
  .liq-stats    { grid-template-columns: 1fr 1fr; }
  .liq-clusters { grid-template-columns: 1fr; }

  /* Calculator */
  .calc-layout  { grid-template-columns: 1fr; }
  .cres-grid4   { grid-template-columns: 1fr 1fr; }
  .ctp-row, .ctp-legend { grid-template-columns: 36px 30px 1fr 36px 60px; }
  .ctp-ev       { display: none; }
  .cscore-row   { grid-template-columns: 90px 1fr 50px; }
  .cscore-note  { display: none; }

  /* Bot */
  .bot-grid     { grid-template-columns: 1fr; }
}

/* ── 768px — Tablet ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Header */
  #topbar { padding: 0 10px; }
  #tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 0 12px; font-size: 10px; flex-shrink: 0; }
  #clock { font-size: 10px; margin-left: 8px; }
  #user-badge { display: none; }

  /* Symbol bar */
  #symbol-bar { padding: 4px 10px; gap: 6px; }

  /* Content */
  #content { padding: 10px; }

  /* Chart — hide tape column, order book shrinks */
  #chart-layout { grid-template-columns: 1fr 220px; }
  #chart-tape   { display: none; }

  /* Signal history */
  .sh-filters { gap: 6px; }
  .sh-filters select { font-size: 13px; padding: 5px 8px; }
  .sh-stat { min-width: 80px; }

  /* Liquidity cluster rows */
  .cluster-row { grid-template-columns: 20px 1fr 60px 70px 50px; font-size: 10px; }

  /* Calculator */
  .calc-layout { grid-template-columns: 1fr; }
  .cff-row     { grid-template-columns: 1fr; }

  /* Status bar */
  #status-bar .sb-item:not(:first-child):not(:last-child) { display: none; }

  /* Touch targets — 44px min for fingers, prevent iOS auto-zoom on inputs */
  .tab, .pill, .tick-btn, .btn-connect, button { min-height: 36px; }
  .tab { min-height: 44px; display: flex; align-items: center; }
  select, input { font-size: 16px; }
}

/* ── 480px — Phone landscape / small tablet ──────────────────────────────── */
@media (max-width: 480px) {
  /* Header — icon-only tabs */
  #topbar { height: 44px; }
  .tab { padding: 0 9px; font-size: 9px; letter-spacing: .06em; }
  .brand { display: none; }

  /* Symbol bar */
  #symbol-bar { padding: 3px 8px; }
  .bar-label  { display: none; }
  .divider    { display: none; }

  /* Content */
  #content { padding: 8px; height: calc(100vh - 44px - 30px - 24px); }

  /* Chart — full width, hide order book and tape */
  #chart-layout       { grid-template-columns: 1fr; height: calc(100vh - 44px - 30px - 24px); }
  #chart-right        { display: none; }
  #chart-tape         { display: none; }

  /* Exchanges — full width cards */
  #exchange-grid { grid-template-columns: 1fr; }
  .avg-price     { font-size: 36px; }
  .avg-stats     { gap: 20px; }

  /* Signal live card */
  .levels-grid  { grid-template-columns: 1fr 1fr; }
  .factor-table { font-size: 10px; }
  .factor-table td:last-child { display: none; }

  /* Signal history */
  .sh-revisions   { display: none; }          /* hide model revisions on phone */
  .sh-stat        { min-width: 60px; padding: 8px 10px; }
  .sh-stat-val    { font-size: 15px; }
  .sh-filters     { width: 100%; justify-content: flex-start; }
  .sh-filters select { flex: 1; min-width: 0; font-size: 14px; padding: 6px 4px; }

  /* Liquidity */
  .liq-stats    { grid-template-columns: 1fr; }
  .liq-clusters { grid-template-columns: 1fr; }
  .cluster-row  { grid-template-columns: 18px 1fr 55px 65px; font-size: 10px; }
  .cluster-row > *:nth-child(5) { display: none; } /* hide last col */

  /* Calculator */
  .cres-grid4  { grid-template-columns: 1fr 1fr; }
  .calc-form   { position: static; }

  /* Bot */
  .bot-grid       { grid-template-columns: 1fr; }
  .bsb-right      { display: none; }
  .bsb-metric     { min-width: 60px; padding-right: 10px; }

  /* Status bar */
  #status-bar { font-size: 10px; padding: 0 8px; }
  .sb-sep     { display: none; }
}

/* ── 375px — Phone portrait (iPhone SE / small Android) ─────────────────── */
@media (max-width: 375px) {
  #topbar { height: 42px; padding: 0 4px; }
  .tab    { padding: 0 7px; font-size: 8.5px; }

  #content { padding: 6px; height: calc(100vh - 42px - 28px - 22px); }

  #symbol-bar { height: 28px; padding: 2px 6px; }
  #symbol-select { font-size: 11px; }
  .pill { padding: 1px 7px; font-size: 10px; }

  /* Signal */
  .sig-stat .s-val { font-size: 22px; }
  .levels-grid     { grid-template-columns: 1fr; }

  /* Calc result cells */
  .cres-grid4 { grid-template-columns: 1fr 1fr; }
  .cell .c-val { font-size: 13px; }

  /* Factor table — show only Factor + Score */
  .factor-table th:nth-child(3),
  .factor-table th:nth-child(4),
  .factor-table td:nth-child(3),
  .factor-table td:nth-child(4) { display: none; }

  /* Exchange card */
  .ex-rows { grid-template-columns: 1fr; }

  /* Status bar */
  #status-bar { height: 22px; }
}