/* ============================================================
   ElevateMind Studio — Dashboard
   Uses same design tokens as the marketing site for brand consistency.
   ============================================================ */

:root {
  --bg:        #0a0d12;
  --bg-elev:   #0f141b;
  --panel:     #11171f;
  --panel-2:   #151c26;
  --border:    #1d2630;
  --border-2:  #283543;
  --text:      #e6edf3;
  --text-dim:  #9aa7b4;
  --text-mute: #6b7886;
  --accent:    #3da9fc;
  --accent-2:  #2ee6c5;
  --green:     #2ecc71;
  --red:       #ff5c6c;
  --amber:     #ffb454;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  --radius: 10px;
  --radius-sm: 6px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }   /* HTML `hidden` must win over any later `display:` rule */
html, body { height: 100%; }

/* ===== SVG icon system ===== */
.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; fill: currentColor; flex-shrink: 0; }
.brand-mark { width: 1.05em; height: 1.05em; color: var(--accent); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; padding: 6px 9px; line-height: 1; }
.icon-btn .icon { width: 16px; height: 16px; }
.feed-type .icon { width: 12px; height: 12px; margin-right: 4px; vertical-align: -2px; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono { font-family: var(--font-mono); }
.small { font-size: 0.78rem; }
.dim { color: var(--text-dim); }
.mute { color: var(--text-mute); }
.pos { color: var(--green); }
.neg { color: var(--red); }
.eyebrow {
  font-family: var(--font-mono); font-size: 0.74rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); display: inline-flex; gap: 6px;
}
.eyebrow::before { content: "//"; color: var(--text-mute); }

/* ===== Topbar ===== */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px clamp(12px, 2vw, 20px);
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  gap: 12px;
  flex-wrap: wrap;          /* never let the control row push the page sideways */
}
.topbar-left, .topbar-right {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.topbar-right { justify-content: flex-end; flex: 1; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; }
.brand:hover { text-decoration: none; }
.brand-mark { color: var(--accent); font-size: 1.1rem; }
.brand-text em { font-style: normal; color: var(--text-dim); font-weight: 400; margin-left: 3px; }

.ctrl {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  outline: none;
  min-width: 0;
}
.ctrl:focus { border-color: var(--accent); }
#api-key { width: clamp(120px, 14vw, 220px); }
#bot-filter { background: var(--panel) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%239aa7b4'/></svg>") no-repeat right 8px center; padding-right: 24px; appearance: none; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 0.84rem; font-weight: 500;
  padding: 7px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-2); color: var(--text);
  background: var(--panel-2); cursor: pointer;
  transition: all 0.12s ease;
  white-space: nowrap;       /* keep multi-word labels (ai review, sign in) on one line */
}
.btn:hover { border-color: var(--accent); }
.btn-primary { background: var(--accent); color: #04121f; border-color: var(--accent); font-weight: 600; }
.btn-primary:hover { background: #5bb8ff; }
.btn-ghost { background: transparent; }
.btn-sm { padding: 4px 10px; font-size: 0.76rem; }

/* ===== Badge with state =====
   Fixed min-width on the connection badge so the topbar never reflows when
   the state label changes — dot color is the actual signal. */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.72rem;
  padding: 3px 9px 3px 7px; border-radius: 999px;
  border: 1px solid var(--border-2); color: var(--text-mute);
  background: var(--bg);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  min-width: 62px;
  justify-content: center;
  white-space: nowrap;
}
.badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-mute);
}
.badge[data-state="on"]      { color: var(--green);  border-color: color-mix(in srgb, var(--green) 40%, var(--border)); }
.badge[data-state="on"]::before  { background: var(--green); box-shadow: 0 0 6px var(--green); animation: pulse 2s infinite; }
.badge[data-state="warn"]    { color: var(--amber);  border-color: color-mix(in srgb, var(--amber) 40%, var(--border)); }
.badge[data-state="warn"]::before { background: var(--amber); }
.badge[data-state="off"]     { color: var(--red);    border-color: color-mix(in srgb, var(--red) 40%, var(--border)); }
.badge[data-state="off"]::before  { background: var(--red); }

/* ===== Market session clock (next to the logo) =====
   ET wall-clock + CME session state. Colour signals the session:
   green = RTH open · amber = Globex/overnight · grey = closed. */
.mkt-clock {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 0.72rem;
  padding: 3px 10px 3px 8px; border-radius: 999px;
  border: 1px solid var(--border-2); color: var(--text-dim);
  background: var(--bg); white-space: nowrap; letter-spacing: 0.03em;
}
.mkt-clock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-mute); }
.mkt-clock .mkt-sess { text-transform: uppercase; font-weight: 600; letter-spacing: 0.06em; }
.mkt-clock .mkt-time { color: var(--text-dim); }   /* time stays neutral/readable in every state */
.mkt-clock[data-sess="rth"]    { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, var(--border)); }
.mkt-clock[data-sess="rth"]::before { background: var(--green); box-shadow: 0 0 6px var(--green); animation: pulse 2s infinite; }
.mkt-clock[data-sess="globex"] { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, var(--border)); }
.mkt-clock[data-sess="globex"]::before { background: var(--amber); }
.mkt-clock[data-sess="closed"] { color: var(--text-mute); }
.mkt-clock[data-sess="closed"]::before { background: var(--text-mute); }
@media (max-width: 620px) { .mkt-clock .mkt-time { display: none; } }   /* keep compact on phones */

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* ===== Empty state (dismissible) ===== */
.empty {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
}
.empty-card {
  max-width: 640px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  position: relative;
}
.empty-close {
  position: absolute; top: 10px; right: 12px;
  background: transparent; border: none;
  color: var(--text-mute);
  cursor: pointer; padding: 6px; border-radius: 4px;
}
.empty-close:hover { color: var(--text); background: var(--bg-elev); }
.empty-close .icon { width: 18px; height: 18px; }
.empty-card h2 { font-size: 1.6rem; line-height: 1.2; margin: 8px 0 12px; }
.empty-card .lede { color: var(--text-dim); margin-bottom: 20px; }
.empty-card pre {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-dim);
  overflow-x: auto;
  line-height: 1.7;
}
.empty-card code { color: var(--accent-2); }

/* ===== Main dashboard ===== */
main {
  flex: 1;
  padding: 16px clamp(12px, 2vw, 24px);
  display: flex; flex-direction: column; gap: 16px;
  min-height: 0;
  min-width: 0;
  overflow-x: clip;          /* hard guard: nothing escapes the viewport sideways */
}

/* KPI row — fluid: cards wrap and grow to fill, never overflow */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.kpi {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.kpi-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 6px;
}
.kpi-source {
  font-size: 0.62rem;
  color: var(--text-mute);
  opacity: 0.7;
  text-transform: none;
  letter-spacing: 0;
}
.kpi-value {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
@media (max-width: 900px) {
  .kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 540px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
}

/* Body grid — fluid left rail (clamps with viewport), content column allowed
   to shrink below its intrinsic width via minmax(0,1fr) so wide tables scroll
   INSIDE their panel instead of stretching the whole page sideways. */
.body-grid {
  display: grid;
  grid-template-columns: clamp(260px, 22vw, 360px) minmax(0, 1fr);
  gap: 16px;
  flex: 1;
  min-height: 0;
  min-width: 0;
}
@media (max-width: 1000px) {
  .body-grid { grid-template-columns: 1fr; }
  .feed-panel { max-height: 320px; }
}

.right-col {
  display: flex; flex-direction: column; gap: 16px;
  min-height: 0;
  min-width: 0;          /* allow children to shrink (overflow fix) */
}

/* Ranking + Strategy + Bots side by side, fluid, collapsing as room shrinks */
.panels-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.panels-row > .panel { min-width: 0; }
@media (max-width: 1400px) {
  .panels-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .panels-row { grid-template-columns: 1fr; }
}

/* Trades panel grows to fill remaining height; its table scrolls. So when the
   drift banner appears, everything above pushes down and Trades shrinks (it
   scrolls) instead of the page overflowing. */
.panel-trades { flex: 1 1 auto; min-height: 200px; }
.panel-trades .table-wrap { flex: 1; max-height: none; }

/* Panel base */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  min-height: 0;
  min-width: 0;            /* grid/flex children can shrink → no sideways overflow */
}

/* ===== View switch (dashboard / live) ===== */
.view-switch {
  display: inline-flex;
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
}
.view-btn {
  font-family: var(--font-mono); font-size: 0.78rem;
  padding: 4px 12px; border-radius: 999px;
  border: none; background: transparent; color: var(--text-mute);
  cursor: pointer; transition: all 0.12s ease;
}
.view-btn:hover { color: var(--text-dim); }
.view-btn.active { background: var(--accent); color: #04121f; font-weight: 600; }

/* ===== Live board ===== */
#live-board {
  flex: 1;
  padding: 16px clamp(12px, 2vw, 24px);
  display: flex; flex-direction: column; gap: 16px;
  min-height: 0; min-width: 0; overflow-x: clip;
}
.live-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.live-sum-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
}
.live-sum-label {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-mute); margin-bottom: 4px;
}
.live-sum-value { font-size: 1.4rem; font-weight: 600; }

.live-bots-section { display: flex; flex-direction: column; gap: 10px; }
.live-section-head { border-bottom: none; padding: 0; }
.live-bots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.live-bot-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
}
.live-bot-card.is-online  { border-color: color-mix(in srgb, var(--green) 35%, var(--border)); }
.live-bot-card.is-halted  { border-color: color-mix(in srgb, var(--red) 45%, var(--border)); }
.live-bot-top { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.live-bot-name { font-weight: 600; font-family: var(--font-mono); font-size: 0.92rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-bot-acct { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-mute); letter-spacing: 0.02em; margin-top: -3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-bot-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.live-bot-metric { display: flex; flex-direction: column; }
.live-bot-metric .k { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-mute); font-family: var(--font-mono); }
.live-bot-metric .v { font-family: var(--font-mono); font-size: 0.95rem; font-weight: 600; }
.live-bot-foot { display: flex; justify-content: space-between; align-items: center; font-size: 0.72rem; color: var(--text-mute); }

.live-body-grid {
  display: grid;
  grid-template-columns: clamp(280px, 30%, 460px) minmax(0, 1fr);
  gap: 16px;
  flex: 1; min-height: 0; min-width: 0;
}
@media (max-width: 900px) {
  .live-body-grid { grid-template-columns: 1fr; }
  .live-body-grid .feed-panel { max-height: 300px; }
}
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.panel-head h3 {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  text-transform: uppercase;
  font-family: var(--font-mono);
}
.panel-head-right { display: flex; align-items: center; gap: 10px; }
.popout-row { display: flex; gap: 4px; }
.popout-btn {
  padding: 2px 8px;
  font-size: 0.68rem;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
@media (max-width: 540px) {
  .popout-row { display: none; }   /* popups are desktop-only — drag/resize needs a mouse */
}

/* Live feed */
.feed-panel { min-height: 0; }
.feed {
  list-style: none;
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
}
.feed li {
  display: grid;
  grid-template-columns: 52px 62px 64px 1fr;
  gap: 10px;
  padding: 5px 14px;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}
.feed li:hover { background: var(--bg-elev); }
.feed-time { color: var(--text-mute); font-size: 0.75rem; }
.feed-date { color: var(--text-mute); font-size: 0.72rem; white-space: nowrap; }
.feed-type {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border-radius: 3px;
  text-align: center;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.feed-type.signal { color: var(--accent);   border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.feed-type.order  { color: var(--text-dim); }
.feed-type.fill   { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 40%, var(--border)); }
.feed-type.exit   { color: var(--amber);    border-color: color-mix(in srgb, var(--amber) 40%, var(--border)); }
.feed-type.risk   { color: var(--red);      border-color: color-mix(in srgb, var(--red) 40%, var(--border)); }
.feed-type.pnl    { color: var(--green);    border-color: color-mix(in srgb, var(--green) 40%, var(--border)); }
.feed-type.halt   { color: var(--red);      border-color: var(--red); background: color-mix(in srgb, var(--red) 12%, var(--bg-elev)); }
.feed-type.heartbeat { color: var(--text-mute); }
.feed-body { color: var(--text); word-break: break-word; }

/* Highlight a new row for ~5s so live activity is impossible to miss (#alerts).
   .fresh = analytics activity feed (prepend); .hot = Live-board feed + trades. */
.feed li.fresh,
#live-feed li.hot,
#live-trades-tbody tr.hot { animation: rowflash 5s ease-out; }
@keyframes rowflash {
  0%   { background: color-mix(in srgb, var(--accent) 30%, transparent); }
  16%  { background: color-mix(in srgb, var(--accent) 24%, transparent); }
  100% { background: transparent; }
}
/* Bot windows on the Live board: outline lights up + glows when fresh data
   arrives (incl. heartbeat), then fades over ~5s. */
.live-bot-card.flash-new { animation: cardglow 5s ease-out; }
@keyframes cardglow {
  0%   { box-shadow: 0 0 0 2px var(--accent), 0 0 16px color-mix(in srgb, var(--accent) 55%, transparent);
         border-color: var(--accent); }
  55%  { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent),
                     0 0 7px color-mix(in srgb, var(--accent) 22%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ===== Bot Detail Panel (Prioritet 0) — slide-in drawer ===== */
.live-bot-card.bd-clickable { cursor: pointer; transition: border-color 120ms, transform 80ms; }
.live-bot-card.bd-clickable:hover { border-color: var(--border-2); }
.live-bot-card.bd-clickable:active { transform: scale(0.995); }
.live-bot-card.bd-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.bd-root { position: fixed; inset: 0; z-index: 200; }
.bd-root[hidden] { display: none; }
.bd-overlay {
  position: absolute; inset: 0;
  background: rgba(4, 8, 13, 0.55);
  opacity: 0; transition: opacity 220ms ease-out;
}
.bd-root.bd-open-anim .bd-overlay { opacity: 1; }
.bd-drawer {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(480px, 92vw);
  background: var(--panel); border-left: 1px solid var(--border-2);
  box-shadow: -18px 0 48px rgba(0, 0, 0, 0.45);
  display: flex; flex-direction: column; min-height: 0;
  transform: translateX(100%);
  transition: transform 220ms ease-out;
}
.bd-root.bd-open-anim .bd-drawer { transform: translateX(0); }

.bd-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); flex: none;
}
.bd-head-main { min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.bd-name {
  font-family: var(--font-mono); font-weight: 600; font-size: 1.02rem;
  display: flex; align-items: center; gap: 8px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bd-name .status-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.bd-name .status-dot.online  { background: var(--green); box-shadow: 0 0 6px var(--green); animation: pulse 2s infinite; }
.bd-name .status-dot.halted  { background: var(--red); }
.bd-name .status-dot.offline { background: var(--text-mute); }
.bd-head-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bd-head .mode-pill {
  font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 2px 7px; border-radius: 4px;
  border: 1px solid var(--border); color: var(--text-dim);
}
.bd-head .mode-pill.mode-live       { color: var(--green);    border-color: color-mix(in srgb, var(--green) 40%, var(--border)); }
.bd-head .mode-pill.mode-paper      { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 40%, var(--border)); }
.bd-head .mode-pill.mode-demo       { color: var(--accent);   border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.bd-head .mode-pill.mode-evaluation { color: var(--amber);    border-color: color-mix(in srgb, var(--amber) 40%, var(--border)); }
.bd-head .mode-pill.mode-backtest,
.bd-head .mode-pill.mode-unknown    { color: var(--text-mute); }
.bd-badge {
  font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 2px 7px; border-radius: 4px;
  border: 1px solid var(--border); color: var(--text-dim);
}
.bd-badge-online  { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, var(--border)); }
.bd-badge-halted  { color: var(--red);   border-color: color-mix(in srgb, var(--red) 45%, var(--border)); background: color-mix(in srgb, var(--red) 10%, transparent); }
.bd-badge-offline { color: var(--text-mute); }
.bd-close {
  flex: none; width: 30px; height: 30px; border-radius: 6px;
  background: var(--bg-elev); border: 1px solid var(--border); color: var(--text-dim);
  font-size: 0.86rem; cursor: pointer; line-height: 1;
}
.bd-close:hover { color: var(--text); border-color: var(--border-2); }

.bd-body { flex: 1; overflow-y: auto; padding: 16px 18px 26px; display: flex; flex-direction: column; gap: 18px; }
.bd-section { display: flex; flex-direction: column; gap: 9px; }
.bd-h {
  font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-mute); font-weight: 600;
}
.bd-count { color: var(--text-mute); font-weight: 400; }

.bd-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.bd-stat {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 10px;
}
.bd-k { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-mute); font-family: var(--font-mono); white-space: nowrap; }
.bd-v { font-family: var(--font-mono); font-size: 0.95rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-v.pos { color: var(--green); }
.bd-v.neg { color: var(--red); }
.bd-v.dim { color: var(--text-mute); }

.bd-controls { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.bd-btn {
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600;
  padding: 9px 8px; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--bg-elev); border: 1px solid var(--border-2); color: var(--text);
  transition: background 120ms, border-color 120ms; position: relative;
}
.bd-btn:hover:not(:disabled) { background: var(--panel-2); }
.bd-btn:disabled { opacity: 0.5; cursor: default; }
.bd-btn.is-busy { color: transparent; }
.bd-btn.is-busy::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 13px; height: 13px; border: 2px solid var(--text-mute);
  border-top-color: transparent; border-radius: 50%; animation: bdspin 0.7s linear infinite;
}
@keyframes bdspin { to { transform: rotate(360deg); } }
.bd-btn-run, .bd-btn-resume { color: var(--green);  border-color: color-mix(in srgb, var(--green) 40%, var(--border)); }
.bd-btn-pause   { color: var(--amber);  border-color: color-mix(in srgb, var(--amber) 40%, var(--border)); }
.bd-btn-restart { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.bd-btn-stop    { color: var(--red);    border-color: color-mix(in srgb, var(--red) 40%, var(--border)); }
.bd-btn-flat    { color: var(--red);    border-color: color-mix(in srgb, var(--red) 45%, var(--border)); background: color-mix(in srgb, var(--red) 8%, var(--bg-elev)); }
.bd-cmd-status {
  font-family: var(--font-mono); font-size: 0.76rem; padding: 7px 10px;
  border-radius: var(--radius-sm); background: var(--bg-elev);
  border: 1px solid var(--border); color: var(--text-dim);
}
.bd-cmd-status[hidden] { display: none; }
.bd-cmd-status.ok   { color: var(--green); border-color: color-mix(in srgb, var(--green) 35%, var(--border)); }
.bd-cmd-status.fail { color: var(--red);   border-color: color-mix(in srgb, var(--red) 40%, var(--border)); }

.bd-open, .bd-trades { display: flex; flex-direction: column; gap: 6px; }
.bd-pos, .bd-trade {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 0.82rem; font-family: var(--font-mono);
}
.bd-pos-sym { font-weight: 600; min-width: 52px; }
.bd-trade { justify-content: space-between; }
.bd-trade-t { font-size: 0.72rem; color: var(--text-mute); }
.bd-trade-pnl { margin-left: auto; font-weight: 600; }
.bd-body .side-long  { color: var(--green); }
.bd-body .side-short { color: var(--red); }
.bd-v.pos, .bd-trade-pnl.pos { color: var(--green); }
.bd-trade-pnl.neg { color: var(--red); }
.bd-trade-pnl.dim { color: var(--text-mute); }
.bd-empty { color: var(--text-mute); font-size: 0.82rem; font-style: italic; padding: 4px 2px; }

@media (max-width: 540px) {
  .bd-stats, .bd-controls { grid-template-columns: 1fr 1fr; }
}

/* Account → Alerts: sound toggle row */
.setting-row { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; cursor: pointer; }
.setting-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; flex: none; }
.setting-row span { color: var(--text); font-size: 0.9rem; }

/* ---- Admin console: support transcript bubbles + email body ---- */
.sup-thread { display: flex; flex-direction: column; gap: 7px; max-height: 50vh; overflow-y: auto; margin: 8px 0 4px; }
.sup-msg { max-width: 88%; padding: 7px 10px; border-radius: 10px; font-size: 13px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.sup-msg .sup-who { display: block; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.6; margin-bottom: 2px; }
.sup-v { align-self: flex-end; background: var(--accent); color: #06121f; border-bottom-right-radius: 3px; }
.sup-a { align-self: flex-start; background: var(--bg-elev, #0f141b); border: 1px solid var(--border); border-bottom-left-radius: 3px; }
.sup-h { align-self: flex-start; background: color-mix(in srgb, var(--accent-2, #2ee6c5) 16%, var(--panel)); border: 1px solid var(--accent-2, #2ee6c5); border-bottom-left-radius: 3px; }
.em-body { background: var(--bg-elev, #0f141b); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; max-height: 32vh; overflow-y: auto; }

/* Inline chart removed — chart now opens in a floating popup (see .popup below).
   Keep .panel overflow:hidden so other panels still contain their content cleanly. */
.panel { overflow: hidden; }

/* ===== Clickable KPIs / stats that pop out a chart ===== */
.kpi.clickable, .stat.clickable {
  cursor: pointer;
  transition: border-color 0.1s ease;
}
.kpi.clickable:hover, .stat.clickable:hover {
  border-color: var(--accent);
}
.kpi.clickable::after {
  content: "↗";
  position: absolute; top: 8px; right: 10px;
  font-size: 0.74rem; color: var(--text-mute); opacity: 0;
  transition: opacity 0.1s ease;
}
.kpi { position: relative; }
.kpi.clickable:hover::after { opacity: 1; }

/* ===== Floating chart popup ===== */
.popup {
  position: fixed;
  background: var(--panel);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
  z-index: 60;
  display: flex; flex-direction: column;
  min-width: 320px; min-height: 220px;
  overflow: hidden;
}
.popup-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 8px 14px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
  cursor: move;
  user-select: none;
}
.popup-title {
  font-family: var(--font-mono); font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-dim); flex: 1;
}
.popup-meta { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-mute); }
.popup-close {
  background: transparent; border: none; color: var(--text-mute);
  padding: 4px 8px; cursor: pointer; border-radius: 3px; line-height: 1;
}
.popup-close:hover { color: var(--text); background: var(--bg-elev); }
.popup-body { flex: 1; padding: 8px; }
.popup canvas { display: block; width: 100%; height: 100%; }
.popup-resize {
  position: absolute; right: 0; bottom: 0; width: 14px; height: 14px;
  cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, var(--border-2) 50%);
}

@media (max-width: 720px) {
  /* On phone, popups go full-width at the bottom — drag is fiddly on touch */
  .popup { left: 8px !important; right: 8px !important; top: auto !important; bottom: 8px !important;
           width: auto !important; min-width: 0; }
  .popup-head { cursor: default; }
}

/* Universal ranking panel — score block stacks above metrics so the panel
   works at any width (incl. inside the 3-up panels-row). */
.rank-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border);
}
.rank-score {
  background: var(--panel-2);
  padding: 16px 18px;
  display: flex; flex-direction: column; justify-content: center;
  border-right: 1px solid var(--border);
}
.rank-score-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 4px;
}
.rank-score-value {
  font-size: 2.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-dim);
}
.rank-score-value.score-good      { color: var(--accent-2); }
.rank-score-value.score-great     { color: var(--green); }
.rank-score-value.score-weak      { color: var(--amber); }
.rank-score-value.score-bad       { color: var(--red); }
.rank-score-conf {
  font-size: 0.7rem;
  color: var(--text-mute);
  margin-top: 4px;
}
.rank-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 1px;
  background: var(--border);
}
.rank-score { border-right: none; border-bottom: 1px solid var(--border); }

/* Strategy stats grid — fluid to the PANEL width (auto-fit), so it works the
   same inside the 3-up panels-row as full-width, without viewport guesswork. */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 1px;
  background: var(--border);
}
.stat {
  background: var(--panel);
  padding: 10px 12px;
  min-height: 56px;        /* guarantee the second row of stats renders */
  display: flex; flex-direction: column; justify-content: center;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 3px;
}
.stat-value {
  font-size: 0.98rem;
  font-weight: 600;
}
@media (max-width: 1100px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 700px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Per-bot summary table — status lampica + mode badge */
.bots-table .status-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--text-mute); vertical-align: middle;
}
.bots-table .status-dot.online  { background: var(--green); box-shadow: 0 0 6px var(--green); animation: pulse 2s infinite; }
.bots-table .status-dot.halted  { background: var(--red); }
.bots-table .status-dot.offline { background: var(--text-mute); }
.bots-table .mode-pill {
  display: inline-block; font-family: var(--font-mono); font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 1px 6px; border-radius: 3px;
  background: var(--bg-elev); border: 1px solid var(--border);
  color: var(--text-dim);
}
.bots-table .mode-pill.mode-live       { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, var(--border)); }
.bots-table .mode-pill.mode-paper      { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 40%, var(--border)); }
.bots-table .mode-pill.mode-demo       { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.bots-table .mode-pill.mode-evaluation { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, var(--border)); }
.bots-table .mode-pill.mode-backtest   { color: var(--text-mute); }

/* Signals table — grows with available room but stays scrollable when long.
   Capped at min(50vh, 460px) so the page still fits in tight viewports without
   the inner scroll eating the rest of the layout. */
.table-wrap {
  overflow-x: auto;
  max-height: min(50vh, 460px);
  overflow-y: auto;
}
@media (max-height: 760px) {
  .table-wrap { max-height: 280px; }
}
table { border-collapse: collapse; width: 100%; font-size: 0.84rem; }
th, td { text-align: left; padding: 7px 14px; border-bottom: 1px solid var(--border); }
th {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 500;
  position: sticky; top: 0;
  background: var(--panel);
  z-index: 1;
}
td.num, th.num { text-align: right; font-family: var(--font-mono); }
tr:hover td { background: var(--bg-elev); }
td.side-long  { color: var(--green); font-family: var(--font-mono); }
td.side-short { color: var(--red); font-family: var(--font-mono); }

/* ===== Auth modal ===== */
.auth-card { max-width: 420px; }
.auth-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.auth-tab {
  flex: 1; padding: 10px 14px;
  background: transparent; border: none; border-bottom: 2px solid transparent;
  color: var(--text-mute); font-family: var(--font-mono); font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer;
}
.auth-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.auth-field { display: block; margin-bottom: 12px; }
.auth-field > span { display: block; font-size: 0.78rem; color: var(--text-mute); margin-bottom: 4px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; }
.auth-field > input {
  width: 100%; padding: 9px 12px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 0.92rem;
}
.auth-field > input:focus { outline: none; border-color: var(--accent); }
.auth-submit { width: 100%; justify-content: center; margin-top: 4px; }
.auth-error { color: var(--red); font-size: 0.86rem; margin: 8px 0; }
.auth-hint { margin-top: 12px; }

/* ===== Tier badge ===== */
#tier-badge { text-transform: uppercase; letter-spacing: 0.08em; }
#tier-badge[data-tier="free"]   { color: var(--text-mute); }
#tier-badge[data-tier="pro"]    { color: var(--accent);   border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
#tier-badge[data-tier="studio"] { color: var(--green);    border-color: color-mix(in srgb, var(--green) 40%, var(--border)); }

/* ===== Plan row in Account modal ===== */
.plan-row {
  display: flex; align-items: center; gap: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 8px 0 16px;
  flex-wrap: wrap;
}
.plan-current { flex: 1; min-width: 140px; }
.plan-label {
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-mute);
}
.plan-name { font-size: 1.4rem; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: 0.02em; }
.plan-name.tier-pro { color: var(--accent); }
.plan-name.tier-studio { color: var(--green); }
.plan-status { color: var(--text-mute); }
.plan-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ===== Account modal — keys list ===== */
.keys-list { list-style: none; padding: 0; margin: 12px 0; }
.keys-list li {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg);
  margin-bottom: 8px;
}
.keys-list .k-meta { flex: 1; min-width: 0; }
.keys-list .k-share {
  flex-basis: 100%;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-2);
  font-size: 0.76rem;
}
.keys-list .k-share-label { color: var(--text-mute); font-family: var(--font-mono); }
.keys-list .k-share-url {
  font-family: var(--font-mono); font-size: 0.74rem; color: var(--accent);
  word-break: break-all; flex: 1; min-width: 160px;
}
.keys-list .k-label { color: var(--text); font-weight: 600; font-size: 0.92rem; }
.keys-list .k-key {
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-dim);
  word-break: break-all; user-select: all;
}
.keys-list .k-events { font-size: 0.74rem; color: var(--text-mute); font-family: var(--font-mono); }
.keys-list .k-actions { display: flex; gap: 6px; }
.keys-list li.revoked { opacity: 0.5; }
.keys-list li.revoked .k-label::after { content: " (revoked)"; color: var(--red); font-weight: 400; }
.newkey-form { display: flex; gap: 8px; margin-top: 16px; }
.newkey-form input {
  flex: 1; padding: 8px 12px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 0.84rem;
}

/* (old admin modal CSS removed — replaced by Admin Console v2 styles below) */

/* ===== Backtesting Lab — full-page layout ===== */
.btp-page {
  position: fixed; inset: 0; z-index: 400;
  background: var(--bg);
  display: flex; flex-direction: row;
  overflow: hidden;
}
.btp-side {
  width: 272px; flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: var(--panel);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.btp-side-head {
  display: flex; align-items: center; gap: 8px;
  padding: 15px 16px 13px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.btp-brand-mark {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.9rem; font-weight: 600; color: var(--text);
  flex: 1; min-width: 0;
}
.btp-x-btn { opacity: 0.55; flex-shrink: 0; }
.btp-x-btn:hover { opacity: 1; }
.btp-config-scroll {
  flex: 1; overflow-y: auto;
  padding: 16px; display: flex; flex-direction: column; gap: 20px;
}
/* Field */
.btp-field { display: flex; flex-direction: column; gap: 5px; }
.btp-field-label {
  font-family: var(--font-mono); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-mute);
}
.btp-ctrl {
  background: var(--bg); border: 1px solid var(--border-2);
  border-radius: var(--radius-sm); color: var(--text);
  font-family: var(--font-sans); font-size: 0.84rem;
  padding: 7px 10px; width: 100%;
}
.btp-ctrl:focus { outline: none; border-color: var(--accent); }
.btp-ctrl:disabled { opacity: 0.5; cursor: not-allowed; }
/* Section (symbols / timeframe) */
.btp-section { display: flex; flex-direction: column; gap: 8px; }
.btp-section-head {
  display: flex; align-items: baseline;
  justify-content: space-between; gap: 8px;
}
.btp-section-label {
  font-family: var(--font-mono); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-mute);
}
.btp-tier-chip {
  font-family: var(--font-mono); font-size: 0.68rem;
  color: var(--accent); white-space: nowrap;
}
.btp-hint { font-size: 0.75rem; color: var(--text-mute); margin: 0; }
/* Prop firm collapsible */
.btp-opt-section {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden;
}
.btp-opt-summary {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; cursor: pointer;
  font-size: 0.82rem; color: var(--text-dim);
  background: var(--bg-elev); list-style: none; user-select: none;
}
.btp-opt-summary::-webkit-details-marker { display: none; }
.btp-optional-tag {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 0.63rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 1px 6px; border-radius: 3px;
  background: color-mix(in srgb, var(--text-mute) 12%, var(--bg));
  color: var(--text-mute);
}
.btp-opt-body {
  padding: 12px; display: flex; flex-direction: column; gap: 10px;
  background: var(--bg-elev); border-top: 1px solid var(--border);
}
/* Sidebar footer */
.btp-side-foot {
  flex-shrink: 0; padding: 14px 16px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
}
.btp-run-btn { width: 100%; justify-content: center; font-size: 0.9rem; padding: 10px; }
.btp-back-btn { width: 100%; justify-content: center; color: var(--text-mute); font-size: 0.82rem; }
.btp-back-btn:hover { color: var(--text); }
.btp-error-msg { font-size: 0.77rem; color: var(--red); margin: 0; }
/* RIGHT main */
.btp-main {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden; min-width: 0;
}
.btp-main-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 16px 24px 13px;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.btp-main-head h2 { font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.btp-sub { line-height: 1.5; }
.btp-main-title { display: flex; flex-direction: column; }
/* Editor form */
.btp-editor-wrap {
  flex: 1; overflow-y: auto;
  padding: 18px 24px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.btp-code-area { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.btp-code-topbar {
  display: flex; align-items: baseline;
  justify-content: space-between; gap: 12px;
}
.btp-code-label {
  font-family: var(--font-mono); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-mute);
}
.btp-code-sig { font-size: 0.72rem; }
.btp-code-editor {
  flex: 1; min-height: 340px;
  background: var(--panel);
  border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  color: var(--text); font-family: var(--font-mono);
  font-size: 0.84rem; line-height: 1.6;
  padding: 14px 16px; resize: vertical;
  tab-size: 4; width: 100%;
}
.btp-code-editor:focus { outline: none; border-color: var(--accent); }
/* Results panel */
.btp-results {
  flex: 1; overflow-y: auto;
  padding: 20px 24px 40px;
}
.btp-results-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.btp-results-head h3 { font-size: 0.95rem; font-weight: 600; color: var(--text); }
.btp-results-hint { margin-top: 16px; display: block; }
/* Compact symbol cards inside narrow sidebar */
.btp-page .bt-symbol-grid {
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 6px;
}
.btp-page .bt-symbol-card { padding: 8px 9px; }
.btp-page .bt-sym-meta { display: none; }
/* Responsive — stack on narrow screens */
@media (max-width: 720px) {
  .btp-page { flex-direction: column; }
  .btp-side { width: 100%; border-right: none; border-bottom: 1px solid var(--border); max-height: 52vh; }
  .btp-config-scroll { padding: 12px; }
}

/* ===== Backtest — symbol grid + timeframe pills ===== */
.bt-symbol-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.bt-symbol-card {
  display: grid; gap: 2px;
  text-align: left;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.06s;
  font-family: inherit;
}
.bt-symbol-card:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg));
}
.bt-symbol-card.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--bg));
  color: var(--text);
  box-shadow: 0 0 0 1px var(--accent);
}
.bt-symbol-card.is-disabled, .bt-symbol-card:disabled {
  opacity: 0.45; cursor: not-allowed;
}
.bt-sym-code { font-size: 1rem; color: var(--text); font-weight: 600; letter-spacing: 0.02em; }
.bt-sym-tag {
  display: inline-block; margin-left: 5px;
  font-size: 0.62rem; font-weight: 700;
  padding: 0 5px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent-2) 22%, var(--bg));
  color: var(--accent-2); vertical-align: 1px;
}
.bt-symbol-card.is-micro { border-style: dashed; }
.bt-sym-name { font-size: 0.82rem; color: var(--text-dim); }
.bt-sym-meta { font-size: 0.7rem; }
.bt-loading {
  padding: 24px;
  text-align: center;
  color: var(--text-mute);
}

.bt-tf-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.bt-tf-pill {
  padding: 6px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.bt-tf-pill:hover:not(:disabled) {
  border-color: var(--accent);
}
.bt-tf-pill.is-active {
  background: color-mix(in srgb, var(--accent) 18%, var(--bg));
  border-color: var(--accent);
  color: var(--text);
}
.bt-tf-pill.is-locked, .bt-tf-pill:disabled {
  opacity: 0.45; cursor: not-allowed;
}
.bt-lock { margin-left: 4px; font-size: 0.78rem; }

/* ===== Backtest results — multi-job table ===== */
.bt-jobs-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.bt-jobs-stat {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.bt-jobs-wrap { max-height: 320px; overflow-y: auto; }
.bt-jobs-table { width: 100%; }
.bt-jobs-table th, .bt-jobs-table td { padding: 6px 10px; }
.bt-jobs-table .pos { color: var(--green); }
.bt-jobs-table .neg { color: var(--red); }
.bt-jobs-table .safe-yes { color: var(--green); }
.bt-jobs-table .safe-no  { color: var(--red); }
@media (max-width: 540px) {
  .bt-jobs-summary { grid-template-columns: repeat(2, 1fr); }
  .bt-symbol-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== AI drift detection banner ===== */
.drift-box {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  font-size: 0.86rem;
}
.drift-box .drift-msg { color: var(--text-dim); line-height: 1.4; }
.drift-box.drift-ok      { border-color: color-mix(in srgb, var(--green) 35%, var(--border)); }
.drift-box.drift-moderate{ border-color: color-mix(in srgb, var(--amber) 45%, var(--border)); background: color-mix(in srgb, var(--amber) 6%, var(--panel)); }
.drift-box.drift-high    { border-color: color-mix(in srgb, var(--red) 50%, var(--border));   background: color-mix(in srgb, var(--red) 8%, var(--panel)); }
.drift-box.drift-locked  { border-style: dashed; border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.drift-box.drift-info, .drift-box.drift-ok .drift-msg { color: var(--text-mute); }

/* ===== Strategy builder ===== */
.bt-builder {
  margin: 14px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.bt-builder > summary {
  cursor: pointer; padding: 10px 14px;
  font-size: 0.86rem; color: var(--text-dim);
  user-select: none;
}
.bt-builder[open] > summary { border-bottom: 1px solid var(--border); }
.bt-builder-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.bt-builder-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px;
}
.bt-builder-grid label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 0.74rem; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.04em;
}
.bt-builder-grid .ctrl { width: 100%; padding: 7px 9px; }

/* ===== Backtest analysis (walk-forward + Monte Carlo) ===== */
.bt-analysis {
  margin: 14px 0; padding: 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg);
}
.bt-analysis-h { margin: 0 0 10px; font-size: 0.92rem; color: var(--text); }
.bt-analysis-sub { font-size: 0.8rem; color: var(--text-dim); margin-bottom: 6px; font-weight: 600; }
.bt-analysis-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bt-analysis-loading { padding: 16px; text-align: center; color: var(--text-mute); }
.bt-wf-table, .bt-mc-table { width: 100%; font-size: 0.8rem; }
.bt-wf-table th, .bt-wf-table td, .bt-mc-table th, .bt-mc-table td { padding: 5px 8px; }
.bt-analysis .pos { color: var(--green); }
.bt-analysis .neg { color: var(--red); }
.bt-analysis .safe-yes { color: var(--green); }
.bt-analysis .safe-no  { color: var(--red); }
@media (max-width: 600px) {
  .bt-analysis-cols { grid-template-columns: 1fr; }
}

/* ===== Leaderboard modal ===== */
.lb-card { max-width: 920px; }
.lb-wrap { max-height: 60vh; overflow-y: auto; margin-top: 12px; }
.lb-table { width: 100%; font-size: 0.84rem; }
.lb-table th, .lb-table td { padding: 7px 10px; white-space: nowrap; }
.lb-table tbody tr:first-child td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.lb-table .pos { color: var(--green); }
.lb-table .neg { color: var(--red); }
.lb-table .score-great { color: var(--green); font-weight: 700; }
.lb-table .score-good  { color: var(--accent-2); font-weight: 700; }
.lb-table .score-weak  { color: var(--amber); }
.lb-table .score-bad   { color: var(--red); }

/* ===== AI Review locked state ===== */
.ai-coming-soon {
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 10px 0 16px;
}
.ai-coming-soon p { margin-top: 6px; color: var(--text-dim); font-size: 0.88rem; }
.ai-locked { opacity: 0.45; pointer-events: none; user-select: none; }

/* ===== AI Review modal ===== */
.ai-card { max-width: 760px; }
.ai-card textarea {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  padding: 10px 12px;
  resize: vertical;
  min-height: 240px;
}
.ai-card textarea:focus { outline: none; border-color: var(--accent); }

.ai-loading {
  text-align: center;
  padding: 32px 20px;
}
.ai-loading p {
  position: relative;
  padding-left: 28px;
}
.ai-loading p::before {
  content: "";
  position: absolute; left: 0; top: 50%; margin-top: -8px;
  width: 16px; height: 16px;
  border: 2px solid var(--border-2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.ai-score-row {
  display: grid;
  grid-template-columns: 120px 120px 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 600px) {
  .ai-score-row { grid-template-columns: 1fr 1fr; }
  .ai-summary-box { grid-column: span 2; }
}
.ai-score-box, .ai-safe-box, .ai-summary-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.ai-score-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 4px;
}
.ai-score-value {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.ai-score-value.score-great { color: var(--green); }
.ai-score-value.score-good { color: var(--accent-2); }
.ai-score-value.score-weak { color: var(--amber); }
.ai-score-value.score-bad { color: var(--red); }
.ai-safe-value { font-size: 1.3rem; font-weight: 600; }
.ai-safe-value.safe-yes { color: var(--green); }
.ai-safe-value.safe-no { color: var(--red); }
.ai-summary-value { color: var(--text-dim); font-size: 0.9rem; line-height: 1.4; }

.findings-list { list-style: none; padding: 0; }
.findings-list li {
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
}
.findings-list li.sev-high     { border-left-color: var(--red); }
.findings-list li.sev-medium   { border-left-color: var(--amber); }
.findings-list li.sev-low      { border-left-color: var(--text-mute); }
.finding-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px; flex-wrap: wrap;
}
.finding-sev {
  font-family: var(--font-mono);
  font-size: 0.66rem; letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
}
.finding-sev.sev-high     { background: color-mix(in srgb, var(--red) 20%, transparent); color: var(--red); }
.finding-sev.sev-medium   { background: color-mix(in srgb, var(--amber) 20%, transparent); color: var(--amber); }
.finding-sev.sev-low      { background: var(--bg-elev); color: var(--text-mute); }
.finding-cat {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-mute);
}
.finding-line { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-mute); }
.finding-title { font-weight: 600; color: var(--text); flex: 1; }
.finding-desc { color: var(--text-dim); font-size: 0.88rem; margin: 4px 0 8px; line-height: 1.4; }
.finding-fix {
  font-family: var(--font-mono); font-size: 0.82rem;
  background: var(--bg-elev);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  white-space: pre-wrap;
  color: var(--accent-2);
}
.finding-fix::before {
  content: "Fix:";
  display: block;
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-mute); margin-bottom: 4px;
}

/* ===== Glossary modal ===== */
.modal {
  position: fixed; inset: 0;
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(2px);
}
.modal-card {
  position: relative;
  width: 100%; max-width: 760px;
  max-height: 88vh;
  background: var(--panel);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}
.modal-head h2 {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.modal-body {
  padding: 18px 24px 24px;
  overflow-y: auto;
  line-height: 1.55;
  color: var(--text-dim);
  font-size: 0.92rem;
}
.modal-body h3 {
  font-size: 0.82rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin: 18px 0 8px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.modal-body h3:first-child { border-top: none; margin-top: 4px; padding-top: 0; }
.modal-body p { margin: 8px 0; }
.modal-body code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--accent-2);
  background: var(--bg);
  padding: 1px 5px;
  border-radius: 3px;
}
.modal-body strong { color: var(--text); font-weight: 600; }

.glossary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
}
.glossary dt {
  font-weight: 600;
  color: var(--text);
  margin-top: 10px;
}
.glossary dt:first-child { margin-top: 0; }
.glossary dd {
  margin: 4px 0 0;
  color: var(--text-dim);
  font-size: 0.88rem;
}
.g-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-mute);
  font-weight: 400;
}
.g-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.g-pill.signal    { color: var(--accent);   border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.g-pill.order     { color: var(--text-dim); }
.g-pill.fill      { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 40%, var(--border)); }
.g-pill.exit      { color: var(--amber);    border-color: color-mix(in srgb, var(--amber) 40%, var(--border)); }
.g-pill.risk      { color: var(--red);      border-color: color-mix(in srgb, var(--red) 40%, var(--border)); }
.g-pill.pnl       { color: var(--green);    border-color: color-mix(in srgb, var(--green) 40%, var(--border)); }
.g-pill.halt      { color: var(--red);      border-color: var(--red); }
.g-pill.heartbeat { color: var(--text-mute); }

/* Footer */
.footer {
  padding: 10px 20px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg-elev);
}

/* Scrollbar tweak */
.feed::-webkit-scrollbar, .table-wrap::-webkit-scrollbar { width: 8px; height: 8px; }
.feed::-webkit-scrollbar-thumb, .table-wrap::-webkit-scrollbar-thumb {
  background: var(--border-2); border-radius: 4px;
}
.feed::-webkit-scrollbar-track, .table-wrap::-webkit-scrollbar-track {
  background: var(--panel);
}

/* ============================================================
   Responsive breakpoints
   - large:  >=1280  | full layout
   - laptop: 1100-1279 | rank metrics 2x4
   - tablet: 720-1099  | body single column, KPI 3-up
   - phone:  <720      | KPI 2-up, topbar wraps, trades table hides Bot/Hold
   ============================================================ */

/* Tablet & smaller — stack body, compress controls */
@media (max-width: 1099px) {
  main { padding: 12px; gap: 12px; }
  .topbar { padding: 10px 14px; }
  #api-key { width: 180px; }
}

/* Phone — collapse */
@media (max-width: 720px) {
  body { font-size: 13px; height: auto; min-height: 100vh; }
  main { padding: 10px; }

  /* On phone, kill `flex: 1` panels so each one takes only what it needs.
     Otherwise the chart canvas absorbs remaining viewport and overlaps the
     stats panel below it. */
  .body-grid, .right-col { display: block; }
  .body-grid > *, .right-col > * { margin-bottom: 12px; }
  .panel { flex: none; }
  .feed { max-height: 220px; overflow-y: auto; }
  #pnl-chart { height: 180px !important; }

  .topbar {
    flex-wrap: wrap;
    gap: 8px;
  }
  .topbar-left, .topbar-right {
    flex-wrap: wrap;
    gap: 8px;
  }
  .topbar-right { width: 100%; }
  .brand-text { font-size: 0.95rem; }
  .brand-text em { display: none; }
  #api-key { flex: 1; min-width: 0; width: auto; }
  .ctrl { font-size: 0.78rem; padding: 6px 8px; }
  .btn { font-size: 0.78rem; padding: 6px 10px; }

  .kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .kpi { padding: 10px 12px; }
  .kpi-value { font-size: 1.1rem; }

  .body-grid { gap: 12px; }
  .feed-panel { max-height: 260px; }
  .panel-head { padding: 8px 12px; }
  .panel-head h3 { font-size: 0.78rem; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-value { font-size: 0.88rem; }

  /* Trades table: hide less-critical columns to fit phone width */
  #trades-tbody td:nth-child(2),    /* Bot */
  #trades-tbody td:nth-child(9),    /* Hold */
  .table-wrap thead th:nth-child(2),
  .table-wrap thead th:nth-child(9) { display: none; }
  th, td { padding: 6px 8px; font-size: 0.82rem; }

  /* Ranking score smaller on phone */
  .rank-score { padding: 12px; }
  .rank-score-value { font-size: 1.8rem; }

  /* Modal — full-screen on phone */
  .modal { padding: 0; }
  .modal-card { max-height: 100vh; border-radius: 0; max-width: 100%; }
  .modal-body { padding: 14px 16px 20px; }
}

/* Very narrow — single column KPIs */
@media (max-width: 420px) {
  .kpis { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  .feed li { grid-template-columns: 56px 60px 1fr; gap: 6px; padding: 4px 10px; }
  /* Also hide Reason column from trades */
  #trades-tbody td:nth-child(10),
  .table-wrap thead th:nth-child(10) { display: none; }
}

/* ---- Live bot ticker (footer #1) ----------------------------------- */
.bot-ticker {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; gap: 8px; align-items: center;
  padding: 7px 12px; overflow-x: auto;
  background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border-2);
  scrollbar-width: thin;
}
.bot-ticker::-webkit-scrollbar { height: 6px; }
.bot-ticker::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
.bot-chip {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--panel); color: var(--text-dim); cursor: pointer;
  font-size: 12px; font-family: var(--font-mono); white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.bot-chip:hover { border-color: var(--border-2); color: var(--text); }
.bot-chip.is-online { color: var(--text); }
.bot-chip.is-focus  { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
.bot-chip .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.bot-chip .status-dot.online  { background: var(--green); box-shadow: 0 0 6px var(--green); animation: pulse 2s infinite; }
.bot-chip .status-dot.halted  { background: var(--red); }
.bot-chip .status-dot.offline { background: var(--text-mute); }
.bot-chip.has-activity { border-color: var(--amber); animation: chipGlow 1.4s ease-in-out infinite; }
@keyframes chipGlow {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50%      { box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 22%, transparent); }
}
.tick-badge { font-size: 9px; font-weight: 700; line-height: 1; padding: 2px 4px; border-radius: 4px; }
.tick-badge.sig { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); }
.tick-badge.trd { background: color-mix(in srgb, var(--accent-2) 22%, transparent); color: var(--accent-2); }
/* keep page content clear of the fixed ticker */
body { padding-bottom: 46px; }

/* footer chip: focus zone + watch toggle (#7) */
.bot-chip .chip-main { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.bot-chip .chip-watch { background: none; border: 0; padding: 0 0 0 2px; margin-left: 2px;
  color: var(--green); cursor: pointer; font-size: 11px; line-height: 1; }
.bot-chip .chip-watch.off { color: var(--text-mute); }
.bot-chip.is-off { opacity: .55; }
.bot-chip.is-off .tick-name { text-decoration: line-through; text-decoration-color: var(--text-mute); }

/* Per-trade chart popup (#8) */
.trade-chart-card { width: min(900px, 94vw); max-width: 900px; }
.tc-chart { height: 380px; width: 100%; margin: 10px 0; }
.tc-row { cursor: pointer; }
.tc-row:hover { background: var(--panel-2); }
@media (max-width: 540px) { .tc-chart { height: 280px; } }

/* Market context strip (#5) — rotating headlines under the topbar */
.market-strip { display: flex; align-items: center; gap: 12px; padding: 6px 16px; border-bottom: 1px solid var(--border); background: var(--bg-elev); font-size: 0.8rem; overflow: hidden; white-space: nowrap; }
.market-strip .ms-tag { color: var(--accent-2); font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; flex: 0 0 auto; }
.market-strip .ms-headline { color: var(--text-dim); text-overflow: ellipsis; overflow: hidden; flex: 1 1 auto; text-decoration: none; }
.market-strip .ms-headline:hover { color: var(--text); }
.market-strip .ms-src { color: var(--text-mute); font-size: 0.68rem; flex: 0 0 auto; }

/* Flowing ticker tapes (#10 news, #11 traded symbols) ----------------- */
.market-strip .tape-viewport { flex: 1 1 auto; overflow: hidden; position: relative; min-width: 0; }
.market-strip .tape-track { display: flex; width: max-content; animation: tapeScroll var(--tape-duration, 40s) linear infinite; will-change: transform; }
.market-strip:hover .tape-track { animation-play-state: paused; }
.market-strip .tape-run { display: flex; flex: 0 0 auto; }
.market-strip .tape-item { color: var(--text-dim); text-decoration: none; flex: 0 0 auto; padding: 0 22px; border-right: 1px solid var(--border); white-space: nowrap; }
.market-strip .tape-item:hover { color: var(--text); }
.market-strip .tape-src { color: var(--text-mute); font-size: 0.68rem; margin-left: 6px; }
.symbol-tape { border-bottom: 1px solid var(--border); }
.symbol-tape .tape-tag-sym { color: #34d399; }
.symbol-tape .sym-item b { color: var(--text); font-weight: 600; }
/* Tick colouring (#2): green/red for symbols the bots actively stream/trade. */
.symbol-tape .sym-item.sym-up b,   .symbol-tape .sym-item.sym-up .mono   { color: var(--green); }
.symbol-tape .sym-item.sym-down b, .symbol-tape .sym-item.sym-down .mono { color: var(--red); }
.symbol-tape .sym-arrow { font-size: 0.7rem; }
@keyframes tapeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Account modal actions (#7: admin + logout moved into the account splash) */
.account-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

/* ============================================================
   Admin Console v2 — full-page (sidebar + content + user drawer).
   Replaces the old cramped admin modal. On-brand, reuses the house
   vars + .btn/.stat/.table primitives. (#11)
   ============================================================ */
.adm2 {
  position: fixed; inset: 0; z-index: 100;
  display: flex;
  background: var(--bg);
  color: var(--text-dim);
}
.adm2-side {
  width: 212px; flex-shrink: 0;
  display: flex; flex-direction: column;
  background: var(--panel); border-right: 1px solid var(--border);
  padding: 14px 12px;
}
.adm2-brand {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.9rem; font-weight: 600; color: var(--text);
  padding: 4px 8px 14px;
}
.adm2-brand .brand-mark { width: 1.1em; height: 1.1em; }
.adm2-nav { display: flex; flex-direction: column; gap: 2px; }
.adm2-navitem {
  text-align: left; width: 100%;
  background: transparent; border: 1px solid transparent;
  color: var(--text-dim); cursor: pointer;
  font-family: var(--font-mono); font-size: 0.82rem;
  padding: 8px 11px; border-radius: var(--radius-sm);
  transition: all 0.12s ease;
}
.adm2-navitem:hover { background: var(--panel-2); color: var(--text); }
.adm2-navitem.active { background: color-mix(in srgb, var(--accent) 14%, var(--panel-2)); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.adm2-back { margin-top: auto; justify-content: center; }

.adm2-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.adm2-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}
.adm2-head h2 { font-size: 1.05rem; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.adm2-content { flex: 1; overflow: auto; padding: 18px 22px 44px; }
.adm2-loading { color: var(--text-mute); padding: 24px 4px; font-family: var(--font-mono); font-size: 0.85rem; }
.adm2-note { margin-top: 14px; }
.adm2-stats { margin-bottom: 4px; }

/* shared inputs/selects inside the console */
.adm2 input, .adm2 select, .adm2 textarea {
  font-family: var(--font-sans); font-size: 0.84rem;
  background: var(--bg); border: 1px solid var(--border-2); color: var(--text);
  border-radius: var(--radius-sm); padding: 7px 10px;
}
.adm2 input:focus, .adm2 select:focus, .adm2 textarea:focus { outline: none; border-color: var(--accent); }
.adm2 textarea { resize: vertical; width: 100%; }
.adm2 .mono, .adm2 code { font-family: var(--font-mono); }

.adm2-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.adm2-search { flex: 1; max-width: 360px; }
.adm2-tablewrap { max-height: none; overflow: visible; }
.adm2-h3 {
  font-size: 0.82rem; font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--accent);
  margin: 22px 0 10px; padding-top: 8px; border-top: 1px solid var(--border);
}
.adm2-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 8px; }
.adm2-card h3 { font-size: 0.82rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 12px; }
.adm2-card p { margin: 6px 0; }

.adm2-issue { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.adm2-issue select, .adm2-issue input { min-width: 120px; }
.adm2-genform { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.adm2-lim { display: flex; flex-direction: column; gap: 4px; }
.adm2-lim > span { font-size: 0.7rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-mute); }
.adm2-lim input, .adm2-lim select { width: 130px; }
.adm2-lim-wide input { width: 220px; }
.adm2-lims { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 8px; }
.adm2-full { width: 100%; margin-bottom: 8px; }
.adm2-row { cursor: pointer; }

/* status/role/tier/access pills */
.adm2-pill {
  display: inline-block; font-family: var(--font-mono); font-size: 0.66rem;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 7px; border-radius: 4px; white-space: nowrap;
  background: var(--bg-elev); border: 1px solid var(--border); color: var(--text-dim);
}
.adm2-pill.p-role-admin     { color: var(--accent);   border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.adm2-pill.p-tier-pro       { color: var(--accent);   border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.adm2-pill.p-tier-studio    { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 40%, var(--border)); }
.adm2-pill.p-tier-enterprise{ color: var(--amber);    border-color: color-mix(in srgb, var(--amber) 40%, var(--border)); }
.adm2-pill.p-st-hold        { color: var(--amber);    border-color: color-mix(in srgb, var(--amber) 40%, var(--border)); }
.adm2-pill.p-st-blocked     { color: var(--red);      border-color: color-mix(in srgb, var(--red) 40%, var(--border)); }
.adm2-pill.p-acc-active     { color: var(--green);    border-color: color-mix(in srgb, var(--green) 40%, var(--border)); }
.adm2-pill.p-acc-demo       { color: var(--accent);   border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }

/* status-pill (backtest job state) — was scoped under the old .adm-pane */
.adm2 .status-pill { display: inline-block; padding: 2px 8px; border-radius: 3px; font-family: var(--font-mono); font-size: 0.72rem; }
.adm2 .status-pill.s-done    { background: color-mix(in srgb, var(--green) 18%, var(--bg)); color: var(--green); }
.adm2 .status-pill.s-failed  { background: color-mix(in srgb, var(--red) 18%, var(--bg)); color: var(--red); }
.adm2 .status-pill.s-running { background: color-mix(in srgb, var(--accent) 18%, var(--bg)); color: var(--accent); }
.adm2 .status-pill.s-queued  { background: var(--bg-elev); color: var(--text-mute); }
.adm2-detail { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* one-time secret reveal (API keys, invite codes, backup codes) */
.adm2-reveal { margin-top: 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--border)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--amber) 8%, var(--bg)); }
.adm2-reveal-label { font-size: 0.78rem; color: var(--amber); margin-bottom: 8px; }
.adm2-reveal-row { display: flex; gap: 8px; align-items: center; }
.adm2-reveal-val { flex: 1; font-family: var(--font-mono); font-size: 0.82rem; color: var(--text); background: var(--bg); border: 1px solid var(--border-2); padding: 6px 9px; border-radius: var(--radius-sm); word-break: break-all; }
.adm2-backup { font-family: var(--font-mono); font-size: 0.84rem; color: var(--text); background: var(--bg); border: 1px solid var(--border-2); border-radius: var(--radius-sm); padding: 10px 12px; margin: 6px 0 10px; line-height: 1.7; white-space: pre-wrap; }

/* 2FA enrollment */
.adm2-2fa-grid { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; }
.adm2-qr { width: 168px; height: 168px; background: #fff; padding: 8px; border-radius: var(--radius-sm); flex-shrink: 0; }
.adm2-2fa-info { flex: 1; min-width: 240px; }
.adm2-secret { display: inline-block; font-family: var(--font-mono); font-size: 0.82rem; color: var(--accent-2); background: var(--bg); border: 1px solid var(--border-2); padding: 5px 9px; border-radius: var(--radius-sm); word-break: break-all; }

/* ===== User-detail drawer ===== */
.adm2-drawer { position: absolute; inset: 0; z-index: 5; display: flex; justify-content: flex-end; }
.adm2-drawer-scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); }
.adm2-drawer-panel {
  position: relative; width: 460px; max-width: 92vw; height: 100%;
  background: var(--panel); border-left: 1px solid var(--border-2);
  display: flex; flex-direction: column; overflow: hidden;
  animation: admDrawerIn 0.18s ease;
}
@keyframes admDrawerIn { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.adm2-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; border-bottom: 1px solid var(--border); background: var(--panel-2); }
.adm2-drawer-head h3 { font-size: 0.98rem; font-weight: 600; color: var(--text); word-break: break-all; }
.adm2-drawer-body { flex: 1; overflow-y: auto; padding: 16px 18px 32px; }

.adm2-uid { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 6px; }
.adm2-uid-row { display: flex; gap: 10px; padding: 3px 0; font-size: 0.84rem; }
.adm2-k { width: 64px; flex-shrink: 0; font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-mute); padding-top: 2px; }
.adm2-grp { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--border); }
.adm2-grp h4 { font-size: 0.74rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-dim); margin-bottom: 8px; }
.adm2-keys { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.adm2-keys li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.adm2-key-meta { min-width: 0; }
.adm2-key-meta b { font-weight: 600; color: var(--text); }
.adm2-key-meta code { color: var(--accent-2); }
.adm2-revoked { opacity: 0.5; }
.adm2-acts { display: flex; flex-direction: column; gap: 4px; }
.adm2-act { font-size: 0.8rem; padding: 4px 8px; background: var(--bg); border-radius: var(--radius-sm); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.adm2-act b { color: var(--text); font-weight: 600; }

/* toast */
.adm2-toast {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 30; padding: 9px 16px; border-radius: var(--radius-sm);
  font-size: 0.84rem; font-family: var(--font-mono);
  background: var(--panel-2); border: 1px solid var(--border-2); color: var(--text);
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
}
.adm2-toast.ok  { border-color: color-mix(in srgb, var(--green) 50%, var(--border)); color: var(--green); }
.adm2-toast.err { border-color: color-mix(in srgb, var(--red) 50%, var(--border)); color: var(--red); }

@media (max-width: 760px) {
  .adm2 { flex-direction: column; }
  .adm2-side { width: 100%; flex-direction: row; align-items: center; gap: 8px; padding: 8px 10px; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border); }
  .adm2-brand { display: none; }
  .adm2-nav { flex-direction: row; gap: 4px; }
  .adm2-back { margin: 0; }
  .adm2-drawer-panel { width: 100%; max-width: 100%; }
}

/* ============================================================
   First-time interactive tour (#13) — coachmark spotlight + help menu.
   ============================================================ */
.tour { position: fixed; inset: 0; z-index: 9998; }
.tour-scrim { position: absolute; inset: 0; pointer-events: auto; }   /* transparent click-block */
.tour-hole {
  position: fixed; left: 0; top: 0; width: 0; height: 0;
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(5, 8, 12, 0.74);   /* dims everything outside the hole */
  border: 2px solid var(--accent);
  pointer-events: none;
}
.tour-pop {
  position: fixed; left: -9999px; top: -9999px; z-index: 1;   /* off-screen until positioned */
  width: 320px; max-width: 88vw;
  background: var(--panel); border: 1px solid var(--border-2);
  border-radius: var(--radius); padding: 14px 16px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
  pointer-events: auto;
  display: flex; flex-direction: column; gap: 4px;
}
.tour-step { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--text-mute); }
.tour-title { font-size: 1rem; font-weight: 600; color: var(--text); }
.tour-body { font-size: 0.86rem; line-height: 1.5; color: var(--text-dim); margin: 2px 0 10px; }
.tour-actions { display: flex; align-items: center; gap: 8px; }
.tour-spacer { flex: 1; }

/* Help menu (topbar help button → tour / glossary) */
.help-wrap { position: relative; display: inline-flex; }
.help-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 170px; padding: 4px;
  background: var(--panel); border: 1px solid var(--border-2);
  border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  display: flex; flex-direction: column;
}
.help-menu-item {
  text-align: left; background: transparent; border: none; cursor: pointer;
  color: var(--text-dim); font-family: var(--font-sans); font-size: 0.84rem;
  padding: 8px 10px; border-radius: var(--radius-sm);
}
.help-menu-item:hover { background: var(--panel-2); color: var(--text); }