/* =============================================================================
   KryptoBot — Shared Stylesheet
   Dark system: near-black background, warm golden accent, clean panels.
   Matches CarPlay dashboard aesthetic.
============================================================================= */

/* ---- TOKENS ---- */
:root {
  /* Surfaces */
  --bg:        #0a0a0c;
  --card:      #18181d;
  --card2:     #1f1f26;
  --card3:     #26262f;
  --sidebar:   #111114;
  --surface:   #18181d;
  --surface2:  #1f1f26;

  /* Borders */
  --border:    #2a2a32;
  --border2:   #3a3a45;

  /* Primary accent — warm golden */
  --accent:    #f5a623;
  --gold:      #f5a623;
  --gold-dim:  rgba(245,166,35,0.15);
  --gold-bg:   rgba(245,166,35,0.15);
  --gold-bdr:  rgba(245,166,35,0.45);

  /* BTC orange */
  --btc:       #f7931a;
  --btc-bg:    rgba(247,147,26,0.15);
  --btc-bdr:   rgba(247,147,26,0.45);

  /* Status colours */
  --teal:      #4a9eff;
  --teal-dim:  rgba(74,158,255,0.15);
  --teal-bdr:  rgba(74,158,255,0.45);

  --green:     #27c36a;
  --green-bg:  rgba(39,195,106,0.14);
  --green-dim: rgba(39,195,106,0.14);
  --green-bdr: rgba(39,195,106,0.45);

  --red:       #e8394a;
  --red-bg:    rgba(232,57,74,0.14);
  --red-dim:   rgba(232,57,74,0.14);
  --red-bdr:   rgba(232,57,74,0.45);

  --amber:     #f5a623;
  --amber-bg:  rgba(245,166,35,0.14);
  --amber-dim: rgba(245,166,35,0.14);
  --amber-bdr: rgba(245,166,35,0.45);

  /* Purple — used by strategy-attribution accents (YieldMind / PAB) */
  --purple:     #9b7fd4;
  --purple-bg:  rgba(155,127,212,0.15);
  --purple-dim: rgba(155,127,212,0.15);
  --purple-bdr: rgba(155,127,212,0.45);

  /* Typography */
  --text:      #e8e8f0;
  --text2:     #a0a0b0;
  --text3:     #606070;
  --muted:     #606070;
  --dim:       #808090;
  --mono:      'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  --sans:      'Inter', -apple-system, 'Helvetica Neue', sans-serif;

  /* Geometry */
  --radius:    14px;
  --radius-sm: 8px;
  --r:         14px;
  --rs:        8px;

  /* Layout */
  --hdr:       54px;
  --nav:       40px;
}

/* ---- RESET ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ---- DEPTH (lighter touch than before) ---- */
.card, .btn, .badge, .pill,
.m-card, .m-btn, .m-badge, .m-pill {
  box-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.3);
}

/* ---- MANDY SHARED HEADER (rendered by mandy.js) ---- */
.m-header {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--hdr);
  background: var(--sidebar);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; z-index: 200; gap: 16px;
}
.m-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.m-brand-mark {
  width: 28px; height: 28px; background: var(--gold); border-radius: var(--rs);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--bg); flex-shrink: 0;
}
.m-brand-name { font-family: var(--mono); font-weight: 700; font-size: 14px; letter-spacing: 0.10em; color: var(--text); text-transform: uppercase; }
.m-brand-sub  { font-size: 10px; color: var(--muted); letter-spacing: 0.03em; }
.m-header-center { flex: 1; display: flex; align-items: center; justify-content: center; gap: 16px; }
.m-sparkline { width: 160px; height: 34px; }
.m-header-pnl { text-align: right; }
.m-header-pnl-label { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.10em; }
.m-header-pnl-val { font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--teal); }
.m-header-pnl-val.neg { color: var(--red); }
.m-header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.m-cur { display: flex; background: var(--card2); border-radius: var(--rs); overflow: hidden; border: 1px solid var(--border); }
.m-cur-btn { font-family: var(--mono); font-size: 11px; font-weight: 600; padding: 5px 12px; border: none; background: none; color: var(--muted); cursor: pointer; letter-spacing: .04em; transition: all .1s; }
.m-cur-btn.active { background: var(--gold); color: var(--bg); }
.m-kill { background: var(--red-dim); border: 1px solid var(--red-bdr); color: var(--red); font-family: var(--mono); font-size: 11px; font-weight: 700; padding: 5px 13px; border-radius: var(--rs); cursor: pointer; letter-spacing: .06em; transition: all .1s; }
.m-kill:hover { background: var(--red); color: #fff; }
.m-kill.active { background: var(--red); border-color: var(--red); color: #fff; }

/* ---- MANDY NAV TABS (mandy.js) ---- */
.m-nav {
  position: fixed; top: var(--hdr); left: 0; right: 0;
  height: var(--nav);
  background: var(--card);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 20px;
  overflow-x: auto; scrollbar-width: none; z-index: 199; gap: 2px;
}
.m-nav::-webkit-scrollbar { display: none; }
.m-tab {
  font-size: 11px; font-weight: 500; color: var(--muted);
  padding: 0 14px; height: 100%;
  display: flex; align-items: center;
  border-bottom: 2px solid transparent;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: color .1s; flex-shrink: 0;
}
.m-tab:hover { color: var(--text2); }
.m-tab.active { color: var(--gold); border-bottom-color: var(--gold); font-weight: 600; }

/* ---- MANDY STATUS BAR (mandy.js) ---- */
.m-status {
  position: fixed; top: calc(var(--hdr) + var(--nav)); left: 0; right: 0;
  background: var(--sidebar);
  border-bottom: 1px solid var(--border);
  padding: 4px 20px; display: flex; gap: 5px; align-items: center;
  overflow-x: auto; scrollbar-width: none; z-index: 198;
}
.m-status::-webkit-scrollbar { display: none; }
.m-pill {
  display: flex; align-items: center; gap: 6px;
  background: var(--card2); border-radius: var(--rs);
  padding: 4px 10px; white-space: nowrap; flex-shrink: 0;
}
.m-pill.online  { outline: 1px solid var(--green-bdr); }
.m-pill.warning { outline: 1px solid var(--amber-bdr); }
.m-pill.offline { outline: 1px solid var(--red-bdr); }
.m-pill-name { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--text2); }
.m-pill-age  { font-size: 10px; color: var(--muted); }
.m-pill-div  { width: 1px; background: var(--border2); height: 14px; margin: 0 2px; flex-shrink: 0; }
.m-sys { display: flex; align-items: center; gap: 6px; background: var(--card2); border-radius: var(--rs); padding: 4px 10px; white-space: nowrap; flex-shrink: 0; }
.m-sys.online  { outline: 1px solid var(--green-bdr); }
.m-sys.warning { outline: 1px solid var(--amber-bdr); }
.m-sys.offline { outline: 1px solid var(--red-bdr); }
.m-sys-val { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--text2); }
.m-sys-lbl { font-size: 10px; color: var(--muted); }

/* ---- MANDY PAGE LAYOUT (older grid pages) ---- */
.m-page { max-width: 1800px; margin: 0 auto; padding: 14px 20px; }
.m-cols { display: grid; grid-template-columns: 1fr 370px; gap: 12px; align-items: start; }
.m-col  { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* ---- MANDY CARD (older card system, alongside .card above) ---- */
.m-card { background: var(--card); border-radius: var(--r); overflow: hidden; }
.m-card-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 14px 6px;
  background: var(--sidebar);
}
.m-card-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .10em; color: var(--muted); }
.m-badge { font-family: var(--mono); font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: var(--rs); letter-spacing: .04em; }
.m-badge-gold  { background: var(--gold-dim);  color: var(--gold);  border: 1px solid var(--gold-bdr); }
.m-badge-teal  { background: var(--teal-dim);  color: var(--teal);  border: 1px solid var(--teal-bdr); }
.m-badge-green { background: var(--green-dim); color: var(--green); border: 1px solid var(--green-bdr); }
.m-badge-red   { background: var(--red-dim);   color: var(--red);   border: 1px solid var(--red-bdr); }
.m-badge-amber { background: var(--amber-dim); color: var(--amber); border: 1px solid var(--amber-bdr); }

/* ---- MANDY BUTTON (older button system, alongside .btn above) ---- */
.m-btn { font-family: var(--mono); font-size: 11px; font-weight: 700; padding: 6px 13px; border: 1px solid; border-radius: var(--rs); cursor: pointer; transition: filter .1s, transform .1s, box-shadow .1s; letter-spacing: .04em; white-space: nowrap; }
.m-btn:hover { filter: brightness(1.15); }
.m-btn-gold  { background: var(--gold-dim);  border-color: var(--gold-bdr);  color: var(--gold); }
.m-btn-teal  { background: var(--teal-dim);  border-color: var(--teal-bdr);  color: var(--teal); }
.m-btn-green { background: var(--green-dim); border-color: var(--green-bdr); color: var(--green); }
.m-btn-red   { background: var(--red-dim);   border-color: var(--red-bdr);   color: var(--red); }
.m-btn-amber { background: var(--amber-dim); border-color: var(--amber-bdr); color: var(--amber); }
.m-btn-solid-gold  { background: var(--gold);  border-color: var(--gold);  color: var(--bg); }
.m-btn-solid-teal  { background: var(--teal);  border-color: var(--teal);  color: #fff; }
.m-btn-solid-green { background: var(--green); border-color: var(--green); color: #fff; }
.m-btn-solid-red   { background: var(--red);   border-color: var(--red);   color: #fff; }
.m-btn-ghost { background: var(--card2); border-color: var(--border2); color: var(--muted); }
.m-btn-ghost:hover { color: var(--text2); }

/* ---- TOPBAR ---- */
.topbar {
  background: var(--sidebar);
  border-bottom: 1px solid var(--border);
  height: var(--hdr);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 200;
  gap: 16px;
}
.topbar-left { display: flex; align-items: center; gap: 10px; }
.topbar h1  {
  font-size: 15px; font-weight: 700;
  font-family: var(--mono); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gold);
}

/* Logo */
.logo {
  width: 28px; height: 28px;
  border-radius: var(--rs);
  overflow: hidden;
  flex-shrink: 0;
}
.logo img {
  width: 28px; height: 28px;
  object-fit: cover; display: block;
}

/* ---- NAV TABS ---- */
.nav-tabs {
  display: flex;
  background: var(--sidebar);
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
  overflow-x: auto;
  scrollbar-width: none;
  position: sticky;
  top: var(--hdr);
  z-index: 199;
  gap: 2px;
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tab {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  padding: 0 14px;
  height: var(--nav);
  display: flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s;
  flex-shrink: 0;
  background: none;
  border-top: none; border-left: none; border-right: none;
  font-family: var(--sans);
  margin-bottom: -1px;
}
.nav-tab:hover { color: var(--text2); }
.nav-tab.active { color: var(--gold); border-bottom-color: var(--gold); font-weight: 600; }

/* ---- SYMBOL / PAIR TABS ---- */
.symbol-tabs, .pair-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 20px 0;
}
.sym-tab, .pair-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--rs);
  border: 1px solid var(--border2);
  background: var(--card);
  font-size: 11px; font-weight: 600;
  font-family: var(--mono);
  color: var(--muted);
  cursor: pointer;
  transition: all .15s;
  letter-spacing: .03em;
}
.sym-dot  { width: 7px; height: 7px; border-radius: 50%; }
.btc-dot  { background: var(--btc); }
.xau-dot  { background: var(--gold); }
.sym-tab.active-btc, .pair-tab.active-btc { border-color: var(--btc-bdr);  color: var(--btc);  background: var(--btc-bg); }
.sym-tab.active-xau, .pair-tab.active-xau { border-color: var(--gold-bdr); color: var(--gold); background: var(--gold-bg); }
.pair-tab.active-tf { border-color: var(--gold-bdr); color: var(--gold); background: var(--gold-bg); }

/* ---- STATUS PILL ---- */
.status-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--card2);
  border-radius: var(--rs);
  padding: 4px 10px;
  font-size: 11px; font-weight: 600;
  font-family: var(--mono);
  border: 1px solid var(--green-bdr);
  color: var(--green);
  white-space: nowrap;
}
.status-pill .dot, .m-pulse {
  width: 6px; height: 6px;
  border-radius: 50%; flex-shrink: 0;
}
.status-pill .dot   { background: var(--green); animation: pulse-green 2s infinite; }
.m-pulse.online     { background: var(--green); animation: pulse-green 2s infinite; }
.m-pulse.warning    { background: var(--amber); animation: pulse-amber 1s infinite; }
.m-pulse.offline    { background: var(--red); }
@keyframes pulse-green { 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(39,195,106,.5)} 50%{opacity:.6;box-shadow:0 0 0 4px rgba(39,195,106,0)} }
@keyframes pulse-amber { 0%,100%{opacity:1} 50%{opacity:.2} }
@keyframes pulse      { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ---- PILL ---- */
.pill {
  display: flex; align-items: center; gap: 5px;
  background: var(--card2); border-radius: var(--rs);
  padding: 4px 10px; white-space: nowrap; flex-shrink: 0;
  font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--text2);
}
.pill.online  { background: var(--green-bg); border: 1px solid var(--green-bdr); color: var(--green); }
.pill.offline { background: var(--red-bg);   border: 1px solid var(--red-bdr);   color: var(--red); }
.pill .dot    { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.pill.online .dot { animation: pulse-green 2s infinite; }

/* ---- PAGE LAYOUT ---- */
.content {
  max-width: 900px;
  margin: 0 auto;
  padding: 14px 20px;
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
}

/* ---- CARDS ---- */
.card {
  background: var(--card);
  border-radius: var(--r);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 10px;
  padding: 14px 16px;
}
.card-title, .section-title, .section-label, .card-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--muted);
  margin-bottom: 10px;
}
/* Dark header strip on cards */
.card > .section-title:first-child,
.card > .card-title:first-child {
  background: var(--sidebar);
  margin: -14px -16px 12px;
  padding: 7px 16px 6px;
  border-bottom: 1px solid var(--border);
}

/* ---- BADGES ---- */
.badge {
  font-family: var(--mono);
  font-size: 10px; font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--rs);
  letter-spacing: .04em;
  display: inline-block;
}
.badge.buy,   .badge.green { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-bdr); }
.badge.sell,  .badge.red   { background: var(--red-bg);   color: var(--red);   border: 1px solid var(--red-bdr); }
.badge.amber               { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-bdr); }
.badge.gold,  .badge.xau   { background: var(--gold-bg);  color: var(--gold);  border: 1px solid var(--gold-bdr); }
.badge.btc                 { background: var(--btc-bg);   color: var(--btc);   border: 1px solid var(--btc-bdr); }
.badge.teal                { background: var(--teal-dim); color: var(--teal);  border: 1px solid var(--teal-bdr); }
.badge.win                 { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-bdr); }
.badge.loss                { background: var(--red-bg);   color: var(--red);   border: 1px solid var(--red-bdr); }
.badge.open                { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-bdr); }

/* Symbol badges */
.sym-badge        { font-size: 10px; padding: 2px 7px; border-radius: 4px; font-family: var(--mono); font-weight: 600; }
.sym-badge.btc    { background: var(--btc-bg);  color: var(--btc);  border: 1px solid var(--btc-bdr); }
.sym-badge.xau    { background: var(--gold-bg); color: var(--gold); border: 1px solid var(--gold-bdr); }
.sym-badge-inline { font-size: 10px; padding: 2px 6px; border-radius: 3px; font-family: var(--mono); font-weight: 500; margin-right: 6px; }
.sym-badge-inline.btc { background: var(--btc-bg);  color: var(--btc); }
.sym-badge-inline.xau { background: var(--gold-bg); color: var(--gold); }

/* Signal / action badges */
.signal-badge { font-family: var(--mono); font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: var(--rs); }
.signal-badge.buy  { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-bdr); }
.signal-badge.sell { background: var(--red-bg);   color: var(--red);   border: 1px solid var(--red-bdr); }

/* VWAP badges */
.vwap-badge, .sm-vwap-badge, .vwap-snap-badge {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: var(--rs);
}
.vwap-badge.above, .sm-vwap-badge.above, .vwap-snap-badge.above { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-bdr); }
.vwap-badge.below, .sm-vwap-badge.below, .vwap-snap-badge.below { background: var(--red-bg);   color: var(--red);   border: 1px solid var(--red-bdr); }
.vwap-badge.unknown, .sm-vwap-badge.unknown, .vwap-snap-badge.unknown { background: var(--card2); color: var(--muted); border: 1px solid var(--border); }

/* ---- BUTTONS ---- */
.btn {
  font-family: var(--mono);
  font-size: 11px; font-weight: 700;
  padding: 6px 13px;
  border: 1px solid;
  border-radius: var(--rs);
  cursor: pointer;
  transition: filter .15s, transform .1s;
  letter-spacing: .04em;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
}
.btn:hover  { filter: brightness(1.15); }
.btn:active { transform: translateY(1px); filter: brightness(.9); }
.btn-green, .btn-accent { background: var(--green-bg); border-color: var(--green-bdr); color: var(--green); }
.btn-red                { background: var(--red-bg);   border-color: var(--red-bdr);   color: var(--red); }
.btn-amber              { background: var(--amber-bg); border-color: var(--amber-bdr); color: var(--amber); }
.btn-gold               { background: var(--gold-bg);  border-color: var(--gold-bdr);  color: var(--gold); }
.btn-teal               { background: var(--teal-dim); border-color: var(--teal-bdr);  color: var(--teal); }
.btn-ghost              { background: var(--card2);    border-color: var(--border2);   color: var(--muted); }
.btn-ghost:hover        { color: var(--text2); }
.btn-solid-green { background: var(--green); border-color: var(--green); color: #fff; }
.btn-solid-red   { background: var(--red);   border-color: var(--red);   color: #fff; }
.btn-solid-gold  { background: var(--gold);  border-color: var(--gold);  color: var(--bg); }

/* ---- INPUTS ---- */
input[type="text"], input[type="number"], input[type="password"],
.m-input, .sl-input, .tp-pct-input {
  background: var(--card2);
  border: 1px solid var(--border2);
  border-radius: var(--rs);
  padding: 8px 10px;
  font-family: var(--mono); font-size: 13px; font-weight: 500;
  color: var(--text);
  outline: none;
  transition: border-color .15s;
  width: 100%;
  box-shadow: none;
}
input:focus, .sl-input:focus { border-color: var(--gold); }
select, .m-select {
  background: var(--card2); border: 1px solid var(--border2);
  border-radius: var(--rs); color: var(--text);
  font-family: var(--mono); font-size: 12px;
  padding: 7px 8px; outline: none; cursor: pointer; width: 100%;
}
textarea, .m-textarea {
  background: var(--card2); border: 1px solid var(--border2);
  border-radius: var(--rs); padding: 8px 10px;
  font-family: var(--mono); font-size: 12px;
  color: var(--text); outline: none;
  width: 100%; resize: vertical; min-height: 80px; line-height: 1.5;
}
textarea:focus { border-color: var(--gold); }
label, .m-label {
  font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .07em;
  margin-bottom: 4px; display: block; font-weight: 600;
}

/* Toggle switch (settings button group) */
.toggle {
  display: flex;
  border: 1px solid var(--border2);
  border-radius: var(--rs);
  overflow: hidden; flex-shrink: 0;
  background: var(--card2);
  width: max-content; min-height: 36px;
}
.toggle button {
  padding: 8px 16px; font-size: 11px;
  border: none; border-right: 1px solid var(--border2);
  background: transparent; color: var(--muted);
  cursor: pointer; white-space: nowrap;
  font-family: var(--mono); font-weight: 600;
  letter-spacing: .03em; transition: background .15s, color .15s;
}
.toggle button:last-child { border-right: none; }
.toggle button.active { background: var(--gold); color: var(--bg); }
.toggle-wrap { display: flex; align-items: center; gap: 8px; }

/* m-toggle (checkbox toggle) */
.m-toggle { position: relative; width: 40px; height: 22px; cursor: pointer; flex-shrink: 0; }
.m-toggle input { opacity: 0; width: 0; height: 0; }
.m-tog-track {
  position: absolute; inset: 0;
  background: var(--card3); border: 1px solid var(--border2);
  border-radius: 11px; transition: background .15s;
}
.m-tog-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 14px; height: 14px; background: var(--muted);
  border-radius: 50%; transition: transform .15s, background .15s;
}
.m-toggle input:checked + .m-tog-track { background: var(--gold); border-color: var(--gold); }
.m-toggle input:checked ~ .m-tog-thumb { transform: translateX(18px); background: #fff; }

/* ---- METRICS GRID ---- */
.metrics, .test-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; margin-bottom: 10px;
}
.metric {
  background: var(--card2);
  border-radius: var(--rs);
  padding: 12px 14px;
  border: 1px solid var(--border);
}
.metric-label { font-size: 10px; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
.metric-val   { font-size: clamp(15px,4vw,20px); font-weight: 700; font-family: var(--mono); color: var(--text); }

/* ---- TRADE ROWS ---- */
.trade-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 4px; border-bottom: 1px solid var(--border); font-size: 13px;
}
.trade-row:last-child { border-bottom: none; }
.trade-date, .sig-time, .signal-time { font-size: 11px; color: var(--muted); font-family: var(--mono); }

/* ---- SYM HEADER ---- */
.sym-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 4px; margin-bottom: 4px; }
.sym-name   { font-size: 12px; font-weight: 700; font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text); }

/* ---- CHARTS ---- */
.chart-wrap   { position: relative; height: 160px; margin-bottom: 4px; }
svg.chart     { width: 100%; height: 100%; }
.chart-toggle { display: flex; border: 1px solid var(--border2); border-radius: var(--rs); overflow: hidden; background: var(--card2); }
.chart-toggle button { flex: 1; padding: 5px 10px; font-size: 11px; border: none; background: transparent; color: var(--muted); cursor: pointer; font-family: var(--mono); transition: all .15s; }
.chart-toggle button.active { background: var(--card3); color: var(--text); font-weight: 600; }
.chart-block  { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px; margin-bottom: 8px; }
.chart-title  { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 8px; }
.chart-legend { display: flex; gap: 12px; align-items: center; margin-top: 6px; }
.chart-leg    { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--muted); }
.chart-leg-dot { width: 8px; height: 8px; border-radius: 50%; }
.chart-axis   { font-size: 9px; color: var(--muted); font-family: var(--mono); display: flex; justify-content: space-between; margin-top: 4px; }
.sparkline    { height: 34px; }

/* ---- PROGRESS BARS ---- */
.prog-rows, .cond-grid { display: flex; flex-direction: column; gap: 6px; }
.prog-row   { display: flex; align-items: center; gap: 8px; }
.prog-label, .cond-label { font-size: 10px; color: var(--muted); font-family: var(--mono); min-width: 80px; }
.prog-track, .conf-bar-track { flex: 1; height: 5px; background: var(--card3); border-radius: 3px; overflow: hidden; }
.prog-fill, .conf-bar-fill   { height: 100%; border-radius: 3px; background: var(--gold); transition: width .3s; }
.prog-fill.buy  { background: var(--green); }
.prog-fill.sell { background: var(--red); }
.conf-bar-fill.buy  { background: var(--green); }
.conf-bar-fill.sell { background: var(--red); }
.prog-val, .conf-bar-val { font-size: 10px; font-family: var(--mono); color: var(--text2); min-width: 30px; text-align: right; }
.conf-bar-val.buy  { color: var(--green); }
.conf-bar-val.sell { color: var(--red); }
.conf-bar-thr { font-size: 10px; color: var(--muted); font-family: var(--mono); }
.conf-bar-block { background: var(--card2); border-radius: var(--rs); padding: .5rem .75rem; border: 1px solid var(--border); }
.conf-bar-label { font-size: 9px; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 5px; font-weight: 700; }
.conf-bar-label.buy  { color: var(--green); }
.conf-bar-label.sell { color: var(--red); }

/* Confidence snapshot */
.conf-snap { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: .75rem 1rem; margin-bottom: 10px; }
.conf-snap-title { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: .6rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; }
.conf-snap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .6rem; }

/* Confidence gates */
.conf-gates-row, .sm-gates-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.conf-gate-item, .sm-gate-item { display: flex; align-items: center; gap: 4px; background: var(--card2); border-radius: var(--rs); padding: 3px 8px; }
.conf-gate-dot, .sm-gate-dot { width: 6px; height: 6px; border-radius: 50%; }
.conf-gate-dot.pass, .sm-gate-dot.pass { background: var(--green); }
.conf-gate-dot.fail, .sm-gate-dot.fail { background: var(--red); }
.conf-gate-name, .sm-gate-name { font-size: 10px; font-family: var(--mono); color: var(--text2); }
.conf-gate-col-label, .sm-gate-col-label { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.conf-gate-col { margin-right: 12px; }

/* ---- CONDITION TILES ---- */
.cond-tile  { background: var(--card2); border-radius: var(--rs); padding: 10px 12px; border: 1px solid var(--border); }
.cond-value { font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--text); }
.cond-sub   { font-size: 9px; color: var(--muted); margin-top: 2px; font-family: var(--mono); }
.cond-value.bullish { color: var(--green); }
.cond-value.bearish { color: var(--red); }
.cond-value.pending { color: var(--muted); font-size: 13px; }

/* ---- SIGNAL LIST ---- */
.sig-list  { display: flex; flex-direction: column; gap: 6px; }
.sig-row, .sig-block { background: var(--card2); border-radius: var(--rs); padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--border); }
.sig-action.buy  { color: var(--green); font-family: var(--mono); font-size: 11px; font-weight: 700; }
.sig-action.sell { color: var(--red);   font-family: var(--mono); font-size: 11px; font-weight: 700; }
.sig-conf    { font-family: var(--mono); font-size: 11px; color: var(--gold); }
.sig-price   { font-family: var(--mono); font-size: 11px; color: var(--text2); }
.sig-outcome { font-size: 10px; color: var(--muted); }
.sig-title   { font-size: 10px; color: var(--muted); font-family: var(--mono); }
.sig-empty   { text-align: center; padding: 2rem; color: var(--muted); font-size: 12px; }
.sig-range-btn { background: var(--card2); border: 1px solid var(--border2); border-radius: var(--rs); color: var(--muted); font-size: 10px; font-family: var(--mono); padding: 3px 8px; cursor: pointer; transition: all .15s; }
.sig-range-btn.active { color: var(--gold); border-color: var(--gold-bdr); background: var(--gold-bg); }
.signal-sym  { font-family: var(--mono); font-size: 11px; font-weight: 600; }

/* ---- SMART MONEY PANEL ---- */
.sm-panel         { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 10px 14px; margin-bottom: 8px; }
.sm-panel-title   { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 8px; }
.sm-panel-grid    { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 6px; }
.sm-panel-tile    { background: var(--card2); border-radius: var(--rs); padding: 7px 10px; border: 1px solid var(--border); }
.sm-panel-label   { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
.sm-panel-val     { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--text); }
.sm-panel-sub     { font-size: 9px; color: var(--muted); margin-top: 2px; }

/* ---- PIPELINE / HEALTH ---- */
.pipeline-step   { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.pipeline-step:last-child { border-bottom: none; }
.step-icon   { font-size: 16px; flex-shrink: 0; }
.step-name   { font-size: 12px; font-weight: 600; color: var(--text2); }
.step-detail { font-size: 11px; color: var(--muted); font-family: var(--mono); margin-top: 2px; word-break: break-all; }
.service-row  { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); }
.service-row:last-child { border-bottom: none; }
.service-name { font-size: 13px; font-weight: 600; color: var(--text); }
.service-desc { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ---- TP ROWS ---- */
.tp-row   { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border); }
.tp-row:last-child { border-bottom: none; }
.tp-label { font-size: 10px; color: var(--muted); font-family: var(--mono); min-width: 28px; }
.tp-price { font-family: var(--mono); font-size: 12px; color: var(--text2); flex: 1; }
.sl-row   { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.partial-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

/* ---- PNL DISPLAY ---- */
.pnl-display { font-family: var(--mono); font-size: 18px; font-weight: 700; }

/* Bias */
.bias-row { display: flex; align-items: center; gap: 8px; }
.bias-dir { font-family: var(--mono); font-size: 12px; font-weight: 700; }
.bias-dir.buy, .bias-dir.bullish { color: var(--green); }
.bias-dir.sell, .bias-dir.bearish { color: var(--red); }
.bias-dir.neutral { color: var(--muted); }
.bias-pct { font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* ---- TOAST ---- */
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(60px);
  background: var(--card); border: 1px solid var(--border2);
  border-radius: var(--rs); padding: 9px 20px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  white-space: nowrap; z-index: 300;
  opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none;
  color: var(--text); box-shadow: 0 4px 24px rgba(0,0,0,.6); letter-spacing: .04em;
}
.toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.green   { border-color: var(--green-bdr); color: var(--green); }
.toast.red     { border-color: var(--red-bdr);   color: var(--red); }
.toast.gold    { border-color: var(--gold-bdr);  color: var(--gold); }
.toast.teal    { border-color: var(--teal-bdr);  color: var(--teal); }

/* ---- KILL TOASTS (drag bar + confirm toasts, carried over from prior theme) ---- */
.m-drag-bar { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--sidebar); border: 1px solid var(--gold); border-radius: var(--r); padding: 11px 18px; display: none; align-items: center; gap: 12px; z-index: 300; box-shadow: 0 4px 20px rgba(0,0,0,.6); white-space: nowrap; }
.m-drag-bar-lbl { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--gold); }
.m-ktost { position: fixed; top: 68px; right: 20px; max-width: 360px; border: 1px solid; border-radius: var(--r); padding: 18px; z-index: 400; transform: translateY(-12px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; background: var(--card); }
.m-ktost.kill   { border-color: var(--red); }
.m-ktost.resume { border-color: var(--green); }
.m-ktost.visible { opacity: 1; transform: translateY(0); pointer-events: all; }
.m-ktost-icon  { font-size: 22px; margin-bottom: 8px; }
.m-ktost-title { font-family: var(--mono); font-size: 13px; font-weight: 700; margin-bottom: 5px; text-transform: uppercase; letter-spacing: .06em; }
.m-ktost.kill .m-ktost-title   { color: var(--red); }
.m-ktost.resume .m-ktost-title { color: var(--green); }
.m-ktost-body  { font-size: 12px; color: var(--muted); margin-bottom: 14px; line-height: 1.5; }
.m-ktost-acts  { display: flex; gap: 8px; }
.m-ktost-btn   { flex: 1; font-family: var(--mono); font-size: 11px; font-weight: 700; padding: 9px; border: 1px solid; border-radius: var(--rs); cursor: pointer; text-transform: uppercase; letter-spacing: .04em; }
.m-ktost-btn.confirm.kill   { background: var(--red);   border-color: var(--red);   color: #fff; }
.m-ktost-btn.confirm.resume { background: var(--green); border-color: var(--green); color: #fff; }
.m-ktost-btn.dismiss { background: var(--card2); border-color: var(--border2); color: var(--muted); }

/* ---- PENDING STATE ---- */
.pos    { color: var(--green); }
.neg    { color: var(--red); }
.gold   { color: var(--gold); }
.muted  { color: var(--muted); }
.pending  { color: var(--amber); }
.running  { color: var(--teal); }
.pass     { color: var(--green); }
.fail     { color: var(--red); }
.active   { color: var(--gold); }
.unknown  { color: var(--muted); }

/* ---- MISC ---- */
.spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--border2); border-top-color: var(--gold);
  border-radius: 50%; animation: spin .7s linear infinite; flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty, .no-selection { text-align: center; padding: 2rem; color: var(--muted); font-size: 13px; }
.refresh-note, .update-note { font-size: 10px; color: var(--muted); font-family: var(--mono); text-align: center; margin-top: 14px; }

/* ---- SETTINGS ROWS ---- */
.row-info    { flex: 1; min-width: 0; }
.row-label   { font-size: 13px; color: var(--text); font-weight: 500; margin-bottom: 2px; }
.row-sub     { font-size: 11px; color: var(--muted); line-height: 1.4; }
.broker-tag  { font-size: 10px; color: var(--muted); font-family: var(--mono); margin-top: 3px; letter-spacing: .04em; }
.row-control { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.val-badge   { font-family: var(--mono); font-size: 12px; color: var(--gold); min-width: 36px; text-align: right; flex-shrink: 0; }
.card .row   { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.card .row:last-child { border-bottom: none; }

/* ---- RANGE SLIDERS ---- */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  height: 4px; background: var(--card3);
  border-radius: 2px; outline: none; cursor: pointer;
  flex: 1; border: none; box-shadow: none; padding: 0; width: auto;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--gold); cursor: pointer;
  border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--gold);
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--gold); cursor: pointer; border: 2px solid var(--bg);
}
input[type="time"] {
  font-size: 12px; font-family: var(--mono);
  padding: 5px 8px; border-radius: var(--rs);
  border: 1px solid var(--border2); background: var(--card2);
  color: var(--text); outline: none; cursor: pointer;
}

/* ---- SAVE / PAUSE BUTTONS ---- */
.save-btn {
  width: 100%; padding: 12px;
  font-size: 13px; font-weight: 700; font-family: var(--mono);
  border-radius: var(--r); border: 1px solid var(--gold-bdr);
  color: var(--gold); background: var(--gold-bg);
  cursor: pointer; transition: filter .15s, transform .1s;
  margin-top: 4px; letter-spacing: .06em; text-transform: uppercase;
}
.save-btn:hover  { filter: brightness(1.15); }
.save-btn:active { transform: translateY(1px); filter: brightness(.9); }

.pause-btn {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  padding: 6px 13px; border-radius: var(--rs);
  border: 1px solid var(--green-bdr); background: var(--green-bg); color: var(--green);
  cursor: pointer; letter-spacing: .04em; transition: filter .15s;
}
.pause-btn:hover { filter: brightness(1.15); }
.pause-btn.paused { border-color: var(--amber-bdr); background: var(--amber-bg); color: var(--amber); }

/* Test button */
.test-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 14px; border-radius: var(--rs);
  border: 1px solid var(--border2); background: var(--card2);
  color: var(--text2); font-size: 13px; font-family: var(--sans); font-weight: 500;
  cursor: pointer; transition: all .15s; width: 100%;
}
.test-btn:hover { border-color: var(--gold); color: var(--gold); }
.test-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---- SLIDER ROW ---- */
.slider-row   { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.slider-label { font-size: 11px; color: var(--text2); min-width: 100px; }
.slider-val   { font-family: var(--mono); font-size: 12px; color: var(--gold); min-width: 36px; text-align: right; }

/* ---- UTILITY ---- */
.mono    { font-family: var(--mono); }
.row     { display: flex; gap: 8px; align-items: center; }
.col     { display: flex; flex-direction: column; gap: 6px; }
.w100    { width: 100%; }
.flex1   { flex: 1; }
.shrink0 { flex-shrink: 0; }
.mt-sm   { margin-top: 6px; }
.mt-md   { margin-top: 12px; }
.mt-lg   { margin-top: 18px; }
.gap-sm  { gap: 6px; }
.gap-md  { gap: 12px; }