/* ═══════════════════════════════════════════════════════════
   NEXTRADE — COMPLETE UI (Vertex Dark Design System)
   ═══════════════════════════════════════════════════════════ */

/* ── Google Fonts loaded in index.html ──────────────────── */
/* Inter · Plus Jakarta Sans · JetBrains Mono               */

:root {
  /* Surfaces */
  --bg-dark:        #0A0E17;
  --bg-panel:       rgba(22, 27, 38, 0.6);
  --bg-panel-hover: rgba(255,255,255,0.08);
  --bg-elevated:    rgba(255,255,255,0.07);
  --bg-input:       rgba(255,255,255,0.07);
  --bg-sidebar:     #161B26;
  --bg-header:      rgba(22, 27, 38, 0.45);

  /* Borders */
  --border-color:  rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.15);
  --glass-border:  rgba(255,255,255,0.08);

  /* Text */
  --text-main:      #F9FAFB;
  --text-secondary: #9CA3AF;
  --text-muted:     #6B7280;
  --text-primary:   #F9FAFB;

  /* Accents */
  --accent-primary:       #10B981;
  --accent-primary-hover: #34d399;
  --accent-indigo:        #818cf8;
  --gold:                 #fbbf24;

  /* Market colours — vivid */
  --positive:    #10B981;
  --positive-bg: rgba(16,185,129,0.1);
  --negative:    #EF4444;
  --negative-bg: rgba(239,68,68,0.1);

  /* Typography */
  --font-family:  'Inter', sans-serif;
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Motion */
  --transition:      all 0.18s cubic-bezier(0.4,0,0.2,1);
  --transition-slow: all 0.32s cubic-bezier(0.4,0,0.2,1);

  /* Radii */
  --radius-xl: 16px;
  --radius-lg: 12px;
  --radius-md: 8px;
  --radius-sm: 6px;

  /* Shadows */
  --shadow-sm:   0 2px 12px rgba(0,0,0,0.45);
  --shadow-md:   0 8px 32px rgba(0,0,0,0.55);
  --shadow-lg:   0 24px 72px rgba(0,0,0,0.7);
  --shadow-glow: 0 0 40px rgba(16,185,129,0.12);

  /* Glass */
  --glass-blur: 24px;
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-heading); }

/* ── Body — vivid aurora + dot-grid background ───────────── */
body {
  background-color: var(--bg-dark);
  color: var(--text-main);
  font-family: var(--font-family);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image:
    /* Subtle dot grid overlay — trading terminal feel */
    radial-gradient(circle, rgba(255,255,255,0.015) 1px, transparent 1px),
    /* Subtle emerald/indigo glows on the sides */
    radial-gradient(circle at 5% 15%, rgba(16, 185, 129, 0.04) 0%, transparent 35%),
    radial-gradient(circle at 95% 85%, rgba(99, 102, 241, 0.04) 0%, transparent 35%);
  background-size: 24px 24px, 100% 100%, 100% 100%;
  background-attachment: fixed;
}

/* Custom scrollbar — app-wide */
::-webkit-scrollbar       { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.12); border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background:rgba(16,185,129,0.4); }

/* ── Glass Panel ─────────────────────────────────────────── */
.glass-panel {
  background: var(--bg-panel);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md),
              inset 0 1px 0 rgba(255,255,255,0.12),
              inset 0 0 0 1px rgba(255,255,255,0.04);
}

/* ── Layout ─────────────────────────────────────────────── */
.app-container { display:flex; height:100vh; position:relative; z-index:1; }

/* ═══════════════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════════════ */
.sidebar {
  width: 250px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px 12px 16px;
  border-right: 1px solid rgba(16,185,129,0.12);
  position: sticky;
  top: 0;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-sidebar);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  /* Left emerald accent glow */
  box-shadow: 2px 0 30px rgba(0,0,0,0.5),
              inset -1px 0 0 rgba(16,185,129,0.08);
}

/* Logo area — gradient glow background */
.logo {
  display:flex; align-items:center; gap:10px;
  margin:-20px -12px 20px;
  padding:20px 20px 18px;
  background: linear-gradient(180deg, rgba(16,185,129,0.1) 0%, transparent 100%);
  border-bottom:1px solid rgba(16,185,129,0.12);
  position:relative;
}
.logo::after {
  content:'';
  position:absolute;
  bottom:-1px; left:20%; right:20%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(16,185,129,0.6), transparent);
}
.logo-icon {
  color: var(--accent-primary);
  width:26px; height:26px;
  filter: drop-shadow(0 0 14px rgba(16,185,129,0.8));
  flex-shrink:0;
}
.logo h1 {
  font-size:21px; font-weight:800; letter-spacing:-0.7px;
  background: linear-gradient(135deg, #ffffff 0%, #a7f3d0 50%, var(--accent-primary) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* Nav scroll area */
.nav-menu {
  display:flex; flex-direction:column; gap:1px;
  flex:1; overflow-y:auto; overflow-x:hidden; min-height:0;
  padding-right:2px;
  scrollbar-width:thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.nav-menu::-webkit-scrollbar { width:3px; }
.nav-menu::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:2px; }

/* Group labels */
.nav-group-label {
  font-size:9px; font-weight:700; letter-spacing:0.14em;
  text-transform:uppercase; color:rgba(16,185,129,0.4);
  padding:16px 12px 5px; pointer-events:none; user-select:none;
  display:flex; align-items:center; gap:8px;
}
.nav-group-label::after {
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg, rgba(16,185,129,0.2), transparent);
}

/* Nav items */
.nav-item {
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; color:var(--text-secondary);
  text-decoration:none; border-radius:var(--radius-md);
  font-size:13px; font-weight:500;
  transition:var(--transition); position:relative;
  white-space:nowrap;
}
.nav-item i, .nav-item svg { width:15px; height:15px; flex-shrink:0; opacity:0.65; transition:var(--transition); }

.nav-item:hover {
  background: rgba(255,255,255,0.07);
  color:var(--text-main);
}
.nav-item:hover i, .nav-item:hover svg { opacity:1; }

.nav-item.active {
  background: linear-gradient(90deg, rgba(16,185,129,0.18) 0%, rgba(16,185,129,0.04) 100%);
  color: var(--accent-primary);
  box-shadow: inset 3px 0 0 var(--accent-primary),
              0 0 20px rgba(16,185,129,0.06);
  font-weight:700;
}
.nav-item.active i, .nav-item.active svg { opacity:1; color:var(--accent-primary); }

/* Nav badge */
.nav-badge {
  display:none; margin-left:auto;
  background:rgba(16,185,129,0.15); color:var(--accent-primary);
  font-size:10px; font-weight:800;
  padding:1px 6px; border-radius:20px; line-height:1.6;
  border:1px solid rgba(16,185,129,0.25);
}

/* Sidebar bottom */
.sidebar-bottom { margin-top:8px; border-top:1px solid var(--border-color); padding-top:10px; }

.market-status {
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; font-size:12px; font-weight:600;
  color:var(--accent-primary); margin-bottom:4px;
  border-radius:var(--radius-sm); background:rgba(16,185,129,0.06);
}
.status-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--positive);
  box-shadow:0 0 8px var(--positive);
  animation:pulse-dot 2s infinite; flex-shrink:0;
}
@keyframes pulse-dot {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.4; transform:scale(1.4); }
}

/* ═══════════════════════════════════════════════════════════
   MAIN CONTENT
═══════════════════════════════════════════════════════════ */
.main-content { flex:1; display:flex; flex-direction:column; overflow-y:auto; min-width:0; }

/* ═══════════════════════════════════════════════════════════
   TOP HEADER
═══════════════════════════════════════════════════════════ */
.top-header {
  height:66px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  position:sticky; top:0; z-index:100; gap:16px;
  background: var(--bg-header);
  backdrop-filter:blur(40px); -webkit-backdrop-filter:blur(40px);
  box-shadow: 0 4px 30px rgba(0,0,0,0.4);
  /* Emerald shimmer line at the bottom */
  position:sticky;
}
.top-header::after {
  content:'';
  position:absolute;
  bottom:0; left:5%; right:5%; height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(16,185,129,0.5) 30%,
    rgba(99,102,241,0.4) 60%,
    transparent 100%
  );
  animation:header-shimmer 4s ease-in-out infinite;
}
@keyframes header-shimmer {
  0%,100% { opacity:0.5; }
  50%      { opacity:1; }
}

/* Search bar */
.search-bar {
  display:flex; align-items:center;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:50px; padding:0 16px;
  width:320px; transition:var(--transition-slow); flex-shrink:0;
  position:relative;
}
.search-bar:focus-within {
  border-color:rgba(16,185,129,0.55);
  background:rgba(16,185,129,0.06);
  box-shadow:0 0 0 3px rgba(16,185,129,0.12), 0 0 24px rgba(16,185,129,0.08);
  width:360px;
}
.search-icon { color:var(--text-muted); width:15px; height:15px; flex-shrink:0; }
.search-bar input {
  background:transparent; border:none; color:var(--text-main);
  padding:10px 10px; width:100%; outline:none;
  font-family:inherit; font-size:13.5px;
}
.search-bar input::placeholder { color:var(--text-muted); font-size:13px; }

/* Header actions */
.header-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }

/* ═══════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════ */
.btn {
  cursor:pointer; border:none; border-radius:var(--radius-sm);
  font-family:inherit; font-size:13px; font-weight:600;
  transition:var(--transition); display:inline-flex; align-items:center; gap:7px;
}
.btn-icon {
  background:rgba(255,255,255,0.07); border:1px solid var(--border-color);
  color:var(--text-secondary); padding:7px; border-radius:var(--radius-sm);
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
}
.btn-icon:hover { background:rgba(255,255,255,0.12); color:var(--text-main); }
.btn-icon i, .btn-icon svg { width:15px; height:15px; }

.btn-primary {
  background:var(--accent-primary); color:#042012;
  padding:9px 18px; border-radius:var(--radius-md); font-weight:700;
  box-shadow:0 4px 20px rgba(16,185,129,0.3);
}
.btn-primary:hover {
  background:var(--accent-primary-hover);
  box-shadow:0 6px 28px rgba(16,185,129,0.45); transform:translateY(-1px);
}

.btn-small {
  padding:5px 11px; background:rgba(255,255,255,0.06);
  border:1px solid var(--border-color); color:var(--text-secondary);
  border-radius:var(--radius-sm); font-size:12px;
}
.btn-small:hover { background:rgba(255,255,255,0.1); color:var(--text-main); }

.btn-full { width:100%; justify-content:center; padding:13px; font-size:14px; border-radius:var(--radius-md); margin-top:4px; }

.btn-buy  { flex:1; padding:12px; background:rgba(16,185,129,0.12); border:1px solid rgba(16,185,129,0.4); color:var(--positive); border-radius:var(--radius-md); font-weight:700; font-size:15px; cursor:pointer; transition:var(--transition); }
.btn-buy:hover { background:rgba(16,185,129,0.22); }
.btn-sell { flex:1; padding:12px; background:rgba(239,68,68,0.12); border:1px solid rgba(239,68,68,0.4); color:var(--negative); border-radius:var(--radius-md); font-weight:700; font-size:15px; cursor:pointer; transition:var(--transition); }
.btn-sell:hover { background:rgba(239,68,68,0.22); }

/* Buy/invest small buttons */
.btn-invest { padding:5px 12px; background:rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.3); color:var(--positive); border-radius:var(--radius-sm); font-weight:700; font-size:12px; cursor:pointer; transition:var(--transition); }
.btn-invest:hover { background:rgba(16,185,129,0.2); }
.btn-buy-sm { padding:4px 10px; font-size:11px; font-weight:700; background:rgba(16,185,129,0.12); color:var(--positive); border:1px solid rgba(16,185,129,0.3); border-radius:6px; cursor:pointer; font-family:var(--font-family); transition:var(--transition); }
.btn-buy-sm:hover { background:rgba(16,185,129,0.22); }

/* Watchlist button */
.btn-wl { padding:5px 8px; background:transparent; border:1px solid var(--border-color); color:var(--text-muted); border-radius:var(--radius-sm); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:var(--transition); }
.btn-wl:hover { color:#fbbf24; border-color:rgba(251,191,36,0.4); }
.btn-wl-active { color:#fbbf24!important; background:rgba(251,191,36,0.1)!important; border-color:rgba(251,191,36,0.4)!important; }

.btn-watchlist-btn { padding:9px 15px; background:rgba(255,255,255,0.06); border:1px solid var(--border-color); color:var(--text-muted); border-radius:var(--radius-md); display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500; cursor:pointer; transition:var(--transition); }
.btn-watchlist-active { background:rgba(251,191,36,0.12)!important; border-color:rgba(251,191,36,0.4)!important; color:#fbbf24!important; }
.btn-alert-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:var(--radius-sm); background:rgba(251,191,36,0.12); color:#fbbf24; border:1px solid rgba(251,191,36,0.3); font-family:var(--font-family); font-size:13px; font-weight:600; cursor:pointer; transition:var(--transition); }
.btn-alert-btn:hover { background:rgba(251,191,36,0.22); }

.nt-primary-btn { background:var(--accent-primary); color:#042012; border:none; border-radius:8px; padding:10px 20px; font-size:13px; font-weight:700; cursor:pointer; transition:var(--transition); box-shadow:0 4px 20px rgba(16,185,129,0.25); }
.nt-primary-btn:hover { background:var(--accent-primary-hover); }

/* ═══════════════════════════════════════════════════════════
   LIVE TICKER BAR
═══════════════════════════════════════════════════════════ */
.ticker-bar {
  display:flex; align-items:center; height:32px;
  background:rgba(0,0,0,0.35);
  border-bottom:1px solid rgba(255,255,255,0.06);
  overflow:hidden; flex-shrink:0;
}
.ticker-label-fixed {
  padding:0 14px; font-size:9px; font-weight:800;
  color:var(--accent-primary); border-right:1px solid rgba(255,255,255,0.08);
  height:100%; display:flex; align-items:center;
  letter-spacing:2.5px; background:rgba(16,185,129,0.07); flex-shrink:0;
  box-shadow:inset 0 0 20px rgba(16,185,129,0.06);
}
.ticker-wrapper { flex:1; overflow:hidden; }
.ticker-inner { display:flex; align-items:center; width:max-content; animation:ticker-scroll 55s linear infinite; }
.ticker-item { display:inline-flex; align-items:center; gap:5px; padding:0 16px; font-size:11.5px; white-space:nowrap; }
.ticker-lbl { font-weight:700; color:var(--text-main); font-family:var(--font-mono); letter-spacing:0.02em; }
.ticker-val { color:var(--text-muted); font-family:var(--font-mono); }
.ticker-sep { color:rgba(255,255,255,0.1); font-size:14px; }
@keyframes ticker-scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ═══════════════════════════════════════════════════════════
   DASHBOARD CONTENT
═══════════════════════════════════════════════════════════ */
.dashboard-content { padding:28px 32px; display:flex; flex-direction:column; gap:28px; }

.section-title {
  font-size:18px; font-weight:800; margin-bottom:20px;
  letter-spacing:-0.5px; display:inline-flex; align-items:center; gap:10px;
  background:linear-gradient(90deg, #fff 40%, #a7f3d0 75%, var(--accent-primary) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  text-shadow:none;
}
.section-tag {
  display:inline-block; font-size:10.5px; font-weight:700;
  padding:2px 9px; border-radius:20px;
  background:rgba(16,185,129,0.12); color:var(--positive);
  border:1px solid rgba(16,185,129,0.3);
  letter-spacing:0.5px; vertical-align:middle; margin-left:10px;
  text-transform:uppercase;
  box-shadow:0 0 12px rgba(16,185,129,0.15);
  -webkit-text-fill-color: var(--positive);
}
.section-sub { font-size:12.5px; color:var(--text-muted); margin-bottom:20px; }
.empty-row { text-align:center; padding:40px!important; color:var(--text-muted); font-size:15px; }

/* ═══════════════════════════════════════════════════════════
   MARKET CARDS — True glassmorphism + per-card colour
═══════════════════════════════════════════════════════════ */
.market-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; }

.market-card {
  padding:22px 22px 18px; border-radius:var(--radius-lg); cursor:pointer;
  position:relative; overflow:hidden;
  transition:transform 0.28s cubic-bezier(0.34,1.56,0.64,1),
             box-shadow 0.28s ease,
             border-color 0.28s ease;
  background: rgba(255,255,255,0.055);
  backdrop-filter:blur(32px) saturate(200%);
  -webkit-backdrop-filter:blur(32px) saturate(200%);
  border:1px solid rgba(255,255,255,0.13);
  box-shadow:0 4px 28px rgba(0,0,0,0.45),
             inset 0 1px 0 rgba(255,255,255,0.12),
             inset 0 0 0 1px rgba(255,255,255,0.04);
  will-change:transform;
}

/* Shine sweep on hover */
.market-card::before {
  content:''; position:absolute;
  top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.06) 50%, transparent 60%);
  transition:left 0.6s ease;
  pointer-events:none; z-index:2;
}
/* Coloured orb */
.market-card::after {
  content:''; position:absolute;
  width:200px; height:200px; border-radius:50%;
  top:-60px; right:-60px; pointer-events:none;
  transition:opacity 0.3s, transform 0.3s;
  opacity:0.55;
}

/* Coloured top line — always visible */
.market-card .card-accent-line {
  position:absolute; top:0; left:0; right:0; height:2px;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}

/* Card 1 — Emerald */
.market-card:nth-child(1)::after { background:radial-gradient(circle,rgba(16,185,129,0.35) 0%,transparent 70%); }
.market-card:nth-child(1) { --card-accent:rgba(16,185,129,1); }
/* Card 2 — Blue */
.market-card:nth-child(2)::after { background:radial-gradient(circle,rgba(59,130,246,0.35) 0%,transparent 70%); }
.market-card:nth-child(2) { --card-accent:rgba(59,130,246,1); }
/* Card 3 — Amber */
.market-card:nth-child(3)::after { background:radial-gradient(circle,rgba(251,191,36,0.32) 0%,transparent 70%); }
.market-card:nth-child(3) { --card-accent:rgba(251,191,36,1); }
/* Card 4 — Violet */
.market-card:nth-child(4)::after { background:radial-gradient(circle,rgba(168,85,247,0.32) 0%,transparent 70%); }
.market-card:nth-child(4) { --card-accent:rgba(168,85,247,1); }
.market-card:nth-child(n+5)::after { background:radial-gradient(circle,rgba(16,185,129,0.28) 0%,transparent 70%); }
.market-card:nth-child(n+5) { --card-accent:rgba(16,185,129,1); }

/* Apply top line using the accent variable */
.market-card { --card-accent: rgba(16,185,129,1); }
.market-card:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4))
  { --card-accent:rgba(16,185,129,1); }

.market-card::after { z-index:0; }

/* Hover effects */
.market-card:hover {
  transform:translateY(-7px) scale(1.01);
  border-color:rgba(255,255,255,0.2);
  box-shadow:0 24px 60px rgba(0,0,0,0.6),
             0 0 0 1px rgba(255,255,255,0.15),
             inset 0 1px 0 rgba(255,255,255,0.18);
}
.market-card:hover::before { left:140%; }
.market-card:hover::after  { opacity:0.85; transform:scale(1.15); }

.card-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; position:relative; z-index:1; }
.symbol-info h3 {
  font-size:15px; font-weight:800; letter-spacing:-0.2px; color:#fff;
  text-shadow:0 1px 8px rgba(255,255,255,0.15);
}
.symbol-info p  { color:var(--text-muted); font-size:11.5px; margin-top:3px; }

.trend-badge {
  padding:4px 10px; border-radius:8px;
  font-size:12px; font-weight:700;
  display:flex; align-items:center; gap:3px;
  font-family:var(--font-mono); letter-spacing:0.02em;
}
.trend-positive {
  color:var(--positive); background:var(--positive-bg);
  border:1px solid rgba(16,185,129,0.3);
  box-shadow:0 0 12px rgba(16,185,129,0.15);
}
.trend-negative {
  color:var(--negative); background:var(--negative-bg);
  border:1px solid rgba(239,68,68,0.3);
}

.card-price {
  font-size:32px; font-weight:800; margin-bottom:4px;
  font-family:var(--font-mono); letter-spacing:-1px;
  color:#fff; position:relative; z-index:1;
  line-height:1.15;
}

/* Card change sub-row under price */
.card-change-row {
  display:flex; align-items:center; gap:8px;
  margin-bottom:14px; font-size:12px; font-family:var(--font-mono);
  font-weight:600; position:relative; z-index:1;
}
.card-change-abs { color:var(--text-muted); font-size:11.5px; }

.mini-chart {
  height:52px; width:100%;
  display:flex; align-items:flex-end; gap:2px;
  margin-top:4px; position:relative; z-index:1;
  border-top:1px solid rgba(255,255,255,0.06);
  padding-top:8px;
}
.chart-bar  { flex:1; border-radius:3px 3px 0 0; transition:height 0.6s cubic-bezier(0.34,1.56,0.64,1); min-width:3px; }
.bar-pos { background:linear-gradient(180deg,rgba(16,185,129,1),rgba(16,185,129,0.2)); }
.bar-neg { background:linear-gradient(180deg,rgba(239,68,68,1),rgba(239,68,68,0.2)); }

/* ═══════════════════════════════════════════════════════════
   SCREENER / SECTION PANELS
═══════════════════════════════════════════════════════════ */
/* ── Per-card accent top border ─── */
.market-card:nth-child(1) { box-shadow:0 4px 28px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.12), 0 -2px 0 0 rgba(16,185,129,0.8) inset; border-top-color:rgba(16,185,129,0.5); }
.market-card:nth-child(2) { box-shadow:0 4px 28px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.12), 0 -2px 0 0 rgba(59,130,246,0.8) inset; border-top-color:rgba(59,130,246,0.5); }
.market-card:nth-child(3) { box-shadow:0 4px 28px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.12), 0 -2px 0 0 rgba(251,191,36,0.8) inset; border-top-color:rgba(251,191,36,0.5); }
.market-card:nth-child(4) { box-shadow:0 4px 28px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.12), 0 -2px 0 0 rgba(168,85,247,0.8) inset; border-top-color:rgba(168,85,247,0.5); }

.screener-section,
.all-stocks-section,
.portfolio-section,
.ipo-section,
.mutual-funds-section {
  border-radius:var(--radius-lg); padding:24px; margin-bottom:4px;
  background:rgba(255,255,255,0.045);
  backdrop-filter:blur(36px) saturate(180%);
  -webkit-backdrop-filter:blur(36px) saturate(180%);
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 4px 28px rgba(0,0,0,0.45),
             inset 0 1px 0 rgba(255,255,255,0.1),
             inset 0 0 0 1px rgba(255,255,255,0.03);
}

.screener-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.filters { display:flex; gap:10px; flex-wrap:wrap; }

.filter-select {
  background:rgba(255,255,255,0.08); color:var(--text-main);
  border:1px solid var(--border-color); border-radius:var(--radius-md);
  padding:8px 14px; font-family:inherit; font-size:13px; outline:none; cursor:pointer;
  transition:var(--transition);
}
.filter-select:focus { border-color:var(--accent-primary); }
.filter-select option { background:#0a1628; color:var(--text-main); }

/* ── Stock table ── */
.table-container { overflow-x:auto; }
.stock-table { width:100%; border-collapse:collapse; }
.stock-table th {
  text-align:left; padding:11px 14px;
  color:var(--text-muted); font-weight:700; font-size:10.5px;
  text-transform:uppercase; letter-spacing:0.07em;
  border-bottom:1px solid var(--border-color);
  white-space:nowrap;
  background:rgba(0,0,0,0.3);
  position:sticky; top:0;
  backdrop-filter:blur(20px);
}
/* Right-align number columns */
.stock-table th:nth-child(2),
.stock-table th:nth-child(3),
.stock-table th:nth-child(4),
.stock-table th:nth-child(5) { text-align:right; }
.stock-table td:nth-child(2),
.stock-table td:nth-child(3),
.stock-table td:nth-child(4),
.stock-table td:nth-child(5) { text-align:right; }

.stock-table td { padding:11px 14px; border-bottom:1px solid rgba(255,255,255,0.035); vertical-align:middle; font-size:13px; }
.stock-table tr { transition:background 0.12s; }
/* Zebra striping */
.stock-table tbody tr:nth-child(even) { background:rgba(255,255,255,0.018); }
.stock-table tbody tr:hover { background:rgba(16,185,129,0.05)!important; }
.stock-table tbody tr:hover td { border-bottom-color:rgba(16,185,129,0.1); }

.stock-symbol { display:flex; align-items:center; gap:10px; }
.stock-logo {
  width:32px; height:32px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:11px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.1);
  flex-shrink:0; color:var(--text-main);
}
.stock-symbol div strong { display:block; font-size:13.5px; font-weight:700; }
.stock-symbol div span   { font-size:11.5px; color:var(--text-muted); }

.price-text  { font-weight:700; font-family:var(--font-mono); font-size:13px; }
.change-text { font-weight:700; font-family:var(--font-mono); font-size:12.5px; display:flex; align-items:center; gap:3px; }
.positive-text { color:var(--positive); font-weight:700; }
.negative-text { color:var(--negative); font-weight:700; }

/* Sector / Risk badges */
.sector-tag { display:inline-block; padding:2px 9px; border-radius:5px; font-size:11px; font-weight:600; background:rgba(129,140,248,0.12); color:#818cf8; border:1px solid rgba(129,140,248,0.2); }
.risk-badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600; white-space:nowrap; }
.risk-low        { background:rgba(16,185,129,0.12); color:var(--positive);         border:1px solid rgba(16,185,129,0.25); }
.risk-low-medium { background:rgba(20,184,166,0.12); color:#2dd4bf;               border:1px solid rgba(20,184,166,0.25); }
.risk-medium     { background:rgba(245,158,11,0.12); color:#f59e0b;               border:1px solid rgba(245,158,11,0.25); }
.risk-high       { background:rgba(249,115,22,0.12); color:#f97316;               border:1px solid rgba(249,115,22,0.25); }
.risk-very-high  { background:rgba(239,68,68,0.12);  color:var(--negative);       border:1px solid rgba(239,68,68,0.25); }

/* Stars */
.stars { display:inline-flex; gap:1px; font-size:15px; line-height:1; }
.star-filled { color:#fbbf24; }
.star-empty  { color:rgba(255,255,255,0.15); }

/* Pagination */
.as-sort-group { display:flex; gap:4px; background:rgba(255,255,255,0.06); border-radius:8px; padding:3px; }
.as-sort-btn { padding:5px 12px; border:none; border-radius:6px; background:transparent; color:var(--text-muted); font-family:var(--font-family); font-size:12px; font-weight:600; cursor:pointer; transition:var(--transition); white-space:nowrap; }
.as-sort-btn:hover { color:var(--text-main); }
.as-sort-btn.active { background:var(--accent-primary); color:#042012; }
.all-stocks-table td { font-size:13px; padding:10px 12px; }
.all-stocks-table th { font-size:11px; padding:10px 12px; }
.all-stocks-table tr:hover { background:rgba(255,255,255,0.04); }

/* Fix alignment for all-stocks-table (has extra # column) */
.all-stocks-table th:nth-child(3),
.all-stocks-table th:nth-child(4),
.all-stocks-table th:nth-child(5),
.all-stocks-table th:nth-child(6) { text-align:right; }
.all-stocks-table td:nth-child(3),
.all-stocks-table td:nth-child(4),
.all-stocks-table td:nth-child(5),
.all-stocks-table td:nth-child(6) { text-align:right; }
.all-stocks-table th:nth-child(1) { width:36px; text-align:center; }
.all-stocks-table td:nth-child(1) { text-align:center; }
.as-pagination { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:20px; padding-top:16px; border-top:1px solid var(--border-color); }
.as-pagination button:disabled { opacity:0.35; cursor:not-allowed; }

/* ═══════════════════════════════════════════════════════════
   HEADER ELEMENTS
═══════════════════════════════════════════════════════════ */
.balance-pill {
  display:flex; align-items:center; gap:6px;
  background:rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.28);
  border-radius:9px; padding:5px 13px;
  font-size:12.5px; font-weight:700; color:var(--accent-primary);
  white-space:nowrap; font-family:var(--font-mono);
  box-shadow:0 0 16px rgba(16,185,129,0.1);
}
.exchange-badge {
  padding:4px 9px; border-radius:5px; font-size:10.5px; font-weight:800;
  background:rgba(129,140,248,0.1); color:#818cf8;
  border:1px solid rgba(129,140,248,0.22); letter-spacing:0.8px;
}
.data-source-badge {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:600; padding:4px 10px;
  border-radius:20px; border:1px solid; letter-spacing:0.04em;
  transition:all 0.4s ease; white-space:nowrap;
}
.badge-live {
  background:rgba(16,185,129,0.13); border-color:rgba(16,185,129,0.5);
  color:var(--accent-primary); animation:pulse-live 2s infinite;
  box-shadow:0 0 14px rgba(16,185,129,0.18);
}
.badge-sim { background:rgba(148,163,184,0.1); border-color:rgba(148,163,184,0.3); color:#94a3b8; }
@keyframes pulse-live { 0%,100%{opacity:1} 50%{opacity:0.6} }

/* IST Clock */
.nt-clock-wrap {
  display:flex; align-items:center; gap:5px;
  background:rgba(255,255,255,0.07); border:1px solid var(--border-color);
  border-radius:var(--radius-sm); padding:4px 10px; position:relative;
}
.nt-clock-wrap::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--text-muted); flex-shrink:0; transition:background 0.4s; }
.nt-clock-wrap.market-open::before { background:var(--positive); box-shadow:0 0 8px var(--positive); animation:pulse-dot 1.5s infinite; }
.nt-clock-label { font-size:10px; font-weight:700; color:var(--text-muted); letter-spacing:0.5px; }
.nt-clock-time  { font-size:12px; font-weight:600; color:var(--text-main); font-variant-numeric:tabular-nums; letter-spacing:0.5px; }
@media(max-width:768px){.nt-clock-wrap{display:none}}

/* Refresh ring */
.refresh-ring-wrap { position:relative; width:28px; height:28px; flex-shrink:0; cursor:default; }
.refresh-ring { width:28px; height:28px; transform:rotate(-90deg); }
.refresh-ring-track { fill:none; stroke:rgba(255,255,255,0.08); stroke-width:3; }
.refresh-ring-fill  { fill:none; stroke:var(--accent-primary); stroke-width:3; stroke-linecap:round; transition:stroke-dashoffset 1s linear; }
.refresh-ring-icon  { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:11px; height:11px; color:var(--text-muted); }
@keyframes spin-once { from{transform:translate(-50%,-50%)rotate(0deg)} to{transform:translate(-50%,-50%)rotate(360deg)} }
.spin-once { animation:spin-once 0.7s ease-in-out; }
@media(max-width:768px){.refresh-ring-wrap{display:none}}

/* User avatar */
.user-avatar img { width:34px; height:34px; border-radius:50%; object-fit:cover; border:2px solid rgba(16,185,129,0.4); }

/* ═══════════════════════════════════════════════════════════
   SEARCH DROPDOWN
═══════════════════════════════════════════════════════════ */
.search-bar { position:relative; }
.search-dropdown {
  position:absolute; top:calc(100% + 8px); left:0; right:0;
  background:rgba(5,10,28,0.97);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-lg); overflow:hidden; z-index:1000;
  backdrop-filter:blur(40px);
  box-shadow:0 20px 60px rgba(0,0,0,0.7);
  max-height:420px; overflow-y:auto;
}
.search-group-label { padding:8px 14px 4px; font-size:10px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.08em; border-top:1px solid var(--border-color); }
.search-group-label:first-child { border-top:none; }
.search-item { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; cursor:pointer; transition:background 0.12s; gap:12px; }
.search-item:hover { background:rgba(16,185,129,0.05); }
.si-left { display:flex; flex-direction:column; gap:2px; min-width:0; }
.si-left strong { font-size:14px; font-weight:600; color:var(--text-main); }
.si-left span   { font-size:11px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px; }
.search-empty { padding:20px 16px; text-align:center; color:var(--text-muted); font-size:13px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.search-empty svg { opacity:0.3; }

/* ═══════════════════════════════════════════════════════════
   GAINERS / LOSERS
═══════════════════════════════════════════════════════════ */
.gainers-section { margin-bottom:4px; }
.gl-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:1100px){.gl-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px) {.gl-grid{grid-template-columns:1fr}}
.gl-panel {
  padding:20px; border-radius:var(--radius-lg);
  background:rgba(255,255,255,0.045);
  backdrop-filter:blur(36px) saturate(180%);
  -webkit-backdrop-filter:blur(36px) saturate(180%);
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:0 4px 24px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.1);
  transition:var(--transition-slow);
}
.gl-panel:hover { box-shadow:0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.14); }
.gl-title { font-size:14px; font-weight:700; display:flex; align-items:center; gap:6px; margin-bottom:14px; }
.gl-table { font-size:13px; }
.gl-table th { font-size:11px; padding:8px 10px; }
.gl-table td { padding:8px 10px; font-family:var(--font-mono); font-size:12.5px; }
.gl-table tr { cursor:pointer; transition:background 0.12s; }
.gl-table tr:hover { background:rgba(255,255,255,0.05); }

/* Sector bars */
.sector-perf-list { display:flex; flex-direction:column; gap:9px; }
.sector-row { display:flex; align-items:center; gap:8px; font-size:12px; }
.sector-name { font-size:12px; color:var(--text-muted); min-width:90px; }
.sector-bar-wrap { flex:1; height:6px; background:rgba(255,255,255,0.07); border-radius:3px; overflow:hidden; }
.sector-bar { height:100%; border-radius:3px; transition:width 0.6s ease; }

/* ═══════════════════════════════════════════════════════════
   MODAL
═══════════════════════════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.78);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px;
}
.hidden { display:none!important; }
.modal {
  width:100%; max-width:520px; border-radius:var(--radius-lg);
  animation:modal-pop 0.22s cubic-bezier(0.34,1.56,0.64,1);
  background:rgba(5,13,28,0.97);
  border:1px solid var(--border-strong);
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(40px);
}
@keyframes modal-pop { from{opacity:0;transform:scale(0.93)translateY(20px)} to{opacity:1;transform:scale(1)translateY(0)} }
.modal-wide { max-width:700px; }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--border-color); }
.modal-close { flex-shrink:0; }
.modal-body { padding:22px; display:flex; flex-direction:column; gap:16px; max-height:76vh; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.08) transparent; }
.modal-price-row { display:flex; align-items:center; gap:14px; }
.modal-price { font-size:30px; font-weight:800; font-family:var(--font-mono); }
.modal-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.modal-wide .modal-stats { grid-template-columns:repeat(4,1fr); }
.modal-chart-label { font-size:12px; color:var(--text-muted); font-weight:500; text-transform:uppercase; letter-spacing:0.5px; }
.modal-chart-big { height:56px!important; }
.modal-actions { display:flex; gap:10px; flex-wrap:wrap; }
.stat-item { background:rgba(255,255,255,0.05); border:1px solid var(--border-color); border-radius:var(--radius-md); padding:10px 12px; display:flex; flex-direction:column; gap:4px; }
.stat-item span   { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; }
.stat-item strong { font-size:14px; font-weight:600; font-family:var(--font-mono); }

/* 52-week range */
.week52-range { margin:14px 0 4px; }
.week52-labels { display:flex; justify-content:space-between; align-items:flex-end; font-size:12px; color:var(--text-muted); margin-bottom:6px; }
.week52-labels strong { font-size:14px; font-weight:700; display:block; font-family:var(--font-mono); }
.week52-bar-track { position:relative; height:6px; background:rgba(255,255,255,0.08); border-radius:3px; overflow:visible; }
.week52-bar-fill  { height:100%; background:linear-gradient(90deg,#ef4444,#f59e0b,#10B981); border-radius:3px; transition:width 0.6s ease; }
.week52-marker    { position:absolute; top:50%; transform:translate(-50%,-50%); width:12px; height:12px; background:white; border-radius:50%; border:2px solid var(--accent-primary); box-shadow:0 0 8px rgba(16,185,129,0.6); transition:left 0.6s ease; }

/* Order modal */
.order-side-badge { padding:6px 14px; border-radius:var(--radius-sm); font-size:13px; font-weight:800; letter-spacing:0.06em; }
.order-buy  { background:rgba(16,185,129,0.18); color:var(--positive); border:1px solid rgba(16,185,129,0.4); }
.order-sell { background:rgba(239,68,68,0.18);  color:var(--negative); border:1px solid rgba(239,68,68,0.4); }
.order-type-tabs { display:flex; gap:4px; background:rgba(255,255,255,0.05); padding:4px; border-radius:10px; margin-bottom:18px; }
.order-tab { flex:1; padding:7px 10px; border:none; border-radius:8px; background:transparent; color:var(--text-muted); font-family:var(--font-family); font-size:13px; font-weight:600; cursor:pointer; transition:all 0.2s; }
.order-tab.active { background:var(--accent-primary); color:#042012; }
.order-type-badge { font-size:11px; background:rgba(255,255,255,0.06); padding:2px 8px; border-radius:4px; font-weight:600; }
.order-form { display:flex; flex-direction:column; gap:14px; }
.order-row  { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.order-field { display:flex; flex-direction:column; gap:6px; }
.product-tabs { display:flex; gap:8px; }
.product-tab { flex:1; padding:8px; border:1px solid var(--border-color); border-radius:var(--radius-sm); background:transparent; color:var(--text-muted); font-family:var(--font-family); font-size:12px; font-weight:600; cursor:pointer; transition:all 0.2s; }
.product-tab.active { border-color:var(--accent-primary); color:var(--accent-primary); background:rgba(16,185,129,0.08); }
.order-summary-box { background:rgba(255,255,255,0.04); border:1px solid var(--border-color); border-radius:var(--radius-md); padding:12px 16px; display:flex; flex-direction:column; gap:8px; }
.order-summary-box div { display:flex; justify-content:space-between; font-size:13px; }
.order-summary-box span { color:var(--text-muted); }
.order-summary-box strong { font-weight:700; font-family:var(--font-mono); }

/* Price chart */
.modal-chart-section { margin-top:20px; }
.chart-range-tabs { display:flex; gap:4px; margin-bottom:12px; background:rgba(255,255,255,0.05); border-radius:10px; padding:4px; width:fit-content; }
.chart-range-tab { padding:5px 14px; border:none; border-radius:7px; background:transparent; color:var(--text-muted); font-family:var(--font-family); font-size:13px; font-weight:600; cursor:pointer; transition:all 0.18s; }
.chart-range-tab:hover { color:var(--text-main); background:rgba(255,255,255,0.06); }
.chart-range-tab.active { background:var(--accent-primary); color:#042012; }
.modal-chart-area { border-radius:var(--radius-md); overflow:hidden; min-height:200px; background:rgba(255,255,255,0.02); border:1px solid var(--border-color); position:relative; }
.chart-no-data { display:flex; flex-direction:column; align-items:center; justify-content:center; height:200px; color:var(--text-muted); gap:8px; font-size:13px; }
.chart-loading { display:flex; align-items:center; justify-content:center; height:200px; color:var(--text-muted); gap:8px; font-size:13px; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ═══════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
═══════════════════════════════════════════════════════════ */
#toastContainer { position:fixed; bottom:24px; right:24px; z-index:9000; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast { display:flex; align-items:center; gap:10px; padding:12px 18px; border-radius:var(--radius-md); font-size:13.5px; font-weight:600; backdrop-filter:blur(20px); border:1px solid; opacity:0; transform:translateX(50px); transition:opacity 0.25s ease,transform 0.25s ease; min-width:220px; max-width:340px; pointer-events:auto; box-shadow:0 8px 28px rgba(0,0,0,0.5); }
.toast-show    { opacity:1; transform:translateX(0); }
.toast-success { background:rgba(16,185,129,0.13); border-color:rgba(16,185,129,0.4);  color:var(--positive); }
.toast-info    { background:rgba(129,140,248,0.13); border-color:rgba(129,140,248,0.4); color:#818cf8; }
.toast-error   { background:rgba(239,68,68,0.13);  border-color:rgba(239,68,68,0.4);  color:var(--negative); }

/* ═══════════════════════════════════════════════════════════
   PORTFOLIO
═══════════════════════════════════════════════════════════ */
.portfolio-summary-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:16px; }
@media(max-width:900px){.portfolio-summary-cards{grid-template-columns:1fr 1fr}}
.port-stat-card { padding:16px 18px; border-radius:var(--radius-md); display:flex; flex-direction:column; gap:4px; background:rgba(255,255,255,0.05); border:1px solid var(--border-color); }
.port-stat-card span   { font-size:12px; color:var(--text-muted); }
.port-stat-card strong { font-size:18px; font-weight:700; font-family:var(--font-mono); }
.port-stat-card small  { font-size:12px; font-weight:600; }
.port-positive { border-left:3px solid var(--positive); }
.port-negative { border-left:3px solid var(--negative); }
.donut-wrap { display:flex; align-items:center; gap:28px; flex-wrap:wrap; padding:20px; background:rgba(255,255,255,0.04); border:1px solid var(--border-color); border-radius:var(--radius-md); }
.donut-legend { display:flex; flex-direction:column; gap:10px; flex:1; min-width:160px; }
.donut-legend-item { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text-main); }
.donut-legend-item span:first-child { display:inline-block; width:12px; height:12px; border-radius:3px; flex-shrink:0; }
.donut-legend-item .legend-val { margin-left:auto; font-size:12px; color:var(--text-muted); font-weight:600; font-family:var(--font-mono); }

/* Order history */
.order-side-tag { display:inline-block; padding:2px 10px; border-radius:20px; font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; }
.buy-tag  { background:var(--positive-bg); color:var(--positive); }
.sell-tag { background:var(--negative-bg); color:var(--negative); }
.status-executed { display:inline-block; padding:2px 10px; border-radius:20px; font-size:11px; font-weight:600; background:rgba(16,185,129,0.12); color:var(--positive); }
.status-pending  { display:inline-block; padding:2px 10px; border-radius:20px; font-size:11px; font-weight:600; background:rgba(251,191,36,0.12); color:#fbbf24; }
.orders-empty { text-align:center; padding:60px 20px; color:var(--text-muted); }
.orders-empty p { font-size:15px; margin-bottom:6px; font-weight:600; color:var(--text-main); }
.orders-empty span { font-size:13px; }
.order-stats-bar { display:flex; flex-wrap:wrap; gap:0; background:rgba(255,255,255,0.04); border:1px solid var(--border-color); border-radius:12px; overflow:hidden; margin-bottom:18px; }
.order-stat { flex:1; min-width:120px; padding:14px 18px; border-right:1px solid var(--border-color); }
.order-stat:last-child { border-right:none; }
.order-stat span { display:block; font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.order-stat b { font-size:16px; font-weight:700; font-family:var(--font-heading); }

/* ═══════════════════════════════════════════════════════════
   FORMS & INPUTS
═══════════════════════════════════════════════════════════ */
.form-group { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.form-label { font-size:12px; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
.form-control {
  background:var(--bg-input); border:1px solid var(--border-color);
  border-radius:var(--radius-md); padding:10px 13px;
  color:var(--text-main); font-family:inherit; font-size:14px; outline:none;
  transition:border-color 0.18s; width:100%; box-sizing:border-box;
}
.form-control:focus { border-color:var(--accent-primary); background:rgba(16,185,129,0.04); }

/* SIP amounts */
.sip-quick-amounts { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.sip-quick { padding:5px 12px; border:1px solid var(--border-color); border-radius:20px; background:transparent; color:var(--text-muted); font-family:var(--font-family); font-size:12px; font-weight:600; cursor:pointer; transition:all 0.2s; }
.sip-quick:hover { border-color:var(--accent-primary); color:var(--accent-primary); background:rgba(16,185,129,0.08); }

/* Portfolio misc */
.breadth-bar-wrap { display:flex; flex-wrap:wrap; align-items:center; gap:0; background:rgba(255,255,255,0.04); border:1px solid var(--border-color); border-radius:12px; overflow:hidden; padding:0; }
.breadth-stat { flex:1; min-width:90px; padding:12px 16px; border-right:1px solid var(--border-color); text-align:center; }
.breadth-stat:last-child { border-right:none; }
.breadth-stat span { display:block; font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:5px; }
.breadth-stat b { font-size:15px; font-weight:700; font-family:var(--font-heading); }
.breadth-adv-bar { flex-basis:100%; height:4px; display:flex; border-top:1px solid var(--border-color); }
@media(max-width:768px){.breadth-stat{min-width:70px;padding:10px}}

/* ═══════════════════════════════════════════════════════════
   PRICE FLASH ANIMATIONS
═══════════════════════════════════════════════════════════ */
@keyframes flash-up   { 0%{background:rgba(16,185,129,0.35);border-radius:3px} 100%{background:transparent} }
@keyframes flash-down { 0%{background:rgba(239,68,68,0.35);border-radius:3px}  100%{background:transparent} }
.price-flash-up   { animation:flash-up   0.9s ease-out forwards; }
.price-flash-down { animation:flash-down 0.9s ease-out forwards; }

/* ═══════════════════════════════════════════════════════════
   VIEW FADE-IN
═══════════════════════════════════════════════════════════ */
@keyframes view-fade-in { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.view-fade-in { animation:view-fade-in 0.28s cubic-bezier(0.22,1,0.36,1) both; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* ═══════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES
═══════════════════════════════════════════════════════════ */
body.light-mode {
  --bg-dark:       #f0f4f8;
  --bg-panel:      rgba(255,255,255,0.92);
  --bg-sidebar:    rgba(248,250,252,0.97);
  --bg-header:     rgba(248,250,252,0.92);
  --bg-input:      rgba(0,0,0,0.05);
  --border-color:  rgba(0,0,0,0.09);
  --border-strong: rgba(0,0,0,0.14);
  --text-main:     #1a202c;
  --text-secondary:#4a5568;
  --text-muted:    #9aa5b4;
  --positive:   #059669;
  --positive-bg:rgba(5,150,105,0.1);
  --negative:   #dc2626;
  --negative-bg:rgba(220,38,38,0.1);
  background-color:#f0f4f8;
  background-image:
    radial-gradient(ellipse 70% 55% at -5% 0%, rgba(16,185,129,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 65% 55% at 105% 105%, rgba(99,102,241,0.06) 0%, transparent 55%);
}
body.light-mode .glass-panel { background:rgba(255,255,255,0.92); box-shadow:0 4px 20px rgba(0,0,0,0.07); }
body.light-mode .sidebar { background:rgba(248,250,252,0.97); border-right-color:rgba(0,0,0,0.08); box-shadow:2px 0 16px rgba(0,0,0,0.06); }
body.light-mode .top-header { background:rgba(248,250,252,0.94); border-bottom-color:rgba(0,0,0,0.08); }
body.light-mode .logo h1 { background:linear-gradient(135deg,#1a202c,#10b981); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
body.light-mode .section-title { background:none; -webkit-text-fill-color:var(--text-main); color:var(--text-main); }
body.light-mode .section-tag   { -webkit-text-fill-color:#059669; }
body.light-mode .search-bar    { background:rgba(0,0,0,0.05); }
body.light-mode .filter-select { background:rgba(0,0,0,0.05); color:var(--text-main); }
body.light-mode .ticker-bar    { background:rgba(0,0,0,0.04); }
body.light-mode .nav-item:hover  { background:rgba(0,0,0,0.05); }
body.light-mode .nav-item.active { background:rgba(16,185,129,0.1); color:#059669; box-shadow:inset 3px 0 0 #10b981; }
body.light-mode .nav-group-label { color:#10b981; opacity:0.7; }
body.light-mode .market-card     { background:rgba(255,255,255,0.92); border-color:rgba(0,0,0,0.08); }
body.light-mode .card-price      { color:#1a202c; }
body.light-mode .screener-section,
body.light-mode .all-stocks-section,
body.light-mode .portfolio-section,
body.light-mode .ipo-section      { background:rgba(255,255,255,0.9); border-color:rgba(0,0,0,0.08); }
body.light-mode .stock-table th  { background:rgba(240,244,248,0.98); }
body.light-mode .gl-panel        { background:rgba(255,255,255,0.9)!important; border-color:rgba(0,0,0,0.08)!important; }
body.light-mode .modal           { background:rgba(255,255,255,0.99); }
body.light-mode .search-dropdown { background:rgba(255,255,255,0.99); box-shadow:0 12px 40px rgba(0,0,0,0.15); }
body.light-mode input::placeholder { color:var(--text-muted); }
body.light-mode input,body.light-mode select { color:var(--text-main); }

/* ═══════════════════════════════════════════════════════════
   AUTH SYSTEM
═══════════════════════════════════════════════════════════ */
/* Header login button */
.nt-auth-login-btn { display:flex; align-items:center; gap:6px; background:var(--accent-primary); color:#042012; border:none; border-radius:var(--radius-md); padding:7px 15px; font-size:12.5px; font-weight:700; cursor:pointer; transition:var(--transition); font-family:var(--font-family); box-shadow:0 4px 18px rgba(16,185,129,0.3); }
.nt-auth-login-btn:hover { background:var(--accent-primary-hover); transform:translateY(-1px); }

/* User chip */
.nt-user-menu-wrap { position:relative; }
.nt-user-chip { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.07); border:1px solid var(--border-color); border-radius:50px; padding:4px 12px 4px 4px; cursor:pointer; color:var(--text-main); font-size:13px; font-weight:600; transition:var(--transition); font-family:var(--font-family); }
.nt-user-chip:hover { background:rgba(255,255,255,0.11); }
.nt-user-avatar-initials { width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,var(--accent-primary),#059669); display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:800; color:#042012; flex-shrink:0; }

/* User dropdown */
.nt-user-dropdown { position:absolute; right:0; top:calc(100% + 10px); background:rgba(5,10,28,0.98); border:1px solid var(--border-strong); border-radius:var(--radius-lg); min-width:240px; z-index:2000; box-shadow:var(--shadow-lg); backdrop-filter:blur(40px); animation:ntDropIn .15s ease; }
@keyframes ntDropIn { from{opacity:0;transform:translateY(-6px)scale(.97)} to{opacity:1;transform:none} }
.nt-ud-header { display:flex; align-items:center; gap:12px; padding:16px; background:rgba(16,185,129,0.05); border-bottom:1px solid var(--border-color); }
.nt-ud-initials { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--accent-primary),#059669); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:#042012; flex-shrink:0; }
.nt-ud-name  { font-size:14px; font-weight:700; color:var(--text-main); }
.nt-ud-email { font-size:11px; color:var(--text-muted); margin-top:2px; }
.nt-ud-id    { display:flex; align-items:center; gap:7px; padding:9px 16px; font-size:11.5px; font-weight:600; color:var(--accent-primary); background:rgba(16,185,129,0.04); border-bottom:1px solid var(--border-color); font-family:var(--font-mono); }
.nt-ud-divider { height:1px; background:var(--border-color); }
.nt-ud-item { display:flex; align-items:center; gap:10px; width:100%; padding:10px 16px; background:none; border:none; cursor:pointer; color:var(--text-main); font-size:13px; font-family:var(--font-family); transition:background .12s; text-align:left; }
.nt-ud-item:hover { background:rgba(255,255,255,0.05); }
.nt-ud-logout { color:#f87171!important; }
.nt-ud-logout:hover { background:rgba(239,68,68,0.07)!important; }

/* Auth modal overlay */
.nt-auth-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.78); backdrop-filter:blur(12px); z-index:9999; align-items:center; justify-content:center; }
.nt-auth-overlay.open { display:flex; animation:ntFadeIn .18s ease; }
@keyframes ntFadeIn { from{opacity:0} to{opacity:1} }
.nt-auth-modal { background:rgba(5,13,28,0.99); border:1px solid var(--border-strong); border-radius:var(--radius-xl); width:410px; max-width:calc(100vw - 32px); padding:28px 28px 24px; position:relative; box-shadow:var(--shadow-lg); animation:ntSlideUp .2s cubic-bezier(0.34,1.56,0.64,1); backdrop-filter:blur(40px); }
@keyframes ntSlideUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }
.nt-auth-tabs { display:flex; gap:3px; background:rgba(255,255,255,0.05); border:1px solid var(--border-color); border-radius:var(--radius-md); padding:3px; margin-bottom:22px; }
.nt-auth-tab  { flex:1; border:none; background:none; color:var(--text-muted); border-radius:8px; padding:8px; font-size:13.5px; font-weight:600; cursor:pointer; font-family:var(--font-family); transition:var(--transition); }
.nt-auth-tab.active { background:var(--accent-primary); color:#042012; }
.nt-auth-close { position:absolute; top:14px; right:14px; background:rgba(255,255,255,0.07); border:none; color:var(--text-muted); width:28px; height:28px; border-radius:50%; font-size:17px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:var(--transition); line-height:1; }
.nt-auth-close:hover { background:rgba(255,255,255,0.13); color:var(--text-main); }
.nt-auth-brand { text-align:center; margin-bottom:22px; }
.nt-auth-brand h2 { font-size:19px; font-weight:800; font-family:var(--font-heading); color:var(--text-main); margin:10px 0 5px; }
.nt-auth-brand p  { font-size:13px; color:var(--text-muted); }
.nt-otp-icon { font-size:34px; line-height:1; }
.nt-auth-field { margin-bottom:14px; }
.nt-auth-field label { display:block; font-size:11.5px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
.nt-auth-field input { width:100%; background:rgba(255,255,255,0.07); border:1px solid var(--border-color); border-radius:var(--radius-md); padding:10px 13px; color:var(--text-main); font-size:13.5px; font-family:var(--font-family); outline:none; transition:border-color .18s; box-sizing:border-box; }
.nt-auth-field input:focus { border-color:var(--accent-primary); background:rgba(16,185,129,0.05); }
.nt-auth-pwd-wrap { position:relative; }
.nt-auth-pwd-wrap input { padding-right:40px; }
.nt-auth-eye { position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--text-muted); padding:4px; display:flex; }
.nt-auth-pwd-strength { height:3px; background:rgba(255,255,255,0.07); border-radius:3px; margin:-6px 0 12px; overflow:hidden; }
.nt-auth-pwd-fill { height:100%; width:0; border-radius:3px; transition:width .3s,background .3s; }
.nt-auth-submit { width:100%; background:var(--accent-primary); color:#042012; border:none; border-radius:var(--radius-md); padding:12px; font-size:14px; font-weight:700; cursor:pointer; font-family:var(--font-family); transition:var(--transition); display:flex; align-items:center; justify-content:center; gap:10px; margin-top:4px; box-shadow:0 4px 20px rgba(16,185,129,0.25); }
.nt-auth-submit:hover { background:var(--accent-primary-hover); transform:translateY(-1px); }
.nt-auth-submit:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.nt-auth-spinner { width:15px; height:15px; border:2px solid rgba(4,32,18,.3); border-top-color:#042012; border-radius:50%; animation:ntSpin .7s linear infinite; }
@keyframes ntSpin { to{transform:rotate(360deg)} }
.nt-auth-error { background:rgba(239,68,68,0.09); border:1px solid rgba(239,68,68,0.3); color:#fca5a5; border-radius:var(--radius-sm); padding:9px 12px; font-size:12.5px; margin-bottom:12px; }
.nt-auth-link { text-align:center; margin-top:14px; font-size:13px; }
.nt-auth-link a { color:var(--accent-primary); text-decoration:none; font-weight:600; }
.nt-auth-switch { text-align:center; font-size:13px; color:var(--text-muted); margin-top:14px; }
.nt-auth-switch a { color:var(--accent-primary); text-decoration:none; font-weight:600; }
.nt-otp-boxes { display:flex; gap:8px; justify-content:center; margin-bottom:18px; }
.nt-otp-digit { width:46px; height:54px; text-align:center; font-size:22px; font-weight:800; background:rgba(255,255,255,0.07); border:1px solid var(--border-color); border-radius:var(--radius-md); color:var(--accent-primary); font-family:var(--font-mono); outline:none; transition:border-color .18s,background .18s; }
.nt-otp-digit:focus { border-color:var(--accent-primary); background:rgba(16,185,129,0.07); }
.nt-otp-countdown { font-size:12px; color:var(--text-muted); margin-left:6px; }
.nt-auth-panel { }

/* hidden — must be absolute last */
.hidden { display:none!important; }
/* ══════════════════════════════════════════════
   FUND INVEST MODAL
══════════════════════════════════════════════ */
.fund-meta-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.fund-meta-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.fund-meta-item span   { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.fund-meta-item strong { font-size: 15px; font-weight: 700; }

.positive-text { color: var(--positive); }

.invest-tabs {
    display: flex;
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 4px;
    gap: 4px;
}

.invest-tab {
    flex: 1;
    padding: 10px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.invest-tab.active { background: var(--accent-primary); color: white; }

#sipForm, #lumpsumForm {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.amount-input-wrap {
    display: flex;
    align-items: center;
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0 14px;
    transition: var(--transition);
}
.amount-input-wrap:focus-within {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(59,130,246,0.2);
}

.currency-sym {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-muted);
    margin-right: 6px;
    flex-shrink: 0;
}

.amount-input-field {
    background: transparent;
    border: none;
    color: var(--text-main);
    font-family: inherit;
    font-size: 22px;
    font-weight: 700;
    padding: 14px 0;
    width: 100%;
    outline: none;
}

.input-hint {
    font-size: 12px;
    color: var(--text-muted);
}

.sip-preview {
    background: rgba(59,130,246,0.06);
    border: 1px solid rgba(59,130,246,0.15);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sip-preview div      { display: flex; justify-content: space-between; font-size: 14px; }
.sip-preview span     { color: var(--text-muted); }
.sip-preview strong   { font-weight: 600; }

.btn-full {
    width: 100%;
    justify-content: center;
    padding: 14px;
    font-size: 15px;
    border-radius: var(--radius-md);
    margin-top: 4px;
}

/* ══════════════════════════════════════════════
   TOAST NOTIFICATIONS
══════════════════════════════════════════════ */
#toastContainer {
    position: fixed; bottom: 24px; right: 24px;
    z-index: 9000;
    display: flex; flex-direction: column; gap: 8px;
    pointer-events: none;
}
.toast {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 16px;
    border-radius: var(--radius-md);
    font-size: 13.5px; font-weight: 600;
    backdrop-filter: blur(20px);
    border: 1px solid;
    opacity: 0; transform: translateX(50px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    min-width: 220px; max-width: 340px;
    pointer-events: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.toast-show    { opacity: 1; transform: translateX(0); }
.toast-success { background: rgba(16,185,129,0.14); border-color: rgba(16,185,129,0.35); color: #34d399; }
.toast-info    { background: rgba(99,102,241,0.14);  border-color: rgba(99,102,241,0.35); color: #818cf8; }
.toast-error   { background: rgba(248,113,113,0.14); border-color: rgba(248,113,113,0.35); color: #f87171; }

/* ══════════════════════════════════════════════
   NAV BADGE
══════════════════════════════════════════════ */
.nav-badge {
    display: none;
    margin-left: auto;
    background: rgba(16,185,129,0.18);
    color: var(--accent-primary);
    font-size: 10px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 20px;
    line-height: 1.6;
    border: 1px solid rgba(16,185,129,0.25);
}

/* ══════════════════════════════════════════════
   DATA SOURCE BADGE  (Live / Simulated indicator)
══════════════════════════════════════════════ */
.data-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid;
    letter-spacing: 0.04em;
    transition: all 0.4s ease;
    white-space: nowrap;
}

.badge-live {
    background: rgba(16, 185, 129, 0.14);
    border-color: rgba(52, 211, 153, 0.55);
    color: #34d399;
    animation: pulse-live 2s infinite;
    box-shadow: 0 0 12px rgba(16,185,129,0.2);
}

.badge-sim {
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.3);
    color: #94a3b8;
}

@keyframes pulse-live {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.65; }
}


/* ══════════════════════════════════════════════
   SEARCH DROPDOWN
══════════════════════════════════════════════ */
.search-bar { position: relative; }
.search-dropdown {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    background: rgba(10,13,22,0.98);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg); overflow: hidden; z-index: 1000;
    backdrop-filter: blur(24px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.7);
    max-height: 420px; overflow-y: auto;
}
.search-group-label {
    padding: 8px 14px 4px; font-size: 10px; font-weight: 700;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em;
    border-top: 1px solid var(--border-color);
}
.search-group-label:first-child { border-top: none; }
.search-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; cursor: pointer; transition: background 0.15s;
    gap: 12px;
}
.search-item:hover { background: rgba(255,255,255,0.06); }
.si-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.si-left strong { font-size: 14px; font-weight: 600; color: var(--text-main); }
.si-left span { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }

/* ══════════════════════════════════════════════
   GAINERS / LOSERS / SECTOR
══════════════════════════════════════════════ */
.gainers-section { margin-bottom: 24px; }
.gl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1100px) { .gl-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .gl-grid { grid-template-columns: 1fr; } }
.gl-panel { padding: 18px; border-radius: var(--radius-lg); }
.gl-title { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.gl-table { font-size: 13px; }
.gl-table th { font-size: 11px; padding: 8px 10px; }
.gl-table td { padding: 8px 10px; }
.gl-table tr { cursor: pointer; transition: background 0.15s; }
.gl-table tr:hover { background: rgba(255,255,255,0.05); }
.positive-text { color: #34d399; font-weight: 600; }
.negative-text { color: #f87171; font-weight: 600; }

/* Sector performance */
.sector-perf-list { display: flex; flex-direction: column; gap: 9px; }
.sector-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.sector-name { font-size: 12px; color: var(--text-muted); min-width: 90px; }
.sector-bar-wrap { flex: 1; height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
.sector-bar { height: 100%; border-radius: 3px; transition: width 0.6s ease; }

/* ══════════════════════════════════════════════
   IPO SECTION
══════════════════════════════════════════════ */
.ipo-section { padding: 24px; border-radius: var(--radius-lg); margin-bottom: 24px; }
.ipo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 20px; }
.ipo-card {
    padding: 18px; border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 14px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.ipo-card:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,0.3); }
.ipo-card-header { display: flex; align-items: flex-start; gap: 12px; }
.ipo-name { font-size: 14px; font-weight: 700; color: var(--text-main); margin-bottom: 4px; }
.ipo-status { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.ipo-open     { background: rgba(16,185,129,0.2);  color: #10b981; border: 1px solid rgba(16,185,129,0.4); }
.ipo-upcoming { background: rgba(59,130,246,0.2);  color: #60a5fa; border: 1px solid rgba(59,130,246,0.4); }
.ipo-listed   { background: rgba(148,163,184,0.15); color: #94a3b8; border: 1px solid rgba(148,163,184,0.3); }
.ipo-details  { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ipo-detail   { display: flex; flex-direction: column; gap: 2px; }
.ipo-detail span   { font-size: 11px; color: var(--text-muted); }
.ipo-detail strong { font-size: 13px; font-weight: 600; color: var(--text-main); }
.ipo-dates { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); padding-top: 4px; border-top: 1px solid var(--border-color); }

/* ══════════════════════════════════════════════
   PORTFOLIO
══════════════════════════════════════════════ */
.portfolio-section { padding: 24px; border-radius: var(--radius-lg); margin-bottom: 24px; }
.portfolio-summary-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 16px; }
@media (max-width: 900px) { .portfolio-summary-cards { grid-template-columns: 1fr 1fr; } }
.port-stat-card {
    padding: 16px 18px; border-radius: var(--radius-md);
    display: flex; flex-direction: column; gap: 4px;
}
.port-stat-card span   { font-size: 12px; color: var(--text-muted); }
.port-stat-card strong { font-size: 18px; font-weight: 700; }
.port-stat-card small  { font-size: 12px; font-weight: 600; }
.port-positive { border-left: 3px solid #10b981; }
.port-negative { border-left: 3px solid #ef4444; }

/* ══════════════════════════════════════════════
   STOCK MODAL  (wide variant)
══════════════════════════════════════════════ */
.modal-wide { max-width: 640px; }

/* 52-week range bar */
.week52-range { margin: 14px 0 4px; }
.week52-labels { display: flex; justify-content: space-between; align-items: flex-end; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.week52-labels strong { font-size: 14px; font-weight: 700; display: block; }
.week52-bar-track { position: relative; height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: visible; }
.week52-bar-fill { height: 100%; background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981); border-radius: 3px; transition: width 0.6s ease; }
.week52-marker { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; background: white; border-radius: 50%; border: 2px solid var(--accent-primary); box-shadow: 0 0 6px rgba(59,130,246,0.6); transition: left 0.6s ease; }

/* ══════════════════════════════════════════════
   ORDER MODAL
══════════════════════════════════════════════ */
.order-side-badge {
    padding: 6px 14px; border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 800; letter-spacing: 0.06em;
}
.order-buy  { background: rgba(16,185,129,0.2); color: #10b981; border: 1px solid rgba(16,185,129,0.4); }
.order-sell { background: rgba(239,68,68,0.2);  color: #ef4444; border: 1px solid rgba(239,68,68,0.4); }

.order-type-tabs { display: flex; gap: 4px; background: rgba(255,255,255,0.05); padding: 4px; border-radius: 10px; margin-bottom: 18px; }
.order-tab {
    flex: 1; padding: 7px 10px; border: none; border-radius: 8px;
    background: transparent; color: var(--text-muted); font-family: var(--font-family);
    font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.order-tab.active { background: var(--accent-primary); color: white; }

.order-type-badge {
    font-size: 11px; background: rgba(255,255,255,0.06);
    padding: 2px 8px; border-radius: 4px; font-weight: 600;
}
.order-form { display: flex; flex-direction: column; gap: 14px; }
.order-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.order-field { display: flex; flex-direction: column; gap: 6px; }

.product-tabs { display: flex; gap: 8px; }
.product-tab {
    flex: 1; padding: 8px; border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    background: transparent; color: var(--text-muted); font-family: var(--font-family);
    font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.product-tab.active { border-color: var(--accent-primary); color: var(--accent-primary); background: rgba(59,130,246,0.1); }

.order-summary-box {
    background: rgba(255,255,255,0.04); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); padding: 12px 16px;
    display: flex; flex-direction: column; gap: 8px;
}
.order-summary-box div { display: flex; justify-content: space-between; font-size: 13px; }
.order-summary-box span { color: var(--text-muted); }
.order-summary-box strong { font-weight: 700; }

/* ══════════════════════════════════════════════
   SIP QUICK AMOUNT BUTTONS
══════════════════════════════════════════════ */
.sip-quick-amounts { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.sip-quick {
    padding: 5px 12px; border: 1px solid var(--border-color); border-radius: 20px;
    background: transparent; color: var(--text-muted); font-family: var(--font-family);
    font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.sip-quick:hover { border-color: var(--accent-primary); color: var(--accent-primary); background: rgba(59,130,246,0.08); }


/* ══════════════════════════════════════════════
   SEARCH EMPTY STATE
══════════════════════════════════════════════ */
.search-empty {
    padding: 20px 16px; text-align: center; color: var(--text-muted);
    font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.search-empty svg { opacity: 0.4; }
.search-empty span { color: var(--text-muted); }

/* ══════════════════════════════════════════════
   PRICE CHART
══════════════════════════════════════════════ */
.modal-chart-section { margin-top: 20px; }
.chart-range-tabs {
    display: flex; gap: 4px; margin-bottom: 12px;
    background: rgba(255,255,255,0.04); border-radius: 10px; padding: 4px; width: fit-content;
}
.chart-range-tab {
    padding: 5px 14px; border: none; border-radius: 7px; background: transparent;
    color: var(--text-muted); font-family: var(--font-family); font-size: 13px;
    font-weight: 600; cursor: pointer; transition: all 0.18s;
}
.chart-range-tab:hover { color: var(--text-main); background: rgba(255,255,255,0.06); }
.chart-range-tab.active { background: var(--accent-primary); color: white; }

.modal-chart-area {
    border-radius: var(--radius-md); overflow: hidden; min-height: 200px;
    background: rgba(255,255,255,0.02); border: 1px solid var(--border-color);
    position: relative;
}
.chart-no-data {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 200px; color: var(--text-muted); gap: 8px; font-size: 13px;
}
.chart-no-data svg { opacity: 0.3; width: 32px; height: 32px; }
.chart-loading {
    display: flex; align-items: center; justify-content: center;
    height: 200px; color: var(--text-muted); gap: 8px; font-size: 13px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════
   ALL STOCKS BROWSER
══════════════════════════════════════════════ */
.all-stocks-section { padding: 24px; border-radius: var(--radius-lg); margin-bottom: 24px; }

.as-sort-group { display: flex; gap: 4px; background: rgba(255,255,255,0.05); border-radius: 8px; padding: 3px; }
.as-sort-btn {
    padding: 5px 12px; border: none; border-radius: 6px; background: transparent;
    color: var(--text-muted); font-family: var(--font-family); font-size: 12px;
    font-weight: 600; cursor: pointer; transition: all 0.18s; white-space: nowrap;
}
.as-sort-btn:hover { color: var(--text-main); }
.as-sort-btn.active { background: var(--accent-primary); color: white; }

.all-stocks-table td { font-size: 13px; padding: 10px 12px; }
.all-stocks-table th { font-size: 11px; padding: 10px 12px; }
.all-stocks-table tr:hover { background: rgba(255,255,255,0.04); }

.btn-buy-sm {
    padding: 4px 10px; font-size: 11px; font-weight: 700;
    background: rgba(16,185,129,0.15); color: #10b981;
    border: 1px solid rgba(16,185,129,0.35); border-radius: 6px; cursor: pointer;
    font-family: var(--font-family); transition: all 0.18s;
}
.btn-buy-sm:hover { background: rgba(16,185,129,0.25); }

.as-pagination {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-color);
}
.as-pagination button:disabled { opacity: 0.35; cursor: not-allowed; }

/* Wider modal for more stats */
.modal-wide { max-width: 700px; }
.modal-stats { grid-template-columns: repeat(4, 1fr); }

/* ══════════════════════════════════════════════
   BALANCE PILL (header)
══════════════════════════════════════════════ */
.balance-pill {
    display: flex; align-items: center; gap: 6px;
    background: rgba(16,185,129,0.1);
    border: 1px solid rgba(52,211,153,0.3);
    border-radius: 8px; padding: 5px 13px;
    font-size: 12.5px; font-weight: 700; color: #34d399;
    white-space: nowrap;
    font-family: var(--font-mono);
    box-shadow: 0 0 14px rgba(16,185,129,0.1);
}

/* ══════════════════════════════════════════════
   ORDER HISTORY TABLE
══════════════════════════════════════════════ */
.order-side-tag {
    display: inline-block; padding: 2px 10px; border-radius: 20px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
}
.buy-tag  { background: var(--positive-bg); color: var(--positive); }
.sell-tag { background: var(--negative-bg); color: var(--negative); }

.status-executed {
    display: inline-block; padding: 2px 10px; border-radius: 20px;
    font-size: 11px; font-weight: 600;
    background: rgba(16,185,129,0.12); color: #10b981;
}
.status-pending {
    display: inline-block; padding: 2px 10px; border-radius: 20px;
    font-size: 11px; font-weight: 600;
    background: rgba(251,191,36,0.12); color: #fbbf24;
}
.orders-empty {
    text-align: center; padding: 60px 20px; color: var(--text-muted);
}
.orders-empty i { opacity: 0.25; margin-bottom: 16px; }
.orders-empty p { font-size: 15px; margin-bottom: 6px; font-weight: 600; color: var(--text-main); }
.orders-empty span { font-size: 13px; }

/* ══════════════════════════════════════════════
   NEWS SECTION
══════════════════════════════════════════════ */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px; margin-top: 20px;
}
.news-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md); padding: 18px;
    cursor: pointer; transition: var(--transition);
    display: flex; flex-direction: column; gap: 8px;
}
.news-card:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(20,184,166,0.3);
    transform: translateY(-2px);
}
.news-tag-row { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.news-tag {
    display: inline-block; padding: 2px 9px; border-radius: 20px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
    background: rgba(20,184,166,0.15); color: var(--accent-primary);
}
.news-tag.tag-market   { background: rgba(99,102,241,0.15); color: #818cf8; }
.news-tag.tag-finance  { background: rgba(16,185,129,0.15); color: #10b981; }
.news-tag.tag-tech     { background: rgba(59,130,246,0.15); color: #60a5fa; }
.news-tag.tag-energy   { background: rgba(245,158,11,0.15); color: #fbbf24; }
.news-tag.tag-auto     { background: rgba(239,68,68,0.15);  color: #f87171; }
.news-tag.tag-economy  { background: rgba(168,85,247,0.15); color: #c084fc; }
.news-time { font-size: 11px; color: var(--text-muted); margin-left: auto; }
.news-title {
    font-size: 14px; font-weight: 700; line-height: 1.4;
    color: var(--text-main); margin-bottom: 4px;
}
.news-desc {
    font-size: 12px; color: var(--text-muted); line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; margin-bottom: 10px;
}
.news-sector {
    font-size: 11px; font-weight: 700; color: var(--accent-primary);
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--border-color);
}

/* ══════════════════════════════════════════════
   INVESTMENT CALCULATOR
══════════════════════════════════════════════ */
.calc-tabs {
    display: flex; gap: 4px; background: rgba(255,255,255,0.05);
    border-radius: 10px; padding: 4px; width: fit-content; margin-bottom: 24px;
}
.calc-tab {
    padding: 8px 22px; border: none; border-radius: 8px; background: transparent;
    color: var(--text-muted); font-family: var(--font-family); font-size: 14px;
    font-weight: 600; cursor: pointer; transition: all 0.18s;
}
.calc-tab:hover { color: var(--text-main); }
.calc-tab.active { background: var(--accent-primary); color: white; box-shadow: 0 2px 12px rgba(20,184,166,0.35); }

.calc-form { animation: fadeIn 0.2s ease; }
.calc-form.hidden { display: none; }

.calc-inputs {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px; margin-bottom: 24px;
}
.calc-field { display: flex; flex-direction: column; gap: 8px; }

.calc-slider {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 5px; border-radius: 4px;
    background: rgba(255,255,255,0.12); outline: none; cursor: pointer;
}
.calc-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--accent-primary); cursor: pointer;
    box-shadow: 0 0 8px rgba(20,184,166,0.6);
}
.calc-slider::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--accent-primary); cursor: pointer; border: none;
}

.calc-results {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px; margin-bottom: 20px;
}
.calc-result-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md); padding: 16px;
    display: flex; flex-direction: column; gap: 6px;
}
.calc-result-card span { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.calc-result-card strong { font-size: 18px; font-weight: 700; color: var(--text-main); }
.calc-result-card.positive-border { border-color: rgba(0,255,163,0.25); }
.calc-result-card.accent-border   { border-color: rgba(20,184,166,0.4); }

.calc-bar-wrap {
    display: flex; height: 10px; border-radius: 6px; overflow: hidden;
    background: rgba(255,255,255,0.06); margin-bottom: 8px;
}
.calc-bar { height: 100%; transition: width 0.5s ease; }
.invested-bar { background: #3b82f6; }
.returns-bar  { background: #10b981; }

/* Tax & Inflation border variants */
.calc-result-card.tax-border { border-color: rgba(245,158,11,0.4); }
.calc-result-card.inf-border { border-color: rgba(236,72,153,0.4); }

/* LTCG / CPI badge labels */
.calc-tax-badge, .calc-inf-badge {
    display: inline-block; font-size: 10px; font-weight: 700;
    padding: 1px 7px; border-radius: 999px; margin-left: 8px;
    vertical-align: middle; letter-spacing: 0.5px;
}
.calc-tax-badge { background: rgba(245,158,11,0.18); color: #f59e0b; border: 1px solid rgba(245,158,11,0.3); }
.calc-inf-badge { background: rgba(236,72,153,0.15); color: #ec4899; border: 1px solid rgba(236,72,153,0.3); }

/* Tax slider accent */
.tax-slider::-webkit-slider-thumb { background: #f59e0b; }
.inf-slider::-webkit-slider-thumb { background: #ec4899; }
.tax-slider::-moz-range-thumb     { background: #f59e0b; }
.inf-slider::-moz-range-thumb     { background: #ec4899; }

/* Info / Source note */
.calc-info-note {
    margin-top: 24px; padding: 16px 20px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color);
    border-left: 4px solid rgba(99,102,241,0.6);
    border-radius: var(--radius-md);
    font-size: 13px; color: var(--text-muted);
    line-height: 1.7;
}
.calc-info-row   { display: flex; gap: 14px; align-items: flex-start; }
.calc-info-icon  { font-size: 20px; color: var(--accent-primary); flex-shrink: 0; margin-top: 2px; }
.calc-info-text  strong { color: var(--text-main); font-size: 13px; }
.calc-info-text  ul { margin: 8px 0 10px 18px; padding: 0; }
.calc-info-text  ul li { margin-bottom: 5px; }
.calc-info-sources { font-size: 11px; color: var(--text-muted); }
.calc-info-sources a { color: var(--accent-primary); text-decoration: none; }
.calc-info-sources a:hover { text-decoration: underline; }



/* ══════════════════════════════════════════════
   PORTFOLIO DONUT
══════════════════════════════════════════════ */
.donut-wrap {
    display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
    padding: 20px; background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color); border-radius: var(--radius-md);
}
.donut-legend { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 160px; }
.donut-legend-item {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; color: var(--text-main);
}
.donut-legend-item span:first-child {
    display: inline-block; width: 12px; height: 12px;
    border-radius: 3px; flex-shrink: 0;
}
.donut-legend-item .legend-val {
    margin-left: auto; font-size: 12px; color: var(--text-muted); font-weight: 600;
}

/* ══════════════════════════════════════════════
   STOCK MODAL — SET ALERT BUTTON
══════════════════════════════════════════════ */
.btn-alert-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--radius-sm);
    background: rgba(251,191,36,0.12); color: #fbbf24;
    border: 1px solid rgba(251,191,36,0.3);
    font-family: var(--font-family); font-size: 13px; font-weight: 600;
    cursor: pointer; transition: var(--transition);
}
.btn-alert-btn:hover { background: rgba(251,191,36,0.22); }

/* ══════════════════════════════════════════════
   RESPONSIVE ADJUSTMENTS
══════════════════════════════════════════════ */
@media (max-width: 768px) {
    .news-grid { grid-template-columns: 1fr; }
    .calc-inputs { grid-template-columns: 1fr; }
    .calc-results { grid-template-columns: repeat(2, 1fr); }
    .modal-stats { grid-template-columns: repeat(2, 1fr); }
    .donut-wrap { flex-direction: column; }
}
@media (max-width: 600px) { .modal-stats { grid-template-columns: repeat(2, 1fr); } }

/* ══════════════════════════════════════════════
   SETTINGS PAGE
══════════════════════════════════════════════ */
.settings-profile-card {
    display: flex; align-items: center; gap: 24px;
    padding: 24px 28px; border-radius: var(--radius-md);
    margin-bottom: 24px; flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(16,185,129,0.08));
    border: 1px solid rgba(99,102,241,0.25);
}
.settings-avatar-wrap { position: relative; flex-shrink: 0; }
.settings-avatar {
    width: 88px; height: 88px; border-radius: 50%;
    border: 3px solid var(--accent-primary);
    object-fit: cover; display: block;
}
.settings-avatar-badge {
    position: absolute; bottom: 2px; right: 2px;
    font-size: 18px; line-height: 1;
}
.settings-profile-info h3 { font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.settings-profile-info p  { font-size: 13px; color: var(--text-muted); }
.settings-chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 500;
    padding: 4px 10px; border-radius: 999px;
    background: rgba(255,255,255,0.07); border: 1px solid var(--border-color);
    color: var(--text-main);
}

.settings-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}
.settings-card {
    padding: 20px; border-radius: var(--radius-md);
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color);
}
.settings-card-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; color: var(--text-main);
    margin-bottom: 16px; padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}
.settings-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 9px 0; font-size: 13px; color: var(--text-muted);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.settings-row:last-child { border-bottom: none; }
.settings-val { font-size: 13px; font-weight: 600; color: var(--text-main); text-align: right; }
.settings-input {
    background: rgba(255,255,255,0.06); border: 1px solid var(--border-color);
    border-radius: var(--radius-sm); padding: 5px 10px;
    color: var(--text-main); font-size: 13px; font-family: var(--font-family);
    width: 160px;
}
.settings-danger-btn {
    background: rgba(239,68,68,0.12); color: #ef4444;
    border: 1px solid rgba(239,68,68,0.25);
    padding: 4px 12px; font-size: 12px; border-radius: var(--radius-sm);
    cursor: pointer; font-family: var(--font-family); transition: var(--transition);
}
.settings-danger-btn:hover { background: rgba(239,68,68,0.22); }
.settings-theme-btn {
    padding: 5px 12px; font-size: 12px; border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.06); border: 1px solid var(--border-color);
    color: var(--text-muted); cursor: pointer; transition: var(--transition);
    font-family: var(--font-family);
}
.settings-theme-btn.active {
    background: var(--accent-primary); color: #fff; border-color: var(--accent-primary);
}
.settings-color-dot {
    width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent;
    cursor: pointer; transition: transform 0.15s;
}
.settings-color-dot:hover { transform: scale(1.25); border-color: white; }
.btn-sm { padding: 4px 12px; font-size: 12px; border-radius: var(--radius-sm); cursor: pointer; }

/* ══════════════════════════════════════════════
   COMPARE SECTION — rank badges
══════════════════════════════════════════════ */
.rank-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    font-size: 12px; font-weight: 700;
}
.rank-1 { background: linear-gradient(135deg,#fbbf24,#f59e0b); color: #1a1a1a; }
.rank-2 { background: rgba(148,163,184,0.25); color: #cbd5e1; }
.rank-3 { background: rgba(180,120,60,0.25); color: #d4956a; }
.rank-other { background: rgba(255,255,255,0.07); color: var(--text-muted); }
.compare-win { background: rgba(16,185,129,0.12); }

/* ══════════════════════════════════════════════
   PREMIUM GAUGE & SENTIMENT METER (REDESIGN)
══════════════════════════════════════════════ */
.fg-premium-widget {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.fg-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.fg-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.fg-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    margin-top: 4px;
    padding: 4px 10px;
    border-radius: 20px;
}
.status-live { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.status-live span { width: 6px; height: 6px; background: #10b981; border-radius: 50%; box-shadow: 0 0 10px #10b981; animation: pulse 2s infinite; }

.fg-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.fg-gauge-container {
    position: relative;
    width: 220px;
    height: 160px;
}

.fg-svg-score {
    font-family: 'Outfit', sans-serif;
}

.fg-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
}

.fg-metric-box {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease;
}
.fg-metric-box:hover { transform: translateY(-2px); background: rgba(255,255,255,0.05); }

.fg-metric-box .label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px; }
.fg-metric-box .val { font-size: 16px; font-weight: 700; color: var(--text-main); }
.fg-metric-box .chg { font-size: 10px; font-weight: 600; margin-top: 2px; }
.fg-metric-box .chg.up { color: var(--positive); }
.fg-metric-box .chg.down { color: var(--negative); }

.fg-footer { margin-top: 20px; font-size: 11px; color: var(--text-muted); text-align: center; font-style: italic; }

@keyframes pulse {
    0% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(1); opacity: 0.8; }
}

.gauge-glow { filter: blur(12px); opacity: 0.3; }
.needle-glow { filter: drop-shadow(0 0 8px currentColor); }

/* ══════════════════════════════════════════════
   MARKET HEATMAP
══════════════════════════════════════════════ */
.heatmap-legend {
    display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px;
}
.hm-leg {
    padding: 3px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
}
.hm-leg-bear3 { background: #7f1d1d; color: #fca5a5; }
.hm-leg-bear2 { background: #b91c1c; color: #fecaca; }
.hm-leg-bear1 { background: #dc2626; color: #fee2e2; }
.hm-leg-neutral { background: #1f2937; color: #9ca3af; }
.hm-leg-bull1 { background: #166534; color: #86efac; }
.hm-leg-bull2 { background: #15803d; color: #bbf7d0; }
.hm-leg-bull3 { background: #14532d; color: #d1fae5; }

.heatmap-grid {
    display: flex; flex-wrap: wrap; gap: 4px;
}
.hm-cell {
    border: 1px solid transparent; border-radius: 8px;
    cursor: pointer; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px;
    padding: 6px 4px; transition: transform 0.15s ease, opacity 0.15s ease;
    overflow: hidden;
}
.hm-cell:hover { transform: scale(1.06); opacity: 0.9; z-index: 2; }
.hm-sm  { width: 72px;  height: 64px; }
.hm-md  { width: 96px;  height: 80px; }
.hm-lg  { width: 120px; height: 96px; }
.hm-xl  { width: 152px; height: 112px; }
.hm-sym  { font-family: var(--font-heading); font-size: 11px; font-weight: 700; color: #fff; letter-spacing: 0.3px; text-align: center; }
.hm-lg .hm-sym, .hm-xl .hm-sym { font-size: 13px; }
.hm-xl .hm-sym { font-size: 15px; }
.hm-chg  { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.9); }
.hm-lg .hm-chg, .hm-xl .hm-chg { font-size: 13px; }
.hm-price { font-size: 10px; color: rgba(255,255,255,0.65); }
.hm-lg .hm-price, .hm-xl .hm-price { font-size: 11px; }

/* Heatmap sector tabs */
.hm-sector-tabs {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 14px; padding-bottom: 14px;
    border-bottom: 1px solid var(--border-color);
}
.hm-sector-tab {
    padding: 5px 14px; border-radius: 999px; font-size: 12px; font-weight: 600;
    border: 1px solid var(--border-color); background: rgba(255,255,255,0.04);
    color: var(--text-muted); cursor: pointer; transition: var(--transition);
}
.hm-sector-tab:hover { background: rgba(255,255,255,0.09); color: var(--text-main); }
.hm-sector-tab.active {
    background: var(--accent-primary); color: #fff;
    border-color: var(--accent-primary); box-shadow: 0 0 10px rgba(16,185,129,0.3);
}

/* Sector group header in heatmap */
.hm-sector-header {
    width: 100%; padding: 8px 0 4px;
    font-size: 11px; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.8px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 2px;
}

/* ══════════════════════════════════════════════
   PREMIUM FEAR & GREED WIDGET (RE-DESIGN)
══════════════════════════════════════════════ */
.fg-premium-widget {
    padding: 16px; 
    display: flex; flex-direction: column; gap: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.fg-header {
    display: flex; justify-content: space-between; align-items: flex-start;
}
.fg-title {
    font-size: 11px; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.8px;
    display: block; margin-bottom: 2px;
}
.fg-status {
    font-size: 10px; font-weight: 700; display: flex; align-items: center; gap: 4px;
}
.fg-status span { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.status-live { color: #10b981; }
.status-live span { background: #10b981; box-shadow: 0 0 6px #10b981; animation: pulse-status 2s infinite; }
@keyframes pulse-status { 0% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
.status-sim { color: var(--text-muted); }
.status-sim span { background: var(--text-muted); }

.fg-label {
    padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 800;
    letter-spacing: 0.5px;
}

.fg-main {
    display: flex; align-items: center; gap: 20px;
}
.fg-gauge-container {
    width: 140px; flex-shrink: 0;
}
.fg-canvas { filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2)); }
.fg-svg-score { font-family: var(--font-heading); }
.fg-metrics {
    display: flex; flex-direction: column; gap: 8px; flex-grow: 1;
}
.fg-metric-box {
    display: flex; flex-direction: column; 
    padding: 6px 10px; background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
}
.fg-metric-box .label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; font-weight: 700; margin-bottom: 2px; }
.fg-metric-box .val   { font-size: 16px; font-weight: 800; line-height: 1; font-family: var(--font-heading); }
.fg-metric-box .val-sm { font-size: 11px; font-weight: 700; color: var(--text-normal); }
.fg-metric-box .chg    { font-size: 9px; font-weight: 700; margin-top: 2px; }
.fg-metric-box .chg.up { color: #10b981; }
.fg-metric-box .chg.down { color: #ef4444; }

.fg-footer {
    font-size: 10px; color: var(--text-muted); text-align: center;
    border-top: 1px solid var(--border-color); padding-top: 10px;
    font-style: italic;
}

/* Hide legacy elements */
.fg-source-badge, .fg-vix-row, .fg-scale, .fg-score-label { display: none !important; }


/* Screener load-more row */
.screener-load-more-row td { padding: 14px 0 !important; text-align: center; border: none !important; }

/* ══════════════════════════════════════════════
   TRADE JOURNAL
══════════════════════════════════════════════ */
.journal-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}
.journal-stat-card {
    padding: 16px 18px; border-radius: var(--radius-md);
    display: flex; flex-direction: column; gap: 6px;
}
.js-label { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.js-val   { font-family: var(--font-heading); font-size: 22px; font-weight: 700; }

.journal-curve-wrap {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px 20px;
}
.jc-label {
    font-size: 11px; font-weight: 700; letter-spacing: 0.8px;
    color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px;
}

/* ══════════════════════════════════════════════
   WHAT-IF MACHINE
══════════════════════════════════════════════ */
.wi-result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px; margin-bottom: 20px;
}
.wi-result-card {
    padding: 14px 16px; border-radius: var(--radius-md);
    display: flex; flex-direction: column; gap: 6px;
    border: 1px solid var(--border-color);
}
.wi-result-card span { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.wi-result-card strong { font-family: var(--font-heading); font-size: 18px; font-weight: 700; }

.wi-vs-section {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 18px 20px; margin-bottom: 14px;
}
.wi-vs-title { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 14px; }
.wi-vs-row   { display: flex; align-items: center; gap: 12px; }
.wi-vs-name  { font-size: 12px; font-weight: 700; min-width: 80px; }
.wi-vs-val   { font-size: 13px; font-weight: 700; min-width: 90px; text-align: right; }
.wi-bar-track {
    flex: 1; height: 10px; border-radius: 999px;
    background: rgba(255,255,255,0.07); overflow: hidden;
}
.wi-bar-fill { height: 100%; border-radius: 999px; transition: width 0.6s cubic-bezier(0.25,0.8,0.25,1); }
.wi-verdict { margin-top: 14px; font-size: 13px; font-weight: 600; }
.wi-disclaimer { font-size: 11px; color: var(--text-muted); font-style: italic; margin-top: 8px; }

/* ══════════════════════════════════════════════
   STOCK STRENGTH SCORE (modal)
══════════════════════════════════════════════ */
.stock-score-card {
    padding: 16px 20px; border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: rgba(255,255,255,0.03);
}
.ss-header {
    display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap;
}
.ss-title { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; flex: 1; }
.ss-badge {
    padding: 2px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
}
.ss-num { font-family: var(--font-heading); font-size: 20px; font-weight: 800; }
.ss-num small { font-size: 12px; opacity: 0.6; }

.ss-main-track {
    height: 8px; border-radius: 999px; background: rgba(255,255,255,0.08);
    overflow: hidden; margin-bottom: 14px;
}
.ss-main-fill { height: 100%; border-radius: 999px; transition: width 0.7s cubic-bezier(0.25,0.8,0.25,1); }

.ss-factors { display: flex; flex-direction: column; gap: 8px; }
.ss-factor  { display: flex; align-items: center; gap: 10px; }
.ss-fn      { font-size: 11px; color: var(--text-muted); min-width: 120px; font-weight: 500; }
.ss-f-track { flex: 1; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.ss-f-fill  { height: 100%; border-radius: 999px; transition: width 0.5s ease; }
.ss-fv      { font-size: 11px; font-weight: 700; min-width: 28px; text-align: right; }

/* ══════════════════════════════════════════════
   LIGHT MODE OVERRIDES
══════════════════════════════════════════════ */
body.light-mode {
    --bg-dark: #f0f4f8;
    --bg-panel: rgba(255, 255, 255, 0.88);
    --bg-panel-hover: #e2e8f0;
    --border-color: rgba(0, 0, 0, 0.1);
    --text-main: #1a202c;
    --text-muted: #64748b;
    --positive: #059669;
    --positive-bg: rgba(5, 150, 105, 0.1);
    --negative: #dc2626;
    --negative-bg: rgba(220, 38, 38, 0.1);
    background-color: #f0f4f8;
    background-image:
        radial-gradient(circle at 0% 0%, rgba(20, 184, 166, 0.07) 0%, transparent 40%),
        radial-gradient(circle at 100% 100%, rgba(139, 92, 246, 0.05) 0%, transparent 40%);
}
body.light-mode .glass-panel {
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
body.light-mode .logo h1 {
    background: linear-gradient(90deg, #1a202c, #475569);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.light-mode .search-bar {
    background: rgba(0, 0, 0, 0.05);
}
body.light-mode .filter-select {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-main);
}
body.light-mode .ticker-bar {
    background: rgba(0, 0, 0, 0.04);
}
body.light-mode .ticker-sep {
    color: rgba(0, 0, 0, 0.15);
}
body.light-mode .ticker-label-fixed {
    background: rgba(16, 185, 129, 0.07);
}
body.light-mode .btn-small {
    background: rgba(0, 0, 0, 0.05);
    border-color: var(--border-color);
    color: var(--text-main);
}
body.light-mode .btn-small:hover {
    background: rgba(0, 0, 0, 0.1);
}
body.light-mode .btn-icon {
    color: var(--text-muted);
}
body.light-mode .btn-icon:hover {
    background: rgba(0, 0, 0, 0.07);
    color: var(--text-main);
}
body.light-mode .nav-item:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-main);
}
body.light-mode .nav-item.active {
    background: rgba(16, 185, 129, 0.12);
    color: var(--accent-primary);
}
body.light-mode .nav-menu {
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}
body.light-mode .nav-menu::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
}
body.light-mode .nav-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}
body.light-mode .stock-table td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
body.light-mode .stock-table tbody tr:hover {
    background: rgba(0, 0, 0, 0.03);
}
body.light-mode .star-empty {
    color: rgba(0, 0, 0, 0.2);
}
body.light-mode .wi-vs-section,
body.light-mode .stock-score-card {
    background: rgba(0, 0, 0, 0.03);
}
body.light-mode .wi-bar-track,
body.light-mode .ss-main-track,
body.light-mode .ss-f-track {
    background: rgba(0, 0, 0, 0.09);
}
body.light-mode .market-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    background: var(--bg-panel-hover);
}
body.light-mode .hm-sector-tab {
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-muted);
    border-color: var(--border-color);
}
body.light-mode .modal-overlay {
    background: rgba(0, 0, 0, 0.45);
}
body.light-mode input,
body.light-mode textarea,
body.light-mode select {
    color: var(--text-main);
}
body.light-mode input::placeholder {
    color: var(--text-muted);
}
/* Search dropdown */
body.light-mode .search-dropdown {
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}
body.light-mode .search-item:hover {
    background: rgba(0, 0, 0, 0.05);
}
/* Stat & fund meta boxes */
body.light-mode .stat-item,
body.light-mode .fund-meta-item {
    background: rgba(0, 0, 0, 0.03);
}
/* Fund invest tabs & amount input */
body.light-mode .invest-tabs {
    background: rgba(0, 0, 0, 0.05);
}
body.light-mode .amount-input-wrap {
    background: rgba(0, 0, 0, 0.05);
}
/* Gainers/Losers table rows */
body.light-mode .gl-table tr:hover {
    background: rgba(0, 0, 0, 0.04);
}
/* Sector performance bar */
body.light-mode .sector-bar-wrap {
    background: rgba(0, 0, 0, 0.08);
}
/* Watchlist button in modals */
body.light-mode .btn-watchlist-btn {
    background: rgba(0, 0, 0, 0.04);
}
/* Order modal */
body.light-mode .order-type-tabs {
    background: rgba(0, 0, 0, 0.05);
}
body.light-mode .order-summary-box {
    background: rgba(0, 0, 0, 0.03);
}
/* Price chart */
body.light-mode .chart-range-tabs {
    background: rgba(0, 0, 0, 0.05);
}
body.light-mode .chart-range-tab:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-main);
}
body.light-mode .modal-chart-area {
    background: rgba(0, 0, 0, 0.02);
}
/* 52-week bar */
body.light-mode .week52-bar-track {
    background: rgba(0, 0, 0, 0.1);
}
body.light-mode .week52-marker {
    background: #fff;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}
/* Order history type badge (inline bg override) */
body.light-mode .order-type-badge {
    background: rgba(0, 0, 0, 0.07) !important;
    color: var(--text-muted);
}
/* All Stocks page */
body.light-mode .as-toolbar {
    background: rgba(0, 0, 0, 0.04);
}
/* IPO cards hover */
body.light-mode .ipo-card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
/* Portfolio stat cards */
body.light-mode .port-stat-card {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid var(--border-color);
}
/* All Stocks browser */
body.light-mode .as-sort-group {
    background: rgba(0, 0, 0, 0.06);
}
body.light-mode .all-stocks-table tr:hover {
    background: rgba(0, 0, 0, 0.03);
}
/* News */
body.light-mode .news-card {
    background: rgba(0, 0, 0, 0.03);
}
body.light-mode .news-card:hover {
    background: rgba(0, 0, 0, 0.06);
}
/* Calculator */
body.light-mode .calc-tabs {
    background: rgba(0, 0, 0, 0.06);
}
body.light-mode .calc-slider {
    background: rgba(0, 0, 0, 0.12);
}
body.light-mode .calc-result-card {
    background: rgba(0, 0, 0, 0.03);
}
body.light-mode .calc-bar-wrap {
    background: rgba(0, 0, 0, 0.08);
}
body.light-mode .calc-info-note {
    background: rgba(0, 0, 0, 0.03);
}
/* Portfolio donut */
body.light-mode .donut-wrap {
    background: rgba(0, 0, 0, 0.03);
}
/* Settings */
body.light-mode .settings-chip {
    background: rgba(0, 0, 0, 0.05);
}
body.light-mode .settings-card {
    background: rgba(0, 0, 0, 0.03);
}
body.light-mode .settings-row {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}
body.light-mode .settings-input {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-main);
}
body.light-mode .settings-theme-btn {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-muted);
}
body.light-mode .settings-color-dot:hover {
    border-color: #1a202c;
}
/* Fear & Greed widget */
body.light-mode .fg-premium-widget {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--border-color);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
body.light-mode .fg-metric-box {
    background: rgba(0, 0, 0, 0.03);
    border-color: var(--border-color);
}
body.light-mode .fg-metric-box:hover {
    background: rgba(0, 0, 0, 0.06);
}
/* Heatmap tab hover */
body.light-mode .hm-sector-tab:hover {
    background: rgba(0, 0, 0, 0.07);
}
/* Stock strength score */
body.light-mode .ss-score-bg {
    background: rgba(0, 0, 0, 0.03);
}
/* Journal */
body.light-mode .journal-entry-row {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}
body.light-mode .journal-entry-row:hover {
    background: rgba(0, 0, 0, 0.03);
}
/* Watchlist insight / vs-section */
body.light-mode .wi-vs-section {
    background: rgba(0, 0, 0, 0.03);
}


/* ═══════════════════════════════════════════════════════════
   ECONOMIC CALENDAR
═══════════════════════════════════════════════════════════ */
.calendar-grid { display:flex; flex-direction:column; gap:10px; }

.calendar-event-card {
    display:flex; gap:0; border-radius:12px;
    border:1px solid var(--glass-border);
    background:rgba(255,255,255,0.03);
    overflow:hidden; transition:background 0.2s;
}
.calendar-event-card:hover { background:rgba(255,255,255,0.06); }
.cal-past { opacity:0.45; }
.cal-today { border-color:var(--accent-primary); box-shadow:0 0 0 1px var(--accent-primary)33; }

.cal-date-col {
    min-width:80px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; padding:14px 10px;
    background:rgba(255,255,255,0.04); border-right:1px solid var(--glass-border);
    gap:4px;
}
.cal-day   { font-size:22px; font-weight:800; line-height:1; }
.cal-month { font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; }
.cal-days-pill { font-size:10px; font-weight:700; padding:2px 7px; border-radius:20px; }

.cal-body { flex:1; padding:14px 16px; }
.cal-title-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap; }
.cal-cat-icon  { font-size:16px; }
.cal-title     { font-size:13px; font-weight:600; flex:1; }
.cal-impact-badge { font-size:10px; font-weight:700; padding:2px 8px; border-radius:20px; white-space:nowrap; }
.cal-desc      { font-size:12px; color:var(--text-muted); line-height:1.6; margin:0; }

/* ═══════════════════════════════════════════════════════════
   SCREENER PRO
═══════════════════════════════════════════════════════════ */
.screener-pro-filters { background:rgba(255,255,255,0.03); border:1px solid var(--glass-border); border-radius:12px; padding:18px; }
.screener-pro-filter-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; }
.sp-filter-group { display:flex; flex-direction:column; gap:6px; }

/* ═══════════════════════════════════════════════════════════
   GLOBAL MARKETS
═══════════════════════════════════════════════════════════ */
.global-cat-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.global-cat-tab {
    padding:6px 14px; border-radius:20px; border:1px solid var(--glass-border);
    background:transparent; color:var(--text-secondary); font-size:13px; font-weight:500;
    cursor:pointer; transition:all 0.2s;
}
.global-cat-tab:hover  { background:rgba(255,255,255,0.07); color:var(--text-primary); }
.global-cat-tab.active { background:var(--accent-primary); border-color:var(--accent-primary); color:#fff; }

.global-markets-grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px;
}

.gm-card {
    padding:16px; border-radius:14px; cursor:default; transition:transform 0.2s, box-shadow 0.2s;
}
.gm-card:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.3); }
.gm-top        { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.gm-flag       { font-size:20px; }
.gm-cat-badge  { font-size:10px; font-weight:700; padding:2px 8px; border-radius:20px; text-transform:uppercase; letter-spacing:0.5px; }
.gm-cat-index     { background:rgba(59,130,246,0.2);  color:#60a5fa; }
.gm-cat-commodity { background:rgba(245,158,11,0.2);  color:#f59e0b; }
.gm-cat-forex     { background:rgba(16,185,129,0.2);  color:#34d399; }
.gm-cat-crypto    { background:rgba(168,85,247,0.2);  color:#c084fc; }
.gm-name  { font-size:12px; color:var(--text-muted); margin-bottom:6px; }
.gm-price { font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.1; }
.gm-change{ font-size:13px; font-weight:700; margin-top:4px; }
.gm-range { font-size:11px; color:var(--text-muted); margin-top:6px; }

/* ═══════════════════════════════════════════════════════════
   ANALYST INTELLIGENCE PANEL
═══════════════════════════════════════════════════════════ */
.analyst-bar-row {
    display:flex; align-items:center; gap:10px; margin-bottom:6px;
}
.analyst-label { font-size:12px; color:var(--text-secondary); min-width:80px; }
.analyst-bar-track {
    flex:1; height:6px; background:rgba(255,255,255,0.08); border-radius:3px; overflow:hidden;
}
.analyst-bar-fill { height:100%; border-radius:3px; transition:width 0.5s ease; }
.analyst-count { font-size:12px; font-weight:700; min-width:20px; text-align:right; }

.analyst-target-row {
    display:flex; gap:0; margin-top:12px; border-radius:10px;
    border:1px solid var(--glass-border); overflow:hidden;
}
.analyst-target-item {
    flex:1; padding:10px 12px; display:flex; flex-direction:column; gap:3px; text-align:center;
    border-right:1px solid var(--glass-border);
}
.analyst-target-item:last-child { border-right:none; }
.analyst-target-item span  { font-size:11px; color:var(--text-muted); }
.analyst-target-item strong{ font-size:15px; font-weight:700; }

/* ═══════════════════════════════════════════════════════════
   TECHNICAL SCREENER
═══════════════════════════════════════════════════════════ */
.tech-legend { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px; }

.tsi-badge {
    font-size:10px; font-weight:800; padding:3px 9px; border-radius:20px;
    letter-spacing:0.6px; white-space:nowrap;
}
.tsi-strong-buy  { background:rgba(16,185,129,0.2);  color:#10b981; border:1px solid rgba(16,185,129,0.4);  }
.tsi-buy         { background:rgba(34,197,94,0.15);  color:#22c55e; border:1px solid rgba(34,197,94,0.35);  }
.tsi-neutral     { background:rgba(245,158,11,0.15); color:#f59e0b; border:1px solid rgba(245,158,11,0.35); }
.tsi-sell        { background:rgba(249,115,22,0.15); color:#f97316; border:1px solid rgba(249,115,22,0.35); }
.tsi-strong-sell { background:rgba(239,68,68,0.2);   color:#ef4444; border:1px solid rgba(239,68,68,0.4);   }

/* ═══════════════════════════════════════════════════════════
   DIVIDEND TRACKER
═══════════════════════════════════════════════════════════ */
.div-stats-row {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px;
    margin-bottom:4px;
}
.div-stat-card {
    padding:14px 16px; border-radius:12px; display:flex; flex-direction:column; gap:6px;
}

/* ── Feature Tabs (shared) ── */
.feature-tabs {
    display: flex;
    gap: 4px;
    background: rgba(255,255,255,0.04);
    border-radius: var(--radius-md);
    padding: 4px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.feature-tab {
    padding: 8px 18px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: calc(var(--radius-md) - 2px);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: var(--transition);
    font-family: var(--font-family);
}
.feature-tab:hover { color: var(--text-main); background: rgba(255,255,255,0.06); }
.feature-tab.active { background: var(--accent-primary); color: #fff; font-weight: 600; }

/* ── Market Pulse: Breadth ── */
.pulse-breadth-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.pulse-stat-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
    text-align: center;
}
.pulse-stat-num { font-size: 32px; font-weight: 700; font-family: var(--font-heading); }
.pulse-stat-label { font-size: 13px; color: var(--text-muted); margin: 4px 0; }
.pulse-stat-pct { font-size: 14px; font-weight: 600; }
.pulse-adv .pulse-stat-num, .pulse-adv .pulse-stat-pct, .pulse-adv .p52-num { color: var(--positive); }
.pulse-dec .pulse-stat-num, .pulse-dec .pulse-stat-pct, .pulse-dec .p52-num { color: var(--negative); }
.pulse-unch .pulse-stat-num, .pulse-unch .pulse-stat-pct, .pulse-unch .p52-num { color: var(--text-muted); }
.pulse-bar-section { margin-bottom: 16px; }
.pulse-bar-label { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }
.pulse-bar-ratio { font-weight: 600; color: var(--text-main); }
.pulse-breadth-bar { display: flex; height: 18px; border-radius: 9px; overflow: hidden; gap: 2px; }
.pulse-bar-adv { background: var(--positive); transition: width 0.5s ease; }
.pulse-bar-unch { background: rgba(255,255,255,0.12); transition: width 0.5s ease; }
.pulse-bar-dec { background: var(--negative); transition: width 0.5s ease; flex: 1; }
.pulse-highs-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 12px; }
.pulse-52w-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px;
    text-align: center;
    display: flex; flex-direction: column; gap: 4px;
}
.p52-num { font-size: 24px; font-weight: 700; }
.p52-lbl { font-size: 12px; color: var(--text-muted); }

/* ── Market Pulse: Sector Flow ── */
.sector-flow-container { padding: 4px 0; }
.pulse-section-title { font-size: 14px; font-weight: 600; color: var(--text-muted); margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.5px; }
.sector-flow-list { display: flex; flex-direction: column; gap: 12px; }
.sector-flow-row { display: grid; grid-template-columns: 90px 1fr 68px; align-items: center; gap: 12px; }
.sf-name { font-size: 13px; font-weight: 600; color: var(--text-main); }
.sf-bar-wrap { background: rgba(255,255,255,0.06); border-radius: 4px; height: 8px; overflow: hidden; }
.sf-bar { height: 100%; border-radius: 4px; transition: width 0.5s ease; min-width: 2px; }
.sf-bar.positive { background: var(--positive); }
.sf-bar.negative { background: var(--negative); }
.sf-pct { font-size: 13px; font-weight: 600; text-align: right; }

/* ── Market Pulse: Sentiment ── */
.sentiment-wrap { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: start; }
.fg-circle-wrap { display: flex; justify-content: center; padding: 16px 0; }
.fg-circle {
    width: 140px; height: 140px; border-radius: 50%;
    background: conic-gradient(var(--positive) 0% calc(var(--fg-score, 50) * 1%), rgba(255,255,255,0.08) calc(var(--fg-score, 50) * 1%) 100%);
    display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative;
}
.fg-circle::before {
    content: ''; position: absolute;
    width: 110px; height: 110px;
    background: var(--bg-dark); border-radius: 50%;
}
.fg-score-num { position: relative; z-index: 1; font-size: 28px; font-weight: 800; font-family: var(--font-heading); }
.fg-score-lbl { position: relative; z-index: 1; font-size: 11px; color: var(--text-muted); text-align: center; margin-top: 2px; }
.sentiment-indicators { display: flex; flex-direction: column; gap: 10px; }
.sentiment-indicator-row {
    display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
    padding: 12px 16px;
    background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: var(--radius-md);
}
.si-name { font-size: 13px; color: var(--text-main); }
.si-value { font-size: 13px; font-weight: 600; color: var(--text-main); }
.si-badge { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 99px; }
.si-bull { background: rgba(16,185,129,0.15); color: var(--positive); }
.si-bear { background: rgba(239,68,68,0.15); color: var(--negative); }

/* ── Market Pulse: FII/DII ── */
.fii-wrap { display: flex; flex-direction: column; gap: 20px; }
.fii-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.fii-sum-card { background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 16px 20px; }
.fii-sum-label { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.fii-sum-val { font-size: 18px; font-weight: 700; }
.fii-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fii-table th { text-align: left; padding: 10px 12px; color: var(--text-muted); border-bottom: 1px solid var(--border-color); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.fii-table td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.fii-table tbody tr:hover { background: rgba(255,255,255,0.03); }

/* ── Earnings Calendar ── */
.earn-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.earn-table th { text-align: left; padding: 10px 12px; color: var(--text-muted); border-bottom: 1px solid var(--border-color); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.earn-table td { padding: 12px; border-bottom: 1px solid rgba(255,255,255,0.04); vertical-align: middle; }
.earn-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.earn-badge { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 99px; white-space: nowrap; }
.earn-reported { background: rgba(255,255,255,0.08); color: var(--text-muted); }
.earn-today    { background: rgba(250,204,21,0.15); color: #facc15; }
.earn-soon     { background: rgba(16,185,129,0.15); color: var(--positive); }
.earn-upcoming { background: rgba(99,102,241,0.15); color: #818cf8; font-size: 10px; }

@media (max-width: 768px) {
    .pulse-breadth-grid { gap: 8px; }
    .sentiment-wrap { grid-template-columns: 1fr; }
    .fg-circle-wrap { display: none; }
    .sector-flow-row { grid-template-columns: 70px 1fr 56px; }
    .fii-summary { grid-template-columns: 1fr 1fr; }
    .earn-table th:nth-child(5), .earn-table td:nth-child(5) { display: none; }
}

/* ── Price Flash Animations ── */
@keyframes flash-up {
    0%   { background: rgba(16, 185, 129, 0.35); border-radius: 3px; }
    100% { background: transparent; }
}
@keyframes flash-down {
    0%   { background: rgba(239, 68, 68, 0.35); border-radius: 3px; }
    100% { background: transparent; }
}
.price-flash-up   { animation: flash-up   0.9s ease-out forwards; }
.price-flash-down { animation: flash-down 0.9s ease-out forwards; }

/* ── View Fade-In ── */
@keyframes view-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.view-fade-in { animation: view-fade-in 0.28s cubic-bezier(0.22,1,0.36,1) both; }

/* ── IST Clock ── */
.nt-clock-wrap {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    position: relative;
}
.nt-clock-wrap::before {
    content: '';
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
    transition: background 0.4s;
}
.nt-clock-wrap.market-open::before { background: var(--positive); box-shadow: 0 0 6px var(--positive); animation: pulse-dot 1.5s ease-in-out infinite; }
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}
.nt-clock-label { font-size: 10px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.5px; }
.nt-clock-time  { font-size: 12px; font-weight: 600; color: var(--text-main); font-variant-numeric: tabular-nums; letter-spacing: 0.5px; }

/* ── Refresh Ring ── */
.refresh-ring-wrap {
    position: relative;
    width: 28px; height: 28px;
    flex-shrink: 0;
    cursor: default;
}
.refresh-ring {
    width: 28px; height: 28px;
    transform: rotate(-90deg);
}
.refresh-ring-track {
    fill: none;
    stroke: rgba(255,255,255,0.08);
    stroke-width: 3;
}
.refresh-ring-fill {
    fill: none;
    stroke: var(--accent-primary);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear;
}
.refresh-ring-icon {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 11px; height: 11px;
    color: var(--text-muted);
}
@keyframes spin-once { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }
.spin-once { animation: spin-once 0.7s ease-in-out; }

@media (max-width: 768px) {
    .nt-clock-wrap { display: none; }
    .refresh-ring-wrap { display: none; }
}

/* ── OPTIONS CHAIN ─────────────────────────────────── */
.oc-meta-bar { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 18px; padding: 14px 18px; background: var(--bg-panel); border-radius: 10px; border: 1px solid var(--border-color); }
.oc-meta-item { display: flex; flex-direction: column; gap: 3px; }
.oc-meta-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.oc-meta-val { font-size: 15px; font-weight: 700; font-family: var(--font-heading); }
.oc-expiry-sel { background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-main); padding: 4px 8px; font-size: 13px; cursor: pointer; }
.oc-wrap { overflow-x: auto; }
.oc-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.oc-table th, .oc-table td { padding: 7px 10px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.05); white-space: nowrap; }
.oc-table thead th { font-size: 11px; font-weight: 600; color: var(--text-muted); background: var(--bg-panel); position: sticky; top: 0; }
.oc-ce-head { background: rgba(16,185,129,0.12) !important; color: var(--positive) !important; }
.oc-pe-head { background: rgba(239,68,68,0.12) !important; color: var(--negative) !important; }
.oc-strike-head { background: rgba(255,255,255,0.06) !important; }
.oc-row:hover { background: rgba(255,255,255,0.03); }
.oc-atm-row { background: rgba(245,158,11,0.08) !important; }
.oc-itm { background: rgba(16,185,129,0.07); }
.oc-ltp { font-weight: 700; color: var(--text-main); }
.oc-strike { font-weight: 700; font-size: 13px; color: var(--text-main); background: rgba(255,255,255,0.04); }
.oc-atm-strike { background: rgba(245,158,11,0.18) !important; color: var(--gold) !important; }

/* ── F&O DASHBOARD ─────────────────────────────────── */
.fno-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fno-table th, .fno-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.05); }
.fno-table thead th { font-size: 11px; font-weight: 600; color: var(--text-muted); background: var(--bg-panel); position: sticky; top: 0; }
.fno-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.fno-sym { font-weight: 700; color: var(--text-main); margin-right: 6px; }
.fno-ce-badge { background: rgba(16,185,129,0.18); color: var(--positive); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; }
.fno-pe-badge { background: rgba(239,68,68,0.18); color: var(--negative); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; }

/* ── POSITIONS ─────────────────────────────────────── */
.pos-summary-bar { display: flex; gap: 24px; flex-wrap: wrap; padding: 14px 18px; background: var(--bg-panel); border-radius: 10px; margin-bottom: 4px; border: 1px solid var(--border-color); }
.pos-summary-item { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.pos-summary-item span { color: var(--text-muted); font-size: 12px; }
.pos-summary-item b { font-size: 16px; font-family: var(--font-heading); }
.pos-buy-badge  { background: rgba(16,185,129,0.15); color: var(--positive); font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; margin-left: 4px; }
.pos-sell-badge { background: rgba(239,68,68,0.15); color: var(--negative); font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; margin-left: 4px; }
.pos-product-badge { background: rgba(99,102,241,0.18); color: #818cf8; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; }
.pos-exit-btn { background: rgba(239,68,68,0.15); color: var(--negative); border: 1px solid rgba(239,68,68,0.3); padding: 4px 12px; border-radius: 6px; font-size: 12px; cursor: pointer; font-weight: 600; transition: var(--transition); }
.pos-exit-btn:hover { background: rgba(239,68,68,0.3); }
.pnl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; margin-top: 18px; }
.pnl-card { background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 10px; padding: 16px; }
.pnl-card-label { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.pnl-card-val { font-size: 20px; font-weight: 700; font-family: var(--font-heading); }

/* ── FUNDS & MARGINS ────────────────────────────────── */
.funds-overview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 16px; }
.funds-card { background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 10px; padding: 18px; }
.funds-avail { border-color: rgba(16,185,129,0.3); }
.funds-used  { border-color: rgba(239,68,68,0.25); }
.funds-card-label { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.funds-card-val { font-size: 20px; font-weight: 700; font-family: var(--font-heading); margin-bottom: 4px; }
.funds-card-sub { font-size: 11px; color: var(--text-muted); }
.funds-bar-wrap { margin-top: 20px; }
.funds-bar-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.funds-bar-track { background: rgba(255,255,255,0.08); border-radius: 4px; height: 8px; }
.funds-bar-fill  { background: linear-gradient(90deg, var(--positive), var(--negative)); height: 100%; border-radius: 4px; transition: width 0.5s ease; }
.funds-breakdown { margin-top: 22px; background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 10px; padding: 18px; }
.funds-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.funds-row-total { border-top: 1px solid var(--border-color); border-bottom: none; font-weight: 700; padding-top: 12px; }
.funds-section-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 16px; }
.funds-detail-card { background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 10px; padding: 16px; }
.fdc-label { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.fdc-val { font-size: 18px; font-weight: 700; font-family: var(--font-heading); margin-bottom: 4px; }
.fdc-sub { font-size: 11px; color: var(--text-muted); }

/* ── BROKERAGE CALCULATOR ───────────────────────────── */
.bc-layout { display: grid; grid-template-columns: 300px 1fr; gap: 28px; margin-top: 18px; }
@media (max-width: 768px) { .bc-layout { grid-template-columns: 1fr; } }
.bc-inputs, .bc-results { background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; }
.bc-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.bc-field label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.bc-input { background: rgba(255,255,255,0.06); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-main); padding: 9px 12px; font-size: 14px; outline: none; transition: border-color 0.2s; width: 100%; box-sizing: border-box; }
.bc-input:focus { border-color: var(--accent-primary); }
.bc-charge-list { display: flex; flex-direction: column; gap: 2px; }
.bc-charge-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.bc-total-row { border-top: 1px solid var(--border-color); border-bottom: none; padding-top: 10px; font-weight: 600; }
.bc-net-row { font-size: 16px; font-weight: 700; padding: 12px 0 4px; border: none; }
.bc-breakeven { margin-top: 14px; padding: 10px 14px; background: rgba(245,158,11,0.1); border-radius: 8px; font-size: 13px; color: var(--gold); border: 1px solid rgba(245,158,11,0.2); }

/* ── STRATEGY BUILDER ───────────────────────────────── */
.strat-layout { display: grid; grid-template-columns: 280px 1fr; gap: 28px; margin-top: 18px; }
@media (max-width: 768px) { .strat-layout { grid-template-columns: 1fr; } }
.strat-controls { background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; align-self: start; }
.strat-legs { flex: 1; }
.strat-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
@media (max-width: 600px) { .strat-metrics { grid-template-columns: repeat(2, 1fr); } }
.strat-metric { background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 8px; padding: 12px 16px; text-align: center; }
.strat-metric span { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
.strat-metric b { font-size: 15px; font-family: var(--font-heading); }
.nt-primary-btn { background: var(--accent-primary); color: #fff; border: none; border-radius: 8px; padding: 10px 20px; font-size: 13px; font-weight: 600; cursor: pointer; transition: var(--transition); }
.nt-primary-btn:hover { opacity: 0.85; }

/* ── ORDER HISTORY STATS BAR ────────────────────────────── */
.order-stats-bar { display: flex; flex-wrap: wrap; gap: 0; background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; margin-bottom: 18px; }
.order-stat { flex: 1; min-width: 120px; padding: 14px 18px; border-right: 1px solid var(--border-color); }
.order-stat:last-child { border-right: none; }
.order-stat span { display: block; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.order-stat b { font-size: 16px; font-weight: 700; font-family: var(--font-heading); }

/* ── MARKET BREADTH BAR ─────────────────────────────────── */
.breadth-bar-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0; background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; padding: 0; }
.breadth-stat { flex: 1; min-width: 90px; padding: 12px 16px; border-right: 1px solid var(--border-color); text-align: center; }
.breadth-stat:last-child { border-right: none; }
.breadth-stat span { display: block; font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; }
.breadth-stat b { font-size: 15px; font-weight: 700; font-family: var(--font-heading); }
.breadth-adv-bar { flex-basis: 100%; height: 4px; display: flex; border-top: 1px solid var(--border-color); }
@media (max-width: 768px) { .breadth-stat { min-width: 70px; padding: 10px 10px; } }

/* ═══════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES (updated for new variables)
   ═══════════════════════════════════════════════════════════ */
body.light-mode {
    --bg-dark:        #f0f4f8;
    --bg-panel:       rgba(255,255,255,0.9);
    --bg-panel-hover: #e8eef5;
    --bg-elevated:    #ffffff;
    --bg-input:       rgba(0,0,0,0.05);
    --border-color:   rgba(0,0,0,0.09);
    --border-strong:  rgba(0,0,0,0.14);
    --text-main:      #1a202c;
    --text-secondary: #4a5568;
    --text-muted:     #9aa5b4;
    --positive:    #059669;
    --positive-bg: rgba(5,150,105,0.1);
    --negative:    #dc2626;
    --negative-bg: rgba(220,38,38,0.1);
    background-color: #f0f4f8;
    background-image:
        radial-gradient(ellipse 60% 40% at 0% 0%, rgba(16,185,129,0.06) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 100% 100%, rgba(99,102,241,0.05) 0%, transparent 60%);
}
body.light-mode .sidebar { background: rgba(248,250,252,0.95); }
body.light-mode .top-header { background: rgba(248,250,252,0.92); }
body.light-mode .glass-panel { background: rgba(255,255,255,0.92); box-shadow: 0 4px 20px rgba(0,0,0,0.07); }
body.light-mode .logo h1 { background: linear-gradient(135deg, #1a202c 30%, #10b981 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
body.light-mode .search-bar { background: rgba(0,0,0,0.05); }
body.light-mode .filter-select { background: rgba(0,0,0,0.05); color: var(--text-main); }
body.light-mode .ticker-bar { background: rgba(0,0,0,0.04); }
body.light-mode .ticker-sep { color: rgba(0,0,0,0.12); }
body.light-mode .nav-item:hover { background: rgba(0,0,0,0.05); }
body.light-mode .nav-item.active { background: rgba(16,185,129,0.1); box-shadow: inset 3px 0 0 var(--accent-primary); }
body.light-mode .market-card { background: linear-gradient(155deg,rgba(255,255,255,0.98),rgba(248,250,252,0.95)); }
body.light-mode .stock-table tbody tr:hover { background: rgba(16,185,129,0.03); }
body.light-mode .stock-table td { border-bottom-color: rgba(0,0,0,0.05); }
body.light-mode .modal-overlay { background: rgba(0,0,0,0.45); }
body.light-mode .modal { background: linear-gradient(160deg,rgba(255,255,255,0.99),rgba(248,250,252,0.99)); }
body.light-mode .search-dropdown { background: rgba(255,255,255,0.98); box-shadow: 0 12px 40px rgba(0,0,0,0.15); }
body.light-mode .search-item:hover { background: rgba(0,0,0,0.04); }
body.light-mode input, body.light-mode textarea, body.light-mode select { color: var(--text-main); }
body.light-mode input::placeholder { color: var(--text-muted); }
body.light-mode .nav-group-label { color: #9aa5b4; }

/* ═══════════════════════════════════════════════════════════
   AUTH SYSTEM — Login / Signup / OTP / Forgot Password
   ═══════════════════════════════════════════════════════════ */

/* Header login button */
.nt-auth-login-btn {
    display: flex; align-items: center; gap: 6px;
    background: var(--accent-primary); color: #fff;
    border: none; border-radius: var(--radius-md); padding: 7px 14px;
    font-size: 12.5px; font-weight: 700; cursor: pointer;
    transition: var(--transition); font-family: var(--font-family);
    box-shadow: 0 0 14px rgba(16,185,129,0.25);
}
.nt-auth-login-btn:hover { background: var(--accent-primary-hover); transform: translateY(-1px); }

/* User chip (logged-in) */
.nt-user-menu-wrap { position: relative; }
.nt-user-chip {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.05); border: 1px solid var(--border-color);
    border-radius: 50px; padding: 4px 12px 4px 4px;
    cursor: pointer; color: var(--text-main); font-size: 13px; font-weight: 600;
    transition: var(--transition); font-family: var(--font-family);
}
.nt-user-chip:hover { background: rgba(255,255,255,0.09); }
.nt-user-avatar-initials {
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-primary), #059669);
    display: flex; align-items: center; justify-content: center;
    font-size: 10.5px; font-weight: 800; color: #fff; flex-shrink: 0;
}

/* User dropdown */
.nt-user-dropdown {
    position: absolute; right: 0; top: calc(100% + 10px);
    background: rgba(10,14,22,0.98); border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg); min-width: 240px; z-index: 2000;
    box-shadow: var(--shadow-lg); backdrop-filter: blur(24px);
    animation: ntDropIn .15s ease;
}
@keyframes ntDropIn { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
.nt-ud-header { display: flex; align-items: center; gap: 12px; padding: 16px; background: rgba(16,185,129,0.05); border-bottom: 1px solid var(--border-color); }
.nt-ud-initials { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg,var(--accent-primary),#059669); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff; flex-shrink: 0; }
.nt-ud-name  { font-size: 14px; font-weight: 700; color: var(--text-main); }
.nt-ud-email { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.nt-ud-id    { display: flex; align-items: center; gap: 7px; padding: 9px 16px; font-size: 11.5px; font-weight: 600; color: var(--accent-primary); background: rgba(16,185,129,0.04); border-bottom: 1px solid var(--border-color); font-family: var(--font-mono); }
.nt-ud-divider { height: 1px; background: var(--border-color); }
.nt-ud-item  { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 16px; background: none; border: none; cursor: pointer; color: var(--text-main); font-size: 13px; font-family: var(--font-family); transition: background .12s; text-align: left; }
.nt-ud-item:hover { background: rgba(255,255,255,0.04); }
.nt-ud-logout { color: #f87171 !important; }
.nt-ud-logout:hover { background: rgba(248,113,113,0.07) !important; }

/* Auth Modal Overlay */
.nt-auth-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.75); backdrop-filter: blur(12px);
    z-index: 9999; align-items: center; justify-content: center;
}
.nt-auth-overlay.open { display: flex; animation: ntFadeIn .18s ease; }
@keyframes ntFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Modal Card */
.nt-auth-modal {
    background: linear-gradient(160deg, rgba(12,17,28,0.99), rgba(7,9,15,0.99));
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xl); width: 410px; max-width: calc(100vw - 32px);
    padding: 28px 28px 24px; position: relative;
    box-shadow: var(--shadow-lg);
    animation: ntSlideUp .2s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes ntSlideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* Tabs */
.nt-auth-tabs { display: flex; gap: 3px; background: rgba(255,255,255,0.04); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 3px; margin-bottom: 22px; }
.nt-auth-tab  { flex: 1; border: none; background: none; color: var(--text-muted); border-radius: 7px; padding: 8px; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: var(--font-family); transition: var(--transition); }
.nt-auth-tab.active { background: var(--accent-primary); color: #fff; }
.nt-auth-close { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,0.06); border: none; color: var(--text-muted); width: 28px; height: 28px; border-radius: 50%; font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); line-height: 1; }
.nt-auth-close:hover { background: rgba(255,255,255,0.12); color: var(--text-main); }

/* Brand */
.nt-auth-brand { text-align: center; margin-bottom: 22px; }
.nt-auth-brand h2 { font-size: 19px; font-weight: 800; font-family: var(--font-heading); color: var(--text-main); margin: 10px 0 5px; }
.nt-auth-brand p  { font-size: 13px; color: var(--text-muted); }
.nt-otp-icon { font-size: 34px; line-height: 1; }

/* Fields */
.nt-auth-field { margin-bottom: 14px; }
.nt-auth-field label { display: block; font-size: 11.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.nt-auth-field input {
    width: 100%; background: var(--bg-input); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); padding: 10px 13px; color: var(--text-main);
    font-size: 13.5px; font-family: var(--font-family); outline: none;
    transition: border-color .18s; box-sizing: border-box;
}
.nt-auth-field input:focus { border-color: var(--accent-primary); background: rgba(16,185,129,0.04); }
.nt-auth-pwd-wrap { position: relative; }
.nt-auth-pwd-wrap input { padding-right: 40px; }
.nt-auth-eye { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 4px; display: flex; }
.nt-auth-eye:hover { color: var(--text-main); }

/* Password strength */
.nt-auth-pwd-strength { height: 3px; background: rgba(255,255,255,0.07); border-radius: 3px; margin: -6px 0 12px; overflow: hidden; }
.nt-auth-pwd-fill { height: 100%; width: 0; border-radius: 3px; transition: width .3s, background .3s; }

/* Submit */
.nt-auth-submit { width: 100%; background: var(--accent-primary); color: #fff; border: none; border-radius: var(--radius-md); padding: 12px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: var(--font-family); transition: var(--transition); display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 4px; box-shadow: 0 0 20px rgba(16,185,129,0.2); }
.nt-auth-submit:hover { background: var(--accent-primary-hover); transform: translateY(-1px); }
.nt-auth-submit:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* Spinner */
.nt-auth-spinner { width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: ntSpin .7s linear infinite; }
@keyframes ntSpin { to { transform: rotate(360deg); } }

/* Error */
.nt-auth-error { background: rgba(248,113,113,0.09); border: 1px solid rgba(248,113,113,0.3); color: #fca5a5; border-radius: var(--radius-sm); padding: 9px 12px; font-size: 12.5px; margin-bottom: 12px; }
.nt-auth-link { text-align: center; margin-top: 14px; font-size: 13px; }
.nt-auth-link a { color: var(--accent-primary); text-decoration: none; font-weight: 600; }
.nt-auth-switch { text-align: center; font-size: 13px; color: var(--text-muted); margin-top: 14px; }
.nt-auth-switch a { color: var(--accent-primary); text-decoration: none; font-weight: 600; }

/* OTP digits */
.nt-otp-boxes { display: flex; gap: 8px; justify-content: center; margin-bottom: 18px; }
.nt-otp-digit {
    width: 46px; height: 54px; text-align: center; font-size: 22px; font-weight: 800;
    background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-md);
    color: var(--accent-primary); font-family: var(--font-mono); outline: none;
    transition: border-color .18s, background .18s;
}
.nt-otp-digit:focus { border-color: var(--accent-primary); background: rgba(16,185,129,0.06); }
.nt-otp-countdown { font-size: 12px; color: var(--text-muted); margin-left: 6px; }

/* ═══════════════════════════════════════════════════════════
   GLOBAL VIBRANCY OVERRIDES
   Make every panel / section feel alive with the vivid bg
   ═══════════════════════════════════════════════════════════ */

/* All glass-tinted section panels (portfolio, orders, news, etc.) */
.portfolio-section,
.ipo-section,
.all-stocks-section,
.mutual-funds-section,
.journal-section,
.orders-section,
.watchlist-section,
.calculator-section,
.settings-section,
.news-section {
    background: rgba(6, 16, 40, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-lg);
    padding: 22px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.07);
}

/* Gainers / Losers panels */
.gl-panel {
    background: rgba(6, 16, 40, 0.65) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* IPO cards */
.ipo-card {
    background: rgba(8, 20, 50, 0.7);
    border: 1px solid rgba(255,255,255,0.09);
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
.ipo-card:hover {
    border-color: rgba(16,185,129,0.25);
    box-shadow: 0 10px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(16,185,129,0.15);
}

/* News cards */
.news-card {
    background: rgba(8, 20, 50, 0.65) !important;
    border-color: rgba(255,255,255,0.08) !important;
}
.news-card:hover {
    background: rgba(10, 26, 60, 0.8) !important;
    border-color: rgba(16,185,129,0.2) !important;
}

/* Stat cards across portfolio / journal / calculator */
.port-stat-card,
.journal-stat-card,
.calc-result-card,
.wi-result-card,
.div-stat-card,
.pnl-card,
.funds-card,
.funds-detail-card,
.gm-card {
    background: rgba(8, 20, 50, 0.7);
    border: 1px solid rgba(255,255,255,0.09);
    box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}

/* Modal body glass */
.modal {
    background: linear-gradient(160deg, rgba(6,16,40,0.98) 0%, rgba(4,10,26,0.99) 100%) !important;
}

/* Settings cards */
.settings-card {
    background: rgba(8, 20, 50, 0.65);
    border-color: rgba(255,255,255,0.08);
}

/* Stat items / fund meta */
.stat-item, .fund-meta-item {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}

/* Order summary, sip preview */
.order-summary-box,
.sip-preview {
    background: rgba(6,16,40,0.8);
    border-color: rgba(255,255,255,0.08);
}

/* Table header row background */
.stock-table th {
    background: rgba(4, 10, 26, 0.6) !important;
    backdrop-filter: blur(10px);
}

/* Section tag glow */
.section-tag {
    box-shadow: 0 0 10px rgba(16,185,129,0.2);
}

/* Primary button glow */
.btn-primary,
.nt-primary-btn,
.nt-auth-submit,
.nt-auth-login-btn {
    box-shadow: 0 4px 20px rgba(16,185,129,0.3), 0 0 0 1px rgba(16,185,129,0.2) !important;
}
.btn-primary:hover,
.nt-primary-btn:hover {
    box-shadow: 0 8px 28px rgba(16,185,129,0.45), 0 0 0 1px rgba(16,185,129,0.3) !important;
}

/* Global markets cards */
.gm-card {
    background: rgba(8, 20, 50, 0.72);
    border: 1px solid rgba(255,255,255,0.09);
}
.gm-card:hover {
    border-color: rgba(16,185,129,0.2);
    box-shadow: 0 10px 28px rgba(0,0,0,0.45);
}

/* Options chain, FII, earnings tables — header background */
.oc-table thead th,
.fno-table thead th,
.earn-table th,
.fii-table th {
    background: rgba(4, 10, 26, 0.8) !important;
}

/* Market pulse cards */
.pulse-stat-card,
.pulse-52w-card,
.fg-metric-box,
.fii-sum-card {
    background: rgba(8, 20, 50, 0.7) !important;
    border-color: rgba(255,255,255,0.09) !important;
}

/* Screener Pro filter panel */
.screener-pro-filters {
    background: rgba(6, 16, 40, 0.65);
    border-color: rgba(255,255,255,0.08);
}

/* Calendar event cards */
.calendar-event-card {
    background: rgba(8, 20, 50, 0.65);
    border-color: rgba(255,255,255,0.08) !important;
}
.cal-today {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 1px rgba(16,185,129,0.25), 0 0 20px rgba(16,185,129,0.1);
}

/* Fear & greed widget */
.fg-premium-widget {
    background: rgba(8, 20, 50, 0.7) !important;
    border-color: rgba(255,255,255,0.09) !important;
}

/* Search dropdown */
.search-dropdown {
    background: rgba(4, 10, 26, 0.98) !important;
    border-color: rgba(255,255,255,0.12) !important;
}

/* Sentiment indicators */
.sentiment-indicator-row {
    background: rgba(8, 20, 50, 0.7) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* ── LIGHT MODE: reset vibrancy overrides ── */
body.light-mode .market-card,
body.light-mode .gl-panel,
body.light-mode .ipo-card,
body.light-mode .news-card,
body.light-mode .port-stat-card,
body.light-mode .pnl-card,
body.light-mode .funds-card,
body.light-mode .gm-card,
body.light-mode .screener-section,
body.light-mode .portfolio-section,
body.light-mode .all-stocks-section,
body.light-mode .ipo-section,
body.light-mode .settings-card,
body.light-mode .stat-item,
body.light-mode .pulse-stat-card,
body.light-mode .fg-metric-box,
body.light-mode .calendar-event-card {
    background: rgba(255,255,255,0.9);
    border-color: rgba(0,0,0,0.08);
    backdrop-filter: blur(10px);
}
body.light-mode .stock-table th { background: rgba(240,244,248,0.95) !important; }
body.light-mode .section-title { background: none; -webkit-text-fill-color: var(--text-main); color: var(--text-main); }
body.light-mode .card-price { color: var(--text-main); text-shadow: none; }
body.light-mode body::before { display: none; }

/* ═══════════════════════════════════════════════════════════
   GLOBAL POLISH — final layer of refinement
═══════════════════════════════════════════════════════════ */

/* Glow text utility */
.glow-green { color:var(--positive)!important; text-shadow:0 0 16px rgba(16,185,129,0.5); }
.glow-red   { color:var(--negative)!important; text-shadow:0 0 16px rgba(239,68,68,0.5); }

/* Number inputs — monospace everywhere */
.price-text, .change-text,
.modal-price, .card-price,
.pnl-card-val, .funds-card-val,
.port-stat-card strong,
.order-stat b,
.balance-pill,
.oc-meta-val { font-family:var(--font-mono)!important; }

/* Elevated cards across the app */
.port-stat-card,
.calc-result-card,
.wi-result-card,
.pnl-card,
.funds-card,
.div-stat-card,
.journal-stat-card {
  background:rgba(255,255,255,0.05)!important;
  border:1px solid rgba(255,255,255,0.09)!important;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 2px 14px rgba(0,0,0,0.35)!important;
  transition:var(--transition-slow);
}
.port-stat-card:hover,
.pnl-card:hover,
.funds-card:hover {
  background:rgba(255,255,255,0.07)!important;
  transform:translateY(-2px);
}

/* News cards */
.news-card {
  background:rgba(255,255,255,0.045)!important;
  backdrop-filter:blur(30px)!important;
  border:1px solid rgba(255,255,255,0.09)!important;
  transition:var(--transition-slow)!important;
}
.news-card:hover {
  background:rgba(255,255,255,0.07)!important;
  border-color:rgba(16,185,129,0.2)!important;
  transform:translateY(-3px)!important;
  box-shadow:0 12px 36px rgba(0,0,0,0.5)!important;
}

/* IPO cards */
.ipo-card {
  background:rgba(255,255,255,0.05)!important;
  backdrop-filter:blur(30px)!important;
  border:1px solid rgba(255,255,255,0.09)!important;
}
.ipo-card:hover {
  border-color:rgba(16,185,129,0.22)!important;
  box-shadow:0 14px 40px rgba(0,0,0,0.5)!important;
  transform:translateY(-4px)!important;
}

/* Global markets */
.gm-card {
  background:rgba(255,255,255,0.05)!important;
  backdrop-filter:blur(24px)!important;
  border:1px solid rgba(255,255,255,0.09)!important;
}
.gm-card:hover {
  border-color:rgba(16,185,129,0.2)!important;
  transform:translateY(-3px)!important;
}

/* Settings cards */
.settings-card, .fg-premium-widget {
  background:rgba(255,255,255,0.045)!important;
  backdrop-filter:blur(30px)!important;
  border:1px solid rgba(255,255,255,0.09)!important;
}

/* Modals */
.modal {
  background:rgba(5,13,28,0.97)!important;
  border:1px solid rgba(255,255,255,0.14)!important;
  box-shadow:0 32px 80px rgba(0,0,0,0.75)!important;
}

/* Stat items */
.stat-item, .fund-meta-item {
  background:rgba(255,255,255,0.05)!important;
  border-color:rgba(255,255,255,0.09)!important;
}

/* Smooth scrollbar on all panels */
.nav-menu,
.modal-body,
.main-content { scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.1) transparent; }

/* All icon sizes in nav are consistent */
.nav-item [data-lucide] { width:15px!important; height:15px!important; }

/* Search dropdown */
.search-dropdown {
  background:rgba(5,10,28,0.97)!important;
  border:1px solid rgba(255,255,255,0.14)!important;
  box-shadow:0 24px 64px rgba(0,0,0,0.75)!important;
}

/* Positive/negative — make them vivid throughout */
.positive-text { color:var(--positive)!important; }
.negative-text { color:var(--negative)!important; }

/* Primary button — consistent emerald glow */
.btn-primary,
.nt-primary-btn,
.invest-tab.active,
.order-tab.active,
.calc-tab.active,
.feature-tab.active,
.as-sort-btn.active,
.hm-sector-tab.active,
.global-cat-tab.active {
  background:var(--accent-primary)!important;
  color:#042012!important;
  box-shadow:0 4px 20px rgba(16,185,129,0.3)!important;
}

/* Input focus glow */
input:focus, select:focus, textarea:focus {
  border-color:var(--accent-primary)!important;
  outline:none!important;
  box-shadow:0 0 0 3px rgba(16,185,129,0.12)!important;
}

/* Light mode fixes */
body.light-mode .market-card { background:rgba(255,255,255,0.92)!important; backdrop-filter:blur(20px)!important; }
body.light-mode .gl-panel, body.light-mode .screener-section,
body.light-mode .all-stocks-section, body.light-mode .portfolio-section {
  background:rgba(255,255,255,0.9)!important;
  border-color:rgba(0,0,0,0.08)!important;
}
body.light-mode .positive-text { color:#059669!important; }
body.light-mode .negative-text { color:#dc2626!important; }
body.light-mode .section-title { background:none!important; -webkit-text-fill-color:#1a202c!important; }

/* ── Tax P&L Report ─────────────────────────────────────── */
.tax-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
@media (max-width: 900px) { .tax-summary-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tax-summary-grid { grid-template-columns: 1fr; } }
.tax-summary-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  display: flex; align-items: center; gap: 12px;
}
.tsc-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(16,185,129,0.10);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-primary); flex-shrink: 0;
}
.tsc-val   { font-size: 18px; font-weight: 700; font-family: var(--font-heading); }
.tsc-label { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.tax-breakdown-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px;
}
@media (max-width: 600px) { .tax-breakdown-grid { grid-template-columns: 1fr; } }
.tax-breakdown-card {
  background: var(--bg-panel); border: 1px solid var(--border-color);
  border-radius: 12px; padding: 16px;
}
.tbk-title { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }
.tbk-row   { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--border-color); color: var(--text-muted); }
.tbk-total { color: var(--text-main) !important; font-weight: 700; font-size: 14px; border-bottom: none; padding-top: 10px; }
.tax-gain-badge            { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; }
.tax-gain-badge.stcg       { background: rgba(239,68,68,.14);  color: #ef4444; }
.tax-gain-badge.ltcg       { background: rgba(16,185,129,.14); color: #10b981; }

/* ── Forex & Commodities ───────────────────────────────── */
.forex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.forex-card {
  background: var(--bg-panel); border: 1px solid var(--border-color);
  border-radius: 12px; padding: 16px;
  display: flex; align-items: center; gap: 12px; transition: var(--transition);
}
.forex-card:hover { border-color: rgba(16,185,129,.4); transform: translateY(-2px); }
.forex-flag  { font-size: 28px; flex-shrink: 0; }
.forex-info  { flex: 1; }
.forex-name  { font-size: 12px; color: var(--text-muted); margin-bottom: 2px; }
.forex-price { font-size: 18px; font-weight: 700; font-family: var(--font-heading); }
.forex-converter {
  background: var(--bg-panel); border: 1px solid var(--border-color);
  border-radius: 12px; padding: 18px 20px; margin-top: 4px;
}

/* ── Portfolio Analytics ───────────────────────────────── */
.analytics-kpi-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
}
@media (max-width: 1100px) { .analytics-kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .analytics-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.analytics-kpi-card {
  background: var(--bg-panel); border: 1px solid var(--border-color);
  border-radius: 12px; padding: 14px; display: flex; align-items: center; gap: 10px;
}
.akpi-icon {
  width: 36px; height: 36px; border-radius: 8px;
  background: rgba(16,185,129,.10);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-primary); flex-shrink: 0;
}
.akpi-val   { font-size: 15px; font-weight: 700; font-family: var(--font-heading); }
.akpi-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.analytics-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 768px) { .analytics-two-col { grid-template-columns: 1fr; } }
.analytics-panel { background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 12px; padding: 16px; }
.monthly-bar-chart { display: flex; align-items: flex-end; gap: 6px; height: 130px; padding-bottom: 34px; position: relative; }
.monthly-bar-col   { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.monthly-bar-track { width: 100%; height: 80px; display: flex; align-items: flex-end; margin-bottom: 4px; }
.monthly-bar-fill  { width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; transition: height .4s ease; }
.monthly-bar-label { font-size: 10px; color: var(--text-muted); text-align: center; margin-top: 2px; }
.monthly-bar-val   { font-size: 9px; text-align: center; margin-top: 2px; white-space: nowrap; }
.analytics-donut {
  width: 100px; height: 100px; border-radius: 50%; flex-shrink: 0; position: relative;
}
.analytics-donut::after {
  content: ''; position: absolute; top: 18%; left: 18%; width: 64%; height: 64%;
  border-radius: 50%; background: var(--bg-dark);
}

/* ── Investment Goals ──────────────────────────────────── */
.goals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 16px;
}
.goal-card {
  background: var(--bg-panel); border: 1px solid var(--border-color);
  border-radius: 16px; padding: 20px; transition: var(--transition);
}
.goal-card:hover { border-color: rgba(255,255,255,.18); transform: translateY(-2px); }
.goal-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.goal-icon   { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.goal-name   { font-size: 15px; font-weight: 700; color: var(--text-main); }
.goal-type   { font-size: 11px; font-weight: 700; margin-top: 2px; text-transform: uppercase; letter-spacing: .05em; }
.goal-progress-track { height: 8px; background: rgba(255,255,255,.07); border-radius: 4px; overflow: hidden; }
.goal-progress-fill  { height: 100%; border-radius: 4px; transition: width .5s ease; }
.goal-stats  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 12px; }
.gstat       { background: rgba(255,255,255,.03); border: 1px solid var(--border-color); border-radius: 8px; padding: 8px; text-align: center; }
.gstat-val   { font-size: 13px; font-weight: 700; color: var(--text-main); }
.gstat-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.goal-on-track  { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; background: rgba(16,185,129,.14); color: var(--positive); }
.goal-off-track { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; background: rgba(239,68,68,.14);  color: var(--negative); }

/* hidden utility — must be absolute last */
.hidden { display: none !important; }