/* TradeAI design tokens + components. Root element carries .t-dark or .t-light.
   Source: Claude Design project "TradeAI — NSE Call Desk" (tokens.css). */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* Dark = slate, not black (v2, 27 Oct). */
.t-dark {
  --bg: #121821; --bg2: #151C26; --sf: #19212D; --sf2: #1E2734; --sf3: #252F3E;
  --ln: #2A3445; --ln2: #354155;
  --ink: #EEF2F8; --ink2: #A9B4C6; --ink3: #8E9AAE; --ink4: #556074;
  --brand: #22D3EE; --brand-ink: #04121A; --brand-soft: rgba(34,211,238,.13);
  --bull: #19E58C; --bull-soft: rgba(25,229,140,.13);
  --bear: #FF4D67; --bear-soft: rgba(255,77,103,.13);
  --warn: #FFB020; --warn-soft: rgba(255,176,32,.14);
  --info: #45B8FF; --info-soft: rgba(69,184,255,.14);
  --s-swing: #3987E5; --s-range: #D55181; --s-bounce: #9085E9;
  --mark-bg: #EEF2F8; --mark-ink: #121821; --mark-bar: #19E58C;
  --sh1: 0 1px 0 rgba(255,255,255,.03) inset, 0 1px 2px rgba(0,0,0,.25);
  --sh2: 0 18px 40px -16px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.04) inset;
  background: var(--bg); color: var(--ink);
}
.t-light {
  --bg: #F5F6F8; --bg2: #EDEFF3; --sf: #FFFFFF; --sf2: #F7F8FA; --sf3: #EFF1F5;
  --ln: #E7E9EE; --ln2: #D8DCE4;
  --ink: #0B1220; --ink2: #475264; --ink3: #6A768A; --ink4: #B7BFCB;
  --brand: #0891B2; --brand-ink: #FFFFFF; --brand-soft: rgba(8,145,178,.09);
  --bull: #0E9F63; --bull-soft: rgba(14,159,99,.10);
  --bear: #E23D4F; --bear-soft: rgba(226,61,79,.09);
  --warn: #B87503; --warn-soft: rgba(217,138,6,.11);
  --info: #0A84D6; --info-soft: rgba(10,132,214,.09);
  --s-swing: #2A78D6; --s-range: #D55181; --s-bounce: #6250D6;
  --mark-bg: #0B1220; --mark-ink: #FFFFFF; --mark-bar: #19E58C;
  --sh1: 0 1px 2px rgba(15,23,42,.04), 0 1px 1px rgba(15,23,42,.03);
  --sh2: 0 10px 30px -12px rgba(15,23,42,.16), 0 2px 6px rgba(15,23,42,.04);
  background: var(--bg); color: var(--ink);
}

.app { font: 14px/1.5 'Inter Tight', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.mono { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; }
.ink2 { color: var(--ink2); }
.ink3 { color: var(--ink3); }
.up { color: var(--bull); }
.down { color: var(--bear); }
.amber { color: var(--warn); }
.brandc { color: var(--brand); }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink3); }
.h1 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.h2 { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }

.card { background: var(--sf); border: 1px solid var(--ln); border-radius: 12px; box-shadow: var(--sh1); min-width: 0; }
.card-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--ln); }
.hair { height: 1px; background: var(--ln); }

.badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 99px; background: var(--sf3); color: var(--ink2); font-size: 11px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.badge.bull { background: var(--bull-soft); color: var(--bull); }
.badge.bear { background: var(--bear-soft); color: var(--bear); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.info { background: var(--info-soft); color: var(--info); }
.badge.brand { background: var(--brand-soft); color: var(--brand); }
.badge.outline { background: transparent; box-shadow: inset 0 0 0 1px var(--ln2); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

.sw { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.sw.swing { background: var(--s-swing); }
.sw.range { background: var(--s-range); }
.sw.bounce { background: var(--s-bounce); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--ln2); background: var(--sf2); color: var(--ink); font: 600 13px 'Inter Tight', sans-serif; white-space: nowrap; }
.btn.primary { background: var(--brand); border-color: transparent; color: var(--brand-ink); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink2); }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 8px; }

.tog { width: 34px; height: 20px; border-radius: 99px; background: var(--bull); position: relative; flex: none; }
.tog-k { position: absolute; top: 3px; right: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.tog.off { background: var(--sf3); box-shadow: inset 0 0 0 1px var(--ln2); }

.th { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink3); }
.trow { display: grid; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--ln); font-size: 13px; }
.thead { background: var(--sf2); padding-top: 9px; padding-bottom: 9px; }
.sym { font-weight: 700; letter-spacing: .01em; }
.sub { font-size: 11px; color: var(--ink3); font-weight: 500; }

.lvl { position: relative; height: 6px; border-radius: 99px; background: var(--sf3); }
.lvl-r { position: absolute; top: 0; bottom: 0; left: 0; background: var(--bear-soft); border-radius: 99px 0 0 99px; }
.lvl-g { position: absolute; top: 0; bottom: 0; right: 0; background: var(--bull-soft); border-radius: 0 99px 99px 0; }
.lvl-p { position: absolute; top: -4px; width: 3px; height: 14px; border-radius: 2px; background: var(--ink); }
.lvl-m { position: absolute; top: -2px; width: 2px; height: 10px; background: var(--ink4); }

.meter { height: 6px; border-radius: 99px; background: var(--sf3); overflow: hidden; }
.meter-f { height: 100%; border-radius: 99px; background: var(--brand); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 12px; }
.kv-k { color: var(--ink3); }
.kv-v { text-align: right; font-family: 'JetBrains Mono', monospace; }

.navi { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--ink2); font-weight: 500; }
.navi.on { background: var(--brand-soft); color: var(--ink); box-shadow: inset 2px 0 0 var(--brand); }
.ico { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid currentColor; opacity: .7; flex: none; }

/* Logo mark = option 2g: monochrome tile, "T", thin green base like a closing candle. */
.mark { position: relative; overflow: hidden; width: 30px; height: 30px; border-radius: 9px; background: var(--mark-bg); color: var(--mark-ink); display: grid; place-items: center; font-weight: 800; font-size: 14px; letter-spacing: -.02em; }
.mark::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: var(--mark-bar); }

.pdot { background: var(--bull); }
.hero-l { justify-content: space-between; }