/* ═══════════════════════════════════════════════════════════
   TRADEASSIST DESIGN SYSTEM v2.0
   Premium Institutional Trading Platform
   ═══════════════════════════════════════════════════════════ */

/* ── FONT FACE (system fallback) ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ════════════════════════════════
   DESIGN TOKENS (Dark Theme)
   ════════════════════════════════ */
:root {
  --bg:          #09090B;
  --bg-sub:      #111111;
  --card:        #161B26;
  --card-2:      #1E2533;
  --border:      rgba(255,255,255,0.06);
  --border-2:    rgba(255,255,255,0.10);
  --border-3:    rgba(255,255,255,0.14);

  --text:        #F8FAFC;
  --text-2:      #CBD5E1;
  --text-3:      #94A3B8;
  --muted:       #64748B;

  --blue:        #3B82F6;
  --blue-2:      #2563EB;
  --blue-bg:     rgba(59,130,246,0.10);
  --blue-border: rgba(59,130,246,0.20);

  --green:       #22C55E;
  --green-2:     #16A34A;
  --green-bg:    rgba(34,197,94,0.10);
  --green-border:rgba(34,197,94,0.20);

  --red:         #EF4444;
  --red-2:       #DC2626;
  --red-bg:      rgba(239,68,68,0.10);
  --red-border:  rgba(239,68,68,0.20);

  --amber:       #F59E0B;
  --amber-2:     #D97706;
  --amber-bg:    rgba(245,158,11,0.10);
  --amber-border:rgba(245,158,11,0.20);

  --purple:      #8B5CF6;
  --purple-bg:   rgba(139,92,246,0.10);
  --purple-border:rgba(139,92,246,0.20);

  --cyan:        #06B6D4;
  --cyan-bg:     rgba(6,182,212,0.10);

  --mono:        'JetBrains Mono', 'Consolas', monospace;
  --sans:        'Inter', system-ui, -apple-system, sans-serif;

  --radius-sm:   8px;
  --radius:      12px;
  --radius-lg:   18px;
  --radius-xl:   20px;
  --radius-full: 999px;

  --shadow-sm:   0 1px 3px rgba(0,0,0,0.3);
  --shadow:      0 4px 24px rgba(0,0,0,0.20);
  --shadow-lg:   0 8px 40px rgba(0,0,0,0.30);
  --shadow-xl:   0 12px 60px rgba(0,0,0,0.40);

  --hdr-h:       56px;
  --sb-w:        248px;
  --sb-w-col:    60px;

  --transition:  150ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Backward compatibility aliases for existing templates */
  --bg-card: var(--card);
  --bg-input: var(--bg-sub);
  --muted-2: var(--muted);
  --display: var(--sans);
  --success: var(--green);
  --danger:  var(--red);
  --warning: var(--amber);
  --info:    var(--blue);
  --b:       var(--border);
  --r12:     var(--radius);

  /* ── Global alias layer (2026-07-03) ─────────────────────────────────
     Templates reference these names 400+ times but they were never defined
     in the loaded stylesheet — pages only looked right in dark mode by
     accident and could NOT follow the light-theme toggle. Every alias
     points at a theme primitive, so the [data-theme="light"] block flips
     them all automatically. Do NOT hardcode hex values here. */
  --text-primary:   var(--text);
  --text-secondary: var(--text-2);
  --text-muted:     var(--text-3);
  --txt:            var(--text);
  --txt2:           var(--text-2);
  --txt3:           var(--text-3);
  --txt-pri:        var(--text);
  --txt-sec:        var(--text-2);
  --txt-ter:        var(--text-3);
  --t1:             var(--text);
  --t2:             var(--text-2);
  --t3:             var(--text-3);
  --t4:             var(--muted);
  --muted-3:        var(--muted);
  --bg-panel:       var(--card-2);
  --bg-surface:     var(--bg-sub);
  --bg-surface-2:   var(--card-2);
  --bg-surf:        var(--card);
  --bg2:            var(--bg-sub);
  --bg3:            var(--card-2);
  --panel:          var(--card);
  --panel2:         var(--card-2);
  --card-bg:        var(--card);
  --card-alt:       var(--card-2);
  --bg-hover:       var(--blue-bg);
  --border2:        var(--border-2);
  --border-hover:   var(--border-3);
  --radius-sm:      6px;
  --radius-md:      10px;
  --radius-lg:      14px;
  --accent:         var(--blue);
  --acc:            var(--blue);
  --blue-soft:      var(--blue-bg);
  --blue-glow:      var(--blue-border);
  --blue-d:         var(--blue-bg);
  --green-soft:     var(--green-bg);
  --green-glow:     var(--green-border);
  --green-d:        var(--green-bg);
  --green-txt:      var(--green);
  --red-soft:       var(--red-bg);
  --red-glow:       var(--red-border);
  --red-d:          var(--red-bg);
  --red-txt:        var(--red);
  --amber-soft:     var(--amber-bg);
  --amber-txt:      var(--amber);
  --gold:           var(--amber);
  --gold-bg:        var(--amber-bg);
  --gold-d:         var(--amber-bg);
  --purple-d:       var(--purple-bg);
  --bull:           var(--green);
  --bear:           var(--red);
  --warn:           var(--amber);
  --yellow:         var(--amber);
  --teal:           #14B8A6;
  --orange:         #F97316;
}

/* ════════════════════════════════
   DESIGN TOKENS (Light Theme)
   ════════════════════════════════ */
[data-theme="light"] {
  --bg:          #F5F7FB;
  --bg-sub:      #F0F2F6;
  --card:        #FFFFFF;
  --card-2:      #F8FAFC;
  --border:      rgba(0,0,0,0.07);
  --border-2:    rgba(0,0,0,0.10);
  --border-3:    rgba(0,0,0,0.14);

  --text:        #111827;
  --text-2:      #374151;
  --text-3:      #6B7280;
  --muted:       #94A3B8;

  --blue:        #2563EB;
  --blue-2:      #1D4ED8;
  --blue-bg:     rgba(37,99,235,0.08);
  --blue-border: rgba(37,99,235,0.16);

  --green:       #16A34A;
  --green-2:     #15803D;
  --green-bg:    rgba(22,163,74,0.08);
  --green-border:rgba(22,163,74,0.16);

  --red:         #DC2626;
  --red-2:       #B91C1C;
  --red-bg:      rgba(220,38,38,0.08);
  --red-border:  rgba(220,38,38,0.16);

  --amber:       #D97706;
  --amber-bg:    rgba(217,119,6,0.08);
  --amber-border:rgba(217,119,6,0.16);

  --purple:      #7C3AED;
  --purple-bg:   rgba(124,58,237,0.08);
  --purple-border:rgba(124,58,237,0.16);

  --cyan:        #0891B2;

  --shadow-sm:   0 1px 3px rgba(0,0,0,0.04);
  --shadow:      0 4px 24px rgba(0,0,0,0.06);
  --shadow-lg:   0 8px 40px rgba(0,0,0,0.08);
  --shadow-xl:   0 12px 60px rgba(0,0,0,0.10);

  --hdr-h:       56px;

  /* Backward compatibility aliases */
  --bg-card: var(--card);
  --bg-input: var(--bg-sub);
  --muted-2: var(--muted);
  --display: var(--sans);
  --success: var(--green);
  --danger:  var(--red);
  --warning: var(--amber);
  --info:    var(--blue);
  --b:       var(--border);
  --r12:     var(--radius);
}

/* ════════════════════════════════
   RESET
   ════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background var(--transition), color var(--transition);
}

a { color: inherit; text-decoration: none; transition: color var(--transition); }
img { max-width: 100%; display: block; }
input, select, textarea, button { font-family: inherit; }
ul, ol { list-style: none; }

/* ── Smooth anchor hover ── */
a:not(.btn):not(.nav-item):not(.mob-nav-item):hover {
  color: var(--blue);
}

/* ── Selection ── */
::selection { background: var(--blue); color: #fff; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--text-3); opacity: 0.3; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ── NProgress ── */
#nprogress .bar { background: var(--blue); height: 2px; }
#nprogress .peg { box-shadow: 0 0 10px var(--blue), 0 0 5px var(--blue); }

/* ════════════════════════════════
   AMBIENT BACKGROUND
   ════════════════════════════════ */
.bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(128,128,128,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(128,128,128,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}

.bg-glow {
  position: fixed; top: 15%; left: 50%; transform: translate(-50%, -50%);
  width: 800px; height: 500px; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(59,130,246,0.05) 0%, transparent 70%);
}

/* ════════════════════════════════
   APP SHELL
   ════════════════════════════════ */
.app-shell {
  display: flex;
  padding-top: var(--hdr-h);
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* ════════════════════════════════
   TOP HEADER / NAVBAR
   ════════════════════════════════ */
.top-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--hdr-h);
  background: rgba(9,9,11,0.85);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0;
  transition: background var(--transition);
}

[data-theme="light"] .top-header {
  background: rgba(255,255,255,0.85);
}

/* Brand */
.hdr-brand {
  width: var(--sb-w);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  border-right: 1px solid var(--border);
  height: 100%;
  transition: width var(--transition), border-color var(--transition);
}

.hdr-logo {
  width: 32px; height: 32px; border-radius: 10px;
  background: #030A1A;
  border: 1px solid rgba(59,130,246,0.25);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(59,130,246,0.25);
}

.hdr-brand-text .brand-name {
  font-size: 15px; font-weight: 800; letter-spacing: -0.4px;
  line-height: 1; color: var(--text);
}

.hdr-brand-text .brand-sub {
  font-size: 9px; font-weight: 600; color: var(--blue);
  letter-spacing: 0.8px; text-transform: uppercase;
  line-height: 1; margin-top: 3px;
}

/* Ticker row */
.hdr-ticker {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 20px;
  overflow: hidden;
}

.hdr-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 8px;
  background: var(--bg-sub);
  border: 1px solid var(--border);
  white-space: nowrap;
  flex-shrink: 0;
  transition: border-color var(--transition), background var(--transition);
}

.hdr-chip:hover { border-color: var(--border-2); background: var(--card); }

.hdr-chip .idx {
  font-size: 9px; font-weight: 700; color: var(--text-3);
  letter-spacing: 0.5px;
}

.hdr-chip .val {
  font-size: 13px; font-weight: 700;
  font-family: var(--mono);
  color: var(--text);
}

.hdr-chip .chg {
  font-size: 10px; font-weight: 600;
  font-family: var(--mono);
}

.hdr-chip .up  { color: var(--green); }
.hdr-chip .dn  { color: var(--red); }
.hdr-chip .neu { color: var(--text-3); }

/* GLOBAL MARKETS mini-panel (header) */
.hdr-chip.hdr-global {
  flex-direction: column;
  align-items: stretch;
  gap: 1px;
  padding: 4px 10px;
  border-color: rgba(59,130,246,0.22);
  min-height: 40px;
  justify-content: center;
}
.hg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hg-bias {
  font-size: 8px; font-weight: 800; letter-spacing: 0.5px;
  padding: 1px 6px; border-radius: 4px; line-height: 1.4;
}
.hg-bias.bull { color: var(--green); background: rgba(34,197,94,0.12); }
.hg-bias.bear { color: var(--red);   background: rgba(239,68,68,0.12); }
.hg-bias.mixed { color: var(--amber); background: var(--amber-soft); }
.hg-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 9px; white-space: nowrap; line-height: 1.25;
}
.hg-name { color: var(--text-3); font-weight: 600; min-width: 42px; }
.hg-val { font-family: var(--mono); font-weight: 700; color: var(--text); }
.hg-chg { font-family: var(--mono); font-weight: 600; margin-left: auto; }
.hg-chg.up { color: var(--green); }
.hg-chg.dn { color: var(--red); }

.hdr-divider {
  width: 1px; height: 24px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 8px;
}

/* Right section */
.hdr-right {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  flex-shrink: 0;
}

/* Status chips */
.hdr-status-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 8px;
  background: var(--bg-sub);
  border: 1px solid var(--border);
  font-size: 10px; font-weight: 600; color: var(--text-3);
  white-space: nowrap;
}

.hdr-status-chip.live {
  border-color: rgba(34,197,94,0.25);
  color: var(--green);
  background: rgba(34,197,94,0.06);
}

.hdr-status-chip.warn {
  border-color: var(--amber-border);
  color: var(--amber);
  background: var(--amber-bg);
}

.live-pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(34,197,94,0.5);
  animation: pulse-ring 2s infinite;
}

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
  70%  { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* Icon button */
.hdr-icon-btn {
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-sub);
  color: var(--text-3);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  transition: all var(--transition);
}

.hdr-icon-btn:hover {
  border-color: var(--border-2);
  color: var(--text);
  background: var(--card);
  transform: translateY(-1px);
}

/* Clock */
.hdr-clock {
  font-size: 11px;
  font-weight: 600;
  font-family: var(--mono);
  color: var(--text-3);
  white-space: nowrap;
}

/* Avatar */
.hdr-avatar {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #fff;
  cursor: pointer;
  border: none;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  transition: transform var(--transition), box-shadow var(--transition);
}

.hdr-avatar:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(59,130,246,0.3);
}

.hdr-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* Upstox badge */
.upstox-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--transition);
}

.upstox-badge.connected {
  background: rgba(34,197,94,0.08);
  color: var(--green);
  border: 1px solid rgba(34,197,94,0.25);
}

.upstox-badge.connected:hover {
  background: rgba(34,197,94,0.14);
  border-color: rgba(34,197,94,0.4);
}

.upstox-badge.disconnected {
  background: rgba(245,158,11,0.08);
  color: var(--amber);
  border: 1px solid rgba(245,158,11,0.25);
  animation: ux-hdr-pulse 2.2s ease-in-out infinite;
}

.upstox-badge.disconnected:hover {
  background: rgba(245,158,11,0.14);
  border-color: rgba(245,158,11,0.4);
  animation: none;
}

@keyframes ux-hdr-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.2); }
  50% { box-shadow: 0 0 8px 2px rgba(245,158,11,0.12); }
}

/* Mobile hamburger */
.mob-menu-btn {
  display: none;
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-sub);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-right: 8px;
  transition: background var(--transition);
}

.mob-menu-btn:hover { background: var(--card); }

/* ════════════════════════════════
   SIDEBAR
   ════════════════════════════════ */
.sidebar {
  position: fixed;
  top: var(--hdr-h); left: 0; bottom: 0;
  width: var(--sb-w);
  background: var(--bg-sub);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 900;
  transition: width 200ms ease, transform 250ms ease, background var(--transition);
  scrollbar-width: none;
}

.sidebar::-webkit-scrollbar { display: none; }

/* Sidebar user card */
.sb-user-card {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.sb-user-avatar {
  width: 38px; height: 38px;
  border-radius: 10px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: #fff;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 12px rgba(59,130,246,0.2);
}

.sb-user-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }

.sb-user-info { flex: 1; min-width: 0; }

.sb-user-name {
  font-size: 13px; font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb-plan-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.sb-plan-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
}

.sb-plan-badge.free {
  background: rgba(100,116,139,0.12);
  color: var(--text-3);
  border: 1px solid rgba(100,116,139,0.15);
}

.sb-plan-badge.pro {
  background: var(--blue-bg);
  color: var(--blue);
  border: 1px solid var(--blue-border);
}

.sb-plan-badge.admin {
  background: var(--amber-bg);
  color: var(--amber);
  border: 1px solid var(--amber-border);
}

.sb-upgrade-link {
  font-size: 9px;
  font-weight: 700;
  color: var(--amber);
  text-decoration: none;
  transition: opacity var(--transition);
}

.sb-upgrade-link:hover { opacity: 0.8; text-decoration: underline; }

/* Sidebar nav */
.sb-nav { flex: 1; padding: 8px 0; }

.sb-section {
  padding: 20px 18px 6px;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  transition: color var(--transition);
}

/* Nav items */
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  margin: 2px 10px;
  border-radius: 10px;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 120ms ease;
  position: relative;
  text-decoration: none;
}

.nav-item:hover {
  background: rgba(255,255,255,0.04);
  color: var(--text);
}

.nav-item.active {
  background: var(--blue-bg);
  color: var(--text);
  border: 1px solid var(--blue-border);
}

.nav-item.active .nav-ico { background: var(--blue-bg); color: var(--blue); }

/* War Room sidebar polish: depth, clear focus, and tactile hover feedback. */
.sidebar {
  background:
    linear-gradient(180deg, rgba(15, 27, 46, .98), rgba(8, 17, 31, .98) 58%, rgba(7, 14, 27, .99)),
    var(--bg-sub);
  border-right-color: rgba(96, 165, 250, .16);
  box-shadow: 14px 0 36px rgba(2, 6, 23, .16);
}

.sidebar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 132px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(34, 211, 238, .08), transparent 76%);
  opacity: .8;
}

.sb-user-card {
  position: relative;
  margin: 12px 10px 6px;
  padding: 12px 10px;
  border: 1px solid rgba(96, 165, 250, .16);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(59, 130, 246, .13), rgba(34, 211, 238, .04) 58%, rgba(15, 23, 42, .18));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 24px rgba(2, 6, 23, .12);
}

.sb-user-card::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -7px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, .42), transparent);
}

.sb-user-avatar {
  border: 1px solid rgba(125, 211, 252, .42);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, .05), 0 8px 18px rgba(14, 165, 233, .2);
}

.sb-section {
  position: relative;
  margin-top: 8px;
  padding: 17px 18px 6px 21px;
  color: #7C8DA8;
  letter-spacing: 1.15px;
}

.sb-section::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 20px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #22D3EE;
  box-shadow: 0 0 9px rgba(34, 211, 238, .8);
}

.nav-item {
  overflow: hidden;
  border: 1px solid transparent;
  transform: translateX(0);
  transition: transform 180ms cubic-bezier(.2,.8,.2,1), background 180ms ease,
    border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.nav-item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 10%;
  bottom: 10%;
  width: 2px;
  border-radius: 2px;
  background: #22D3EE;
  transform: scaleY(0);
  transition: transform 180ms ease;
}

.nav-item:hover {
  transform: translateX(3px);
  background: linear-gradient(90deg, rgba(34, 211, 238, .10), rgba(59, 130, 246, .04));
  border-color: rgba(96, 165, 250, .16);
  color: #E2E8F0;
  box-shadow: 0 7px 18px rgba(2, 6, 23, .14);
}

.nav-item:hover::after,
.nav-item.active::after { transform: scaleY(1); }

.nav-item.active {
  background: linear-gradient(90deg, rgba(59, 130, 246, .22), rgba(34, 211, 238, .07) 76%, transparent);
  border-color: rgba(96, 165, 250, .28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 22px rgba(37, 99, 235, .12);
}

.nav-item.active .nav-ico,
.nav-item:hover .nav-ico {
  transform: translateX(1px) scale(1.06);
  border-color: rgba(125, 211, 252, .22);
  box-shadow: 0 0 14px rgba(34, 211, 238, .12);
}

.nav-ico {
  border: 1px solid transparent;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1), background 180ms ease,
    border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.nav-badge { transition: transform 180ms ease, filter 180ms ease; }
.nav-item:hover .nav-badge { transform: translateX(-1px); filter: brightness(1.12); }

@media (prefers-reduced-motion: reduce) {
  .nav-item, .nav-ico, .nav-badge, .nav-item::after { transition: none; }
  .nav-item:hover, .nav-item.active .nav-ico, .nav-item:hover .nav-ico,
  .nav-item:hover .nav-badge { transform: none; }
}

/* Nav icon */
.nav-ico {
  width: 30px; height: 30px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  color: var(--text-3);
  background: rgba(255,255,255,0.03);
  transition: all 120ms ease;
}

.nav-item:hover .nav-ico {
  color: var(--text);
  background: rgba(255,255,255,0.06);
}

.nav-label { flex: 1; }

/* Nav badges */
.nav-badge {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  white-space: nowrap;
}

.nb-live { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
.nb-auto { background: var(--purple-bg); color: var(--purple); border: 1px solid var(--purple-border); }
.nb-soon { background: rgba(100,116,139,0.1); color: var(--text-3); border: 1px solid var(--border); }
.nb-3pm  { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); }
.nb-ai   { background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue-border); }
/* Step number badges for Trade Flow section */
.nav-step {
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.25);
  color: var(--blue); font-size: 8px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-left: auto;
}
.nav-item.active .nav-step { background: var(--blue); color: #fff; border-color: var(--blue); }
.sidebar.collapsed .nav-step { display: none; }

/* Sidebar sub-menu */
.sb-sub { padding-left: 16px; }
.sb-sub .nav-item { font-size: 12px; padding: 6px 14px; margin: 1px 10px; }
.sb-sub .nav-ico  { width: 24px; height: 24px; font-size: 11px; }

/* Sidebar expiry */
.sb-expiry {
  margin: 10px 10px 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.sb-expiry-title {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.sb-exp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  margin-bottom: 6px;
}

.sb-exp-row:last-child { margin-bottom: 0; }

.sb-exp-idx {
  font-weight: 700;
  color: var(--text-3);
  width: 52px;
  font-size: 10px;
}

.sb-exp-date {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text);
  font-weight: 600;
  flex: 1;
}

.sb-exp-dte {
  font-size: 9px;
  font-weight: 700;
  font-family: var(--mono);
  padding: 2px 7px;
  border-radius: 6px;
}

.sb-exp-dte.close { background: var(--red-bg); color: var(--red); }
.sb-exp-dte.soon  { background: var(--amber-bg); color: var(--amber); }
.sb-exp-dte.normal{ background: var(--green-bg); color: var(--green); }

/* Sidebar bottom */
.sb-bottom {
  padding: 12px 10px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.sb-bot-link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  border-radius: 8px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 500;
  transition: all 120ms ease;
  cursor: pointer;
  text-decoration: none;
}

.sb-bot-link:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.sb-bot-link.logout:hover { background: var(--red-bg); color: var(--red); }

/* Sidebar collapse overlay (mobile) */
.sb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 850;
  backdrop-filter: blur(4px);
}

.sb-overlay.open { display: block; }

/* ════════════════════════════════
   MAIN CONTENT
   ════════════════════════════════ */
.main-content {
  flex: 1;
  margin-left: var(--sb-w);
  padding: calc(24px + var(--hdr-h)) 32px 24px;
  min-width: 0;
  transition: margin-left 200ms ease, padding var(--transition);
  position: relative;
  z-index: 1;
}

.sidebar.collapsed { width: var(--sb-w-col); }
.sidebar.collapsed ~ .main-content,
.sidebar.collapsed + * .main-content { margin-left: var(--sb-w-col); }

/* ════════════════════════════════
   CARD SYSTEM
   ════════════════════════════════ */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: all var(--transition);
}

.card-sm { padding: 16px 20px; }
.card-lg { padding: 32px; }

.card-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 16px;
}

.card-hover {
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.card-hover:hover {
  border-color: var(--blue-border);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

/* Card lift animation */
.card-lift {
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow var(--transition),
              border-color var(--transition);
}

.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--blue-border);
}

/* Glass card */
.glass-card {
  background: rgba(22,27,38,0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
}

[data-theme="light"] .glass-card {
  background: rgba(255,255,255,0.7);
}

/* ════════════════════════════════
   KPI / STATS
   ════════════════════════════════ */
.kpi-val {
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.kpi-lbl {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 4px;
  font-weight: 500;
}

.chg-up  { color: var(--green); }
.chg-dn  { color: var(--red); }
.chg-neu { color: var(--text-3); }

/* ════════════════════════════════
   BADGES
   ════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge-success{ background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
.badge-danger { background: var(--red-bg);  color: var(--red);  border: 1px solid var(--red-border); }
.badge-warning{ background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); }
.badge-info   { background: var(--blue-bg);  color: var(--blue); border: 1px solid var(--blue-border); }
.badge-muted  { background: rgba(148,163,184,0.08); color: var(--text-3); border: 1px solid var(--border); }
.badge-purple { background: var(--purple-bg); color: var(--purple); border: 1px solid var(--purple-border); }

/* Premium indicator badges */
.badge-buy  { background: rgba(34,197,94,0.12); color: var(--green);  border: 1px solid rgba(34,197,94,0.25); }
.badge-sell { background: rgba(239,68,68,0.12); color: var(--red);    border: 1px solid rgba(239,68,68,0.25); }
.badge-ai   { background: var(--purple-bg);      color: var(--purple); border: 1px solid var(--purple-border); }

/* ════════════════════════════════
   BUTTONS
   ════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.btn-primary {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue-2);
  box-shadow: 0 4px 14px rgba(59,130,246,0.25);
}

.btn-primary:hover {
  background: var(--blue-2);
  box-shadow: 0 6px 20px rgba(59,130,246,0.35);
}

.btn-success {
  background: var(--green-bg);
  color: var(--green);
  border-color: var(--green-border);
}

.btn-success:hover { background: rgba(34,197,94,0.18); }

.btn-danger {
  background: var(--red-bg);
  color: var(--red);
  border-color: var(--red-border);
}

.btn-danger:hover { background: rgba(239,68,68,0.18); }

.btn-ghost {
  background: transparent;
  color: var(--text-3);
  border-color: var(--border-2);
}

.btn-ghost:hover { background: rgba(255,255,255,0.04); color: var(--text); border-color: var(--border-3); }

.btn-sm { padding: 7px 16px; font-size: 11px; border-radius: var(--radius-sm); }
.btn-lg { padding: 14px 28px; font-size: 15px; border-radius: var(--radius); }

.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:disabled:hover { transform: none; }

/* ════════════════════════════════
   FORM ELEMENTS
   ════════════════════════════════ */
.form-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  margin-bottom: 6px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.form-input, .form-select {
  width: 100%;
  background: var(--bg-sub);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 11px 14px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: all var(--transition);
}

.form-input:focus, .form-select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.10);
}

.form-input::placeholder { color: var(--text-3); }

.form-hint {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}

.form-row { margin-bottom: 16px; }

/* ════════════════════════════════
   TABLES
   ════════════════════════════════ */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.data-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

.data-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  background: var(--bg-sub);
}

.data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
}

.data-table tr:hover td { background: rgba(255,255,255,0.02); }
.data-table tr:last-child td { border-bottom: none; }

/* Table wrapper (rounded container) */
.table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card);
}

.table-wrap .data-table { margin-bottom: 0; }

/* ════════════════════════════════
   PROGRESS BARS
   ════════════════════════════════ */
.progress-bar {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.progress-fill.success { background: linear-gradient(90deg, var(--green), var(--green-2)); }
.progress-fill.danger  { background: linear-gradient(90deg, var(--red), var(--red-2)); }
.progress-fill.info    { background: linear-gradient(90deg, var(--blue), var(--blue-2)); }
.progress-fill.warning { background: linear-gradient(90deg, var(--amber), var(--amber-2)); }

/* ════════════════════════════════
   BANNERS / ALERTS
   ════════════════════════════════ */
.warn-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  flex-wrap: wrap;
  font-size: 13px;
}

.warn-banner.amber { background: var(--amber-bg); border: 1px solid var(--amber-border); color: var(--amber); }
.warn-banner.danger{ background: var(--red-bg);   border: 1px solid var(--red-border);   color: var(--red); }
.warn-banner a { color: inherit; font-weight: 700; text-decoration: underline; }

/* ════════════════════════════════
   SKELETON LOADING
   ════════════════════════════════ */
@keyframes sk-pulse {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.6; }
}

.skeleton {
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  animation: sk-pulse 1.6s ease-in-out infinite;
}

.skeleton-row { height: 14px; border-radius: 6px; margin-bottom: 10px; }

/* ════════════════════════════════
   PRICE FLASH ANIMATIONS
   ════════════════════════════════ */
@keyframes flash-up {
  0%   { color: var(--green); text-shadow: 0 0 8px rgba(34,197,94,0.5); }
  100% { color: inherit; text-shadow: none; }
}

@keyframes flash-dn {
  0%   { color: var(--red); text-shadow: 0 0 8px rgba(239,68,68,0.5); }
  100% { color: inherit; text-shadow: none; }
}

.flash-up { animation: flash-up 0.9s ease-out forwards; }
.flash-dn { animation: flash-dn 0.9s ease-out forwards; }

.price-up   { animation: flash-up 0.5s ease-out forwards; }
.price-down { animation: flash-dn 0.5s ease-out forwards; }
.rt-flash { animation: flash-up 0.3s ease-out; }

/* ── Text shimmer ── */
@keyframes text-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.shimmer-text {
  background: linear-gradient(90deg,
    rgba(148,163,184,0.6) 20%,
    rgba(255,255,255,1) 50%,
    rgba(148,163,184,0.6) 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: text-shimmer 3.5s linear infinite;
}

/* ════════════════════════════════
   SECTION HEADERS
   ════════════════════════════════ */
.section-header {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-header::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--blue);
}

/* ════════════════════════════════
   GRID LAYOUTS
   ════════════════════════════════ */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

@media(max-width: 900px) {
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
}

@media(max-width: 600px) {
  .grid-4 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
}

.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between{ display: flex; align-items: center; justify-content: space-between; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.mb-4  { margin-bottom: 4px; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }

/* ════════════════════════════════
   UTILITIES
   ════════════════════════════════ */
.mono { font-family: var(--mono); }
.sans { font-family: var(--sans); }
.text-muted { color: var(--text-3); }
.text-success { color: var(--green); }
.text-danger  { color: var(--red); }
.text-warning { color: var(--amber); }
.text-info    { color: var(--blue); }

/* ── Animated number transition (backward compat) ── */
.num-animate {
  transition: color 0.3s ease;
  display: inline-block;
}
.text-primary { color: var(--text); }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.fz-10  { font-size: 10px; }
.fz-11  { font-size: 11px; }
.fz-12  { font-size: 12px; }
.fz-13  { font-size: 13px; }
.fz-14  { font-size: 14px; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ════════════════════════════════
   SIDEBAR COLLAPSED STATE
   ════════════════════════════════ */
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-badge,
.sidebar.collapsed .sb-section,
.sidebar.collapsed .sb-user-info,
.sidebar.collapsed .sb-expiry,
.sidebar.collapsed .sb-bot-link span,
.sidebar.collapsed .sb-sub { display: none; }

.sidebar.collapsed .nav-item { justify-content: center; padding: 10px; margin: 4px 8px; }
.sidebar.collapsed .nav-ico  { width: 34px; height: 34px; font-size: 14px; }
.sidebar.collapsed .sb-user-card { justify-content: center; padding: 14px; }
.sidebar.collapsed .sb-bottom { flex-direction: column; }
.sidebar.collapsed .sb-bot-link { flex: none; justify-content: center; }

/* Sidebar collapse toggle button */
#sbCollapseBtn {
  position: absolute;
  bottom: 60px; right: -12px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--border-2);
  color: var(--text-3);
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 901;
  transition: all var(--transition);
}

#sbCollapseBtn:hover {
  background: var(--card-2);
  border-color: var(--border-3);
  color: var(--text);
}

/* ════════════════════════════════
   MOBILE BOTTOM NAV
   ════════════════════════════════ */
.mob-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 800;
  background: var(--card);
  border-top: 1px solid var(--border);
  padding: 8px 0;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}

.mob-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  color: var(--text-3);
  font-size: 9px;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition);
}

.mob-nav-item i { font-size: 20px; }
.mob-nav-item.act { color: var(--blue); }

/* ════════════════════════════════
   RESPONSIVE
   ════════════════════════════════ */
@media (max-width: 768px) {
  :root { --sb-w: 260px; --hdr-h: 52px; }
  .mob-menu-btn { display: flex; }
  .hdr-brand { width: auto; border-right: none; padding: 0 12px; }
  .hdr-brand-text .brand-name { font-size: 13px; }
  .hdr-brand-text .brand-sub { display: none; }
  .hdr-ticker { display: none; }
  .hdr-clock  { display: none; }
  .hdr-right { gap: 6px; padding: 0 8px; }
  .hdr-status-chip { display: none; }
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-xl); }
  .main-content { margin-left: 0; padding: calc(16px + var(--hdr-h)) 16px 72px; }
  .mob-bottom-nav { display: flex; }
  .card { padding: 16px; }
  .card-lg { padding: 20px; }
}

@media (max-width: 480px) {
  .main-content { padding: calc(12px + var(--hdr-h)) 12px 12px; }
  .pg { padding: 8px 12px 80px; }
}

/* ════════════════════════════════
   ACCESSIBILITY
   ════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Skip to content (for keyboard users) */
.skip-link {
  position: fixed;
  top: -100%;
  left: 16px;
  z-index: 10000;
  padding: 8px 16px;
  background: var(--blue);
  color: #fff;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: 8px;
}

/* ════════════════════════════════
   THEME TRANSITION
   ════════════════════════════════ */
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition: background 200ms ease,
              color 200ms ease,
              border-color 200ms ease,
              box-shadow 200ms ease !important;
}

/* ════════════════════════════════
   KEYFRAMES
   ════════════════════════════════ */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

/* ════════════════════════════════
   DASHBOARD / DAILY SETUP SPECIFICS
   ════════════════════════════════ */

/* ── Index selector tabs ── */
.idx-tabs {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.idx-tab {
  padding: 7px 18px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  background: var(--card);
  color: var(--text-3);
  cursor: pointer;
  text-decoration: none;
  border: 1px solid var(--border);
  transition: all var(--transition);
  white-space: nowrap;
}

.idx-tab:hover {
  background: var(--blue-bg);
  color: var(--blue);
  border-color: var(--blue-border);
}

.idx-tab.active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue-2);
}

/* ── Signal timer bar ── */
.sig-timer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.sig-timer-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.sig-timer-icon { font-size: 24px; flex-shrink: 0; }

.sig-timer-info { flex-shrink: 0; }

.sig-timer-lbl {
  font-size: 9px;
  color: var(--text-3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 2px;
}

.sig-timer-count {
  font-size: 24px;
  font-weight: 800;
  font-family: var(--mono);
  color: var(--blue);
  line-height: 1;
}

.sig-timer-count.urgent { color: var(--amber); }
.sig-timer-count.firing { color: var(--green); }
.sig-timer-count.closed { color: var(--text-3); letter-spacing: 2px; }

.sig-timer-detail { flex: 1; min-width: 0; }
.sig-timer-sub { font-size: 10px; color: var(--text-2); font-weight: 500; margin-bottom: 6px; }

.sig-prog-wrap {
  height: 4px;
  background: var(--card-2);
  border-radius: 999px;
  overflow: hidden;
}

.sig-prog-bar {
  height: 100%;
  background: var(--blue);
  border-radius: 999px;
  transition: width 1s linear;
}

.sig-prog-bar.urgent { background: var(--amber); }

.sig-timer-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.sig-gen-status { font-size: 11px; color: var(--text-2); }

/* ── Top bar / session info ── */
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  margin-bottom: 16px;
}

.session-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.session-badge.live {
  background: var(--green-bg);
  color: var(--green);
  border: 1px solid var(--green-border);
}

.session-badge.closed {
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid var(--red-border);
}

.session-badge.weekend {
  background: var(--amber-bg);
  color: var(--amber);
  border: 1px solid var(--amber-border);
}

/* ── KPI Grid ── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.kpi-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  transition: all var(--transition);
}

.kpi-card:hover {
  border-color: var(--blue-border);
  box-shadow: var(--shadow);
}

.kpi-card .kpi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.kpi-card .kpi-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.kpi-card .kpi-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.kpi-card .kpi-icon.info  { background: var(--blue-bg); color: var(--blue); }
.kpi-card .kpi-icon.safe  { background: var(--green-bg); color: var(--green); }
.kpi-card .kpi-icon.warn  { background: var(--amber-bg); color: var(--amber); }
.kpi-card .kpi-icon.danger{ background: var(--red-bg); color: var(--red); }

/* ── Hero Trade Card ── */
.hero-trade-card {
  background: linear-gradient(135deg, var(--card), var(--card-2));
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 28px 32px;
  margin-bottom: 20px;
  transition: all var(--transition);
}

.hero-trade-card:hover {
  border-color: var(--blue-border);
  box-shadow: var(--shadow-lg);
}

.hero-trade-card .trade-direction {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.hero-trade-card .trade-direction.buy {
  background: var(--green-bg);
  color: var(--green);
  border: 1px solid var(--green-border);
}

.hero-trade-card .trade-direction.sell {
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid var(--red-border);
}

.hero-trade-card .trade-direction.wait {
  background: var(--amber-bg);
  color: var(--amber);
  border: 1px solid var(--amber-border);
}

/* Grade meter */
.grade-meter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.grade-aplus { background: rgba(34,197,94,0.12); color: var(--green); border: 1px solid rgba(34,197,94,0.2); }
.grade-a { background: rgba(34,197,94,0.10); color: var(--green); border: 1px solid rgba(34,197,94,0.18); }
.grade-b { background: rgba(59,130,246,0.10); color: var(--blue); border: 1px solid rgba(59,130,246,0.2); }
.grade-c { background: rgba(245,158,11,0.10); color: var(--amber); border: 1px solid rgba(245,158,11,0.2); }
.grade-d { background: rgba(239,68,68,0.08); color: var(--red); border: 1px solid rgba(239,68,68,0.15); }

/* ── Trade entry levels (entry / SL / T1 / T2 boxes) ── */
.trade-levels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.trade-level {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 12px;
  border-radius: var(--radius);
  text-align: center;
  gap: 4px;
}

.trade-level.entry { background: var(--blue-bg); border: 1px solid var(--blue-border); }
.trade-level.sl    { background: var(--red-bg);  border: 1px solid var(--red-border); }
.trade-level.t1    { background: var(--green-bg); border: 1px solid var(--green-border); }
.trade-level.t2    { background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.18); }

.trade-level .tl-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.trade-level .tl-value {
  font-size: 16px;
  font-weight: 800;
  font-family: var(--mono);
  line-height: 1.2;
  color: var(--text);
}

.trade-level .tl-sub {
  font-size: 9px;
  color: var(--text-3);
  font-weight: 600;
}

/* ── Conditions checklist ── */
.checklist-gate {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin: 16px 0;
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  transition: all var(--transition);
}

.checklist-item.met {
  background: var(--green-bg);
  border: 1px solid var(--green-border);
  color: var(--green);
}

.checklist-item.unmet {
  background: var(--red-bg);
  border: 1px solid var(--red-border);
  color: var(--red);
}

.checklist-item .cl-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
}

.checklist-item.met .cl-icon { background: rgba(34,197,94,0.2); color: var(--green); }
.checklist-item.unmet .cl-icon { background: rgba(239,68,68,0.2); color: var(--red); }

.checklist-item .cl-value {
  font-size: 10px;
  font-family: var(--mono);
  font-weight: 600;
  margin-left: auto;
  opacity: 0.8;
}

/* ── Scores bar (bull / bear) ── */
.score-bar-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
}

.score-bar {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--card-2);
  position: relative;
}

.score-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.score-fill.bull { background: linear-gradient(90deg, var(--green), var(--green-2)); }
.score-fill.bear { background: linear-gradient(90deg, var(--red), var(--red-2)); }

/* ── Signal history table ── */
.signal-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  align-items: center;
  transition: background var(--transition);
}

.signal-row:hover { background: rgba(255,255,255,0.02); }

.signal-row .sr-date {
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--mono);
  white-space: nowrap;
}

.signal-row .sr-dir {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
}

.signal-row .sr-dir.ce { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
.signal-row .sr-dir.pe { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); }

.signal-row .sr-strike {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
}

.signal-row .sr-outcome {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}

.sr-win2 { background: rgba(34,197,94,0.12); color: var(--green); border: 1px solid rgba(34,197,94,0.2); }
.sr-win1 { background: rgba(34,197,94,0.08); color: var(--green); border: 1px solid rgba(34,197,94,0.15); }
.sr-loss { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); }
.sr-exp  { background: rgba(100,116,139,0.08); color: var(--text-3); border: 1px solid var(--border); }
.sr-open { background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue-border); }

/* ── Stats row (prediction tracking) ── */
.stats-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 16px 0;
}

.stat-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-width: 80px;
}

.stat-pill .sp-value {
  font-size: 18px;
  font-weight: 800;
  font-family: var(--mono);
  line-height: 1.2;
}

.stat-pill .sp-label {
  font-size: 9px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 4px;
}

.stat-pill.up   .sp-value { color: var(--green); }
.stat-pill.down .sp-value { color: var(--red); }
.stat-pill.neut .sp-value { color: var(--text); }

/* ── Market Structure / Levels ── */
.levels-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.level-box {
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--bg-sub);
  border: 1px solid var(--border);
}

.level-box .lb-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.level-box .lb-value {
  font-size: 15px;
  font-weight: 700;
  font-family: var(--mono);
  margin-top: 4px;
}

.level-box .lb-value.support { color: var(--green); }
.level-box .lb-value.resistance { color: var(--red); }

/* ── Global Context ── */
.global-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-sub);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}

.global-chip:hover { border-color: var(--border-2); }

.global-chip .gc-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  min-width: 60px;
}

.global-chip .gc-value {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
}

.global-chip .gc-change {
  font-size: 11px;
  font-weight: 600;
  font-family: var(--mono);
  margin-left: auto;
}

/* ── Post-market analysis ── */
.outcome-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
}

.outcome-hero.correct {
  background: var(--green-bg);
  border: 1px solid var(--green-border);
}

.outcome-hero.wrong {
  background: var(--red-bg);
  border: 1px solid var(--red-border);
}

.outcome-hero.flat {
  background: var(--amber-bg);
  border: 1px solid var(--amber-border);
}

.outcome-hero .oh-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.outcome-hero .oh-text {
  font-size: 16px;
  font-weight: 700;
}

.outcome-hero .oh-sub {
  font-size: 12px;
  opacity: 0.8;
  margin-top: 2px;
}

/* ── Admin bar ── */
.admin-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 12px;
  font-size: 11px;
  flex-wrap: wrap;
}

.fetch-btn {
  padding: 6px 16px;
  border-radius: var(--radius-sm);
  background: var(--blue-bg);
  color: var(--blue);
  border: 1px solid var(--blue-border);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition);
}

.fetch-btn:hover { background: var(--blue); color: #fff; }
.fetch-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Error/fallback info ── */
.data-warn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--blue-bg);
  border: 1px solid var(--blue-border);
  font-size: 11px;
  color: var(--blue);
  font-weight: 600;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

/* ── Warning banner right section layout ── */
.wb-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.wb-body { flex: 1; min-width: 0; }
.wb-title { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.wb-sub { font-size: 11px; font-weight: 500; opacity: 0.85; line-height: 1.4; }
.wb-close {
  background: none; border: none; cursor: pointer; color: inherit; opacity: 0.5;
  font-size: 16px; font-weight: 700; padding: 0 2px; flex-shrink: 0; line-height: 1; margin-top: 1px;
}
.wb-close:hover { opacity: 1; }

.connect-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  background: var(--amber);
  color: #000;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

/* ── Reversal panels ── */
.rg-panel {
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 10px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.rg-panel.green  { background: var(--green-bg); border: 1px solid var(--green-border); }
.rg-panel.yellow { background: var(--amber-bg); border: 1px solid var(--amber-border); }
.rg-panel.red    { background: var(--red-bg);   border: 2px solid var(--red-border); }

.rg-icon { font-size: 20px; line-height: 1; margin-top: 2px; }
.rg-title { font-size: 12px; font-weight: 800; letter-spacing: 0.02em; margin-bottom: 2px; }
.rg-title.green  { color: var(--green); }
.rg-title.yellow { color: var(--amber); }
.rg-title.red    { color: var(--red); }
.rg-msg { font-size: 11px; color: var(--text-2); line-height: 1.4; }
.rg-levels { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.rg-lvl {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--mono);
  background: rgba(255,255,255,0.04);
  padding: 3px 8px;
  border-radius: 6px;
  color: var(--text-2);
}
.rg-block {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  margin-left: 4px;
}
.rg-block.ce { background: rgba(239,68,68,0.15); color: var(--red); border: 1px solid rgba(239,68,68,0.3); }
.rg-block.pe { background: rgba(245,158,11,0.15); color: var(--amber); border: 1px solid rgba(245,158,11,0.3); }

/* ── Reversal banner ── */
.reversal-banner.red   { background: var(--red-bg);   border: 2px solid var(--red-border); }
.reversal-banner.amber { background: var(--amber-bg); border: 2px solid var(--amber-border); }

/* ════════════════════════════════
   PRINT DISCLAIMER
   ════════════════════════════════ */
@media print {
  .sidebar, .top-header, .mob-bottom-nav { display: none; }
  .main-content { margin-left: 0; padding: 0; }
}

/* ════════════════════════════════════════════════════════════
   v3 ELITE ENHANCEMENTS — Premium institutional feel
   ════════════════════════════════════════════════════════════ */

/* ── Richer dark-mode base tokens ─────────────────────────── */
:root {
  --bg:          #060A12;
  --bg-sub:      #0C1220;
  --card:        #101827;
  --card-2:      #182033;
  --border:      rgba(255,255,255,0.055);
  --border-2:    rgba(255,255,255,0.09);
  --border-3:    rgba(255,255,255,0.13);
}

/* ── Richer light-mode base tokens ───────────────────────── */
[data-theme="light"] {
  --bg:          #EBF0FF;
  --bg-sub:      #E0E8FF;
  --card:        #FFFFFF;
  --card-2:      #F4F7FF;
  --border:      rgba(59,130,246,0.10);
  --border-2:    rgba(59,130,246,0.15);
  --border-3:    rgba(59,130,246,0.22);
}

/* ── Header animated gradient underline ──────────────────── */
.top-header {
  position: fixed;
  overflow: visible;
}

.top-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(59,130,246,0.55) 30%,
    rgba(139,92,246,0.55) 55%,
    rgba(6,182,212,0.4) 75%,
    transparent 100%);
  pointer-events: none;
}

/* ── Logo animated glow ───────────────────────────────────── */
@keyframes elite-logo-glow {
  0%, 100% { box-shadow: 0 0 12px rgba(59,130,246,0.35), 0 0 0 1px rgba(59,130,246,0.18); }
  50%       { box-shadow: 0 0 22px rgba(99,102,241,0.55), 0 0 0 1px rgba(99,102,241,0.28); }
}

.hdr-logo {
  animation: elite-logo-glow 3.2s ease-in-out infinite;
  transition: transform 0.2s ease;
}

.hdr-brand:hover .hdr-logo {
  transform: scale(1.08) rotate(-3deg);
}

/* ── Active sidebar nav — left accent bar via inset shadow ── */
.nav-item.active {
  border: none !important;
  box-shadow: inset 3px 0 0 var(--blue) !important;
  background: linear-gradient(90deg,
    rgba(59,130,246,0.10) 0%,
    rgba(59,130,246,0.04) 60%,
    transparent 100%) !important;
  color: var(--text) !important;
}

.nav-item.active .nav-ico {
  background: rgba(59,130,246,0.15) !important;
  color: var(--blue) !important;
}

/* ── Sidebar nav hover ─────────────────────────────────────── */
.nav-item:hover {
  background: rgba(59,130,246,0.06);
  color: var(--text);
  transform: translateX(2px);
}

.nav-item {
  transition: all 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Sidebar section labels ────────────────────────────────── */
.sb-section {
  position: relative;
  padding-left: 20px;
}

.sb-section::before {
  content: '';
  position: absolute;
  left: 18px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 1px;
  background: linear-gradient(90deg, var(--blue), transparent);
  display: none; /* enabled below */
}

/* ── Premium card system ───────────────────────────────────── */
.card {
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(59,130,246,0.4) 40%,
    rgba(139,92,246,0.3) 70%,
    transparent 100%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 1;
}

.card:hover::before { opacity: 1; }
.card:hover { border-color: var(--border-2); }

/* Card shimmer glow effect */
@keyframes card-shimmer-move {
  0%   { transform: translateX(-100%) rotate(45deg); }
  100% { transform: translateX(200%) rotate(45deg); }
}

.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.25), 0 0 0 1px var(--blue-border);
  border-color: var(--blue-border);
}

[data-theme="light"] .card-lift:hover {
  box-shadow: 0 12px 40px rgba(59,130,246,0.12), 0 0 0 1px var(--blue-border);
}

/* ── Premium button shimmer ────────────────────────────────── */
@keyframes elite-btn-shimmer {
  0%      { left: -120%; }
  45%, 100% { left: 120%; }
}

.btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--blue) 0%, #4F46E5 100%);
  border: 1px solid rgba(99,102,241,0.4);
  box-shadow: 0 4px 16px rgba(59,130,246,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  animation: elite-btn-shimmer 2.8s ease-in-out infinite;
  pointer-events: none;
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 28px rgba(59,130,246,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
  background: linear-gradient(135deg, #4F46E5 0%, var(--blue) 100%);
}

/* ── Ghost button upgrade ──────────────────────────────────── */
.btn-ghost:hover {
  background: rgba(59,130,246,0.06);
  color: var(--blue);
  border-color: var(--blue-border);
}

/* ── Table upgrade ─────────────────────────────────────────── */
.data-table th {
  background: var(--bg-sub);
  border-bottom: 1px solid var(--border-2);
  position: sticky; top: 0; z-index: 2;
}

.data-table tr:hover td {
  background: rgba(59,130,246,0.04);
}

[data-theme="light"] .data-table tr:hover td {
  background: rgba(59,130,246,0.05);
}

.table-wrap {
  box-shadow: var(--shadow-sm);
}

[data-theme="light"] .table-wrap {
  box-shadow: 0 4px 20px rgba(59,130,246,0.06);
}

/* ── Badge upgrade: subtle glow ───────────────────────────── */
.badge-success { box-shadow: 0 0 8px rgba(34,197,94,0.15); }
.badge-danger  { box-shadow: 0 0 8px rgba(239,68,68,0.15); }
.badge-info    { box-shadow: 0 0 8px rgba(59,130,246,0.15); }

/* ── Header icon buttons upgrade ──────────────────────────── */
.hdr-icon-btn:hover {
  background: rgba(59,130,246,0.08);
  border-color: var(--blue-border);
  color: var(--blue);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59,130,246,0.15);
}

/* ── Ticker chip upgrade ──────────────────────────────────── */
.hdr-chip {
  transition: all 0.15s ease;
}

.hdr-chip:hover {
  border-color: var(--blue-border);
  background: rgba(59,130,246,0.06);
}

/* ── Sidebar user card upgrade ────────────────────────────── */
.sb-user-card {
  background: linear-gradient(135deg,
    rgba(59,130,246,0.06) 0%,
    rgba(139,92,246,0.04) 100%);
  border-bottom: 1px solid var(--border);
}

.sb-user-avatar {
  box-shadow: 0 4px 16px rgba(59,130,246,0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sb-user-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(59,130,246,0.45);
}

/* ── Expiry strip upgrade ─────────────────────────────────── */
.sb-expiry {
  background: linear-gradient(135deg, var(--card), var(--card-2));
  border: 1px solid var(--border-2);
}

/* ── KPI value upgrade ─────────────────────────────────────── */
.kpi-val {
  letter-spacing: -0.5px;
  transition: color 0.3s ease;
}

/* ── Form input upgrade ───────────────────────────────────── */
.form-input, .form-select {
  background: var(--bg);
  border: 1px solid var(--border-2);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.12);
  transition: all 0.18s ease;
}

.form-input:hover, .form-select:hover {
  border-color: var(--border-3);
}

.form-input:focus, .form-select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.12), inset 0 1px 3px rgba(0,0,0,0.08);
}

/* ── Ambient background upgrade (dark) ────────────────────── */
.bg-glow {
  background: radial-gradient(ellipse at 50% 0%,
    rgba(59,130,246,0.07) 0%,
    rgba(139,92,246,0.04) 40%,
    transparent 70%);
  width: 100%;
  height: 600px;
  top: 0; left: 0; transform: none;
}

/* ── Light mode ambient ───────────────────────────────────── */
[data-theme="light"] .bg-glow {
  background: radial-gradient(ellipse at 50% 0%,
    rgba(59,130,246,0.06) 0%,
    rgba(139,92,246,0.03) 40%,
    transparent 70%);
}

[data-theme="light"] .bg-grid {
  background-image:
    linear-gradient(to right,  rgba(59,130,246,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(59,130,246,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ── Sidebar bottom links upgrade ─────────────────────────── */
.sb-bot-link {
  border-radius: 10px;
  transition: all 0.15s ease;
}

.sb-bot-link:hover {
  background: rgba(59,130,246,0.06);
  color: var(--blue);
}

.sb-bot-link.logout:hover {
  background: var(--red-bg);
  color: var(--red);
}

/* ── Progress bar upgrade ─────────────────────────────────── */
.progress-bar {
  background: rgba(255,255,255,0.05);
}

[data-theme="light"] .progress-bar {
  background: rgba(59,130,246,0.08);
}

/* ── Scrollbar upgrade ────────────────────────────────────── */
::-webkit-scrollbar-track { background: var(--bg-sub); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: var(--border-3); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* ── Warn banner upgrade ──────────────────────────────────── */
.warn-banner.amber {
  box-shadow: 0 4px 16px rgba(245,158,11,0.08);
}

.warn-banner.danger {
  box-shadow: 0 4px 16px rgba(239,68,68,0.08);
}

/* ── Glass card upgrade ───────────────────────────────────── */
.glass-card {
  background: rgba(16,24,39,0.7);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(59,130,246,0.12);
}

[data-theme="light"] .glass-card {
  background: rgba(255,255,255,0.8);
  border: 1px solid rgba(59,130,246,0.12);
  box-shadow: 0 8px 32px rgba(59,130,246,0.07);
}

/* ── Skeleton upgrade ─────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: sk-slide 1.8s ease-in-out infinite;
}

@keyframes sk-slide {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

[data-theme="light"] .skeleton {
  background: linear-gradient(90deg,
    rgba(59,130,246,0.05) 0%,
    rgba(59,130,246,0.10) 50%,
    rgba(59,130,246,0.05) 100%);
  background-size: 200% 100%;
}

/* ── Page header component ───────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.page-title-group {}

.page-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.page-title .title-gradient {
  background: linear-gradient(135deg, var(--blue) 0%, var(--purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-subtitle {
  font-size: 13px;
  color: var(--text-3);
  margin-top: 4px;
  font-weight: 400;
}

.page-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ── Stat row (key metrics bar) ──────────────────────────── */
.stat-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-right: 1px solid var(--border);
  flex-shrink: 0;
}

.stat-item:last-child { border-right: none; }

.stat-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.stat-value {
  font-size: 14px;
  font-weight: 700;
  font-family: var(--mono);
  color: var(--text);
}

/* ── Index tabs upgrade ─────────────────────────────────── */
.idx-tab {
  position: relative;
  overflow: hidden;
}

.idx-tab.active {
  background: linear-gradient(135deg, var(--blue) 0%, #4F46E5 100%);
  box-shadow: 0 4px 14px rgba(59,130,246,0.3);
}

/* ── Card title upgrade ─────────────────────────────────── */
.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: var(--blue);
  flex-shrink: 0;
}

/* ── Nav badge upgrade ──────────────────────────────────── */
.nav-badge {
  transition: all 0.15s ease;
}

.nav-item:hover .nb-live { background: rgba(34,197,94,0.15); }
.nav-item:hover .nb-auto { background: rgba(139,92,246,0.15); }

/* ── NProgress upgrade ──────────────────────────────────── */
#nprogress .bar {
  background: linear-gradient(90deg, var(--blue), var(--purple));
  height: 2px;
}

#nprogress .peg {
  box-shadow: 0 0 12px var(--purple), 0 0 6px var(--blue);
}

/* ── Mobile nav upgrade ─────────────────────────────────── */
.mob-nav-item.act {
  color: var(--blue);
  filter: drop-shadow(0 0 6px rgba(59,130,246,0.4));
}

/* ── Tooltip upgrade ───────────────────────────────────── */
[title] { cursor: default; }

/* ── Section header divider upgrade ────────────────────── */
.section-header::before {
  background: linear-gradient(180deg, var(--blue) 0%, var(--purple) 100%);
  width: 3px;
  height: 14px;
  border-radius: 2px;
}

/* ── Status chip upgrade ────────────────────────────────── */
.hdr-status-chip.live {
  animation: status-pulse 2.5s ease-in-out infinite;
}

@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.2); }
  50%       { box-shadow: 0 0 8px 2px rgba(34,197,94,0.1); }
}

/* ── Avatar hover upgrade ──────────────────────────────── */
.hdr-avatar:hover {
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 6px 20px rgba(59,130,246,0.35);
}

/* ── Light mode card depth ─────────────────────────────── */
[data-theme="light"] .card {
  box-shadow: 0 2px 12px rgba(59,130,246,0.06), 0 1px 3px rgba(0,0,0,0.04);
  border-color: rgba(59,130,246,0.10);
}

[data-theme="light"] .card:hover {
  box-shadow: 0 6px 24px rgba(59,130,246,0.10), 0 2px 6px rgba(0,0,0,0.06);
  border-color: rgba(59,130,246,0.20);
}

[data-theme="light"] .table-wrap {
  box-shadow: 0 2px 12px rgba(59,130,246,0.06);
  border-color: rgba(59,130,246,0.10);
}

[data-theme="light"] .sidebar {
  background: #F0F5FF;
  border-right: 1px solid rgba(59,130,246,0.12);
  box-shadow: 4px 0 20px rgba(59,130,246,0.06);
}

[data-theme="light"] .top-header {
  background: rgba(240,245,255,0.92);
  border-bottom: 1px solid rgba(59,130,246,0.12);
  box-shadow: 0 2px 16px rgba(59,130,246,0.06);
}

[data-theme="light"] .nav-item:hover {
  background: rgba(59,130,246,0.07);
}

[data-theme="light"] .nav-item.active {
  background: linear-gradient(90deg,
    rgba(59,130,246,0.12) 0%,
    rgba(59,130,246,0.05) 100%) !important;
}

[data-theme="light"] .sb-user-card {
  background: linear-gradient(135deg,
    rgba(59,130,246,0.07) 0%,
    rgba(139,92,246,0.04) 100%);
}

[data-theme="light"] .data-table th {
  background: rgba(59,130,246,0.04);
}

[data-theme="light"] .hdr-chip:hover {
  background: rgba(59,130,246,0.08);
}

/* ── Smooth page entrance ───────────────────────────────── */
.main-content {
  animation: fadeIn 0.25s ease-out;
}

/* ── Card grid gap upgrade ──────────────────────────────── */
.grid-2, .grid-3, .grid-4 { gap: 16px; }

/* ── Expiry DTE badge glow ──────────────────────────────── */
.sb-exp-dte.close { box-shadow: 0 0 8px rgba(239,68,68,0.2); }
.sb-exp-dte.soon  { box-shadow: 0 0 8px rgba(245,158,11,0.2); }
.sb-exp-dte.normal{ box-shadow: 0 0 8px rgba(34,197,94,0.15); }

/* ══════════════════════════════════════════════════════════════
   ELITE LIGHT MODE v4 — Vibrant, Glass, Colorful
   ══════════════════════════════════════════════════════════════ */

/* ── Core token override ──────────────────────────────────────── */
[data-theme="light"] {
  --bg:          #F0F4FF;
  --bg-sub:      #E8EEFF;
  --card:        rgba(255,255,255,0.82);
  --card-2:      rgba(248,251,255,0.88);
  --border:      rgba(99,102,241,0.14);
  --border-2:    rgba(99,102,241,0.22);
  --border-3:    rgba(99,102,241,0.32);
  --text:        #0F1528;
  --text-2:      #1E2A4A;
  --text-3:      #4A5578;
  --muted:       #8896B3;
  --shadow-sm:   0 2px 8px rgba(99,102,241,0.08);
  --shadow:      0 4px 20px rgba(99,102,241,0.12);
  --shadow-lg:   0 8px 40px rgba(99,102,241,0.16);
  --shadow-xl:   0 16px 60px rgba(99,102,241,0.20);
}

/* ── Animated gradient body background ───────────────────────── */
[data-theme="light"] body {
  background: transparent;
}

[data-theme="light"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(99,102,241,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(168,85,247,0.09) 0%, transparent 55%),
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(59,130,246,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 90% 10%, rgba(6,182,212,0.08) 0%, transparent 50%),
    linear-gradient(160deg, #EEF2FF 0%, #F5F0FF 25%, #EFF6FF 55%, #F0FDF4 80%, #FFFBEB 100%);
  pointer-events: none;
}

/* ── Animated dot grid overlay ───────────────────────────────── */
[data-theme="light"] .bg-grid {
  background-image:
    radial-gradient(circle, rgba(99,102,241,0.18) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.6;
}

[data-theme="light"] .bg-glow { display: none; }

/* ── Glass header ─────────────────────────────────────────────── */
[data-theme="light"] .top-header {
  background: rgba(255,255,255,0.75) !important;
  backdrop-filter: blur(28px) saturate(1.8);
  -webkit-backdrop-filter: blur(28px) saturate(1.8);
  border-bottom: 1px solid rgba(99,102,241,0.16);
  box-shadow: 0 4px 24px rgba(99,102,241,0.10);
}

/* ── Sidebar hover tooltips — handled by JS (position:fixed) ─── */

/* ── Glassmorphism cards ──────────────────────────────────────── */
[data-theme="light"] .card {
  background: rgba(255,255,255,0.78) !important;
  backdrop-filter: blur(16px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
  border: 1px solid rgba(255,255,255,0.7) !important;
  box-shadow:
    0 4px 24px rgba(99,102,241,0.10),
    0 1px 4px rgba(0,0,0,0.04),
    inset 0 1px 0 rgba(255,255,255,0.9) !important;
  border-radius: 14px !important;
  overflow: visible !important;
}

[data-theme="light"] .card:hover {
  background: rgba(255,255,255,0.90) !important;
  box-shadow:
    0 8px 36px rgba(99,102,241,0.16),
    0 2px 8px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,1) !important;
  transform: translateY(-2px);
  border-color: rgba(99,102,241,0.25) !important;
}

/* Card with colored top accent */
[data-theme="light"] .card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #6366F1 0%, #8B5CF6 50%, #06B6D4 100%);
  border-radius: 14px 14px 0 0;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 1;
}

[data-theme="light"] .card:hover::before {
  opacity: 1;
}

/* ── Glass table wraps ────────────────────────────────────────── */
[data-theme="light"] .table-wrap {
  background: rgba(255,255,255,0.80) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(99,102,241,0.14) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 24px rgba(99,102,241,0.10) !important;
  overflow: hidden !important;
}

/* ── Colorful gradient table headers ─────────────────────────── */
[data-theme="light"] .data-table th,
[data-theme="light"] table thead th,
[data-theme="light"] th {
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #06B6D4 100%) !important;
  color: #FFFFFF !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  padding: 10px 14px !important;
  border: none !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

[data-theme="light"] .data-table th:first-child,
[data-theme="light"] table thead th:first-child { border-radius: 0 !important; }

[data-theme="light"] .data-table tr:hover td,
[data-theme="light"] table tbody tr:hover td {
  background: rgba(99,102,241,0.06) !important;
}

[data-theme="light"] .data-table td,
[data-theme="light"] table tbody td:not([style*="color"]) {
  border-color: rgba(99,102,241,0.07) !important;
  color: #1E2A4A !important;
  font-size: 12.5px !important;
}
[data-theme="light"] table tbody td {
  border-color: rgba(99,102,241,0.07) !important;
  font-size: 12.5px !important;
}

/* Alternating rows */
[data-theme="light"] .data-table tbody tr:nth-child(even) td {
  background: rgba(99,102,241,0.025) !important;
}

/* ── KPI / stat cards ─────────────────────────────────────────── */
[data-theme="light"] .kpi-card,
[data-theme="light"] .stat-card {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,0.7) !important;
  box-shadow: 0 4px 20px rgba(99,102,241,0.10) !important;
  transition: all 0.2s ease !important;
}

[data-theme="light"] .kpi-card:hover,
[data-theme="light"] .stat-card:hover {
  transform: translateY(-3px) scale(1.01) !important;
  box-shadow: 0 8px 32px rgba(99,102,241,0.18) !important;
}

/* ── Colorful pill badges / chips ────────────────────────────── */
[data-theme="light"] .badge-bull, [data-theme="light"] .badge.bull,
[data-theme="light"] .signal-ce { background: linear-gradient(135deg, #059669, #10B981) !important; color: #fff !important; }

[data-theme="light"] .badge-bear, [data-theme="light"] .badge.bear,
[data-theme="light"] .signal-pe { background: linear-gradient(135deg, #DC2626, #EF4444) !important; color: #fff !important; }

/* ── Section headers ─────────────────────────────────────────── */
[data-theme="light"] .section-title,
[data-theme="light"] .section-hdr,
[data-theme="light"] h2, [data-theme="light"] h3 {
  color: #1E2A4A !important;
}

/* ── Input / select ──────────────────────────────────────────── */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  background: rgba(255,255,255,0.9) !important;
  border: 1px solid rgba(99,102,241,0.20) !important;
  color: #0F1528 !important;
  box-shadow: 0 2px 8px rgba(99,102,241,0.06) !important;
}

[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
  border-color: #6366F1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15), 0 2px 8px rgba(99,102,241,0.08) !important;
  outline: none !important;
}

/* ── Primary button ───────────────────────────────────────────── */
[data-theme="light"] .btn-primary {
  background: linear-gradient(135deg, #6366F1 0%, #7C3AED 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(99,102,241,0.35) !important;
  border: none !important;
}

[data-theme="light"] .btn-primary:hover {
  background: linear-gradient(135deg, #4F46E5 0%, #6D28D9 100%) !important;
  box-shadow: 0 6px 24px rgba(99,102,241,0.50) !important;
  transform: translateY(-1px) !important;
}

/* ── Header chips ─────────────────────────────────────────────── */
[data-theme="light"] .hdr-chip {
  background: rgba(255,255,255,0.65) !important;
  border: 1px solid rgba(99,102,241,0.16) !important;
  color: #1E2A4A !important;
  backdrop-filter: blur(8px) !important;
}

[data-theme="light"] .hdr-chip:hover {
  background: rgba(99,102,241,0.10) !important;
  border-color: rgba(99,102,241,0.28) !important;
  transform: scale(1.02) !important;
}

[data-theme="light"] .hdr-chip .chip-val {
  color: #1E2A4A !important;
  font-weight: 700 !important;
}

/* ── Scrollbar tinted ─────────────────────────────────────────── */
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(99,102,241,0.25) !important;
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(99,102,241,0.45) !important;
}
[data-theme="light"] ::-webkit-scrollbar-track {
  background: rgba(99,102,241,0.04) !important;
}

/* ── Main content area ────────────────────────────────────────── */
[data-theme="light"] .main-content {
  background: transparent !important;
}

/* ── NProgress gradient bar ──────────────────────────────────── */
[data-theme="light"] #nprogress .bar {
  background: linear-gradient(90deg, #6366F1, #8B5CF6, #06B6D4) !important;
  height: 3px !important;
}

/* ── Skeleton shimmer ─────────────────────────────────────────── */
[data-theme="light"] .skeleton {
  background: linear-gradient(90deg,
    rgba(99,102,241,0.06) 25%,
    rgba(99,102,241,0.12) 50%,
    rgba(99,102,241,0.06) 75%) !important;
  background-size: 200% 100% !important;
  animation: sk-shimmer 1.4s infinite !important;
}

/* ── Card section colorful top strip variants ─────────────────── */
[data-theme="light"] .card.card-blue::before   { background: linear-gradient(90deg, #3B82F6, #06B6D4); }
[data-theme="light"] .card.card-green::before  { background: linear-gradient(90deg, #10B981, #3B82F6); }
[data-theme="light"] .card.card-red::before    { background: linear-gradient(90deg, #EF4444, #F97316); }
[data-theme="light"] .card.card-amber::before  { background: linear-gradient(90deg, #F59E0B, #EF4444); }
[data-theme="light"] .card.card-purple::before { background: linear-gradient(90deg, #8B5CF6, #EC4899); }

/* ── Glass card variant ───────────────────────────────────────── */
[data-theme="light"] .glass-card {
  background: rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(20px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
  border: 1px solid rgba(255,255,255,0.6) !important;
  box-shadow: 0 8px 32px rgba(99,102,241,0.14) !important;
}

/* ── Pivot / level boxes colorful ────────────────────────────── */
[data-theme="light"] .pivot-r2 { background: rgba(239,68,68,0.10) !important; border: 1px solid rgba(239,68,68,0.22) !important; color: #DC2626 !important; }
[data-theme="light"] .pivot-r1 { background: rgba(249,115,22,0.10) !important; border: 1px solid rgba(249,115,22,0.22) !important; color: #EA580C !important; }
[data-theme="light"] .pivot-pp { background: rgba(99,102,241,0.10) !important; border: 1px solid rgba(99,102,241,0.22) !important; color: #4F46E5 !important; }
[data-theme="light"] .pivot-s1 { background: rgba(16,185,129,0.10) !important; border: 1px solid rgba(16,185,129,0.22) !important; color: #059669 !important; }
[data-theme="light"] .pivot-s2 { background: rgba(6,182,212,0.10) !important;  border: 1px solid rgba(6,182,212,0.22) !important;  color: #0891B2 !important; }

/* ── Signal direction badges ─────────────────────────────────── */
[data-theme="light"] .dir-ce {
  background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(5,150,105,0.10)) !important;
  color: #059669 !important; border: 1px solid rgba(16,185,129,0.28) !important;
  font-weight: 700 !important;
}
[data-theme="light"] .dir-pe {
  background: linear-gradient(135deg, rgba(239,68,68,0.15), rgba(220,38,38,0.10)) !important;
  color: #DC2626 !important; border: 1px solid rgba(239,68,68,0.28) !important;
  font-weight: 700 !important;
}

/* ── Result badges ────────────────────────────────────────────── */
[data-theme="light"] .outcome-win2, [data-theme="light"] .badge-win2 {
  background: linear-gradient(135deg, #059669, #10B981) !important;
  color: #fff !important; box-shadow: 0 2px 8px rgba(5,150,105,0.30) !important;
}
[data-theme="light"] .outcome-win1, [data-theme="light"] .badge-win1 {
  background: linear-gradient(135deg, #0891B2, #06B6D4) !important;
  color: #fff !important; box-shadow: 0 2px 8px rgba(8,145,178,0.30) !important;
}
[data-theme="light"] .outcome-loss, [data-theme="light"] .badge-loss {
  background: linear-gradient(135deg, #DC2626, #EF4444) !important;
  color: #fff !important; box-shadow: 0 2px 8px rgba(220,38,38,0.30) !important;
}
[data-theme="light"] .outcome-neut, [data-theme="light"] .badge-neut {
  background: rgba(100,116,139,0.15) !important;
  color: #475569 !important; border: 1px solid rgba(100,116,139,0.25) !important;
}

/* ── Compact main page padding ────────────────────────────────── */
[data-theme="light"] .main-content {
  padding: calc(12px + var(--hdr-h)) 16px 12px !important;
}

/* ── Text on light bg visibility ─────────────────────────────── */
[data-theme="light"] .text-muted, [data-theme="light"] .muted {
  color: #64748B !important;
}

/* ── Dividers ─────────────────────────────────────────────────── */
[data-theme="light"] hr, [data-theme="light"] .divider {
  border-color: rgba(99,102,241,0.12) !important;
}

/* ── Sidebar sub-menu ─────────────────────────────────────────── */
[data-theme="light"] .sb-sub {
  background: rgba(0,0,0,0.12) !important;
  border-radius: 8px !important;
  margin: 2px 8px !important;
  padding: 4px 0 !important;
}

[data-theme="light"] .sb-sub .nav-item {
  margin: 1px 4px !important;
  font-size: 12px !important;
}

/* ── Header avatar glow ───────────────────────────────────────── */
[data-theme="light"] .hdr-avatar {
  border: 2px solid rgba(99,102,241,0.30) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.10) !important;
}

[data-theme="light"] .hdr-avatar:hover {
  border-color: rgba(99,102,241,0.60) !important;
  box-shadow: 0 0 0 4px rgba(99,102,241,0.18), 0 4px 16px rgba(99,102,241,0.25) !important;
  transform: scale(1.06) !important;
}

/* ── "live" status badge ──────────────────────────────────────── */
[data-theme="light"] .hdr-status-chip.live {
  background: rgba(16,185,129,0.12) !important;
  color: #059669 !important;
  border: 1px solid rgba(16,185,129,0.28) !important;
}

/* ── Section header label ─────────────────────────────────────── */
[data-theme="light"] .section-header,
[data-theme="light"] .card-header,
[data-theme="light"] .panel-header {
  border-bottom: 1px solid rgba(99,102,241,0.10) !important;
  background: linear-gradient(90deg, rgba(99,102,241,0.04), transparent) !important;
  border-radius: 14px 14px 0 0 !important;
}


/* ═══════════════════════════════════════════════════════════
   SIVROUND DESIGN SYSTEM — Light Mode Overrides
   Matches the production sivround.com design:
   • Purple-to-cyan gradient signal table headers
   • Purple accent for active nav/actions
   ═══════════════════════════════════════════════════════════ */

/* ── Signal table: purple-to-cyan gradient header ─────────── */
[data-theme="light"] .sig-table thead tr {
  background: linear-gradient(90deg, #22D3EE 0%, #818CF8 55%, #7C3AED 100%) !important;
}
[data-theme="light"] .sig-table thead th {
  color: #fff !important;
  background: transparent !important;
  border-bottom: none !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
[data-theme="light"] .sig-table { border: 1px solid rgba(99,102,241,0.15) !important; box-shadow: 0 2px 12px rgba(99,102,241,0.08) !important; }
[data-theme="light"] .sig-table tbody tr { background: #fff !important; }
[data-theme="light"] .sig-table tbody tr:nth-child(even) { background: #F8F9FB !important; }
[data-theme="light"] .sig-table td { border-bottom-color: rgba(0,0,0,0.05) !important; color: #374151 !important; }
[data-theme="light"] .sig-table tbody tr:hover td { background: rgba(99,102,241,0.04) !important; color: #111827 !important; }

/* ── Tab buttons: purple accent ───────────────────────────── */
[data-theme="light"] .tab-btn.active {
  background: #7C3AED !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(124,58,237,0.3) !important;
}
[data-theme="light"] .tab-btn:hover:not(.active) { background: rgba(99,102,241,0.06) !important; color: #6366F1 !important; }
[data-theme="light"] .tab-bar { background: #F1F2F7 !important; border-color: rgba(99,102,241,0.12) !important; }

/* ── NProgress / selection: purple in light mode ──────────── */
[data-theme="light"] #nprogress .bar { background: #7C3AED !important; }
[data-theme="light"] #nprogress .peg { box-shadow: 0 0 10px #7C3AED, 0 0 5px #7C3AED !important; }
[data-theme="light"] ::selection { background: #7C3AED !important; }

/* ── Brand subtitle: purple in both modes ─────────────────── */
.hdr-brand-text .brand-sub { color: var(--purple) !important; }

/* ── Header stays visible in light mode ───────────────────── */
[data-theme="light"] .top-header {
  background: rgba(255,255,255,0.92) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04) !important;
}
[data-theme="light"] .hdr-brand { border-right-color: rgba(0,0,0,0.07) !important; }

/* ── Content area cards clean white in light mode ─────────── */
[data-theme="light"] body { background: #F1F3F9 !important; }
[data-theme="light"] .bg-grid {
  background-image:
    linear-gradient(to right,  rgba(99,102,241,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(99,102,241,0.04) 1px, transparent 1px) !important;
}
[data-theme="light"] .bg-glow {
  background: radial-gradient(ellipse at 50% 0%,
    rgba(99,102,241,0.06) 0%,
    rgba(124,58,237,0.03) 40%,
    transparent 70%) !important;
}

/* ── Upstox banner ────────────────────────────────────────── */
[data-theme="light"] .upstox-badge.disconnected {
  background: rgba(245,158,11,0.1) !important;
  border-color: rgba(245,158,11,0.25) !important;
  color: #D97706 !important;
}
[data-theme="light"] .upstox-badge.connected {
  background: rgba(22,163,74,0.1) !important;
  border-color: rgba(22,163,74,0.25) !important;
  color: #16A34A !important;
}


/* ════════════════════════════════════════════════════════════════
   AI STUDIO TOPNAVBAR (project-wide header)
   ════════════════════════════════════════════════════════════════ */
.app-hdr{position:fixed;top:0;left:0;right:0;z-index:1000;border-bottom:1px solid rgba(30,41,59,.8);
  background:rgba(8,13,26,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:background-color .2s}
[data-theme="light"] .app-hdr{background:rgba(248,250,252,.96);border-bottom-color:rgba(0,0,0,.08)}
.hdr-bar{display:flex;height:56px;align-items:center;justify-content:space-between;padding:0 12px;gap:8px}
@media(min-width:768px){.hdr-bar{padding:0 20px}}
.hdr-left{display:flex;align-items:center;gap:12px;min-width:0}
.brand-logo{display:flex;height:32px;width:32px;flex-shrink:0;align-items:center;justify-content:center;
  border-radius:8px;background:linear-gradient(135deg,#10b981,#0891b2);box-shadow:0 1px 2px rgba(16,185,129,.2)}
.brand-logo svg{height:18px;width:18px;color:#fff}
.brand-name{font-weight:700;letter-spacing:-.025em;font-size:16px;line-height:1;color:#fff}
.brand-live{display:inline-block;margin-left:6px;border-radius:4px;background:rgba(16,185,129,.1);
  border:1px solid rgba(16,185,129,.2);padding:1px 4px;font-size:9px;font-weight:600;color:#34d399;vertical-align:middle}
.brand-sub{display:block;font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#94a3b8;margin-top:3px}

.hdr-ticker{display:none;flex:1;align-items:center;gap:10px;overflow-x:auto;padding:4px 0;font-size:12px}
@media(min-width:1024px){.hdr-ticker{display:flex}}
.hdr-ticker::-webkit-scrollbar{display:none}
.tkr-chip{display:flex;align-items:center;gap:8px;border-radius:6px;border:1px solid rgba(30,41,59,.8);
  background:rgba(15,23,42,.4);padding:4px 10px;white-space:nowrap}
[data-theme="light"] .tkr-chip{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.1)}
.tkr-sym{font-weight:600;color:#cbd5e1;font-size:11px}
[data-theme="light"] .tkr-sym{color:#334155}
.tkr-val{font-family:var(--mono);font-weight:500;color:#f1f5f9;font-size:11px}
[data-theme="light"] .tkr-val{color:#0f172a}
.tkr-chg{display:inline-flex;align-items:center;gap:1px;font-family:var(--mono);font-weight:600;font-size:11px}
.tkr-chg.up{color:#34d399}.tkr-chg.dn{color:#fb7185}
.tkr-tag{margin-left:4px;border-radius:4px;padding:1px 4px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.tkr-tag.bull{background:rgba(16,185,129,.2);color:#34d399}
.glob-chip{display:flex;align-items:center;gap:8px;border-radius:6px;border:1px solid rgba(30,41,59,.8);
  background:rgba(15,23,42,.4);padding:4px 10px;white-space:nowrap}
[data-theme="light"] .glob-chip{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.1)}
.glob-lbl{font-size:10px;text-transform:uppercase;font-weight:700;color:#94a3b8;letter-spacing:.05em}
.glob-bias{border-radius:4px;background:rgba(16,185,129,.15);padding:2px 6px;font-size:10px;font-weight:700;color:#34d399}
.glob-bias.bear{background:rgba(244,63,94,.15);color:#fb7185}
.glob-bias.mixed{background:rgba(245,158,11,.15);color:#fbbf24}
.glob-item{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11px;color:#cbd5e1}
.glob-item span{color:#94a3b8}
.glob-item b.up{color:#34d399}.glob-item b.dn{color:#fb7185}

.hdr-right{display:flex;align-items:center;gap:8px}
@media(min-width:768px){.hdr-right{gap:12px}}
.btn-icon{display:flex;height:32px;width:32px;align-items:center;justify-content:center;border-radius:8px;
  border:1px solid rgba(30,41,59,.9);background:rgba(15,23,42,.6);color:#94a3b8;transition:all .15s}
[data-theme="light"] .btn-icon{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.1);color:#475569}
.btn-icon:hover{border-color:#334155;color:#f1f5f9}
.btn-icon svg{height:16px;width:16px}
.btn-ai-studio{display:inline-flex;align-items:center;gap:6px;border-radius:8px;
  background:linear-gradient(90deg,rgba(8,145,178,.3),rgba(5,150,105,.3));
  border:1px solid rgba(16,185,129,.4);padding:6px 10px;font-size:12px;font-weight:600;color:#6ee7b7;
  box-shadow:0 1px 2px rgba(0,0,0,.3);transition:all .15s;white-space:nowrap}
.btn-ai-studio:hover{background:linear-gradient(90deg,rgba(8,145,178,.4),rgba(5,150,105,.4));box-shadow:0 0 12px rgba(16,185,129,.1)}
.btn-ai-studio svg{height:14px;width:14px;color:#34d399;animation:astPulse 2s infinite}
.btn-ai-studio .lbl-lg{display:none}
@media(min-width:640px){.btn-ai-studio .lbl-lg{display:inline}.btn-ai-studio .lbl-sm{display:none}}
.btn-ai-studio .lbl-sm{display:inline}
@media(min-width:640px){.btn-ai-studio .lbl-sm{display:none}}
.btn-broker{display:none;align-items:center;gap:6px;border-radius:8px;border:1px solid rgba(16,185,129,.3);
  background:rgba(6,78,59,.2);padding:6px 10px;font-size:12px;font-weight:500;color:#6ee7b7;transition:all .15s}
@media(min-width:640px){.btn-broker{display:inline-flex}}
.btn-broker:hover{background:rgba(6,78,59,.3)}
.btn-broker .pl{position:relative;display:flex;height:8px;width:8px}
.btn-broker .pl .pg{padding:0;margin:0;max-width:none;box-sizing:border-box;position:absolute;display:inline-flex;height:100%;width:100%;border-radius:9999px;opacity:.75;animation:astPing 1.5s cubic-bezier(0,0,.2,1) infinite;background:#34d399}
.btn-broker .pl .pd{position:relative;display:inline-flex;height:8px;width:8px;border-radius:9999px;background:#10b981}
.btn-broker .chev{height:12px;width:12px;color:#94a3b8}
.hdr-clock{display:none;align-items:center;gap:6px;font-size:11px;color:#94a3b8;
  background:rgba(15,23,42,.6);border:1px solid rgba(30,41,59,.9);border-radius:6px;padding:4px 8px}
@media(min-width:1024px){.hdr-clock{display:flex}}
.hdr-clock svg{height:12px;width:12px;color:#34d399}
.hdr-avatar{display:flex;height:32px;width:32px;align-items:center;justify-content:center;position:relative;
  border-radius:8px;background:linear-gradient(135deg,#4f46e5,#9333ea);
  box-shadow:0 1px 2px rgba(0,0,0,.3);outline:1px solid rgba(255,255,255,.2);
  font-size:12px;font-weight:700;color:#fff;overflow:hidden;text-transform:uppercase}
.hdr-avatar img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}

.hdr-m-tick{display:flex;align-items:center;gap:12px;overflow-x:auto;border-top:1px solid rgba(51,65,85,.6);
  background:rgba(2,6,23,.8);padding:6px 12px;font-size:11px;white-space:nowrap}
@media(min-width:769px){.hdr-m-tick{display:none}}
.hdr-m-tick::-webkit-scrollbar{display:none}
.mt-sym{font-weight:600;color:#94a3b8}
.mt-val{font-family:var(--mono);color:#e2e8f0}
.mt-chg{font-family:var(--mono);font-weight:600}
.mt-chg.up{color:#34d399}.mt-chg.dn{color:#fb7185}
.mt-global{display:flex;align-items:center;gap:6px;padding-left:12px;border-left:1px solid rgba(30,41,59,.9);font-size:10px}
.mt-global .g{padding:2px 6px;border-radius:4px;background:rgba(16,185,129,.2);color:#34d399;font-weight:700}
.mt-global .g.bear{background:rgba(244,63,94,.2);color:#fb7185}
.mt-news{display:flex;align-items:center;gap:6px;padding-left:12px;border-left:1px solid rgba(30,41,59,.9);font-size:10px;font-weight:700;color:#e2e8f0;white-space:nowrap}
.mt-news .u{color:#34d399}
.mt-news .d{color:#fb7185}
.mt-news .g{color:#94a3b8;font-weight:600}

@media(max-width:768px){.main-content{padding-top:calc(16px + var(--hdr-h) + 33px)}}
@media(max-width:480px){.main-content{padding-top:calc(12px + var(--hdr-h) + 33px)}}
@media print{.app-hdr{display:none}}

@media(min-width:1024px){.app-hdr #btn-toggle-sidebar{display:flex}}
@media(max-width:1023px){.app-hdr #btn-toggle-sidebar{display:flex}}


/* ══════════════════════════════════════════════════════════════════
   v5 UNIFIED THEME LAYER (2026-09-29)
   Single source of truth for light/dark tokens + typography.
   Loaded last so it supersedes the v2/v3/v4 light experiments above.
   Rules: pages must use var(--token) — never hardcode theme hex.
   ══════════════════════════════════════════════════════════════════ */

/* ── Typography (both themes) ─────────────────────────────────────── */
:root {
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display: var(--sans);
  --fs-xs: 11px; --fs-sm: 12px; --fs-base: 14px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px;
  --focus-ring: 0 0 0 3px rgba(59,130,246,.35);
  color-scheme: dark;
  /* legacy surface names from the original palette (used by cai_ui.css and 60+ rules) */
  --s1: var(--card); --s2: var(--card-2); --s3: var(--card-2);
  --shade-base: #000;  /* sunken-surface tint: black in dark, soft slate in light */
}
body {
  font-family: var(--sans);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  text-rendering: optimizeLegibility;
  letter-spacing: -0.003em;
}
h1, h2, h3, h4, .page-title, .section-title { letter-spacing: -0.02em; line-height: 1.25; }
/* numbers never jitter while live-ticking */
.mono, code, kbd, [class*="-val"], [class*="price"], [class*="pnl"], td, .tkr-val, .tkr-chg,
.glob-item, #clock { font-variant-numeric: tabular-nums; }
/* the old 'Outfit'/'Plus Jakarta' page fonts were never loaded — fall back to Inter consistently */
[style*="Outfit"], [style*="Plus Jakarta"], [style*="Space Grotesk"] { font-family: var(--sans) !important; }

/* accessible focus everywhere */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none; box-shadow: var(--focus-ring); border-radius: 6px;
}

/* ── LIGHT TOKENS: clean slate, opaque surfaces, WCAG-AA text ─────── */
[data-theme="light"] {
  color-scheme: light;
  --bg:          #F4F6FA;
  --bg-sub:      #EDF0F5;
  --card:        #FFFFFF;
  --card-2:      #F7F9FC;
  --border:      rgba(15,23,42,0.08);
  --border-2:    rgba(15,23,42,0.12);
  --border-3:    rgba(15,23,42,0.18);

  --text:        #0F172A;
  --text-2:      #334155;
  --text-3:      #475569;
  --muted:       #64748B;

  --blue:        #2563EB;  --blue-2:  #1D4ED8;
  --blue-bg:     rgba(37,99,235,0.08);   --blue-border:  rgba(37,99,235,0.22);
  --green:       #15803D;  --green-2: #166534;
  --green-bg:    rgba(22,163,74,0.09);   --green-border: rgba(22,163,74,0.24);
  --red:         #DC2626;  --red-2:   #B91C1C;
  --red-bg:      rgba(220,38,38,0.08);   --red-border:   rgba(220,38,38,0.22);
  --amber:       #B45309;  --amber-2: #92400E;
  --amber-bg:    rgba(217,119,6,0.10);   --amber-border: rgba(217,119,6,0.26);
  --purple:      #7C3AED;
  --purple-bg:   rgba(124,58,237,0.08);  --purple-border:rgba(124,58,237,0.22);
  --cyan:        #0E7490;  --cyan-bg: rgba(8,145,178,0.08);
  --teal:        #0F766E;  --orange:  #C2410C;

  --shadow-sm:   0 1px 2px rgba(15,23,42,0.06);
  --shadow:      0 1px 3px rgba(15,23,42,0.06), 0 4px 16px rgba(15,23,42,0.05);
  --shadow-lg:   0 4px 12px rgba(15,23,42,0.07), 0 12px 32px rgba(15,23,42,0.07);
  --shadow-xl:   0 12px 48px rgba(15,23,42,0.12);
  --focus-ring:  0 0 0 3px rgba(37,99,235,.28);
  --shade-base:  #94A3B8;
}

/* surfaces: kill the glassmorphism wash that lowered contrast */
[data-theme="light"] body { background: var(--bg) !important; color: var(--text); }
[data-theme="light"] body::before { display: none !important; }
[data-theme="light"] .bg-grid {
  background-image: radial-gradient(rgba(15,23,42,0.045) 1px, transparent 1px) !important;
  background-size: 24px 24px !important; opacity: 1 !important;
}
[data-theme="light"] .card,
[data-theme="light"] .glass-card,
[data-theme="light"] .table-wrap,
[data-theme="light"] .kpi-card,
[data-theme="light"] .stat-card {
  background: var(--card) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 1px solid var(--border-2) !important;
  box-shadow: var(--shadow) !important;
}
[data-theme="light"] .card:hover { background: var(--card) !important; transform: none; box-shadow: var(--shadow-lg) !important; border-color: var(--border-3) !important; }
[data-theme="light"] .data-table th,
[data-theme="light"] table thead th {
  background: var(--card-2) !important; color: var(--text-3) !important;
  border-bottom: 1px solid var(--border-2) !important;
}
[data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea {
  background: #fff; color: var(--text); border-color: var(--border-3);
}
[data-theme="light"] ::placeholder { color: #94A3B8; }

/* ── Header (light) ───────────────────────────────────────────────── */
[data-theme="light"] .app-hdr { background: rgba(255,255,255,.94); border-bottom-color: var(--border-2); box-shadow: var(--shadow-sm); }
[data-theme="light"] .brand-name { color: var(--text); }
[data-theme="light"] .brand-sub  { color: var(--muted); }
[data-theme="light"] .brand-live { color: var(--green); background: var(--green-bg); border-color: var(--green-border); }
[data-theme="light"] .tkr-chg.up, [data-theme="light"] .glob-item b.up, [data-theme="light"] .mt-chg.up { color: var(--green); }
[data-theme="light"] .tkr-chg.dn, [data-theme="light"] .glob-item b.dn, [data-theme="light"] .mt-chg.dn { color: var(--red); }
[data-theme="light"] .glob-lbl, [data-theme="light"] .glob-item span { color: var(--muted); }
[data-theme="light"] .glob-item { color: var(--text-2); }
[data-theme="light"] .glob-bias       { color: var(--green); background: var(--green-bg); }
[data-theme="light"] .glob-bias.bear  { color: var(--red);   background: var(--red-bg); }
[data-theme="light"] .glob-bias.mixed { color: var(--amber); background: var(--amber-bg); }
[data-theme="light"] .btn-ai-studio {
  background: linear-gradient(90deg, rgba(8,145,178,.10), rgba(5,150,105,.10));
  border-color: rgba(5,150,105,.35); color: #047857; box-shadow: none;
}
[data-theme="light"] .btn-ai-studio svg { color: #059669; }
[data-theme="light"] .btn-broker { background: rgba(5,150,105,.08); border-color: rgba(5,150,105,.30); color: #047857; }
[data-theme="light"] .btn-broker .chev { color: var(--muted); }
[data-theme="light"] .hdr-clock { background: var(--card-2); border-color: var(--border-2); color: var(--text-3); }
[data-theme="light"] .btn-icon:hover { border-color: var(--border-3); color: var(--text); }
[data-theme="light"] .hdr-m-tick { background: var(--card); border-top-color: var(--border); }
[data-theme="light"] .mt-val, [data-theme="light"] .mt-news { color: var(--text); }
[data-theme="light"] .mt-sym { color: var(--text-3); }

/* ── Sidebar (light) ──────────────────────────────────────────────── */
[data-theme="light"] .sidebar { background: #FFFFFF !important; border-right: 1px solid var(--border-2) !important; box-shadow: none !important; }
[data-theme="light"] .sb-user-card { background: var(--card-2) !important; border: 1px solid var(--border-2) !important; box-shadow: none !important; }
[data-theme="light"] .sb-user-name { color: var(--text) !important; }
[data-theme="light"] .sb-user-info [style*="color:rgba(148,163,184"] { color: var(--muted) !important; }
[data-theme="light"] .nav-item { color: var(--text-2); }
[data-theme="light"] .nav-item:hover { background: var(--blue-bg) !important; color: var(--text) !important; }
[data-theme="light"] .nav-item.active { color: var(--blue-2) !important; background: linear-gradient(90deg, rgba(37,99,235,.10), rgba(37,99,235,.02)) !important; }

/* ── Gradient-clipped headline text: keep it readable on light ──── */
[data-theme="light"] [style*="-webkit-text-fill-color:transparent"],
[data-theme="light"] [style*="-webkit-text-fill-color: transparent"] {
  -webkit-text-fill-color: currentColor !important; background: none !important; color: var(--text) !important;
}

/* ── Light safety net for legacy inline colours (JS-built markup) ──
   Static templates are tokenised; this only catches strings injected
   by JavaScript that still carry exact dark-theme hex values. */
[data-theme="light"] [style*="color:#F1F5F9" i],
[data-theme="light"] [style*="color:#E2E8F0" i],
[data-theme="light"] [style*="color:#F8FAFC" i] { color: var(--text) !important; }
[data-theme="light"] [style*="color:#CBD5E1" i] { color: var(--text-2) !important; }
[data-theme="light"] [style*="color:#94A3B8" i] { color: var(--text-3) !important; }
[data-theme="light"] [style*="background:#0A0E1A" i],
[data-theme="light"] [style*="background:#0F172A" i],
[data-theme="light"] [style*="background:#101624" i],
[data-theme="light"] [style*="background:#111827" i],
[data-theme="light"] [style*="background:#151D2E" i],
[data-theme="light"] [style*="background:#1E293B" i],
[data-theme="light"] [style*="background:#0B1526" i],
[data-theme="light"] [style*="background:#08111F" i],
[data-theme="light"] [style*="background:#0A1424" i],
[data-theme="light"] [style*="background:#0F1B2E" i],
[data-theme="light"] [style*="background:#161B26" i],
[data-theme="light"] [style*="background:#181F2E" i],
[data-theme="light"] [style*="background:#1C2538" i],
[data-theme="light"] [style*="background:#0D1117" i],
[data-theme="light"] [style*="background:#161B22" i],
[data-theme="light"] [style*="background:#131722" i],
[data-theme="light"] [style*="background:#1E2130" i],
[data-theme="light"] [style*="background:#0C1220" i],
[data-theme="light"] [style*="background:#101827" i],
[data-theme="light"] [style*="background:#182033" i],
[data-theme="light"] [style*="background:#050914" i],
[data-theme="light"] [style*="background:#09090B" i],
[data-theme="light"] [style*="background:#060A12" i],
[data-theme="light"] [style*="background:#080C18" i],
[data-theme="light"] [style*="background:#0E1320" i],
[data-theme="light"] [style*="background:#080C16" i] { background: var(--card-2) !important; }

/* ── Tailwind slate utilities (pages.css) → theme tokens in light ── */
[data-theme="light"] .main-content .text-white:not([class*="bg-"]) { color: var(--text); }
[data-theme="light"] .main-content .text-white [class*="bg-gradient"][class*="from-"] { color: #fff; }
[data-theme="light"] .main-content :is(.text-slate-50,.text-slate-100,.text-slate-200) { color: var(--text); }
[data-theme="light"] .main-content .text-slate-300 { color: var(--text-2); }
[data-theme="light"] .main-content .text-slate-400 { color: var(--text-3); }
[data-theme="light"] .main-content .text-slate-500 { color: var(--muted); }
[data-theme="light"] .main-content :is(.bg-slate-950,.bg-slate-900,.bg-slate-900\/80,.bg-slate-900\/60,.bg-slate-900\/50) { background-color: var(--card); }
[data-theme="light"] .main-content :is(.bg-slate-800,.bg-slate-800\/80,.bg-slate-800\/60,.bg-slate-800\/50,.bg-slate-800\/40) { background-color: var(--card-2); }
[data-theme="light"] .main-content :is(.border-slate-800,.border-slate-700,.border-slate-700\/70,.border-slate-700\/60,.border-slate-600) { border-color: var(--border-2); }
[data-theme="light"] .main-content .to-slate-900 { --tw-gradient-to: var(--card) var(--tw-gradient-to-position); }

/* ── Mobile header: keep the brand on one line, never push it off-screen ── */
.brand-name { white-space: nowrap; }
@media (max-width: 640px) {
  .brand-sub { display: none; }
  .brand-live { display: none; }
  .hdr-left { gap: 8px; }
}
/* Tailwind pastel accent text (designed for dark) → AA-contrast tones in light */
[data-theme="light"] .main-content .text-blue-300,
[data-theme="light"] .main-content .text-blue-400 { color: var(--blue-2); }
[data-theme="light"] .main-content :is(.text-emerald-300,.text-emerald-400,.text-green-400) { color: var(--green); }
[data-theme="light"] .main-content :is(.text-amber-300,.text-amber-400,.text-yellow-400) { color: var(--amber); }
[data-theme="light"] .main-content :is(.text-red-300,.text-red-400,.text-rose-400) { color: var(--red); }
[data-theme="light"] .main-content :is(.text-violet-300,.text-violet-400,.text-purple-400) { color: var(--purple); }


[data-theme="light"] .main-content :is(.text-sky-300,.text-sky-400) { color: #0369A1; }
[data-theme="light"] .main-content :is(.text-orange-300,.text-orange-400) { color: #C2410C; }
[data-theme="light"] .main-content :is(.text-indigo-300,.text-indigo-400) { color: #4338CA; }
[data-theme="light"] .main-content :is(.text-cyan-300,.text-cyan-400,.text-teal-400) { color: #0E7490; }
[data-theme="light"] .main-content :is(.text-red-400\/70,.text-rose-300) { color: #B91C1C; }

/* ══════════════════════════════════════════════════════════════════
   v5.2 COOL PROFESSIONAL LIGHT (2026-09-30) — light mode only.
   Cool, calm palette in the style of modern SaaS dashboards (Stripe /
   Linear / Tailwind UI conventions; values from the MIT Tailwind palette):
   slate neutrals + an indigo → violet → sky accent family.
   Decoration never uses red/green, so P&L colours keep their meaning.
   ══════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  --bg:            #F4F6FB;
  --c1: #4F46E5; --c1-bg: rgba(79,70,229,.07);  --c1-bd: rgba(79,70,229,.20);   /* indigo */
  --c2: #7C3AED; --c2-bg: rgba(124,58,237,.06); --c2-bd: rgba(124,58,237,.18);  /* violet */
  --c3: #0284C7; --c3-bg: rgba(2,132,199,.07);  --c3-bd: rgba(2,132,199,.20);   /* sky    */
  --c4: #0891B2; --c4-bg: rgba(8,145,178,.07);  --c4-bd: rgba(8,145,178,.20);   /* cyan   */
  --c5: #2563EB; --c5-bg: rgba(37,99,235,.06);  --c5-bd: rgba(37,99,235,.18);   /* blue   */
  --c6: #0D9488; --c6-bg: rgba(13,148,136,.06); --c6-bd: rgba(13,148,136,.18);  /* teal   */
  --vb-grad:        linear-gradient(90deg, #4338CA 0%, #4F46E5 40%, #0284C7 100%);
  --vb-grad-btn:    linear-gradient(135deg, #4F46E5 0%, #6366F1 55%, #0EA5E9 130%);
  --vb-accent-line: linear-gradient(90deg, #4F46E5, #7C3AED 35%, #0EA5E9 70%, #06B6D4);
  --vb-shadow:      0 4px 14px rgba(79,70,229,.22);
}

/* ── Header ───────────────────────────────────────────────────────── */
[data-theme="light"] .app-hdr {
  background: linear-gradient(90deg, #FFFFFF 0%, #F7F8FE 55%, #F2F7FD 100%) !important;
  border-bottom: none !important;
  box-shadow: 0 1px 0 rgba(15,23,42,.04), 0 6px 18px rgba(79,70,229,.06) !important;
}
[data-theme="light"] .app-hdr::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--vb-accent-line); opacity: .85; pointer-events: none;
}
[data-theme="light"] .brand-name {
  background: linear-gradient(90deg, #3730A3, #4F46E5 60%, #0284C7);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
[data-theme="light"] .brand-name .brand-live { -webkit-text-fill-color: var(--green); }
[data-theme="light"] .hdr-ticker > :nth-child(4n+1) { background: var(--c1-bg); border-color: var(--c1-bd); }
[data-theme="light"] .hdr-ticker > :nth-child(4n+2) { background: var(--c2-bg); border-color: var(--c2-bd); }
[data-theme="light"] .hdr-ticker > :nth-child(4n+3) { background: var(--c3-bg); border-color: var(--c3-bd); }
[data-theme="light"] .hdr-ticker > :nth-child(4n+4) { background: var(--c4-bg); border-color: var(--c4-bd); }
[data-theme="light"] .hdr-ticker > :nth-child(4n+1) .tkr-sym { color: var(--c1); }
[data-theme="light"] .hdr-ticker > :nth-child(4n+2) .tkr-sym { color: var(--c2); }
[data-theme="light"] .hdr-ticker > :nth-child(4n+3) .tkr-sym { color: var(--c3); }
[data-theme="light"] .hdr-clock { background: var(--c1-bg) !important; border-color: var(--c1-bd) !important; color: #3730A3 !important; }
[data-theme="light"] .hdr-clock svg { color: var(--c3); }
[data-theme="light"] #btnTheme { background: var(--c3-bg); border-color: var(--c3-bd); color: var(--c3); }
[data-theme="light"] #btn-toggle-sidebar { background: var(--c1-bg); border-color: var(--c1-bd); color: var(--c1); }

/* ── Sidebar ──────────────────────────────────────────────────────── */
[data-theme="light"] .sidebar {
  background: linear-gradient(180deg, #F8F9FF 0%, #F3F5FE 50%, #F1F6FC 100%) !important;
  border-right: 1px solid rgba(79,70,229,.10) !important;
}
[data-theme="light"] .sb-user-card {
  background: linear-gradient(135deg, rgba(79,70,229,.08), rgba(14,165,233,.06)) !important;
  border: 1px solid rgba(79,70,229,.14) !important;
}
[data-theme="light"] .sb-section { color: #6366F1 !important; font-weight: 700 !important; letter-spacing: .08em; }
[data-theme="light"] .nav-item { color: #1E293B !important; font-weight: 500; }
[data-theme="light"] .nav-item .nav-ico { border-radius: 8px; }
[data-theme="light"] .sb-nav a.nav-item:nth-of-type(6n+1) .nav-ico { background: var(--c1-bg); color: var(--c1); }
[data-theme="light"] .sb-nav a.nav-item:nth-of-type(6n+2) .nav-ico { background: var(--c3-bg); color: var(--c3); }
[data-theme="light"] .sb-nav a.nav-item:nth-of-type(6n+3) .nav-ico { background: var(--c2-bg); color: var(--c2); }
[data-theme="light"] .sb-nav a.nav-item:nth-of-type(6n+4) .nav-ico { background: var(--c4-bg); color: var(--c4); }
[data-theme="light"] .sb-nav a.nav-item:nth-of-type(6n+5) .nav-ico { background: var(--c5-bg); color: var(--c5); }
[data-theme="light"] .sb-nav a.nav-item:nth-of-type(6n+6) .nav-ico { background: var(--c6-bg); color: var(--c6); }
[data-theme="light"] .nav-item:hover { background: rgba(79,70,229,.06) !important; color: #312E81 !important; }
[data-theme="light"] .nav-item.active {
  background: var(--vb-grad-btn) !important; color: #fff !important;
  box-shadow: var(--vb-shadow) !important;
}
[data-theme="light"] .nav-item.active .nav-ico { background: rgba(255,255,255,.2) !important; color: #fff !important; }
[data-theme="light"] .nav-item.active .nav-badge { background: rgba(255,255,255,.22) !important; color: #fff !important; border-color: transparent !important; }
[data-theme="light"] .mob-bottom-nav { background: rgba(255,255,255,.97) !important; border-top: 2px solid transparent !important; border-image: var(--vb-accent-line) 1 !important; }
[data-theme="light"] .mob-nav-item.act { color: var(--c1) !important; }

/* ── Tables: cool gradient headings + softly cycled records ──────────
   Row tints sit on <tr>, so cells with meaningful colour (P&L, badges,
   ITM shading) paint on top. Semantic tables are excluded. */
[data-theme="light"] .main-content table:not(.oc-table):not(.matrix-table):not([class*="heat"]):not([class*="chain"]):not(.no-vb) > thead > tr > :is(th, td) {
  background: var(--vb-grad) !important;
  background-attachment: fixed !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.10) !important;
  font-weight: 600;
}
[data-theme="light"] .main-content table:not(.oc-table):not(.matrix-table):not([class*="heat"]):not([class*="chain"]):not(.no-vb) > thead > tr > th * { color: inherit !important; }
[data-theme="light"] .main-content table:not(.oc-table):not(.matrix-table):not([class*="heat"]):not([class*="chain"]):not(.no-vb) > tbody > tr:nth-child(6n+1) { background: rgba(79,70,229,.035); }
[data-theme="light"] .main-content table:not(.oc-table):not(.matrix-table):not([class*="heat"]):not([class*="chain"]):not(.no-vb) > tbody > tr:nth-child(6n+2) { background: rgba(2,132,199,.035); }
[data-theme="light"] .main-content table:not(.oc-table):not(.matrix-table):not([class*="heat"]):not([class*="chain"]):not(.no-vb) > tbody > tr:nth-child(6n+3) { background: rgba(124,58,237,.03); }
[data-theme="light"] .main-content table:not(.oc-table):not(.matrix-table):not([class*="heat"]):not([class*="chain"]):not(.no-vb) > tbody > tr:nth-child(6n+4) { background: rgba(8,145,178,.035); }
[data-theme="light"] .main-content table:not(.oc-table):not(.matrix-table):not([class*="heat"]):not([class*="chain"]):not(.no-vb) > tbody > tr:nth-child(6n+5) { background: rgba(37,99,235,.03); }
[data-theme="light"] .main-content table:not(.oc-table):not(.matrix-table):not([class*="heat"]):not([class*="chain"]):not(.no-vb) > tbody > tr:nth-child(6n+6) { background: rgba(13,148,136,.03); }
[data-theme="light"] .main-content table:not(.oc-table):not(.matrix-table):not([class*="heat"]):not([class*="chain"]):not(.no-vb) > tbody > tr:nth-child(6n+1) > td:first-child { box-shadow: inset 3px 0 0 #6366F1; }
[data-theme="light"] .main-content table:not(.oc-table):not(.matrix-table):not([class*="heat"]):not([class*="chain"]):not(.no-vb) > tbody > tr:nth-child(6n+2) > td:first-child { box-shadow: inset 3px 0 0 #0EA5E9; }
[data-theme="light"] .main-content table:not(.oc-table):not(.matrix-table):not([class*="heat"]):not([class*="chain"]):not(.no-vb) > tbody > tr:nth-child(6n+3) > td:first-child { box-shadow: inset 3px 0 0 #8B5CF6; }
[data-theme="light"] .main-content table:not(.oc-table):not(.matrix-table):not([class*="heat"]):not([class*="chain"]):not(.no-vb) > tbody > tr:nth-child(6n+4) > td:first-child { box-shadow: inset 3px 0 0 #06B6D4; }
[data-theme="light"] .main-content table:not(.oc-table):not(.matrix-table):not([class*="heat"]):not([class*="chain"]):not(.no-vb) > tbody > tr:nth-child(6n+5) > td:first-child { box-shadow: inset 3px 0 0 #3B82F6; }
[data-theme="light"] .main-content table:not(.oc-table):not(.matrix-table):not([class*="heat"]):not([class*="chain"]):not(.no-vb) > tbody > tr:nth-child(6n+6) > td:first-child { box-shadow: inset 3px 0 0 #14B8A6; }
[data-theme="light"] .data-table tbody tr:nth-child(even) td { background: transparent !important; }
[data-theme="light"] .main-content table tbody tr:hover > td { background: rgba(79,70,229,.06) !important; }

/* ── Buttons ──────────────────────────────────────────────────────── */
[data-theme="light"] .main-content :is(button, a, label):is(.btn, [class*="btn"]):not(:disabled) {
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, background .15s ease;
}
[data-theme="light"] .main-content :is(button, a, label):is(.btn, [class*="btn"]):not(:disabled):hover {
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(79,70,229,.14);
}
[data-theme="light"] :is(button, a, input):is(.btn-primary, .btn.primary, .pf-btn.primary, [class*="btn"][class*="primary"], .fetch-btn) {
  background: var(--vb-grad-btn) !important; color: #fff !important; border-color: transparent !important;
  box-shadow: var(--vb-shadow) !important;
}
[data-theme="light"] :is(button, a, input):is(.btn-primary, .btn.primary, .pf-btn.primary, [class*="btn"][class*="primary"], .fetch-btn):hover {
  filter: brightness(1.06); box-shadow: 0 6px 18px rgba(79,70,229,.30) !important;
}
/* selected state of segmented / filter / index toggles — CONTROLS ONLY,
   never containers (a .tab-pane.active is a whole panel of content). */
[data-theme="light"] .main-content :is(button, a, label, span, [role="tab"]):is([class*="btn"], [class*="tab"], [class*="pill"], [class*="chip"]):is(.active, .on, .selected, .act):not(.nav-item):not([class*="pane"]):not([class*="panel"]):not([class*="content"]) {
  background: var(--vb-grad-btn) !important; color: #fff !important; border-color: transparent !important;
  box-shadow: 0 3px 10px rgba(79,70,229,.24) !important;
}
[data-theme="light"] .main-content :is(button, a, label, span, [role="tab"]):is([class*="btn"], [class*="tab"], [class*="pill"], [class*="chip"]):is(.active, .on, .selected, .act):not(.nav-item):not([class*="pane"]):not([class*="panel"]):not([class*="content"]) * { color: inherit !important; }
/* Upgrade CTA in the trial banner */
[data-theme="light"] #trial-banner a, [data-theme="light"] .warn-banner a.btn {
  background: var(--vb-grad-btn) !important; color: #fff !important; border: none !important;
  box-shadow: var(--vb-shadow) !important; text-decoration: none !important;
}

/* ── Cards: soft accent strip on KPI tiles ───────────────────────── */
[data-theme="light"] .main-content :is(.kpi-card, .stat-card, .kpi, .stat-chip, .hcard, .km):nth-child(6n+1) { border-top: 3px solid #6366F1 !important; }
[data-theme="light"] .main-content :is(.kpi-card, .stat-card, .kpi, .stat-chip, .hcard, .km):nth-child(6n+2) { border-top: 3px solid #0EA5E9 !important; }
[data-theme="light"] .main-content :is(.kpi-card, .stat-card, .kpi, .stat-chip, .hcard, .km):nth-child(6n+3) { border-top: 3px solid #8B5CF6 !important; }
[data-theme="light"] .main-content :is(.kpi-card, .stat-card, .kpi, .stat-chip, .hcard, .km):nth-child(6n+4) { border-top: 3px solid #06B6D4 !important; }
[data-theme="light"] .main-content :is(.kpi-card, .stat-card, .kpi, .stat-chip, .hcard, .km):nth-child(6n+5) { border-top: 3px solid #3B82F6 !important; }
[data-theme="light"] .main-content :is(.kpi-card, .stat-card, .kpi, .stat-chip, .hcard, .km):nth-child(6n+6) { border-top: 3px solid #14B8A6 !important; }

/* ═══ Sidebar v2 — collapsible sections · search · pinned footer (2026-10-01) ═══ */
.sidebar .sb-section{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;border-radius:8px;margin:6px 8px 0;padding:9px 10px 7px 14px;transition:background .15s,color .15s}
.sidebar .sb-section:hover{background:color-mix(in srgb,var(--blue) 8%,transparent)}
.sidebar .sb-section:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.sidebar .sb-section::before{left:4px!important;top:50%!important;transform:translateY(-50%)}
.sb-sec-name{flex:1}
.sb-sec-count{font:700 10px var(--mono);letter-spacing:0;padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--text) 7%,transparent);color:var(--text-3)}
.sb-sec-chev{font-size:10px;color:var(--text-3);transition:transform .2s ease}
.sb-section.closed .sb-sec-chev{transform:rotate(-90deg)}
.sb-group{display:grid;grid-template-rows:1fr;transition:grid-template-rows .22s ease}
.sb-group>*{min-height:0}
.sb-group.closed{display:none}
.sidebar.collapsed .sb-group.closed{display:block}              /* icon rail always shows every item */
.sidebar.collapsed .sb-search,.sidebar.collapsed .sb-noresult{display:none}

/* menu search */
.sb-search{display:flex;align-items:center;gap:8px;margin:4px 12px 4px;padding:0 10px;height:36px;border-radius:10px;border:1px solid var(--border-2);background:var(--card);transition:border-color .15s,box-shadow .15s}
.sb-search:focus-within{border-color:var(--blue);box-shadow:var(--focus-ring)}
.sb-search i{font-size:12px;color:var(--text-3)}
.sb-search input{flex:1;min-width:0;border:none!important;background:transparent!important;outline:none;box-shadow:none!important;font:500 13px var(--sans);color:var(--text);padding:0!important}
.sb-search input::-webkit-search-cancel-button{display:none}
.sb-search kbd{font:600 10px var(--mono);color:var(--text-3);border:1px solid var(--border-2);border-radius:5px;padding:1px 6px;background:var(--bg-sub)}
.sb-search:focus-within kbd{display:none}
.sb-noresult{margin:6px 16px;font-size:12px;color:var(--text-3)}
.sb-nav .sb-miss{display:none!important}
.sb-nav.searching .sb-group.closed{display:block}               /* search sees inside closed groups */
.sb-nav.searching .sb-sub{display:block!important}
.sb-nav.searching .sb-section{pointer-events:none}

/* expiry card — top, compact */
.sidebar .sb-expiry{margin:0 12px 6px!important;padding:9px 12px!important;border-radius:12px!important}
.sidebar .sb-expiry-title{font-size:10.5px!important;letter-spacing:.08em}
.sidebar .sb-exp-row{font-size:12.5px}

/* footer pinned to the bottom of the scrolling sidebar */
.sidebar .sb-bottom{position:sticky;bottom:0;z-index:3;background:var(--bg-sub);border-top:1px solid var(--border-2);margin-top:auto}
[data-theme="light"] .sidebar .sb-bottom{background:#F4F5FE}
html:not([data-theme="light"]) .sidebar .sb-bottom{background:#0b1322}
.sidebar .sb-bot-link{font-size:12.5px}
.sb-search input:focus,.sb-search input:focus-visible{box-shadow:none!important;outline:none!important}
@media(max-width:768px){.sidebar{top:calc(var(--hdr-h) + 33px)!important}}  /* clear the mobile ticker row, like .main-content */
.sidebar{overscroll-behavior:contain}  /* wheel over the side panel never scrolls the page behind it */

/* ═══ Sidebar v3 — larger type + proper per-theme colour (2026-10-01) ═══
   #mainSidebar (id) specificity deliberately outranks the older layered
   [data-theme] !important rules above. */
#mainSidebar .nav-item{min-height:40px;padding:6px 12px!important;margin:2px 8px!important;gap:11px!important;border-radius:10px!important}
#mainSidebar .nav-label{font-size:14.5px!important;font-weight:500!important;letter-spacing:-.005em}
#mainSidebar .nav-item.active .nav-label{font-weight:700!important}
#mainSidebar .nav-ico{width:32px!important;height:32px!important;border-radius:9px!important;font-size:15px!important;flex-shrink:0}
#mainSidebar .nav-ico i{font-size:15px!important}
#mainSidebar .sb-section{font-size:11.5px!important;font-weight:800!important;letter-spacing:.09em!important;padding:10px 10px 8px 14px!important}
#mainSidebar .sb-sec-count{font-size:11px}
#mainSidebar .sb-sec-chev{font-size:11px}
#mainSidebar .nav-badge{font-size:10px!important;padding:2px 7px!important;border-radius:6px!important}
#mainSidebar .sb-user-name{font-size:15px!important}
#mainSidebar .sb-user-info [style*="font-size:10px"]{font-size:12px!important}
#mainSidebar .sb-plan-badge{font-size:10.5px!important}
#mainSidebar .sb-search input{font-size:14px}
#mainSidebar .sb-bot-link{font-size:13.5px!important}
#mainSidebar .sb-bot-link i{font-size:15px}

/* ── LIGHT ── */
[data-theme="light"] #mainSidebar .nav-label{color:#1E293B!important}
[data-theme="light"] #mainSidebar .nav-item:hover .nav-label{color:#312E81!important}
[data-theme="light"] #mainSidebar .nav-item.active .nav-label{color:#fff!important}
[data-theme="light"] #mainSidebar .sb-section{color:#4F46E5!important}
[data-theme="light"] #mainSidebar .sb-sec-count{background:rgba(79,70,229,.10);color:#4338CA}
[data-theme="light"] #mainSidebar .sb-sec-chev{color:#6366F1}
[data-theme="light"] #mainSidebar .sb-bot-link{color:#334155!important}
[data-theme="light"] #mainSidebar .sb-bot-link:hover{color:#4338CA!important}
[data-theme="light"] #mainSidebar .sb-bot-link.logout:hover{color:#DC2626!important}

/* ── DARK ── brighter labels, coloured icon tiles, brand-gradient active item */
html:not([data-theme="light"]) #mainSidebar .nav-label{color:#D5DEEA!important}
html:not([data-theme="light"]) #mainSidebar .nav-item:hover{background:rgba(129,140,248,.10)!important}
html:not([data-theme="light"]) #mainSidebar .nav-item:hover .nav-label{color:#fff!important}
html:not([data-theme="light"]) #mainSidebar .sb-section{color:#A5B4FC!important}
html:not([data-theme="light"]) #mainSidebar .sb-sec-count{background:rgba(165,180,252,.12);color:#C7D2FE}
html:not([data-theme="light"]) #mainSidebar .sb-sec-chev{color:#A5B4FC}
html:not([data-theme="light"]) #mainSidebar .nav-ico{background:rgba(148,163,184,.10)!important;color:#CBD5E1!important}
html:not([data-theme="light"]) #mainSidebar .sb-nav a.nav-item:nth-of-type(6n+1) .nav-ico{background:rgba(129,140,248,.16)!important;color:#A5B4FC!important}
html:not([data-theme="light"]) #mainSidebar .sb-nav a.nav-item:nth-of-type(6n+2) .nav-ico{background:rgba(56,189,248,.15)!important;color:#7DD3FC!important}
html:not([data-theme="light"]) #mainSidebar .sb-nav a.nav-item:nth-of-type(6n+3) .nav-ico{background:rgba(167,139,250,.16)!important;color:#C4B5FD!important}
html:not([data-theme="light"]) #mainSidebar .sb-nav a.nav-item:nth-of-type(6n+4) .nav-ico{background:rgba(34,211,238,.14)!important;color:#67E8F9!important}
html:not([data-theme="light"]) #mainSidebar .sb-nav a.nav-item:nth-of-type(6n+5) .nav-ico{background:rgba(96,165,250,.15)!important;color:#93C5FD!important}
html:not([data-theme="light"]) #mainSidebar .sb-nav a.nav-item:nth-of-type(6n+6) .nav-ico{background:rgba(45,212,191,.14)!important;color:#5EEAD4!important}
html:not([data-theme="light"]) #mainSidebar .nav-ico i{color:inherit!important}
html:not([data-theme="light"]) #mainSidebar .nav-item.active{background:linear-gradient(135deg,#4F46E5 0%,#6366F1 55%,#0EA5E9 130%)!important;box-shadow:0 6px 18px -6px rgba(99,102,241,.6)!important;border:none!important}
html:not([data-theme="light"]) #mainSidebar .nav-item.active .nav-label{color:#fff!important}
html:not([data-theme="light"]) #mainSidebar .nav-item.active .nav-ico{background:rgba(255,255,255,.2)!important;color:#fff!important}
html:not([data-theme="light"]) #mainSidebar .nav-item.active .nav-badge{background:rgba(255,255,255,.22)!important;color:#fff!important;border-color:transparent!important}
html:not([data-theme="light"]) #mainSidebar .sb-bot-link{color:#CBD5E1!important}
html:not([data-theme="light"]) #mainSidebar .sb-bot-link:hover{color:#fff!important}
html:not([data-theme="light"]) #mainSidebar .sb-bot-link.logout:hover{color:#F87171!important}
html:not([data-theme="light"]) #mainSidebar .sb-search{background:rgba(15,23,42,.6);border-color:rgba(148,163,184,.22)}
#mainSidebar .sb-bottom{display:flex!important;justify-content:space-between!important;gap:2px!important;padding:10px 10px!important}
#mainSidebar .sb-bot-link{flex:1 1 0!important;justify-content:center!important;gap:5px!important;padding:7px 4px!important;border-radius:8px;white-space:nowrap;min-width:0}
#mainSidebar .sb-bot-link:hover{background:color-mix(in srgb,var(--blue) 9%,transparent)}