@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ============================================================
   JAF TERMINAL — design system, built from scratch (2026-08-02).
   Replaces style.css + looks.css entirely. Nothing here is carried
   over from the previous ceojatin.shop design: new palette, new type
   pairing (Manrope + IBM Plex Mono, not Inter), new spatial system,
   new components. The only backwards-facing part is the COMPAT block
   at the very bottom, which keeps not-yet-rebuilt pages coherent
   while they're migrated one by one -- it shrinks to nothing as each
   page gets native markup.
   ============================================================ */

:root{
  --font-ui:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-num:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --canvas:#F2F4F8;
  --surface:#FFFFFF;
  --surface-2:#F8FAFC;
  --sunken:#EDF1F6;
  --line:#E2E7EF;
  --line-strong:#C9D2E0;

  --ink-1:#0B1220;
  --ink-2:#5A6779;
  --ink-3:#8D99AC;

  --brand:#0B1F3A;
  --mark-from:#0B1F3A;
  --mark-to:#0090A8;

  --accent:#0090A8;
  --accent-ink:#00707F;
  --accent-soft:#DFF3F6;
  --accent-contrast:#FFFFFF;

  --buy:#00875A;
  --buy-soft:#E2F4ED;
  --sell:#D92D2D;
  --sell-soft:#FBE9E9;
  --warn:#B26A00;
  --warn-soft:#FCF1DE;

  --r-xs:5px; --r-sm:7px; --r:10px; --r-lg:14px; --r-pill:999px;

  --sh-1:0 1px 2px rgba(11,18,32,.05);
  --sh-2:0 2px 10px rgba(11,18,32,.07);
  --sh-3:0 16px 40px rgba(11,18,32,.16);

  --topbar-h:56px;
  --rail-w:22%;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}

html[data-theme="dark"], html[data-theme="premium"]{
  --canvas:#070A11;
  --surface:#0F1520;
  --surface-2:#141B28;
  --sunken:#0A0F17;
  --line:#1F2836;
  --line-strong:#2E3A4C;

  --ink-1:#E8EEF7;
  --ink-2:#94A2B6;
  --ink-3:#61708A;

  --brand:#E8EEF7;
  --mark-from:#0090A8;
  --mark-to:#22C7D6;

  --accent:#22C7D6;
  --accent-ink:#22C7D6;
  --accent-soft:#0B2E34;
  --accent-contrast:#04252A;

  --buy:#2BB673;
  --buy-soft:#0C2A1E;
  --sell:#F0605F;
  --sell-soft:#2E1515;
  --warn:#E0A340;
  --warn-soft:#2C2110;

  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 2px 10px rgba(0,0,0,.45);
  --sh-3:0 16px 40px rgba(0,0,0,.6);
}

/* ============================================================
   PREMIUM theme (2026-08-10) -- the obsidian/gold "private execution
   desk" palette from the public landing page, brought into the live
   trading terminal as an opt-in 4th theme. Inherits every dark-theme
   component rule above (duplicated via selector, not copy-pasted) and
   then overrides just the core variables here so the whole terminal
   -- every screen, since everything is already built on these CSS
   custom properties -- re-skins consistently without touching any
   template markup.
   ============================================================ */
html[data-theme="premium"]{
  --canvas:#050506;
  --surface:#0F0E0C;
  --surface-2:#161412;
  --sunken:#08080a;
  --line:rgba(216,185,120,.16);
  --line-strong:rgba(216,185,120,.32);

  --ink-1:#F5F2EA;
  --ink-2:#C7C2B5;
  --ink-3:#8C8778;

  --brand:#D8B978;
  --mark-from:#B8934A;
  --mark-to:#E8CB92;

  --accent:#D8B978;
  --accent-ink:#E8CB92;
  --accent-soft:rgba(216,185,120,.14);
  --accent-contrast:#0A0906;

  --buy:#5FBF7A;
  --buy-soft:rgba(95,191,122,.14);
  --sell:#D96B6B;
  --sell-soft:rgba(217,107,107,.14);
  --warn:#C97B5A;
  --warn-soft:rgba(201,123,90,.14);

  --sh-1:0 1px 2px rgba(0,0,0,.5);
  --sh-2:0 2px 14px rgba(0,0,0,.55);
  --sh-3:0 20px 50px rgba(0,0,0,.7);
}

/* ---------- legacy token aliases: page templates still carry inline
   <style> blocks written against the OLD variable names. Aliasing
   keeps those pages readable during migration instead of rendering
   unstyled. Removed per-page as each page is rebuilt. ---------- */
:root{
  --bg:var(--canvas);
  --bg-elev:var(--surface-2);
  --bg-elev-solid:var(--surface);
  --card:var(--surface);
  --card-solid:var(--surface);
  --tile:var(--sunken);
  --border:var(--line);
  --border-strong:var(--line-strong);
  --text:var(--ink-1);
  --muted:var(--ink-2);
  --muted-2:var(--ink-3);
  --accent-2:var(--accent);
  --green:var(--buy);
  --red:var(--sell);
  --amber:var(--warn);
  --radius-xl:var(--r-lg);
  --radius-lg:var(--r-lg);
  --radius-md:var(--r);
  --radius-sm:var(--r-sm);
  --nav-h:60px;
}

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink-1);
  font-family:var(--font-ui);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--accent-soft);color:var(--accent-ink)}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.02em}

.num,.mono{font-family:var(--font-num);font-variant-numeric:tabular-nums}
.pos,.profit{color:var(--buy)}
.neg,.loss{color:var(--sell)}
.dim,.muted{color:var(--ink-2)}

/* ============================================================
   TOP BAR
   ============================================================ */
.tbar{
  display:none;
  align-items:center;
  gap:18px;
  height:var(--topbar-h);
  padding:0 18px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:60;
}
.rail-pins{display:flex;flex-direction:column;gap:6px;flex-shrink:0;
  padding:10px 10px 12px;border-bottom:1px solid var(--line);background:var(--surface)}
.pin-card{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px;
  padding:6px 9px;border-radius:var(--r-sm);background:var(--sunken)}
.pin-sym{font-size:11px;font-weight:700;color:var(--ink-2);letter-spacing:.04em;text-transform:uppercase}
.pin-ltp{font-family:var(--font-num);font-size:13px;font-weight:600;color:var(--ink-1)}
.pin-up{font-family:var(--font-num);font-size:11.5px;font-weight:600;color:var(--buy);white-space:nowrap}
.pin-dn{font-family:var(--font-num);font-size:11.5px;font-weight:600;color:var(--sell);white-space:nowrap}
.pin-chg-na{font-family:var(--font-num);font-size:11.5px;color:var(--ink-3)}
.pin-empty{font-size:11.5px;color:var(--ink-3);line-height:1.4}

/* 2026-08-17 ("buttons starting from dashboard to till More must be
   starting them after the watchlist static boundary"): brand column
   is sized to match .rail's own width/min/max (var(--rail-w),
   220-440px) so .tbar-nav -- which follows right after in this same
   flex row -- visually starts where the rail column ends beneath
   it, not above it. */
.tbar-brand{display:flex;align-items:center;gap:10px;flex-shrink:0;
  width:var(--rail-w);min-width:220px;max-width:440px}
.mark{width:32px;height:32px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(140deg,var(--mark-from),var(--mark-to));
  display:grid;place-items:center;box-shadow:var(--sh-1)}
.mark svg{display:block}
.wordmark{font-size:15.5px;font-weight:800;letter-spacing:-.02em;color:var(--ink-1);white-space:nowrap}
.wordmark span{font-weight:500;color:var(--ink-2)}

/* 2026-08-20, user-requested: the top-left slot (still sized to
   width:var(--rail-w) so it lines up with the fixed watchlist rail
   below it) now shows live NIFTY 50 / SENSEX quotes instead of the
   brand. */
.tbar-indices{display:flex;flex-direction:row;align-items:center;gap:10px;flex-shrink:0;
  width:var(--rail-w);min-width:220px;max-width:440px;padding:0 2px}
.tbi-quotes{display:flex;flex-direction:column;justify-content:center;gap:2px;flex-shrink:0}
.tbi-row{display:flex;align-items:baseline;gap:8px;font-size:12.5px;white-space:nowrap}
.tbi-sym{font-weight:700;color:var(--ink-2);letter-spacing:.01em;min-width:62px}
.tbi-px{font-weight:800;color:var(--ink-1);font-variant-numeric:tabular-nums}
.tbi-px.up{color:var(--buy)}
.tbi-px.dn{color:var(--sell)}
/* 2026-09-01, user-requested ("empty space after nifty and sensex ...
   show the chart ... an indicative chart with realtime formation"):
   live-building NIFTY sparkline that fills the leftover width inside
   this same rail-width box, drawn client-side from the same
   /api/header-indices poll that already feeds tbiNifty -- no new
   backend endpoint. */
/* 2026-09-01, user-requested ("not so big just occupy 50% space as
   compared to current"): spark now only grows to fill HALF of the
   leftover width in the box -- .tbi-spark-gap is an invisible sibling
   with the same flex:1 that soaks up the other half. */
.tbi-spark{flex:1;min-width:0;max-width:50%;height:30px;display:block;overflow:visible}
.tbi-spark-gap{flex:1;min-width:0}
.tbi-spark polyline{fill:none;stroke-width:1.6;vector-effect:non-scaling-stroke}
.tbi-spark.up polyline{stroke:var(--buy)}
.tbi-spark.dn polyline{stroke:var(--sell)}
.tbi-spark .tbi-spark-fill{stroke:none;opacity:.12}
.tbi-spark.up .tbi-spark-fill{fill:var(--buy)}
.tbi-spark.dn .tbi-spark-fill{fill:var(--sell)}

/* the brand moves here, right before the nav links, so it now sits
   near "Dashboard" etc. instead of the far-left corner. */
.tbar-brand-compact{display:flex;align-items:center;gap:8px;flex-shrink:0;
  padding:6px 12px 6px 4px;margin-right:4px;border-right:1px solid var(--line);text-decoration:none}
.tbar-brand-compact .mark{width:26px;height:26px;border-radius:7px}
.tbar-brand-compact .wordmark{font-size:14px}

/* 2026-09-01, superseded same day by a proper fix: instead of clipping
   overflow into an invisible horizontal scroll (which just hid links
   with no way back to them), navPrioritySync() in base.html now moves
   whichever priority navlinks don't fit into the More dropdown and
   restores them the instant there's room again -- see the "priority
   nav" comment on .tbar-nav's markup. overflow stays hidden here only
   as a safety net for the split second before JS runs on first paint. */
/* 2026-09-01 BUGFIX (user-reported: "not able to click on More button",
   "why not utilising the empty space bw more and paper"): overflow:hidden
   here (added earlier today as a safety net) was a mistake on two counts,
   confirmed live with a throwaway diagnostic account --
   1) .drop-panel (the More dropdown) is a position:absolute DESCENDANT
      of this element. An ancestor with overflow:hidden clips absolutely
      positioned children too -- the panel was actually opening every
      time (aria-expanded="true", display:block, opacity:1,
      pointer-events:auto, all confirmed via devtools) but invisible and
      unclickable because this rule clipped it away.
   2) scrollWidth measurements against an overflow:hidden flex child with
      min-width:0 are unreliable in Chromium -- navPrioritySync() was
      reading numbers that didn't match the links' real widths (a cloned,
      unclipped copy of "Orders" measured 71px naturally, but removing
      the real one from an overflow:hidden container only ever seemed to
      free ~3px), so it kept hiding links long after there was visibly
      tons of room -- exactly the "empty space" the user pointed at.
   navPrioritySync() (base.html) already handles overflow correctly by
   MOVING links into the dropdown instead of clipping them -- this
   overflow:hidden was never actually needed once that shipped. */
.tbar-nav{display:flex;align-items:center;gap:2px;flex:1;min-width:0}
/* a priority navlink parked in the dropdown (see #navDynamic) borrows
   .drop-item's block/hover look instead of the pill-button look it has
   inline in the header. */
/* 2026-09-01 follow-up fix ("see in more how misalligned the selection
   is please fix it too"): the first pass only overrode display/padding/
   border-radius/white-space, leaving gap/font-size/font-weight/color to
   fall back to whichever of .navlink vs .drop-item's OWN single-class
   rules the cascade picked -- correct in theory by source order, but
   fragile and visibly inconsistent for the currently-active page link
   (.navlink.on's accent color/background outranks both on specificity).
   Setting every property explicitly here removes all doubt: a priority
   navlink parked in the dropdown now looks IDENTICAL to every other
   .drop-item, active-page or not. */
.navlink.drop-item{display:flex;align-items:center;gap:10px;padding:9px 11px;
  border-radius:var(--r-sm);font-size:13px;font-weight:600;white-space:normal;
  background:none;color:var(--ink-1)}
.navlink.drop-item:hover{background:var(--sunken);color:var(--ink-1)}
.navlink.on.drop-item{color:var(--ink-1);background:none}
.navlink{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;
  border-radius:var(--r-pill);font-size:13.5px;font-weight:600;color:var(--ink-2);
  border:none;background:none;cursor:pointer;white-space:nowrap;
  transition:background .13s,color .13s}
.navlink:hover{background:var(--sunken);color:var(--ink-1)}
.navlink.on{background:var(--accent-soft);color:var(--accent-ink)}
.navlink svg{flex-shrink:0}

.tbar-right{display:flex;align-items:center;gap:14px;flex-shrink:0}
.funds{display:flex;flex-direction:column;line-height:1.2;text-align:right}
.funds-k{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.funds-v{font-family:var(--font-num);font-size:13.5px;font-weight:600;color:var(--ink-1)}
.icon-btn{width:34px;height:34px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);cursor:pointer;display:grid;place-items:center;
  transition:background .13s,color .13s}
.icon-btn:hover{background:var(--sunken);color:var(--ink-1)}
.avatar{width:34px;height:34px;border-radius:var(--r-pill);border:none;cursor:pointer;flex-shrink:0;
  background:linear-gradient(140deg,var(--mark-from),var(--mark-to));color:#fff;
  font-size:13px;font-weight:800;display:grid;place-items:center;transition:transform .12s}
.avatar:active{transform:scale(.93)}

html[data-theme="dark"] .ic-sun, html[data-theme="premium"] .ic-sun{display:none}
html[data-theme="light"] .ic-moon{display:none}

/* ---------- dropdown (nav More + profile) ---------- */
.drop{position:relative;flex-shrink:0}
.drop-panel{position:absolute;top:calc(100% + 8px);left:0;min-width:216px;z-index:80;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-3);padding:6px;opacity:0;pointer-events:none;
  transform:translateY(-6px);transition:opacity .14s,transform .14s;
  /* Same overflow safety net as .drawer just above, for the "More" nav
     dropdown and the account dropdown -- neither had a max-height, so
     on a short/landscape viewport with everything the account dropdown
     can show at once (email, role, Settings, Admin panel, Emergency
     Exit toggle, Log out) it could also run off the bottom of the
     screen with nothing to scroll it into view. */
  max-height:calc(100vh - 90px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.drop.open .drop-panel{opacity:1;pointer-events:auto;transform:none}
.drop-panel.right{left:auto;right:0}
.drop-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--r-sm);
  font-size:13px;font-weight:600;color:var(--ink-1);cursor:pointer}
.drop-item:hover{background:var(--sunken)}
.drop-item.on{color:var(--accent-ink);background:var(--accent-soft)}
.drop-item.danger{color:var(--sell)}
.drop-sep{height:1px;background:var(--line);margin:6px 2px}
.drop-head{display:flex;align-items:center;gap:10px;padding:8px 10px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.drop-head-av{width:34px;height:34px;border-radius:var(--r-pill);flex-shrink:0;
  background:linear-gradient(140deg,var(--mark-from),var(--mark-to));color:#fff;
  font-size:13px;font-weight:800;display:grid;place-items:center}
.drop-head-mail{font-size:12.5px;font-weight:700;color:var(--ink-1);max-width:170px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drop-head-role{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.drop-toggle-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:9px 11px;border-radius:var(--r-sm)}
.drop-toggle-row .lbl{font-size:12.5px;font-weight:600;color:var(--ink-1)}
.drop-toggle-row .sub{font-size:11px;color:var(--ink-3);margin-top:1px}
.sw{width:38px;height:22px;border-radius:var(--r-pill);border:none;background:var(--line-strong);
  cursor:pointer;position:relative;flex-shrink:0;transition:background .16s;margin-top:2px}
.sw::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:#fff;transition:transform .16s;box-shadow:var(--sh-1)}
.sw[aria-pressed="true"]{background:var(--accent)}
.sw[aria-pressed="true"]::after{transform:translateX(16px)}
.sw.danger[aria-pressed="true"]{background:var(--sell)}
.drop-action-btn{border:1px solid var(--sell);background:transparent;color:var(--sell);border-radius:6px;padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.drop-action-btn:hover{background:var(--sell);color:var(--accent-contrast)}
.drop-action-btn:disabled{opacity:.6;cursor:default}
.sw:disabled{opacity:.55;cursor:default}

/* ============================================================
   TICKER TAPE
   ============================================================ */
.tape{position:relative;height:30px;overflow:hidden;flex-shrink:0;
  background:var(--brand);border-bottom:1px solid var(--line)}
html[data-theme="dark"] .tape, html[data-theme="premium"] .tape{background:var(--surface-2)}
.tape-track{display:inline-flex;white-space:nowrap;align-items:center;height:100%;
  animation:tape 90s linear infinite}
.tape:hover .tape-track,.tape.hold .tape-track{animation-play-state:paused}
@keyframes tape{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tape-item{display:inline-flex;align-items:center;gap:8px;padding:0 20px;cursor:pointer;
  border-right:1px solid rgba(255,255,255,.14);font-size:12px;color:#fff;height:100%}
html[data-theme="dark"] .tape-item, html[data-theme="premium"] .tape-item{color:var(--ink-1);border-right-color:var(--line)}
.tape-item:hover{background:rgba(255,255,255,.09)}
.tape-sym{font-weight:800;letter-spacing:.03em}
.tape-px{font-family:var(--font-num);opacity:.92}
.tape-up{color:#5FE3A1;font-family:var(--font-num);font-size:11.5px}
.tape-dn{color:#FF9A93;font-family:var(--font-num);font-size:11.5px}
html[data-theme="dark"] .tape-up, html[data-theme="premium"] .tape-up{color:var(--buy)}
html[data-theme="dark"] .tape-dn, html[data-theme="premium"] .tape-dn{color:var(--sell)}
.tape-focus{position:absolute;inset:0;display:none;align-items:center;gap:14px;
  padding:0 18px;background:var(--brand);color:#fff;font-size:12.5px}
html[data-theme="dark"] .tape-focus, html[data-theme="premium"] .tape-focus{background:var(--surface-2);color:var(--ink-1)}
.tape-focus.on{display:flex}
.tape-focus .f-sym{font-weight:800;letter-spacing:.04em}
.tape-focus .f-px{font-family:var(--font-num);font-size:14px;font-weight:600}
.tape-focus .f-close{margin-left:auto;border:none;cursor:pointer;font-size:11px;font-weight:700;
  padding:4px 11px;border-radius:var(--r-pill);background:rgba(255,255,255,.16);color:inherit}
html[data-theme="dark"] .tape-focus .f-close, html[data-theme="premium"] .tape-focus .f-close{background:var(--sunken)}

.paper-flag{display:none;align-items:center;justify-content:center;gap:8px;
  padding:6px;background:var(--warn);color:#241703;
  font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.paper-flag.on{display:flex}

/* ============================================================
   SHELL: rail + stage
   ============================================================ */
.shell{display:flex;min-height:0;flex:1;overflow:hidden}
/* 2026-08-17 ("make this watchlist section static and the entire
   page as well ... add a scroll bar instead of entire page gets
   scroll down"): was min-height:100vh, which let body grow taller
   than the viewport as .stage content grew, dragging the rail and
   header along with it in one long page-scroll. Fixed height +
   overflow:hidden pins body to exactly the viewport -- .rail and
   .tbar/.tape now stay put, and only .stage below scrolls (see
   .stage overflow-y:auto). */
body.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}

.rail{display:none;flex-direction:column;flex-shrink:0;
  width:var(--rail-w);min-width:220px;max-width:440px;
  background:var(--surface);border-right:1px solid var(--line);overflow:hidden}
.rail-grip{display:none;width:5px;flex-shrink:0;cursor:col-resize;background:transparent}
.rail-grip:hover,.rail-grip.drag{background:var(--accent-soft)}

.rail-tabs{display:flex;align-items:center;gap:3px;padding:11px 10px 8px;flex-shrink:0}
.rail-tab{width:25px;height:25px;border-radius:var(--r-sm);border:none;background:none;
  color:var(--ink-3);font-size:11.5px;font-weight:700;cursor:pointer;position:relative;
  display:grid;place-items:center}
.rail-tab:hover{background:var(--sunken);color:var(--ink-1)}
.rail-tab.on{background:var(--accent-soft);color:var(--accent-ink)}
.rail-tab.filled::after{content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);
  width:3px;height:3px;border-radius:50%;background:currentColor}
.rail-add{margin-left:auto;width:25px;height:25px;border-radius:var(--r-sm);
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-1);
  font-size:15px;line-height:1;cursor:pointer;flex-shrink:0}
.rail-add:hover{background:var(--sunken)}

/* 2026-08-17 ("instead of Pin 2 favourites text just simple put a
   searchbar"): always visible now instead of hidden-until-you-
   click-+. The .open class toggle in base.html's JS is harmless
   now (display is already block either way). */
.rail-find{display:block;padding:9px 10px 9px;flex-shrink:0;border-bottom:1px solid var(--line)}
.rail-find input{width:100%;padding:8px 11px;border-radius:var(--r-sm);
  border:1px solid var(--line-strong);background:var(--sunken);color:var(--ink-1);font-size:12.5px}
.rail-hits{max-height:320px;overflow-y:auto;margin-top:6px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface)}
.rail-hit{padding:9px 11px;font-size:12.5px;cursor:pointer;
  display:flex;flex-direction:column;gap:3px;border-bottom:1px solid var(--line)}
.rail-hit:last-child{border-bottom:none}
.rail-hit:hover{background:var(--accent-soft)}
.rh-main{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.rh-sym{font-weight:700;color:var(--ink-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rh-name{font-size:10.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45%}
.rh-meta{display:flex;justify-content:space-between;font-size:10px;color:var(--ink-3);font-weight:600}
.rh-broker{text-transform:uppercase;letter-spacing:.04em;color:var(--accent-ink)}
.rail-hit.none{color:var(--ink-3);cursor:default;flex-direction:row}
.rail-hit.none:hover{background:none}

.rail-list{flex:1;overflow-y:auto;padding:0 6px 14px}
.wrow{display:flex;align-items:center;gap:6px;padding:9px 8px;border-radius:var(--r-sm);
  border-left:2px solid transparent}
.wrow:hover{background:var(--sunken)}
.wrow:hover .wkill{opacity:1}
.wrow.up{border-left-color:var(--buy)}
.wrow.down{border-left-color:var(--sell)}
.wpin{border:none;background:none;cursor:pointer;font-size:13px;color:var(--ink-3);
  padding:0;width:17px;flex-shrink:0;line-height:1}
.wpin.on{color:var(--warn)}
.wsym{flex:1;min-width:0;font-size:12.5px;font-weight:700;color:var(--ink-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 2026-09-01, user-reported ("in some scrip b is showing at diff place"):
   .wltp had no fixed width, so its box was only as wide as its own
   digits -- "25.90" vs "15538.00" vs "8138.00" -- which shifted where
   .wbtns (B/S/BI/FBS, right after it) started on every single row.
   A fixed, right-aligned width makes every row's price column line up
   and keeps the buttons at one consistent x regardless of the price's
   digit count. */
.wltp{font-family:var(--font-num);font-size:12.5px;font-weight:600;color:var(--ink-1);
  flex-shrink:0;width:62px;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 2026-08-11: brief flash on live price patch (see base.html's
   patchLivePrices) -- addresses "not liking the ui and look and feel
   and slowness of Watchlist" by giving a visible, fast pulse per-tick
   instead of a silent full-row rebuild every 5s. */
@keyframes wflash-up-kf{0%{background:color-mix(in srgb, var(--buy) 35%, transparent);color:var(--buy)}100%{background:transparent}}
@keyframes wflash-down-kf{0%{background:color-mix(in srgb, var(--sell) 35%, transparent);color:var(--sell)}100%{background:transparent}}
.wflash-up{animation:wflash-up-kf .7s ease-out;border-radius:4px}
.wflash-down{animation:wflash-down-kf .7s ease-out;border-radius:4px}

.wbtns{display:flex;gap:3px;flex-shrink:0}
.wtrade{border:1px solid var(--line-strong);background:var(--surface);border-radius:4px;
  font-size:10px;font-weight:800;line-height:1;padding:4px 5px;cursor:pointer;color:var(--ink-2)}
.wtrade.buy{color:var(--buy);border-color:color-mix(in srgb, var(--buy) 40%, var(--line-strong))}
.wtrade.buy:hover{background:color-mix(in srgb, var(--buy) 14%, transparent)}
.wtrade.sell{color:var(--sell);border-color:color-mix(in srgb, var(--sell) 40%, var(--line-strong))}
.wtrade.sell:hover{background:color-mix(in srgb, var(--sell) 14%, transparent)}
.wtrade.fast:hover{background:var(--accent-soft);color:var(--accent-ink)}
.wtrade.favfo{color:var(--ink-3,var(--muted,#8a93a6))}
.wtrade.favfo:hover{color:#f5b400;border-color:#f5b400}
.wtrade.favfo.on{color:#f5b400;border-color:#f5b400}
.wtrade.bi{background:var(--buy);border-color:var(--buy);color:#04140d;font-weight:700}
.wtrade.bi:hover{filter:brightness(1.08)}
.wtrade.bi:disabled{opacity:.6}
.op-sub{font-size:11px;color:var(--muted,#8a93a6);margin-top:2px}
.wkill{border:none;background:none;cursor:pointer;color:var(--ink-3);font-size:15px;
  line-height:1;opacity:0;transition:opacity .12s;flex-shrink:0;padding:0 2px}
.wkill:hover{color:var(--sell)}
.rail-void{padding:18px 12px;font-size:12px;color:var(--ink-3);text-align:center}

/* ============================================================
   TRADE MODAL (watchlist Buy/Sell)
   ============================================================ */
.tm-overlay{display:none;position:fixed;inset:0;background:rgba(11,18,32,.5);
  z-index:200;align-items:center;justify-content:center}
.tm-overlay.open{display:flex}
.tm-box{width:320px;max-width:92vw;background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);padding:18px}
.tm-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.tm-head #tmSym{font-size:15px;font-weight:800;color:var(--ink-1);flex:1}
.tm-side{font-size:11px;font-weight:800;letter-spacing:.05em;padding:3px 9px;border-radius:20px}
.tm-side.buy{background:color-mix(in srgb, var(--buy) 16%, transparent);color:var(--buy)}
.tm-side.sell{background:color-mix(in srgb, var(--sell) 16%, transparent);color:var(--sell)}
.tm-x{border:none;background:none;font-size:20px;line-height:1;cursor:pointer;color:var(--ink-3)}
.tm-ltp{font-size:12px;color:var(--ink-2);margin-bottom:12px}
.tm-ltp b{font-family:var(--font-num);color:var(--ink-1)}
.tm-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.tm-row label{font-size:12px;color:var(--ink-2);font-weight:600}
.tm-row select,.tm-row input{padding:6px 9px;border-radius:var(--r-sm);border:1px solid var(--line-strong);
  background:var(--sunken);color:var(--ink-1);font-size:12.5px;width:140px}
.tm-err{font-size:12px;color:var(--sell);margin-bottom:10px}
.tm-submit{width:100%;padding:10px;border:none;border-radius:var(--r-sm);
  background:var(--accent);color:var(--accent-contrast);font-weight:700;font-size:13px;cursor:pointer}
.tm-submit:hover{opacity:.92}

/* ---- Unified Order Ticket popup (2026-08-06, replaces the old
   Market/Limit-only #tradeModal with one shared component used by the
   watchlist rail AND FastOrders: Limit / Market / Ladder / TP-SL) ---- */
.ot-overlay{display:none;position:fixed;inset:0;background:rgba(11,18,32,.55);
  align-items:center;justify-content:center;z-index:900;padding:14px}
.ot-overlay.open{display:flex}
/* 2026-09-02 ("give me an option that when i take my cursor in the
   upper part ... i must get a move cursor and i could move it
   anywhere ... resize its length and width ... when i take my cursor
   to its corners"): the ticket is now a flex column with three fixed
   regions -- a drag handle (symbol + close), a static BUY/SELL row,
   and a scrolling middle -- plus a static footer (error text + submit
   button) added separately below, instead of one big block that
   scrolled as a whole. Starts centered via the overlay's own flex
   centering exactly as before; JS (otWireDrag/otWireResize in the
   template) switches it to position:fixed with explicit
   left/top/width/height only once the user actually drags or resizes
   it, and resets back to this default every time a fresh ticket is
   opened. */
.ot-box{width:620px;max-width:96vw;height:560px;max-height:92vh;min-width:320px;min-height:380px;
  background:var(--surface);border-radius:var(--r-lg);box-shadow:0 20px 60px rgba(0,0,0,.35);
  display:flex;flex-direction:column;overflow:hidden;position:relative}
/* --- region 1: drag bar (symbol centred, LTP inline, close) --- */
.ot-drag-handle{flex:0 0 auto;padding:12px 40px 10px;cursor:move;user-select:none;position:relative;
  border-bottom:1px solid var(--line)}
.ot-head-top{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.ot-sym{font-size:15px;font-weight:800;color:var(--ink-1);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ot-head-ltp{font-size:12px;color:var(--ink-2);font-family:var(--font-num)}
.ot-head-ltp b{color:var(--ink-1)}
.ot-head-ltp b.up{color:var(--buy)}
.ot-head-ltp b.down{color:var(--sell)}
.ot-ltp-chg{font-family:var(--font-num);font-size:11.5px;font-weight:700;margin-left:5px;color:var(--ink-3)}
.ot-ltp-chg.up{color:var(--buy)}
.ot-ltp-chg.down{color:var(--sell)}
.ot-x{border:none;background:none;font-size:22px;line-height:1;cursor:pointer;color:var(--ink-3);position:absolute;right:10px;top:8px}
/* --- region 2: static zone -- side, mode rail, universal controls.
   Nothing in here is allowed to move when the mode changes. --- */
.ot-static{flex:0 0 auto;padding:10px 14px 8px;border-bottom:1px solid var(--line)}
.ot-side-toggle{display:flex;gap:8px;margin-bottom:8px}
.ot-side-btn{flex:1;padding:11px;border-radius:var(--r-sm);border:1.5px solid var(--line-strong);
  background:transparent;font-weight:800;font-size:14px;letter-spacing:.05em;cursor:pointer;color:var(--ink-2)}
.ot-side-btn.buy.active{background:var(--buy);color:#fff;border-color:var(--buy)}
.ot-side-btn.sell.active{background:var(--sell);color:#fff;border-color:var(--sell)}
/* flex, not a fixed 4-col grid: the Ladder mode is hidden for
   instruments that don't support it (cfg.allowLadder), and a fixed grid
   left a dead empty cell in that case. flex:1 lets the remaining modes
   share the full width instead. */
.ot-modes{display:flex;gap:6px;margin-bottom:9px}
.ot-mode{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 2px;border-radius:var(--r-sm);
  border:1px solid var(--line-strong);background:transparent;cursor:pointer;color:var(--ink-2);min-width:0}
.ot-mode b{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ot-mode i{font-style:normal;font-size:9px;opacity:.55;font-weight:700}
.ot-mode.active{background:var(--accent, var(--buy));color:var(--accent-contrast);border-color:transparent}
.ot-uni-line{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.ot-uni-label{flex:0 0 58px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.ot-qty{display:flex;align-items:center;gap:4px}
.ot-qty-step{width:30px;height:32px;border-radius:var(--r-sm);border:1px solid var(--line-strong);
  background:transparent;color:var(--ink-1);font-size:17px;line-height:1;cursor:pointer}
.ot-qty input{width:78px;height:32px;text-align:center;padding:4px;border-radius:var(--r-sm);
  border:1px solid var(--line-strong);background:var(--surface-2,transparent);color:var(--ink-1);
  font-family:var(--font-num);font-size:14px;font-weight:700}
.ot-lots{display:flex;gap:4px;margin-left:auto}
.ot-lot{padding:6px 9px;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:transparent;
  color:var(--ink-2);font-size:11px;font-weight:700;cursor:pointer;font-family:var(--font-num)}
.ot-lot:hover{border-color:var(--accent, var(--buy));color:var(--ink-1)}
/* segmented control -- replaces the old loose radio pills. Same
   underlying radio inputs (so submit logic is untouched), but the whole
   segment is the hit target instead of a 15px circle. */
.ot-seg{display:flex;gap:0;border:1px solid var(--line-strong);border-radius:var(--r-sm);overflow:hidden}
.ot-segbtn{position:relative;flex:1 1 auto;display:flex;align-items:center;justify-content:center;
  padding:7px 10px;font-size:12px;font-weight:700;color:var(--ink-2);cursor:pointer;white-space:nowrap;
  border-right:1px solid var(--line-strong)}
.ot-seg .ot-segbtn:last-child{border-right:none}
.ot-segbtn input{position:absolute;opacity:0;pointer-events:none;margin:0}
.ot-segbtn input:checked ~ span{color:var(--accent-contrast)}
.ot-segbtn:has(input:checked){background:var(--accent, var(--buy))}
.ot-price-input{flex:1 1 auto;min-width:0;height:32px;padding:4px 9px;border-radius:var(--r-sm);
  border:1px solid var(--line-strong);background:var(--surface-2,transparent);color:var(--ink-1);
  font-family:var(--font-num);font-size:14px;font-weight:700}
.ot-price-input:disabled{opacity:.45;cursor:not-allowed}
.ot-mini{padding:6px 9px;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:transparent;
  color:var(--ink-2);font-size:11px;font-weight:700;cursor:pointer}
.ot-mini:hover{border-color:var(--accent, var(--buy));color:var(--ink-1)}
.ot-adv-toggle{width:100%;margin:8px 0 6px;padding:7px;border-radius:var(--r-sm);border:1px dashed var(--line-strong);
  background:transparent;color:var(--ink-3);font-size:11.5px;font-weight:700;cursor:pointer}
.ot-adv-toggle:hover{color:var(--ink-1);border-color:var(--ink-3)}
/* --- region 3: the ONLY part that swaps between modes --- */
.ot-modebody{flex:1 1 auto;min-height:0;overflow-y:auto;padding:10px 14px}
/* --- region 4: static footer --- */
.ot-footer{flex:0 0 auto;padding:9px 14px 12px;border-top:1px solid var(--line)}
.ot-meta{font-size:11px;color:var(--ink-3);font-family:var(--font-num);margin-bottom:7px;min-height:14px}
.ot-meta:empty{display:none}
/* Mobile (2026-09-02, "make sure you design everything for mobile
   freindly UI too"): no drag/resize handles at all -- a phone's own
   touch-scroll gesture on the header/edges would otherwise fight the
   JS drag/resize listeners (which are also hard-gated to
   window.innerWidth >= 760 in JS, this just hides the now-inert
   handles so they're not visible dead UI). The ticket stays the
   simple centered, fixed-size layout it always had below this width. */
/* Mobile: same four regions and same order, single column, thumb-sized
   targets. Drag/resize are hidden (they fight touch-scroll, and are
   gated off in JS below 760px anyway). */
@media (max-width:759px){
  .ot-resize-handle{display:none}
  .ot-drag-handle{cursor:default}
  .ot-box{width:100%;height:auto;max-height:92vh}
  .ot-side-btn{padding:14px;font-size:15px}
  .ot-mode{padding:9px 2px;min-height:46px}
  .ot-mode b{font-size:11.5px}
  .ot-uni-line{flex-wrap:wrap;gap:6px}
  .ot-uni-label{flex:0 0 100%;margin-bottom:1px}
  .ot-qty-step{width:44px;height:44px;font-size:20px}
  .ot-qty input{width:76px;height:44px;font-size:16px}
  .ot-lots{margin-left:0;flex:1 1 auto;justify-content:flex-end}
  .ot-lot{padding:11px 10px;min-height:44px}
  .ot-segbtn{padding:12px 8px;font-size:13px}
  .ot-price-input{flex:1 1 100%;height:44px;font-size:16px}
  .ot-mini{padding:11px 12px;min-height:44px}
  .ot-submit{padding:16px;font-size:16px}
  .ot-row select,.ot-row input[type=number]{width:100%;min-height:44px;font-size:16px}
  .ot-row{flex-wrap:wrap;gap:4px}
  .ot-row label{flex:0 0 100%}
  .ot-row-2col{grid-template-columns:1fr}
}
/* 2026-09-01, user-requested Kite-style order window: 7 tabs
   (Regular/MTF/Iceberg/Cover/Ladder/TP-SL/On Underlying) no longer fit
   a 2-col grid -- horizontal scroll row instead, same idea as Kite's
   own tab strip. */
/* 2026-09-02: two-column mode body on a roomy screen -- Ladder has the
   most fields of any mode and this is what keeps it inside one
   screenful instead of forcing a scroll on the fast path. */
@media (min-width:620px){
  #otPanelLadder,#otPanelUtrig{column-count:2;column-gap:16px}
  #otPanelLadder>*,#otPanelUtrig>*{break-inside:avoid}
  #otPanelLadder .ot-ladder-preview,#otPanelLadder .ot-ladder-progress{column-span:all}
}
.ot-sub-toggle{display:flex;gap:6px;margin-bottom:10px}
.ot-sub-btn{flex:1;padding:6px;border-radius:var(--r-sm);border:1px solid var(--line-strong);
  background:transparent;font-size:12px;font-weight:700;cursor:pointer;color:var(--ink-2)}
.ot-sub-btn.active{background:var(--ink-1);color:var(--surface);border-color:var(--ink-1)}
.ot-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.ot-row label{font-size:12px;color:var(--ink-2);font-weight:600;flex:1}
.ot-row select,.ot-row input[type=number]{padding:6px 9px;border-radius:var(--r-sm);border:1px solid var(--line-strong);
  background:var(--surface-2,transparent);color:var(--ink-1);width:190px;font-family:var(--font-num)}
.ot-row-2col{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}
.ot-row-2col .ot-row{margin-bottom:0}
.ot-row input[type=checkbox]{width:18px;height:18px}
/* Kite-style radio-pill rows (Product / Order type / Validity) inside
   the Regular/MTF panels -- a row of small labeled circles, same
   visual language as "Intraday / Longterm", "Market / Limit",
   "Day / IOC" in the reference screenshot. */
.ot-radio-row{display:flex;gap:16px;margin-bottom:8px;flex-wrap:wrap}
.ot-radio{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer}
.ot-radio input[type=radio]{width:15px;height:15px;accent-color:var(--accent, var(--buy));cursor:pointer;margin:0}
.ot-radio span{white-space:nowrap}
.ot-radio i{font-style:normal;color:var(--ink-3);font-weight:500}
.ot-radio input[type=radio]:checked ~ span{color:var(--ink-1)}
.ot-hint{font-size:11px;color:var(--ink-3);margin:-4px 0 10px}
.ot-err{font-size:12px;color:var(--sell);margin-bottom:10px}
.ot-submit{width:100%;padding:14px;border:none;border-radius:var(--r-sm);
  background:var(--buy);color:#fff;font-weight:800;font-size:15px;cursor:pointer;letter-spacing:.02em}
.ot-submit.sell{background:var(--sell)}
.ot-submit:hover{opacity:.92}
/* 2026-09-01 ("the list of orders ... sometimes become too long
   when order qty is huge ... give a seperate scrolling in the order
   window so that order windo could be static"): the leg list scrolls
   inside its own fixed-height box instead of stretching the whole
   ticket taller -- the ticket's own outer scroll (see .ot-box) is
   still there as a fallback, but for any realistic leg count this
   inner scroll is what actually keeps the modal a stable height. */
.ot-ladder-preview{margin-top:10px;border:1px solid rgba(0,0,0,.08);border-radius:10px;max-height:220px;overflow-y:auto}
.ot-ladder-preview:empty{display:none}
.ot-ladder-progress{margin-top:10px;border:1px solid rgba(0,0,0,.08);border-radius:10px;max-height:260px;overflow-y:auto}
.ot-ladder-progress:empty{display:none}
.ot-ladder-preview-title{font-size:12px;font-weight:600;padding:8px 10px;background:rgba(0,0,0,.03);color:var(--muted,#666)}
.ot-ladder-row{display:flex;justify-content:space-between;padding:7px 10px;font-size:13px;border-top:1px solid rgba(0,0,0,.06)}
.ot-ladder-row span:first-child{color:var(--muted,#666)}
.ot-ladder-row span:last-child{font-weight:600}
.ot-ladder-filled{font-weight:400;color:var(--muted,#666);margin-left:4px}
.ot-ladder-avg{font-size:12px;font-weight:600;padding:6px 10px;background:rgba(0,0,0,.03);color:var(--ink-1,#111);border-top:1px solid rgba(0,0,0,.06)}



/* ============================================================
   INSTRUMENT SEARCH (op-search-*) -- shared by FastOrders, Scale
   Strategy, Order Placement, Option Calculator (2026-08-03 BUGFIX:
   these classes were used across every one of those pages but never
   actually styled in terminal.css -- style.css had them, terminal.css
   never carried them over, so results rendered as raw unstyled text,
   "pathetic", no lining, no hierarchy -- one shared block fixes every
   page at once since they all use the identical class names.)
   ============================================================ */
.op-search-wrap{position:relative}
.op-search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none}
.op-search-input{padding-left:38px !important}
.op-search-results{margin-top:8px;max-height:320px;overflow-y:auto;background:var(--surface);
  border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--sh-2)}
.op-search-row{padding:10px 14px;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:10px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.op-search-row:last-child{border-bottom:none}
.op-search-row:hover,.op-search-row.hl{background:var(--accent-soft)}
.op-search-sym{font-weight:700;font-size:13.5px;color:var(--ink-1)}
.op-search-name{font-size:11.5px;color:var(--ink-3);margin-top:1px}
.op-search-meta{font-size:11px;color:var(--ink-3);font-weight:600;text-align:right;white-space:nowrap}
.op-selected-instrument{margin-top:8px;padding:10px 14px;border-radius:var(--r);background:var(--sunken);
  border:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.op-selected-instrument .op-clear-btn{cursor:pointer;color:var(--ink-3);font-size:18px;line-height:1;padding:0 4px;flex-shrink:0}
.op-selected-instrument .op-clear-btn:hover{color:var(--sell)}
.op-status-pill{padding:3px 9px;border-radius:var(--r-pill);font-size:11px;font-weight:700;display:inline-block;white-space:nowrap}
.op-status-open{background:var(--buy-soft);color:var(--buy)}
.op-status-closed{background:var(--sunken);color:var(--ink-3)}

.stage{flex:1;min-width:0;display:flex;flex-direction:column;overflow-y:auto;min-height:0}
.stage-in{flex:1;padding:30px 34px calc(34px + var(--safe-b));max-width:1520px;width:100%}

/* ---------- mobile top bar + drawer ---------- */
.mbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(10px + var(--safe-t)) 14px 10px;background:var(--surface);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:55}
.mbar-title{font-size:15px;font-weight:800;letter-spacing:-.02em;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.burger{width:36px;height:36px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--surface);display:grid;place-items:center;cursor:pointer;flex-shrink:0}
.drawer{position:fixed;top:0;left:0;bottom:0;width:78%;max-width:300px;z-index:90;
  background:var(--surface);border-right:1px solid var(--line);
  padding:calc(18px + var(--safe-t)) 14px calc(18px + var(--safe-b, 0px));display:flex;flex-direction:column;gap:4px;
  transform:translateX(-100%);transition:transform .24s cubic-bezier(.32,.72,0,1);
  box-shadow:var(--sh-3);
  /* BUGFIX (2026-08-09, "scrolling option in menu button still not
     available"): this is a fixed-height (top:0;bottom:0) panel holding
     a growing nav list -- up to 15 links for an admin (Dashboard,
     Orders, FastOrders, Positions, Option Calculator, Sentiment, Scale
     Strategy, Strategies, Data, Super Indicator, CopyTrade, Old Fast
     Orders, Trade Logs, Settings, Admin panel, Log out). With no
     overflow rule at all, any of that list past the visible height
     (any shorter phone screen, landscape orientation, or a browser
     chrome bar eating into viewport height) was simply cut off with NO
     way to reach it -- not hidden-but-scrollable, genuinely
     unreachable. overflow-y:auto turns that overflow into a real,
     touchable scroll region; -webkit-overflow-scrolling:touch keeps it
     smooth (momentum scroll) on iOS Safari specifically, which doesn't
     do that by default on overflow containers.*/
  overflow-y:auto;-webkit-overflow-scrolling:touch}
.drawer.open{transform:none}
.drawer-brand{display:flex;align-items:center;gap:10px;padding:4px 8px 16px}
.drawer-nav{display:flex;flex-direction:column;gap:2px}
.drawer-nav a{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:var(--r-sm);
  color:var(--ink-2);font-size:14px;font-weight:600}
.drawer-nav a:hover{background:var(--sunken);color:var(--ink-1)}
.drawer-nav a.on{background:var(--accent-soft);color:var(--accent-ink)}
.scrim{position:fixed;inset:0;background:rgba(6,10,18,.5);z-index:85;
  opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.open{opacity:1;pointer-events:auto}

.tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--surface);border-top:1px solid var(--line);
  padding-bottom:var(--safe-b)}
.tabbar a,.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:9px 4px;border:none;background:none;cursor:pointer;
  font-size:10px;font-weight:700;color:var(--ink-3);letter-spacing:.02em}
.tabbar a.on,.tabbar button.on{color:var(--accent-ink)}


/* ============================================================
   NATIVE COMPONENTS
   ============================================================ */
.phead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:20px}
.ptitle{font-size:21px;font-weight:800;letter-spacing:-.03em}
.psub{font-size:12.5px;color:var(--ink-2);margin-top:3px;max-width:70ch}

.surface{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);padding:22px 24px;margin-bottom:20px}
.surface.tight{padding:16px 18px}
.shead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.stitle{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}

.metric{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:15px 17px;box-shadow:var(--sh-1)}
.metric-k{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.metric-v{font-family:var(--font-num);font-size:22px;font-weight:600;letter-spacing:-.02em;margin-top:5px}
.metric-s{font-size:11.5px;color:var(--ink-2);margin-top:3px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 16px;border-radius:var(--r-sm);border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink-1);font-size:12.5px;font-weight:700;cursor:pointer;
  transition:background .13s,border-color .13s}
.btn:hover{background:var(--sunken)}
.btn:disabled{opacity:.55;cursor:default}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}
.btn.pri:hover{background:var(--accent-ink)}
.btn.buy{background:var(--buy);border-color:var(--buy);color:#fff}
.btn.sell{background:var(--sell);border-color:var(--sell);color:#fff}
.btn.sm{padding:6px 12px;font-size:11.5px}
.btn.wide{width:100%}

/* 2026-09-01, user-reported ("look at the buttons nothing is clearly
   visible what is written ... not only with 1 page"): class="ghost" is
   used all over (order_placement.html, fast_orders.html/_m.html,
   quick_order.html, base.html's ladder ticket, orders_selfservice.js)
   but had NO css definition anywhere on the whole site -- every one of
   those buttons was silently falling back to the browser's native
   unstyled button (light-grey box, dark text), which reads as
   near-invisible/broken against this platform's dark theme. Styled to
   match .btn's family: a plain, low-emphasis "ghost" (outline, no
   fill) variant for secondary actions like Refresh / Show advanced
   options / Cancel remaining legs. */
.ghost{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 16px;border-radius:var(--r-sm);border:1px solid var(--line-strong);
  background:transparent;color:var(--ink-2);font-size:12.5px;font-weight:700;cursor:pointer;
  transition:background .13s,border-color .13s,color .13s}
.ghost:hover{background:var(--sunken);color:var(--ink-1)}
.ghost:disabled{opacity:.55;cursor:default}
/* same bug, same fix (2026-09-01): class="secondary" used standalone
   (not combined with .btn) as its own button style in quickorder.js,
   refer_and_earn.js, admin_funded_referrals.js/.html -- also had no
   css definition anywhere, also fell back to the native unstyled
   button look on those pages. */
.secondary{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:40px;padding:0 16px;border-radius:var(--r-sm);border:1px solid var(--line-strong);
  background:transparent;color:var(--ink-2);font-size:12.5px;font-weight:700;cursor:pointer;
  transition:background .13s,border-color .13s,color .13s}
.secondary:hover{background:var(--sunken);color:var(--ink-1)}
.secondary:disabled{opacity:.55;cursor:default}

.chip{display:inline-flex;align-items:center;padding:6px 13px;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);
  font-size:12px;font-weight:700;cursor:pointer}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}

.tag{display:inline-flex;align-items:center;padding:3px 9px;border-radius:var(--r-pill);
  font-size:10.5px;font-weight:800;letter-spacing:.04em}
.tag.ok{background:var(--buy-soft);color:var(--buy)}
.tag.bad{background:var(--sell-soft);color:var(--sell)}
.tag.warn{background:var(--warn-soft);color:var(--warn)}
.tag.off{background:var(--sunken);color:var(--ink-3)}

.fld{display:flex;flex-direction:column;gap:5px}
.fld label,.lbl{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.fld input,.fld select,.fld textarea,.inp{
  padding:9px 11px;border-radius:var(--r-sm);border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink-1);font-size:13px;width:100%}
.fld input:focus,.inp:focus{border-color:var(--accent);outline:none}
.hint{font-size:11.5px;color:var(--ink-3)}

.segbar{display:flex;border-bottom:1px solid var(--line);gap:0;margin-bottom:16px}
.seg{padding:10px 16px;border:none;background:none;cursor:pointer;
  font-size:13px;font-weight:700;color:var(--ink-3);border-bottom:2px solid transparent}
.seg:hover{color:var(--ink-1)}
.seg.on{color:var(--accent-ink);border-bottom-color:var(--accent)}

.tblwrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--line)}
table.tbl{width:100%;border-collapse:collapse;font-size:12.5px;background:var(--surface)}
table.tbl th{text-align:left;padding:9px 12px;background:var(--surface-2);
  font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  border-bottom:1px solid var(--line);white-space:nowrap}
table.tbl td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
table.tbl tr:last-child td{border-bottom:none}
table.tbl tbody tr:hover{background:var(--surface-2)}

.void{padding:34px 20px;text-align:center;color:var(--ink-3);font-size:12.5px}

.toast{position:fixed;right:22px;bottom:88px;z-index:99;max-width:340px;
  padding:12px 15px;border-radius:var(--r);font-size:12.5px;font-weight:600;
  box-shadow:var(--sh-3);display:none}
.toast.on{display:block}
.toast.ok{background:var(--buy);color:#fff}
.toast.err{background:var(--sell);color:#fff}

.foot{margin-top:28px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:11px;color:var(--ink-3)}

/* ---------- guest (login/signup) ---------- */
.guest{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.guest-card{width:100%;max-width:404px}
.guest-brand{display:flex;align-items:center;gap:11px;justify-content:center;margin-bottom:22px}

/* ============================================================
   BREAKPOINTS
   ============================================================ */
@media (min-width:1000px){
  .tbar{display:flex}
  .rail{display:flex}
  .rail-grip{display:block}
  .mbar{display:none}
  .drawer,.scrim{display:none !important}
  .tabbar{display:none}
}
@media (max-width:999px){
  /* BUGFIX (2026-08-05, "watchlist is ending at proper space but why
     the rest of page is scrolling pathetically down"): this used a
     flat max-width:720px for EVERY viewport under 1000px, including
     the 760-999px "narrow desktop window / high display-scaling"
     range where the rail is already hidden and there's no reason not
     to use the width that's actually there -- it was capping content
     to a phone-sized column and centering it with large dead gutters
     on both sides even when 900+px of real width was available,
     forcing far more vertical scrolling than the content needed. The
     720px phone cap now only applies below 760px (matches every
     page's own internal mobile breakpoint, e.g. fast_orders_m.html);
     the 760-999px tier uses the real available width instead. */
  .stage-in{padding:16px 15px calc(78px + var(--safe-b));width:100%}
  .toast{right:12px;left:12px;max-width:none;bottom:calc(140px + var(--safe-b))}

  /* watchlist as a slide-in panel (2026-08-03 BUGFIX: was display:none
     on every screen under 1000px with no other way to reach it at all) */
  .rail{display:flex !important;position:fixed;top:0;left:0;bottom:0;
    width:88vw;max-width:360px;z-index:150;background:var(--surface);
    transform:translateX(-105%);transition:transform .22s ease;
    box-shadow:var(--sh-3);padding-top:calc(52px + var(--safe-t))}
  .rail.open{transform:translateX(0)}
  .rail-grip{display:none !important}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ============================================================
   COMPAT — legacy class names from not-yet-rebuilt pages.
   Each page's rebuild deletes its slice of this block.
   ============================================================ */
.page-header{margin-bottom:20px}
.page-header-title{font-size:21px;font-weight:800;letter-spacing:-.03em}
.page-header-sub{font-size:12.5px;color:var(--ink-2);margin-top:3px;max-width:70ch}
.panel,.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);padding:18px 20px;margin-bottom:16px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:22px 0 12px}
.section-title{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.flabel{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.fhint{font-size:11.5px;color:var(--ink-3)}
.field input,.field select,.field textarea{padding:9px 11px;border-radius:var(--r-sm);
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-1);font-size:13px;width:100%}
input,select,textarea{background:var(--surface);color:var(--ink-1)}
.date-apply-btn,button.primary,.primary,.start{padding:9px 16px;border-radius:var(--r-sm);border:1px solid var(--accent);
  background:var(--accent);color:var(--accent-contrast);font-size:12.5px;font-weight:700;cursor:pointer}
.date-apply-btn:hover,button.primary:hover{background:var(--accent-ink)}
.filter-chip,.date-filter-chip{display:inline-flex;align-items:center;padding:6px 13px;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);
  font-size:12px;font-weight:700;cursor:pointer}
.filter-chip.active,.date-filter-chip.active{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}
.date-filter-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.date-filter-presets,.date-filter-custom{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.date-input{padding:8px 10px;border-radius:var(--r-sm);border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink-1);font-size:12.5px}
.date-sep{color:var(--ink-3)}
.table-scroll{overflow-x:auto;border-radius:var(--r);border:1px solid var(--line)}
.detail-trades-table{width:100%;border-collapse:collapse;font-size:12.5px;background:var(--surface)}
.detail-trades-table th{text-align:left;padding:9px 12px;background:var(--surface-2);
  font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  border-bottom:1px solid var(--line);white-space:nowrap}
.detail-trades-table td{padding:11px 12px;border-bottom:1px solid var(--line)}
.empty-note{padding:34px 20px;text-align:center;color:var(--ink-3);font-size:12.5px}
.stat-tile,.pnl-card{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:15px 17px;box-shadow:var(--sh-1)}
.kn-tab-btn{padding:5px 11px;border-radius:var(--r-pill);border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink-2);font-size:11.5px;font-weight:700;cursor:pointer}
.kn-tab-btn.active{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}
.detail-overlay{position:fixed;inset:0;background:rgba(6,10,18,.5);display:none;z-index:88}
.detail-overlay.open{display:block}
.detail-panel{position:fixed;top:0;right:-460px;width:420px;max-width:92vw;height:100%;z-index:89;
  background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--sh-3);
  transition:right .22s;overflow-y:auto;padding:20px}
.detail-panel.open{right:0}
.detail-panel-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}
.detail-panel-email{font-size:14px;font-weight:800}
.detail-panel-meta{font-size:11.5px;color:var(--ink-3)}
.detail-close-btn{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);
  width:32px;height:32px;display:grid;place-items:center;cursor:pointer}
.detail-close-btn svg{stroke:var(--ink-2);fill:none;stroke-width:2}
.site-footer{margin-top:28px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--ink-3)}
.site-footer-links{display:flex;gap:16px;flex-wrap:wrap}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--buy);display:inline-block;flex-shrink:0}

/* ============================================================
   PAGE: HOME (dashboard)
   Two vocabularies live here: the markup in dashboard.html (mine),
   and the classes dashboard.js injects into #sN-content at runtime.
   Both are styled natively below -- the JS contract (ids + class
   names it writes) is preserved deliberately so proven strategy
   control logic did not have to be rewritten to restyle the page.
   ============================================================ */

/* ---- metric strip ---- */
.pnl-summary{display:grid;gap:12px;margin-bottom:18px;
  grid-template-columns:repeat(auto-fit,minmax(158px,1fr))}
.pnl-summary .stat-tile{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:14px 16px;box-shadow:var(--sh-1);margin:0}
.pnl-summary .label,.stat-tile .label{font-size:9.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.pnl-summary .value,.stat-tile .value{font-family:var(--font-num);font-size:21px;font-weight:600;
  letter-spacing:-.02em;margin-top:5px;color:var(--ink-1)}
.pnl-summary .hero-tile{background:linear-gradient(140deg,var(--mark-from),var(--mark-to));border-color:transparent}
.pnl-summary .hero-tile .label{color:rgba(255,255,255,.72)}
.pnl-summary .hero-tile .value{color:#fff}

/* ---- strategy picker ---- */
.spick-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(192px,1fr))}
.spick{display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--surface-2);
  transition:border-color .14s,background .14s,transform .14s}
.spick:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.spick.is-on{border-color:var(--buy);background:var(--buy-soft)}
.spick-ic{width:34px;height:34px;border-radius:9px;flex-shrink:0;display:grid;place-items:center}
.spick-ic svg{width:18px;height:18px;display:block}
.i-blue{background:#E3EDFB;color:#1D5FBF}
.i-gold{background:#FBF0DC;color:#A97A15}
.i-silver{background:#ECEFF3;color:#5C6B7E}
.i-flame{background:#FBE7DF;color:#C2542A}
.i-bolt{background:#F0E6FB;color:#7040B8}
html[data-theme="dark"] .i-blue, html[data-theme="premium"] .i-blue{background:#132741;color:#79ACEE}
html[data-theme="dark"] .i-gold, html[data-theme="premium"] .i-gold{background:#332713;color:#E0B45C}
html[data-theme="dark"] .i-silver, html[data-theme="premium"] .i-silver{background:#1E242D;color:#9AA9BC}
html[data-theme="dark"] .i-flame, html[data-theme="premium"] .i-flame{background:#331C13;color:#EE9166}
html[data-theme="dark"] .i-bolt, html[data-theme="premium"] .i-bolt{background:#241636;color:#B58BEA}
.spick-txt{display:flex;flex-direction:column;min-width:0;gap:2px}
.spick .nm{font-size:13px;font-weight:800;letter-spacing:-.01em;color:var(--ink-1)}
.spick .st{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--ink-3)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--ink-3);flex-shrink:0;display:inline-block}
.spick.is-on .st{color:var(--buy)}
.spick.is-on .dot{background:var(--buy);box-shadow:0 0 0 3px var(--buy-soft)}

/* ---- strategy cards ---- */
.strategy-dash-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));align-items:start}
.surface.strat{padding:0;overflow:hidden}
.strat-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 18px;border:none;background:none;cursor:pointer;text-align:left;
  border-bottom:1px solid var(--line)}
.strat-head:hover{background:var(--surface-2)}
.strat-name{font-size:13.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink-1)}
.strat-name span{display:block;font-size:11px;font-weight:600;color:var(--ink-3);
  letter-spacing:.04em;text-transform:uppercase;margin-top:2px}
.chevron-btn{color:var(--ink-3);font-size:13px;flex-shrink:0;line-height:1}
.card-body{padding:16px 18px}

/* ---- runtime-injected strategy internals ---- */
.card-body .big,.card-head{font-size:13px;font-weight:800;letter-spacing:-.01em;margin-bottom:10px}
.card-body .muted,.card-body .fhint{color:var(--ink-3);font-size:11.5px}
.card-body .row,.settings-row{display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap;margin-bottom:9px}
.card-body .name,.card-body .title,.kn-label,.kn-row-label{font-size:11.5px;font-weight:700;color:var(--ink-2)}
.card-body .sub{font-size:11px;color:var(--ink-3)}
.card-body .symbol{font-family:var(--font-num);font-size:12.5px;font-weight:600}

.stat-grid{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));margin:12px 0}
.card-body .stat-tile{background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r);padding:10px 12px;margin:0}
.card-body .stat-tile .value{font-size:16px;margin-top:3px}

.kn-rowgroup{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:12px 0}
.kn-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 13px;border-bottom:1px solid var(--line);font-size:12.5px}
.kn-row:last-child{border-bottom:none}
.kn-pillrow{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.kn-tab{padding:6px 13px;border-radius:var(--r-pill);border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink-2);font-size:11.5px;font-weight:700;cursor:pointer}
.kn-tab.active,.kn-tab.on{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}
.kn-cta{width:100%;padding:11px 16px;border-radius:var(--r-sm);border:none;cursor:pointer;
  background:var(--accent);color:var(--accent-contrast);font-size:13px;font-weight:800;letter-spacing:.01em}
.kn-cta:hover{background:var(--accent-ink)}
.kn-cta:disabled{opacity:.55;cursor:default}
.kn-logbtn{display:inline-block;padding:8px 15px;border-radius:var(--r-sm);
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-1);
  font-size:12px;font-weight:700;cursor:pointer}
.kn-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:11px;margin-top:11px;border-top:1px solid var(--line)}
.kn-footer-label{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.kn-footer-value{font-family:var(--font-num);font-size:14px;font-weight:600}

.progress-track{height:6px;border-radius:var(--r-pill);background:var(--sunken);overflow:hidden;margin:8px 0}
.progress-fill{height:100%;border-radius:var(--r-pill);background:var(--accent);transition:width .3s}

.tf-strip,.gap-strip,.streak-strip{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0}
.tf-name,.gap-name{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.tf-val,.gap-val{font-family:var(--font-num);font-size:12.5px;font-weight:600;color:var(--ink-1)}
.tf-strip>*,.gap-chip{background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:7px 10px;min-width:74px}

.card-body .btn.primary,.card-body button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}
.kill,.stop{padding:8px 14px;border-radius:var(--r-sm);border:1px solid var(--sell);
  background:transparent;color:var(--sell);font-size:12px;font-weight:700;cursor:pointer}
.kill:hover,.stop:hover{background:var(--sell);color:#fff}
.danger-zone{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line-strong);
  display:flex;gap:8px;flex-wrap:wrap}

/* dashboard.js injects .icon blocks inside #sN-content. Without an
   explicit box an inline <svg> with only a viewBox stretches to fill
   its container -- which is exactly what blew these up to ~500px tall
   once the old stylesheet (which sized them) was removed. */
.icon{width:32px;height:32px;border-radius:9px;flex-shrink:0;display:grid;place-items:center}
.icon svg{width:17px;height:17px;display:block;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-blue{background:#E3EDFB;color:#1D5FBF}
.icon-amber{background:#FBF0DC;color:#A97A15}
.icon-silver{background:#ECEFF3;color:#5C6B7E}
.icon-natgas{background:#FBE7DF;color:#C2542A}
.icon-s5{background:#F0E6FB;color:#7040B8}
html[data-theme="dark"] .icon-blue, html[data-theme="premium"] .icon-blue{background:#132741;color:#79ACEE}
html[data-theme="dark"] .icon-amber, html[data-theme="premium"] .icon-amber{background:#332713;color:#E0B45C}
html[data-theme="dark"] .icon-silver, html[data-theme="premium"] .icon-silver{background:#1E242D;color:#9AA9BC}
html[data-theme="dark"] .icon-natgas, html[data-theme="premium"] .icon-natgas{background:#331C13;color:#EE9166}
html[data-theme="dark"] .icon-s5, html[data-theme="premium"] .icon-s5{background:#241636;color:#B58BEA}

/* ---------- header paper-trading pill (2026-08-03): moved out of the
   profile dropdown per explicit request -- lives in the header itself,
   left of Funds, so the mode is visible at a glance without opening
   any menu. ---------- */
.paper-pill{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);
  font-size:11.5px;font-weight:800;letter-spacing:.03em;cursor:pointer;flex-shrink:0;
  transition:background .13s,border-color .13s,color .13s}
.paper-pill:hover{background:var(--sunken)}
.paper-pill:disabled{opacity:.6;cursor:default}
.pp-dot{width:6px;height:6px;border-radius:50%;background:var(--ink-3);flex-shrink:0}
.paper-pill[aria-pressed="true"]{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
.paper-pill[aria-pressed="true"] .pp-dot{background:var(--warn)}

/* ============================================================
   PAGE: LOGIN / SIGNUP (2026-08-03) — real design, replacing the
   untouched default template (plain emoji + bare form).
   ============================================================ */
.guest-card:has(.auth-shell){max-width:920px}
.auth-shell{display:grid;grid-template-columns:1fr 1fr;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:hidden;min-height:480px}

.auth-side{background:linear-gradient(155deg,var(--mark-from),var(--mark-to));
  color:#fff;padding:38px 34px;display:flex;flex-direction:column;justify-content:center;position:relative}
.auth-side::after{content:'';position:absolute;inset:0;background:
  radial-gradient(circle at 85% 15%,rgba(255,255,255,.12),transparent 45%),
  radial-gradient(circle at 10% 90%,rgba(255,255,255,.08),transparent 40%);pointer-events:none}
.auth-side-eyebrow{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.65);margin-bottom:14px}
.auth-side-head{font-size:27px;font-weight:800;letter-spacing:-.02em;line-height:1.25;margin-bottom:14px}
.auth-side-sub{font-size:13px;line-height:1.6;color:rgba(255,255,255,.8);max-width:30ch}
.auth-side-badges{display:flex;flex-direction:column;gap:12px;margin-top:30px}
.auth-badge{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.88)}
.auth-badge svg{flex-shrink:0;color:rgba(255,255,255,.7)}

.auth-solo{display:flex;flex-direction:column;justify-content:center;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2);
  padding:40px 38px;max-width:404px;margin:0 auto}
.guest-card:has(.auth-solo){max-width:460px}

.auth-card{padding:40px 38px;display:flex;flex-direction:column;justify-content:center}
.auth-title{font-size:22px;font-weight:800;letter-spacing:-.02em}
.auth-sub{font-size:12.5px;color:var(--ink-2);margin-top:5px;margin-bottom:22px}
.auth-err{background:var(--sell-soft);color:var(--sell);border-radius:var(--r-sm);
  padding:9px 12px;font-size:12.5px;font-weight:600;margin-bottom:16px}
.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-pw-wrap{position:relative}
.auth-pw-wrap input{padding-right:40px}
.auth-pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  border:none;background:none;color:var(--ink-3);cursor:pointer;padding:4px;display:flex}
.auth-pw-toggle:hover{color:var(--ink-1)}
.auth-forgot{align-self:flex-end;font-size:12px;font-weight:600;color:var(--accent-ink);margin-top:-6px}
.auth-forgot:hover{text-decoration:underline}
.auth-submit{margin-top:6px;padding:11px;font-size:13.5px}
.auth-foot{text-align:center;margin-top:22px;font-size:12.5px;color:var(--ink-2)}
.auth-foot a{color:var(--accent-ink);font-weight:700}
.auth-foot a:hover{text-decoration:underline}

@media (max-width:759px){
  .stage-in{max-width:720px;margin:0 auto}
}
@media (max-width:760px){
  .auth-shell{grid-template-columns:1fr;min-height:0}
  .auth-side{padding:28px 26px}
  .auth-side-head{font-size:22px}
  .guest-card:has(.auth-shell){max-width:420px}
}

.auth-icon-ring{width:44px;height:44px;border-radius:50%;background:var(--accent-soft);
  color:var(--accent-ink);display:grid;place-items:center;margin:0 auto 18px}

/* ---------- collapsible trade legs (2026-08-03, "scale strategy wale
   page mai dropdown button de trades dekhne ke lie" -- also fixes a
   real bug found live: 52 strategies with 3421 total legs were all
   rendered fully expanded on page load, making the page ~121,000px
   tall. A native <details> closed by default contributes ~0 to layout
   height until opened, and doubles as the requested dropdown. ---------- */
.ss-trades-toggle{margin-top:6px}
.ss-trades-toggle summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--accent-ink);
  list-style:none;padding:7px 0;user-select:none}
.ss-trades-toggle summary::-webkit-details-marker{display:none}
.ss-trades-toggle summary::before{content:'▸ ';display:inline-block;transition:transform .15s}
.ss-trades-toggle[open] summary::before{transform:rotate(90deg)}
.ss-trades-toggle table.data-table{margin-top:8px}

/* ---------- /data page "Live now" grid -- futures & options TBT
   (2026-08-09, "please check all and fix all ... make me show the
   data ... and also make this page looking beautiful"). Reuses
   existing tokens (--surface/--line/--buy/--sell/etc) rather than
   introducing a new palette, so this matches the rest of the app in
   both light and dark theme automatically. ---------- */
.tbtl-panel{padding:18px 20px 20px}
.tbtl-updated{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.tbtl-health{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-3)}
.tbtl-health-dot{width:7px;height:7px;border-radius:50%;background:#999;flex:none}
.tbtl-health-dot.live{background:#2ecc71;box-shadow:0 0 0 2px rgba(46,204,113,.18)}
.tbtl-health-dot.down{background:#e74c3c}

.tbtl-tabs{display:flex;gap:8px;flex-wrap:wrap}
.tbtl-grid-wrap{margin-top:14px}
.tbtl-empty{padding:34px 20px;text-align:center;color:var(--ink-3);font-size:12.5px}
.tbtl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:10px;
  max-height:520px;overflow-y:auto;padding-right:2px}
.tbtl-card{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
  padding:11px 13px;cursor:pointer;transition:border-color .12s,transform .12s}
.tbtl-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.tbtl-card-sym{font-size:12px;font-weight:700;color:var(--ink-1);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbtl-card-cat{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin-top:2px}
.tbtl-card-ltp{font-size:17px;font-weight:800;margin-top:8px;font-variant-numeric:tabular-nums;
  color:var(--ink-1)}
.tbtl-card-chg{font-size:11.5px;font-weight:700;margin-top:3px;font-variant-numeric:tabular-nums}
.tbtl-card-chg.up{color:var(--buy)}
.tbtl-card-chg.down{color:var(--sell)}
.tbtl-card-chg.flat{color:var(--ink-3)}
.tbtl-card-ts{font-size:9.5px;color:var(--ink-3);margin-top:6px}
.tbtl-chart-panel{max-width:960px;width:94vw;margin:4vh auto 0;max-height:90vh;overflow:auto}

/* ---------- Get Funded / Refer & Earn (2026-08-09) ---------- */
.gf-eval-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 18px;margin-bottom:12px;box-shadow:var(--sh-1)}
.gf-eval-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.gf-eval-plan{font-size:14px;font-weight:800;color:var(--ink-1)}
.gf-eval-status{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--r-pill)}
.gf-eval-status.active{background:var(--accent-soft);color:var(--accent-ink)}
.gf-eval-status.passed,.gf-eval-status.funded{background:var(--buy-soft);color:var(--buy)}
.gf-eval-status.failed{background:var(--sell-soft);color:var(--sell)}
.gf-eval-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.gf-metric-label{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.gf-metric-value{font-size:16px;font-weight:800;color:var(--ink-1);margin-top:2px}
.gf-bar-track{height:6px;border-radius:3px;background:var(--sunken);margin-top:6px;overflow:hidden}
.gf-bar-fill{height:100%;border-radius:3px;background:var(--accent);transition:width .3s}
.gf-bar-fill.danger{background:var(--sell)}
.gf-bar-fill.ok{background:var(--buy)}
.gf-plan-card{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.gf-plan-name{font-size:14px;font-weight:800;color:var(--ink-1)}
.gf-plan-rules{font-size:11.5px;color:var(--ink-2);margin-top:8px;line-height:1.7}
.gf-plan-price{font-size:20px;font-weight:800;color:var(--ink-1);margin-top:12px}
.gf-plan-start-btn{margin-top:12px;width:100%}

.ref-code-box{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r);padding:12px 14px;font-family:monospace;font-size:14px;font-weight:700;color:var(--accent-ink)}
.ref-summary-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.ref-summary-tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:14px 16px;box-shadow:var(--sh-1)}
.ref-summary-tile .lbl{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ref-summary-tile .val{font-size:19px;font-weight:800;color:var(--ink-1);margin-top:4px}

/* ============================================================
   PREMIUM theme -- typography + toggle-icon touches (2026-08-10)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&display=swap');

html[data-theme="premium"] .wordmark{font-family:'Cormorant Garamond',serif;font-weight:600;letter-spacing:.02em}
html[data-theme="premium"] .page-header-title{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.5em;letter-spacing:.01em}
html[data-theme="premium"] .btn.pri,html[data-theme="premium"] button.primary,html[data-theme="premium"] .primary{
  background:linear-gradient(135deg,var(--mark-to),var(--mark-from));color:#0A0906;border:1px solid var(--brand)}
html[data-theme="premium"] .tbar{border-bottom:1px solid var(--line)}
html[data-theme="premium"] ::selection{background:rgba(216,185,120,.35)}

/* three-way theme toggle icon (light/dark/premium) */
html[data-theme="light"] .ic-gem,
html[data-theme="dark"] .ic-gem{display:none}
html[data-theme="premium"] .ic-sun,
html[data-theme="premium"] .ic-moon{display:none}

/* ============================================================
   COPYTRADE + shared user-tile component (2026-08-11 real rebuild).
   .user-tile-grid / .user-tile / .ut-* were already referenced by
   admin.html and copytrade's JS but were never actually styled --
   that's why the previous "redesign" pass didn't visibly change
   anything: it only renamed classes in markup, this is the first
   pass that backs them with real CSS. Also covers the copytrade-only
   pieces (ct-strategy-grid, ct-broker-grid, ct-params-grid, toolbar,
   status pill) which had the same problem (.kn-tab was being applied
   to a *container* of raw radios instead of to each pill, .field-row
   and .status-pill didn't exist at all).
   ============================================================ */

@keyframes tileIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.user-tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.user-tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:13px 14px;box-shadow:var(--sh-1);animation:tileIn .25s ease both;cursor:pointer;transition:border-color .15s}
.user-tile:hover{border-color:var(--line-strong)}
.user-tile.blocked{border-color:var(--sell-soft);background:var(--sell-soft)}
.user-tile.disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.35)}
.user-tile.ct-user-tile{padding:12px 13px}
.user-tile input.ct-user-cb{position:absolute;opacity:0;width:0;height:0;pointer-events:none}

.ut-top{display:flex;align-items:center;gap:10px}
.ut-avatar{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-ink);font-size:12.5px;font-weight:800;letter-spacing:.01em}
.ut-id{min-width:0;flex:1}
.ut-name{font-size:12.5px;font-weight:700;color:var(--ink-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ut-sub{font-size:11px;color:var(--ink-3);margin-top:2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ut-pill{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--r-pill);
  font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  background:var(--sunken);color:var(--ink-3)}
.ut-pill.admin{background:var(--accent-soft);color:var(--accent-ink)}
.ut-pill.blocked{background:var(--sell-soft);color:var(--sell)}
.ut-pill.live,.ut-pill.on,.ut-pill.eligible{background:var(--buy-soft);color:var(--buy)}
.ut-pill.idle,.ut-pill.off{background:var(--sunken);color:var(--ink-3)}
.ut-strats{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.ut-strat-chip{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;
  font-size:10px;font-weight:800;background:var(--sunken);color:var(--ink-3)}
.ut-strat-chip.on{background:var(--buy-soft);color:var(--buy)}
.ut-pnl-row{display:flex;gap:8px;margin-top:10px}
.ut-pnl-box{flex:1;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 9px}
.ut-pnl-label{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ut-pnl-val{font-size:12.5px;font-weight:700;margin-top:2px}
.ut-foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px;
  padding-top:9px;border-top:1px solid var(--line);font-size:10.5px;color:var(--ink-3)}
.ut-chev{color:var(--ink-3)}
.user-empty{padding:34px 20px;text-align:center;color:var(--ink-3);font-size:12.5px;grid-column:1/-1}

/* status pill used in CopyTrade's "currently running" table */
.status-pill{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--r-pill);
  font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;background:var(--sunken);color:var(--ink-3)}
.status-pill.on{background:var(--buy-soft);color:var(--buy)}
.status-pill.off{background:var(--sell-soft);color:var(--sell)}

/* CopyTrade -- strategy picker, broker picker, param grid, toolbar */
.ct-intro{font-size:12.5px;color:var(--ink-2);line-height:1.6;margin:-4px 0 16px;max-width:72ch}
.ct-strategy-grid,.ct-broker-grid{display:grid;gap:10px;margin-top:2px}
.ct-strategy-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.ct-broker-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));max-width:520px}
.ct-strategy-grid input[type=radio],.ct-broker-grid input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.ct-pick-card{display:block;position:relative;padding:13px 14px;border:1.5px solid var(--line-strong);
  border-radius:var(--r-lg);background:var(--surface);cursor:pointer;transition:border-color .15s,background-color .15s}
.ct-pick-card:hover{border-color:var(--accent)}
.ct-strategy-grid input:checked+.ct-pick-card,.ct-broker-grid input:checked+.ct-pick-card{
  border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent) inset}
.ct-pick-name{font-size:12.5px;font-weight:800;color:var(--ink-1);letter-spacing:-.01em}
.ct-pick-desc{font-size:11px;color:var(--ink-3);margin-top:4px;line-height:1.5}
.ct-broker-card{display:flex;align-items:center;gap:10px}
.ct-broker-mark{width:30px;height:30px;border-radius:8px;flex-shrink:0;display:grid;place-items:center;
  background:var(--sunken);color:var(--ink-2);font-size:11px;font-weight:800}
.ct-broker-grid input:checked+.ct-pick-card .ct-broker-mark{background:var(--accent);color:var(--accent-contrast)}

.ct-params-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px 14px}
.ct-params-grid .field{margin-bottom:0}
.ct-params-grid .field .fhint{margin-top:1px}

.ct-user-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 12px}
.ct-user-toolbar input[type=text]{flex:1;min-width:180px;padding:9px 12px;border-radius:var(--r-sm);
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-1);font-size:12.5px}
.ct-user-scroll{max-height:520px;overflow-y:auto;padding:2px}


/* 2026-08-12: Super Indicator results grid (si-* classes) was rendering
   as raw unstyled text -- these rules lived only in the old style.css
   (never linked from base.html, which only loads terminal.css since the
   redesign), same root cause as the earlier CopyTrade bug. Ported here
   and re-mapped to this file's actual theme variables (--ink-1/2/3
   instead of --text/--muted/--muted-2, --buy/--sell instead of
   --green/--red, --surface instead of --card, --line/--line-strong
   instead of --border, --r-lg instead of --radius-lg). */
.si-status-banner{padding:12px 16px;border-radius:var(--r);background:var(--warn-soft);
  border:1px solid var(--warn);color:var(--ink-1);font-size:13px;margin-bottom:16px}
.si-status-banner strong{color:var(--warn)}

.si-suggest-list{position:absolute;z-index:20;background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--r);box-shadow:var(--sh-3);max-height:260px;overflow-y:auto;margin-top:4px}
.si-suggest-item{padding:9px 14px;font-size:13px;color:var(--ink-1);cursor:pointer}
.si-suggest-item:hover,.si-suggest-item.active{background:var(--accent);color:var(--accent-contrast)}

.si-tf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:16px}
.si-tf-card{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--line-strong);
  border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}
.si-tf-card:hover{transform:translateY(-3px);box-shadow:var(--sh-3)}
.si-tf-card:has(.si-tf-dir.buy){border-left-color:var(--buy)}
.si-tf-card:has(.si-tf-dir.sell){border-left-color:var(--sell)}
.si-tf-card .si-tf-head{flex:0 0 auto}
.si-tf-card .si-tf-body{flex:1 1 auto}
.si-tf-card .si-tf-foot{flex:0 0 auto;margin-top:10px}
.si-tf-card .si-tf-name{font-size:13px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.04em}
.si-tf-card .si-tf-prob{font-size:32px;font-weight:700;margin:8px 0 2px;line-height:1;color:var(--ink-1)}
.si-tf-card .si-tf-prob.si-tf-prob-empty{font-size:16px;font-weight:600;color:var(--ink-2);text-transform:uppercase;letter-spacing:.04em}
.si-tf-card .si-tf-dir{font-size:13px;font-weight:600;margin-bottom:0}
.si-tf-card .si-tf-dir.buy{color:var(--buy)}
.si-tf-card .si-tf-dir.sell{color:var(--sell)}
.si-tf-card .si-tf-dir.neutral{color:var(--ink-2)}
.si-tf-card .si-tf-trend{font-size:13px;color:var(--ink-1);margin:10px 0 4px}
.si-tf-card .si-tf-reason{font-size:12px;color:var(--ink-2);line-height:1.5;margin:6px 0 10px;padding:8px 10px;
  background:var(--sunken);border-radius:var(--r-sm);border-left:3px solid var(--accent)}
.si-tf-card .si-tf-vol{font-size:12px;color:var(--ink-2)}
.si-tf-card .si-tf-vol.HIGH{color:var(--sell)}
.si-tf-card .si-tf-vol.LOW{color:var(--accent)}
.si-tf-card .si-tf-meta{font-size:11px;color:var(--ink-3);margin-top:6px;border-top:1px solid var(--line);padding-top:8px}
.si-tf-card.unseasoned{opacity:.55}
.si-tf-card.no-data{opacity:.45}
.si-tf-card.no-data .si-tf-body{display:flex;align-items:center}

.si-overall-banner{display:flex;align-items:center;gap:20px;padding:22px 26px;border-radius:var(--r-lg);
  border:1px solid var(--line);margin-bottom:18px}
.si-overall-banner .si-overall-dir{font-size:26px;font-weight:800;letter-spacing:.04em;flex:0 0 auto;
  padding:8px 18px;border-radius:var(--r-pill)}
.si-overall-banner .si-overall-label{font-size:15px;color:var(--ink-1);flex:1 1 auto;line-height:1.4}
.si-overall-banner.buy{background:linear-gradient(135deg,rgba(43,182,115,.14),rgba(43,182,115,.03));border-color:rgba(43,182,115,.35)}
.si-overall-banner.buy .si-overall-dir{color:#fff;background:var(--buy);box-shadow:0 4px 14px rgba(43,182,115,.35)}
.si-overall-banner.sell{background:linear-gradient(135deg,rgba(240,96,95,.14),rgba(240,96,95,.03));border-color:rgba(240,96,95,.35)}
.si-overall-banner.sell .si-overall-dir{color:#fff;background:var(--sell);box-shadow:0 4px 14px rgba(240,96,95,.35)}
.si-overall-banner.neutral{background:var(--sunken)}
.si-overall-banner.neutral .si-overall-dir{color:var(--ink-1);background:var(--line-strong)}

.si-badge-shadow{display:inline-block;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;
  color:var(--ink-3);background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:2px 8px;margin-left:6px;vertical-align:middle}

.si-tf-histprob{font-size:12px;color:var(--ink-2);margin:6px 0 2px}
.si-tf-histprob b{color:var(--ink-1)}
.si-tf-meta-inline{font-size:11px;color:var(--ink-3)}
.si-tf-levels{display:flex;gap:8px;margin:8px 0;flex-wrap:wrap}
.si-tf-level{background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 10px;
  display:flex;flex-direction:column;gap:2px;min-width:64px}
.si-tf-level span{color:var(--ink-3);font-size:10.5px;text-transform:uppercase;letter-spacing:.03em}
.si-tf-level b{font-size:13px;color:var(--ink-1)}
.si-tf-level.target b{color:var(--buy)}
.si-tf-level.stop b{color:var(--sell)}

.si-tf-sr{margin:8px 0;font-size:12px;line-height:1.6}
.si-sr-row{display:flex;flex-wrap:wrap;gap:4px;align-items:baseline}
.si-sr-row span{color:var(--ink-3);font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;margin-right:4px;min-width:66px}
.si-sr-row.resistance b{color:var(--sell)}
.si-sr-row.support b{color:var(--buy)}
.si-sr-row i{color:var(--ink-3);font-style:normal;font-size:10.5px;margin-right:6px}
.si-tf-levels-empty{font-size:12.5px;opacity:.65;font-style:italic;padding:4px 0;color:var(--ink-2)}

.si-tf-levels-tag{font-size:11px;font-weight:600;padding:3px 0;letter-spacing:.01em}
.si-tf-levels-tag-active{color:var(--buy)}
.si-tf-levels-tag-projected{color:var(--ink-3);font-weight:500;font-style:italic}
.si-tf-levels-projected{opacity:.72}
.si-tf-levels-projected .si-tf-level{border-style:dashed}

.si-dir-badge{display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
  letter-spacing:.04em;padding:3px 10px;border-radius:var(--r-pill);margin-right:8px}
.si-dir-badge-buy{background:rgba(43,182,115,.16);color:var(--buy);border:1px solid rgba(43,182,115,.4)}
.si-dir-badge-sell{background:rgba(240,96,95,.16);color:var(--sell);border:1px solid rgba(240,96,95,.4)}
.si-dir-badge-projected{opacity:.7;border-style:dashed}

.si-take-trade-btn{display:block;width:100%;margin-top:10px;padding:9px 12px;border-radius:var(--r-sm);
  border:1px solid var(--accent);background:var(--accent);color:var(--accent-contrast);font-size:12.5px;font-weight:600;
  cursor:pointer;text-align:center}
.si-take-trade-btn:hover{opacity:.9}
.si-take-trade-btn:disabled{opacity:.6;cursor:default}
.si-take-trade-btn.done{background:var(--buy);border-color:var(--buy)}