/* ============================================================================
   DisciplineX Trader — Redesign Override
   Loaded AFTER style.css. Resets the visual layer (tokens, typography,
   chrome, spacing, hierarchy) without touching JS-bound class names.

   Direction:  F1 telemetry HUD × premium fintech.
               Dense, breathable, every pixel earns its place.
               Market data = cold/electric · Behavioral = warm/meditative.
   ============================================================================ */

/* ── Token reset ─────────────────────────────────────────────────────────── */
:root {
  /* voice broadcast gradient (equalizer bars, canvas waveform, Gemini glow —
     see design-testing/voice-animation-lab.html for the reference visuals) */
  --dx-voiceA: #4da3ff;
  --dx-voiceB: #2ee6a0;
  --dx-voiceC: #E8A33D;
  --dx-voiceD: #ff6a3d;

  /* surfaces */
  --bg-base:       #0B0E17;
  --bg-card:       #11141E;
  --bg-card-2:     #12161F;
  --bg-card-warm:  #17141C;   /* behavioral panels — warmer tone */
  --bg-inset:      #0A0D14;
  --bg-elev:       #181C28;

  /* borders */
  --border:           rgba(255,255,255,0.06);
  --border-subtle:    rgba(255,255,255,0.06);
  --border-strong:    rgba(255,255,255,0.10);
  --border-warm:      rgba(255,210,160,0.08);

  /* text */
  --text:            #E8ECF1;
  --text-primary:    #E8ECF1;
  --text-secondary:  #C6CCD8;
  --text-dim:        #8892A6;
  --text-label:      #6F7A8E;
  --text-mute:       #5A6478;
  --muted:           #8892A6;
  --dim:             #5A6478;

  /* signals */
  --green:        #00FF88;
  --green-soft:   #00C46A;
  --green-sat:    #00FF88;
  --neon-green:   #00FF88;
  --red:          #FF4560;
  --red-sat:      #FF4560;
  --red-soft:     #C13647;
  --amber:        #F5A623;
  --amber-sat:    #F5A623;
  --amber-soft:   #B27A19;
  --blue:         #4FACFE;
  --blue-sat:     #4FACFE;
  --blue-soft:    #3A7EB6;
  --purple:       #9B7BEA;

  /* legacy aliases the existing CSS depends on */
  --bg1:           var(--bg-card);
  --bg2:           var(--bg-card);
  --text:          var(--text-primary);

  /* spacing scale (8px grid) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px;  --s-10: 40px;

  /* radii */
  --r-sm: 4px; --r-md: 6px; --r-lg: 10px;

  /* fonts */
  --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
}

/* ── Base reset ──────────────────────────────────────────────────────────── */
html, body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-feature-settings: 'ss01','cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body { padding: 0; }

::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }

/* mono everywhere we want numerics */
.mono, .val, .val-lg,
[id*="Val"], [id*="OI"], [id*="Wall"], [id*="Spot"],
.dt-spot-val, .dt-vix-val, .dt-macro-val { font-feature-settings: 'tnum' 1, 'zero' 1; }

/* ============================================================================
   DATA DOTS — top strip
   ============================================================================ */
/* ─────────────────────────────────────────────────────────────────
   DATA DOTS STRIP — running data-collection animation
   ───────────────────────────────────────────────────────────────── */
#dataDots {
  height: 3px !important;
  background: transparent !important;
  border-bottom: 1px solid var(--border);
  padding: 0 !important;
  position: relative !important;
  overflow: hidden;
}

/* The "next dot to be filled" — the live cursor */

@keyframes ddNextPulse {
  0%,100% { opacity: 0.35; transform: scaleY(1);   }
  50%     { opacity: 1;    transform: scaleY(1.4); }
}

/* Sliding "data packet" cursor that travels from the leftmost dot
   toward the next-pending position, then loops — gives a live
   "data streaming in" feel */
#dataDots::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,255,136,0.55) 30%,
    rgba(0,255,136,1) 70%,
    rgba(0,255,136,0.85) 100%);
  border-radius: 2px;
  box-shadow:
    0 0 8px rgba(0,255,136,0.9),
    0 0 16px rgba(0,255,136,0.5);
  animation: ddPacketRun var(--dd-run, 3s) cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes ddPacketRun {
  0%   { left: 0;                      opacity: 0;   transform: scaleX(0.6); }
  8%   { opacity: 1;                                  transform: scaleX(1);   }
  85%  { left: var(--dd-target, 70%);  opacity: 1;   transform: scaleX(1.2); }
  92%  { left: var(--dd-target, 70%);  opacity: 1;   transform: scaleX(0.4); }
  100% { left: var(--dd-target, 70%);  opacity: 0;   transform: scaleX(0);   }
}

/* Subtle trail behind the packet — soft glow region */
#dataDots::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: var(--dd-target, 70%);
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,255,136,0.05) 80%, transparent);
  pointer-events: none;
  z-index: 1;
}

/* ============================================================================
   HEADER — nav row + ticker row
   ============================================================================ */
.header {
  background: linear-gradient(180deg, #0E1119 0%, #0B0E17 100%);
  border-bottom: 1px solid var(--border);
}

/* ROW 1: TOP NAV — force user pill to extreme right */
.dhan-nav {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  padding: 0 var(--s-5) !important;
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  height: 36px !important;
}
.dn-temporal  { justify-self: start !important; }
.dn-center    { justify-self: center !important; display: flex !important; align-items: center !important; }
.dn-right     { justify-self: end !important; }
.dn-temporal {
  display: flex !important;
  align-items: center !important;
  gap: var(--s-3) !important;
}
.dn-date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
}
.dt-clock-time {
  font-family: var(--font-mono);
  display: inline-flex; align-items: baseline; gap: 0;
}
.dt-hh, .dt-mm { font-size: 13px; font-weight: 700; color: var(--text-primary); letter-spacing: 0.5px; }
.dt-ss         { font-size: 13px; font-weight: 700; color: var(--amber); letter-spacing: 0.5px; }
.dt-colon      { font-size: 13px; color: var(--text-mute); font-weight: 500; padding: 0 1px; }
.dt-ist        { font-size: 10px; color: var(--text-mute); margin-left: var(--s-2); letter-spacing: 1px; }
.dn-sep        { color: var(--text-mute); opacity: 0.5; font-size: 10px; }

/* Brand mark — relocated here from .dhan-ticker (desktop shell room-scoping,
   Phase 1) so the brand still shows in the persistent nav bar once the
   ticker itself becomes Market-room-only. Scaled down from the ticker's
   53px/16px sizing to fit the 36px-tall .dhan-nav bar. */
.dn-brand-mark { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.dn-brand-mark .dn-brand-logo {
  height: 22px !important; width: 22px !important;
  border-radius: 50% !important;
}
.dn-brand-mark .dn-logo {
  font-size: 12.5px !important;
  letter-spacing: -0.1px !important;
}

.badge {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-dim);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: 3px;
}

.dn-center { display: none !important; } /* header center slot is now empty */
.bx-status-pill::before, .bx-status-pill::after { display: none !important; content: none !important; }
.bx-status-pill .bx-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px rgba(0,255,136,0.7);
  animation: bxPulse 2s ease-in-out infinite;
}
@keyframes bxPulse { 0%,100%{ opacity:1 } 50%{ opacity:0.4 } }
.bx-status-active { color: var(--green) !important; background: rgba(0,255,136,0.05) !important; }
.bx-status-inactive { color: var(--text-mute) !important; background: transparent !important; border-color: var(--border) !important; }

/* User pill */
.user-pill {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  padding: 0 var(--s-3) 0 var(--s-1) !important;
  height: 32px !important;
  color: var(--text-secondary) !important;
  font-family: var(--font-sans) !important;
  letter-spacing: 0.3px !important;
  font-weight: 500 !important;
}
.user-pill:hover { border-color: var(--border-strong) !important; background: rgba(255,255,255,0.05) !important; }
.user-avatar {
  width: 22px !important; height: 22px !important;
  background: rgba(255,255,255,0.06) !important;
  border-radius: 50% !important;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
}

/* ── Row 2: ticker strip ─────────────────────────────────────────────────── */
.dhan-ticker {
  background: var(--bg-base) !important;
  border-bottom: 1px solid var(--border) !important;
  height: 70px !important;
  min-height: 70px !important;
  max-height: 70px !important;
  padding: 0 var(--s-3) !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}
.dt-seg {
  padding: 0 var(--s-4) !important;
  gap: var(--s-1) !important;
  justify-content: center !important;
  height: auto !important;
  align-items: center !important;
  padding-top: 0 !important;
  flex-shrink: 0;
}
.dt-div {
  width: 1px !important;
  background: var(--border) !important;
  height: 36px !important;
  align-self: center !important;
  flex-shrink: 0 !important;
}

/* Brand segment */
.dt-brand-slot {
  padding: 0 var(--s-4) 0 var(--s-3) !important;
  flex-shrink: 0;
}
.dt-brand-top {
  display: flex; align-items: center; gap: var(--s-4);
  justify-content: space-between;
}
.dt-brand-inner { display: flex; align-items: center; gap: 5px; }
.dn-brand-logo {
  height: 53px !important;
  width: 53px !important;
  filter: none !important;
  border-radius: var(--r-sm) !important;
  background: transparent !important;
  padding: 0 !important;
  object-fit: contain;
}
.dt-brand-text-col { display: flex; flex-direction: column; gap: 2px; }
.dt-update-info-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-mute);
  letter-spacing: 0.3px;
}
.dn-logo {
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
  color: var(--text-primary) !important;
  text-shadow: none !important;
}
.dn-logo::before { content: none; }
.dt-update-info {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-mute);
  letter-spacing: 0.3px;
}

/* Control buttons (Replay / Today) — stacked vertically to save horizontal space */
.dt-direct-controls {
  display: flex; flex-direction: column; gap: 3px;
  align-items: stretch;
}
.dt-drop-btn {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 4px 10px !important;
  border-radius: var(--r-sm) !important;
  letter-spacing: 0.2px !important;
  min-width: 78px !important;
  display: inline-flex; align-items: center; gap: 6px;
  text-align: left;
}
.dt-drop-btn:hover {
  border-color: var(--border-strong) !important;
  background: rgba(255,255,255,0.04) !important;
  color: var(--text-primary) !important;
}

/* Segment labels & values */
.dt-seg-label {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 1.6px !important;
  color: var(--text-mute) !important;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 5px;
}
.dt-info-icon { color: var(--text-mute); font-size: 10px; opacity: 0.6; cursor: help; }

.dt-spot-val {
  font-family: var(--font-mono) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  letter-spacing: -0.5px !important;
  line-height: 1 !important;
}
.dt-spot-change, .dt-vix-change, .dt-macro-chg {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.3px !important;
  white-space: nowrap !important;
}

.dt-vix-val {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--amber);
  line-height: 1;
}
.dt-macro-val {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

/* ── Sparkline segment ──────────────────────────────────────────────────────
   Two visually separate units:
     [NIFTY 50 | price | change]  dt-divider  [sparkline + SIDEWAYS + bias]
   The wrap gets an explicit height so the absolute overlay never bleeds out.
   ──────────────────────────────────────────────────────────────────────── */
.dt-sparkline-seg.dt-seg {
  align-self: stretch !important;
  position: relative !important;
  display: block !important;
  padding: 0 !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  flex: 0 0 220px !important;
  height: 70px !important;
}
/* Wrap is absolutely centred inside the segment — fixed 200x60 box.
   Avoids flex-column basis treating 200px as a HEIGHT. */
.dhan-ticker .dt-sparkline-seg .dt-sparkline-wrap {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 200px !important;
  height: 60px !important;
  overflow: hidden !important;
  display: block !important;
  flex: none !important;
  align-self: auto !important;
}
/* Canvas fills wrap (natural flow, z-index 1) */
.dhan-ticker .dt-sparkline-seg #headerSparkline {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 200px !important;
  max-height: 60px !important;
  z-index: 1 !important;
  display: block !important;
}
/* Overlay — z-index 2, full-cover, centred flex column */
.dhan-ticker .dt-spark-overlay {
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
/* SIDEWAYS pill — override style.css absolute positioning */
.dhan-ticker .dt-spark-overlay .dt-session-badge {
  position: static !important;
  top: auto !important; left: auto !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  color: var(--amber) !important;
  background: rgba(11,14,23,0.85) !important;
  border: 1px solid rgba(245,166,35,0.35) !important;
  padding: 2px 10px !important;
  border-radius: 999px !important;
  text-transform: uppercase !important;
  backdrop-filter: blur(4px) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}
/* Bias mini pill */
.dhan-ticker .dt-spark-overlay .dt-bias-mini {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 2px 10px !important;
  border-radius: 999px !important;
  background: rgba(11,14,23,0.85) !important;
  border: 1px solid rgba(245,166,35,0.20) !important;
  backdrop-filter: blur(4px) !important;
  line-height: 1 !important;
}
.dhan-ticker .dt-spark-overlay .dt-bias-state {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 1px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}
.dhan-ticker .dt-spark-overlay .dt-bias-sep {
  font-size: 9px !important;
  line-height: 1 !important;
  color: var(--text-mute) !important;
}
.dhan-ticker .dt-spark-overlay .dt-bias-num {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* Flow segment */
.dt-flow { min-width: 0; }
.dt-flow-date {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-mute);
  letter-spacing: 0.8px;
}
.dt-flow-body {
  display: flex; align-items: center; gap: var(--s-4);
}
.dt-flow-rows { display: flex; flex-direction: column; gap: 2px; }
.dt-flow-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  display: flex; gap: 6px;
}

/* ============================================================================
   SEBI MARQUEE — quieter
   ============================================================================ */
.sebi-marquee-wrap {
  background: var(--bg-base) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 6px 0 !important;
  opacity: 0.5;
}
.sebi-marquee-inner {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.8px !important;
  color: var(--text-mute) !important;
}

/* ============================================================================
   TOP PAIR — Cycle (behavioral) + Cockpit (behavioral) side by side
   ============================================================================ */
.top-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-4);
  margin: var(--s-5) var(--s-5) var(--s-4);
  align-items: stretch;
}
.top-pair > .cx-today-panel,
.top-pair > .card-signals {
  margin: 0 !important;
  height: 100%;
  grid-column: auto !important;
  grid-row: auto !important;
  max-height: none !important;
  min-width: 0 !important;
}
.top-pair > .cx-today-panel { grid-column: 1 / 2 !important; }
.top-pair > .card-signals   { grid-column: 2 / 3 !important; }
@media (max-width: 1100px) {
  .top-pair { grid-template-columns: minmax(0, 1fr); }
  .top-pair > .cx-today-panel,
  .top-pair > .card-signals { grid-column: 1 !important; }
}

/* ============================================================================
   CYCLE TODAY PANEL — behavioral, warmer (now half-width inside .top-pair)
   ============================================================================ */
.cx-today-panel {
  margin: 0 !important;
  background:
    radial-gradient(800px 200px at 0% 0%, rgba(245,166,35,0.04), transparent 60%),
    linear-gradient(180deg, var(--bg-card-warm), #14121A);
  border: 1px solid var(--border-warm) !important;
  border-radius: var(--r-lg) !important;
  padding: 0 !important;
  overflow: hidden;
  flex-direction: column;
}
.cx-today-panel::before {
  content: '';
  position: absolute;
  /* a subtle warm accent line on the left edge */
}

.cx-cycle-footer {
  padding: var(--s-3) var(--s-6) !important;
  border-top: 1px solid var(--border) !important;
  display: flex !important;
  gap: var(--s-5) !important;
  background: rgba(0,0,0,0.15);
  margin-top: auto !important;
}
.cx-cycle-footer-link {
  background: transparent !important;
  border: none !important;
  color: var(--text-dim) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  cursor: pointer;
  padding: 0 !important;
  letter-spacing: 0.2px;
}
.cx-cycle-footer-link:hover { color: var(--text-primary) !important; }

/* ============================================================================
   STATS GRID — 3 equal columns: Proximity | Trend Indicators | Important Timeline
   ============================================================================ */
.stats-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: var(--s-4) !important;
  margin: 0 var(--s-5) var(--s-4) !important;
  padding: 0 !important;
  align-items: stretch;
}
.stats-grid > .card {
  max-height: none !important;
  min-height: 520px !important;
  overflow: visible !important;
  height: auto !important;
  grid-row: auto !important;
}
.stats-grid > .prox-card      { grid-column: 1 !important; }
.stats-grid > .card-analytics { grid-column: 2 !important; }
.stats-grid > .card-timeline  { grid-column: 3 !important; }
.stats-grid > .card-carousel  { grid-column: 3 !important; }
@media (max-width: 1200px) {
  .stats-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  .stats-grid > .card-timeline  { grid-column: 1 / -1 !important; min-height: 0 !important; }
  .stats-grid > .card-carousel  { grid-column: 1 / -1 !important; min-height: 0 !important; }
}
@media (max-width: 900px) {
  .stats-grid { grid-template-columns: 1fr !important; }
  .stats-grid > .card { grid-column: 1 !important; min-height: 0 !important; }
}

/* ── Shared card chrome (market/cold) ─────────────────────────── */
.card, .card-dark {
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-card-2) 100%) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  padding: var(--s-5) !important;
  box-shadow: none !important;
}
.card-dark { background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-card-2) 100%) !important; }

/* Subtle hover */
.card:hover { border-color: var(--border-strong) !important; }

/* ============================================================================
   CARD 1 — PROXIMITY HUB (modern module redesign)
   ============================================================================ */
.prox-card {
  display: flex !important;
  flex-direction: column !important;
  padding: var(--s-5) !important;
  justify-content: stretch;
}
.ph-modern {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  flex: 1;
}
.ph-mod {
  background: rgba(255,255,255,0.015);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.ph-mod::before {
  content: '';
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 2px;
  border-radius: 1px;
  opacity: 0.55;
}
.ph-mod-oi::before    { background: var(--green); }
.ph-mod-flow::before  { background: var(--blue); }
.ph-mod-walls::before { background: var(--amber); }

.ph-mod-walls { flex: 1; }

.ph-mod-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding-left: var(--s-2);
}
.ph-mod-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.8px;
  color: var(--text-mute);
  font-weight: 600;
  text-transform: uppercase;
}
.ph-mod-title {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: -0.1px;
}
.ph-mod-head .ph-mod-bias { margin-left: auto; }
.ph-mod-bias {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--red);
  background: rgba(255,69,96,0.06);
  border: 1px solid rgba(255,69,96,0.18);
  padding: 3px 9px;
  border-radius: 999px;
}
.ph-bias-dot {
  width: 6px; height: 6px;
  background: var(--red);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255,69,96,0.6);
}

/* ── OI PRESSURE ─────────────────────────────────────────────── */
.ph-oi-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--s-3);
  align-items: end;
  padding: 4px var(--s-3) var(--s-2);
}
.ph-oi-cell {
  display: flex; flex-direction: column; gap: 4px;
}
.ph-oi-cell--call { text-align: right; align-items: flex-end; }
.ph-oi-k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  color: var(--text-mute);
  text-transform: uppercase;
  font-weight: 600;
}
.ph-oi-v {
  font-family: var(--font-mono) !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  letter-spacing: -1px !important;
  line-height: 1 !important;
  margin: 4px 0 2px !important;
}
.ph-oi-delta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}
.ph-oi-ratio {
  display: flex; flex-direction: column; gap: 4px;
  align-items: center;
  padding: 0 var(--s-3);
  border-left: 1px dashed var(--border);
  border-right: 1px dashed var(--border);
  height: 100%;
  justify-content: center;
}
.ph-oi-ratio-k {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.6px;
  color: var(--text-mute);
  text-transform: uppercase;
}
.ph-oi-ratio-v {
  font-size: 14px !important;
  letter-spacing: 0.3px !important;
}

.ph-split-wrap { padding: 0 var(--s-3) 4px; margin-bottom: 0 !important; }
.ph-split-bar {
  height: 5px !important;
  border-radius: 3px !important;
  background: rgba(255,255,255,0.04) !important;
  position: relative !important;
  overflow: hidden;
}
.ph-split-fill {
  position: absolute !important;
  top: 0 !important;
  height: 100% !important;
  transition: width .7s ease;
}
.ph-split-fill--put  { left: 0 !important;  background: var(--green) !important; border-radius: 3px 0 0 3px !important; opacity: 0.85; }
.ph-split-fill--call { right: 0 !important; left: auto !important; background: var(--red) !important; border-radius: 0 3px 3px 0 !important; opacity: 0.85; }

/* ── 15M FLOW ────────────────────────────────────────────────── */
.ph-flow-body {
  background: rgba(0,0,0,0.20) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  padding: var(--s-3) var(--s-4) !important;
  display: flex !important;
  align-items: center;
  gap: var(--s-3) !important;
  margin: 0 var(--s-2);
}
.ph-flow-k {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 1.4px !important;
  color: var(--text-mute) !important;
  text-transform: uppercase;
  font-weight: 600 !important;
}
.ph-flow-v {
  font-family: var(--font-mono) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--green) !important;
  letter-spacing: -0.5px !important;
  display: inline-flex; align-items: center; gap: 8px;
  line-height: 1;
}
.ph-flow-bias {
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  color: var(--text-secondary) !important;
  flex: 1;
}

/* ── WALLS & SPOT CHANNEL ────────────────────────────────────── */
.ph-walls-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: 0 !important;
  flex: 1;
  padding: 0 var(--s-2);
}
.ph-walls-anchors {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: stretch !important;
  gap: var(--s-3) !important;
  margin-bottom: 0 !important;
}
.ph-wall {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: var(--s-3);
  background: rgba(0,0,0,0.18);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.ph-wall--put  { border-left: 2px solid var(--green); }
.ph-wall--call { border-right: 2px solid var(--red); align-items: flex-end !important; text-align: right; }
.ph-wall--spot {
  align-items: center !important;
  justify-content: center !important;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(245,166,35,0.10), transparent 60%),
    rgba(0,0,0,0.22);
  border-color: rgba(245,166,35,0.20);
  text-align: center;
  min-width: 110px;
}

.ph-wall-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  color: var(--text-mute);
  text-transform: uppercase;
  font-weight: 600;
}
.ph-wall-tag--spot {
  background: rgba(245,166,35,0.10);
  border: 1px solid rgba(245,166,35,0.22);
  color: var(--amber);
  padding: 2px 10px;
  border-radius: 999px;
  letter-spacing: 1.8px;
  font-size: 9px;
}
.ph-wall-label { color: var(--text-mute) !important; font-size: 10px !important; letter-spacing: 1.4px !important; }
.ph-wall-dot { width: 8px !important; height: 8px !important; }

.ph-wall-v {
  font-family: var(--font-mono) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: -0.6px !important;
  line-height: 1 !important;
  margin-top: 0 !important;
}
.ph-spot-v {
  font-family: var(--font-mono) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--amber) !important;
  letter-spacing: -0.5px !important;
  line-height: 1 !important;
  text-shadow: 0 0 14px rgba(245,166,35,0.30);
}
.ph-spot-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.2px;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-top: 2px;
}
.ph-wall-meta {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}
.ph-wall--call .ph-wall-meta { justify-content: flex-end; }
.ph-wall-oi { font-weight: 600; }
.ph-wall-delta {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}
.ph-wall-dist {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  margin-top: 2px;
}

/* Channel (heat track) */
.ph-channel {
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;   /* PW pinned left, CW pinned right */
  gap: 6px;
  height: 24px !important;
  margin: var(--s-3) 0 4px !important;
  background: linear-gradient(90deg,
    rgba(0,255,136,0.14) 0%,
    rgba(255,255,255,0.04) 50%,
    rgba(255,69,96,0.14) 100%) !important;
  border-radius: 999px !important;
  border: 1px solid var(--border) !important;
  padding: 0 12px !important;
  overflow: visible !important;
}
.ph-channel-end {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  font-weight: 700;
}
.ph-channel-end--put  { color: var(--green); }
.ph-channel-end--call { color: var(--red); }
.ph-channel-fill {
  position: absolute !important;
  left: 0 !important; top: 0 !important;
  height: 100% !important;
  background: linear-gradient(90deg, rgba(245,166,35,0.10), rgba(245,166,35,0.30));
  border-radius: 999px;
  opacity: 0.7;
}
.ph-spot-marker {
  position: absolute !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 4;
}
.ph-spot-pip {
  width: 14px !important;
  height: 14px !important;
  background: var(--amber) !important;
  border: 2px solid var(--bg-card) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 12px rgba(245,166,35,0.7), 0 0 0 1px rgba(245,166,35,0.3) !important;
  position: relative;
  z-index: 2;
}
.ph-spot-pulse {
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--amber);
  transform: translate(-50%, -50%);
  animation: phSpotPulse 2s ease-out infinite;
  opacity: 0;
}
@keyframes phSpotPulse {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
}

.ph-channel-legend {
  display: flex !important;
  justify-content: space-between !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  margin-top: 0 !important;
  letter-spacing: 0.3px !important;
}
.ph-legend-l { color: var(--green) !important; font-weight: 600; }
.ph-legend-c { color: var(--text-mute) !important; }
.ph-legend-r { color: var(--red) !important; font-weight: 600; }

/* OI row */

.prox-oi-val {
  font-family: var(--font-mono) !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  letter-spacing: -0.8px !important;
  margin-top: 6px;
}
.prox-oi-val.green { color: var(--green) !important; text-shadow: 0 0 16px rgba(0,255,136,0.18); }
.prox-oi-val.red   { color: var(--red) !important; text-shadow: 0 0 16px rgba(255,69,96,0.18); }
.prox-oi-delta {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--text-dim) !important;
  margin-top: 6px !important;
}

.prox-ratio-val {
  font-family: var(--font-mono) !important;
  font-size: 15px !important;
  color: var(--text-primary) !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px;
}

/* Split bar — sharper */
.split-bar-bg {
  height: 4px !important;
  border-radius: 2px !important;
  background: rgba(255,255,255,0.04) !important;
  position: relative !important;
}
.split-bar-green {
  background: linear-gradient(90deg, var(--green), var(--green)) !important;
  opacity: 0.85;
}
.split-bar-red {
  background: linear-gradient(90deg, var(--red), var(--red)) !important;
  opacity: 0.85;
  left: auto !important; right: 0 !important;
  border-radius: 0 2px 2px 0 !important;
  position: absolute !important; top: 0 !important; height: 100% !important;
}

/* Net flow chip */
.prox-net-flow {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  padding: 8px 12px !important;
  font-family: var(--font-mono) !important;
}
.prox-net-label {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 1.4px !important;
  color: var(--text-mute) !important;
}
.prox-net-val { font-size: 13px !important; color: var(--green) !important; font-weight: 700 !important; display: inline-flex; align-items: center; gap: 6px; }

.prox-net-bias { font-size: 11px !important; color: var(--text-secondary) !important; font-family: var(--font-sans) !important; }

/* Heat slider section */
.heat-slider-section { margin: 0 !important; }
.heat-anchors { gap: var(--s-3) !important; margin-bottom: var(--s-3) !important; }
.heat-anchor-label {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 1.4px !important;
  color: var(--text-mute) !important;
}
.heat-anchor-val {
  font-family: var(--font-mono) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
  margin-top: 4px;
}
.heat-anchor-val.green { color: var(--green) !important; }
.heat-anchor-val.red   { color: var(--red) !important; }
.heat-anchor-oi {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--text-dim) !important;
  margin-top: 2px;
}
.heat-anchor-dist {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  margin-top: 2px;
}
.heat-anchor-dist.green { color: var(--green); }
.heat-anchor-dist.red { color: var(--red); }

.heat-anchor-centre { padding-top: var(--s-3) !important; }
.heat-spot-val {
  font-family: var(--font-mono) !important;
  font-size: 16px !important;
  color: var(--amber) !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px;
}

.wall-dot { width: 8px !important; height: 8px !important; }
.green-dot { background: var(--green) !important; box-shadow: 0 0 8px rgba(0,255,136,0.5); border-radius: 50%; }
.red-dot   { background: var(--red) !important;   box-shadow: 0 0 8px rgba(255,69,96,0.5);  border-radius: 50%; }

.heat-track {
  height: 6px !important;
  border-radius: 3px !important;
  background: linear-gradient(90deg,
    rgba(0,255,136,0.10) 0%,
    rgba(255,255,255,0.04) 35%,
    rgba(255,255,255,0.04) 65%,
    rgba(255,69,96,0.10) 100%) !important;
  border: 1px solid var(--border) !important;
}
.heat-marker-pip {
  width: 12px !important; height: 12px !important;
  background: var(--amber) !important;
  border: 2px solid var(--bg-base) !important;
  box-shadow: 0 0 10px rgba(245,166,35,0.6), 0 0 0 1px rgba(245,166,35,0.3) !important;
}
.heat-legend {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  color: var(--text-mute) !important;
  margin-top: 8px !important;
}
.heat-legend span:first-child { color: var(--green) !important; }
.heat-legend span:last-child  { color: var(--red) !important; }

/* ============================================================================
   CARD 2 — TREND / IV / COST&FLOW + TIMELINE
   ============================================================================ */
.card-analytics {
  padding: var(--s-6) var(--s-5) var(--s-5) !important;
}
/* c2-split-body becomes single column — timeline is now its own card */
.c2-split-body {
  display: flex !important;
  flex-direction: column !important;
  height: 100%;
}
/* ============================================================================
   TREND INDICATORS — modern module-based redesign
   ============================================================================ */
.ti-modern {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--s-4) !important;
  height: 100%;
}
.ti-mod {
  background: rgba(255,255,255,0.015);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-4) var(--s-3);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.ti-mod::before {
  content: '';
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 2px;
  border-radius: 1px;
  opacity: 0.55;
}
.ti-mod-pcr::before  { background: var(--blue); }
.ti-mod-iv::before   { background: var(--amber); }
.ti-mod-cost::before { background: var(--purple); }

.ti-mod-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding-left: var(--s-2);
}
.ti-mod-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.8px;
  color: var(--text-mute);
  font-weight: 600;
  text-transform: uppercase;
}
.ti-mod-title {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: -0.1px;
}
.ti-mod-head .ti-mod-bias,
.ti-mod-head .ti-mod-badge,
.ti-mod-head #ivStatusBadge {
  margin-left: auto;
}
.ti-mod-bias {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--green);
  background: rgba(0,255,136,0.06);
  border: 1px solid rgba(0,255,136,0.18);
  padding: 3px 9px;
  border-radius: 999px;
}
.ti-bias-dot {
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0,255,136,0.6);
}

/* ── PCR DRIFT ───────────────────────────────────────────────── */
.ti-pcr-readout {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--s-2) var(--s-3) var(--s-1);
}

.ti-pcr-value {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.8px;
  line-height: 1;
}

.ti-pcr-graph {
  padding: 0 var(--s-3) var(--s-2);
}
.ti-pcr-spark {
  display: block;
  width: 100%;
  height: 56px;
  overflow: visible;
}
.pcr-spark-line {
  stroke: var(--blue);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(79,172,254,0.45));
}
.pcr-spark-dot {
  fill: var(--blue);
  filter: drop-shadow(0 0 5px rgba(79,172,254,0.7));
}

/* ── PREMIUM vs SPOT TRACK ────────────────────────────────────── */
.ti-premium-graph {
  padding: 2px 0 0;
}
.ti-premium-spark {
  display: block;
  width: 100%;
  height: 56px;
  overflow: visible;
}
.spot-spark-line {
  stroke: var(--blue);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(79,172,254,0.45));
}
.spot-spark-dot {
  fill: var(--blue);
  filter: drop-shadow(0 0 5px rgba(79,172,254,0.7));
}
.premium-spark-line {
  stroke: var(--amber);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(245,166,35,0.45));
}
.premium-spark-dot {
  fill: var(--amber);
  filter: drop-shadow(0 0 5px rgba(245,166,35,0.7));
}
.ti-premium-legend {
  display: flex;
  gap: var(--s-3);
  padding: 2px 0 0;
}
.ti-premium-leg {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--text-mute);
  text-transform: uppercase;
}
.ti-premium-leg i {
  display: inline-block;
  width: 8px; height: 2px;
  border-radius: 1px;
}
.ti-premium-leg--spot i { background: var(--blue); }
.ti-premium-leg--prem i { background: var(--amber); }

/* ── IMPLIED VOLATILITY ──────────────────────────────────────── */
.ti-mod-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0,255,136,0.06);
  color: var(--green);
  border: 1px solid rgba(0,255,136,0.18);
}

.ti-iv-tri {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: rgba(0,0,0,0.18);
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
}
.ti-iv-cell {
  display: flex; flex-direction: column; gap: 2px;
  text-align: center;
  align-items: center;
}
.ti-iv-cell-k {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.3px;
  color: var(--text-mute);
  text-transform: uppercase;
  font-weight: 600;
}
.ti-iv-cell-v {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1;
}
.ti-iv-cell--ce  .ti-iv-cell-v { color: var(--red); }
.ti-iv-cell--avg .ti-iv-cell-v { color: var(--amber); }
.ti-iv-cell--pe  .ti-iv-cell-v { color: var(--green); }
.ti-iv-vs {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-mute);
  letter-spacing: 1px;
  align-self: center;
  padding: 0 4px;
}

.ti-iv-skewbar {
  display: flex; align-items: center;
  gap: var(--s-3);
  padding: 0 var(--s-3);
}
.ti-iv-skewbar-end {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.2px;
  color: var(--text-mute);
  font-weight: 500;
  white-space: nowrap;
  min-width: 56px;
}
.ti-iv-skewbar-end--ce { color: var(--red); text-align: right; }
.ti-iv-skewbar-end--pe { color: var(--green); }
.ti-iv-skewbar-track {
  flex: 1;
  height: 6px !important;
  background: linear-gradient(90deg,
    rgba(255,69,96,0.18),
    rgba(255,255,255,0.05) 50%,
    rgba(0,255,136,0.18)) !important;
  border-radius: 3px;
  position: relative;
}
.ti-iv-skewbar-mid {
  position: absolute;
  left: 50%; top: -3px; bottom: -3px;
  width: 1px !important;
  background: rgba(255,255,255,0.18) !important;
}
.ti-iv-skewbar-dot {
  position: absolute;
  top: 50%;
  width: 12px !important; height: 12px !important;
  background: var(--amber) !important;
  border: 2px solid var(--bg-card) !important;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgba(245,166,35,0.6) !important;
}

.ti-iv-foot {
  display: flex; align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 0 var(--s-3);
}
.ti-iv-foot-k {
  color: var(--text-mute);
  letter-spacing: 1.2px;
  font-size: 9px;
  text-transform: uppercase;
  font-weight: 600;
}
.ti-iv-foot-v {
  color: var(--text-secondary);
  font-weight: 500;
}
.ti-iv-foot-spacer { flex: 1; }
.ti-iv-foot-tag {
  color: var(--text-dim);
  font-style: italic;
}

/* ── COST & FLOW TILES ───────────────────────────────────────── */
.ti-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}
.ti-tile {
  background: rgba(0,0,0,0.20);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4);
  display: flex; flex-direction: column;
  gap: 6px;
}

.ti-tile-head { display: flex; flex-direction: column; gap: 2px; }
.ti-tile-k {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.4px;
  color: var(--text-mute);
  text-transform: uppercase;
  font-weight: 600;
}
.ti-tile-sub {
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--text-mute);
  letter-spacing: 0.3px;
}
.ti-tile-v {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.6px;
  line-height: 1;
  margin-top: 2px;
}
.ti-tile-v--amber { color: var(--amber); }

.ti-tile-foot {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-mute);
  letter-spacing: 0.3px;
  margin-top: 4px;
}

/* ATM Theta — session burn timeline */
.thb {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "rate  remain"
    "track remain"
    "note  remain";
  column-gap: 16px;
  align-items: center;
  margin-top: 6px;
}
.thb-rate  { grid-area: rate;  display: flex; align-items: baseline; gap: 7px; }
.thb-rate-unit {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.4px;
  color: var(--text-mute);
}

.thb-track {
  grid-area: track;
  display: flex; align-items: center; gap: 9px;
  margin-top: 11px;
}
.thb-cap {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.5px;
  color: var(--text-mute);
}
.thb-bar {
  position: relative;
  flex: 1 1 auto;
  height: 8px;
  border-radius: 5px;
  background: rgba(255,255,255,0.06);
}
.thb-fill {
  position: absolute; left: 0; top: 0;
  height: 100%; width: 0%;
  border-radius: 5px;
  background: linear-gradient(90deg, #f97316, #fb923c);
  transition: width 0.5s ease, background 0.3s ease;
}
.thb-head {
  position: absolute; top: 50%; left: 0%;
  transform: translate(-50%, -50%);
  transition: left 0.5s ease;
  pointer-events: none;
}
.thb-head-dot {
  display: block;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--head-col, #fb923c);
  box-shadow: 0 0 0 3px rgba(10,14,22,0.92), 0 0 10px 1px var(--head-col, #fb923c);
}

.thb-note {
  grid-area: note;
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: 0.3px;
  color: var(--text-mute);
  margin-top: 8px;
}

.thb-remain {
  grid-area: remain;
  align-self: center;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 72px;
  padding: 9px 14px;
  border: 1px solid rgba(245,158,11,0.28);
  border-radius: 10px;
  background: radial-gradient(120% 100% at 50% 0%, rgba(245,158,11,0.10), rgba(0,0,0,0.18));
}
.thb-remain-v {
  font-family: var(--font-mono);
  font-size: 26px; font-weight: 800;
  color: #fbbf24; letter-spacing: -0.5px; line-height: 1;
  text-shadow: 0 0 14px rgba(245,158,11,0.28);
}
.thb-remain-k {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 1.5px;
  color: rgba(251,191,36,0.8);
  text-transform: uppercase;
  margin-top: 3px;
}
.thb-remain-sub {
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.5px;
  color: var(--text-mute);
}
   /* c2-right is now hosted inside .card-timeline below */

/* When c2-right is the direct child of .card-timeline, remove the border-left */

.card-timeline {
  padding: var(--s-6) var(--s-5) var(--s-5) !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ── INSTITUTIONAL FLOW CHART (FII vs DII, 7 trading days) ──────────────── */
.flow-modern {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: var(--s-3);
}
.flow-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.flow-header-l { display: flex; flex-direction: column; gap: 2px; }
.flow-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--text-mute);
  font-weight: 600;
  text-transform: uppercase;
}
.flow-title {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.2px;
}
.flow-legend { display: flex; gap: var(--s-3); padding-top: 2px; }
.flow-leg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text-mute);
  font-weight: 600;
}
.flow-leg i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.flow-leg--fii  i { background: #6ea8ff; box-shadow: 0 0 6px #6ea8ff88; }
.flow-leg--dii  i { background: #ffb454; box-shadow: 0 0 6px #ffb45488; }
.flow-leg--bull i { background: #22c55e; box-shadow: 0 0 6px #22c55e88; }
.flow-leg--bear i { background: #ef4444; box-shadow: 0 0 6px #ef444488; }

/* ── Card carousel (FII/DII ↔ OI Delta) ─────────────────────────────────── */
.card-carousel { position: relative; }
.card-carousel .cc-slide { transition: opacity .45s ease; }
/* slide 2+ stack over slide 1; slide 1 keeps normal flow so the cell keeps height */
.card-carousel .cc-slide:not(:first-child) { position: absolute; inset: 0; }
.card-carousel .cc-slide:not(.is-active)   { opacity: 0; pointer-events: none; }
.card-carousel .cc-slide.is-active         { opacity: 1; pointer-events: auto; }
.cc-dots {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 5px; z-index: 2;
}
.cc-dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--border-strong, #334155);
}
.cc-dots i.is-on { background: #94a3b8; }

/* light-mode: dot colors follow the token system */
.light-theme .cc-dots i        { background: rgba(100,116,139,.35); }
.light-theme .cc-dots i.is-on  { background: #64748b; }

/* ── Spot + OI Walls card carousel ──────────────────────────────────────────
   The generic .cc-slide:not(:first-child) { position: absolute } rule doesn't
   work here because .chart-fs-bar and .nd-head sit before the slides, making
   neither slide the :first-child. Override with a simple display toggle. */
#chartPanelR.card-carousel .cc-slide {
  position: static;   /* cancel the generic position:absolute from .card-carousel .cc-slide:not(:first-child) */
  display: none;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  height: 528px;   /* single source of truth so Spot+OI Walls and OI Delta render the same card height */
}
#chartPanelR.card-carousel .cc-slide.is-active {
  display: flex;
}

/* Slide 0 (Spot + OI Walls) — fill the slide instead of carrying its own fixed
   px height, so it can never drift from slide 1's height above. */
#chartPanelR .cc-slide .chart-container {
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  flex: 1 1 auto !important;
}

/* OI Delta slide — flow-modern fills the slide height */
#chartPanelR #oiDeltaCard .flow-modern { height: 100%; }

/* Hide timeframe pills when OI Delta slide is showing */
#chartPanelR:has(#oiDeltaCard.is-active) .sw-spot-pills { display: none; }

/* ── View-selector tabs (live in .nd-head-l, replace the card title) ─────── */
.sw-view-tabs {
  display: flex;
  gap: 3px;
}
.sw-view-tab {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 9px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.sw-view-tab.is-active {
  background: rgba(38,166,154,.18);
  border-color: #26a69a;
  color: #26a69a;
}
.sw-view-tab:not(.is-active):hover {
  border-color: var(--text-secondary);
  color: var(--text-primary);
}
.light-theme .sw-view-tab.is-active {
  background: rgba(38,166,154,.12);
  color: #1a9e96;
  border-color: #1a9e96;
}

.flow-canvas-wrap { position: relative; flex: 1 1 auto; min-height: 130px; }
.flow-canvas-wrap canvas { display: block; width: 100%; height: 100%; }
.flow-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-mute); letter-spacing: 1px;
}
.flow-tip {
  position: absolute; top: 2px;
  pointer-events: none; opacity: 0;
  transition: opacity .12s ease;
  background: rgba(10,14,22,.94);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 9px;
  min-width: 124px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  z-index: 5;
}
.flow-tip .ft-date {
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 1px;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-bottom: 5px;
}
.flow-tip .ft-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 1px 0;
  font-family: var(--font-mono); font-size: 11px;
}
.flow-tip .ft-row span { display: inline-flex; align-items: center; gap: 5px; color: #94a3b8; }
.flow-tip .ft-row i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.flow-tip .ft-row b { font-weight: 700; }
.flow-tip .ft-net { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); }

.flow-footer {
  display: flex; align-items: center; gap: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
}
.flow-foot-cell { display: flex; flex-direction: column; gap: 2px; }
.flow-foot-k {
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 1.2px;
  color: var(--text-mute); text-transform: uppercase;
}
.flow-foot-v {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 700;
  color: var(--text-primary);
}
@media (max-width: 768px) {
  .flow-foot-v { font-size: 10px !important; }
  .flow-foot-k { font-size: 8px !important; letter-spacing: 0.6px !important; }
  .flow-foot-date { display: none !important; }
  .flow-footer { justify-content: center !important; gap: var(--s-5) !important; width: 100% !important; }
  .flow-foot-cell { align-items: center !important; }
  .flow-foot-spacer { display: none !important; }
}
.flow-foot-spacer { flex: 1 1 auto; }
.flow-foot-date {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .5px;
  color: var(--text-mute);
}

/* Top-centered inside the chart plot area — the emptiest, most legible spot
   on the card — rather than the footer strip, so it reads as the headline
   stat instead of a footnote. pointer-events:none keeps canvas hover/
   tooltip interaction working underneath it. */
.flow-bench {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding-top: 6px;
  gap: 3px;
  pointer-events: none;
  text-align: center;
}
.flow-bench:has(.flow-bench-pct:empty) { display: none; }
.flow-bench-pct {
  font-family: var(--font-mono);
  font-size: 22px; font-weight: 700; letter-spacing: .3px;
  color: var(--text-primary);
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.flow-bench--extreme .flow-bench-pct { color: var(--amber); }
.flow-bench-detail {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .3px;
  color: var(--text-mute);
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
@media (max-width: 768px) {
  .flow-bench-pct { font-size: 17px !important; }
  .flow-bench-detail { font-size: 9px !important; padding: 0 12px; }
}

/* PCR strip */

/* IV section */

.c2-iv-skew {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}

.c2-iv-skew-track {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.04);
  border-radius: 2px;
  position: relative;
}
.c2-iv-skew-mid {
  position: absolute; left: 50%; top: -2px; bottom: -2px;
  width: 1px;
  background: rgba(255,255,255,0.10);
}
.c2-iv-skew-dot {
  position: absolute; top: 50%;
  width: 10px; height: 10px;
  background: var(--amber);
  border: 2px solid var(--bg-card);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 6px rgba(245,166,35,0.5);
}

/* Cost & Flow */

/* ============================================================================
   IMPORTANT TIMELINE — world-class redesign
   ============================================================================ */
.card-timeline {
  padding: var(--s-5) !important;
  display: flex !important;
  flex-direction: column !important;
}

@keyframes tlLivePulse {
  0%,100% { transform: scale(1);   opacity: 1; }
  50%     { transform: scale(0.6); opacity: 0.5; }
}

/* ── Timeline feed ────────────────────────────────────────────── */

/* Each event row: time pin (left) · axis rail (center) · event card (right) */

/* Axis rail with dot */

/* "Latest" pulsing ring on the topmost event */

@keyframes tlPulse {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(3.5); opacity: 0;   }
}

/* Event card — single-line layout for high-density feed */

/* Latest row gets a small "NOW" tag on the pin */

/* ── Footer ─────────────────────────────────────────────────── */

/* Hide legacy timeline header styles (replaced by .tl-header) */

/* ============================================================================
   CARD 3 — COCKPIT (BEHAVIORAL · WARM) — world-class redesign
   ============================================================================ */
.card-signals {
  background:
    linear-gradient(180deg, var(--bg-card-warm) 0%, #14121A 100%) !important;
  border: 1px solid var(--border-warm) !important;
  padding: var(--s-5) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--s-3) !important;
  position: relative;
  overflow: hidden;
}

/* Disable the prominent disclaimer above the state body */

/* Disable the legacy state-driven glow — replaced by ck-ai-bg overlay */

/* ───────────────────────────────────────────────────────────────
   ML scanning background overlay — neural net + scan + particles
   ─────────────────────────────────────────────────────────────── */
.ck-ai-bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}
.card-signals > :not(.ck-ai-bg) { position: relative; z-index: 1; }

/* Layer 1 — telemetry dot grid — HIDDEN per request */
.ck-ai-grid { display: none; }

/* Layer 2 — neural network nodes only (dashed lines + pulse hidden) */
.ck-ai-net {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0.55;
}
.ck-ai-net-links, .ck-ai-pulse { display: none; }
.ck-node {
  filter: drop-shadow(0 0 6px rgba(0,255,136,0.6));
  transform-origin: center;
}
.ck-node--a { animation: ckNodeBlink 2.4s ease-in-out infinite; }
.ck-node--b { animation: ckNodeBlink 3.1s ease-in-out infinite 0.4s; }
.ck-node--c { animation: ckNodeBlink 2.8s ease-in-out infinite 0.9s; }
.ck-node--d { animation: ckNodeBlink 3.6s ease-in-out infinite 1.4s; }
.ck-node--e { animation: ckNodeBlink 2.2s ease-in-out infinite 0.6s; }
.ck-node--f { animation: ckNodeBlink 3.3s ease-in-out infinite 1.1s; }
@keyframes ckNodeBlink {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 0.30; transform: scale(0.7); }
}
/* Bright pulse line that "fires" across one connection */
.ck-ai-pulse {
  stroke-dasharray: 8 200;
  stroke-dashoffset: 0;
  animation: ckPulseFire 3s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(0,255,136,0.9));
}
@keyframes ckPulseFire {
  0%   { stroke-dashoffset:  0;  opacity: 0; }
  10%  { opacity: 0.9; }
  100% { stroke-dashoffset: -208; opacity: 0; }
}

/* Layer 3 — grey scanline drifting top → bottom of the full card */
.ck-ai-scanline {
  position: absolute;
  left: -10%; right: -10%;
  top: 0;
  height: 60px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255,255,255,0.025) 40%,
    rgba(255,255,255,0.06)  50%,
    rgba(255,255,255,0.025) 60%,
    transparent 100%);
  filter: blur(1.5px);
  animation: ckScanline 9s linear infinite;
}
@keyframes ckScanline {
  0%   { transform: translateY(-80px); }
  100% { transform: translateY(calc(100% + 20px));  }
}

/* Layer 4 — data particles streaming right */
.ck-ai-particles {
  position: absolute; inset: 0;
}
.ck-particle {
  position: absolute;
  top: var(--y); left: -10px;
  width: 24px; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
  filter: blur(0.4px);
  opacity: 0.45;
  animation: ckParticle 5.5s linear infinite;
  animation-delay: var(--d);
}
@keyframes ckParticle {
  0%   { transform: translateX(0)       scaleX(1);   opacity: 0; }
  10%  { opacity: 0.55; }
  90%  { opacity: 0.55; }
  100% { transform: translateX(110vw)   scaleX(1.4); opacity: 0; }
}

/* Layer 5 — bottom-right frequency bars (audio-equalizer style) */
.ck-ai-bars {
  position: absolute;
  right: 14px; bottom: 56px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 32px;
  opacity: 0.45;
}
.ck-ai-bars span {
  width: 2px;
  height: var(--h);
  background: linear-gradient(180deg, var(--amber), rgba(245,166,35,0.2));
  border-radius: 1px;
  animation: ckBarPulse 1.4s ease-in-out infinite;
  animation-delay: var(--d);
}
@keyframes ckBarPulse {
  0%,100% { transform: scaleY(0.3); }
  50%     { transform: scaleY(1);   }
}

/* ── Header ─────────────────────────────────────────────────── */
.ck-header {
  padding-bottom: var(--s-2) !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--s-3);
}

@keyframes ckBrandSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* State chip — moved into header, replaces the removed system module */

@keyframes ckSysPulse {
  0%,100% { transform: scale(1);   opacity: 1; }
  50%     { transform: scale(0.7); opacity: 0.4; }
}

/* "Analyzing…" indicator on the right */

@keyframes ckAnBlip {
  0%   { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(2.6); opacity: 0;   }
}

@keyframes ckAnDot {
  0%, 100% { opacity: 0.25; transform: translateY(0);   }
  50%      { opacity: 1;    transform: translateY(-1.5px); }
}

@keyframes ckLiveBlink { 0%,100%{ opacity: 1 } 50%{ opacity: 0.35 } }

/* ── State body + Trail — merged section, no module shells ──── */
.ck-state-body, #cockpitStateBody {
  display: flex; flex-direction: column;
  gap: var(--s-3);
  padding: 0;
}

.ck-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.8px;
  color: var(--text-mute);
  text-transform: uppercase;
  font-weight: 600;
}

.ck-headline {
  font-family: var(--font-sans);
  display: flex; align-items: baseline; gap: 8px;
}

@keyframes ckNextSpin { from { transform: rotate(0); } to { transform: rotate(-360deg); } }

/* Trail — flows directly below review, separated by a soft divider */

/* Footer rail */

/* SEBI single footer */

/* Equal-height chart panels — strict symmetry across the dual-chart-grid */

/* Toolbar row — fixed height so left & right line up regardless of pill count */

/* Hide the fullscreen bar in normal (gridded) state */

/* Fullscreen state — defeat the dual-chart-grid sizing locks and reveal the
   close bar. Specificity must beat .dual-chart-grid > .card-dark .chart-container. */

/* Footer subtitle — compact strip pinned to the bottom of the card. The
   border-top + padding mirrors the OI Flow legend on the left card so both
   footers have the same visual weight (and the cards stay symmetric). */

.chart-controls-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap;
  margin-bottom: var(--s-3);
}

/* Chart tabs */
.chart-tab {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-dim) !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 5px 12px !important;
  border-radius: var(--r-sm) !important;
  letter-spacing: 0.2px !important;
}
.chart-tab:hover { border-color: var(--border-strong) !important; color: var(--text-secondary) !important; }
.chart-tab.active {
  background: rgba(79,172,254,0.10) !important;
  border-color: rgba(79,172,254,0.30) !important;
  color: var(--blue) !important;
  font-weight: 600 !important;
}

.chart-ctrl-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
.chart-win-lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.6px;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-right: 4px;
}

/* Window pills — smaller, tighter for the chart panel toolbar */
.oiflow-pill {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text-dim) !important;
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
  letter-spacing: 0.2px !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
}
.oiflow-pill:hover  { border-color: var(--border-strong) !important; color: var(--text-secondary) !important; background: transparent !important; }
.oiflow-pill.active {
  background: rgba(79,172,254,0.10) !important;
  border-color: rgba(79,172,254,0.35) !important;
  color: var(--blue) !important;
}

#oiFlowTimeBadge {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  background: rgba(245,166,35,0.08) !important;
  border: 1px solid rgba(245,166,35,0.20) !important;
  color: var(--amber) !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  letter-spacing: 0.5px;
  display: inline-block !important;
}

.btn, .enlarge-btn {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text-dim) !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  padding: 4px 10px !important;
  border-radius: var(--r-sm) !important;
  min-height: 28px !important;
}
.btn:hover, .enlarge-btn:hover { border-color: var(--border-strong) !important; color: var(--text-primary) !important; background: rgba(255,255,255,0.03) !important; }

.chart-container {
  background: rgba(0,0,0,0.20);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-2);
  min-height: 360px;
}
.bchart { width: 100% !important; height: 360px !important; display: block; }

/* ============================================================================
   OPTION CHAIN TABLE
   ============================================================================ */

table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
}
thead th {
  font-family: var(--font-mono);
  font-size: 10px !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase;
  font-weight: 600 !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--border);
  color: var(--text-mute) !important;
}
tbody td {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  color: var(--text-primary);
}

/* ============================================================================
   Misc: hide noisy bootstrap elements not central to design
   ============================================================================ */
.error-bar, .warn-bar { display: none !important; }

/* Section dividers between chart row and table */
.card-dark + .card-dark { margin-top: var(--s-4) !important; }

/* Page-level chrome */
body > .card-dark {
  margin: 0 var(--s-5) var(--s-5) !important;
}

/* ============================================================================
   RESPONSIVE — charts collapse on narrow viewports
   ============================================================================ */
@media (max-width: 1100px) {
  
}
@media (max-width: 860px) {
  .c2-split-body { grid-template-columns: 1fr !important; }
  
}

/* ============================================================================
   FOOTER
   ============================================================================ */
.dx-footer {
  background: #07090E;
  border-top: 1px solid var(--border);
  padding: var(--s-6) var(--s-5) var(--s-4);
  margin-top: var(--s-6);
}

@media (max-width: 900px) {
  
}

/* Social links */

/* Bottom strip */

/* ─────────────────────────────────────────────────────────────────
   MOBILE — Row 2 becomes a clean 2-column card grid
   Row 1: Brand+buttons (full width)
   Row 2: NIFTY | Sparkline
   Row 3: VIX   | USD/INR
   Row 4: DXY   | INST FLOW
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .dhan-ticker {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: auto !important;
    gap: 8px !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 8px !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
  }
  /* Hide dividers */
  .dhan-ticker > .dt-div { display: none !important; }
  /* Brand spans full width on its own row */
  .dhan-ticker > .dt-seg.dt-brand-slot {
    grid-column: 1 / -1 !important;
  }
  /* All other segments flow into the 2-col grid automatically */
  /* Reset desktop fixed widths/flex on ALL segments so grid governs */
  .dhan-ticker > .dt-seg,
  .dhan-ticker > .dt-seg.dt-brand-slot,
  .dhan-ticker > .dt-seg.dt-sparkline-seg,
  .dhan-ticker > .dt-seg.dt-spot,
  .dhan-ticker > .dt-seg.dt-vix,
  .dhan-ticker > .dt-seg.dt-macro,
  .dhan-ticker > .dt-seg.dt-flow {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: initial !important;
    padding: 8px 10px !important;
    height: auto !important;
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
  }
  /* Brand card — visually distinct, no extra card chrome inside */
  .dhan-ticker > .dt-seg.dt-brand-slot {
    background: transparent !important;
    border: none !important;
    padding: 4px 0 !important;
  }
  /* Sparkline: override absolute-positioned wrap so it fits the cell naturally */
  .dhan-ticker > .dt-sparkline-seg {
    position: relative !important;
    min-height: 64px !important;
  }
  .dhan-ticker .dt-sparkline-seg .dt-sparkline-wrap {
    position: absolute !important;
    top: 50% !important; left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100% - 16px) !important;
    max-width: none !important;
    height: 50px !important;
  }
  .dhan-ticker .dt-sparkline-seg #headerSparkline {
    max-width: none !important;
    max-height: none !important;
  }
  /* Readable mobile font sizes */
  .dhan-ticker .dt-spot-val,
  .dhan-ticker .dt-vix-val,
  .dhan-ticker .dt-macro-val {
    font-size: 18px !important;
    line-height: 1.1 !important;
  }
  .dhan-ticker .dt-spot-change,
  .dhan-ticker .dt-vix-change,
  .dhan-ticker .dt-macro-chg {
    font-size: 10px !important;
  }
  .dhan-ticker .dt-seg-label {
    font-size: 9px !important;
    letter-spacing: 1px !important;
  }
  .dhan-ticker .dt-flow-sub { font-size: 10px !important; white-space: nowrap !important; }
  .dhan-ticker .dt-flow-net { font-size: 14px !important; }
  .dhan-ticker .dt-flow-body { gap: 6px !important; flex-wrap: wrap !important; }
}

/* ============================================================================
   CHARTS ROW — fresh 2-column split (replaces the legacy .dual-chart-grid).
   Chart modules and canvas IDs are locked in (oiFlowChart, spotChart,
   callPutChart). This block only defines the outer split + card sizing, and
   explicitly zeroes margins so the two cards align perfectly. Chart height
   is +15% vs the previous build (380px → 440px).
   ============================================================================ */
.charts-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-4);
  margin: 0 var(--s-5) var(--s-4);
  align-items: stretch;
}

/* Kill the global `.card-dark + .card-dark { margin-top }` that was offsetting
   the right card downward in the old grid. Cards inside .charts-row have NO
   margin — the grid handles spacing via `gap`. */
.charts-row > .card-dark,
.charts-row > .card-dark + .card-dark {
  margin: 0 !important;
}

.charts-row > .chart-card {
  display: flex;
  flex-direction: column;
  padding: var(--s-4);
  box-sizing: border-box;
  min-width: 0;
  border-radius: var(--r-lg);
}

/* Toolbar — identical structure on both cards */
.charts-row > .chart-card > .chart-controls-row {
  min-height: 36px !important;
  margin: 0 0 var(--s-3) 0 !important;
  /* 14px horizontal inset matches the Nifty card's .nd-head, so the title lines
     up. (nd-card forces card padding:0; the toolbar carries its own inset.) */
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

/* Chart area — taller for better visibility (was 440px → 528px = +20%).
   Descendant selector (not >) so it works when .chart-container is inside
   a .cc-slide wrapper (e.g. the Spot + OI Walls carousel slide). */
.charts-row > .chart-card .chart-container {
  height: 528px !important;
  min-height: 528px !important;
  max-height: 528px !important;
  flex: 0 0 528px !important;
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 4px;
}
.charts-row > .chart-card .chart-container > canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Hide the fullscreen close-bar in normal grid state */
.charts-row > .chart-card > .chart-fs-bar { display: none !important; }

/* Fullscreen — chart fills the panel, close-bar shows */

/* Maximize (nd-fs) — self-contained full-viewport overlay, same as the Nifty 50
   card (modules/charts/chartEngine.js toggleMaxPanel). The card goes fixed/inset:0
   via `.nd-card.nd-fs`; here we just let the chart area grow to fill it (the grid
   state pins it to 528px). The ✕ Close fs-bar stays hidden — closing is the ⛶→✕
   toggle / ESC, matching the Nifty chart. */
.charts-row > .chart-card.nd-fs .chart-container {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 1 1 auto !important;
}

/* Theme match (mirrors the Nifty 50 nd-card):
   • Title tab → plain grey uppercase label like .nd-title — no button chrome,
     no blue active fill (kills the old rgba(79,172,254) tab background).
   • Timeframe pills → teal active fill like .nd-pill.active. */
.charts-row > .chart-card .chart-tab,
.charts-row > .chart-card .chart-tab.active {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--text-secondary) !important;
  cursor: default !important;
}
.charts-row > .chart-card .oiflow-pill.active {
  background: #26a69a !important;
  border-color: #26a69a !important;
  color: #0a0f1e !important;
  font-weight: 700 !important;
}

/* Unified footer — both #oiFlowLegend and #chartSubtitleR use .chart-footer,
   so their visual weight is symmetric by construction.
   Descendant selector so it matches when footer is inside a .cc-slide. */
.charts-row > .chart-card .chart-footer {
  margin: auto 0 0 0 !important;
  /* match .nd-foot's 14px inset so the footer aligns with the toolbar above */
  padding: 6px 14px 0 14px !important;
  border-top: 1px solid var(--border);
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 9px;
  letter-spacing: .4px;
  color: var(--muted);
  line-height: 1.2;
  opacity: .85;
}
.charts-row > .chart-card .chart-footer .chart-footer-title {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  opacity: .9;
}

/* ============================================================================
   CHARTS ROW — MOBILE/NARROW VIEWPORT (≤980px)
   Fresh rebuild. The chart toolbar must stay a single horizontal row on
   phones — same shape as desktop, just compacted. This block fully owns
   the toolbar on mobile and overrides:
     • style.css:2016  `.chart-controls-row { flex-direction: column }`
     • style.css:2037  `.chart-tab,.oiflow-pill { min-height: 44px }`
     • any other narrow-viewport rules that try to stack the toolbar.
   ============================================================================ */
@media (max-width: 980px) {

  /* Stack the two cards vertically on narrow viewports */
  .charts-row {
    grid-template-columns: 1fr;
    margin: 0 var(--s-3) var(--s-3);
    gap: var(--s-3);
  }

  /* Cards keep their flex-column structure and zero margins (handled in
     the desktop block too — re-stated here for safety). */
  .charts-row > .chart-card {
    padding: var(--s-3);
    margin: 0 !important;
  }

  /* TOOLBAR — single horizontal row with horizontal scroll fallback.
     Overrides global `flex-direction: column` from style.css. */
  .charts-row > .chart-card > .chart-controls-row {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    gap: 4px !important;
    /* keep the 14px title inset on mobile too (2px bottom = scroll gutter) */
    padding: 0 14px 2px 14px !important;
    margin: 0 0 var(--s-2) 0 !important;
    min-height: 32px !important;
  }
  .charts-row > .chart-card > .chart-controls-row::-webkit-scrollbar {
    height: 3px;
  }
  .charts-row > .chart-card > .chart-controls-row::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
  }

  /* Every toolbar child stays in the line at natural width — no shrinking,
     no wrapping. */
  .charts-row > .chart-card > .chart-controls-row > * {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
  }

  /* Defeat the global 44px touch-target rule (style.css:2037). Buttons
     here are deliberately compact so the whole toolbar fits the viewport
     without horizontal scroll. */
  .charts-row > .chart-card .chart-tab,
  .charts-row > .chart-card .oiflow-pill,
  .charts-row > .chart-card .chart-controls-row .btn,
  .charts-row > .chart-card .chart-controls-row .enlarge-btn {
    min-height: 0 !important;
    height: auto !important;
    line-height: 1.1 !important;
  }
  /* Tabs stay slightly larger — they're the primary navigation */
  .charts-row > .chart-card .chart-tab {
    padding: 4px 8px !important;
    font-size: 10px !important;
  }
  /* Pills are tiny on mobile — fit all 8 in one row */
  .charts-row > .chart-card .oiflow-pill {
    padding: 2px 5px !important;
    font-size: 9px !important;
    min-width: 0 !important;
    letter-spacing: 0 !important;
    border-radius: 3px !important;
  }
  .charts-row > .chart-card .chart-controls-row .btn {
    padding: 3px 7px !important;
    font-size: 10px !important;
  }
  
  .charts-row > .chart-card .chart-win-lbl {
    font-size: 8px;
    white-space: nowrap;
    margin: 0 3px 0 2px;
    letter-spacing: .4px;
  }
  .charts-row > .chart-card .chart-ctrl-sep {
    height: 14px;
    margin: 0 2px;
  }
  
  .charts-row > .chart-card #oiFlowTimeBadge {
    font-size: 8px !important;
    padding: 1px 5px !important;
    white-space: nowrap;
  }

  /* Footer stays centered; legend items keep their compact size */
  .charts-row > .chart-card .chart-footer {
    gap: 10px;
    padding-top: 5px !important;
  }

  /* OI Flow toolbar — 2 rows:
     Row 1: NIFTY OI FLOW ················ ⛶
     Row 2: 3m  10m  15m  30m  1h  2h  3h  Full
     ::after (order 0, 100% width, 0 height) is the last order-0 flex item —
     it occupies its own invisible line and forces pills (order 1) to row 2. */
  #chartPanelL > .chart-controls-row {
    flex-wrap: wrap !important;
    overflow: visible !important;
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 6px !important;
    align-items: center !important;
    row-gap: 6px !important;
  }
  #chartPanelL > .chart-controls-row::after {
    content: '';
    flex: 0 0 100%;
    height: 0;
    /* order defaults to 0 — sits after all order-0 DOM items,
       100% width forces a line break before order-1 pills */
  }
  #chartPanelL .chart-ctrl-sep    { display: none !important; }
  #chartPanelL .chart-win-lbl     { display: none !important; }
  #chartPanelL .chart-ctrl-spacer { flex: 1 1 auto !important; }
  #chartPanelL .oiflow-pill       { order: 1; }
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  DISCIPLINEX — WORLD-CLASS REDESIGN OVERRIDE                             ║
   ║  Confessional Booth × Live Radar × Ledger Close-Out                      ║
   ║                                                                          ║
   ║  Three skins toggle via body[data-skin]:                                 ║
   ║    obsidian  (default) — pure vault, single warm pin                     ║
   ║    ledger              — parchment-on-coal, archival                     ║
   ║    terminal            — quant trading floor, electric                   ║
   ║                                                                          ║
   ║  Locked surfaces (chrome only, no inner content change):                 ║
   ║    .prox-card · .card-analytics · .card-timeline · .chart-card           ║
   ║    .table-wrap (option chain)                                            ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── google fonts: pull in Newsreader for engraved monastery accents
        (used sparingly — only on tier name + tombstone-style text).
        Falls back to DM Sans on slow networks. ───────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@1,6..72,400;1,6..72,500&display=swap');

/* ─────────────────────────────────────────────────────────────────────────
   1.  SKIN TOKENS
   Defaults = obsidian. body[data-skin="ledger|terminal"] overrides.
   ───────────────────────────────────────────────────────────────────────── */
:root,
body[data-skin="obsidian"] {
  --rd-bg:           #050609;
  --rd-bg-1:         #0A0C13;
  --rd-bg-2:         #0E1119;
  --rd-bg-warm:      #110D08;
  --rd-bg-warm-2:    #0B0805;
  --rd-bg-inset:     #07080C;

  --rd-rule:         rgba(255,255,255,0.04);
  --rd-border:       rgba(255,255,255,0.06);
  --rd-border-s:     rgba(255,255,255,0.10);
  --rd-border-warm:  rgba(201,163,95,0.12);
  --rd-hair:         rgba(255,255,255,0.025);

  --rd-text:         #ECEEF3;
  --rd-text-2:       #BBC2D0;
  --rd-text-3:       #7B8497;
  --rd-text-mute:    #525A6E;
  --rd-text-faint:   #2D3340;

  --rd-warm:         #C9A35F;
  --rd-warm-soft:    #8A6F37;
  --rd-warm-glow:    rgba(201,163,95,0.45);

  --rd-green:        #00FF88;
  --rd-green-soft:   #00C46A;
  --rd-cyan:         #4FACFE;
  --rd-cyan-soft:    #2D7EC0;
  --rd-red:          #FF4560;
  --rd-amber:        #F5A623;
  --rd-purple:       #9B7BEA;

  --rd-font:   'DM Sans', system-ui, -apple-system, sans-serif;
  --rd-mono:   'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --rd-serif:  'Newsreader', 'DM Sans', Georgia, serif;
}

body[data-skin="ledger"] {
  --rd-bg:           #08070A;
  --rd-bg-1:         #0F0D0A;
  --rd-bg-2:         #12100C;
  --rd-bg-warm:      #130E08;
  --rd-bg-warm-2:    #0C0805;
  --rd-bg-inset:     #09080B;

  --rd-rule:         rgba(212,179,135,0.06);
  --rd-border:       rgba(212,179,135,0.08);
  --rd-border-s:     rgba(212,179,135,0.16);
  --rd-border-warm:  rgba(212,179,135,0.20);
  --rd-hair:         rgba(212,179,135,0.04);

  --rd-text:         #ECE4D2;
  --rd-text-2:       #C6BCA4;
  --rd-text-3:       #847A65;
  --rd-text-mute:    #5A5444;
  --rd-text-faint:   #2F2C26;

  --rd-warm:         #D4B387;
  --rd-warm-soft:    #8F7549;
  --rd-warm-glow:    rgba(212,179,135,0.55);
}

body[data-skin="terminal"] {
  --rd-bg:           #020817;
  --rd-bg-1:         #0F172A;
  --rd-bg-2:         #0A0F1E;
  --rd-bg-warm:      #161018;
  --rd-bg-warm-2:    #0E0A12;
  --rd-bg-inset:     #050D18;

  --rd-rule:         rgba(148,163,184,0.06);
  --rd-border:       rgba(148,163,184,0.10);
  --rd-border-s:     rgba(148,163,184,0.22);
  --rd-border-warm:  rgba(245,166,35,0.20);
  --rd-hair:         rgba(148,163,184,0.05);

  --rd-text:         #F1F5F9;
  --rd-text-2:       #CBD5E1;
  --rd-text-3:       #94A3B8;
  --rd-text-mute:    #64748B;
  --rd-text-faint:   #334155;

  --rd-warm:         #F5A623;
  --rd-warm-soft:    #B27A19;
  --rd-warm-glow:    rgba(245,166,35,0.55);
}

/* ── alias the existing project tokens onto our scale so a single skin flip
       cascades through the entire app surface without selector explosion ── */
:root {
  --bg-base:       var(--rd-bg);
  --bg-card:       var(--rd-bg-1);
  --bg-card-2:     var(--rd-bg-2);
  --bg-card-warm:  var(--rd-bg-warm);
  --bg-inset:      var(--rd-bg-inset);
  --border:        var(--rd-border);
  --border-strong: var(--rd-border-s);
  --border-warm:   var(--rd-border-warm);
  --text:          var(--rd-text);
  --text-primary:  var(--rd-text);
  --text-secondary:var(--rd-text-2);
  --text-dim:      var(--rd-text-3);
  --text-mute:     var(--rd-text-mute);
  --muted:         var(--rd-text-3);
  --dim:           var(--rd-text-mute);
}

/* ─────────────────────────────────────────────────────────────────────────
   2.  BASE — body, scrollbars, focus rings
   ───────────────────────────────────────────────────────────────────────── */
html, body {
  background: var(--rd-bg) !important;
  color: var(--rd-text) !important;
  font-family: var(--rd-font);
  font-feature-settings: 'ss01','cv11','tnum' 1, 'zero' 1;
}

/* gentle vignette + scanline texture on the page — feels like a CRT vault */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9998;
  background:
    radial-gradient(120% 80% at 50% 0%, transparent 0%, rgba(0,0,0,0.45) 100%),
    repeating-linear-gradient(180deg, transparent 0 2px, rgba(255,255,255,0.012) 2px 3px);
  mix-blend-mode: overlay;
  opacity: 0.6;
}

::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--rd-border-s); border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }

/* ─────────────────────────────────────────────────────────────────────────
   3.  DATA DOTS STRIP — keep the packet animation, calm the chrome
   ───────────────────────────────────────────────────────────────────────── */
#dataDots {
  height: 2px !important;
  background: transparent !important;
  border-bottom: 1px solid var(--rd-border) !important;
  opacity: 0.7;
}

#dataDots::after {
  background: linear-gradient(90deg, transparent 0%, var(--rd-warm-glow) 40%, var(--rd-warm) 80%) !important;
  box-shadow: 0 0 6px var(--rd-warm-glow), 0 0 12px var(--rd-warm-glow) !important;
}
body[data-skin="terminal"] .dot-received,
body[data-skin="terminal"] #dataDots::after { background: var(--rd-green) !important; box-shadow: 0 0 6px rgba(0,255,136,0.5) !important; }

/* ─────────────────────────────────────────────────────────────────────────
   4.  HEADER — taller, sharper hierarchy. Row1 44px, Row2 84px.
   ───────────────────────────────────────────────────────────────────────── */
.header {
  background:
    linear-gradient(180deg, #0B0D14 0%, var(--rd-bg) 70%) !important;
  border-bottom: 1px solid var(--rd-border) !important;
  position: relative;
}
.header::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--rd-warm-glow) 30%,
    var(--rd-warm-glow) 70%,
    transparent 100%);
  opacity: 0.25;
}
body[data-skin="terminal"] .header::after {
  background: linear-gradient(90deg, transparent, rgba(0,255,136,0.4) 50%, transparent);
}

/* ── Row 1 — top nav ── */
.dhan-nav {
  grid-template-columns: auto 1fr auto !important;
  padding: 0 22px !important;
  height: 44px !important;
  background: rgba(0,0,0,0.30) !important;
  border-bottom: 1px solid var(--rd-rule) !important;
}
.dn-temporal { gap: 14px !important; }
.dn-date {
  font-family: var(--rd-mono);
  font-size: 11px;
  color: var(--rd-text-3);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 500;
}
.dt-hh, .dt-mm {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--rd-text) !important;
  letter-spacing: 0 !important;
}
.dt-ss {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--rd-warm) !important;
  text-shadow: 0 0 8px var(--rd-warm-glow);
  letter-spacing: 0 !important;
}
.dt-colon  { color: var(--rd-text-mute) !important; padding: 0 2px !important; animation: rdColon 1s steps(2) infinite; }
@keyframes rdColon { 0%,49%{opacity:1} 50%,100%{opacity:0.25} }
.dt-ist    { color: var(--rd-text-mute) !important; font-size: 9px !important; letter-spacing: 1.6px !important; margin-left: 8px !important; }
.dn-sep    { color: var(--rd-text-faint) !important; opacity: 0.6 !important; }

/* Date stacked over time (2026-07-17) — narrows .dn-temporal so the voice
   pill has real room to viewport-center (see the .dn-center rule near
   #vxEdge below). .dn-temporal is already flex + align-items:center, so
   .dt-stack centers vertically for free. */
.dt-stack { display: flex; flex-direction: column; justify-content: center; line-height: 1.15; gap: 1px; }
.dt-stack .dn-date { font-size: 10px !important; opacity: .55; letter-spacing: .8px !important; }

.badge {
  font-family: var(--rd-mono) !important;
  font-size: 9px !important;
  letter-spacing: 1.8px !important;
  color: var(--rd-text-3) !important;
  background: transparent !important;
  border: 1px solid var(--rd-border) !important;
  padding: 3px 9px !important;
  border-radius: 2px !important;
  font-weight: 600 !important;
}
/* SOS placeholder slot — centered nav cell becomes the SOS launchpad */
.dn-center {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
#sosLockBtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--rd-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--rd-red);
  background:
    linear-gradient(180deg, rgba(255,69,96,0.10), rgba(255,69,96,0.04));
  border: 1px solid rgba(255,69,96,0.35);
  border-radius: 3px;
  padding: 6px 16px 6px 14px;
  cursor: pointer;
  transition: all 0.2s;
  text-shadow: 0 0 8px rgba(255,69,96,0.4);
  user-select: none;
}
#sosLockBtn::before {
  content: '';
  width: 7px; height: 7px;
  background: var(--rd-red);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255,69,96,0.7);
  animation: rdSosPulse 1.4s ease-in-out infinite;
}
#sosLockBtn::after {
  content: '';
  position: absolute; inset: -1px;
  border: 1px solid rgba(255,69,96,0.5);
  border-radius: 3px;
  pointer-events: none;
  animation: rdSosRing 2.4s ease-out infinite;
  opacity: 0;
}
#sosLockBtn:hover {
  background: linear-gradient(180deg, rgba(255,69,96,0.18), rgba(255,69,96,0.08));
  border-color: rgba(255,69,96,0.6);
  transform: translateY(-1px);
}
#sosLockBtn .sos-sub {
  font-size: 8.5px;
  letter-spacing: 1.6px;
  color: rgba(255,69,96,0.6);
  font-weight: 500;
  padding-left: 8px;
  margin-left: 6px;
  border-left: 1px solid rgba(255,69,96,0.25);
}
@keyframes rdSosPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(0.75);opacity:0.4} }
@keyframes rdSosRing  { 0%{transform:scale(1);opacity:0.6} 100%{transform:scale(1.06);opacity:0} }

/* User pill — quieter, more institutional */
.user-pill {
  background: transparent !important;
  border: 1px solid var(--rd-border) !important;
  border-radius: 2px !important;
  height: 30px !important;
  padding: 0 10px 0 2px !important;
  font-family: var(--rd-mono) !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  color: var(--rd-text-2) !important;
  font-weight: 500 !important;
}
.user-pill:hover { border-color: var(--rd-border-s) !important; background: rgba(255,255,255,0.02) !important; }
.user-avatar {
  width: 22px !important; height: 22px !important;
  background: var(--rd-bg-inset) !important;
  border-radius: 2px !important;
  font-size: 11px !important;
  color: var(--rd-text-3) !important;
}
.user-pill-chevron { color: var(--rd-text-mute) !important; font-size: 10px !important; }

#bxTierPill.bx-tier-pill {
  font-family: var(--rd-mono) !important;
  font-size: 9px !important;
  letter-spacing: 2.4px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--rd-warm) !important;
  background: transparent !important;
  border: 1px solid var(--rd-border-warm) !important;
  padding: 4px 10px !important;
  border-radius: 2px !important;
  text-shadow: 0 0 8px var(--rd-warm-glow) !important;
}

/* ── Row 2 — ticker strip, 84px, hierarchical ── */
.dhan-ticker {
  height: 84px !important;
  min-height: 84px !important;
  max-height: 84px !important;
  background: var(--rd-bg) !important;
  border-bottom: none !important;
  padding: 0 14px !important;
  position: relative;
  overflow-x: hidden !important;
  justify-content: space-between !important;
  gap: 0 !important;
}
.dhan-ticker::after {
  /* hairline rule underneath */
  content: '';
  position: absolute; left: 22px; right: 22px; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rd-rule) 20%, var(--rd-rule) 80%, transparent);
}
.dt-div {
  height: 48px !important;
  background: var(--rd-rule) !important;
  margin: 0 2px !important;
  flex-shrink: 1 !important;
}
.dt-seg {
  padding: 0 clamp(4px, 0.7vw, 12px) !important;
  gap: 3px !important;
  height: 84px !important;
  justify-content: center !important;
  align-items: flex-start !important;
  flex: 0 1 auto !important;
  min-width: min-content !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* hierarchy: tiny eyebrow → big value → small change — all fluid via clamp(min, vw, max) */
.dt-seg-label {
  font-family: var(--rd-mono) !important;
  font-size: clamp(7px, 0.62vw, 9px) !important;
  letter-spacing: clamp(0.5px, 0.15vw, 2.2px) !important;
  color: var(--rd-text-mute) !important;
  text-transform: uppercase;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap !important;
}
.dt-info-icon { color: var(--rd-text-mute) !important; opacity: 0.5; }

.dt-spot-val,
.dt-vix-val,
.dt-macro-val {
  font-family: var(--rd-mono) !important;
  font-size: clamp(10px, 1.6vw, 23px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
  line-height: 1 !important;
  color: var(--rd-text) !important;
  white-space: nowrap !important;
  overflow: visible !important;
}
.dt-vix-val   { color: var(--rd-warm) !important; text-shadow: 0 0 12px var(--rd-warm-glow); }
body[data-skin="terminal"] .dt-vix-val { color: var(--rd-amber) !important; }

.dt-spot-change, .dt-vix-change, .dt-macro-chg {
  font-family: var(--rd-mono) !important;
  font-size: clamp(7px, 0.65vw, 9.5px) !important;
  letter-spacing: 0.3px !important;
  color: var(--rd-text-3) !important;
  white-space: nowrap !important;
}

/* Brand cell — taller logo, refined wordmark */
.dt-brand-slot {
  padding: 0 12px 0 8px !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
}
.dn-brand-logo {
  height: clamp(44px, 5vw, 72px) !important;
  width: clamp(44px, 5vw, 72px) !important;
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
}
.dn-logo {
  font-family: var(--rd-font) !important;
  font-size: clamp(12px, 1.3vw, 17px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.4px !important;
  color: var(--rd-text) !important;
  text-shadow: none !important;
  display: inline-flex; align-items: baseline; gap: 8px;
  white-space: nowrap !important;
}
.dn-logo::before { content: none !important; }
.dn-logo::after { content: none; }
.dt-update-info, .dt-update-info-sub {
  font-family: var(--rd-mono) !important;
  font-size: clamp(7px, 0.66vw, 9.5px) !important;
  color: var(--rd-text-mute) !important;
  letter-spacing: 1px !important;
  white-space: nowrap !important;
}

.dt-drop-btn {
  background: transparent !important;
  border: 1px solid var(--rd-border) !important;
  color: var(--rd-text-3) !important;
  font-family: var(--rd-mono) !important;
  font-size: clamp(7px, 0.69vw, 10px) !important;
  font-weight: 600 !important;
  letter-spacing: clamp(0.4px, 0.08vw, 1.2px) !important;
  text-transform: uppercase !important;
  padding: clamp(2px, 0.28vw, 4px) clamp(5px, 0.69vw, 10px) !important;
  border-radius: 2px !important;
  min-width: clamp(50px, 6vw, 86px) !important;
}
.dt-drop-btn:hover {
  background: rgba(201,163,95,0.04) !important;
  border-color: var(--rd-border-warm) !important;
  color: var(--rd-warm) !important;
}

/* Sparkline segment — bigger frame, framed like a telemetry monitor */
.dt-sparkline-seg.dt-seg {
  flex: 1 1 0 !important;
  min-width: 80px !important;
  max-width: 165px !important;
  height: 84px !important;
}
.dhan-ticker .dt-sparkline-seg .dt-sparkline-wrap {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}
body[data-skin="terminal"] .dhan-ticker .dt-sparkline-seg .dt-sparkline-wrap {
  background: transparent !important;
}
.dhan-ticker .dt-spark-overlay .dt-session-badge {
  font-family: var(--rd-mono) !important;
  font-size: 9px !important;
  letter-spacing: 1.4px !important;
  color: var(--rd-warm) !important;
  background: rgba(11,14,23,0.92) !important;
  border: 1px solid var(--rd-border-warm) !important;
  padding: 2px 9px !important;
  border-radius: 1px !important;
}
.dhan-ticker .dt-spark-overlay .dt-bias-mini {
  background: rgba(11,14,23,0.92) !important;
  border: 1px solid var(--rd-border) !important;
  padding: 2px 9px !important;
  border-radius: 1px !important;
}

/* Flow segment — cleaner stacking */
.dt-flow {
  min-width: 0 !important;
  flex: 0 0 auto !important;
  margin-left: 0 !important;
  height: 84px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 0 clamp(4px, 0.7vw, 14px) !important;
  gap: 2px !important;
}
.dt-flow .dt-flow-body {
  display: flex !important;
  align-items: center !important;
  gap: clamp(4px, 0.55vw, 8px) !important;
}

.dt-flow-date {
  font-family: var(--rd-mono) !important;
  font-size: clamp(7px, 0.62vw, 9px) !important;
  letter-spacing: 1.2px !important;
  color: var(--rd-text-mute) !important;
  white-space: nowrap !important;
}
.dt-flow-sub {
  font-family: var(--rd-mono) !important;
  font-size: clamp(7px, 0.76vw, 11px) !important;
  letter-spacing: 0.3px !important;
  white-space: nowrap !important;
}
.dt-flow-net-val,
.dt-flow-net {
  font-family: var(--rd-mono) !important;
  font-size: clamp(10px, 1.25vw, 18px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.4px !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   4b. TICKER STRIP — mobile override (must come after the 84px redesign rules
       above; same !important specificity, last declaration wins in cascade)
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .dhan-ticker {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .dhan-ticker > .dt-seg {
    height: auto !important;
    overflow: visible !important;
  }
  .dt-sparkline-seg.dt-seg {
    height: auto !important;
    min-height: 64px !important;
  }

  /* ── Mobile card symmetry: lock every ticker tile to the same height so the
     2-col grid reads as a clean matrix. Centre all content horizontally so
     the values, labels and changes line up axially across all six cells.
     INST FLOW has more data than the others (FII / DII / NET) — split into
     two views and alternate via CSS-only animation. Cosmetic-only, no JS. ── */
  .dhan-ticker > .dt-seg.dt-spot,
  .dhan-ticker > .dt-seg.dt-vix,
  .dhan-ticker > .dt-seg.dt-macro,
  .dhan-ticker > .dt-seg.dt-flow,
  .dhan-ticker > .dt-seg.dt-sparkline-seg {
    min-height: 84px !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }
  /* Ensure inline children (labels, values, change deltas) align centrally */
  .dhan-ticker > .dt-seg.dt-spot > *,
  .dhan-ticker > .dt-seg.dt-vix > *,
  .dhan-ticker > .dt-seg.dt-macro > *,
  .dhan-ticker > .dt-seg.dt-flow > *,
  .dhan-ticker > .dt-seg.dt-flow .dt-flow-body,
  .dhan-ticker > .dt-seg.dt-flow .dt-flow-rows,
  .dhan-ticker > .dt-seg.dt-flow .dt-flow-net {
    text-align: center !important;
    justify-content: center !important;
    align-self: center !important;
  }

  /* Sparkline tile — match the chrome (background + outline + radius) of the
     other tiles so the 2-col grid reads symmetrically. The chart canvas sits
     inside an absolutely-positioned wrap, which can visually hide the cell
     border on certain skins; force the chrome explicitly here. */
  .dhan-ticker > .dt-seg.dt-sparkline-seg {
    background: rgba(255,255,255,0.02) !important;
    border: 1px solid var(--border-strong, var(--border)) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    padding: 8px 10px !important;
    position: relative !important;
  }
  body[data-skin="terminal"] .dhan-ticker > .dt-seg.dt-sparkline-seg {
    border-color: rgba(148,163,184,0.22) !important;
  }

  /* INST FLOW — vertically centred body with two stacked layers that fade
     between each other (FII+DII ↔ NET TOTAL) on a 6s loop. */
  .dhan-ticker > .dt-seg.dt-flow {
    flex-direction: column !important;
    gap: 4px !important;
  }
  .dhan-ticker > .dt-seg.dt-flow .dt-flow-body {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 42px !important;
  }
  .dhan-ticker > .dt-seg.dt-flow .dt-flow-rows,
  .dhan-ticker > .dt-seg.dt-flow .dt-flow-net {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin: 0 !important;
    will-change: opacity;
  }
  .dhan-ticker > .dt-seg.dt-flow .dt-flow-rows {
    animation: dxFlowSwapRows 6s ease-in-out infinite;
  }
  .dhan-ticker > .dt-seg.dt-flow .dt-flow-net {
    animation: dxFlowSwapNet 6s ease-in-out infinite;
  }
  @keyframes dxFlowSwapRows {
    0%, 45%   { opacity: 1; }
    50%, 95%  { opacity: 0; }
    100%      { opacity: 1; }
  }
  @keyframes dxFlowSwapNet {
    0%, 45%   { opacity: 0; }
    50%, 95%  { opacity: 1; }
    100%      { opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .dhan-ticker > .dt-seg.dt-flow .dt-flow-rows,
    .dhan-ticker > .dt-seg.dt-flow .dt-flow-net {
      animation: none !important;
    }
    .dhan-ticker > .dt-seg.dt-flow .dt-flow-net { opacity: 0 !important; }
    .dhan-ticker > .dt-seg.dt-flow .dt-flow-rows { opacity: 1 !important; }
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   5.  SEBI MARQUEE — quieter, framed like a ledger watermark
   ───────────────────────────────────────────────────────────────────────── */
.sebi-marquee-wrap {
  background: var(--rd-bg) !important;
  border-bottom: 1px solid var(--rd-rule) !important;
  padding: 7px 0 !important;
  opacity: 0.55;
  position: relative;
}
.sebi-marquee-wrap::before,
.sebi-marquee-wrap::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 80px;
  z-index: 1; pointer-events: none;
}
.sebi-marquee-wrap::before { left: 0;  background: linear-gradient(90deg, var(--rd-bg), transparent); }
.sebi-marquee-wrap::after  { right: 0; background: linear-gradient(-90deg, var(--rd-bg), transparent); }
.sebi-marquee-inner {
  font-family: var(--rd-mono) !important;
  font-size: 10px !important;
  letter-spacing: 1.4px !important;
  color: var(--rd-text-mute) !important;
  text-transform: uppercase !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   6.  TOP PAIR GRID — Cycle (warm vault) + Cockpit (cold radar)
   ───────────────────────────────────────────────────────────────────────── */
.top-pair {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 20px !important;
  margin: 22px 22px 18px !important;
  align-items: stretch !important;
}
.top-pair > .cx-today-panel {
  min-height: 435px !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   7.  STATS GRID & LOCKED-CARD OUTER SHELL
   Inner content stays as-is per brief. Only shells/borders/shadows tuned.
   ───────────────────────────────────────────────────────────────────────── */
.stats-grid {
  margin: 0 22px 18px !important;
  gap: 20px !important;
}
.stats-grid > .card,
.charts-row > .chart-card,
body > .card-dark {
  background:
    linear-gradient(180deg, var(--rd-bg-1) 0%, var(--rd-bg-2) 100%) !important;
  border: 1px solid var(--rd-border) !important;
  border-radius: 6px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.025) inset,
    0 20px 40px -20px rgba(0,0,0,0.6) !important;
  position: relative;
}
.stats-grid > .card::before,
.charts-row > .chart-card::before {
  /* corner registration marks — institutional telemetry feel */
  content: '';
  position: absolute;
  top: 6px; left: 6px;
  width: 14px; height: 14px;
  border-top: 1px solid var(--rd-border-s);
  border-left: 1px solid var(--rd-border-s);
  opacity: 0.5;
  pointer-events: none;
}
.stats-grid > .card::after,
.charts-row > .chart-card::after {
  content: '';
  position: absolute;
  bottom: 6px; right: 6px;
  width: 14px; height: 14px;
  border-bottom: 1px solid var(--rd-border-s);
  border-right: 1px solid var(--rd-border-s);
  opacity: 0.5;
  pointer-events: none;
}
body > .card-dark { box-shadow: 0 20px 40px -20px rgba(0,0,0,0.6) !important; }
.charts-row { margin: 0 22px 18px !important; gap: 20px !important; }

/* ═════════════════════════════════════════════════════════════════════════
   8.  CYCLE TODAY PANEL — CONFESSIONAL BOOTH × VAULT DOOR
       Heavy negative space. Monastery typography. Single warm pin-light.
       Engraved tier badge. Audit-line ledger numerals.
   ═════════════════════════════════════════════════════════════════════════ */
.cx-today-panel {
  margin: 0 !important;
  background:
    radial-gradient(900px 360px at 50% -10%, rgba(201,163,95,0.06), transparent 55%),
    radial-gradient(600px 300px at 50% 110%, rgba(201,163,95,0.025), transparent 50%),
    linear-gradient(180deg, var(--rd-bg-warm) 0%, var(--rd-bg-warm-2) 100%) !important;
  border: 1px solid var(--rd-border-warm) !important;
  border-radius: 6px !important;
  padding: 0 !important;
  overflow: hidden;
  display: flex !important;
  flex-direction: column !important;
  position: relative;
  box-shadow:
    0 1px 0 rgba(201,163,95,0.06) inset,
    0 30px 60px -30px rgba(0,0,0,0.8) !important;
}

/* CORNER MARGINALIA — like a stamped ledger page */
.cx-today-panel::before,
.cx-today-panel::after {
  content: '';
  position: absolute;
  width: 28px; height: 28px;
  pointer-events: none;
  opacity: 0.7;
}
.cx-today-panel::before {
  top: 14px; left: 14px;
  border-top: 1px solid var(--rd-border-warm);
  border-left: 1px solid var(--rd-border-warm);
}
.cx-today-panel::after {
  bottom: 14px; right: 14px;
  border-bottom: 1px solid var(--rd-border-warm);
  border-right: 1px solid var(--rd-border-warm);
}

/* ══════════════════════════════════════════════════════════════════════════
   ONE CINEMATIC STAGE — no masthead / body split.
   Layout: meta strip → frame stage (flex:1) → cta slot → footer.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Meta strip ──────────────────────────────────────────────────────────── */
.cx-stage-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 11px 20px 10px !important;
  border-bottom: 1px solid var(--rd-rule) !important;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.cx-stage-meta-line {
  font-family: var(--rd-mono) !important;
  font-size: 9px !important;
  letter-spacing: 2.8px !important;
  color: var(--rd-text-mute) !important;
  text-transform: uppercase;
  font-weight: 600;
}

/* Mirror pill — right side of meta strip */
.cx-stage-meta .bx-status-pill {
  font-family: var(--rd-mono) !important;
  font-size: 9px !important;
  letter-spacing: 2px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  padding: 4px 12px !important;
  border-radius: 1px !important;
  cursor: pointer;
  color: var(--rd-green) !important;
  border: 1px solid rgba(0,255,136,0.22) !important;
  background: rgba(0,255,136,0.03) !important;
  transition: all 0.2s;
  flex-shrink: 0;
}
.cx-stage-meta .bx-status-pill:hover {
  background: rgba(0,255,136,0.07) !important;
}
.cx-stage-meta .bx-status-pill.bx-status-inactive {
  color: var(--rd-text-mute) !important;
  border-color: var(--rd-rule) !important;
  background: transparent !important;
}
.cx-stage-meta .bx-status-pill .bx-dot {
  width: 5px !important; height: 5px !important;
  background: currentColor !important;
  box-shadow: 0 0 5px currentColor !important;
  border-radius: 50% !important;
  display: inline-block !important;
  margin-right: 5px !important;
}

/* ── Frame stage — the rotating cinematic center ─────────────────────────── */
.cx-frame-stage {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  position: relative;
  min-height: 0;
  overflow: hidden;
}

/* Ambient glow behind the stage — tier-colored */
.cx-frame-stage::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -55%);
  width: 360px; height: 280px;
  background: radial-gradient(closest-side, rgba(201,163,95,0.08) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(30px);
  opacity: 1;
}

/* ── Tier color system — on #cxTodayPanel[data-tier] ─────────────────────── */

/* IN CONTROL — gold */
#cxTodayPanel[data-tier=”systematic_executor”] .cx-frame-stage::before {
  background: radial-gradient(closest-side, rgba(201,163,95,0.14) 0%, transparent 70%);
}
#cxTodayPanel[data-tier=”systematic_executor”] .cx-frame--headline .cx-frame-big {
  text-shadow: 0 2px 0 rgba(0,0,0,0.5), 0 0 60px rgba(201,163,95,0.55) !important;
}
#cxTodayPanel[data-tier=”systematic_executor”] .cx-stage-meta { border-bottom-color: rgba(201,163,95,0.12) !important; }
#cxTodayPanel[data-tier=”systematic_executor”] .cx-frame--milestone .cx-frame-day-num { color: rgba(201,163,95,0.90) !important; }
#cxTodayPanel[data-tier=”systematic_executor”] .cx-frame--metric .cx-frame-number { text-shadow: 0 0 40px rgba(201,163,95,0.50) !important; }
#cxTodayPanel[data-tier=”systematic_executor”] .cx-stage-meta .bx-status-pill.bx-status-active { color: var(--rd-warm) !important; border-color: var(--rd-border-warm) !important; background: rgba(201,163,95,0.04) !important; }

/* CHASING — amber */
#cxTodayPanel[data-tier=”reactive_participant”] .cx-frame-stage::before {
  background: radial-gradient(closest-side, rgba(251,191,36,0.12) 0%, transparent 70%);
}
#cxTodayPanel[data-tier=”reactive_participant”] .cx-frame--headline .cx-frame-big {
  text-shadow: 0 2px 0 rgba(0,0,0,0.5), 0 0 60px rgba(251,191,36,0.55) !important;
}
#cxTodayPanel[data-tier=”reactive_participant”] .cx-stage-meta { border-bottom-color: rgba(251,191,36,0.12) !important; }
#cxTodayPanel[data-tier=”reactive_participant”] .cx-frame--milestone .cx-frame-day-num { color: rgba(251,191,36,0.90) !important; }
#cxTodayPanel[data-tier=”reactive_participant”] .cx-frame--metric .cx-frame-number { text-shadow: 0 0 40px rgba(251,191,36,0.50) !important; }
#cxTodayPanel[data-tier=”reactive_participant”] .cx-stage-meta .bx-status-pill.bx-status-active { color: #FBBF24 !important; border-color: rgba(251,191,36,0.25) !important; background: rgba(251,191,36,0.04) !important; }

/* LOSING GROUND — crimson */
#cxTodayPanel[data-tier=”structure_degrading”] .cx-frame-stage::before {
  background: radial-gradient(closest-side, rgba(255,69,96,0.12) 0%, transparent 70%);
}
#cxTodayPanel[data-tier=”structure_degrading”] .cx-frame--headline .cx-frame-big {
  text-shadow: 0 2px 0 rgba(0,0,0,0.5), 0 0 60px rgba(255,69,96,0.55) !important;
}
#cxTodayPanel[data-tier=”structure_degrading”] .cx-stage-meta { border-bottom-color: rgba(255,69,96,0.12) !important; }
#cxTodayPanel[data-tier=”structure_degrading”] .cx-frame--milestone .cx-frame-day-num { color: rgba(255,69,96,0.90) !important; }
#cxTodayPanel[data-tier=”structure_degrading”] .cx-frame--metric .cx-frame-number { text-shadow: 0 0 40px rgba(255,69,96,0.50) !important; }
#cxTodayPanel[data-tier=”structure_degrading”] .cx-stage-meta .bx-status-pill.bx-status-active { color: var(--rd-red) !important; border-color: rgba(255,69,96,0.25) !important; background: rgba(255,69,96,0.04) !important; }

/* UNTRACKED — cyan */
#cxTodayPanel[data-tier=”uncalibrated_participant”] .cx-frame-stage::before {
  background: radial-gradient(closest-side, rgba(79,172,254,0.12) 0%, transparent 70%);
}
#cxTodayPanel[data-tier=”uncalibrated_participant”] .cx-frame--headline .cx-frame-big {
  text-shadow: 0 2px 0 rgba(0,0,0,0.5), 0 0 60px rgba(79,172,254,0.55) !important;
}
#cxTodayPanel[data-tier=”uncalibrated_participant”] .cx-stage-meta { border-bottom-color: rgba(79,172,254,0.12) !important; }
#cxTodayPanel[data-tier=”uncalibrated_participant”] .cx-frame--milestone .cx-frame-day-num { color: rgba(79,172,254,0.90) !important; }
#cxTodayPanel[data-tier=”uncalibrated_participant”] .cx-frame--metric .cx-frame-number { text-shadow: 0 0 40px rgba(79,172,254,0.50) !important; }
#cxTodayPanel[data-tier=”uncalibrated_participant”] .cx-stage-meta .bx-status-pill.bx-status-active { color: var(--rd-cyan) !important; border-color: rgba(79,172,254,0.25) !important; background: rgba(79,172,254,0.04) !important; }

/* ── Identity anchor — always-visible rank + stake ───────────────────────── */
.cx-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 40px 2px;
  gap: 4px;
}

.cx-identity-title {
  font-family: var(--rd-mono) !important;
  font-size: clamp(13px, 2vw, 16px) !important;
  font-weight: 600 !important;
  letter-spacing: 3.5px !important;
  text-transform: uppercase;
  color: rgba(201,163,95,0.85) !important;
}

.cx-identity-sub {
  font-family: var(--rd-mono) !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase;
  color: var(--rd-text-3) !important;
}

/* Middle register — the stake/destination line */
.cx-identity-stake {
  font-family: var(--rd-mono) !important;
  font-size: clamp(11px, 1.6vw, 13px) !important;
  letter-spacing: 1.5px !important;
  color: var(--rd-text-2) !important;
  text-transform: uppercase;
  margin-top: 4px;
  opacity: 0.75;
}

/* Tier-colored identity title */
#cxTodayPanel[data-tier="systematic_executor"]  .cx-identity-title { color: rgba(201,163,95,0.90) !important; }
#cxTodayPanel[data-tier="reactive_participant"] .cx-identity-title { color: rgba(251,191,36,0.85) !important; }
#cxTodayPanel[data-tier="structure_degrading"]  .cx-identity-title { color: rgba(255,69,96,0.80) !important; }
#cxTodayPanel[data-tier="uncalibrated_participant"] .cx-identity-title { color: rgba(79,172,254,0.80) !important; }

/* ── Frame — shared base + transition ────────────────────────────────────── */
.cx-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px 40px;
  width: 100%;
  max-width: 560px;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 350ms ease, transform 350ms ease;
}
.cx-frame--active {
  opacity: 1;
  transform: scale(1);
}
.cx-frame-caption {
  font-family: var(--rd-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 1.8px !important;
  color: var(--rd-text-3) !important;
  text-transform: uppercase;
  font-weight: 500;
}

/* ── HEADLINE frame — big serif italic tier identity ─────────────────────── */
.cx-frame--headline .cx-frame-big {
  font-family: var(--rd-serif) !important;
  font-style: italic !important;
  font-size: clamp(52px, 8vw, 76px) !important;
  font-weight: 400 !important;
  color: var(--rd-text) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.5px !important;
  text-shadow: 0 2px 0 rgba(0,0,0,0.5), 0 0 40px rgba(201,163,95,0.18);
}
.cx-frame--headline .cx-frame-sub {
  font-family: var(--rd-mono) !important;
  font-size: 10px !important;
  letter-spacing: 3px !important;
  color: var(--rd-text-3) !important;
  text-transform: uppercase;
  margin-top: 6px;
}
/* bracket rules above / below the big text */
.cx-frame--headline .cx-frame-big::before,
.cx-frame--headline .cx-frame-big::after {
  content: '';
  display: block;
  width: 60px;
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--rd-warm-soft), transparent);
  opacity: 0.6;
}
.cx-frame--headline .cx-frame-big::before { margin-bottom: 14px; }
.cx-frame--headline .cx-frame-big::after  { margin-top: 14px; }

/* ── MILESTONE frame — day / total ──────────────────────────────────────── */
.cx-frame--milestone .cx-frame-day-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1;
}
.cx-frame--milestone .cx-frame-day-num {
  font-family: var(--rd-mono) !important;
  font-size: clamp(60px, 9vw, 88px) !important;
  font-weight: 700 !important;
  color: var(--rd-text) !important;
  letter-spacing: -2px !important;
  line-height: 1 !important;
}
.cx-frame--milestone .cx-frame-day-sep {
  font-family: var(--rd-mono) !important;
  font-size: 32px !important;
  font-weight: 300 !important;
  color: var(--rd-text-3) !important;
  line-height: 1 !important;
}
.cx-frame--milestone .cx-frame-day-total {
  font-family: var(--rd-mono) !important;
  font-size: 36px !important;
  font-weight: 400 !important;
  color: var(--rd-text-2) !important;
  letter-spacing: -1px !important;
  line-height: 1 !important;
}
.cx-frame--milestone .cx-frame-badge {
  font-family: var(--rd-mono) !important;
  font-size: 9px !important;
  letter-spacing: 3.5px !important;
  color: var(--rd-text-mute) !important;
  text-transform: uppercase;
  border-top: 1px solid var(--rd-rule);
  border-bottom: 1px solid var(--rd-rule);
  padding: 4px 16px;
  margin-top: 2px;
}

/* ── METRIC frame — single dominant number ───────────────────────────────── */
.cx-frame--metric .cx-frame-number {
  font-family: var(--rd-mono) !important;
  font-size: clamp(72px, 11vw, 108px) !important;
  font-weight: 700 !important;
  color: var(--rd-text) !important;
  line-height: 1 !important;
  letter-spacing: -3px !important;
  text-shadow: 0 0 40px rgba(201,163,95,0.25);
}
.cx-frame--metric .cx-frame-unit {
  font-family: var(--rd-mono) !important;
  font-size: 11px !important;
  letter-spacing: 4px !important;
  color: var(--rd-text-3) !important;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: -4px;
}

/* ── RULE frame — the user's own declared rule, verbatim ─────────────────── */
.cx-frame--rule {
  gap: 10px;
  padding: 12px 32px;
}
.cx-frame--rule .cx-frame-rule-label {
  font-family: var(--rd-mono) !important;
  font-size: 10px !important;
  letter-spacing: 4px !important;
  text-transform: uppercase;
  color: rgba(201,163,95,0.70) !important;
  font-weight: 600;
}
.cx-frame--rule .cx-frame-rule-text {
  font-family: var(--rd-serif) !important;
  font-size: clamp(24px, 3.8vw, 34px) !important;
  font-weight: 400 !important;
  color: var(--rd-text) !important;
  line-height: 1.3 !important;
  letter-spacing: 0.1px !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.4), 0 0 24px rgba(201,163,95,0.12);
  max-width: 480px;
}
/* Tier-colored label */
#cxTodayPanel[data-tier="reactive_participant"]    .cx-frame-rule-label { color: rgba(251,191,36,0.70) !important; }
#cxTodayPanel[data-tier="structure_degrading"]     .cx-frame-rule-label { color: rgba(255,69,96,0.65) !important; }
#cxTodayPanel[data-tier="uncalibrated_participant"] .cx-frame-rule-label { color: rgba(79,172,254,0.70) !important; }

/* ── VOICE frame — narrative quote ──────────────────────────────────────── */
.cx-frame--voice {
  gap: 0;
  padding: 32px 48px;
}
.cx-frame--voice .cx-frame-quote {
  font-family: var(--rd-serif) !important;
  font-style: italic !important;
  font-size: clamp(22px, 3.5vw, 30px) !important;
  font-weight: 400 !important;
  color: var(--rd-text) !important;
  line-height: 1.45 !important;
  letter-spacing: 0.1px !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.4), 0 0 24px rgba(201,163,95,0.14);
  position: relative;
  max-width: 420px;
}
.cx-frame--voice .cx-frame-quote::before { content: '\201C'; }
.cx-frame--voice .cx-frame-quote::after  { content: '\201D'; }

/* ── CTA slot ─────────────────────────────────────────────────────────────── */
.cx-stage-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 20px 16px;
  flex-shrink: 0;
}

/* Day check-in button — a wax-seal CTA */
#cxStageCta .btn,
#cxStageCta button,
.cx-cta-btn {
  font-family: var(--rd-mono) !important;
  font-size: 11px !important;
  letter-spacing: 2.4px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: var(--rd-warm) !important;
  background: linear-gradient(180deg, rgba(201,163,95,0.10), rgba(201,163,95,0.04)) !important;
  border: 1px solid var(--rd-border-warm) !important;
  border-radius: 2px !important;
  padding: 12px 24px !important;
  cursor: pointer;
  align-self: center;
  margin: 8px auto 4px !important;
  position: relative;
  transition: all 0.2s;
  text-shadow: 0 0 8px var(--rd-warm-glow);
  min-width: 220px;
}
#cxStageCta .btn:hover,
#cxStageCta button:hover,
.cx-cta-btn:hover {
  background: linear-gradient(180deg, rgba(201,163,95,0.18), rgba(201,163,95,0.08)) !important;
  border-color: var(--rd-warm-soft) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px -8px var(--rd-warm-glow);
}
#cxStageCta .btn::before,
.cx-cta-btn::before {
  content: '✦';
  margin-right: 10px;
  color: var(--rd-warm);
  font-size: 12px;
  opacity: 0.7;
}

/* FOOTER — colophon-style */
.cx-cycle-footer {
  padding: 12px 44px 16px !important;
  border-top: 1px dashed var(--rd-border-warm) !important;
  display: flex !important;
  gap: 24px !important;
  background: rgba(0,0,0,0.20) !important;
  margin-top: auto !important;
  position: relative;
  justify-content: center !important;
}
.cx-cycle-footer-link {
  font-family: var(--rd-mono) !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--rd-text-3) !important;
  font-weight: 600 !important;
  padding: 0 !important;
}
.cx-cycle-footer-link:hover { color: var(--rd-warm) !important; text-shadow: 0 0 8px var(--rd-warm-glow); }
.cx-cycle-footer-link:nth-child(1) { margin-right: auto; }
.cx-cycle-footer-link:nth-child(3) { margin-left: auto; }
.cx-sos-footer-btn {
  font-size: 9px !important;
  padding: 4px 12px 4px 10px !important;
  letter-spacing: 1.8px !important;
}

/* ── Post-close check-in: urgent wrapper + corner arrows ─────────────────── */
.cx-checkin-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 18px;
  align-self: center;
}
/* Urgent check-in button — red glow instead of warm gold */
.cx-cta-btn--urgent {
  color: var(--rd-red) !important;
  background: linear-gradient(180deg, rgba(255,69,96,0.12), rgba(255,69,96,0.05)) !important;
  border-color: rgba(255,69,96,0.45) !important;
  text-shadow: 0 0 10px rgba(255,69,96,0.45) !important;
  margin: 0 !important;
  animation: cxCheckinGlow 1.8s ease-in-out infinite;
}
.cx-cta-btn--urgent::before { color: var(--rd-red) !important; }
.cx-cta-btn--urgent:hover {
  background: linear-gradient(180deg, rgba(255,69,96,0.20), rgba(255,69,96,0.09)) !important;
  border-color: rgba(255,69,96,0.70) !important;
}
@keyframes cxCheckinGlow {
  0%,100% { box-shadow: 0 0 8px rgba(255,69,96,0.15), 0 0 0 1px rgba(255,69,96,0.20); }
  50%      { box-shadow: 0 0 24px rgba(255,69,96,0.55), 0 0 0 1px rgba(255,69,96,0.65), 0 0 42px rgba(255,69,96,0.18); }
}
/* Corner arrows — ▶ rotated to point diagonally inward from each corner */
.cx-corner {
  position: absolute;
  font-size: 10px;
  color: rgba(255,69,96,0.85);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.cx-corner--tl { top: 3px;    left: 3px;  animation: cxCornerTL 1.5s ease-in-out infinite 0s; }
.cx-corner--tr { top: 3px;    right: 3px; animation: cxCornerTR 1.5s ease-in-out infinite 0.375s; }
.cx-corner--bl { bottom: 3px; left: 3px;  animation: cxCornerBL 1.5s ease-in-out infinite 0.75s; }
.cx-corner--br { bottom: 3px; right: 3px; animation: cxCornerBR 1.5s ease-in-out infinite 1.125s; }
/* Each corner's ▶ is rotated so it points toward the button center, then
   translateX(5px) in local (rotated) space moves it toward center on pulse. */
@keyframes cxCornerTL {
  0%,100% { transform: rotate(45deg)   translate(0,0); opacity: 0.3; }
  50%     { transform: rotate(45deg)   translate(5px,0); opacity: 1;  }
}
@keyframes cxCornerTR {
  0%,100% { transform: rotate(135deg)  translate(0,0); opacity: 0.3; }
  50%     { transform: rotate(135deg)  translate(5px,0); opacity: 1;  }
}
@keyframes cxCornerBL {
  0%,100% { transform: rotate(-45deg)  translate(0,0); opacity: 0.3; }
  50%     { transform: rotate(-45deg)  translate(5px,0); opacity: 1;  }
}
@keyframes cxCornerBR {
  0%,100% { transform: rotate(-135deg) translate(0,0); opacity: 0.3; }
  50%     { transform: rotate(-135deg) translate(5px,0); opacity: 1;  }
}

/* ─────────────────────────────────────────────────────────────────────────
   B-EOD: ritual handoff banner — sticky bottom bar at market close, hands
   the user from the dashboard's job (done for the day) to the Mirror's
   (check-in still open). Reuses --rd-* skin tokens for dark/light parity.
   ───────────────────────────────────────────────────────────────────────── */
.cx-eod-handoff {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 20px;
  background: var(--rd-bg-1);
  border-top: 1px solid rgba(255,69,96,0.35);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.35);
  font-family: var(--rd-font);
  animation: cxEodSlideUp .4s ease-out;
}
.cx-eod-handoff[hidden] { display: none; }
.cx-eod-handoff-msg {
  font-size: 12px;
  color: var(--rd-text-2);
  letter-spacing: .2px;
}
.cx-eod-handoff-msg b { color: var(--rd-text); font-weight: 600; }
.cx-eod-handoff-cta {
  font-family: var(--rd-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-transform: none;
  color: var(--rd-red);
  background: rgba(255,69,96,0.10);
  border: 1px solid rgba(255,69,96,0.45);
  border-radius: 4px;
  padding: 7px 16px;
  cursor: pointer;
  white-space: nowrap;
  animation: cxCheckinGlow 1.8s ease-in-out infinite;
}
.cx-eod-handoff-cta:hover {
  background: rgba(255,69,96,0.18);
  border-color: rgba(255,69,96,0.70);
}
.cx-eod-handoff-dismiss {
  background: none;
  border: none;
  color: var(--rd-text-3);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}
.cx-eod-handoff-dismiss:hover { color: var(--rd-text); }
@keyframes cxEodSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@media (max-width: 640px) {
  .cx-eod-handoff { justify-content: space-between; padding: 10px 14px; }
  .cx-eod-handoff-msg { font-size: 11px; }
}

/* unmeasured bar */
.cx-unmeasured-bar {
  background: rgba(245,166,35,0.06) !important;
  border-bottom: 1px solid rgba(245,166,35,0.25) !important;
  padding: 10px 44px !important;
  font-family: var(--rd-mono) !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  color: var(--rd-amber) !important;
  text-transform: uppercase;
}

/* ═════════════════════════════════════════════════════════════════════════
   9.  COCKPIT — LIVE RADAR × ROBOT IS WORKING
       Complete redesign. Motion-forward. Green/cyan.
       Radar sweep · waveforms · pulse dot · neural blip · streaming bars
   ═════════════════════════════════════════════════════════════════════════ */
.card-signals {
  background:
    radial-gradient(900px 600px at 100% 0%, rgba(0,255,136,0.04), transparent 50%),
    radial-gradient(700px 500px at 0% 100%, rgba(79,172,254,0.05), transparent 55%),
    linear-gradient(180deg, var(--rd-bg-1) 0%, var(--rd-bg-2) 100%) !important;
  border: 1px solid var(--rd-border) !important;
  border-radius: 6px !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow:
    0 1px 0 rgba(0,255,136,0.06) inset,
    0 30px 60px -30px rgba(0,0,0,0.8) !important;
}
body[data-skin="ledger"] .card-signals {
  background:
    radial-gradient(900px 600px at 100% 0%, rgba(212,179,135,0.05), transparent 50%),
    linear-gradient(180deg, var(--rd-bg-1) 0%, var(--rd-bg-2) 100%) !important;
}

/* corner brackets */
.card-signals > .ck-header::before,
.card-signals > .ck-header::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  opacity: 0.7;
}
/* registration ticks at corners (use ::before on the card-signals itself via overrides) */
.card-signals::before {
  content: '';
  position: absolute; top: 14px; left: 14px;
  width: 18px; height: 18px;
  border-top: 1px solid rgba(0,255,136,0.30);
  border-left: 1px solid rgba(0,255,136,0.30);
  pointer-events: none;
  z-index: 3;
}
.card-signals::after {
  content: '';
  position: absolute; bottom: 14px; right: 14px;
  width: 18px; height: 18px;
  border-bottom: 1px solid rgba(0,255,136,0.30);
  border-right: 1px solid rgba(0,255,136,0.30);
  pointer-events: none;
  z-index: 3;
}
body[data-skin="ledger"] .card-signals::before,
body[data-skin="ledger"] .card-signals::after {
  border-color: rgba(212,179,135,0.3);
}

/* ── BACKGROUND ML SCANNING LAYERS — full redesign ── */
.ck-ai-bg {
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit;
  overflow: hidden !important;
  pointer-events: none;
  z-index: 0;
  opacity: 1 !important;
}
.card-signals > :not(.ck-ai-bg) { position: relative; z-index: 1; }

/* (a) BASE TELEMETRY GRID — animated dot mesh */
.ck-ai-grid {
  display: block !important;
  position: absolute !important;
  inset: 0;
  background:
    radial-gradient(circle, rgba(0,255,136,0.16) 1px, transparent 1.5px) 0 0 / 24px 24px,
    radial-gradient(circle, rgba(79,172,254,0.10) 1px, transparent 1.5px) 12px 12px / 24px 24px;
  opacity: 0.35;
  animation: rdGridDrift 30s linear infinite;
  mask: radial-gradient(70% 70% at 50% 50%, black, transparent 90%);
}
@keyframes rdGridDrift {
  0%   { background-position: 0 0, 12px 12px; }
  100% { background-position: 24px 24px, 36px 36px; }
}

/* (b) RADAR SWEEP — the headline motion. A conic gradient sweeping in a circle. */
.card-signals .ck-ai-bg::before {
  content: '';
  position: absolute;
  top: 50%; right: -120px;
  transform: translateY(-50%);
  width: 480px; height: 480px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(0,255,136,0)   0deg,
    rgba(0,255,136,0)   270deg,
    rgba(0,255,136,0.45) 358deg,
    rgba(0,255,136,0)   360deg);
  filter: blur(2px);
  animation: rdRadarSweep 4.5s linear infinite;
  opacity: 0.85;
  mask: radial-gradient(closest-side, black 0%, black 60%, transparent 100%);
}
@keyframes rdRadarSweep {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}
/* concentric range rings inside the radar */
.card-signals .ck-ai-bg::after {
  content: '';
  position: absolute;
  top: 50%; right: -120px;
  width: 480px; height: 480px;
  transform: translateY(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 19%, rgba(0,255,136,0.10) 20%, transparent 21%),
    radial-gradient(circle, transparent 39%, rgba(0,255,136,0.08) 40%, transparent 41%),
    radial-gradient(circle, transparent 59%, rgba(0,255,136,0.06) 60%, transparent 61%);
  mask: radial-gradient(closest-side, black, transparent 100%);
  opacity: 0.7;
}

/* (c) NEURAL NODES — keep them but recolor */
.ck-ai-net {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important; height: 100% !important;
  opacity: 0.7 !important;
}
.ck-ai-net-links { display: block !important; stroke: rgba(0,255,136,0.18) !important; }
.ck-node { filter: drop-shadow(0 0 8px rgba(0,255,136,0.9)) !important; }
.ck-ai-pulse { display: block !important; }

/* (d) SCANLINE — horizontal sweep */
.ck-ai-scanline {
  height: 80px !important;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0,255,136,0.04) 40%,
    rgba(0,255,136,0.10) 50%,
    rgba(0,255,136,0.04) 60%,
    transparent 100%) !important;
  filter: blur(1px) !important;
  animation: rdScanline 7s linear infinite !important;
}
@keyframes rdScanline {
  0%   { transform: translateY(-100px); }
  100% { transform: translateY(calc(100% + 40px)); }
}

/* (e) PARTICLES — cyan data streaming */
.ck-particle {
  width: 32px !important; height: 1.5px !important;
  background: linear-gradient(90deg, transparent, var(--rd-cyan), rgba(0,255,136,0.6), transparent) !important;
  filter: blur(0.3px) !important;
  opacity: 0.6 !important;
}

/* (f) FREQUENCY BARS — bottom-right, recolored green/cyan */
.ck-ai-bars {
  right: 24px !important;
  bottom: 78px !important;
  height: 36px !important;
  opacity: 0.55 !important;
}
.ck-ai-bars span {
  width: 2px !important;
  background: linear-gradient(180deg, var(--rd-green), rgba(0,255,136,0.15)) !important;
  filter: drop-shadow(0 0 4px rgba(0,255,136,0.6));
}

body[data-skin="ledger"] .ck-ai-grid { background:
  radial-gradient(circle, rgba(212,179,135,0.16) 1px, transparent 1.5px) 0 0 / 24px 24px; }
body[data-skin="ledger"] .card-signals .ck-ai-bg::before { background: conic-gradient(from 0deg,
  rgba(212,179,135,0) 0deg, rgba(212,179,135,0) 270deg, rgba(212,179,135,0.45) 358deg, rgba(212,179,135,0) 360deg); }
body[data-skin="ledger"] .ck-ai-bars span { background: linear-gradient(180deg, var(--rd-warm), transparent) !important; }

/* ── HEADER — institutional radar console ── */
.ck-header {
  padding: 18px 22px 14px !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid var(--rd-rule) !important;
  background:
    linear-gradient(180deg, rgba(0,255,136,0.025), transparent);
}

/* ── STATE BODY ── */
.ck-state-body, #cockpitStateBody {
  padding: 18px 22px 14px !important;
  gap: 14px !important;
}
.ck-eyebrow {
  font-family: var(--rd-mono) !important;
  font-size: 9.5px !important;
  letter-spacing: 2.8px !important;
  color: var(--rd-text-mute) !important;
  font-weight: 600;
}

/* Notes — audit-line list */

/* TRAIL — fired signals strip */

/* FOOTER RAIL — live telemetry strip */

/* SEBI footer compliance */

/* Override warm bias in skins */

/* ═════════════════════════════════════════════════════════════════════════
   10.  FOOTER — LEDGER CLOSE-OUT × STAMP/SEAL × COLOPHON
        Heavy bottom strip. Wax-seal motif. Filing-cabinet authority.
   ═════════════════════════════════════════════════════════════════════════ */
.dx-footer {
  background: #07090E !important;
  border-top: 1px solid var(--rd-border-warm) !important;
  padding: 36px 36px 24px !important;
  margin-top: 40px !important;
  position: relative;
}
.dx-footer::after {
  /* hairline foot rule */
  content: '';
  position: absolute;
  left: 36px; right: 36px; top: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rd-rule), transparent);
}

/* Social link cards — quieter */

/* COLOPHON COL — new col, hijacks via :nth-child(4) on the brand-list grid */

/* Bottom strip — receipt-style stamp row */

/* ═════════════════════════════════════════════════════════════════════════
   11.  STATS-GRID INNER PRESERVATION — locked card interiors stay
        We re-apply token colors so the inner modules adopt the new skin.
        No structural change.
   ═════════════════════════════════════════════════════════════════════════ */
.ph-mod, .ti-mod {
  background: rgba(255,255,255,0.012) !important;
  border-color: var(--rd-border) !important;
}
body[data-skin="ledger"] .ph-mod,
body[data-skin="ledger"] .ti-mod { background: rgba(212,179,135,0.02) !important; }

/* Vignette overlay is distracting on the parchment option-chain background */
body[data-skin="ledger"]::before { display: none; }

.tl-eyebrow, .ph-mod-eyebrow, .ti-mod-eyebrow {
  letter-spacing: 2.4px !important;
  color: var(--rd-text-mute) !important;
}
.tl-title, .ph-mod-title, .ti-mod-title {
  color: var(--rd-text) !important;
}

/* ═════════════════════════════════════════════════════════════════════════
   13.  MODALS / SIDEBARS — light polish (don't restructure)
   ═════════════════════════════════════════════════════════════════════════ */
.sl-modal,
.sig-modal,
.sig-sidebar,
.pay-modal-card {
  background: linear-gradient(180deg, var(--rd-bg-1), var(--rd-bg-2)) !important;
  border: 1px solid var(--rd-border-warm) !important;
  border-radius: 6px !important;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.9) !important;
}
.sl-modal-title,
.pay-modal-title {
  font-family: var(--rd-font) !important;
  letter-spacing: -0.2px !important;
  color: var(--rd-text) !important;
}

/* Replay bar */
.replay-bar {
  background: linear-gradient(180deg, var(--rd-bg-1), var(--rd-bg-2)) !important;
  border: 1px solid var(--rd-border-warm) !important;
  border-radius: 6px !important;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.9) !important;
}

/* ═════════════════════════════════════════════════════════════════════════
   14.  RESPONSIVE — narrow viewports
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  
}
/* ── Ticker responsive: fluid font scaling handles most cases.
   Only hide USD/INR + DXY at very tight viewports as last resort. ── */
@media (max-width: 720px) {
  .dt-hide-tight { display: none !important; }
}

@media (max-width: 900px) {
  .cx-cycle-footer { padding: 12px 20px !important; flex-wrap: wrap !important; gap: 12px !important; justify-content: space-between !important; }
  .cx-cycle-footer-link:nth-child(1) { margin-right: 0 !important; }
  .cx-cycle-footer-link:nth-child(3) { margin-left: 0 !important; }
  .cx-sos-footer-btn { order: 3; width: 100% !important; justify-content: center !important; margin-top: 4px !important; }
  .ck-header { padding: 14px 16px 10px !important; }
  .ck-state-body, #cockpitStateBody { padding: 14px 16px !important; }

.dn-logo::after { display: none; }
}
@media (max-width: 640px) {
  .dhan-nav { padding: 0 12px !important; }
  .dn-temporal { gap: 10px !important; }
  .ph-wall--spot { background: transparent !important; border: none !important; box-shadow: none !important; min-width: 0 !important; padding: var(--s-2) 4px !important; }
  .ti-pcr-value { font-size: 26px !important; }
  .ti-pcr-spark { height: 48px !important; }
  .ti-premium-spark { height: 48px !important; }
  .prox-card { padding: 16px !important; }
  .charts-row > .chart-card { padding: 13px !important; }
  section.charts-row + .card-dark { padding: 13px !important; margin: 0 12px 12px !important; }
  .charts-row > .chart-card .chart-container { height: 422px !important; min-height: 422px !important; max-height: 422px !important; flex: 0 0 422px !important; }
  /* Spot + OI Walls card only — 25% taller than the shared 422px mobile chart height (422 * 1.25 = 527.5, rounded).
     Set on the carousel slide (not .chart-container) so both the Spot+OI Walls and OI Delta views share this height. */
  #chartPanelR.card-carousel .cc-slide { height: 528px !important; }

.stats-grid, .top-pair, .charts-row { margin: 12px 12px 12px !important; }
  .dx-footer { padding: 28px 16px 18px !important; }
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  COCKPIT V2 — MISSION CONTROL TERMINAL × LIVE RADAR (FROM SCRATCH)        ║
   ║                                                                          ║
   ║  Brief: keep the radar background as-is. Redesign every other surface    ║
   ║  inside .card-signals from scratch. Lock terminal skin only.             ║
   ║                                                                          ║
   ║  Aesthetic: mission-control HUD × Bloomberg terminal × radar console.    ║
   ║  Heavy mono, terminal command lines, blinking cursors, scanline,         ║
   ║  ECG heartbeat, conviction dial, log-feed style trail, telemetry deck.   ║
   ║                                                                          ║
   ║  IDs preserved exactly. All content lives in #cockpitStateBody,          ║
   ║  #cockpitTrail, #cockpitFooter (populated by main.js stub).              ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── Card base — taller, more breathing room around radar ─────────────── */
.card-signals {
  background:
    radial-gradient(900px 600px at 100% 0%,  rgba(0,255,136,0.05), transparent 50%) !important,
    radial-gradient(700px 500px at 0%   100%, rgba(79,172,254,0.06), transparent 55%) !important,
    linear-gradient(180deg, #0A1220 0%, #04070D 100%) !important;
  border: 1px solid rgba(0,255,136,0.10) !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}
.card-signals::before {
  border-color: rgba(0,255,136,0.40) !important;
}
.card-signals::after {
  border-color: rgba(0,255,136,0.40) !important;
}

/* ── Radar layers — keep as-is per brief, light tuning only ───────────── */
.card-signals .ck-ai-bg { opacity: 1 !important; }
.card-signals .ck-ai-bg::before {
  /* Pull the radar IN slightly so it reads as a visible prop, not a background bleed */
  right: -100px !important;
  width: 460px !important;
  height: 460px !important;
}
.card-signals .ck-ai-bg::after {
  right: -100px !important;
  width: 460px !important;
  height: 460px !important;
}
/* Add a center "target" reticle inside the radar */
.card-signals .ck-ai-bg {
  --radar-center-x: calc(100% + 130px - 230px);
}

/* ── HEADER — terminal command-bar style ──────────────────────────────── */
.card-signals .ck-header {
  padding: 14px 22px 12px !important;
  border-bottom: 1px solid rgba(0,255,136,0.10) !important;
  background:
    linear-gradient(180deg, rgba(0,255,136,0.04) 0%, transparent 100%) !important;
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.card-signals .ck-header::after {
  content: '';
  position: absolute;
  left: 22px; right: 22px; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(0,255,136,0.4) 30%,
    rgba(0,255,136,0.4) 70%,
    transparent);
  animation: rdHeaderRunner 6s ease-in-out infinite;
}
@keyframes rdHeaderRunner {
  0%,100% { opacity: 0.4; }
  50%     { opacity: 1; }
}

/* Brand chip → command prompt feel */

/* Replace existing brand text "Cockpit" with custom $ prefix */

/* Add a blinking cursor between */

/* ticker-count — total today */

/* System state chip */

/* Analyzing pulse — uses dynamic animated dots */

/* The right-hand "Today's History →" link */

/* Hide legacy compat stubs noisily */

/* ╶───────────────────────────────────────────────────────────────────╴
   STATE BODY — HERO
   ╶───────────────────────────────────────────────────────────────────╴ */
.card-signals .ck-state-body,
.card-signals #cockpitStateBody {
  padding: 18px 22px 12px !important;
  display: block !important;
  position: relative;
}

/* Top status line: timestamp · STATE · day badge */

@keyframes rdCursorBlink { 0%,49%{opacity:1} 50%,100%{opacity:0.15} }

/* Hero row — 2 big tiles left, radar bleeds in from right */

/* Mini bar inside a tile (confidence) */

/* Day summary headline beneath hero */

/* Sub-line audit annotations */

/* Next-day pip */

@keyframes rdNextSpin { from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* ╶───────────────────────────────────────────────────────────────────╴
   TRAIL — terminal log feed
   ╶───────────────────────────────────────────────────────────────────╴ */

/* Live "scanning…" line at top of log */

@keyframes rdLivePulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,255,136,0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(0,255,136,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,255,136,0); }
}

/* Trail footer text */

/* ╶───────────────────────────────────────────────────────────────────╴
   TELEMETRY DECK — 4-up + ECG heartbeat line
   ╶───────────────────────────────────────────────────────────────────╴ */

/* Pip array inside a deck cell */

/* Mini conviction dial */

/* Ready chip */

/* ECG heartbeat line — drifts across bottom of telemetry deck */

@keyframes rdEcgScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Direction footer note ─────────────────────────────────────────── */

/* ── SEBI footer — minimal, terminal-style ─────────────────────────── */

/* Suppress all legacy ck-* content if the populated stub doesn't use ck-v2 — fallback */
.card-signals .ck-eyebrow-row,
.card-signals .ck-headline,
.card-signals .ck-tiles,
.card-signals .ck-notes,
.card-signals .ck-next,
.card-signals .ck-trail-head-inline,
.card-signals .ck-trail-rows,
.card-signals .ck-trail-foot,
.card-signals .ck-rail-row { /* allowed to render if v2 not used */ }

/* ── Responsive: narrow viewport — collapse tiles to single column ── */
@media (max-width: 980px) {

}
@media (max-width: 640px) {

}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  COCKPIT V3 — LIVE STATE ADDITIONS                                        ║
   ║  Level track bar · Verbal narrator rotation                               ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── Level Track — stop · fire · current · target ─────────────────────── */

/* Zone fills */

/* Fire dashed line */

/* MFE ghost marker */

/* Current price dot — the hero element */

@keyframes ck3LtRingPulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* Label row under the bar */

/* ── Verbal Narrator — rotating plain-English insights ─────────────────── */

@keyframes ck3NarrateIcon {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.5; }
}

/* 6 items × 4s each = 24s cycle. Each item is visible for 4s (3.5s shown + 0.5s fade).
   animation-delay is set inline per item in JS: 0s, 4s, 8s, 12s, 16s, 20s */
@keyframes ck3NarrateRotate {
  /* 0–2%:   fade in  (0–0.48s of 24s)     */
  /* 10–14%: visible  (2.4s–3.36s)          */
  /* 14–17%: fade out (3.36s–4.08s)         */
  /* 17–100%: hidden (for other items)       */
  0%   { opacity: 0;   transform: translateY(6px); }
  3%   { opacity: 1;   transform: translateY(0);   }
  14%  { opacity: 1;   transform: translateY(0);   }
  17%  { opacity: 0;   transform: translateY(-4px);}
  100% { opacity: 0;   transform: translateY(-4px);}
}

/* ── Journey SVG: fix H mismatch (CSS=22px, old JS used H=14) ─────────── */
/* The SVG uses preserveAspectRatio="none" so it stretches to fill the
   22px CSS height — no code change needed, just confirming via comment. */

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  COCKPIT V3 — STATE | TAPE  (FINAL)                                       ║
   ║                                                                          ║
   ║  Brief: keep ONLY the radar animation. Two halves with strict jobs:      ║
   ║    LEFT  STATE — what the system is doing right now                      ║
   ║    RIGHT TAPE  — what the system did today (journey-bar receipts)        ║
   ║                                                                          ║
   ║  3 vertical blocks max: header / STATE+TAPE / fineprint.                 ║
   ║  5 swappable states via [data-cockpit-state]: eod · live · scanning ·    ║
   ║    cooldown · premarket. Same chrome, different content.                 ║
   ║                                                                          ║
   ║  Journey bar primitive: ──●───│────────●── ✕  (MAE · FIRE · MFE · cap)   ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── 1.  KILL EVERY DECORATIVE ANIMATION EXCEPT THE RADAR ────────────── */
.card-signals .ck-ai-grid       { display: none !important; }
.card-signals .ck-ai-net        { display: none !important; }
.card-signals .ck-ai-scanline   { display: none !important; }
.card-signals .ck-ai-particles  { display: none !important; }
.card-signals .ck-ai-bars       { display: none !important; }
/* V2 chrome killed wholesale */

/* V1 legacy chrome killed — .ck-headline intentionally kept: cockpit.js still uses it */

/* Hide the #cockpitFooter wholesale — V3 has no telemetry deck */
.card-signals #cockpitFooter { display: none !important; }

/* Kill the brand pseudo-replacement from V2 — V3 uses real brand text */

/* ── 2.  RADAR — keep AS-IS; just make sure ::before & ::after still fire ── */
.card-signals .ck-ai-bg {
  position: absolute !important;
  inset: 0 !important;
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.card-signals .ck-ai-bg::before {
  /* RADAR SWEEP — centered behind STATE half (LEFT). Position via top + negative
     margin instead of transform: translateY, so the animation can OWN transform
     for the rotation (CSS animations get overridden by !important on the same
     property — transform must be free for the keyframes to take effect). */
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  margin-top: -240px !important;
  margin-left: -240px !important;
  width: 480px !important;
  height: 480px !important;
  border-radius: 50% !important;
  background: conic-gradient(from 0deg,
    rgba(0,255,136,0)    0deg,
    rgba(0,255,136,0)    260deg,
    rgba(0,255,136,0.55) 358deg,
    rgba(0,255,136,0)    360deg) !important;
  filter: blur(2px);
  /* Two layered animations: ck3RadarSweep keeps the beam rotating (owns transform),
     ck3RadarScanBurst fades the beam in for a ~9s active scan then rests ~6s — a
     periodic "alive" scan instead of a constant loop. opacity has NO !important so
     the burst keyframes can drive it (important author rules beat animations). */
  animation: ck3RadarSweep 4.5s linear infinite,
             ck3RadarScanBurst 15s ease-in-out infinite;
  opacity: 0.9;
  mask: radial-gradient(closest-side, black 0%, black 60%, transparent 100%) !important;
  -webkit-mask: radial-gradient(closest-side, black 0%, black 60%, transparent 100%) !important;
  pointer-events: none !important;
  will-change: transform;
  transform: rotate(0deg);   /* no !important — keyframes own transform */
}
.card-signals .ck-ai-bg::after {
  /* concentric range rings + crosshair — centred on the sweep's rotation point */
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  transform: translate(-50%, -50%) !important;
  margin-top: 0 !important;
  width: 480px !important;
  height: 480px !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle, transparent 14%, rgba(0,255,136,0.18) 15%, transparent 16%),
    radial-gradient(circle, transparent 29%, rgba(0,255,136,0.14) 30%, transparent 31%),
    radial-gradient(circle, transparent 44%, rgba(0,255,136,0.12) 45%, transparent 46%),
    radial-gradient(circle, transparent 59%, rgba(0,255,136,0.08) 60%, transparent 61%),
    linear-gradient(90deg, transparent 49.6%, rgba(0,255,136,0.16) 49.7%, rgba(0,255,136,0.16) 50.3%, transparent 50.4%),
    linear-gradient(0deg,  transparent 49.6%, rgba(0,255,136,0.16) 49.7%, rgba(0,255,136,0.16) 50.3%, transparent 50.4%) !important;
  mask: radial-gradient(closest-side, black, transparent 100%) !important;
  -webkit-mask: radial-gradient(closest-side, black, transparent 100%) !important;
  opacity: 0.85 !important;
  pointer-events: none !important;
}
@keyframes ck3RadarSweep {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}
/* Periodic scan burst: fade the beam in, hold for ~1.7 sweeps, fade out, then rest
   dark until the next 15s cycle. Rings + crosshair (::after) stay on the whole time
   so the radar display reads as "always powered, scanning in bursts". */
@keyframes ck3RadarScanBurst {
  0%   { opacity: 0;    }   /* idle / dark */
  8%   { opacity: 0.95; }   /* power up */
  60%  { opacity: 0.95; }   /* active scan hold */
  70%  { opacity: 0;    }   /* power down */
  100% { opacity: 0;    }   /* rest */
}
/* ── SONAR PING — a ring that radiates out once per 15s cycle, fired right as the
   scan burst finishes (≈60% of the cycle). Centered on the radar via margins so
   transform stays free for the scale animation. ──────────────────────────────── */
.card-signals .ck-ai-ping {
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 380px !important;
  height: 380px !important;
  margin: -190px 0 0 -190px !important;   /* center; transform owns scale */
  border-radius: 50% !important;
  border: 1.5px solid rgba(0,255,136,0.55) !important;
  box-shadow:
    0 0 14px rgba(0,255,136,0.30),
    inset 0 0 14px rgba(0,255,136,0.18) !important;
  opacity: 0;
  transform: scale(0);
  pointer-events: none !important;
  z-index: 0 !important;
  will-change: transform, opacity;
  animation: ck3RadarPing 15s ease-out infinite;
}
@keyframes ck3RadarPing {
  0%, 56% { transform: scale(0);    opacity: 0;    }  /* dormant */
  60%     { transform: scale(0.06); opacity: 0.65; }  /* spark at center */
  74%     { transform: scale(1);    opacity: 0;    }  /* radiate out + fade */
  100%    { transform: scale(1);    opacity: 0;    }  /* rest */
}
@media (max-width: 980px) {
  /* match the mobile radar anchor (top:210px) so the ping stays concentric */
  .card-signals .ck-ai-ping {
    top: 210px !important;
    width: 340px !important;
    height: 340px !important;
    margin: -170px 0 0 -170px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .card-signals .ck-ai-ping { animation: none !important; opacity: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .card-signals .ck-ai-bg::before {
    animation: none !important;
    opacity: 0.45 !important;   /* hold a calm static beam, no motion */
  }
}
/* On mobile (stacked), pin radar to the UPPER region so the STATE block sits over
   it. Anchor with a fixed top offset (not 50%) — the card becomes a tall stacked
   column here, so top:50% would drop the radar into the tape/setups area instead
   of behind STATE. */
@media (max-width: 980px) {
  .card-signals .ck-ai-bg::before,
  .card-signals .ck-ai-bg::after {
    top: 210px !important;
    left: 50% !important;
    right: auto !important;
    width: 360px !important;
    height: 360px !important;
  }
  /* SWEEP: centered via negative margins (transform is owned by the rotation
     animation, so it can't be used for centering here). */
  .card-signals .ck-ai-bg::before {
    margin-top: -180px !important;
    margin-left: -180px !important;
  }
  /* RINGS + CROSSHAIR: centered via the translate(-50%,-50%) it already carries
     from its base rule — so margins MUST be 0, otherwise margin + translate stack
     and the loops drift up-and-left off the sweep. */
  .card-signals .ck-ai-bg::after {
    margin-top: 0 !important;
    margin-left: 0 !important;
  }
}

/* ── 3.  CARD = GRID  (header, state | tape, fineprint) ─────────────── */
.card-signals {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-rows: auto 1fr auto !important;
  grid-auto-rows: 0 !important;
  grid-template-areas:
    "header header"
    "state  tape"
    "fine   fine" !important;
  gap: 0 !important;
  padding: 0 !important;
  min-height: 435px;
  max-height: none !important;
  overflow: hidden !important;
}
/* Any stray child that's not absolutely-positioned or a named grid item
   gets parked into row 1 hidden, so it can't push the layout. */
.card-signals > *:not(.ck-ai-bg):not(.ck-header):not(.ticker-header):not(#cockpitStateBody):not(.ck-state-body):not(#cockpitTrail):not(.ck-trail):not(.c3-sebi-footer):not(.inner) {
  grid-area: header !important;
  pointer-events: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}
.card-signals > .ck-ai-bg { /* absolute, stays out of grid flow */ }

.card-signals > #cockpitStateBody,
.card-signals > .ck-state-body          { grid-area: state !important; }
.card-signals > #cockpitTrail,
.card-signals > .ck-trail               { grid-area: tape !important; }

/* ── 4.  HEADER — single row, merge state pill + analyzing into one chip ── */
.card-signals .ck-header {
  padding: 14px 20px !important;
  border-bottom: 1px solid rgba(0,255,136,0.10) !important;
  background:
    linear-gradient(180deg, rgba(0,255,136,0.04), transparent) !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  position: relative;
  z-index: 2;
}
.card-signals .ck-header::after {
  content: '';
  position: absolute;
  left: 20px; right: 20px; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(0,255,136,0.45) 30%,
    rgba(0,255,136,0.45) 70%,
    transparent);
}

/* Count chip — count of today's setups */

/* MERGED state pill (was: ckSysChip + ckAnalyzing) */

/* state-coloured pill */

@keyframes ck3LivePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.7); }
}

/* HIDE the standalone Analyzing chip — merged into state pill */

/* Today's History link */

/* ── 5.  STATE COLUMN  (LEFT) ─────────────────────────────────────── */
.card-signals .ck-state-body,
.card-signals #cockpitStateBody {
  padding: 26px 28px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  position: relative !important;
  z-index: 1 !important;
  border-right: 1px solid rgba(0,255,136,0.10);
  background:
    linear-gradient(135deg, rgba(0,0,0,0.30) 0%, transparent 60%);
}

/* Eyebrow above STATE — small label */

/* Headline row — the BIG state line */

/* Subline — single short factual line */

/* Key/value mini list inside STATE — used in LIVE/SCANNING states */

/* Build progress (SCANNING state) */

/* Next-window pill */

/* ── 6.  TAPE COLUMN  (RIGHT) ─────────────────────────────────────── */
.card-signals .ck-trail,
.card-signals #cockpitTrail {
  padding: 26px 26px 22px !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  position: relative;
  z-index: 1;
}

/* Each tape row = journey bar primitive */

/* Verdict cap */

/* Journey bar SVG row */

@keyframes ck3NowPulse {
  0%,100% { r: 4; opacity: 1; }
  50%     { r: 5; opacity: 0.7; }
}
/* Annotated pts under the journey bar */

/* Tape empty (SCANNING / PRE-MARKET) — placeholder */

/* Tape footer note — filter / context */

/* PRE-MARKET / faded yesterday tape rows */

/* JUST happened — cooldown highlight */

/* ── 7.  FINEPRINT FOOTER ─────────────────────────────────────────── */

/* ── 8.  MOBILE — stack STATE on top, TAPE below ─────────────────── */
@media (max-width: 980px) {
  .card-signals {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto auto !important;
    grid-template-areas:
      "header"
      "state"
      "tape"
      "fine" !important;
    min-height: 0;
  }
  .card-signals .ck-state-body,
  .card-signals #cockpitStateBody {
    border-right: none;
    border-bottom: 1px solid rgba(0,255,136,0.10);
    padding: 18px 18px 14px !important;
  }
  .card-signals .ck-trail,
  .card-signals #cockpitTrail {
    padding: 16px 18px !important;
  }
}
@media (max-width: 560px) {

}

/* ── TAPE session ribbon — 09:15→15:30 strip with setup ticks ──────── */

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  LIGHT MODE — full --rd-* token flip + hardcoded-dark patches           ║
   ║                                                                          ║
   ║  Warm paper palette (F5F0EB base). Cockpit/radar panel stays dark —     ║
   ║  the radar sweep needs a dark canvas to glow.                           ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── 1. TOKEN FLIP ── */
body.light-theme {
  --rd-bg:           #F5F0EB;
  --rd-bg-1:         #EDE8E3;
  --rd-bg-2:         #E4DED8;
  --rd-bg-warm:      #F0E8DF;
  --rd-bg-warm-2:    #EBE3DA;
  --rd-bg-inset:     #DDD7D1;

  --rd-rule:         rgba(26,22,18,0.06);
  --rd-border:       rgba(26,22,18,0.10);
  --rd-border-s:     rgba(26,22,18,0.18);
  --rd-border-warm:  rgba(160,100,40,0.20);
  --rd-hair:         rgba(26,22,18,0.04);

  --rd-text:         #1A1612;
  --rd-text-2:       #3A3028;
  --rd-text-3:       #7A6F65;
  --rd-text-mute:    #A89888;
  --rd-text-faint:   #C8BCB4;

  --rd-warm:         #A06B24;
  --rd-warm-soft:    #7A5218;
  --rd-warm-glow:    rgba(160,107,36,0.30);

  --rd-green:        #0A9950;
  --rd-green-soft:   #0A7A40;
  --rd-cyan:         #1A6FA8;
  --rd-cyan-soft:    #145A8A;
  --rd-red:          #C83050;
  --rd-amber:        #B87820;
  --rd-purple:       #6B4EC0;
}

/* ── 2. BASE — override the !important dark bg/color set on html,body ── */
html body.light-theme,
body.light-theme {
  background: var(--rd-bg) !important;
  color: var(--rd-text) !important;
}

/* ── 3. REMOVE CRT VIGNETTE + SCANLINE — looks wrong on cream ── */
body.light-theme::before { display: none !important; }

/* ── 4. SCROLLBAR ── */
body.light-theme ::-webkit-scrollbar-thumb { background: rgba(26,22,18,0.15); }
body.light-theme ::-webkit-scrollbar-track { background: var(--rd-bg-inset); }

/* ── 5. HEADER ── */
body.light-theme .header {
  background: linear-gradient(180deg, var(--rd-bg-1) 0%, var(--rd-bg) 70%) !important;
  border-bottom-color: var(--rd-border) !important;
}
body.light-theme .header::after {
  background: linear-gradient(90deg,
    transparent 0%,
    var(--rd-warm-glow) 30%,
    var(--rd-warm-glow) 70%,
    transparent 100%);
  opacity: 0.30;
}
body.light-theme .dhan-nav {
  background: rgba(26,22,18,0.04) !important;
  border-bottom-color: var(--rd-rule) !important;
}

/* ── 6. SOS BUTTON ── */
body.light-theme #sosLockBtn {
  background: rgba(200,48,80,0.07) !important;
  border-color: rgba(200,48,80,0.35) !important;
  color: var(--rd-red) !important;
  text-shadow: none !important;
  box-shadow: 0 0 0 1px rgba(200,48,80,0.12) !important;
}
body.light-theme #sosLockBtn:hover {
  background: rgba(200,48,80,0.13) !important;
}
body.light-theme #sosLockBtn .sos-sub { color: rgba(200,48,80,0.65) !important; }

/* ── 7. TICKER STRIP ── */
body.light-theme .dhan-ticker {
  background: var(--rd-bg-inset) !important;
  border-bottom-color: var(--rd-border) !important;
}

/* ── 8. STATS-GRID CARDS ── */
body.light-theme .stats-grid > .card,
body.light-theme .charts-row > .chart-card,
body.light-theme body > .card-dark {
  background: linear-gradient(180deg, var(--rd-bg-1) 0%, var(--rd-bg-2) 100%) !important;
  border-color: var(--rd-border) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.60) inset,
    0 4px 16px -6px rgba(26,22,18,0.12) !important;
}

/* ── 9. CYCLE TODAY PANEL — stays warm parchment, just lighter ── */
body.light-theme .cx-today-panel {
  background:
    radial-gradient(900px 360px at 50% -10%, rgba(160,107,36,0.08), transparent 55%),
    radial-gradient(600px 300px at 50% 110%, rgba(160,107,36,0.04), transparent 50%),
    linear-gradient(180deg, var(--rd-bg-warm) 0%, var(--rd-bg-warm-2) 100%) !important;
  border-color: var(--rd-border-warm) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.55) inset,
    0 8px 32px -12px rgba(26,22,18,0.18) !important;
}
body.light-theme .cx-cycle-footer {
  background: rgba(26,22,18,0.04) !important;
}
body.light-theme .cx-unmeasured-bar {
  background: rgba(184,120,32,0.06) !important;
  border-bottom-color: rgba(184,120,32,0.22) !important;
}

/* ── 10. COCKPIT / DATA-SAYS NARRATOR — true light theme (paper console) ──
   Was dark-locked; now flips to cream/ink with softened accents. Full interior
   override lives in the "COCKPIT DATA NARRATOR v3 — LIGHT THEME" block below. */
body.light-theme #card3.card-signals,
body.light-theme .card-signals {
  background:
    radial-gradient(900px 600px at 100% 0%, rgba(10,153,80,0.04), transparent 50%),
    radial-gradient(700px 500px at 0% 100%, rgba(26,111,168,0.05), transparent 55%),
    linear-gradient(180deg, var(--rd-bg-1) 0%, var(--rd-bg-2) 100%) !important;
  border-color: var(--rd-border) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.55) inset,
    0 8px 30px -14px rgba(26,22,18,0.16) !important;
}
/* radar sweep: fade + cool the green so it reads as a faint scan on paper */
body.light-theme .card-signals .ck-ai-bg {
  opacity: 0.38 !important;
  filter: saturate(0.4) hue-rotate(45deg);
}
/* ck3 session ribbon text */

/* ── 11. EXISTING FOOTER (pre-design .dx-footer) ── */
body.light-theme .dx-footer {
  background: var(--bg-inset) !important;
  border-top-color: var(--border-subtle) !important;
}
/* ============================================================================
   STATS-GRID 20% VERTICAL COMPACTION — symmetric shrink across all 3 cards
   (Proximity · Trend Indicators · Wall Movements)
   ============================================================================ */
.stats-grid > .card {
  min-height: 416px !important;
  padding: var(--s-4) var(--s-5) !important;
}

/* ── Card 1 · Proximity Hub ── */
.stats-grid > .prox-card .ph-modern { gap: var(--s-3) !important; }
.stats-grid > .prox-card .ph-mod {
  padding: var(--s-3) var(--s-4) !important;
  gap: var(--s-2) !important;
}
.stats-grid > .prox-card .ph-oi-v { font-size: 26px !important; }
.stats-grid > .prox-card .ph-oi-grid { padding: 2px var(--s-3) 4px !important; }
.stats-grid > .prox-card .ph-flow-body { padding: var(--s-2) var(--s-4) !important; }
.stats-grid > .prox-card .ph-flow-v { font-size: 18px !important; }
.stats-grid > .prox-card .ph-wall { padding: var(--s-2) var(--s-3) !important; gap: 4px !important; }
.stats-grid > .prox-card .heat-anchor-val,
.stats-grid > .prox-card .ph-spot-v { font-size: 22px !important; }

/* ── Card 2 · Trend Indicators ── */
.stats-grid > .card-analytics .ti-modern { gap: var(--s-3) !important; }
.stats-grid > .card-analytics .ti-mod {
  padding: var(--s-3) var(--s-4) var(--s-2) !important;
  gap: var(--s-2) !important;
}
.stats-grid > .card-analytics .ti-pcr-readout { padding: 2px var(--s-3) !important; }
.stats-grid > .card-analytics .ti-pcr-value { font-size: 26px !important; }
.stats-grid > .card-analytics .ti-iv-cell-v { font-size: 20px !important; }
.stats-grid > .card-analytics .ti-tile { padding: var(--s-2) var(--s-3) !important; }
.stats-grid > .card-analytics .ti-tile-v { font-size: 22px !important; }

/* ── Card 3 · Wall Movements (timeline) ── */

/* ============================================================================
   FOOTER — scale footer to ~60% (the wax-seal stamp's own ::before rule
   was deleted outright, so no kill-rule is needed to suppress it anymore)
   ============================================================================ */
.dx-footer {
  padding: 16px 22px 10px !important;
  margin-top: 20px !important;
}
.dx-footer::after { left: 22px !important; right: 22px !important; top: 10px !important; }

/* ============================================================================
   HEADER ROWS — breathing space between dhan-nav (row 1) and dhan-ticker (row 2)
   Desktop only: mobile (<=768px) uses the grid layout from the earlier mobile
   media query, which needs height:auto to fit all rows.
   ============================================================================ */
.dhan-nav {
  height: 52px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  /* Pinned so the fixed voice instrument (.dn-center, below) can anchor to
     this bar's real height instead of a disconnected magic number — this
     value has drifted across 4 uncoordinated .dhan-nav rules already
     (36/40/44/44/52px), this is the one that wins the cascade. */
  --dn-h: 52px;
}
@media (min-width: 769px) {
  .dhan-ticker {
    height: 78px !important;
    min-height: 78px !important;
    max-height: 78px !important;
    margin-top: 10px !important;
    border-top: 1px solid var(--rd-rule) !important;
  }
}
@media (max-width: 768px) {
  .dhan-ticker {
    margin-top: 6px !important;
    border-top: 1px solid var(--rd-rule) !important;
  }
  #sessionBadge { display: none !important; }
}

/* ============================================================================
   MOBILE / NARROW VIEWPORT — collapse top-pair + stats-grid + charts-row
   to single column so cards auto-size to browser width
   ============================================================================ */
@media (max-width: 1100px) {
  .top-pair {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .top-pair > .cx-today-panel,
  .top-pair > .card-signals {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}
@media (max-width: 1100px) {
  .top-pair {
    gap: 32px !important;
    row-gap: 32px !important;
  }
  .stats-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 44px !important;
    row-gap: 44px !important;
  }
  .stats-grid > .card {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
  .charts-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 44px !important;
    row-gap: 44px !important;
  }
  .charts-row > .chart-card {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}
@media (max-width: 640px) {
  .top-pair,
  .stats-grid,
  .charts-row {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
}

/* ============================================================================
   FOOTER MOBILE — collapse to 2 cols on tablet, 1 col on phone
   ============================================================================ */
@media (max-width: 900px) {
  .dx-footer {
    padding: 18px 16px 12px !important;
  }
}

@media (max-width: 600px) {
  .dx-footer {
    padding: 16px 14px 10px !important;
    margin-top: 16px !important;
    text-align: center !important;
  }
  .dx-footer::after { left: 14px !important; right: 14px !important; }
}

/* ============================================================================
   INLINE-STYLE EXTRACTION — PR4 cleanup
   Styles that lived only in HTML style="" attrs; moved to CSS.
   ============================================================================ */

/* Alert dock: positioning (appearance already in style.css #alertDock) */
#alertDock {
  position: fixed;
  top: 80px;
  right: 12px;
  z-index: 900;
  max-width: 300px;
  max-height: 300px;
  overflow-y: auto;
}

/* Theme label chip inside user dropdown */
#themeToggleLabel {
  font-size: 9px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .1em;
  opacity: .6;
}

/* Initially-hidden elements — JS overrides with element.style.display */
#goLiveBtn             { display: none; }
#signalLogOverlay      { display: none; }
#sigSidebarOverlay     { display: none; }
#replayBar             { display: none; }
#payHistoryModal       { display: none; }
/* #regime-context-banner visibility is controlled by the .show class in style.css */
#cxPremarketOverlay    { display: none; }
#wallProximityBadge    { display: none; }
#cxTodayPanel          { display: none; }
#cxUnmeasuredBar       { display: none; }
#cxMastheadStreak      { display: none; }
#cxMastheadProbation   { display: none; }
#callPutCrossNote      { display: none; }

/* Error / warn bars: hidden + their margin */
#errorBar { display: none; margin: 8px 12px; }
#warnBar  { display: none; margin: 8px 12px; }

/* Compat stub wrappers — static legacy hooks, never visible */
.bx-compat-stubs { display: none; }

/* Inline enlarge button (sits in controls row, not overlaid on chart) */

/* Chart fullscreen-bar title text */
.chart-fs-title {
  font-size: 11px;
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: .5px;
}

/* Chart fs-bar controls flex group */
.chart-fs-controls { display: flex; align-items: center; gap: 8px; }

/* Minimize close button inside fullscreen chart bar */
.minimize-btn { font-size: 10px; padding: 2px 10px; }

/* Flex spacer in chart controls row */
.chart-ctrl-spacer { flex: 1; min-width: 6px; }

/* Auto-cycle button in right chart controls */
#cycleBtnR { font-size: 11px; padding: 3px 10px; flex-shrink: 0; }

/* Calendar footer action row */
.cal-footer-row { display: flex; justify-content: center; margin-top: 8px; }

/* "Go to Today" calendar button */
.cal-goto-today {
  font-size: 10px;
  padding: 3px 12px;
  border-color: #22c55e;
  color: #22c55e;
}

/* Signals modal — initially hidden */
#sigModalBg { display: none; }

/* Net flow section — flex row by default */
#proxNetFlow { display: flex; }

/* ══════════════════════════════════════════════════════════════════
   COCKPIT DATA NARRATOR v3
   Extracted from design-testing/cockpit/data-narrator-v3.html
   Root selector: #card3 (design file used .cockpit)
   ══════════════════════════════════════════════════════════════════ */

@keyframes c3nBlink    { 0%,50%{opacity:1}51%,100%{opacity:0} }
@keyframes c3nPulse    { 0%{box-shadow:0 0 0 0 #2ee6a077}70%{box-shadow:0 0 0 7px #2ee6a000}100%{box-shadow:0 0 0 0 #2ee6a000} }
@keyframes c3nWorkGlow { 0%,100%{filter:brightness(1)}50%{filter:brightness(1.7)} }
@keyframes c3nThinkDot { 0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)} }

#card3[data-dir="bull"] { border-color:#1c4a3a; box-shadow:0 34px 90px -34px #000,0 0 70px -22px #2ee6a022,inset 0 1px 0 #ffffff0a; }
#card3[data-dir="bear"] { border-color:#4a1f27; box-shadow:0 34px 90px -34px #000,0 0 70px -22px #ff5d6c22,inset 0 1px 0 #ffffff0a; }
#card3[data-dir="amber"]{ border-color:#4a3a1c; box-shadow:0 34px 90px -34px #000,0 0 70px -22px #ffb54722,inset 0 1px 0 #ffffff0a; }

/* .inner spans the full grid — header + state + tape + fine rows */
#card3 .inner {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1 !important;
  grid-row: 1 / -1 !important;
  height: auto !important;
  overflow: hidden !important;
  visibility: visible !important;
  pointer-events: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

#card3 .head { display:flex; align-items:center; gap:10px; padding:14px 20px 11px; border-bottom:1px solid #ffffff0c; }
#card3 .head .kick { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.26em; color:#36e0c8; text-shadow:0 0 14px #36e0c855; display:flex; align-items:center; gap:8px; }
#card3[data-dir="bear"] .head .kick { color:#ff8a95; text-shadow:0 0 14px #ff5d6c55; }
#card3 .head .cur { display:inline-block; width:8px; height:14px; background:currentColor; border-radius:1px; animation:c3nBlink 1.05s steps(1) infinite; }
#card3 .head .ctx { margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.12em; color:#46566f; display:flex; align-items:center; gap:8px; }
#card3 .head .live { width:7px; height:7px; border-radius:50%; background:#2ee6a0; animation:c3nPulse 2s infinite; flex-shrink:0; }
#card3.working .head .kick { animation:c3nWorkGlow 1.1s ease-in-out infinite; }

#card3 .ck-hist-btn { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.06em; color:#46566f; background:none; border:1px solid #1b2740; border-radius:4px; padding:2px 8px; cursor:pointer; transition:.15s; white-space:nowrap; }
#card3 .ck-hist-btn:hover { color:#8595ad; border-color:#2d3f5c; }

/* ── Voice pill (nav bar) — orb redesign ──────────────────────────────────── */
/* Founder-handcrafted redesign (Claude Design, 2026-07-17): the flat
   equalizer bars + SVG mast icon are replaced by a canvas orb
   (modules/voiceBroadcast/orbEngine.js — #vxOrbMini here, #vxOrbPop in the
   panel, #vxOrbBig + #vxRibbon in the mentor card, css/lazy/mentor.css).
   Class-driven states: OFF (no .on) / ARMED (.on) / SPEAKING+linger
   (.on.captioning; .speaking gets the glow shadow below). The four brand
   stops (--dx-voiceA..D, declared in :root above) are no longer static —
   orbEngine.setMode() overrides them per broadcast channel (mentor/
   motivation/market), recoloring the orbs, border-pan, edge glow and the
   panel's gradient title together. */
/* style.css sets .dn-center { pointer-events:none } (legacy empty slot); it
   inherits down and kills clicks on the voice control. Re-enable it for just
   the control so the rest of the (empty) center slot still doesn't block. */
.dn-center .ck-voice-wrap { position:relative; display:inline-flex; align-items:center; height:44px; pointer-events:auto; min-width:0; max-width:100%; }
.dn-voice-btn {
  position:relative; cursor:pointer;
  display:flex; align-items:center; gap:11px;
  max-width:min(480px, 100%);
  height:44px; padding:0 18px 0 6px; border-radius:999px; line-height:1;
  overflow:hidden; box-sizing:border-box;
  /* Was rgba(255,255,255,.03) — near-invisible, fine back when this only
     ever sat on the dark header bg. Now position:fixed (above), it floats
     over arbitrary scrolled page content, so it needs to read as a floating
     chip on its own — no backdrop-filter (kept literally un-blurred per the
     redesign brief), just a more opaque fill + its own shadow. */
  background:rgba(8,13,22,0.82);
  box-shadow:0 6px 18px -8px rgba(0,0,0,0.55);
  border:1px solid rgba(92,122,158,0.35);
  color:#5c7a9e; transition:color .15s, background .15s, border-color .15s;
}
.dn-voice-btn:hover { color:#8aa4c8; background:rgba(255,255,255,0.06); }

/* orb canvas — sized via CSS, drawn at 2x resolution (canvas width/height
   attrs in index.html) for crispness. Fallback: orbEngine bailed (mobile /
   reduced-motion / weak device) — a static gradient blob stands in, still
   recolored by setMode() since it's driven by the same custom properties. */
.vx-orb-mini { width:72px; height:72px; flex:0 0 auto; filter:saturate(1.4); }
.dn-voice-btn:not(.on) .vx-orb-mini { opacity:.6; }
.vx-orb-fallback {
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,
    color-mix(in oklab, var(--dx-voiceA) 70%, transparent) 0%,
    color-mix(in oklab, var(--dx-voiceC) 45%, transparent) 45%,
    transparent 72%);
}

/* OFF: a slow diagonal color sweep across the pill hints the orb is alive
   even at rest. ON: an animated gradient-pan border replaces the flat
   outline. SPEAKING: glow shadow on top of the border-pan. */
.dn-voice-btn:not(.on)::after {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(115deg, transparent 32%,
    color-mix(in oklab, var(--dx-voiceA) 16%, transparent) 44%,
    color-mix(in oklab, var(--dx-voiceB) 22%, transparent) 50%,
    color-mix(in oklab, var(--dx-voiceC) 16%, transparent) 56%, transparent 68%);
  background-size:260% 100%; animation:vxSweep 9s ease-in-out infinite;
}
@keyframes vxSweep { 0%,80% { background-position:135% 0; } 94%,100% { background-position:-45% 0; } }
.dn-voice-btn.on {
  color:#dbe7ff; border:1px solid transparent;
  background:linear-gradient(rgba(9,13,22,.9),rgba(9,13,22,.9)) padding-box,
             linear-gradient(120deg, var(--dx-voiceA), var(--dx-voiceB), var(--dx-voiceC), var(--dx-voiceD), var(--dx-voiceA)) border-box;
  background-size:100% 100%, 320% 100%;
  animation:vxBorderPan 7s linear infinite;
}
@keyframes vxBorderPan { to { background-position:0 0, 320% 0; } }
.dn-voice-btn.speaking { box-shadow:0 0 16px -4px var(--dx-voiceA), 0 0 34px -10px var(--dx-voiceC); }

/* BLOCKED (2026-07-16): a submitted read never reached onstart within its
   watchdog window — the pill turns red so silence is never mistaken for
   "nothing scheduled yet". Cleared by the next real onstart or a user
   gesture that attempts to speak again. */
.dn-voice-btn.on.blocked { color:#E8593F; border-color:rgba(232,89,63,0.4); animation:none; background:rgba(232,89,63,0.08); }

/* Small "ON AIR"/"ARMED" badge next to the orb — hidden while OFF and while
   captioning (the caption itself is the status then). */
.vx-pill-state { display:none; font:600 10px/1 'IBM Plex Mono', 'JetBrains Mono', monospace; letter-spacing:.16em; color:#8fe6c4; }
.dn-voice-btn.on:not(.captioning) .vx-pill-state { display:inline; }
.dn-voice-btn.speaking .vx-pill-state { color:#fff; text-shadow:0 0 8px var(--dx-voiceA); }

/* OFF: dim outlined pill + small invite label; caption hidden */
.dn-vp-off {
  font-size:11px; white-space:nowrap; color:inherit;
  font-family:'DM Sans', -apple-system, sans-serif;
}
.dn-voice-btn.on .dn-vp-off { display:none; }
.dn-voice-btn:not(.on) .dn-vp-caption { display:none; }

/* Caption window: collapsed while armed, expands in place while captioning
   (speech + 4s linger — voicePill.js toggles .captioning). Single line; the
   inner span slides horizontally (voicePill.js sets the transform) so the
   highlighted word stays in view. Right-edge fade via mask. */
.dn-vp-caption {
  display:block; min-width:0; max-width:0; opacity:0; overflow:hidden;
  white-space:nowrap;
  font-family:'DM Sans', -apple-system, sans-serif;
  font-size:14px; line-height:1.3; color:#cdd9ec; text-align:left;
  transition:max-width .3s ease, opacity .25s ease;
  -webkit-mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 18px), transparent 100%);
          mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 18px), transparent 100%);
}
.dn-voice-btn.captioning .dn-vp-caption { max-width:460px; opacity:1; }

/* Fixed-to-viewport instrument (2026-07-24 redesign): was "true viewport
   centering" via position:absolute, which still scrolled away with .header
   since .header/.dhan-nav is never position:sticky/fixed anywhere in this
   app. Now position:fixed so the whole button+panel unit survives page
   scroll — the popover is already position:absolute relative to .dn-center
   (css/lazy/broadcastPanel.css), so this one change carries it along too,
   no other positioning rule needs to move. top:var(--dn-h) (not a derived
   half-height calc) puts the pill's visual center — via the existing
   translate(-50%,-50%) — exactly on the seam between header and content,
   tied to one variable instead of a compound formula that silently drifts
   if the nav's height ever changes again (it already has, 4 times).
   z-index bumped past #dxMentorCard (10050, css/lazy/mentor.css) so the
   persistent instrument reliably wins against a reminder card popping
   while it's open; the old desktop scrim this comment used to reference is
   gone (css/lazy/broadcastPanel.css) — solid panel bg needed it for nothing
   but focus-dimming. */
@media (min-width:769px) {
  .dhan-nav { position:relative; }
  .dn-center {
    /* --dn-center-top is written every scroll frame by voicePill.js, from
       26px (visual center of the 52px header bar, --dn-h/2) at scrollY:0 up
       to 52px (--dn-h — this rule's old static value, kept as the resting
       coordinate the instrument settles into and never passes) once the
       user has scrolled ~90px. Falls back to --dn-h if JS hasn't run yet. */
    position:fixed !important; left:50% !important; top:var(--dn-center-top, var(--dn-h)) !important;
    transform:translate(-50%,-50%) !important; z-index:10100;
    transition:top .08s ease-out;
    /* Shared join width for the fused button+panel instrument
       (css/lazy/broadcastPanel.css) — one token so the two never drift
       apart. Overridden to 740px inside that file's own ≥900px two-column
       tier, matching the panel's existing width at that breakpoint. */
    --vx-instrument-width: 380px;
  }
  /* Guard against overlap with the left/right header blocks now that the
     pill is truly centered rather than squeezed into leftover grid space
     (supersedes the old fixed 769-1080px clamp — the formula scales with
     however much room true centering actually leaves at any width). */
  .dn-voice-btn.captioning .dn-vp-caption { max-width:min(340px, calc(100vw - 620px)); }
}
.dn-vp-caption-inner {
  display:inline-block; white-space:nowrap;
  transition:transform .25s ease; will-change:transform;
}
.dn-vp-word {
  color:var(--gold, #E8A33D); /* color-only — no layout shift */
  animation:dnVpWordPulse .25s ease-out;
}
@keyframes dnVpWordPulse {
  0%   { color:#fff; text-shadow:0 0 6px rgba(232,163,61,.9); }
  100% { color:var(--gold, #E8A33D); text-shadow:0 0 0 rgba(232,163,61,0); }
}

/* Full-width top edge glow (#vxEdge, index.html, right after </header>) —
   lights up with a moving brand gradient while The Broadcast speaks. This
   is the "header colour animation": it's driven by the same --dx-voiceA..D
   custom properties orbEngine.setMode() overrides, so a mentor read glows
   red/pink, motivation glows yellow/orange, a market read glows blue/cyan. */
#vxEdge {
  position:fixed; top:0; left:0; right:0; height:3px; z-index:1500;
  pointer-events:none; opacity:0; transition:opacity .6s;
  background:linear-gradient(90deg, var(--dx-voiceA), var(--dx-voiceB), var(--dx-voiceC), var(--dx-voiceD), var(--dx-voiceA));
  /* Full-width tile (100%, not 220%) — the old crop showed only a ~45%
     slice of the 5-stop cycle at any moment, which could land on two
     hue-distant stops with nothing between them (the visible "hard seam").
     Showing the whole A→B→C→D→A cycle at once keeps every stop's neighbor
     in view. Panning by exactly one tile width (100%, matched in the
     keyframe below) loops seamlessly too: the tile starts and ends on the
     same color A, so the repeat boundary is invisible. */
  background-size:100% 100%;
  animation:vxEdgePan 6s linear infinite;
}
#vxEdge::after {
  content:''; position:absolute; left:0; right:0; top:0; height:22px;
  background:inherit; background-size:inherit; animation:inherit;
  filter:blur(20px); opacity:.65;
}
#vxEdge.speaking { opacity:1; }
@keyframes vxEdgePan { to { background-position:100% 0; } }

@media (prefers-reduced-motion: reduce) {
  .dn-voice-btn:not(.on)::after { animation:none; }
  .dn-voice-btn.on { animation:none; }
  #vxEdge, #vxEdge::after { animation:none; }
  .dn-vp-caption { transition:none; }
  .dn-vp-caption-inner { transition:none; }
  .dn-vp-word { animation:none; }
}

/* Broadcast panel (#c3VoicePopover) — styled by css/lazy/broadcastPanel.css,
   loaded on first open. Kept out of this always-loaded bundle deliberately
   (ops gotcha: dashboard.css must not grow with daily-loop surfaces). */

#card3 .prog { height:2px; background:#0e1626; }
#card3 .prog .bar2 { height:100%; width:0; background:linear-gradient(90deg,#36e0c8,#7af0dd); transition:width .25s linear; box-shadow:0 0 8px #36e0c8aa; }
#card3[data-dir="bear"] .prog .bar2 { background:linear-gradient(90deg,#ff5d6c,#ff9aa3); }

#card3 .read {
  position:relative; height:372px; overflow-y:auto; padding:18px 20px 24px; scroll-behavior:smooth;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22px,#000 calc(100% - 30px),transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 22px,#000 calc(100% - 30px),transparent 100%);
  scrollbar-width:thin; scrollbar-color:#22304a transparent; cursor:default;
}
#card3 .read::-webkit-scrollbar { width:5px; }
#card3 .read::-webkit-scrollbar-thumb { background:#22304a; border-radius:3px; }

#card3 .b { opacity:0; transform:translateY(6px); transition:opacity .35s,transform .35s; }
#card3 .b.in { opacity:1; transform:none; }

#card3 .tcaret { display:inline-block; width:7px; height:1.05em; background:#36e0c8; border-radius:1px; margin-left:2px; transform:translateY(2px); box-shadow:0 0 8px #36e0c8aa; animation:c3nBlink .85s steps(1) infinite; }
#card3[data-dir="bear"] .tcaret { background:#ff5d6c; box-shadow:0 0 8px #ff5d6caa; }

#card3 .lead { font-family:'Newsreader',Georgia,serif; font-size:26px; line-height:1.28; color:#f1f5fc; margin:2px 0 4px; }
#card3 .lead .up { color:#8ff7cf; }
#card3 .lead .dn { color:#ffafb6; }
#card3 .say  { font-family:'Newsreader',Georgia,serif; font-size:18px; line-height:1.5; color:#c7d3e6; margin:14px 0 8px; }
#card3 .say.small { font-size:15px; color:#92a2bd; }

#card3 .think { display:flex; align-items:center; gap:9px; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.16em; color:#36e0c8; margin:14px 0 6px; opacity:.85; }
#card3 .think .d { display:inline-flex; gap:4px; }
#card3 .think .d i { width:5px; height:5px; border-radius:50%; background:currentColor; animation:c3nThinkDot 1s infinite; display:inline-block; }
#card3 .think .d i:nth-child(2) { animation-delay:.15s; }
#card3 .think .d i:nth-child(3) { animation-delay:.3s; }

#card3 .sectlabel { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.2em; color:#46566f; margin:16px 0 8px; display:flex; align-items:center; gap:9px; }
#card3 .sectlabel::after { content:""; flex:1; height:1px; background:#ffffff10; }

#card3 .ev { display:flex; align-items:center; gap:10px; padding:6px 11px; border-radius:9px; margin-bottom:5px; background:#0a111e; border:1px solid #131d30; border-left-width:2px; }
#card3 .ev.bull { border-left-color:#2ee6a0; }
#card3 .ev.bear { border-left-color:#ff5d6c; }
#card3 .ev .ic   { font-size:14px; line-height:1; flex-shrink:0; }
#card3 .ev .body { flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:7px; line-height:1.4; }
#card3 .ev .t    { font-family:'JetBrains Mono',monospace; font-size:10px; color:#46566f; letter-spacing:.04em; flex-shrink:0; }
#card3 .ev .what { font-size:13.5px; color:#dde6f4; font-weight:500; }
#card3 .ev .mean { font-family:'Newsreader',Georgia,serif; font-style:italic; font-size:13px; color:#7f8fab; }
#card3 .ev .tag  { flex-shrink:0; font-family:'JetBrains Mono',monospace; font-size:8.5px; letter-spacing:.1em; padding:2px 6px; border-radius:4px; }
#card3 .ev.bull .tag { color:#2ee6a0; background:#2ee6a015; }
#card3 .ev.bear .tag { color:#ff5d6c; background:#ff5d6c15; }

#card3 .meter { margin:14px 0 4px; }
#card3 .meter .mnum { font-family:'JetBrains Mono',monospace; font-weight:700; font-size:40px; line-height:1; letter-spacing:-.02em; color:#fff; margin-bottom:10px; }
#card3[data-dir="bull"]  .meter .mnum { color:#8ff7cf; }
#card3[data-dir="bear"]  .meter .mnum { color:#ffafb6; }
#card3[data-dir="amber"] .meter .mnum { color:#ffd699; }
#card3 .meter .mnum small { font-size:18px; color:#8595ad; font-weight:500; margin-left:2px; }
#card3 .meter .track  { position:relative; height:13px; border-radius:7px; background:#0c1322; border:1px solid #1a2436; overflow:hidden; }
#card3 .meter .fill   { position:absolute; left:0; top:0; bottom:0; width:0; border-radius:7px; background:linear-gradient(90deg,#1c8f68,#2ee6a0); transition:width 1s cubic-bezier(.2,.7,.2,1); }
#card3[data-dir="bear"]  .meter .fill { background:linear-gradient(90deg,#9c3540,#ff5d6c); }
#card3[data-dir="amber"] .meter .fill { background:linear-gradient(90deg,#9c7a35,#ffb547); }
#card3 .meter .thresh { position:absolute; top:-3px; bottom:-3px; width:2px; background:#dfe7f3; left:62%; }
#card3 .meter .thresh::after { content:"62%"; position:absolute; top:-14px; left:50%; transform:translateX(-50%); font-family:'JetBrains Mono',monospace; font-size:8px; color:#aeb9cc; }
#card3 .meter .cap { margin-top:11px; font-family:'Newsreader',Georgia,serif; font-style:italic; font-size:14.5px; color:#92a2bd; }
#card3 .meter .cap b { font-style:normal; color:#fff; }

#card3 .lv { display:flex; justify-content:space-between; align-items:baseline; padding:8px 0; border-bottom:1px solid #ffffff08; font-family:'JetBrains Mono',monospace; }
#card3 .lv:last-child { border-bottom:0; }
#card3 .lv .lab { font-size:10.5px; letter-spacing:.1em; color:#46566f; }
#card3 .lv .val { font-size:18px; font-weight:700; color:#e7eefb; }
#card3 .lv .val.up { color:#2ee6a0; }
#card3 .lv .val.dn { color:#ff5d6c; }
#card3 .lv .val.x  { color:#ffb547; }
#card3 .lv .val small { font-size:9.5px; color:#46566f; font-weight:400; margin-left:5px; letter-spacing:0; }

#card3 .close { font-family:'Newsreader',Georgia,serif; font-style:italic; font-size:19px; line-height:1.45; color:#dbe5f4; margin:18px 0 6px; }
#card3 .close b { font-style:normal; font-weight:600; color:#fff; }

#card3 .ask { display:flex; flex-wrap:wrap; gap:8px; padding:10px 20px 4px; opacity:0; transition:opacity .5s; border-top:1px solid #ffffff0c; }
#card3 .ask.in { opacity:1; }
#card3 .chip { font-family:'JetBrains Mono',monospace; font-size:11px; color:#bcd9ff; background:#0d1a2e; border:1px solid #1d3656; border-radius:999px; padding:7px 13px; cursor:pointer; transition:.15s; }
#card3 .chip:hover { background:#143052; border-color:#2f5586; color:#fff; }
#card3 .chip.reread { color:#9fb0c8; background:#10182a; border-color:#26344e; }
#card3 .chip.on { background:#143052; border-color:#36e0c8; color:#fff; }
#card3[data-dir="bear"] .chip.on { border-color:#ff8a95; }

/* Live header telemetry — "Ns ago" ticker that keeps the analyzer looking alive */
#card3 .c3-tele { color:#5a6c88; font-variant-numeric:tabular-nums; }
#card3 .answer .ansthink { margin:10px 0 2px; }

#card3 .answer { padding:2px 20px 0; }
#card3 .answer .a { font-family:'Newsreader',Georgia,serif; font-size:16px; line-height:1.5; color:#cdd9ec; border-left:2px solid #36e0c8; padding:6px 0 6px 13px; margin-top:8px; }
#card3 .answer .a b { color:#fff; font-style:normal; font-weight:600; }

#card3 .c3-ticker-wrap {
  border-top: 1px solid #ffffff0c;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  height: 24px;
  display: flex;
  align-items: center;
}
#card3 .c3-ticker-track {
  display: inline-flex;
  animation: c3TickerScroll 40s linear infinite;
  will-change: transform;
}
#card3 .c3-ticker-inner {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .06em;
  color: #5d7a9a;
  padding: 0 0 0 20px;
  white-space: nowrap;
}
#card3 .c3-ticker-inner b { font-style: normal; font-weight: 600; color: #8aa0c0; }
@keyframes c3TickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
body.light-theme #card3 .c3-ticker-wrap  { border-top-color: rgba(26,22,18,0.08); }
body.light-theme #card3 .c3-ticker-inner { color: #7a6a5e; }
body.light-theme #card3 .c3-ticker-inner b { color: #3A3028; }

/* ══════════════════════════════════════════════════════════════════
   COCKPIT DATA NARRATOR v3 — LIGHT THEME (paper console)
   Mirrors the dark hex palette above onto cream/ink + softened accents.
   Accent map: cyan #36e0c8 → teal #1A6FA8 · green #2ee6a0 → #0A9950
               red #ff5d6c → #C83050 · amber #ffb547 → #B87820
   ══════════════════════════════════════════════════════════════════ */

/* live-dot vars consumed inline by cockpit/index.js (var with dark fallback) */
body.light-theme #card3 { --c3-dot-on:#0A9950; --c3-dot-off:#8a7d70; }

/* direction tint — softer borders + light shadows */
body.light-theme #card3[data-dir="bull"]  { border-color:rgba(10,153,80,0.40) !important;  box-shadow:0 8px 28px -16px rgba(10,153,80,0.30),0 1px 0 rgba(255,255,255,0.55) inset !important; }
body.light-theme #card3[data-dir="bear"]  { border-color:rgba(200,48,80,0.40) !important;  box-shadow:0 8px 28px -16px rgba(200,48,80,0.26),0 1px 0 rgba(255,255,255,0.55) inset !important; }
body.light-theme #card3[data-dir="amber"] { border-color:rgba(184,120,32,0.40) !important; box-shadow:0 8px 28px -16px rgba(184,120,32,0.26),0 1px 0 rgba(255,255,255,0.55) inset !important; }

/* header */
body.light-theme #card3 .head { border-bottom-color:rgba(26,22,18,0.08); }
body.light-theme #card3 .head .kick { color:#1A6FA8; text-shadow:none; }
body.light-theme #card3[data-dir="bear"] .head .kick { color:#C83050; text-shadow:none; }
body.light-theme #card3 .head .ctx  { color:#A89888; }
body.light-theme #card3 .head .live { background:#0A9950; }

/* history button */
body.light-theme #card3 .ck-hist-btn { color:#7A6F65; border-color:rgba(26,22,18,0.18); }
body.light-theme #card3 .ck-hist-btn:hover { color:#1A1612; border-color:rgba(26,22,18,0.35); }
/* Was rgba(26,22,18,.03) — relied on the (now-removed) desktop scrim for
   contrast against page content. Opaque-ish fill + its own shadow instead,
   same rationale as the dark-theme rule above. */
body.light-theme .dn-voice-btn { color:#8090a8; background:rgba(250,247,242,0.88); box-shadow:0 6px 18px -8px rgba(26,22,18,0.22); border-color:rgba(26,22,18,0.16); }
body.light-theme .dn-voice-btn:hover { color:#5c718e; background:rgba(26,22,18,0.06); }
/* Re-pin the gradient-border pill's opaque padding-box layer to a light
   surface (the dark-theme rule paints rgba(9,13,22,.9) behind the border
   gradient — wrong on a light background) — border-box layer unchanged. */
body.light-theme .dn-voice-btn.on {
  color:#1A6FA8;
  background:linear-gradient(rgba(245,243,237,.95),rgba(245,243,237,.95)) padding-box,
             linear-gradient(120deg, var(--dx-voiceA), var(--dx-voiceB), var(--dx-voiceC), var(--dx-voiceD), var(--dx-voiceA)) border-box;
}
/* light gold — same value family as broadcastPanel.css's light mentor wash */
body.light-theme .dn-vp-word { color:#B07A1E; animation-name:dnVpWordPulseLight; }
@keyframes dnVpWordPulseLight {
  0%   { color:#1A1612; text-shadow:0 0 6px rgba(176,122,30,.9); }
  100% { color:#B07A1E; text-shadow:0 0 0 rgba(176,122,30,0); }
}
body.light-theme .dn-vp-caption { color:#3a332b; }
/* Broadcast panel light-theme surface lives in css/lazy/broadcastPanel.css */

/* progress rail */
body.light-theme #card3 .prog { background:var(--rd-bg-inset); }
body.light-theme #card3 .prog .bar2 { background:linear-gradient(90deg,#1A6FA8,#3a8fc8); box-shadow:0 0 6px rgba(26,111,168,0.4); }
body.light-theme #card3[data-dir="bear"] .prog .bar2 { background:linear-gradient(90deg,#C83050,#d86578); }

/* read pane scrollbar */
body.light-theme #card3 .read { scrollbar-color:#C8BCB4 transparent; }
body.light-theme #card3 .read::-webkit-scrollbar-thumb { background:#C8BCB4; }

/* typing caret */
body.light-theme #card3 .tcaret { background:#1A6FA8; box-shadow:0 0 6px rgba(26,111,168,0.5); }
body.light-theme #card3[data-dir="bear"] .tcaret { background:#C83050; box-shadow:0 0 6px rgba(200,48,80,0.5); }

/* lead / say */
body.light-theme #card3 .lead { color:#1A1612; }
body.light-theme #card3 .lead .up { color:#0A7A40; }
body.light-theme #card3 .lead .dn { color:#C83050; }
body.light-theme #card3 .say  { color:#3A3028; }
body.light-theme #card3 .say.small { color:#7A6F65; }

/* think interstitial */
body.light-theme #card3 .think { color:#1A6FA8; }

/* section label */
body.light-theme #card3 .sectlabel { color:#A89888; }
body.light-theme #card3 .sectlabel::after { background:rgba(26,22,18,0.10); }

/* event rows */
body.light-theme #card3 .ev { background:var(--rd-bg-inset); border-color:rgba(26,22,18,0.10); }
body.light-theme #card3 .ev.bull { border-left-color:#0A9950; }
body.light-theme #card3 .ev.bear { border-left-color:#C83050; }
body.light-theme #card3 .ev .t   { color:#A89888; }
body.light-theme #card3 .ev .what { color:#1A1612; }
body.light-theme #card3 .ev .mean { color:#7A6F65; }
body.light-theme #card3 .ev.bull .tag { color:#0A7A40; background:rgba(10,153,80,0.12); }
body.light-theme #card3 .ev.bear .tag { color:#C83050; background:rgba(200,48,80,0.12); }

/* meter */
body.light-theme #card3 .meter .mnum { color:#1A1612; }
body.light-theme #card3[data-dir="bull"]  .meter .mnum { color:#0A7A40; }
body.light-theme #card3[data-dir="bear"]  .meter .mnum { color:#C83050; }
body.light-theme #card3[data-dir="amber"] .meter .mnum { color:#B87820; }
body.light-theme #card3 .meter .mnum small { color:#7A6F65; }
body.light-theme #card3 .meter .track { background:var(--rd-bg-inset); border-color:rgba(26,22,18,0.18); }
body.light-theme #card3 .meter .fill { background:linear-gradient(90deg,#0A7A40,#0A9950); }
body.light-theme #card3[data-dir="bear"]  .meter .fill { background:linear-gradient(90deg,#a8284a,#C83050); }
body.light-theme #card3[data-dir="amber"] .meter .fill { background:linear-gradient(90deg,#8a5a18,#B87820); }
body.light-theme #card3 .meter .thresh { background:rgba(26,22,18,0.45); }
body.light-theme #card3 .meter .thresh::after { color:#7A6F65; }
body.light-theme #card3 .meter .cap { color:#7A6F65; }
body.light-theme #card3 .meter .cap b { color:#1A1612; }

/* levels ledger */
body.light-theme #card3 .lv { border-bottom-color:rgba(26,22,18,0.08); }
body.light-theme #card3 .lv .lab { color:#A89888; }
body.light-theme #card3 .lv .val { color:#1A1612; }
body.light-theme #card3 .lv .val.up { color:#0A9950; }
body.light-theme #card3 .lv .val.dn { color:#C83050; }
body.light-theme #card3 .lv .val.x  { color:#B87820; }
body.light-theme #card3 .lv .val small { color:#A89888; }

/* close line */
body.light-theme #card3 .close { color:#3A3028; }
body.light-theme #card3 .close b { color:#1A1612; }

/* talk-back chips */
body.light-theme #card3 .ask { border-top-color:rgba(26,22,18,0.08); }
body.light-theme #card3 .chip { color:#1A6FA8; background:var(--rd-bg-inset); border-color:rgba(26,22,18,0.18); }
body.light-theme #card3 .chip:hover { background:#DDD7D1; border-color:#1A6FA8; color:#1A1612; }
body.light-theme #card3 .chip.reread { color:#7A6F65; background:var(--rd-bg-2); border-color:rgba(26,22,18,0.14); }
body.light-theme #card3 .chip.on { background:#DDD7D1; border-color:#1A6FA8; color:#1A1612; }
body.light-theme #card3 .c3-tele { color:#9A8F85; }

/* answer */
body.light-theme #card3 .answer .a { color:#3A3028; border-left-color:#1A6FA8; }
body.light-theme #card3 .answer .a b { color:#1A1612; }

/* spine + sebi */

/* ============================================================================
   OPTION CHAIN · SNIPER SCOPE  (NEW — modules/panels/optionChainSniper.js)
   Isolated .ocs- layer. Dark-locked, solid bg, no hover, no decorative
   gradients (only functional OI bars). 11-row ATM±5 sniper grid.
   ============================================================================ */
.ocs-card {
  --ocs-spine:      #1A1F2B;             /* lighter strike track            */
  --ocs-bar-call:   rgba(255,69,96,.13); /* muted crimson total-OI fill     */
  --ocs-bar-put:    rgba(0,255,136,.10); /* muted green total-OI fill       */
  --ocs-ghost:      #353B48;             /* Ghost-Zero: barely-visible Int 0 */
  --ocs-unwind:     #6B7384;             /* hollow/muted unwinding text     */
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-3) var(--s-3);
  font-family: var(--font-mono);
  -webkit-font-smoothing: antialiased;
}

/* header */
.ocs-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
  padding: 0 var(--s-2) var(--s-2);
  border-bottom: 1px solid var(--border);
}
.ocs-head-l { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ocs-title {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-secondary); font-weight: 700;
}
.ocs-snap  { font-size: 9px; color: var(--dim); }

/* shared 5-column template — outer momentum | inner premium | spine | … mirror */
.ocs-legend,
.ocs-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) clamp(58px,10vw,82px) minmax(0,1fr) minmax(0,1fr);
  align-items: stretch;
}

/* column legend */
.ocs-legend { padding: var(--s-2) 0 6px; }
.ocs-legend-cell {
  font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-label); text-align: center;
}
/* align each header with its data column */
.ocs-legend-cell:nth-child(1) { text-align: right;  padding-right: 12px; }
.ocs-legend-cell:nth-child(2) { text-align: right;  padding-right: 12px; }
.ocs-legend-cell:nth-child(3) { text-align: center; }
.ocs-legend-cell:nth-child(4) { text-align: left;   padding-left: 12px; }
.ocs-legend-cell:nth-child(5) { text-align: left;   padding-left: 12px; }
.ocs-legend-spine { color: var(--text-dim); }

/* rows */
.ocs-row {
  min-height: 52px;
  border-bottom: 1px solid rgba(255,255,255,.025);
}
.ocs-row:last-child { border-bottom: 0; }
.ocs-row.is-atm { background: rgba(245,166,35,.045); }

/* ── Momentum OI lane ─────────────────────────────────────────────────────── */
.ocs-mom { position: relative; display: flex; align-items: center; overflow: hidden; }
.ocs-mom--call { justify-content: flex-end; padding-right: 12px; }
.ocs-mom--put  { justify-content: flex-start; padding-left: 12px; }
.ocs-bar {
  position: absolute; top: 6px; bottom: 6px; border-radius: 2px;
}
.ocs-bar--call { right: 0; background: var(--ocs-bar-call); }
.ocs-bar--put  { left: 0;  background: var(--ocs-bar-put); }
.ocs-mom-txt {
  position: relative; z-index: 1;
  font-size: 12px; font-weight: 700; letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.ocs-mom--call .ocs-mom-txt.is-add    { color: var(--red); }
.ocs-mom--put  .ocs-mom-txt.is-add    { color: var(--green); }
.ocs-mom-txt.is-unwind { color: var(--ocs-unwind); font-weight: 400; }
.ocs-mom-txt.is-flat   { color: var(--dim); font-weight: 400; }

/* ── Deconstructed Premium lane ───────────────────────────────────────────── */
.ocs-prem {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 6px 12px;
}
.ocs-prem--call { align-items: flex-end;   text-align: right; }
.ocs-prem--put  { align-items: flex-start; text-align: left; }
.ocs-ltp {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  font-variant-numeric: tabular-nums; line-height: 1;
}
/* Int and TV each get their own line on desktop */
.ocs-sub {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 9px; letter-spacing: .01em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ocs-int { color: var(--muted); }
.ocs-tv  { color: var(--muted); }
/* Ghost Zero: OTM intrinsic is barely visible, TV stays readable */
.ocs-sub.is-ghost .ocs-int { color: var(--ocs-ghost); }
.ocs-sub.is-ghost .ocs-tv  { color: var(--muted); }

/* ── Strike spine ─────────────────────────────────────────────────────────── */
.ocs-strike {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: var(--ocs-spine);
}
.ocs-strike-num {
  font-size: 12.5px; font-weight: 700; color: #FFFFFF;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.ocs-strike.is-atm { background: rgba(245,166,35,.10); }
.ocs-strike.is-atm .ocs-strike-num {
  color: var(--amber);
  box-shadow: 0 0 0 1px rgba(245,166,35,.35);
  border-radius: 4px; padding: 1px 6px;
}

/* anomaly dots — pulsing, beside the strike, never a bg highlight */
.ocs-dot {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  animation: ocs-pulse 1.4s ease-in-out infinite;
}
.ocs-dot--call { left: 6px;  background: var(--red);   box-shadow: 0 0 6px var(--red); }
.ocs-dot--put  { right: 6px; background: var(--green); box-shadow: 0 0 6px var(--green); }
@keyframes ocs-pulse {
  0%, 100% { opacity: 1;   transform: translateY(-50%) scale(1); }
  50%      { opacity: .35; transform: translateY(-50%) scale(.7); }
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .ocs-card { padding: var(--s-3) 6px 8px; }
  .ocs-row  { min-height: 44px; }
  .ocs-mom--call { padding-right: 7px; }
  .ocs-mom--put  { padding-left: 7px; }
  .ocs-prem { padding: 4px 7px; gap: 2px; }
  .ocs-mom-txt { font-size: 11px; }
  .ocs-ltp { font-size: 11.5px; }
  .ocs-sub {
    display: flex; flex-direction: column; gap: 1px;
    font-size: 6px; letter-spacing: 0; line-height: 1.3;
    overflow: visible; max-width: 100%;
  }
  .ocs-int, .ocs-tv { white-space: nowrap; }
  .ocs-row { min-height: 50px; }
  .ocs-strike-num { font-size: 11.5px; }
  .ocs-legend-cell:nth-child(1) { padding-right: 7px; }
  .ocs-legend-cell:nth-child(2) { padding-right: 7px; }
  .ocs-legend-cell:nth-child(4) { padding-left: 7px; }
  .ocs-legend-cell:nth-child(5) { padding-left: 7px; }
  .ocs-legend { grid-template-columns: minmax(0,1fr) minmax(0,1fr) clamp(48px,16vw,82px) minmax(0,1fr) minmax(0,1fr); }
  .ocs-row    { grid-template-columns: minmax(0,1fr) minmax(0,1fr) clamp(48px,16vw,82px) minmax(0,1fr) minmax(0,1fr); }
}

/* ── A1 · Real-Cost Meter (footer strip under the sniper grid) ─────────────── */
.ocs-realcost {
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
}
.ocs-rc-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
  padding: 0 var(--s-2) 6px;
}
.ocs-rc-title {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-secondary); font-weight: 700;
}
.ocs-rc-theta {
  font-size: 9.5px; letter-spacing: .03em;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.ocs-rc-line {
  display: grid;
  grid-template-columns: 44px minmax(56px,1fr) minmax(96px,1.2fr) minmax(100px,1.1fr);
  align-items: center; gap: 8px;
  padding: 7px var(--s-2);
  border-top: 1px solid rgba(255,255,255,.025);
  font-variant-numeric: tabular-nums;
}
.ocs-rc-side {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  color: var(--text-label);
}
.ocs-rc-prem {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
}
.ocs-rc-spread, .ocs-rc-be {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 11px; color: var(--text-secondary);
}
.ocs-rc-k {
  font-size: 7.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-label);
}
.ocs-rc-be b { color: var(--amber); font-weight: 700; font-size: 12px; }
.ocs-rc-note {
  padding: 6px var(--s-2) 0;
  font-size: 8.5px; letter-spacing: .02em; color: var(--dim);
}
@media (max-width: 560px) {
  .ocs-rc-line {
    grid-template-columns: 36px minmax(46px,1fr) minmax(78px,1fr) minmax(82px,1fr);
    gap: 5px; padding: 6px 6px;
  }
  .ocs-rc-prem { font-size: 11.5px; }
  .ocs-rc-spread, .ocs-rc-be { font-size: 10px; }
  .ocs-rc-be b { font-size: 11px; }
}
@media (max-width: 380px) {
  .ocs-sub { font-size: 5.5px; }
  .ocs-row { min-height: 48px; }
  .ocs-prem { gap: 0; }
}

/* ── A3 · Liquidity dim (wide spread / thin volume) ─────────────────────────
   Descriptive market-microstructure only — no buy/sell advice (SEBI-safe).
   Affects .ocs-prem lanes only; never touches OI momentum or the strike spine.
   ─────────────────────────────────────────────────────────────────────────── */
.ocs-prem.is-costly {
  opacity: .52;                             /* subtle dim — lane still legible  */
}
.ocs-liq {
  display: inline-block;
  font-size: 8px;
  line-height: 1;
  color: var(--muted);
  vertical-align: middle;
  margin-left: 4px;
  cursor: default;
  user-select: none;
  flex-shrink: 0;
}
/* put lane: marker sits before the LTP number — keep it left-flush */
.ocs-prem--put .ocs-liq {
  margin-left: 0;
  margin-right: 4px;
}
@media (max-width: 560px) {
  .ocs-prem.is-costly { opacity: .50; }
  .ocs-liq { font-size: 7px; margin-left: 3px; }
  .ocs-prem--put .ocs-liq { margin-left: 0; margin-right: 3px; }
}

/* ════════════════════════════════════════════════════════════════════════
   LIGHT-MODE GAP CLOSERS (dashboard.css surfaces) — hardcoded rgba(0,0,0)/
   rgba(255,255,255) fills that read as grey smudges / vanish on cream.
   ════════════════════════════════════════════════════════════════════════ */

/* trend-indicator tiles — black 20% fill turns muddy grey on cream */
body.light-theme .ti-tile { background: rgba(26,22,18,0.035); }

/* footer social buttons — white 2% fill is invisible on cream; warm tint */

/* ─── Nifty 50 · Candles (Lightweight Charts engine) ─── */
.nd-card { padding: 0 !important; overflow: hidden; }
.nd-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 11px 14px;
  border-bottom: 1px solid var(--border);
}
.nd-head-l { display: flex; align-items: baseline; gap: 10px; }
.nd-title {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-secondary); font-weight: 700;
}
.nd-live {
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; color: var(--text-secondary);
}
.nd-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }

@media (max-width: 768px) {
  /* ── Index candle card: stack header (title+price row, then 2×2 pills) ── */
  .nd-ocs-row .nd-head {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
  }
  .nd-ocs-row .nd-head .nd-head-l {
    justify-content: space-between;
    width: 100%;
  }
  #ndPills {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    width: 100%;
  }
  #ndPills .nd-pill { text-align: center; }

  /* ── Spot+OI Walls: single row, hide the dash, compact pills ── */
  #swLive { display: none !important; }
  #chartPanelR .nd-head { flex-wrap: nowrap; gap: 6px; padding: 8px 10px; }
  #chartPanelR .nd-head .nd-head-l { flex-shrink: 1; min-width: 0; }
  #chartPanelR .nd-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #swPills { flex-wrap: nowrap; gap: 4px; justify-content: flex-end; flex-shrink: 0; }
  #swPills .nd-pill { font-size: 8px; padding: 2px 5px; letter-spacing: 0; }

  /* ── Footer: keep tools from being clipped ── */
  .nd-foot > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nd-tools { flex-shrink: 0; }
}
.nd-pill {
  /* match OI Flow pill sizing (effective rule: dashboard.css .oiflow-pill) */
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 500; line-height: 1.2; letter-spacing: 0.2px;
  color: var(--dim);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border); border-radius: 3px;
  padding: 2px 6px; min-height: 0; cursor: pointer; transition: all .12s ease;
}
.nd-pill:hover { color: var(--text-secondary); border-color: rgba(255,255,255,0.14); }
.nd-pill.active { color: #0a0f1e; background: #26a69a; border-color: #26a69a; }
/* tool buttons — inline on the footer row, aligned right */
.nd-tools {
  display: flex; gap: 8px; flex-shrink: 0;
}
.nd-tool {
  /* match OI Flow pill height; glyph font a touch larger to stay legible */
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500; line-height: 1.2;
  color: var(--dim);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border); border-radius: 3px;
  padding: 1px 6px; min-height: 0; cursor: pointer; transition: all .12s ease;
}
.nd-tool:hover { color: var(--text-secondary); border-color: rgba(255,255,255,0.14); }
.nd-tool:active { background: rgba(255,255,255,0.07); }

/* ─── Maximized: full-viewport overlay (mirrors .chart-panel-fs z-index) ─── */
.nd-card.nd-fs {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;   /* fallback */
  height: 100dvh !important;  /* dodge mobile URL-bar jitter */
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  z-index: 8500 !important;
  display: flex !important; flex-direction: column;
  background: linear-gradient(160deg,#07111f 0%,#0a1628 60%,#071118 100%);
}
.nd-card.nd-fs .nd-chart {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
}
.nd-chart { height: 420px; width: 100%; }
.nd-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 14px; font-size: 9px; letter-spacing: .04em;
  color: var(--dim); border-top: 1px solid var(--border);
}

/* ─── Nifty chart + Option Chain — 50/50 desktop row (mirrors .charts-row) ─── */
.nd-ocs-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-4);
  margin: 12px var(--s-5);
  align-items: stretch;
}
/* row owns spacing — kill the cards' own margins inside it */
.nd-ocs-row > .nd-card,
.nd-ocs-row > .ocs-card { margin: 0 !important; min-width: 0; }
/* keep the chart filling its half cleanly */
.nd-ocs-row > .nd-card { display: flex; flex-direction: column; }
.nd-ocs-row > .nd-card .nd-chart { flex: 1 1 auto; min-height: 420px; }

/* collapse to a single column on narrower viewports (same breakpoint as .charts-row) */
@media (max-width: 1100px) {
  .nd-ocs-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 44px !important;
    row-gap: 44px !important;
  }
  .nd-ocs-row > .nd-card,
  .nd-ocs-row > .ocs-card {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}
@media (max-width: 640px) {
  .nd-ocs-row { margin-left: 12px !important; margin-right: 12px !important; }
}

/* ─── Light-mode token overrides for dashboard.css-only variables ─── */
body.light-theme {
  --text-secondary:  #5a5550;
  --border-strong:   rgba(26,22,18,0.14);
  --border-warm:     rgba(26,22,18,0.10);
  --text-mute:       #9a8f85;
  --dim:             #9a8f85;
}

/* ─── Nifty 50 card — light-mode chrome overrides ─── */
body.light-theme .nd-card {
  background: var(--bg-card) !important;
}
body.light-theme .nd-head {
  border-bottom-color: var(--border-subtle);
}
body.light-theme .nd-title { color: var(--text-dim); }
body.light-theme .nd-live  { color: var(--text-primary); }
body.light-theme .nd-foot  { color: var(--text-dim); border-top-color: var(--border-subtle); }
body.light-theme .nd-pill {
  background: rgba(0,0,0,0.04);
  border-color: rgba(26,22,18,0.14);
}
body.light-theme .nd-pill:hover {
  color: var(--text-primary);
  border-color: rgba(26,22,18,0.28);
}
body.light-theme .nd-tool {
  background: rgba(0,0,0,0.04);
  border-color: rgba(26,22,18,0.14);
}
body.light-theme .nd-tool:hover {
  color: var(--text-primary);
  border-color: rgba(26,22,18,0.28);
}
body.light-theme .nd-tool:active { background: rgba(0,0,0,0.06); }
body.light-theme .nd-card.nd-fs {
  background: linear-gradient(160deg, #ede8e3 0%, #e4dfd9 60%, #ddd8d2 100%);
}
body.light-theme .sw-reset-tool {
  color: var(--text-dim);
  border-color: rgba(26,22,18,0.14);
}
body.light-theme .sw-reset-tool:hover {
  color: var(--text-primary);
  border-color: rgba(26,22,18,0.28);
}

/* ─── Spot + OI Walls (TradingView engine) ─── */
/* Stage fills whatever container it sits in (chart-container inside charts-row). */
.sw-stage { position: relative; width: 100%; height: 100%; }
.sw-stage > #spotWallTV { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Blackout fallback canvas fills the stage. */
.sw-fallback-wrap { position: absolute; inset: 0; display: none; }
.sw-fallback-wrap > canvas { display: block; width: 100%; height: 100%; }
/* Failover: swap layers. */
.sw-card.sw-fallback-active .sw-stage > #spotWallTV { display: none; }
.sw-card.sw-fallback-active .sw-fallback-wrap { display: block; }
/* Footer: text left, tools right — mirrors nd-foot layout. */
.sw-card .chart-footer { justify-content: space-between !important; }
/* Reset tool in toolbar — match the enlarge-btn sizing. */
.sw-reset-tool {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  color: var(--dim); cursor: pointer; font-size: 13px;
  padding: 3px 7px; line-height: 1; margin-left: 6px;
}
.sw-reset-tool:hover { color: var(--text-secondary); border-color: var(--border-strong); }

   DESIGN SPEC v2 — Visual layer upgrade (2026-06-21)
   Adds: aurora bg · new animations · design-spec CSS variables · card gradients
         bignum style · sheen button · float theme toggle · font upgrades
   All overrides scoped to NOT break existing JS-bound class names.
   ============================================================================ */

/* ── New design-spec animations ──────────────────────────────────────────── */
@keyframes dxBlink      { 0%,100%{opacity:1} 50%{opacity:.35} }
@keyframes dxBreathe    { 0%,100%{opacity:.4} 50%{opacity:.95} }
@keyframes dxPulseRing  { 0%{transform:scale(.6);opacity:.7} 100%{transform:scale(2.4);opacity:0} }
@keyframes dxShimmer    { 0%{background-position:-180% 0} 100%{background-position:280% 0} }
@keyframes dxScan       { 0%{transform:translateY(-100%)} 100%{transform:translateY(800%)} }
@keyframes dxCaret      { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes dxFloat      { 0%{transform:translateX(-10px);opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{transform:translateX(420px);opacity:0} }
@keyframes dxBar        { 0%,100%{transform:scaleY(.4)} 50%{transform:scaleY(1)} }
@keyframes dxDraw       { to{stroke-dashoffset:0} }
@keyframes dxSheen      { 0%{transform:translateX(-120%)} 60%,100%{transform:translateX(320%)} }
@keyframes dxRise       { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes dxGlowOrb    { 0%,100%{opacity:.25;transform:scale(1)} 50%{opacity:.5;transform:scale(1.12)} }
@keyframes dxAuroraMove { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes dxAuroraHue  { 0%{filter:hue-rotate(0deg) blur(36px)} 100%{filter:hue-rotate(360deg) blur(36px)} }

/* ── Design-spec CSS variables (additive — complement existing tokens) ──── */
:root {
  /* Design-spec palette aliases — dark mode defaults */
  --dx-gold:       #38bdf8;
  --dx-gold-bri:   #7dd3fc;
  --dx-gold-dim:   #3b7da3;
  --dx-green-bri:  #54e08a;
  --dx-red-bri:    #f5797e;
  --dx-line:       #1b2740;
  --dx-line2:      #27375a;
  --dx-soft:       rgba(56,189,248,.10);
  --dx-card-hi:    rgba(255,255,255,.07);
  --dx-orb:        rgba(56,189,248,.14);
  --dx-aurora-op:  .6;

  /* Card gradient vars */
  --dx-g-cc1: rgba(251,113,133,.18);
  --dx-g-cc2: rgba(239,90,96,.10);
  --dx-g-ds1: rgba(167,139,250,.19);
  --dx-g-ds2: rgba(56,189,248,.08);
  --dx-g-inv: rgba(251,191,36,.18);
  --dx-g-a1:  rgba(45,212,191,.24);
  --dx-g-a2:  rgba(45,212,191,.07);
  --dx-g-b1:  rgba(56,189,248,.24);
  --dx-g-b2:  rgba(56,189,248,.07);
  --dx-g-c1:  rgba(129,140,248,.24);
  --dx-g-c2:  rgba(129,140,248,.07);
  --dx-g-oi1: rgba(167,139,250,.24);
  --dx-g-oi2: rgba(167,139,250,.07);
  --dx-g-sp1: rgba(45,212,191,.24);
  --dx-g-sp2: rgba(45,212,191,.07);
  --dx-g-bk1: rgba(251,113,133,.24);
  --dx-g-bk2: rgba(251,113,133,.07);
  --dx-g-op1: rgba(251,191,36,.24);
  --dx-g-op2: rgba(251,191,36,.07);

  /* Bignum gradient (Instrument Serif large numbers) */
  --dx-bignum-grad: linear-gradient(180deg,#ffffff,#7dd3fc 55%,#3b7da3);

  /* Brand gradient */
  --dx-brand-grad: radial-gradient(circle at 40% 30%,#14273f,#070a12);
}

/* Light theme overrides for new vars */
body.light-theme {
  --dx-gold:       #bf8a1c;
  --dx-gold-bri:   #946a12;
  --dx-gold-dim:   #b39866;
  --dx-green-bri:  #178a49;
  --dx-red-bri:    #c43a42;
  --dx-line:       #dcd6ca;
  --dx-line2:      #cfc8b9;
  --dx-soft:       rgba(191,138,28,.08);
  --dx-card-hi:    rgba(0,0,0,.05);
  --dx-orb:        rgba(191,138,28,.12);
  --dx-aurora-op:  .42;
  --dx-g-cc1: rgba(232,90,98,.30);
  --dx-g-cc2: rgba(232,90,98,.12);
  --dx-g-ds1: rgba(124,108,232,.30);
  --dx-g-ds2: rgba(56,150,210,.13);
  --dx-g-inv: rgba(229,178,60,.34);
  --dx-g-a1:  rgba(20,180,150,.55);
  --dx-g-a2:  rgba(20,180,150,.22);
  --dx-g-b1:  rgba(56,150,210,.55);
  --dx-g-b2:  rgba(56,150,210,.22);
  --dx-g-c1:  rgba(124,108,232,.55);
  --dx-g-c2:  rgba(124,108,232,.22);
  --dx-g-oi1: rgba(150,110,235,.30);
  --dx-g-oi2: rgba(150,110,235,.10);
  --dx-g-sp1: rgba(20,180,150,.30);
  --dx-g-sp2: rgba(20,180,150,.10);
  --dx-g-bk1: rgba(232,90,120,.30);
  --dx-g-bk2: rgba(232,90,120,.10);
  --dx-g-op1: rgba(229,178,60,.34);
  --dx-g-op2: rgba(229,178,60,.12);
  --dx-bignum-grad: linear-gradient(180deg,#3b352b,#13100a);
  --dx-brand-grad: radial-gradient(circle at 40% 30%,#f1eee7,#dcd6c9);
}

/* ── Aurora background ───────────────────────────────────────────────────── */
.dx-aurora-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(38% 44% at 12% 20%,  rgba(167,139,250,.55), transparent 62%),
    radial-gradient(36% 42% at 86% 14%,  rgba(56,189,248,.55),  transparent 62%),
    radial-gradient(44% 48% at 78% 82%,  rgba(45,212,191,.5),   transparent 62%),
    radial-gradient(40% 46% at 18% 84%,  rgba(251,113,133,.45), transparent 62%),
    radial-gradient(50% 52% at 50% 48%,  rgba(251,191,36,.32),  transparent 60%),
    radial-gradient(40% 44% at 62% 32%,  rgba(52,211,153,.42),  transparent 62%);
  background-size: 170% 170%;
  filter: blur(36px);
  opacity: var(--dx-aurora-op);
  animation: dxAuroraMove 46s ease-in-out infinite, dxAuroraHue 84s linear infinite;
}
body.light-theme .dx-aurora-bg {
  opacity: .42;
  background-image:
    radial-gradient(38% 44% at 12% 20%,  rgba(124,108,232,.35), transparent 62%),
    radial-gradient(36% 42% at 86% 14%,  rgba(56,150,210,.35),  transparent 62%),
    radial-gradient(44% 48% at 78% 82%,  rgba(20,180,150,.30),  transparent 62%),
    radial-gradient(40% 46% at 18% 84%,  rgba(232,90,98,.28),   transparent 62%),
    radial-gradient(50% 52% at 50% 48%,  rgba(229,178,60,.20),  transparent 60%),
    radial-gradient(40% 44% at 62% 32%,  rgba(52,180,130,.25),  transparent 62%);
}

/* ── Floating theme toggle button ────────────────────────────────────────── */
.dx-float-theme-btn {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 10px 16px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.07);
  transition: transform 0.15s, box-shadow 0.15s, background 0.2s;
}
.dx-float-theme-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10);
  background: var(--bg-elev);
}
.dx-float-theme-icon {
  font-size: 14px;
  line-height: 1;
}
body.light-theme .dx-float-theme-btn {
  background: #f5f3ed;
  border-color: #cfc8b9;
  color: #211d16;
  box-shadow: 0 10px 30px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.6);
}
/* Mobile: hide float toggle (screen estate too precious) */
@media (max-width: 768px) {
  .dx-float-theme-btn { display: none !important; }
}

/* ── Header ribbon glow (top edge accent line) ───────────────────────────── */
.header {
  position: relative;
}
.header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--dx-gold), transparent);
  opacity: .5;
  pointer-events: none;
  z-index: 1;
}
body.light-theme .header::before {
  background: linear-gradient(90deg, transparent, var(--dx-gold), transparent);
  opacity: .35;
}

/* ── "LOSING GROUND" / behavioral badge in header ────────────────────────── */
#bxTierPill.bx-tier-pill:not(.bx-tier-pill-hidden) {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  border-radius: 7px !important;
  padding: 6px 12px !important;
}

/* ── Header user pill: upgrade avatar to initials circle style ───────────── */
.user-avatar {
  background: radial-gradient(circle at 35% 28%, var(--dx-gold-bri), var(--dx-gold-dim)) !important;
  color: #03121e !important;
  font-family: 'Space Grotesk', 'DM Sans', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  border-radius: 50% !important;
}

/* ── Commitment Cycle card — design spec enhancements ────────────────────── */
.cx-today-panel {
  background:
    radial-gradient(120% 90% at 100% -12%, var(--dx-g-cc1), transparent 52%),
    radial-gradient(130% 90% at 50% 120%, var(--dx-g-cc2), transparent 60%),
    linear-gradient(165deg, #11203a, #0a1322) !important;
  border: 1px solid var(--dx-line2) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 0 var(--dx-card-hi), 0 16px 44px rgba(0,0,0,.5) !important;
}
body.light-theme .cx-today-panel {
  background:
    radial-gradient(120% 90% at 100% -12%, var(--dx-g-cc1), transparent 52%),
    radial-gradient(130% 90% at 50% 120%, var(--dx-g-cc2), transparent 60%),
    linear-gradient(165deg, #f5f1e9, #ece7dd) !important;
}

/* Breathing ambient pulse inside cycle card */
.cx-today-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 40% at 50% 120%, var(--dx-g-cc2), transparent 70%);
  animation: dxBreathe 5s ease-in-out infinite;
  pointer-events: none;
  border-radius: 20px;
  z-index: 0;
}

/* Bignum (cycle days count) — Instrument Serif gradient text */
.cx-bignum,
.cx-day-count,
[class*="cx-big"],
.cx-count-big {
  font-family: 'Instrument Serif', serif !important;
  font-weight: 400 !important;
  background: var(--dx-bignum-grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 20px rgba(56,189,248,.25));
}

/* Orb glow behind big number in cycle card */
.cx-orb-glow {
  position: absolute;
  width: 200px;
  height: 200px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--dx-orb), transparent 65%);
  animation: dxGlowOrb 4s ease-in-out infinite;
  pointer-events: none;
}

/* Commit CTA button — gold gradient with sheen animation */
.cx-commit-btn,
#cxBeginCommitBtn,
.cx-begin-btn {
  position: relative !important;
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  color: #2a1c00 !important;
  background: linear-gradient(180deg, #fde08a, #e3b23c) !important;
  border: none !important;
  border-radius: 9px !important;
  padding: 13px 30px !important;
  cursor: pointer !important;
  overflow: hidden !important;
  box-shadow: 0 4px 22px rgba(245,196,80,.5), 0 0 0 1px rgba(245,196,80,.25) !important;
}
.cx-commit-btn::before,
#cxBeginCommitBtn::before,
.cx-begin-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.55), transparent 80%);
  animation: dxSheen 4s ease-in-out infinite;
  pointer-events: none;
}

/* ── DATA SAYS (cockpit) card — design spec enhancements ─────────────────── */
.card-signals {
  background:
    radial-gradient(110% 80% at 100% -12%, var(--dx-g-ds1), transparent 50%),
    radial-gradient(90% 70% at 0% 110%, var(--dx-g-ds2), transparent 55%),
    linear-gradient(160deg, #0f1828, #0a1120) !important;
  border: 1px solid var(--dx-line2) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 0 var(--dx-card-hi), 0 16px 44px rgba(0,0,0,.5) !important;
  overflow: hidden !important;
}
body.light-theme .card-signals {
  background:
    radial-gradient(110% 80% at 100% -12%, var(--dx-g-ds1), transparent 50%),
    radial-gradient(90% 70% at 0% 110%, var(--dx-g-ds2), transparent 55%),
    linear-gradient(160deg, #f4f1ea, #ebe7dd) !important;
}

/* Scanline inside DATA SAYS */
.card-signals::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 60px;
  background: linear-gradient(180deg, transparent, rgba(56,189,248,.05), transparent);
  animation: dxScan 7s linear infinite;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
}

/* DATA SAYS header caret blink */
.cur {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: var(--dx-gold);
  vertical-align: middle;
  animation: dxCaret 1s step-end infinite;
  margin-left: 2px;
}

/* Progress bar in DATA SAYS — gold gradient */
.bar2 {
  background: linear-gradient(90deg, var(--dx-gold-dim), var(--dx-gold-bri)) !important;
}

/* DATA SAYS footer ticker */
.c3-ticker-inner {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: 1px !important;
}

/* ── Stats grid card backgrounds — design spec card gradient system ──────── */
.prox-card {
  background:
    radial-gradient(135% 95% at 100% -12%, var(--dx-g-a1), transparent 52%),
    radial-gradient(115% 85% at 0% 115%,  var(--dx-g-a2), transparent 55%),
    var(--bg-card) !important;
  border: 1px solid var(--dx-line2) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 0 var(--dx-card-hi), 0 16px 44px rgba(0,0,0,.5) !important;
}
/* Light: use .stats-grid parent to match specificity 0-3-1 of existing override */
body.light-theme .stats-grid > .prox-card,
body.light-theme .stats-grid .prox-card {
  background:
    radial-gradient(135% 95% at 100% -12%, var(--dx-g-a1), transparent 52%),
    radial-gradient(115% 85% at 0% 115%,  var(--dx-g-a2), transparent 55%),
    #f5f3ed !important;
  border: 1px solid var(--dx-line2) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.04), 0 4px 16px -4px rgba(26,22,18,.12) !important;
}

.card-analytics {
  background:
    radial-gradient(135% 95% at 100% -12%, var(--dx-g-b1), transparent 52%),
    radial-gradient(115% 85% at 0% 115%,  var(--dx-g-b2), transparent 55%),
    var(--bg-card) !important;
  border: 1px solid var(--dx-line2) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 0 var(--dx-card-hi), 0 16px 44px rgba(0,0,0,.5) !important;
}
body.light-theme .stats-grid > .card-analytics,
body.light-theme .stats-grid .card-analytics {
  background:
    radial-gradient(135% 95% at 100% -12%, var(--dx-g-b1), transparent 52%),
    radial-gradient(115% 85% at 0% 115%,  var(--dx-g-b2), transparent 55%),
    #f5f3ed !important;
  border: 1px solid var(--dx-line2) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.04), 0 4px 16px -4px rgba(26,22,18,.12) !important;
}

.card-timeline,
.card-flow {
  background:
    radial-gradient(135% 95% at 100% -12%, var(--dx-g-c1), transparent 52%),
    radial-gradient(115% 85% at 0% 115%,  var(--dx-g-c2), transparent 55%),
    var(--bg-card) !important;
  border: 1px solid var(--dx-line2) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 0 var(--dx-card-hi), 0 16px 44px rgba(0,0,0,.5) !important;
}
body.light-theme .stats-grid .card-timeline,
body.light-theme .stats-grid .card-flow {
  background:
    radial-gradient(135% 95% at 100% -12%, var(--dx-g-c1), transparent 52%),
    radial-gradient(115% 85% at 0% 115%,  var(--dx-g-c2), transparent 55%),
    #f5f3ed !important;
  border: 1px solid var(--dx-line2) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.04), 0 4px 16px -4px rgba(26,22,18,.12) !important;
}

/* Charts row cards */
#chartPanelL {
  background:
    radial-gradient(135% 95% at 100% -12%, var(--dx-g-oi1), transparent 52%),
    radial-gradient(115% 85% at 0% 115%,  var(--dx-g-oi2), transparent 55%),
    var(--bg-card-2) !important;
  border: 1px solid var(--dx-line2) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 0 var(--dx-card-hi), 0 16px 44px rgba(0,0,0,.5) !important;
}
#chartPanelR {
  background:
    radial-gradient(135% 95% at 100% -12%, var(--dx-g-sp1), transparent 52%),
    radial-gradient(115% 85% at 0% 115%,  var(--dx-g-sp2), transparent 55%),
    var(--bg-card-2) !important;
  border: 1px solid var(--dx-line2) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 0 var(--dx-card-hi), 0 16px 44px rgba(0,0,0,.5) !important;
}

/* Index candles card */
.nd-ocs-row > .card-dark:first-child {
  background:
    radial-gradient(135% 95% at 100% -12%, var(--dx-g-bk1), transparent 52%),
    radial-gradient(115% 85% at 0% 115%,  var(--dx-g-bk2), transparent 55%),
    var(--bg-card-2) !important;
  border: 1px solid var(--dx-line2) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 0 var(--dx-card-hi), 0 16px 44px rgba(0,0,0,.5) !important;
}

/* Focused option chain card */
.ocs-card {
  background:
    radial-gradient(135% 95% at 100% -12%, var(--dx-g-op1), transparent 52%),
    radial-gradient(115% 85% at 0% 115%,  var(--dx-g-op2), transparent 55%),
    var(--bg-card-2) !important;
  border: 1px solid var(--dx-line2) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 0 var(--dx-card-hi), 0 16px 44px rgba(0,0,0,.5) !important;
}

/* ── Invite & Earn card — design spec styling ────────────────────────────── */
#refPromoCard,
.ref-promo-card {
  background:
    radial-gradient(80% 200% at 0% 50%, var(--dx-g-inv), transparent 60%),
    linear-gradient(100deg, rgba(251,191,36,.08), rgba(251,191,36,.02)) !important;
  border: 1px solid var(--dx-line2) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 var(--dx-card-hi), 0 12px 32px rgba(0,0,0,.45) !important;
  position: relative !important;
  overflow: hidden !important;
}
#refPromoCard::before,
.ref-promo-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #fcd34d, #d99a18);
  pointer-events: none;
}

.ref-promo-title {
  font-family: 'Space Grotesk', 'DM Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

.ref-promo-btn {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  color: #2a1c00 !important;
  background: linear-gradient(180deg, #fde08a, #e3b23c) !important;
  border: none !important;
  border-radius: 9px !important;
  padding: 11px 22px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: 0 3px 18px rgba(245,196,80,.45), 0 0 0 1px rgba(245,196,80,.22) !important;
}
.ref-promo-btn:hover {
  box-shadow: 0 5px 24px rgba(245,196,80,.6), 0 0 0 1px rgba(245,196,80,.35) !important;
  transform: translateY(-1px);
}
body.light-theme #refPromoCard,
body.light-theme .ref-promo-card {
  background:
    radial-gradient(80% 200% at 0% 50%, var(--dx-g-inv), transparent 60%),
    linear-gradient(100deg, rgba(229,178,60,.12), rgba(229,178,60,.03)) !important;
}

/* ── Header ticker: upgrade Nifty price display ──────────────────────────── */
.dt-spot-val {
  color: var(--dx-gold-bri) !important;
  letter-spacing: -0.5px !important;
}

/* ── SEBI marquee: match design spec typography ──────────────────────────── */
.sebi-marquee-inner {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace !important;
}

/* ── Footer: design spec ribbon glow at top ──────────────────────────────── */
.dx-footer {
  position: relative;
  background: rgba(7,10,18,.65) !important;
}
.dx-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--dx-gold), transparent);
  opacity: .25;
}
body.light-theme .dx-footer {
  background: rgba(233,230,223,.7) !important;
}

/* Footer live clock dot */

/* ── Typography upgrade: Instrument Serif for narrative text ─────────────── */
.read,
#c3Read {
  font-family: 'Space Grotesk', 'DM Sans', sans-serif !important;
}
.cx-identity-title {
  font-family: 'Instrument Serif', serif !important;
  font-size: 26px !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
}

/* ── Chart cards — section header eyebrow color accents ─────────────────── */
.chart-controls-row .chart-tab.active {
  color: #a78bfa !important;
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace !important;
}
.nd-head .nd-title {
  color: #fb7185 !important;
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace !important;
}
.ocs-title {
  color: #fbbf24 !important;
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace !important;
}

/* ── Section eyebrow label accents per card ──────────────────────────────── */
.ph-mod-oi .ph-mod-eyebrow    { color: #2dd4bf !important; }
.ti-mod-pcr .ti-mod-eyebrow   { color: var(--dx-gold) !important; }
.flow-eyebrow                 { color: #818cf8 !important; }

/* ── Spot channel slider — gold marker pip ───────────────────────────────── */
.heat-marker-pip {
  background: var(--dx-gold-bri) !important;
  box-shadow: 0 0 12px var(--dx-gold) !important;
  border: 2px solid var(--bg-base) !important;
}
.ph-spot-pulse {
  background: var(--dx-gold) !important;
  box-shadow: 0 0 8px var(--dx-gold) !important;
}

/* ── PCR sparkline stroke ─────────────────────────────────────────────────── */
.pcr-spark-line {
  stroke: var(--blue) !important;
  stroke-width: 1.6 !important;
}

/* ── Live dot pulse ───────────────────────────────────────────────────────── */
.c3-live,
#c3LiveDot,
.live {
  background: var(--green) !important;
  box-shadow: 0 0 7px var(--green) !important;
  animation: dxBlink 2s infinite !important;
}

/* ── Chart control pills — active state ──────────────────────────────────── */
.oiflow-pill.active,
.nd-pill.active {
  color: #03121e !important;
  background: var(--dx-gold) !important;
  border-radius: 5px !important;
  font-weight: 600 !important;
}

/* ── Card border radius upgrade to match design spec (20px) ─────────────── */
.card, .card-dark, .prox-card, .card-analytics, .card-timeline, .card-dark.chart-card {
  border-radius: 20px !important;
}

/* ── dxRise entrance animation on key elements ──────────────────────────── */
.cx-today-panel,
.card-signals,
.prox-card,
.card-analytics,
.card-timeline,
.card-flow,
#chartPanelL,
#chartPanelR {
  animation: dxRise 0.4s ease both;
}

/* ── Mobile: suppress aurora and float toggle ────────────────────────────── */
@media (max-width: 768px) {
  .dx-aurora-bg { display: none !important; }
}

/* ── New compact footer (design spec 2026-06-21) ─────────────────────────── */
.dx-footer {
  position: relative;
  border-top: 1px solid var(--line, #1b2740);
  background: rgba(7,10,18,.65) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.dx-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--dx-gold, #38bdf8), transparent);
  opacity: .35;
  pointer-events: none;
}
body.light-theme .dx-footer {
  background: rgba(233,230,223,.75) !important;
  border-top-color: #dcd6ca;
}

/* Row 1 */
.dx-footer-main {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 16px 22px;
  max-width: 1320px;
  margin: 0 auto;
}

/* Brand block */
.dx-footer-brand-new {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
}
.dx-footer-logo-img {
  width: 27px;
  height: 27px;
  border-radius: 8px;
  object-fit: contain;
  flex-shrink: 0;
}
.dx-footer-name-new {
  font-family: 'Space Grotesk', 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--text-primary, #eaf1fb);
  white-space: nowrap;
}
.dx-footer-name-gold {
  color: var(--dx-gold-bri, #7dd3fc);
}
body.light-theme .dx-footer-name-new { color: #211d16; }

/* Divider */
.dx-footer-divider {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: var(--dx-line2, #27375a);
  flex-shrink: 0;
}
body.light-theme .dx-footer-divider { background: #cfc8b9; }

/* Nav links */
.dx-footer-nav {
  display: flex;
  align-items: center;
  gap: 18px;
}
.dx-footer-navlink {
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.1px;
  color: var(--text-secondary, #9fb1cb);
  text-decoration: none;
  transition: color .15s;
}
.dx-footer-navlink:hover { color: var(--dx-gold-bri, #7dd3fc); }
body.light-theme .dx-footer-navlink { color: #6b6050; }
body.light-theme .dx-footer-navlink:hover { color: #946a12; }

/* Social text links */
.dx-footer-socials {
  display: flex;
  align-items: center;
  gap: 14px;
}
.dx-footer-social-link {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text-muted, #647793);
  text-decoration: none;
  transition: color .15s;
}
.dx-footer-social-link:hover { color: var(--dx-gold-bri, #7dd3fc); }
body.light-theme .dx-footer-social-link { color: #8a7d6a; }
body.light-theme .dx-footer-social-link:hover { color: #946a12; }

/* Live clock */
.dx-footer-clock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .5px;
  color: var(--text-secondary, #9fb1cb);
  flex: none;
}
.dx-footer-clock-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green, #2fc46c);
  box-shadow: 0 0 7px var(--green, #2fc46c);
  animation: dxBlink 2s infinite;
}

/* Row 2: legal */
.dx-footer-legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  border-top: 1px solid var(--line, #1b2740);
  max-width: 1320px;
  margin: 0 auto;
  padding: 10px 22px;
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--text-faint, #3c4a66);
}
.dx-footer-legal-right { color: var(--dx-gold-dim, #3b7da3); }
body.light-theme .dx-footer-legal { border-top-color: #dcd6ca; color: #b0a898; }
body.light-theme .dx-footer-legal-right { color: #946a12; }

/* Mobile footer: stack vertically, hide socials row */
@media (max-width: 768px) {
  .dx-footer-main { gap: 12px; padding: 14px 16px; }
  .dx-footer-socials { display: none; }
  .dx-footer-legal { padding: 8px 16px; }
}

/* ── Light-mode overrides for chart + index cards (ID specificity beats base rules) ── */
body.light-theme #chartPanelL {
  background:
    radial-gradient(135% 95% at 100% -12%, var(--dx-g-oi1), transparent 52%),
    radial-gradient(115% 85% at 0% 115%,  var(--dx-g-oi2), transparent 55%),
    #efece4 !important;
  border: 1px solid var(--dx-line2) !important;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.04), 0 4px 16px -4px rgba(26,22,18,.12) !important;
}
body.light-theme #chartPanelR {
  background:
    radial-gradient(135% 95% at 100% -12%, var(--dx-g-sp1), transparent 52%),
    radial-gradient(115% 85% at 0% 115%,  var(--dx-g-sp2), transparent 55%),
    #efece4 !important;
  border: 1px solid var(--dx-line2) !important;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.04), 0 4px 16px -4px rgba(26,22,18,.12) !important;
}

/* nd-ocs-row: Bank Nifty candle card */
body.light-theme .nd-ocs-row > .card-dark {
  background:
    radial-gradient(135% 95% at 100% -12%, var(--dx-g-bk1), transparent 52%),
    radial-gradient(115% 85% at 0% 115%,  var(--dx-g-bk2), transparent 55%),
    #efece4 !important;
  border: 1px solid var(--dx-line2) !important;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.04), 0 4px 16px -4px rgba(26,22,18,.12) !important;
}

/* Focused Nifty Option Chain */
body.light-theme .ocs-card {
  background:
    radial-gradient(135% 95% at 100% -12%, var(--dx-g-op1), transparent 52%),
    radial-gradient(115% 85% at 0% 115%,  var(--dx-g-op2), transparent 55%),
    #efece4 !important;
  border: 1px solid var(--dx-line2) !important;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.04), 0 4px 16px -4px rgba(26,22,18,.12) !important;
}

/* Chart panel text + legend readable on light bg */
body.light-theme #chartPanelL .chart-fs-title,
body.light-theme #chartPanelR .chart-fs-title,
body.light-theme .nd-ocs-row .nd-title,
body.light-theme .nd-ocs-row .nd-foot,
body.light-theme .nd-ocs-row .ocs-title { color: var(--text-primary) !important; }

body.light-theme #chartPanelL .oiflow-pill,
body.light-theme #chartPanelR .oiflow-pill,
body.light-theme .nd-ocs-row .nd-pill { color: var(--text-secondary) !important; }

/* ── Dark-mode symmetry fixes (2026-06-21) ──────────────────────────────────
   1. Border-radius: use .stats-grid parent to reach 0-2-0+ specificity and
      beat the existing .stats-grid > .card { border-radius:6px !important }
   2. Remove corner-tick ::before/::after marks that make cards look rectangular
   3. #instCarousel height pass-through so FII card fills column
   ─────────────────────────────────────────────────────────────────────────── */

/* 1. Force 20px radius on all stats-grid cards — 0-2-0 specificity, comes last */
.stats-grid > .prox-card,
.stats-grid > .card-analytics,
.stats-grid > .card-timeline,
.stats-grid .card-flow,
.stats-grid .card-timeline {
  border-radius: 20px !important;
}

/* Chart-row and index-row cards */
.charts-row > #chartPanelL,
.charts-row > #chartPanelR,
.nd-ocs-row > .card-dark,
.ocs-card {
  border-radius: 20px !important;
}

/* 2. Remove the corner registration tick marks — they fight the rounded card look */
.stats-grid > .card::before,
.stats-grid > .card::after,
.charts-row > .chart-card::before,
.charts-row > .chart-card::after {
  display: none !important;
}

/* 3. #instCarousel: stretch to fill grid cell + pass height to flowCard */
#instCarousel {
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch !important;
  height: 100% !important;
}
#instCarousel > .card-flow,
#instCarousel > .card-timeline {
  flex: 1 !important;
  height: 100% !important;
  min-height: 0 !important;
}

/* 4. Consistent gap + border across all three columns */
.stats-grid > .prox-card,
.stats-grid > .card-analytics,
.stats-grid .card-timeline,
.stats-grid .card-flow {
  border: 1px solid var(--dx-line2) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   DESIGN SPEC PATCH — fixes for dark-mode bento grid + aurora (2026-06-21)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── FIX 1: Aurora background visibility
   Problem: body has opaque background (var(--rd-bg) !important from terminal
   skin). The fixed z-index:-1 aurora sits BEHIND it and is invisible.
   Fix: put base dark color on <html>, make <body> transparent.
   Light mode: body.light-theme { background: var(--rd-bg) !important } at
   specificity 0,1,1 beats body { transparent } at 0,0,1 — so we need an
   equal-specificity body.light-theme override placed later in the file.     */
html {
  background: #070a12 !important;
}
body {
  background: transparent !important;
}
/* Light mode: html gets the cream base, body stays transparent */
html:has(body.light-theme) {
  background: #F5F0EB !important;
}
/* spec 0,1,2 — matches and beats the html body.light-theme rule at line 8190 */
html body.light-theme,
body.light-theme {
  background: transparent !important;
}

/* ── FIX 2: Bento 3-card equal-width columns ─────────────────────────── */
.stats-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
}
@media (max-width: 900px) {
  .stats-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
}
@media (max-width: 600px) {
  .stats-grid { grid-template-columns: 1fr !important; }
}

/* ── FIX 3: Bento card gradient backgrounds (dark mode)
   Problem: terminal skin's .stats-grid > .card (specificity 0-2-0) beats
   .prox-card / .card-analytics (0-1-0) even with !important. Fix: match
   specificity with .stats-grid > .prox-card etc. (later in file = wins).  */
.stats-grid > .prox-card {
  background:
    radial-gradient(135% 95% at 100% -12%, var(--dx-g-a1), transparent 52%),
    radial-gradient(115% 85% at 0%   115%, var(--dx-g-a2), transparent 55%),
    var(--bg-card) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 0 var(--dx-card-hi), 0 16px 44px rgba(0,0,0,.5) !important;
}
.stats-grid > .card-analytics {
  background:
    radial-gradient(135% 95% at 100% -12%, var(--dx-g-b1), transparent 52%),
    radial-gradient(115% 85% at 0%   115%, var(--dx-g-b2), transparent 55%),
    var(--bg-card) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 0 var(--dx-card-hi), 0 16px 44px rgba(0,0,0,.5) !important;
}
.stats-grid > .card-timeline,
.stats-grid > .card-flow,
.stats-grid .card-timeline,
.stats-grid .card-flow {
  background:
    radial-gradient(135% 95% at 100% -12%, var(--dx-g-c1), transparent 52%),
    radial-gradient(115% 85% at 0%   115%, var(--dx-g-c2), transparent 55%),
    var(--bg-card) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 0 var(--dx-card-hi), 0 16px 44px rgba(0,0,0,.5) !important;
}

/* Light mode bento card overrides */
body.light-theme .stats-grid > .prox-card {
  background:
    radial-gradient(135% 95% at 100% -12%, var(--dx-g-a1), transparent 52%),
    radial-gradient(115% 85% at 0%   115%, var(--dx-g-a2), transparent 55%),
    #f5f3ed !important;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.04), 0 4px 16px -4px rgba(26,22,18,.12) !important;
}
body.light-theme .stats-grid > .card-analytics {
  background:
    radial-gradient(135% 95% at 100% -12%, var(--dx-g-b1), transparent 52%),
    radial-gradient(115% 85% at 0%   115%, var(--dx-g-b2), transparent 55%),
    #f5f3ed !important;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.04), 0 4px 16px -4px rgba(26,22,18,.12) !important;
}
body.light-theme .stats-grid > .card-timeline,
body.light-theme .stats-grid > .card-flow,
body.light-theme .stats-grid .card-timeline,
body.light-theme .stats-grid .card-flow {
  background:
    radial-gradient(135% 95% at 100% -12%, var(--dx-g-c1), transparent 52%),
    radial-gradient(115% 85% at 0%   115%, var(--dx-g-c2), transparent 55%),
    #f5f3ed !important;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.04), 0 4px 16px -4px rgba(26,22,18,.12) !important;
}