/* ========================================================================
   SEHRAI TRADING TERMINAL — DUAL THEME (LIGHT / DARK / SYSTEM) DESIGN SYSTEM
   Modern Responsive Financial Terminal with 3-Tab Right Panel & TradingView Charts
   ======================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

html {
  font-size: 15px;
  /* Optimal balanced baseline font scale for high-density financial terminal */
  -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after,
body,
button,
input,
select,
textarea,
table,
th,
td,
code,
pre,
kbd,
samp {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Default Dark Theme Tokens */
:root {
  --bg-primary: #080b11;
  --bg-secondary: #0f141f;
  --bg-surface-2: var(--bg-secondary);
  --bg-card: rgba(18, 24, 38, 0.78);
  --bg-card-hover: rgba(26, 36, 56, 0.88);
  --bg-glass: rgba(15, 20, 31, 0.75);

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-active: rgba(0, 242, 254, 0.45);

  --text-primary: #f8fafc;
  --text-main: var(--text-primary);
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;

  --color-bullish: #00e676;
  --color-bullish-bg: rgba(0, 230, 118, 0.12);
  --color-bearish: #ff3366;
  --color-bearish-bg: rgba(255, 51, 102, 0.12);
  --color-neutral: #94a3b8;
  --color-neutral-bg: rgba(148, 163, 184, 0.12);
  --color-accent: #00d2ff;
  --color-accent-grad: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
  --color-accent-text: #040d1a;
  --color-gold: #ffb300;
  --color-purple: #b388ff;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-numbers: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;


  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 9999px;

  --shadow-card: 0 8px 32px 0 rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 15px rgba(0, 242, 254, 0.25);

  --header-height: 60px;
  --bottom-nav-height: 65px;
}

/* ================= EXPLICIT LIGHT MODE & SYSTEM PREFERS LIGHT ================= */
[data-theme="light"],
[data-theme="system"] {
  @media (prefers-color-scheme: light) {
    --bg-primary: #f8fafc;
    --bg-secondary: #f1f5f9;
    --bg-card: rgba(255, 255, 255, 0.92);
    --bg-card-hover: #ffffff;
    --bg-glass: rgba(255, 255, 255, 0.85);

    --border-subtle: #e2e8f0;
    --border-active: #0284c7;

    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;

    --color-bullish: #059669;
    --color-bullish-bg: rgba(5, 150, 105, 0.12);
    --color-bearish: #dc2626;
    --color-bearish-bg: rgba(220, 38, 38, 0.12);
    --color-neutral: #64748b;
    --color-neutral-bg: rgba(100, 116, 139, 0.12);
    --color-accent: #0284c7;
    --color-accent-grad: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
    --color-accent-text: #ffffff;

    --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.08);
    --shadow-glow: 0 0 12px rgba(2, 132, 199, 0.2);
  }
}

[data-theme="light"] {
  --bg-primary: #f8fafc;
  --bg-secondary: #f1f5f9;
  --bg-card: rgba(255, 255, 255, 0.92);
  --bg-card-hover: #ffffff;
  --bg-glass: rgba(255, 255, 255, 0.85);

  --border-subtle: #e2e8f0;
  --border-active: #0284c7;

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;

  --color-bullish: #059669;
  --color-bullish-bg: rgba(5, 150, 105, 0.12);
  --color-bearish: #dc2626;
  --color-bearish-bg: rgba(220, 38, 38, 0.12);
  --color-neutral: #64748b;
  --color-neutral-bg: rgba(100, 116, 139, 0.12);
  --color-accent: #0284c7;
  --color-accent-grad: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
  --color-accent-text: #ffffff;

  --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.08);
  --shadow-glow: 0 0 12px rgba(2, 132, 199, 0.2);
}

/* ========================================================================
   TOP 10 PROFESSIONAL COLOR PALETTES (LIGHT & DARK MODE COMPATIBLE)
   Inspired by Figma Resource Library & Modern Institutional Design
   ======================================================================== */

/* 1. CHOCOLATE TRUFFLE / DESERT DUNE (Signature Desert Palette) */
/* Swatches: #713600 (Cocoa), #C05800 (Burnt Amber), #FDFBD4 (Desert Sand/Cream), #38240D (Espresso) */
[data-palette="chocolate"] {
  --bg-primary: #18110b;
  --bg-secondary: #24180e;
  --bg-card: rgba(44, 30, 18, 0.88);
  --bg-card-hover: rgba(58, 40, 24, 0.95);
  --bg-glass: rgba(36, 24, 14, 0.85);
  --border-subtle: rgba(253, 251, 212, 0.12);
  --border-active: #c05800;
  --text-primary: #fdfbd4;
  --text-secondary: #d6c8b0;
  --text-muted: #968470;
  --color-accent: #c05800;
  --color-accent-grad: linear-gradient(135deg, #c05800 0%, #d97706 100%);
  --color-accent-text: #ffffff;
  --shadow-card: 0 8px 32px 0 rgba(16, 9, 3, 0.65);
  --shadow-glow: 0 0 16px rgba(192, 88, 0, 0.35);
}

[data-palette="chocolate"][data-theme="light"],
[data-palette="chocolate"][data-theme="system"] {
  @media (prefers-color-scheme: light) {
    --bg-primary: #fbf8ee;
    --bg-secondary: #f3edd7;
    --bg-card: rgba(255, 255, 255, 0.95);
    --bg-card-hover: #ffffff;
    --bg-glass: rgba(251, 248, 238, 0.9);
    --border-subtle: #e5dac4;
    --border-active: #c05800;
    --text-primary: #38240d;
    --text-secondary: #713600;
    --text-muted: #9a7450;
    --color-accent: #c05800;
    --color-accent-grad: linear-gradient(135deg, #c05800 0%, #d97706 100%);
    --color-accent-text: #ffffff;
    --shadow-card: 0 4px 20px -2px rgba(56, 36, 13, 0.12);
    --shadow-glow: 0 0 12px rgba(192, 88, 0, 0.25);
  }
}

[data-palette="chocolate"][data-theme="light"] {
  --bg-primary: #fbf8ee;
  --bg-secondary: #f3edd7;
  --bg-card: rgba(255, 255, 255, 0.95);
  --bg-card-hover: #ffffff;
  --bg-glass: rgba(251, 248, 238, 0.9);
  --border-subtle: #e5dac4;
  --border-active: #c05800;
  --text-primary: #38240d;
  --text-secondary: #713600;
  --text-muted: #9a7450;
  --color-accent: #c05800;
  --color-accent-grad: linear-gradient(135deg, #c05800 0%, #d97706 100%);
  --color-accent-text: #ffffff;
  --shadow-card: 0 4px 20px -2px rgba(56, 36, 13, 0.12);
  --shadow-glow: 0 0 12px rgba(192, 88, 0, 0.25);
}

/* 2. NORDIC OBSIDIAN (Default Cyber Cyan) */
/* Swatches: #080B11, #0F141F, #00F2FE, #F3F4F6 */
[data-palette="nordic"] {
  --bg-primary: #080b11;
  --bg-secondary: #0f141f;
  --bg-card: rgba(18, 24, 38, 0.78);
  --bg-card-hover: rgba(26, 36, 56, 0.88);
  --bg-glass: rgba(15, 20, 31, 0.75);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-active: rgba(0, 242, 254, 0.45);
  --text-primary: #f3f4f6;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;
  --color-accent: #00d2ff;
  --color-accent-grad: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
  --color-accent-text: #040d1a;
  --shadow-card: 0 8px 32px 0 rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 15px rgba(0, 242, 254, 0.25);
}

[data-palette="nordic"][data-theme="light"] {
  --bg-primary: #f8fafc;
  --bg-secondary: #f1f5f9;
  --bg-card: rgba(255, 255, 255, 0.92);
  --bg-card-hover: #ffffff;
  --bg-glass: rgba(255, 255, 255, 0.85);
  --border-subtle: #e2e8f0;
  --border-active: #0284c7;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --color-accent: #0284c7;
  --color-accent-grad: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
  --color-accent-text: #ffffff;
  --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.08);
  --shadow-glow: 0 0 12px rgba(2, 132, 199, 0.2);
}

/* 3. EMERALD OASIS (Pine Forest & Jade) */
/* Swatches: #07130E, #0E231B, #10B981, #D1FAE5 */
[data-palette="emerald"] {
  --bg-primary: #07130e;
  --bg-secondary: #0d2018;
  --bg-card: rgba(16, 38, 29, 0.84);
  --bg-card-hover: rgba(22, 51, 39, 0.94);
  --bg-glass: rgba(13, 32, 24, 0.85);
  --border-subtle: rgba(16, 185, 129, 0.15);
  --border-active: #10b981;
  --text-primary: #ecfdf5;
  --text-secondary: #a7f3d0;
  --text-muted: #6ee7b7;
  --color-accent: #10b981;
  --color-accent-grad: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  --color-accent-text: #ffffff;
  --shadow-card: 0 8px 32px 0 rgba(4, 18, 12, 0.55);
  --shadow-glow: 0 0 15px rgba(16, 185, 129, 0.3);
}

[data-palette="emerald"][data-theme="light"] {
  --bg-primary: #f0fdf4;
  --bg-secondary: #dcfce7;
  --bg-card: rgba(255, 255, 255, 0.95);
  --bg-card-hover: #ffffff;
  --bg-glass: rgba(240, 253, 244, 0.88);
  --border-subtle: #bbf7d0;
  --border-active: #059669;
  --text-primary: #064e3b;
  --text-secondary: #047857;
  --text-muted: #059669;
  --color-accent: #059669;
  --color-accent-grad: linear-gradient(135deg, #059669 0%, #10b981 100%);
  --color-accent-text: #ffffff;
  --shadow-card: 0 4px 20px -2px rgba(6, 78, 59, 0.1);
  --shadow-glow: 0 0 12px rgba(5, 150, 105, 0.2);
}

/* 4. MIDNIGHT SAPPHIRE (Wall Street Blue) */
/* Swatches: #060B17, #0C152A, #2563EB, #DBEAFE */
[data-palette="sapphire"] {
  --bg-primary: #060b17;
  --bg-secondary: #0c152a;
  --bg-card: rgba(15, 27, 54, 0.84);
  --bg-card-hover: rgba(22, 38, 76, 0.94);
  --bg-glass: rgba(12, 21, 42, 0.85);
  --border-subtle: rgba(37, 99, 235, 0.18);
  --border-active: #3b82f6;
  --text-primary: #eff6ff;
  --text-secondary: #bfdbfe;
  --text-muted: #60a5fa;
  --color-accent: #3b82f6;
  --color-accent-grad: linear-gradient(135deg, #2563eb 0%, #60a5fa 100%);
  --color-accent-text: #ffffff;
  --shadow-card: 0 8px 32px 0 rgba(2, 6, 18, 0.6);
  --shadow-glow: 0 0 15px rgba(59, 130, 246, 0.3);
}

[data-palette="sapphire"][data-theme="light"] {
  --bg-primary: #f0f7ff;
  --bg-secondary: #e0eefe;
  --bg-card: rgba(255, 255, 255, 0.95);
  --bg-card-hover: #ffffff;
  --bg-glass: rgba(240, 247, 255, 0.88);
  --border-subtle: #bfdbfe;
  --border-active: #1d4ed8;
  --text-primary: #1e3a8a;
  --text-secondary: #1d4ed8;
  --text-muted: #3b82f6;
  --color-accent: #1d4ed8;
  --color-accent-grad: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
  --color-accent-text: #ffffff;
  --shadow-card: 0 4px 20px -2px rgba(30, 58, 138, 0.1);
  --shadow-glow: 0 0 12px rgba(29, 78, 216, 0.2);
}

/* 5. AMETHYST ROYAL (Velvet Nebula) */
/* Swatches: #11081B, #1A0E28, #8B5CF6, #EDE9FE */
[data-palette="amethyst"] {
  --bg-primary: #11081b;
  --bg-secondary: #1a0e28;
  --bg-card: rgba(34, 18, 54, 0.84);
  --bg-card-hover: rgba(46, 25, 72, 0.94);
  --bg-glass: rgba(26, 14, 40, 0.85);
  --border-subtle: rgba(168, 85, 247, 0.18);
  --border-active: #a855f7;
  --text-primary: #faf5ff;
  --text-secondary: #e9d5ff;
  --text-muted: #c084fc;
  --color-accent: #a855f7;
  --color-accent-grad: linear-gradient(135deg, #8b5cf6 0%, #c084fc 100%);
  --color-accent-text: #ffffff;
  --shadow-card: 0 8px 32px 0 rgba(10, 4, 18, 0.6);
  --shadow-glow: 0 0 15px rgba(168, 85, 247, 0.3);
}

[data-palette="amethyst"][data-theme="light"] {
  --bg-primary: #faf5ff;
  --bg-secondary: #f3e8ff;
  --bg-card: rgba(255, 255, 255, 0.95);
  --bg-card-hover: #ffffff;
  --bg-glass: rgba(250, 245, 255, 0.88);
  --border-subtle: #e9d5ff;
  --border-active: #7e22ce;
  --text-primary: #581c87;
  --text-secondary: #7e22ce;
  --text-muted: #a855f7;
  --color-accent: #7e22ce;
  --color-accent-grad: linear-gradient(135deg, #7e22ce 0%, #a855f7 100%);
  --color-accent-text: #ffffff;
  --shadow-card: 0 4px 20px -2px rgba(88, 28, 135, 0.1);
  --shadow-glow: 0 0 12px rgba(126, 34, 206, 0.2);
}

/* 6. SUNSET TERRACOTTA (Tuscan Earth) */
/* Swatches: #180E0A, #241610, #EA580C, #FFEDD5 */
[data-palette="terracotta"] {
  --bg-primary: #180e0a;
  --bg-secondary: #241610;
  --bg-card: rgba(48, 28, 20, 0.84);
  --bg-card-hover: rgba(64, 38, 28, 0.94);
  --bg-glass: rgba(36, 22, 16, 0.85);
  --border-subtle: rgba(249, 115, 22, 0.18);
  --border-active: #f97316;
  --text-primary: #fff7ed;
  --text-secondary: #ffedd5;
  --text-muted: #fdba74;
  --color-accent: #f97316;
  --color-accent-grad: linear-gradient(135deg, #ea580c 0%, #fb923c 100%);
  --color-accent-text: #ffffff;
  --shadow-card: 0 8px 32px 0 rgba(18, 8, 4, 0.6);
  --shadow-glow: 0 0 15px rgba(249, 115, 22, 0.3);
}

[data-palette="terracotta"][data-theme="light"] {
  --bg-primary: #fff7ed;
  --bg-secondary: #ffedd5;
  --bg-card: rgba(255, 255, 255, 0.95);
  --bg-card-hover: #ffffff;
  --bg-glass: rgba(255, 247, 237, 0.88);
  --border-subtle: #fed7aa;
  --border-active: #c2410c;
  --text-primary: #7c2d12;
  --text-secondary: #9a3412;
  --text-muted: #ea580c;
  --color-accent: #ea580c;
  --color-accent-grad: linear-gradient(135deg, #c2410c 0%, #ea580c 100%);
  --color-accent-text: #ffffff;
  --shadow-card: 0 4px 20px -2px rgba(124, 45, 18, 0.1);
  --shadow-glow: 0 0 12px rgba(234, 88, 12, 0.2);
}

/* 8. ROSE GOLD & CASHMERE */
/* Swatches: #180A11, #24101A, #F43F5E, #FFE4E6 */
[data-palette="rose"] {
  --bg-primary: #180a11;
  --bg-secondary: #24101a;
  --bg-card: rgba(48, 22, 36, 0.84);
  --bg-card-hover: rgba(64, 30, 48, 0.94);
  --bg-glass: rgba(36, 16, 26, 0.85);
  --border-subtle: rgba(244, 63, 94, 0.18);
  --border-active: #fb7185;
  --text-primary: #fff1f2;
  --text-secondary: #fecdd3;
  --text-muted: #fda4af;
  --color-accent: #f43f5e;
  --color-accent-grad: linear-gradient(135deg, #e11d48 0%, #fb7185 100%);
  --color-accent-text: #ffffff;
  --shadow-card: 0 8px 32px 0 rgba(18, 4, 10, 0.6);
  --shadow-glow: 0 0 15px rgba(244, 63, 94, 0.3);
}

[data-palette="rose"][data-theme="light"] {
  --bg-primary: #fff1f2;
  --bg-secondary: #ffe4e6;
  --bg-card: rgba(255, 255, 255, 0.95);
  --bg-card-hover: #ffffff;
  --bg-glass: rgba(255, 241, 242, 0.88);
  --border-subtle: #fecdd3;
  --border-active: #be123c;
  --text-primary: #881337;
  --text-secondary: #9f1239;
  --text-muted: #e11d48;
  --color-accent: #be123c;
  --color-accent-grad: linear-gradient(135deg, #be123c 0%, #f43f5e 100%);
  --color-accent-text: #ffffff;
  --shadow-card: 0 4px 20px -2px rgba(136, 19, 55, 0.1);
  --shadow-glow: 0 0 12px rgba(190, 18, 60, 0.2);
}

/* 9. TOKYO CYBERPUNK (Neon Dusk) */
/* Swatches: #090714, #120E26, #F59E0B, #A855F7 */
[data-palette="cyberpunk"] {
  --bg-primary: #090714;
  --bg-secondary: #120e26;
  --bg-card: rgba(26, 20, 52, 0.84);
  --bg-card-hover: rgba(36, 28, 70, 0.94);
  --bg-glass: rgba(18, 14, 38, 0.85);
  --border-subtle: rgba(168, 85, 247, 0.2);
  --border-active: #f59e0b;
  --text-primary: #fdf4ff;
  --text-secondary: #e879f9;
  --text-muted: #c084fc;
  --color-accent: #f59e0b;
  --color-accent-grad: linear-gradient(135deg, #d946ef 0%, #f59e0b 100%);
  --color-accent-text: #090714;
  --shadow-card: 0 8px 32px 0 rgba(8, 4, 18, 0.65);
  --shadow-glow: 0 0 18px rgba(245, 158, 11, 0.35);
}

[data-palette="cyberpunk"][data-theme="light"] {
  --bg-primary: #fdf4ff;
  --bg-secondary: #fae8ff;
  --bg-card: rgba(255, 255, 255, 0.95);
  --bg-card-hover: #ffffff;
  --bg-glass: rgba(253, 244, 255, 0.88);
  --border-subtle: #f0abfc;
  --border-active: #a21caf;
  --text-primary: #701a75;
  --text-secondary: #86198f;
  --text-muted: #c026d3;
  --color-accent: #c026d3;
  --color-accent-grad: linear-gradient(135deg, #a21caf 0%, #d946ef 100%);
  --color-accent-text: #ffffff;
  --shadow-card: 0 4px 20px -2px rgba(112, 26, 117, 0.1);
  --shadow-glow: 0 0 12px rgba(192, 38, 211, 0.2);
}

/* 10. MONOCHROME SLATE (Minimalist Swiss) */
/* Swatches: #0F0F10, #18181B, #71717A, #FAFAFA */
[data-palette="monochrome"] {
  --bg-primary: #0f0f10;
  --bg-secondary: #18181b;
  --bg-card: rgba(32, 32, 36, 0.86);
  --bg-card-hover: rgba(44, 44, 50, 0.96);
  --bg-glass: rgba(24, 24, 27, 0.85);
  --border-subtle: rgba(255, 255, 255, 0.1);
  --border-active: #a1a1aa;
  --text-primary: #fafafa;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --color-accent: #e4e4e7;
  --color-accent-grad: linear-gradient(135deg, #a1a1aa 0%, #f4f4f5 100%);
  --color-accent-text: #0f0f10;
  --shadow-card: 0 8px 32px 0 rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 14px rgba(255, 255, 255, 0.15);
}

[data-palette="monochrome"][data-theme="light"] {
  --bg-primary: #fafafa;
  --bg-secondary: #f4f4f5;
  --bg-card: rgba(255, 255, 255, 0.95);
  --bg-card-hover: #ffffff;
  --bg-glass: rgba(250, 250, 250, 0.88);
  --border-subtle: #e4e4e7;
  --border-active: #52525b;
  --text-primary: #18181b;
  --text-secondary: #3f3f46;
  --text-muted: #71717a;
  --color-accent: #27272a;
  --color-accent-grad: linear-gradient(135deg, #27272a 0%, #52525b 100%);
  --color-accent-text: #ffffff;
  --shadow-card: 0 4px 20px -2px rgba(24, 24, 27, 0.08);
  --shadow-glow: 0 0 12px rgba(82, 82, 91, 0.2);
}

/* 14. PRO DARK (Classic Bloomberg / Trading Terminal) */
/* Swatches: #0B0F14, #111820, #3B82F6, #E8EDF2 */
[data-palette="pro-dark"] {
  --bg-primary: #0b0f14;
  --bg-secondary: #111820;
  --bg-card: rgba(24, 33, 43, 0.88);
  --bg-card-hover: rgba(34, 46, 60, 0.95);
  --bg-glass: rgba(17, 24, 32, 0.85);
  --border-subtle: rgba(232, 237, 242, 0.12);
  --border-active: #3b82f6;
  --text-primary: #e8edf2;
  --text-secondary: #b0bcc8;
  --text-muted: #8996a3;
  --color-bullish: #22c55e;
  --color-bullish-bg: rgba(34, 197, 94, 0.14);
  --color-bearish: #ef4444;
  --color-bearish-bg: rgba(239, 68, 68, 0.14);
  --color-accent: #3b82f6;
  --color-accent-grad: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
  --color-accent-text: #ffffff;
  --shadow-card: 0 8px 32px 0 rgba(7, 10, 15, 0.7);
  --shadow-glow: 0 0 16px rgba(59, 130, 246, 0.35);
}

[data-palette="pro-dark"][data-theme="light"] {
  --bg-primary: #f6f8fa;
  --bg-secondary: #edf1f5;
  --bg-card: rgba(255, 255, 255, 0.95);
  --bg-card-hover: #ffffff;
  --bg-glass: rgba(246, 248, 250, 0.9);
  --border-subtle: #dbe2ea;
  --border-active: #2563eb;
  --text-primary: #121922;
  --text-secondary: #324253;
  --text-muted: #64748b;
  --color-bullish: #16a34a;
  --color-bullish-bg: rgba(220, 38, 38, 0.12);
  --color-bearish: #dc2626;
  --color-bearish-bg: rgba(220, 38, 38, 0.12);
  --color-accent: #2563eb;
  --color-accent-grad: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  --color-accent-text: #ffffff;
  --shadow-card: 0 4px 20px -2px rgba(18, 25, 34, 0.12);
  --shadow-glow: 0 0 12px rgba(37, 99, 235, 0.25);
}

/* 15. TACTICAL GREEN (Commando / Quant) */
/* Swatches: #0D110D, #151B15, #A3B18A, #E5E9E2 */
[data-palette="tactical-green"] {
  --bg-primary: #0d110d;
  --bg-secondary: #151b15;
  --bg-card: rgba(32, 40, 32, 0.88);
  --bg-card-hover: rgba(44, 54, 44, 0.95);
  --bg-glass: rgba(21, 27, 21, 0.85);
  --border-subtle: rgba(229, 233, 226, 0.12);
  --border-active: #a3b18a;
  --text-primary: #e5e9e2;
  --text-secondary: #b3bfad;
  --text-muted: #899483;
  --color-bullish: #72b01d;
  --color-bullish-bg: rgba(114, 176, 29, 0.14);
  --color-bearish: #d9534f;
  --color-bearish-bg: rgba(217, 83, 79, 0.14);
  --color-accent: #a3b18a;
  --color-accent-grad: linear-gradient(135deg, #588157 0%, #a3b18a 100%);
  --color-accent-text: #0d110d;
  --shadow-card: 0 8px 32px 0 rgba(8, 12, 8, 0.7);
  --shadow-glow: 0 0 16px rgba(163, 177, 138, 0.35);
}

[data-palette="tactical-green"][data-theme="light"] {
  --bg-primary: #f5f7f4;
  --bg-secondary: #e6ebe4;
  --bg-card: rgba(255, 255, 255, 0.95);
  --bg-card-hover: #ffffff;
  --bg-glass: rgba(245, 247, 244, 0.9);
  --border-subtle: #d3ded0;
  --border-active: #588157;
  --text-primary: #192218;
  --text-secondary: #313f2f;
  --text-muted: #5e6f5c;
  --color-bullish: #588157;
  --color-bullish-bg: rgba(88, 129, 87, 0.12);
  --color-bearish: #bc4749;
  --color-bearish-bg: rgba(188, 71, 73, 0.12);
  --color-accent: #588157;
  --color-accent-grad: linear-gradient(135deg, #3a5a40 0%, #588157 100%);
  --color-accent-text: #ffffff;
  --shadow-card: 0 4px 20px -2px rgba(25, 34, 24, 0.12);
  --shadow-glow: 0 0 12px rgba(88, 129, 87, 0.25);
}

/* 19. ROYAL WEALTH (Gold & Mahogany Luxury Investment) */
/* Swatches: #12110E, #1B1915, #C9A227, #F4EFE6 */
[data-palette="wealth"] {
  --bg-primary: #12110e;
  --bg-secondary: #1b1915;
  --bg-card: rgba(36, 32, 25, 0.88);
  --bg-card-hover: rgba(50, 44, 34, 0.95);
  --bg-glass: rgba(27, 25, 21, 0.85);
  --border-subtle: rgba(244, 239, 230, 0.12);
  --border-active: #c9a227;
  --text-primary: #f4efe6;
  --text-secondary: #cfc5b4;
  --text-muted: #9d9485;
  --color-bullish: #4caf7a;
  --color-bullish-bg: rgba(76, 175, 122, 0.15);
  --color-bearish: #d95d5d;
  --color-bearish-bg: rgba(217, 93, 93, 0.15);
  --color-accent: #c9a227;
  --color-accent-grad: linear-gradient(135deg, #c9a227 0%, #e0bd43 100%);
  --color-accent-text: #1b1915;
  --shadow-card: 0 8px 32px 0 rgba(14, 13, 10, 0.7);
  --shadow-glow: 0 0 16px rgba(201, 162, 39, 0.35);
}

[data-palette="wealth"][data-theme="light"] {
  --bg-primary: #fbf9f5;
  --bg-secondary: #f2eee3;
  --bg-card: rgba(255, 255, 255, 0.95);
  --bg-card-hover: #ffffff;
  --bg-glass: rgba(251, 249, 245, 0.9);
  --border-subtle: #e5ded0;
  --border-active: #a6841b;
  --text-primary: #26221a;
  --text-secondary: #4a4233;
  --text-muted: #786f5c;
  --color-bullish: #388e3c;
  --color-bullish-bg: rgba(56, 142, 60, 0.12);
  --color-bearish: #b71c1c;
  --color-bearish-bg: rgba(183, 28, 28, 0.12);
  --color-accent: #a6841b;
  --color-accent-grad: linear-gradient(135deg, #a6841b 0%, #c9a227 100%);
  --color-accent-text: #ffffff;
  --shadow-card: 0 4px 20px -2px rgba(38, 34, 26, 0.12);
  --shadow-glow: 0 0 12px rgba(166, 132, 27, 0.25);
}

/* ========================================================================
   APPEARANCE & COLOR PALETTES SETTINGS MODAL
   ======================================================================== */
.palette-quick-btn {
  padding: 0.32rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.2s ease;
}

.palette-quick-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--color-accent);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.settings-modal-dialog {
  max-width: 840px;
  width: 95%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.settings-modal-body {
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.settings-section-title {
  font-size: 0.86rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Mode Switcher Grid */
.mode-switch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.mode-card {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  border: 1.5px solid var(--border-subtle);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

.mode-card:hover {
  border-color: var(--color-accent);
  color: var(--text-primary);
}

.mode-card.active {
  background: var(--bg-card);
  border-color: var(--color-accent);
  color: var(--color-accent);
  box-shadow: var(--shadow-glow);
}

/* Palette Grid */
.palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
}

.palette-card {
  position: relative;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  border: 1.5px solid var(--border-subtle);
  padding: 0.9rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.palette-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-accent);
  background: var(--bg-card-hover);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.palette-card.active {
  border-color: var(--color-accent);
  background: var(--bg-card);
  box-shadow: 0 0 0 1px var(--color-accent), var(--shadow-glow);
}

.palette-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.palette-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.palette-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-pill);
  background: rgba(192, 88, 0, 0.2);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.palette-active-check {
  display: none;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-bullish);
  background: var(--color-bullish-bg);
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-pill);
}

.palette-card.active .palette-active-check {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.palette-card.active .palette-badge {
  display: none;
}

/* 4-Stripe Color Swatch Bar (Matching Figma Preview) */
.palette-swatches {
  display: flex;
  height: 28px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.15);
}

.palette-swatches span {
  flex: 1;
  height: 100%;
  transition: transform 0.15s ease;
}

.palette-card:hover .palette-swatches span {
  transform: scaleY(1.05);
}

.palette-desc {
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.35;
}

/* ========================================================================
   CANDLESTICK & CHART COLOR MODE SELECTOR
   ======================================================================== */
.candle-mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-top: 0.6rem;
}

.candle-mode-card {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  border: 1.5px solid var(--border-subtle);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  transition: all 0.2s ease;
  position: relative;
  user-select: none;
}

.candle-mode-card:hover {
  border-color: var(--color-accent);
  background: var(--bg-card-hover);
  transform: translateY(-1px);
}

.candle-mode-card.active {
  background: var(--bg-card);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent), var(--shadow-glow);
}

.candle-preview-mini {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 2px 4px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.candle-bar {
  width: 8px;
  height: 20px;
  border-radius: 1px;
  position: relative;
}

.candle-bar::before {
  content: '';
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 50%;
  width: 1.5px;
  transform: translateX(-50%);
  background: inherit;
  z-index: 0;
}

.candle-bar.c-green {
  background: #00e676;
}

.candle-bar.c-red {
  background: #ff3366;
}

.candle-bar.c-white {
  background: #ffffff;
}

.candle-bar.c-black {
  background: #27272a;
  box-shadow: inset 0 0 0 1px #71717a;
}

.candle-bar.c-theme-up {
  background: var(--color-accent);
}

.candle-bar.c-theme-down {
  background: var(--color-bearish);
}

.candle-mode-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.candle-mode-title {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-primary);
}

.candle-mode-desc {
  font-size: 0.71rem;
  color: var(--text-muted);
  line-height: 1.25;
}

.candle-mode-check {
  display: none;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-bullish);
  background: var(--color-bullish-bg);
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-pill);
}

.candle-mode-card.active .candle-mode-check {
  display: inline-flex;
  align-items: center;
}

.btn-restore-chart {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: 0.74rem;
  font-weight: 600;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-restore-chart:hover {
  background: var(--bg-card-hover);
  border-color: var(--color-bullish);
  color: var(--text-primary);
}

/* ========================================================================
   MINIMALIST DARK / LIGHT QUICK TOGGLE ICON BUTTON
   ======================================================================== */
.theme-quick-toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.theme-quick-toggle:hover {
  background: var(--bg-card-hover);
  border-color: var(--color-accent);
  transform: rotate(15deg) scale(1.05);
  box-shadow: var(--shadow-glow);
}

/* ========================================================================
   FULL SETTINGS PAGE (THEME, AI INTEGRATION, BROKERAGE & TAXES)
   ======================================================================== */
.settings-page-wrapper {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0.4rem 1.25rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  box-sizing: border-box;
}

.settings-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-subtle);
}

.settings-page-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.settings-title-icon {
  font-size: 1.6rem;
}

.settings-page-title h1 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.settings-page-subtitle {
  font-size: 0.84rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

/* Settings Sub-Navigation Tab Bar */
.settings-tab-bar {
  display: flex;
  gap: 0.5rem;
  background: var(--bg-secondary);
  padding: 4px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  overflow-x: auto;
}

.settings-tab-btn {
  padding: 0.45rem 1rem;
  border-radius: var(--radius-pill);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.settings-tab-btn:hover:not(.active) {
  color: var(--text-primary);
  border-color: var(--color-accent);
  background: rgba(255, 255, 255, 0.04);
}

[data-theme="light"] .settings-tab-btn:hover:not(.active) {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-primary);
}

.settings-tab-btn.active,
[data-theme="light"] .settings-tab-btn.active {
  background: var(--color-accent-grad) !important;
  color: var(--color-accent-text, #ffffff) !important;
  border-color: transparent !important;
  box-shadow: var(--shadow-glow) !important;
  font-weight: 700 !important;
}

/* Tab Panes */
.settings-tab-pane {
  display: none;
  flex-direction: column;
  gap: 1.25rem;
  animation: fadeIn 0.2s ease;
}

.settings-tab-pane.active {
  display: flex;
}

/* Settings Cards */
.settings-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}

.settings-card-header {
  margin-bottom: 1.25rem;
}

.settings-card-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.settings-card-header p {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-top: 0.2rem;
}

.settings-info-box {
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.1rem;
  display: flex;
  gap: 0.75rem;
  font-size: 0.84rem;
  color: var(--text-primary);
  line-height: 1.45;
}

.settings-two-col-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 1.25rem;
}

.settings-subcard {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.settings-subcard-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

/* ==========================================================================
   SETTINGS — MY PROFILE & SECURITY PANE (THEME-ADAPTIVE INSTITUTIONAL DESIGN)
   ========================================================================== */
.profile-settings-center-container {
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Status Header Card (Single-row clean header, no text clutter) */
.profile-status-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1rem 1.4rem;
  box-shadow: var(--shadow-card);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.profile-status-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.profile-avatar-symbol {
  font-size: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  color: var(--color-accent);
  flex-shrink: 0;
}

.profile-headline-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.profile-headline-text {
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.profile-status-pill {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.22rem 0.65rem;
  border-radius: var(--radius-pill);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  transition: all 0.25s ease;
}

.profile-status-pill.complete {
  background: var(--color-bullish-bg);
  border-color: var(--color-bullish);
  color: var(--color-bullish);
}

.profile-status-pill.active {
  background: var(--bg-secondary);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.profile-status-pill.incomplete {
  background: var(--color-neutral-bg, rgba(148, 163, 184, 0.12));
  border-color: var(--border-subtle);
  color: var(--text-muted);
}

/* Modern Radial Completion Capsule */
.profile-completion-capsule {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 0.4rem 1.1rem 0.4rem 0.65rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.profile-completion-capsule:hover {
  border-color: var(--color-accent);
}

.completion-radial-wrap {
  position: relative;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.completion-radial-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.radial-track {
  stroke: var(--border-subtle);
}

.radial-bar {
  stroke: var(--color-accent);
  transition: stroke-dashoffset 0.45s ease, stroke 0.3s ease;
}

.completion-radial-pct {
  position: absolute;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.completion-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.completion-meta-title {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 700;
}

.completion-meta-val {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

/* Square Profile Avatar */
.profile-square-avatar {
  border-radius: var(--radius-md) !important;
  object-fit: cover;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  border: 2px solid var(--border-subtle);
  background: var(--bg-secondary);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.profile-square-avatar:hover {
  transform: scale(1.02);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-glow);
}

/* Theme-Adaptive Form Fields & Labels */
.profile-field-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin-bottom: 0.38rem;
}

.profile-field-label small {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: none;
  font-weight: 500;
}

.profile-field-input {
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.86rem;
  padding: 0.6rem 0.85rem;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.profile-field-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(0, 210, 255, 0.12);
  background: var(--bg-card);
}

/* Buttons in Profile Settings */
.btn-profile-subaction {
  padding: 0.5rem 1.35rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.84rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: all 0.2s ease;
}

.btn-profile-subaction:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-text, #ffffff);
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow);
}

.btn-profile-photo-upload {
  padding: 0.48rem 1.15rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: all 0.2s ease;
}

.btn-profile-photo-upload:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--bg-card-hover);
}

.btn-profile-photo-remove {
  padding: 0.48rem 0.95rem;
  background: var(--color-bearish-bg, rgba(220, 38, 38, 0.1));
  border: 1px solid var(--color-bearish, #ef4444);
  color: var(--color-bearish, #ef4444);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.2s ease;
}

.btn-profile-photo-remove:hover {
  background: var(--color-bearish, #ef4444);
  color: #ffffff;
}

.btn-profile-save-primary {
  padding: 0.7rem 2.2rem;
  background: var(--color-accent-grad);
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-accent-text, #ffffff);
  font-weight: 800;
  cursor: pointer;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
}

.btn-profile-save-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow);
  opacity: 0.95;
}

.btn-toggle-pin {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.65;
  color: var(--text-muted);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.btn-toggle-pin:hover {
  opacity: 1;
  transform: scale(1.1);
}

.rule-pill {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.28rem 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  transition: all 0.2s ease;
}

.rule-pill.valid {
  background: var(--color-bullish-bg);
  border-color: var(--color-bullish);
  color: var(--color-bullish);
}

.settings-subcard-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.settings-subcard-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.settings-form-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.settings-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.1rem;
}

.settings-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.settings-field-group label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.field-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.link-external {
  font-size: 0.76rem;
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
}

.link-external:hover {
  text-decoration: underline;
}

.btn-toggle-eye {
  position: absolute;
  right: 0.6rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.settings-calc-preview {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
}

.preview-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.preview-line strong {
  font-family: var(--font-mono);
  color: var(--text-primary);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  overflow-x: hidden;
  min-height: 100vh;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
  transition: background-color 0.2s ease, color 0.2s ease;
}

input,
button,
select,
textarea {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========================================================================
   INSTITUTIONAL FINANCIAL DATA TYPOGRAPHY SYSTEM
   Tabular Lining Numerals, Monospaced Digits, and Visual Hierarchy
   ======================================================================== */
table,
.modern-table,
.mover-table,
.stock-row,
.stat-val,
.kpi-value,
.chart-symbol-price,
.chart-chg-pill,
.leg-val,
.tab-val,
.stock-current,
.stock-change,
.stock-vol,
.order-row,
.pos-pnl,
.badge-bullish,
.badge-bearish,
.badge-neutral,
.verdict-badge,
.inst-stat-hero,
.inst-table,
[data-tabular="true"] {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Precision Monospaced Data Digits */
.tabular-nums,
.price-val,
.num-mono,
.tv-price-badge,
.order-price,
.order-qty,
.data-mono,
.stock-sym,
.mover-sym-txt {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Data Table Grid Cells: Clean Proportions with Comfortable Line-Height */
table tbody td,
.modern-table tbody td,
.mover-table tbody td,
.stock-row td,
.inst-table tbody td {
  font-weight: 400;
  line-height: 1.45;
}

/* Financial Cards & Badges */
.dark-card,
.badge-dark,
.eval-matrix-card,
.psx-dash-card-left,
.psx-dash-card-right,
.chart-card,
.inst-card,
.tab-hero-card {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Stock Symbols, Live Prices & Headers: Semibold/Bold (600-700) for instant scanning */
.stock-sym,
.mover-sym-txt,
.chart-symbol-name {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.chart-symbol-price {
  font-family: var(--font-numbers);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.chart-chg-pill {
  font-family: var(--font-numbers);
  font-weight: 600;
}

table thead th,
.modern-table thead th,
.mover-table thead th,
.inst-table thead th {
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.4;
}


/* Custom Scrollbars - Harmonized across all panels, themes, and palettes */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-active) transparent;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-active);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent);
}

/* ================= HEADER & TICKER TAPE ================= */
.app-header {
  height: var(--header-height);
  background: var(--bg-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: none !important;
  box-shadow: none;
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
}

.brand-section {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.brand-logo {
  width: 38px;
  height: 38px;
  background: transparent !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
  box-shadow: none !important;
  flex-shrink: 0;
  padding: 0 !important;
}

.brand-title-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 38px;
  padding: 1px 0;
  box-sizing: border-box;
}

.brand-title {
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0;
  padding: 0;
  line-height: 1.05;
  white-space: nowrap;
}

.brand-subtitle {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent, #3b82f6);
  margin: 0;
  padding: 0;
  line-height: 1;
  white-space: nowrap;
  display: block;
}

/* Header Merged Auth Action Buttons (Log in & Register) */
.header-auth-buttons {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.header-btn-login {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.38rem 0.95rem;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 600;
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: inherit;
}

.header-btn-login:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38bdf8;
  color: #38bdf8;
  transform: translateY(-1px);
}

.header-btn-register {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.38rem 1.05rem;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 700;
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
  font-family: inherit;
}

.header-btn-register:hover {
  background: linear-gradient(135deg, #0369a1 0%, #1d4ed8 100%);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45);
  transform: translateY(-1px);
}

/* Dedicated Strip for Market Switcher (Positioned Below Menu Buttons) */
.market-switch-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.15rem;
  margin-bottom: 1.35rem;
  padding: 0 1.25rem;
  background: transparent;
  width: 100%;
}

/* ================= MULTI-MARKET VENUE SWITCHER DOCK =================
   Distinct institutional console aesthetic containing both Market Venue Switcher
   and the embedded Market Trend Regime surveillance block below the 3 venue buttons */
.market-switch-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 8px;
}

[data-theme="light"] .market-switch-container,
body.light-theme .market-switch-container {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Top Row: Market Venue Switcher Buttons */
.market-switch-top-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.market-switch-top-row.two-markets-centered {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.market-switch-top-row.two-markets-centered .market-tab {
  flex: 1 1 0;
  max-width: 135px;
}

/* Bottom Row: Market Trend text at left side (no background box, unbold, flush left), Regime status at right */
.market-switch-bottom-row,
.header-regime-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 1px 1px 1px;
  border-top: none !important;
  width: 100%;
}

[data-theme="light"] .market-switch-bottom-row,
[data-theme="light"] .header-regime-strip,
body.light-theme .market-switch-bottom-row,
body.light-theme .header-regime-strip {
  border-top: none !important;
}

/* Market Trend Plain Text Label (Left side, unbolded, flush left, no background box) */
.market-trend-text-label,
.market-trend-title {
  display: inline-flex;
  align-items: center;
  font-size: 0.74rem;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
  text-transform: none !important;
  color: #38bdf8;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
  text-align: left;
}

.market-trend-text-label:hover,
.market-trend-title:hover {
  opacity: 0.82;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none;
}

[data-theme="light"] .market-trend-text-label,
[data-theme="light"] .market-trend-title,
body.light-theme .market-trend-text-label,
body.light-theme .market-trend-title {
  color: #0369a1;
  font-weight: 500 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

[data-theme="light"] .market-trend-text-label:hover,
[data-theme="light"] .market-trend-title:hover,
body.light-theme .market-trend-text-label:hover,
body.light-theme .market-trend-title:hover {
  opacity: 0.82;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Institutional Prefix Badge */
.market-switch-prefix {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.32rem 0.75rem 0.32rem 0.6rem;
  border-right: 1px solid rgba(148, 163, 184, 0.2);
  user-select: none;
}

.market-prefix-icon {
  font-size: 0.92rem;
  color: #38bdf8;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.5));
}

.market-prefix-label {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #38bdf8;
}

[data-theme="light"] .market-switch-prefix,
body.light-theme .market-switch-prefix {
  border-right-color: #e2e8f0;
}

[data-theme="light"] .market-prefix-label,
body.light-theme .market-prefix-label {
  color: #0284c7;
}

/* Distinct Segmented Market Tiles (Not round pills!) */
.market-tab {
  position: relative;
  padding: 0.36rem 0.95rem 0.32rem 0.95rem;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid rgba(148, 163, 184, 0.15);
  background: rgba(15, 23, 42, 0.45);
  color: var(--text-secondary, #94a3b8);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  user-select: none;
  text-decoration: none;
  min-width: 105px;
}

.market-tab:hover:not(.active) {
  background: rgba(30, 41, 59, 0.75);
  border-color: rgba(56, 189, 248, 0.35);
  color: var(--text-primary, #f8fafc);
  transform: translateY(-1px);
}

/* Active State: High-Tech Cyber-Navy Glass Frame with Laser Accent */
.market-tab.active {
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.18) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  border: 1.5px solid #38bdf8 !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px -2px rgba(56, 189, 248, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* Illuminated bottom laser line indicator on active market */
.market-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 18%;
  right: 18%;
  height: 2.5px;
  background: #38bdf8;
  border-radius: 2px;
  box-shadow: 0 0 8px #38bdf8, 0 0 14px rgba(56, 189, 248, 0.8);
}

[data-theme="light"] .market-tab {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #475569;
}

[data-theme="light"] .market-tab:hover:not(.active) {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

[data-theme="light"] .market-tab.active {
  background: #f0f9ff !important;
  border: 1.5px solid #0284c7 !important;
  color: #0284c7 !important;
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.25) !important;
}

[data-theme="light"] .market-tab.active::after {
  background: #0284c7;
  box-shadow: 0 0 6px rgba(2, 132, 199, 0.6);
}

.market-tab-top {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.market-flag {
  font-size: 0.95rem;
  line-height: 1;
}

.market-tab-label {
  font-weight: 800;
  letter-spacing: 0.05em;
}

.market-tab-sub {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1.1;
  white-space: nowrap;
}

.market-tz-tag {
  font-size: 0.58rem;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-secondary, #94a3b8);
  letter-spacing: 0.05em;
}

.market-tab.active .market-tz-tag {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
}

[data-theme="light"] .market-tab.active .market-tz-tag {
  background: rgba(2, 132, 199, 0.15);
  color: #0284c7;
}

.market-tab.active .market-tab-sub {
  color: #e2e8f0;
}

[data-theme="light"] .market-tab.active .market-tab-sub {
  color: #0369a1;
}

.market-tab-clock {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.market-tab.active .market-tab-clock {
  color: #38bdf8;
  font-weight: 700;
}

[data-theme="light"] .market-tab.active .market-tab-clock {
  color: #0284c7;
}

/* Real-Time Market Status Light (Left of PSX & Tadawul buttons) */
.market-status-light {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Green Light: Market Open */
.market-status-light.light-green {
  background-color: #00e676;
  box-shadow: 0 0 0 2px rgba(0, 230, 118, 0.2), 0 0 8px #00e676;
  animation: pulse-market-green 2s infinite;
}

/* Yellow Light: Pre-Market & Post-Market */
.market-status-light.light-yellow {
  background-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25), 0 0 8px #f59e0b;
  animation: pulse-market-yellow 2.5s infinite;
}

/* Red Light: Market Closed */
.market-status-light.light-red {
  background-color: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2), 0 0 6px #ef4444;
}

/* Purple Light: National / Exchange Holiday */
.market-status-light.light-purple {
  background-color: #a855f7;
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.25), 0 0 8px #a855f7;
  animation: pulse-market-purple 3s infinite;
}

@keyframes pulse-market-purple {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.5), 0 0 8px #a855f7;
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(168, 85, 247, 0), 0 0 12px #a855f7;
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(168, 85, 247, 0), 0 0 8px #a855f7;
  }
}

@keyframes pulse-market-green {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.5), 0 0 8px #00e676;
  }

  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 5px rgba(0, 230, 118, 0), 0 0 10px #00e676;
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 230, 118, 0), 0 0 8px #00e676;
  }
}

@keyframes pulse-market-yellow {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5), 0 0 8px #f59e0b;
  }

  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 5px rgba(245, 158, 11, 0), 0 0 10px #f59e0b;
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0), 0 0 8px #f59e0b;
  }
}

/* Header Quick-Jump Search Bar & Dropdown */
.header-jump-search-wrap {
  position: relative;
  flex: 1;
  max-width: 360px;
  margin: 0 1rem;
}

.header-jump-search-box {
  display: flex;
  align-items: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.75rem;
  transition: all 0.2s ease;
}

.header-jump-search-box:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(0, 242, 254, 0.15);
  background: var(--bg-card);
}

.header-jump-search-icon {
  font-size: 0.85rem;
  color: var(--color-accent);
  margin-right: 0.5rem;
}

.header-jump-search-input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 0.8rem;
  width: 100%;
}

.header-jump-search-input::placeholder {
  color: var(--text-muted);
}

.header-jump-clear-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0 0.2rem;
}

.header-jump-clear-btn:hover {
  color: var(--text-primary);
}

.header-jump-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 480px;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
  padding: 0.75rem;
  z-index: 1000;
  max-height: 480px;
  overflow-y: auto;
}

.jump-dropdown-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.4rem 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 0.4rem;
}

.jump-dropdown-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-bottom: 0.75rem;
}

.jump-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

.jump-item:hover {
  background: var(--bg-card-hover);
  border-color: var(--color-accent);
  transform: translateY(-1px);
}

.jump-icon {
  font-size: 1.1rem;
}

.jump-text {
  display: flex;
  flex-direction: column;
}

.jump-text strong {
  font-size: 0.78rem;
  color: var(--text-primary);
}

.jump-text span {
  font-size: 0.68rem;
  color: var(--text-muted);
}

/* Execution Environment Badge */
.exec-env-badge {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.85rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #f59e0b;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
}

.exec-env-badge:hover {
  background: rgba(245, 158, 11, 0.22);
  transform: scale(1.02);
}

.exec-env-badge.live-mode {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.45);
  color: #10b981;
}

.exec-env-badge.fix-mode {
  background: rgba(6, 182, 212, 0.15);
  border-color: rgba(6, 182, 212, 0.45);
  color: #06b6d4;
}

.exec-env-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}

/* Header Right Actions */
.header-right-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

/* Theme Switcher 3-Way Container */
.theme-switch-container {
  display: flex;
  background: var(--bg-secondary);
  padding: 2px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
}

.theme-btn {
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-pill);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  transition: all 0.2s ease;
}

.theme-btn.active,
[data-theme="light"] .theme-btn.active {
  background: var(--color-accent-grad) !important;
  color: var(--color-accent-text, #ffffff) !important;
  box-shadow: var(--shadow-glow) !important;
  font-weight: 700 !important;
}

.header-status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
}

.status-clock {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.2rem 0.4rem;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

/* ================= GENERAL UTILITY CLASSES ================= */
.bullish {
  color: var(--color-bullish) !important;
}

.bearish {
  color: var(--color-bearish) !important;
}

.neutral {
  color: var(--color-neutral) !important;
}

.btn-autotrade-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.25rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
}

.btn-autotrade-toggle.allowed {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.35);
}

.btn-autotrade-toggle.allowed:hover {
  background: rgba(34, 197, 94, 0.25);
}

.btn-autotrade-toggle.restricted {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}

.btn-autotrade-toggle.restricted:hover {
  background: rgba(239, 68, 68, 0.22);
}


/* ================= MAIN 3-COLUMN WORKSPACE ================= */
#view-container-terminal {
  width: 100%;
}

.main-layout {
  display: grid;
  grid-template-columns: 335px 1fr 305px;
  gap: 0.65rem;
  padding: 0.5rem 0.65rem 5px 0.65rem;
  width: 100%;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
  align-items: start;
  height: auto;
}

.panel-card {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.panel-header {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(148, 163, 184, 0.04);
}

.panel-title {
  font-size: 0.95rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.screener-header-badges {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.badge-source {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: all 0.2s ease;
}

.badge-source.live {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.badge-source.db {
  background: rgba(14, 165, 233, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(14, 165, 233, 0.3);
}

.btn-refresh-screener {
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.8rem;
  padding: 0.15rem 0.35rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.btn-refresh-screener:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  transform: rotate(90deg);
}

.market-closed-notice {
  background: rgba(2, 132, 199, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.8rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

#panel-chart,
#panel-dossier {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  align-self: start !important;
}

.panel-body {
  padding: 0.75rem 0.85rem;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}

#panel-dossier .panel-body,
#panel-dossier .dossier-tab-content {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto !important;
  padding: 0.65rem 0.85rem;
}

/* ================= 3-TAB HEADER ON RIGHT PANEL ================= */
.panel-tabs-header {
  display: flex;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
  padding: 0.35rem 0.5rem;
  gap: 0.35rem;
}

.panel-tab-btn {
  flex: 1;
  padding: 0.45rem 0.75rem;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.panel-tab-btn:hover:not(.active) {
  color: var(--text-primary);
  border-color: var(--color-accent);
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .panel-tab-btn:hover:not(.active) {
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.04);
}

.panel-tab-btn.active,
[data-theme="light"] .panel-tab-btn.active {
  background: var(--color-accent-grad) !important;
  color: var(--color-accent-text, #ffffff) !important;
  border-color: transparent !important;
  font-weight: 700 !important;
  box-shadow: var(--shadow-glow) !important;
}

/* Tab Panes */
.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

/* Section Title */
.section-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.035em;
}

/* ================= SCREENER / SCANNER PANEL ================= */
.screener-search-bar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.search-input {
  flex: 1;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.55rem 0.85rem;
  color: var(--text-primary);
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.2s ease;
}

.search-input:focus {
  border-color: var(--color-accent);
}

.filter-pills {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
}

.pill-btn {
  padding: 0.32rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.pill-btn:hover:not(.active) {
  color: var(--text-primary);
  border-color: var(--color-accent);
  background: var(--bg-card-hover);
}

[data-theme="light"] .pill-btn:hover:not(.active) {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-primary);
}

.pill-btn.active,
[data-theme="light"] .pill-btn.active {
  background: var(--color-accent-grad) !important;
  color: var(--color-accent-text, #ffffff) !important;
  border-color: transparent !important;
  box-shadow: var(--shadow-glow) !important;
  font-weight: 700 !important;
}

/* ================= LEFT PANEL: SEARCH BAR & SELECTED ASSET OVERVIEW ================= */
.left-panel-body {
  display: flex;
  flex-direction: column;
  height: auto;
  padding: 0.75rem;
  gap: 0.75rem;
  position: relative;
  overflow: hidden;
}

.symbol-search-box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.symbol-search-label {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.symbol-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.symbol-search-input-wrap .search-icon-prefix {
  position: absolute;
  left: 0.75rem;
  font-size: 0.92rem;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
}

.symbol-search-input {
  width: 100%;
  padding: 0.52rem 2.2rem 0.52rem 2.3rem;
  font-size: 0.92rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1.5px solid rgba(148, 163, 184, 0.45);
  border-radius: 8px;
  outline: none;
  transition: all 0.2s ease;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.symbol-search-input:hover {
  border-color: var(--color-accent, #0284c7);
}

.symbol-search-input:focus {
  border-color: var(--color-accent, #00f2fe);
  box-shadow: 0 0 0 3px rgba(0, 242, 254, 0.2), inset 0 1px 2px rgba(0, 0, 0, 0.05);
  background: var(--bg-card-hover, var(--bg-card));
}

[data-theme="light"] .symbol-search-input {
  background: #ffffff;
  border: 1.5px solid #94a3b8;
  color: #0f172a;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .symbol-search-input:hover {
  border-color: #0284c7;
}

[data-theme="light"] .symbol-search-input:focus {
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.2);
  background: #ffffff;
}

.search-clear-btn {
  position: absolute;
  right: 0.6rem;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.2rem;
  line-height: 1;
  z-index: 2;
}

.search-clear-btn:hover {
  color: var(--text-color);
}

/* Autocomplete Dropdown */
.search-autocomplete-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 380px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.autocomplete-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.45rem 0.75rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
}

.autocomplete-hint {
  font-size: 0.68rem;
  opacity: 0.7;
}

.autocomplete-list {
  overflow-y: auto;
  max-height: 330px;
}

.autocomplete-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: background 0.15s;
}

.autocomplete-item:hover,
.autocomplete-item.selected {
  background: var(--bg-card-hover, rgba(255, 255, 255, 0.08));
}

.ac-left {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.ac-sym-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.ac-sym {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-color);
}

.ac-type-pill {
  font-size: 0.62rem;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: rgba(37, 99, 235, 0.2);
  color: #60a5fa;
  font-weight: 600;
}

.ac-type-pill.stock-pill {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}

.ac-name {
  font-size: 0.72rem;
  color: var(--text-muted);
  max-width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ac-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
}

.ac-price {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-color);
}

.ac-chg {
  font-size: 0.72rem;
  font-weight: 600;
}

/* Selected Asset Overview Card */
.selected-asset-card {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 0.85rem;
  flex: 1;
  overflow-y: auto;
}

.asset-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.asset-sym-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.asset-sym-badge {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--color-primary);
}

.asset-type-tag {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
}

.asset-company-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-color);
  line-height: 1.25;
}

.asset-sector-name {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.asset-price-block {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.asset-current-price {
  font-size: 1.55rem;
  font-weight: 700;
  font-family: var(--font-numbers);
  color: var(--text-color);
}

.asset-chg-badge {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 5px;
}

/* Range Gauges */
.asset-gauge-section {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.gauge-label-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
}

.gauge-spread {
  font-size: 0.68rem;
  opacity: 0.8;
}

.gauge-bar-track {
  position: relative;
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: 3px;
}

.gauge-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #ef4444 0%, #eab308 50%, #22c55e 100%);
  border-radius: 3px;
}

.gauge-bar-marker {
  position: absolute;
  top: -3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--color-primary);
  transform: translateX(-50%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  transition: left 0.3s ease;
}

.gauge-val-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* Stats Grid */
.asset-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  padding-top: 0.25rem;
}

.asset-stat-cell {
  background: var(--bg-tertiary);
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.asset-stat-cell .stat-lbl {
  font-size: 0.66rem;
  color: var(--text-muted);
}

.asset-stat-cell .stat-v {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-color);
}

.asset-action-row {
  margin-top: auto;
  padding-top: 0.4rem;
}

.btn-asset-trade {
  width: 100%;
  padding: 0.55rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
  transition: filter 0.15s, transform 0.15s;
}

.btn-asset-trade:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.stock-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.stock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

.stock-row:hover,
.stock-row.selected {
  background: var(--bg-card-hover);
  border-color: var(--border-active);
  transform: translateY(-1px);
}

.stock-left {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.stock-sym-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.stock-sym {
  font-weight: 700;
  font-size: 0.92rem;
}

.stock-sec {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.stock-right {
  text-align: right;
  font-family: var(--font-mono);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
}

.stock-price {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.stock-chg {
  font-size: 0.76rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.stock-chg .chg-arrow {
  font-size: 0.65rem;
  line-height: 1;
}

.stock-chg.bullish {
  color: #00e676 !important;
}

.stock-chg.bearish {
  color: #ff3366 !important;
}

.stock-chg.neutral {
  color: var(--text-muted) !important;
}

.empty-state {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ================= VERDICT & STATUS BADGES (MATCHING SCANNER STYLE) ================= */
.verdict-badge {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 1.5px 6.5px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
  line-height: 1.15;
}

.verdict-badge.badge-extreme-buy,
.verdict-badge.badge-strong-buy,
.badge-extreme-buy,
.badge-strong-buy {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.45) !important;
}

.verdict-badge.badge-buy,
.badge-buy {
  background: #16a34a !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 1px 4px rgba(22, 163, 74, 0.35) !important;
}

.verdict-badge.badge-neutral,
.badge-neutral {
  background: #475569 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
  border-radius: 4px;
  padding: 1.5px 6.5px;
  font-size: 0.62rem;
  font-weight: 700;
}

.verdict-badge.badge-sell,
.badge-sell {
  background: #dc2626 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 1px 4px rgba(220, 38, 38, 0.35) !important;
}

.verdict-badge.badge-strong-sell,
.verdict-badge.badge-extreme-sell,
.badge-strong-sell,
.badge-extreme-sell {
  background: linear-gradient(135deg, #991b1b 0%, #e11d48 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 2px 6px rgba(225, 29, 72, 0.45) !important;
}

.verdict-badge.badge-overbought,
.verdict-badge.badge-warning,
.badge-overbought {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 1px 4px rgba(245, 158, 11, 0.35) !important;
}

.verdict-badge.badge-oversold,
.badge-oversold {
  background: linear-gradient(135deg, #0284c7 0%, #06b6d4 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 1px 4px rgba(6, 182, 212, 0.35) !important;
}

.verdict-badge.badge-squeeze,
.badge-squeeze {
  background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 1px 4px rgba(139, 92, 246, 0.35) !important;
}

.badge-index {
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.18) 0%, rgba(59, 130, 246, 0.18) 100%);
  color: #a855f7;
  border: 1px solid rgba(168, 85, 247, 0.4);
}

[data-theme="light"] .badge-index {
  color: #7c3aed;
  border-color: rgba(124, 58, 237, 0.4);
}

/* ================= CENTER CHART PANEL ================= */
.chart-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(148, 163, 184, 0.03);
}

.chart-symbol-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.chart-symbol-left {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.chart-symbol-name {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.chart-symbol-price {
  font-size: 0.95rem;
  font-family: var(--font-numbers);
  font-weight: 600;
  color: var(--text-primary);
}

.chart-symbol-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  gap: 0.45rem;
}

.chart-chg-pill {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.16rem 0.5rem;
  border-radius: var(--radius-pill);
  transition: all 0.2s ease;
}

.chart-chg-pill .chg-arrow {
  font-size: 0.7rem;
}

.chart-chg-pill.bullish {
  color: #00e676;
  background: rgba(0, 230, 118, 0.1);
  border: 1px solid rgba(0, 230, 118, 0.25);
}

.chart-chg-pill.bearish {
  color: #ff3366;
  background: rgba(255, 51, 102, 0.1);
  border: 1px solid rgba(255, 51, 102, 0.25);
}

.chart-chg-pill.neutral {
  color: var(--text-muted);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
}

/* Day High & Low Pill (matching Screenshot 2: l:12.59  h:12.80) */
.chart-hl-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 0.18rem 0.65rem;
}

.chart-hl-pill .hl-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
}

.chart-hl-pill .hl-label-lo {
  color: #ff5252;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: lowercase;
}

.chart-hl-pill .hl-val-lo {
  color: var(--text-primary);
}

.chart-hl-pill .hl-label-hi {
  color: #00e676;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: lowercase;
}

.chart-hl-pill .hl-val-hi {
  color: var(--text-primary);
}

/* Timeframe Bar */
.chart-timeframes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  background: var(--bg-secondary);
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  width: 100%;
  box-sizing: border-box;
}

.tf-group {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}

.tf-divider {
  width: 1px;
  height: 14px;
  background: var(--border-subtle);
  margin: 0 1px;
  flex-shrink: 0;
}

.tf-btn {
  padding: 0.22rem 0.42rem;
  font-size: 0.74rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  line-height: 1.1;
  white-space: nowrap;
}

.tf-btn:hover:not(.active) {
  color: var(--text-primary);
  border-color: var(--color-accent);
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .tf-btn:hover:not(.active) {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-primary);
}

.tf-btn.active,
[data-theme="light"] .tf-btn.active {
  background: var(--color-accent-grad) !important;
  border-color: transparent !important;
  color: var(--color-accent-text, #ffffff) !important;
  font-weight: 700 !important;
  box-shadow: var(--shadow-glow) !important;
}

.chart-container {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  height: auto;
  gap: 0px;
  /* Zero gap between panes so they appear as one single unified chart */
  padding: 0.35rem 0.5rem;
  overflow: hidden;
}

.chart-pane {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  overflow: hidden;
  min-height: 0;
  position: relative;
}

.chart-pane-unified {
  flex: 1 1 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  position: relative;
}

/* ================= CHART LAYOUT SWITCHER (OPTION 1 VS OPTION 2) ================= */
.chart-layout-switch-wrap {
  display: flex;
  align-items: center;
  gap: 3px;
  background: var(--bg-secondary);
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  margin-left: auto;
}

.btn-chart-mode-pill {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-primary);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-chart-mode-pill:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

.btn-chart-mode-pill.active {
  background: var(--accent-primary, #0ea5e9);
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ================= DEDICATED SEAMLESS CHART LAYOUT ================= */
.chart-2pane-container {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  gap: 0px !important;
  /* Seamless single-layout appearance */
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  background: var(--bg-card) !important;
}

/* Option 1: Top Candlestick Pane (no bottom border, no date bar) */
.chart-pane-price {
  flex: 77 1 0 !important;
  min-height: 190px !important;
  width: 100% !important;
  position: relative !important;
  border: none !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Option 1: Bottom Volume Pane (seamlessly attaches with no top border) */
.chart-pane-volume {
  flex: 23 1 0 !important;
  min-height: 85px !important;
  max-height: 135px !important;
  width: 100% !important;
  position: relative !important;
  border: none !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Option 2 Mode Overrides: Single Full-Height Pane with Dual Axis */
.chart-2pane-container.mode-opt2 .chart-pane-price {
  flex: 1 1 0 !important;
  height: 100% !important;
  min-height: 250px !important;
}

.chart-2pane-container.mode-opt2 .chart-pane-volume {
  display: none !important;
}

/* Floating Volume Hover Tooltip for Option 2 */
.volume-hover-tooltip {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(14, 165, 233, 0.94);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, -130%);
  transition: opacity 0.12s ease;
  white-space: nowrap;
}

.chart-legend-overlay {
  position: absolute;
  top: 8px;
  left: 12px;
  z-index: 5;
  font-family: var(--font-mono);
  font-size: 0.67rem;
  font-weight: 550;
  color: var(--text-secondary);
  pointer-events: none;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  padding: 3px 8px;
  border-radius: 4px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  letter-spacing: 0.01em;
}

.volume-legend-overlay {
  position: absolute;
  top: 4px !important;
  left: 10px !important;
  font-size: 0.65rem !important;
  padding: 2px 6px !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-secondary) !important;
  border-radius: 4px;
}

.leg-val {
  font-weight: 600;
  color: var(--text-primary);
}

/* 2-line Historical Data Button */
.chart-historical-btn {
  font-size: 0.78rem;
  font-weight: 650;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: var(--color-accent);
  padding: 2px 8px;
  line-height: 1;
  height: 28px;
  max-height: 30px;
  box-sizing: border-box;
  transition: all 0.2s ease;
  user-select: none;
  text-align: center;
}

.chart-historical-btn:hover {
  background: rgba(59, 130, 246, 0.22);
  border-color: var(--color-accent);
}

.chart-historical-btn .btn-text-2lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.05;
  letter-spacing: 0.01em;
}

.chart-historical-btn .btn-text-2lines span {
  display: block;
  text-align: center;
  width: 100%;
}

.chart-historical-btn .btn-icon {
  font-size: 0.88rem;
  line-height: 1;
}

[data-theme="light"] .chart-legend-overlay,
[data-theme="light"] .volume-legend-overlay,
[data-theme="system"] .chart-legend-overlay,
[data-theme="system"] .volume-legend-overlay {
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.tv-chart-view {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 80px;
  position: relative;
}

/* ================= RIGHT TAB 1: EVALUATION DOSSIER ================= */
.score-card {
  background: linear-gradient(135deg, rgba(0, 242, 254, 0.09) 0%, rgba(79, 172, 254, 0.03) 100%);
  border: 1px solid var(--border-active);
  border-radius: var(--radius-md);
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.score-card-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.score-card-title {
  font-size: 1.15rem;
  font-weight: 800;
}

.score-circle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 3px solid var(--color-accent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  box-shadow: var(--shadow-glow);
}

.score-num {
  font-size: 1.25rem;
  font-weight: 800;
}

.score-label {
  font-size: 0.65rem;
  color: var(--text-muted);
}

.strategy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.strat-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transition: transform 0.15s ease;
}

.strat-card:hover {
  border-color: var(--border-active);
}

.fund-metric-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.8rem;
  box-shadow: var(--shadow-card);
  transition: all 0.2s ease;
}

.fund-metric-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-1px);
}

.fund-metric-lbl {
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.fund-metric-val {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  font-family: var(--font-numbers);
  margin-top: 0.2rem;
}

.strat-name {
  font-size: 0.74rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.strat-action {
  font-size: 0.82rem;
  font-weight: 700;
}

.signals-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.signal-item {
  background: var(--bg-secondary);
  border-left: 3px solid var(--color-accent);
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  line-height: 1.4;
}

/* ================= RIGHT TAB 2: TECHNICAL DETAILS ================= */
.pattern-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
}

.pattern-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}

.pattern-title-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
}

.pattern-name {
  font-size: 1.05rem;
  font-weight: 800;
}

/* ================= RIGHT TAB 3: FUNDAMENTALS ================= */
.fundamental-summary-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1rem;
  margin-bottom: 1rem;
}

.range-values {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.range-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.range-val {
  font-size: 0.92rem;
  font-weight: 700;
  font-family: var(--font-mono);
}

.range-bar-track {
  height: 8px;
  background: rgba(148, 163, 184, 0.2);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.range-bar-fill {
  height: 100%;
  background: var(--color-accent-grad);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.fund-fin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.76rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.fund-fin-table th {
  background: var(--bg-secondary);
  padding: 0.52rem 0.65rem;
  text-align: right;
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.fund-fin-table th:first-child {
  text-align: left;
}

.fund-fin-table td {
  padding: 0.48rem 0.65rem;
  text-align: right;
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-numbers);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-primary);
}

.fund-fin-table td:first-child {
  text-align: left;
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.fund-fin-table tr:last-child td {
  border-bottom: none;
}

.fund-fin-table tr:hover td {
  background: rgba(148, 163, 184, 0.08);
}

.fund-audit-badge {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.45rem 0.65rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  margin-bottom: 0.35rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.fund-audit-badge .audit-label {
  color: var(--text-muted);
  font-weight: 600;
}

.fund-audit-badge .audit-date {
  font-family: var(--font-mono);
  color: var(--color-bullish);
  font-weight: 600;
}

.fund-profile-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.9rem;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  box-shadow: var(--shadow-card);
}

.fund-profile-desc {
  font-size: 0.76rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fund-leadership-section {
  margin-top: 0.6rem;
  margin-bottom: 0.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.65rem;
}

.fund-leadership-title {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.fund-people-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.fund-people-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.55rem;
  font-size: 0.75rem;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.fund-people-item:hover {
  background: var(--bg-card-hover, rgba(255, 255, 255, 0.06));
  border-color: var(--border-active);
}

.fund-people-bullet {
  font-size: 0.75rem;
  line-height: 1;
  opacity: 0.75;
}

.fund-people-name {
  font-weight: 600;
  color: var(--text-primary);
}

.fund-people-role {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 500;
  margin-left: auto;
}

.fund-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.55rem;
  margin-top: 0.5rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border-subtle);
}

.fund-profile-meta-item {
  font-size: 0.73rem;
}

.fund-profile-meta-lbl {
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.fund-profile-meta-val {
  font-weight: 600;
  color: var(--text-primary);
  font-family: var(--font-numbers);
  margin-top: 0.15rem;
}

.fund-meta-sub {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-weight: 400;
  font-family: var(--font-sans);
}

.fund-office-address {
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
  color: var(--text-secondary) !important;
  font-size: 0.72rem !important;
  line-height: 1.45;
}

.fund-website-item {
  margin-top: 0.35rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border-subtle);
}

.fund-website-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-accent);
  background: rgba(0, 210, 255, 0.08);
  border: 1px solid var(--border-subtle);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.76rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

[data-palette="chocolate"] .fund-website-link {
  background: rgba(192, 88, 0, 0.09);
  color: #c05800;
  border-color: rgba(192, 88, 0, 0.25);
}

.fund-website-link:hover {
  background: rgba(0, 210, 255, 0.16);
  border-color: var(--color-accent);
  transform: translateY(-1px);
}

[data-palette="chocolate"] .fund-website-link:hover {
  background: rgba(192, 88, 0, 0.18);
  border-color: #c05800;
}

.fund-events-badge {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm);
  letter-spacing: 0.02em;
}

/* ================= MOBILE BOTTOM NAVIGATION ================= */
.mobile-nav-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--bottom-nav-height);
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border-subtle);
  z-index: 1000;
  align-items: center;
  justify-content: space-around;
  padding: 0 0.5rem;
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 600;
  gap: 0.2rem;
  cursor: pointer;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.mobile-nav-item.active {
  color: var(--color-accent);
  background: rgba(0, 210, 255, 0.12);
}

.mobile-nav-icon {
  font-size: 1.15rem;
}

/* ================= RESPONSIVE DESIGN & PORTRAIT MONITOR WORKSPACE ================= */
/* Landscape screens between 1025px and 1280px (e.g. smaller laptop screens) */
@media (orientation: landscape) and (max-width: 1280px) {
  .main-layout {
    grid-template-columns: 320px 1fr 295px;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem 5px 0.5rem;
    margin: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    align-items: start;
  }
}

/* Extended Screens in Portrait (e.g. 1080x1920 Acer V226HQL rotated) and Portrait Tablets (>=768px): KEEP 3 PANELS IN A ROW */
@media (orientation: portrait) and (min-width: 768px),
(max-aspect-ratio: 1/1) and (min-width: 768px) {
  .main-layout {
    display: grid !important;
    grid-template-columns: 320px 1fr 295px !important;
    grid-template-rows: auto !important;
    grid-template-areas: none !important;
    height: auto !important;
    max-height: none !important;
    gap: 0.5rem !important;
    padding: 0.4rem 0.5rem 5px 0.5rem !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: start !important;
  }

  #panel-chart {
    grid-area: auto !important;
    width: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-self: start !important;
  }

  #panel-chart .chart-container {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  #panel-chart .chart-pane-unified {
    min-height: 0 !important;
    height: 100% !important;
  }

  #panel-screener {
    grid-area: auto !important;
    height: fit-content !important;
    max-height: none !important;
    align-self: start !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #panel-dossier {
    grid-area: auto !important;
    min-height: 0 !important;
    align-self: start !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Heat Map on Extended Portrait Monitor: Keep strictly Landscape */
  .heatmap-canvas-container {
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    max-height: calc(100vw * 10 / 16) !important;
    min-height: 380px !important;
  }
}

/* Small Screens and Mobile Phones (<768px) */
@media (max-width: 767px) {
  .main-layout {
    grid-template-columns: 1fr;
    height: auto;
    padding-bottom: calc(var(--bottom-nav-height) + 1.5rem);
  }

  .mobile-nav-bar {
    display: flex;
  }

  .mobile-view-hidden {
    display: none !important;
  }

  .panel-card {
    min-height: 480px;
  }

  .theme-label {
    display: none;
  }
}

/* ================= LIVE PIPELINE ACTIVITY & DRAWER ================= */
.pipeline-status-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0, 230, 118, 0.08);
  border: 1px solid rgba(0, 230, 118, 0.3);
  padding: 0.28rem 0.65rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-bullish);
  cursor: pointer;
  transition: var(--transition-fast);
}

.pipeline-status-badge:hover {
  background: rgba(0, 230, 118, 0.16);
  border-color: var(--color-bullish);
  transform: translateY(-1px);
}

.pipeline-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-bullish);
  box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.7);
  animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(0, 230, 118, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 230, 118, 0);
  }
}

.pipeline-time {
  font-size: 0.68rem;
  opacity: 0.8;
  font-weight: 500;
}

/* Slide-over Drawer */
.pipeline-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.pipeline-drawer-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.pipeline-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 440px;
  max-width: 90vw;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.4);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pipeline-drawer.active {
  transform: translateX(0);
}

.pipeline-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.drawer-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.drawer-close-btn {
  background: transparent;
  border: none;
  font-size: 1.25rem;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.drawer-close-btn:hover {
  color: var(--color-text-primary);
  background: var(--color-surface-hover);
}

.pipeline-drawer-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .pipeline-drawer-stats {
  background: rgba(255, 255, 255, 0.02);
}

.stat-box {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  background: var(--color-surface);
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

.stat-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  font-weight: 600;
}

.stat-val {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.pipeline-drawer-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1rem 1.25rem;
}

.pipeline-logs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
}

.pipeline-logs {
  flex: 1;
  overflow-y: auto;
  background: #0d1117;
  color: #c9d1d9;
  border-radius: var(--radius-md);
  padding: 0.85rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.74rem;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.log-entry {
  word-break: break-word;
  animation: fadeIn 0.2s ease;
}

.log-time {
  color: #58a6ff;
  font-weight: 600;
  margin-right: 0.4rem;
}

.log-db {
  color: #7ee787;
}

.log-sheets {
  color: #d2a8ff;
}

.log-cycle {
  color: #ffa657;
}

.log-info {
  color: #8b949e;
}

/* Flash animation when new data arrives */
.flash-pulse {
  animation: flash-bg 1s ease;
}

@keyframes flash-bg {
  0% {
    background-color: rgba(0, 210, 255, 0.25);
  }

  100% {
    background-color: transparent;
  }
}

/* ========================================================================
   SEHRAI BUSINESS — EXTENDED VIEWS: PAPER TRADING, PORTFOLIO & WATCHLISTS
   ======================================================================== */

/* App Views Navigation in Header */
.app-view-nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--bg-card);
  padding: 0.25rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
}

.view-nav-tab {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.2s ease;
}

.view-nav-tab:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.view-nav-tab.active {
  background: var(--color-accent-grad);
  color: var(--color-accent-text, #ffffff) !important;
  box-shadow: var(--shadow-glow);
  font-weight: 600;
}

/* User Auth Section in Header */
.user-header-box {
  display: flex;
  align-items: center;
}

.auth-btn-pill {
  background: var(--color-accent-grad);
  border: none;
  color: var(--color-accent-text, #ffffff) !important;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  box-shadow: var(--shadow-glow);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.auth-btn-pill:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), var(--shadow-glow);
}

.user-profile-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  padding: 0;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}

.user-profile-badge:hover {
  background: transparent;
  border: none;
}

.user-profile-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 3px 8px 3px 4px;
  border-radius: 8px;
  background: var(--bg-tertiary, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  transition: all 0.2s ease;
  position: relative;
}

.user-profile-badge:hover {
  background: var(--bg-hover, rgba(255, 255, 255, 0.08));
  border-color: var(--color-accent, #00f2fe);
}

.user-avatar-wrapper {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 6px;
  /* Square picture with subtle modern rounded corners */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid var(--border-subtle, rgba(255, 255, 255, 0.15));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  background: var(--bg-card, #121824);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.user-profile-badge:hover .user-avatar-wrapper {
  border-color: var(--color-accent, #00f2fe);
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.45);
  transform: scale(1.04);
}

.user-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  /* Square */
  image-rendering: -webkit-optimize-contrast;
  /* Sharp normal resolution */
  image-rendering: crisp-edges;
}

.user-avatar-circle {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  /* Square */
  background: var(--color-accent-grad, linear-gradient(135deg, #00f2fe 0%, #4facfe 100%));
  color: var(--color-accent-text, #ffffff) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: -0.01em;
}

.user-name-text {
  display: inline-block !important;
  /* Show username next to square photo when signed in */
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary, #ffffff);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Phone input with country code group */
.phone-input-group {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.phone-input-group .select-country {
  width: 120px;
  min-width: 110px;
  flex-shrink: 0;
  font-size: 0.82rem;
  padding: 0 8px;
  border-radius: var(--radius-sm, 6px);
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
}

.phone-input-group .input-clean {
  flex: 1;
}

/* Security Reset Masked Info & Verification Box */
.masked-info-box {
  background: rgba(0, 242, 254, 0.05);
  border: 1px solid rgba(0, 242, 254, 0.25);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 0.83rem;
}

.masked-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 0.82rem;
}

.masked-info-row:last-child {
  margin-bottom: 0;
}

.masked-info-row .label {
  color: var(--text-muted, #94a3b8);
}

.masked-info-row .value {
  color: var(--color-accent, #00f2fe);
  font-family: monospace;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.pin-confirmation-banner {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.05));
  border: 1px dashed #f59e0b;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 12px 0 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fbbf24;
}

.pin-confirmation-banner strong {
  font-family: monospace;
  font-size: 1.25rem;
  letter-spacing: 0.25em;
  background: rgba(0, 0, 0, 0.4);
  padding: 2px 10px;
  border-radius: 4px;
  border: 1px solid rgba(245, 158, 11, 0.4);
}


/* User Profile Dropdown Menu */
.user-dropdown-menu {
  position: absolute;
  top: 110%;
  right: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  min-width: 200px;
  padding: 0.4rem;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  backdrop-filter: blur(12px);
}

.user-dropdown-item {
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.15s;
}

.user-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.user-dropdown-item.danger {
  color: var(--color-bearish);
}

/* Quick Trade button on chart & dashboard header */
.chart-quick-trade-btn {
  background: var(--color-accent-grad);
  border: 1px solid transparent;
  color: var(--color-accent-text, #ffffff) !important;
  padding: 0.32rem 0.85rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  margin-left: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  box-shadow: var(--shadow-glow);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  white-space: nowrap;
}

.chart-quick-trade-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), var(--shadow-glow);
}

/* Dashboard Wrapper Layout for Paper, Portfolio & Watchlists */
.dashboard-wrapper {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0.4rem 1.25rem 3rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.dashboard-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  gap: 0.75rem;
}

.account-selector-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.bar-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.selector-pills {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  overflow-x: auto;
  max-width: 100%;
  padding-bottom: 3px;
  scrollbar-width: thin;
}

.selector-pill {
  flex-shrink: 0;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.selector-pill:hover:not(.active) {
  border-color: var(--color-accent);
  color: var(--text-primary);
  background: var(--bg-card-hover);
}

[data-theme="light"] .selector-pill:hover:not(.active) {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-primary);
}

.selector-pill.active,
[data-theme="light"] .selector-pill.active {
  background: var(--color-accent-grad) !important;
  border-color: transparent !important;
  color: var(--color-accent-text, #ffffff) !important;
  box-shadow: var(--shadow-glow) !important;
  font-weight: 700 !important;
}

.dashboard-top-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ========================================================
   TRADING DESK SMART ACTION BUTTONS
   ======================================================== */
.trading-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sans, 'Inter', -apple-system, sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.38rem 0.82rem;
  min-height: 32px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.trading-action-btn .btn-icon {
  font-size: 0.85rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.trading-action-btn:hover {
  transform: translateY(-1px);
}

.trading-action-btn:active {
  transform: translateY(0);
}

/* 1. Add Cash (Primary positive action) */
.trading-action-btn.btn-add-cash {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff !important;
  border: 1px solid #059669;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.28);
}

.trading-action-btn.btn-add-cash:hover {
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
  border-color: #10b981;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.38);
}

/* 2. Reset Account (Cautionary action with rotating icon) */
.trading-action-btn.btn-reset-account {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.32);
  color: #f59e0b;
}

.trading-action-btn.btn-reset-account:hover {
  background: rgba(245, 158, 11, 0.18);
  border-color: #f59e0b;
  color: #d97706;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}

.trading-action-btn.btn-reset-account .rotate-on-hover {
  transition: transform 0.4s ease;
}

.trading-action-btn.btn-reset-account:hover .rotate-on-hover {
  transform: rotate(180deg);
}

[data-theme="light"] .trading-action-btn.btn-reset-account,
body.light-theme .trading-action-btn.btn-reset-account {
  background: #fffbeb;
  border-color: #fcd34d;
  color: #b45309;
}

[data-theme="light"] .trading-action-btn.btn-reset-account:hover,
body.light-theme .trading-action-btn.btn-reset-account:hover {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #92400e;
}

/* 3. Delete Demo Account (Rose / Crimson danger action) */
.trading-action-btn.btn-delete-account {
  background: rgba(244, 63, 94, 0.08);
  border: 1px solid rgba(244, 63, 94, 0.3);
  color: #f43f5e;
}

.trading-action-btn.btn-delete-account:hover {
  background: rgba(244, 63, 94, 0.18);
  border-color: #f43f5e;
  color: #e11d48;
  box-shadow: 0 2px 8px rgba(244, 63, 94, 0.2);
}

[data-theme="light"] .trading-action-btn.btn-delete-account,
body.light-theme .trading-action-btn.btn-delete-account {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

[data-theme="light"] .trading-action-btn.btn-delete-account:hover,
body.light-theme .trading-action-btn.btn-delete-account:hover {
  background: #fee2e2;
  border-color: #f87171;
  color: #b91c1c;
}

/* 4. Sync to Portfolio (Indigo / Blue utility action) */
.trading-action-btn.btn-sync-portfolio {
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: #818cf8;
}

.trading-action-btn.btn-sync-portfolio:hover {
  background: rgba(99, 102, 241, 0.18);
  border-color: #6366f1;
  color: #6366f1;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}

[data-theme="light"] .trading-action-btn.btn-sync-portfolio,
body.light-theme .trading-action-btn.btn-sync-portfolio {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #4338ca;
}

[data-theme="light"] .trading-action-btn.btn-sync-portfolio:hover,
body.light-theme .trading-action-btn.btn-sync-portfolio:hover {
  background: #e0e7ff;
  border-color: #818cf8;
  color: #3730a3;
}

.action-btn-small {
  background: transparent;
  border: 1px dashed var(--border-subtle);
  color: var(--text-secondary);
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: all 0.15s;
}

.action-btn-small:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.action-btn-accent {
  background: var(--color-accent-grad);
  border: none;
  color: var(--color-accent-text, #ffffff) !important;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: var(--shadow-glow);
  transition: all 0.15s;
}

.action-btn-accent:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), var(--shadow-glow);
}

.action-btn-accent.secondary {
  background: linear-gradient(135deg, #ffb300 0%, #ff8f00 100%);
  color: #040d1a !important;
  box-shadow: 0 2px 10px rgba(255, 179, 0, 0.25);
}

.action-btn-ghost {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.15s;
}

.action-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--color-accent);
}

/* Stats Overview Metric Cards */
.stats-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

/* ========================================================
   PORTFOLIO ACTIONS CLUSTER (ROW WITH SIDE-STACKED MINI CONTROLS)
   ======================================================== */
.portfolio-actions-cluster {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.port-btn-primary {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  padding: 0 0.95rem !important;
  height: 36px !important;
  min-height: 36px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.portfolio-actions-secondary-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2px;
  height: 36px;
  box-sizing: border-box;
}

.port-btn-secondary {
  font-size: 0.65rem !important;
  font-weight: 500 !important;
  padding: 0 7px !important;
  height: 17px !important;
  min-height: 17px !important;
  max-height: 17px !important;
  line-height: 1 !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease;
}

.port-btn-secondary span {
  font-size: 0.62rem !important;
  line-height: 1 !important;
}

.port-btn-secondary.danger {
  background: rgba(239, 68, 68, 0.08) !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  color: #f87171 !important;
}

.port-btn-secondary.danger:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
}

[data-theme="light"] .port-btn-secondary.danger,
body.light-theme .port-btn-secondary.danger {
  background: rgba(239, 68, 68, 0.06) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #dc2626 !important;
}

[data-theme="light"] .port-btn-secondary.danger:hover,
body.light-theme .port-btn-secondary.danger:hover {
  background: rgba(239, 68, 68, 0.14) !important;
  border-color: #dc2626 !important;
  color: #b91c1c !important;
}

/* ========================================================
   PORTFOLIO HOLDINGS CHART CARD
   ======================================================== */
.portfolio-holdings-chart-card {
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[data-theme="light"] .portfolio-holdings-chart-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .portfolio-holdings-chart-card .pos-desk-tabs-bar {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

/* ========================================================
   PORTFOLIO METRIC OVERVIEW CARDS (INSTITUTIONAL GRADE)
   ======================================================== */
.stats-overview-grid.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 0.65rem;
  margin-bottom: 1.25rem;
}

.portfolio-grid .overview-card {
  padding: 0.72rem 0.85rem;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  min-width: 0;
  border-left: none;
}

.portfolio-grid .overview-card:hover {
  transform: translateY(-2px);
}

.portfolio-grid .stat-meta {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portfolio-grid .stat-meta-icon {
  font-size: 0.8rem;
  flex-shrink: 0;
  opacity: 0.9;
}

.portfolio-grid .stat-hero-val {
  font-size: 1.05rem;
  font-weight: 600;
  font-family: var(--font-mono, 'Roboto Mono', 'SF Mono', monospace);
  line-height: 1.25;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portfolio-grid .stat-sub-text {
  font-size: 0.65rem;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Accent Card Top Bars (Replaces clunky 3px left borders with crisp 2px top accents) */
.portfolio-grid .overview-card.highlight {
  border-top: 2px solid #6366f1;
}

.portfolio-grid .overview-card.card-accent-gross {
  border-top: 2px solid #38bdf8;
  border-left: none;
}

.portfolio-grid .overview-card.card-accent-zakat {
  border-top: 2px solid #f59e0b;
  border-left: none;
}

.portfolio-grid .overview-card.card-accent-cgt {
  border-top: 2px solid #ef4444;
  border-left: none;
}

.portfolio-grid .overview-card.card-accent-net {
  border-top: 2px solid #10b981;
  border-left: none;
}

.portfolio-grid .overview-card.card-accent-bonus {
  border-top: 2px solid #c084fc;
  border-left: none;
}

.portfolio-grid .overview-card.card-accent-right {
  border-top: 2px solid #06b6d4;
  border-left: none;
}

/* Trading Account Card Accent Top Bars (Exact match to Portfolio styling) */
.portfolio-grid .overview-card.card-accent-cash {
  border-top: 2px solid #10b981;
}

.portfolio-grid .overview-card.card-accent-holdings {
  border-top: 2px solid #38bdf8;
}

.portfolio-grid .overview-card.card-accent-unrealized {
  border-top: 2px solid #a855f7;
}

.portfolio-grid .overview-card.card-accent-realized {
  border-top: 2px solid #f59e0b;
}

/* Grid layout for Trading Account stats: 5 columns on desktop matching portfolio */
.stats-overview-grid.trading-overview-grid {
  grid-template-columns: repeat(5, minmax(170px, 1fr)) !important;
  gap: 0.65rem !important;
  margin-bottom: 1.25rem !important;
}

@media (max-width: 1024px) {
  .stats-overview-grid.trading-overview-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  }
}

/* Institutional Risk Engine Metric Grid: 5 columns matching top overview cards */
.stats-overview-grid.portfolio-risk-grid {
  grid-template-columns: repeat(5, minmax(170px, 1fr)) !important;
  gap: 0.65rem !important;
  margin-bottom: 1rem !important;
}

@media (max-width: 1024px) {
  .stats-overview-grid.portfolio-risk-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  }
}

.portfolio-grid .overview-card.card-accent-var95 {
  border-top: 2px solid #f59e0b;
  border-left: none;
}

.portfolio-grid .overview-card.card-accent-var99 {
  border-top: 2px solid #ef4444;
  border-left: none;
}

.portfolio-grid .overview-card.card-accent-cvar {
  border-top: 2px solid #8b5cf6;
  border-left: none;
}

.portfolio-grid .overview-card.card-accent-stress {
  border-top: 2px solid #ec4899;
  border-left: none;
}

.portfolio-grid .overview-card.card-accent-concentration {
  border-top: 2px solid #06b6d4;
  border-left: none;
}

/* Dark / System Theme Palette */
[data-theme="dark"] .portfolio-grid .overview-card,
[data-theme="system"] .portfolio-grid .overview-card {
  background: rgba(18, 24, 38, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .portfolio-grid .stat-meta,
[data-theme="system"] .portfolio-grid .stat-meta {
  color: #94a3b8;
}

[data-theme="dark"] .portfolio-grid .stat-hero-val,
[data-theme="system"] .portfolio-grid .stat-hero-val {
  color: #f1f5f9;
}

[data-theme="dark"] .portfolio-grid .stat-sub-text,
[data-theme="system"] .portfolio-grid .stat-sub-text {
  color: #64748b;
}

[data-theme="dark"] .portfolio-grid .stat-hero-val.bullish,
[data-theme="system"] .portfolio-grid .stat-hero-val.bullish {
  color: #10b981;
}

[data-theme="dark"] .portfolio-grid .stat-hero-val.bearish,
[data-theme="system"] .portfolio-grid .stat-hero-val.bearish {
  color: #f43f5e;
}

/* Light Theme Palette (Calibrated for Institutional Clarity - No Over-Bold or Giant Numbers) */
[data-theme="light"] .portfolio-grid .overview-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .portfolio-grid .overview-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .portfolio-grid .stat-meta {
  color: #475569;
  font-weight: 600;
}

[data-theme="light"] .portfolio-grid .stat-hero-val {
  color: #0f172a;
  font-weight: 600;
}

[data-theme="light"] .portfolio-grid .stat-sub-text {
  color: #64748b;
}

[data-theme="light"] .portfolio-grid .stat-hero-val.bullish {
  color: #059669;
  font-weight: 600;
}

[data-theme="light"] .portfolio-grid .stat-hero-val.bearish {
  color: #dc2626;
  font-weight: 600;
}

[data-theme="light"] .portfolio-grid .overview-card.highlight {
  border-top: 2px solid #4f46e5;
  background: linear-gradient(180deg, rgba(79, 70, 229, 0.04) 0%, #ffffff 100%);
}

[data-theme="light"] .portfolio-grid .overview-card.card-accent-net {
  border-top: 2px solid #059669;
  background: linear-gradient(180deg, rgba(5, 150, 105, 0.04) 0%, #ffffff 100%);
}

[data-theme="light"] .portfolio-grid .overview-card.card-accent-cash {
  border-top: 2px solid #059669;
  background: linear-gradient(180deg, rgba(5, 150, 105, 0.04) 0%, #ffffff 100%);
}

[data-theme="light"] .portfolio-grid .overview-card.card-accent-holdings {
  border-top: 2px solid #0284c7;
  background: linear-gradient(180deg, rgba(2, 132, 199, 0.04) 0%, #ffffff 100%);
}

[data-theme="light"] .portfolio-grid .overview-card.card-accent-unrealized {
  border-top: 2px solid #7c3aed;
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.04) 0%, #ffffff 100%);
}

[data-theme="light"] .portfolio-grid .overview-card.card-accent-realized {
  border-top: 2px solid #d97706;
  background: linear-gradient(180deg, rgba(217, 119, 6, 0.04) 0%, #ffffff 100%);
}

[data-theme="light"] .portfolio-grid .overview-card.card-accent-var95 {
  border-top: 2px solid #d97706;
  background: linear-gradient(180deg, rgba(217, 119, 6, 0.04) 0%, #ffffff 100%);
}

[data-theme="light"] .portfolio-grid .overview-card.card-accent-var99 {
  border-top: 2px solid #dc2626;
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.04) 0%, #ffffff 100%);
}

[data-theme="light"] .portfolio-grid .overview-card.card-accent-cvar {
  border-top: 2px solid #e11d48;
  background: linear-gradient(180deg, rgba(225, 29, 72, 0.04) 0%, #ffffff 100%);
}

[data-theme="light"] .portfolio-grid .overview-card.card-accent-stress {
  border-top: 2px solid #b91c1c;
  background: linear-gradient(180deg, rgba(185, 28, 28, 0.04) 0%, #ffffff 100%);
}

[data-theme="light"] .portfolio-grid .overview-card.card-accent-concentration {
  border-top: 2px solid #0891b2;
  background: linear-gradient(180deg, rgba(8, 145, 178, 0.04) 0%, #ffffff 100%);
}

/* Generic Fallback Overview Card (Used in Research, Institutional, etc.) */
.overview-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s;
}

.overview-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-active);
}

.overview-card.highlight {
  border-color: rgba(0, 242, 254, 0.5);
  background: linear-gradient(180deg, rgba(0, 242, 254, 0.08) 0%, var(--bg-card) 100%);
}

.stat-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-hero-val {
  font-size: 1.35rem;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--text-primary);
}

.stat-sub-text {
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.overview-card.card-accent-gross {
  border-left: 3px solid #38bdf8;
}

.overview-card.card-accent-zakat {
  border-left: 3px solid #f59e0b;
}

.overview-card.card-accent-cgt {
  border-left: 3px solid #ef4444;
}

.overview-card.card-accent-net {
  border-left: 3px solid #10b981;
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.08) 0%, var(--bg-card) 100%);
}

.overview-card.card-accent-bonus {
  border-left: 3px solid #c084fc;
}

.overview-card.card-accent-right {
  border-left: 3px solid #06b6d4;
}

.action-btn-accent.xd-btn {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
  border: 1px solid rgba(139, 92, 246, 0.4);
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.25);
  transition: all 0.2s ease;
}

.action-btn-accent.xd-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
}

/* Paper Trading Grid (Left Ticket with Integrated Depth + Right Tables) */
.paper-trading-grid {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 1100px) {
  .paper-trading-grid {
    grid-template-columns: 1fr;
  }
}

/* Inline Market Depth Panel inside Order Ticket */
.ticket-market-depth-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  user-select: none;
  box-shadow: var(--shadow-card);
  animation: fadeInDepth 0.2s ease-out;
}

[data-theme="light"] .ticket-market-depth-panel,
[data-theme-mode="light"] .ticket-market-depth-panel,
body.light-theme .ticket-market-depth-panel {
  background: var(--bg-card);
  border-color: var(--border-subtle);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

@keyframes fadeInDepth {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.depth-inline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border-subtle);
}

.depth-inline-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* ========================================================================
   TRADING PIN SECURITY SECTION
   ======================================================================== */
.trading-pin-section {
  background: var(--bg-secondary, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.45rem 0.65rem;
  margin-top: 0.25rem;
  box-sizing: border-box;
}

[data-theme="light"] .trading-pin-section {
  background: rgba(0, 0, 0, 0.025);
  border-color: rgba(0, 0, 0, 0.08);
}

.trading-pin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pin-label-group {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}

.pin-label-icon {
  font-size: 0.85rem;
}

.btn-pin-config {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.btn-pin-config:hover {
  color: var(--color-accent);
  background: rgba(0, 242, 254, 0.1);
}

.pin-input-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pin-field-compact {
  width: 72px;
  height: 30px;
  padding: 2px 4px;
  font-size: 0.95rem;
  letter-spacing: 0.22rem;
  font-weight: 800;
  text-align: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: var(--font-numbers);
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.pin-field-compact:focus {
  border-color: var(--color-accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 242, 254, 0.2);
}

[data-theme="light"] .pin-field-compact {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.16);
  color: #0f172a;
}

.pin-status-pill {
  font-size: 0.68rem;
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  background: rgba(0, 230, 118, 0.12);
  color: var(--color-bullish);
  border: 1px solid rgba(0, 230, 118, 0.3);
  white-space: nowrap;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* ========================================================================
   MARKET DEPTH BY PRICE (LEVEL 2 DOM) CARD
   ======================================================================== */
.trading-market-depth-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
}

.depth-card-title-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.depth-inline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  box-sizing: border-box;
}

[data-theme="light"] .depth-inline-header,
[data-theme-mode="light"] .depth-inline-header,
body.light-theme .depth-inline-header {
  background: var(--bg-secondary);
  border-bottom-color: var(--border-subtle);
}

.depth-header-right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.depth-contract-pill {
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1.25;
  flex-shrink: 0;
}

.depth-contract-pill.contract-reg {
  background: rgba(0, 242, 254, 0.15);
  color: #00f2fe;
  border: 1px solid rgba(0, 242, 254, 0.35);
}

.depth-contract-pill.contract-fut {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

[data-theme="light"] .depth-contract-pill.contract-reg {
  background: rgba(2, 132, 199, 0.12);
  color: #0284c7;
  border-color: rgba(2, 132, 199, 0.3);
}

[data-theme="light"] .depth-contract-pill.contract-fut {
  background: rgba(217, 119, 6, 0.14);
  color: #d97706;
  border-color: rgba(217, 119, 6, 0.35);
}

.depth-symbol-pill {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.03em;
  flex-shrink: 0;
  text-transform: uppercase !important;
}

/* Ensure stock symbols and search inputs are ALWAYS capitalized across Trading and Home pages */
#paper-order-symbol,
#screener-search,
#scanner-search,
#research-symbol-input,
#wl-add-symbol,
#mm-symbol-input,
#inst-algo-symbol,
#mmkt-symbol-search,
#port-trade-symbol,
#div-symbol,
.symbol-search-input,
.search-input-clean,
.stock-symbol,
.stock-ticker,
.symbol-cell,
.symbol-col,
.pill-symbol,
.watchlist-sym,
.ticker-symbol,
[data-symbol] {
  text-transform: uppercase !important;
}

[data-theme="light"] .depth-symbol-pill {
  color: #0f172a;
}

.depth-name-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 135px;
  min-width: 0;
}

[data-theme="light"] .depth-name-label {
  color: #64748b;
}

.depth-inline-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.market-depth-symbol-pill {
  background: rgba(0, 242, 254, 0.14);
  color: var(--color-accent);
  font-weight: 700;
  font-size: 0.75rem;
  padding: 0.18rem 0.5rem;
  border-radius: 4px;
}

.market-depth-market-pill {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
}

.depth-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.depth-level-selector {
  display: inline-flex;
  align-items: center;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  padding: 2px;
  border: 1px solid var(--border-subtle);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .depth-level-selector,
[data-theme-mode="light"] .depth-level-selector,
body.light-theme .depth-level-selector {
  background: var(--bg-secondary);
  border-color: var(--border-subtle);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.depth-lvl-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 2px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.3;
}

.depth-lvl-btn:hover {
  color: var(--text-primary);
}

[data-theme="light"] .depth-lvl-btn,
[data-theme-mode="light"] .depth-lvl-btn,
body.light-theme .depth-lvl-btn {
  color: var(--text-muted);
}

[data-theme="light"] .depth-lvl-btn:hover,
[data-theme-mode="light"] .depth-lvl-btn:hover,
body.light-theme .depth-lvl-btn:hover {
  color: var(--text-primary);
}

.depth-lvl-btn.active {
  background: var(--color-accent);
  color: var(--color-accent-text, #ffffff);
  font-weight: 800;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .depth-lvl-btn.active,
[data-theme-mode="light"] .depth-lvl-btn.active,
body.light-theme .depth-lvl-btn.active {
  background: var(--color-accent);
  color: var(--color-accent-text, #ffffff);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
}

.depth-refresh-btn {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  cursor: pointer;
  font-size: 0.78rem;
  transition: all 0.15s;
}

.depth-refresh-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

.depth-card-body {
  padding: 0.85rem 1rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Touch Header (Bid | AUTO [5 10 20] | Ask) */
.depth-touch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 0.5rem;
}

.touch-label {
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

.touch-bid {
  text-align: left;
  color: var(--color-bullish, #00e676) !important;
}

[data-theme="light"] .touch-bid {
  color: #16a34a !important;
}

.touch-ask {
  text-align: right;
  color: var(--color-bearish, #ff3366) !important;
}

[data-theme="light"] .touch-ask {
  color: #dc2626 !important;
}

.depth-center-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Depth Column Headers */
.depth-grid-header {
  display: grid;
  grid-template-columns: 28px 1fr 64px 64px 1fr 28px;
  gap: 2px;
  padding: 0.25rem 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
  text-align: right;
  width: 100%;
  box-sizing: border-box;
}

.depth-grid-header .col-bid-orders {
  text-align: left;
}

.depth-grid-header .col-bid-vol {
  text-align: right;
  padding-right: 4px;
}

.depth-grid-header .col-bid-px {
  text-align: right;
  padding-right: 6px;
  color: var(--color-bullish);
}

.depth-grid-header .col-ask-px {
  text-align: left;
  padding-left: 6px;
  color: var(--color-bearish);
}

.depth-grid-header .col-ask-vol {
  text-align: right;
  padding-right: 4px;
}

.depth-grid-header .col-ask-orders {
  text-align: right;
}

/* Depth Rows List */
.depth-rows-list {
  display: flex;
  flex-direction: column;
  gap: 1.5px;
  max-height: 520px;
  overflow-y: auto;
  overflow-x: hidden;
  /* Never show horizontal scrollbar */
  width: 100%;
  box-sizing: border-box;
}

.depth-row-item {
  display: grid;
  grid-template-columns: 28px 1fr 64px 64px 1fr 28px;
  gap: 2px;
  align-items: center;
  position: relative;
  overflow: hidden;
  /* Constrain visual depth bars within the row boundaries */
  padding: 3.5px 0.3rem;
  font-size: 0.8rem;
  font-family: var(--font-numbers);
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.12s ease;
  width: 100%;
  box-sizing: border-box;
}

.depth-row-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Horizontal Visual Depth Bars - Contained strictly within their 50% half of the row */
.depth-bar-bid {
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(50% + 1px);
  max-width: calc(50% - 1px);
  background: rgba(0, 230, 118, 0.18);
  border-radius: 3px 0 0 3px;
  z-index: 1;
  pointer-events: none;
  transition: width 0.25s ease-out;
}

.depth-bar-ask {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% + 1px);
  max-width: calc(50% - 1px);
  background: rgba(255, 51, 102, 0.18);
  border-radius: 0 3px 3px 0;
  z-index: 1;
  pointer-events: none;
  transition: width 0.25s ease-out;
}

[data-theme="light"] .depth-bar-bid {
  background: rgba(0, 180, 80, 0.18);
}

[data-theme="light"] .depth-bar-ask {
  background: rgba(230, 40, 80, 0.16);
}

.depth-cell {
  position: relative;
  z-index: 2;
  white-space: nowrap;
}

.cell-bid-orders {
  text-align: left;
  color: var(--text-muted);
  font-size: 0.74rem;
}

.cell-bid-vol {
  text-align: right;
  padding-right: 4px;
  color: var(--text-primary);
  font-weight: 500;
}

.cell-bid-px {
  text-align: right;
  padding-right: 6px;
  color: var(--color-bullish);
  font-weight: 700;
}

.cell-ask-px {
  text-align: left;
  padding-left: 6px;
  color: var(--color-bearish);
  font-weight: 700;
}

.cell-ask-vol {
  text-align: right;
  padding-right: 4px;
  color: var(--text-primary);
  font-weight: 500;
}

.cell-ask-orders {
  text-align: right;
  color: var(--text-muted);
  font-size: 0.74rem;
}

/* Imbalance / Pressure Distribution Bar */
.depth-imbalance-wrap {
  margin-top: 0.35rem;
  padding: 0.35rem 0.25rem;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.depth-imbalance-metrics {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 600;
}

.imbalance-bid-text {
  color: var(--color-bullish);
}

.imbalance-spread-text {
  color: var(--text-muted);
  font-size: 0.7rem;
}

.imbalance-ask-text {
  color: var(--color-bearish);
}

.depth-pressure-track {
  height: 5px;
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 99px;
  display: flex;
  overflow: hidden;
}

.pressure-fill-bid {
  background: var(--color-bullish);
  height: 100%;
  transition: width 0.3s ease;
}

.pressure-fill-ask {
  background: var(--color-bearish);
  height: 100%;
  transition: width 0.3s ease;
}

/* PSX Market Depth Summary Strip (Themed for Dark & Light) */
.depth-summary-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  font-size: 0.72rem;
  border: 1px solid var(--border-subtle);
  margin-top: 6px;
  font-family: var(--font-numbers);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  box-sizing: border-box;
}

[data-theme="light"] .depth-summary-strip,
[data-theme-mode="light"] .depth-summary-strip,
body.light-theme .depth-summary-strip {
  background: var(--bg-secondary);
  border-color: var(--border-subtle);
}

/* Trades Section */
.depth-trades-section {
  border-top: 1px solid var(--border-subtle);
  padding-top: 0.4rem;
}

.depth-trades-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 0.25rem 0.3rem;
  border-radius: 4px;
  transition: background 0.15s;
}

.depth-trades-head:hover {
  background: rgba(255, 255, 255, 0.04);
}

.trades-title-text {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-primary);
}

.trades-chevron-icon {
  font-size: 1.1rem;
  color: var(--text-muted);
  font-weight: 700;
  transition: transform 0.2s ease;
}

.trades-col-headings {
  display: grid;
  grid-template-columns: 65px 75px 1fr 65px;
  padding: 0.25rem 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
}

.trades-tape-rows {
  display: flex;
  flex-direction: column;
  gap: 1.5px;
  max-height: 120px;
  overflow-y: auto;
  margin-top: 2px;
}

.trade-tape-row {
  display: grid;
  grid-template-columns: 65px 75px 1fr 65px;
  padding: 2.5px 0.3rem;
  font-size: 0.74rem;
  font-family: var(--font-numbers);
  align-items: center;
  border-radius: 2px;
}

.trade-tape-row:hover {
  background: rgba(255, 255, 255, 0.03);
}

.trade-tape-row.buy-trade .trade-price-val {
  color: var(--color-bullish);
}

.trade-tape-row.sell-trade .trade-price-val {
  color: var(--color-bearish);
}

.trade-direction-badge {
  text-align: right;
  font-weight: 700;
  font-size: 0.68rem;
  padding: 1px 5px;
  border-radius: 3px;
  display: inline-block;
  justify-self: end;
}

.trade-direction-badge.buy-badge {
  background: rgba(0, 230, 118, 0.14);
  color: var(--color-bullish);
}

.trade-direction-badge.sell-badge {
  background: rgba(255, 51, 102, 0.14);
  color: var(--color-bearish);
}

/* Pinned Benchmark / Index Floating Bar */
.depth-pinned-ticker-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: 0.76rem;
  font-family: var(--font-numbers);
  margin-top: 0.2rem;
}

.pinned-left-info {
  display: flex;
  align-items: center;
  gap: 5px;
}

.pinned-pin-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0;
  color: var(--color-accent);
  transition: transform 0.15s;
}

.pinned-pin-btn:hover {
  transform: scale(1.15);
}

.pinned-symbol-text {
  font-weight: 700;
  color: var(--text-primary);
}

.pinned-badge-type {
  font-size: 0.65rem;
  color: #f59e0b;
  font-weight: 800;
}

.pinned-right-info {
  display: flex;
  align-items: center;
  gap: 7px;
}

.pinned-price-val {
  font-weight: 700;
  color: var(--text-primary);
}

.pinned-chg-val.chg-positive,
.pinned-pct-val.chg-positive {
  color: var(--color-bullish);
}

.pinned-chg-val.chg-negative,
.pinned-pct-val.chg-negative {
  color: var(--color-bearish);
}

.pinned-menu-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0;
}

/* Ticket Symbol & Account 2-Column Grid */
.ticket-symbol-account-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: start;
  margin-bottom: 0;
}

/* 2-Column Row for Quantity & Target Limit Price (1st row Headings, 2nd row Number Inputs) */
.ticket-qty-limit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: start;
  margin-bottom: 0;
}

.ticket-qty-limit-grid.mode-limit {
  grid-template-columns: 1fr 1fr;
}

.ticket-qty-limit-grid .form-group-clean {
  margin-bottom: 0;
}

.ticket-qty-limit-grid .form-group-clean label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.72rem;
  font-weight: 700;
}


.account-selector-field {
  cursor: pointer;
  font-weight: 700;
  font-family: var(--font-numbers);
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.65rem;
  width: 100%;
  appearance: auto;
  transition: border-color 0.15s ease;
}

.account-selector-field:focus {
  border-color: var(--color-accent);
  outline: none;
}

[data-theme="light"] .account-selector-field {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}

/* Quick Action Buttons Above Market Depth (BUY Left, SELL Right) */
.depth-top-actions,
.depth-bottom-actions {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin: 0.25rem 0 0.45rem 0;
  height: 52px;
}

.depth-quick-btn {
  flex: 1;
  border: none;
  cursor: pointer;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.6rem;
  transition: transform 0.12s ease, filter 0.15s ease;
  font-family: var(--font-sans);
}

.depth-quick-btn:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.depth-quick-btn:active {
  transform: translateY(1px);
}

/* BUY on Left */
.btn-quick-buy {
  background: linear-gradient(135deg, #00c853 0%, #009638 100%);
  border-radius: 8px 0 0 8px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
  box-shadow: 0 4px 14px rgba(0, 200, 83, 0.3);
  opacity: 0.70;
  filter: saturate(0.85);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* SELL on Right */
.btn-quick-sell {
  background: linear-gradient(135deg, #ff334b 0%, #d81b36 100%);
  border-radius: 0 8px 8px 0;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%);
  box-shadow: 0 4px 14px rgba(235, 30, 60, 0.3);
  opacity: 0.70;
  filter: saturate(0.85);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-quick-buy.active-buy {
  opacity: 1;
  filter: saturate(1.15) brightness(1.05);
  box-shadow: 0 0 22px rgba(0, 200, 83, 0.75), 0 4px 14px rgba(0, 0, 0, 0.4);
  transform: scale(1.02);
  z-index: 2;
}

.btn-quick-sell.active-sell {
  opacity: 1;
  filter: saturate(1.15) brightness(1.05);
  box-shadow: 0 0 22px rgba(235, 30, 60, 0.75), 0 4px 14px rgba(0, 0, 0, 0.4);
  transform: scale(1.02);
  z-index: 2;
}

.quick-btn-label {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02rem;
  text-transform: uppercase;
}

.quick-btn-price {
  font-size: 0.95rem;
  font-weight: 800;
  font-family: var(--font-numbers);
}

.trading-ticket-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.card-header-clean {
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-title-text {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.ticket-market-pill {
  background: rgba(0, 242, 254, 0.12);
  color: var(--color-accent);
  border: 1px solid rgba(0, 242, 254, 0.3);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
}

.ticket-body {
  padding: 1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* Order Side Toggle (BUY / SELL) */
.order-side-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  padding: 0.3rem;
  border-radius: var(--radius-md);
}

.side-toggle-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-weight: 800;
  font-size: 0.9rem;
  padding: 0.6rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
}

.side-toggle-btn.active-buy {
  background: var(--color-bullish);
  color: #040d1a;
  box-shadow: 0 0 12px rgba(0, 230, 118, 0.35);
}

.side-toggle-btn.active-sell {
  background: var(--color-bearish);
  color: #ffffff;
  box-shadow: 0 0 12px rgba(255, 51, 102, 0.35);
}

/* Clean Form Controls */
.form-group-clean {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}

.form-group-clean label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.input-clean,
.select-clean {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  padding: 0.55rem 0.8rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  transition: border-color 0.15s;
  width: 100%;
}

.input-clean:focus,
.select-clean:focus {
  outline: none;
  border-color: var(--color-accent);
}

.input-with-live-price {
  position: relative;
  display: flex;
  align-items: center;
}

.price-tag-badge {
  position: absolute;
  right: 0.6rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-active);
  color: var(--color-accent);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-family: var(--font-mono);
  font-weight: 700;
}

.order-type-pills {
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr;
  gap: 0.35rem;
}

.type-pill {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 0.45rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
}

.type-pill:hover:not(.active) {
  border-color: var(--color-accent);
  color: var(--text-primary);
  background: var(--bg-card-hover);
}

[data-theme="light"] .type-pill:hover:not(.active) {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-primary);
}

.type-pill.active,
[data-theme="light"] .type-pill.active {
  background: var(--color-accent-grad) !important;
  border-color: transparent !important;
  color: var(--color-accent-text, #ffffff) !important;
  box-shadow: var(--shadow-glow) !important;
  font-weight: 700 !important;
}

.input-helper {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.quick-qty-presets {
  display: flex;
  gap: 0.25rem;
}

.preset-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.preset-pill:hover {
  color: var(--text-primary);
  border-color: var(--color-accent);
}

.order-est-box {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  backdrop-filter: blur(8px);
}

[data-theme="light"] .order-est-box {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
}

.est-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-family: var(--font-numbers);
}

[data-theme="light"] .est-row {
  color: #475569;
}

.est-row .bold-text {
  font-weight: 700;
  color: var(--text-primary);
}

[data-theme="light"] .est-row .bold-text {
  color: #0f172a;
}

.btn-execute-order {
  border: none;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 800;
  padding: 0.75rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
  width: 100%;
  letter-spacing: 0.02em;
}

.btn-execute-order.btn-buy {
  background: var(--color-bullish);
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow: 0 4px 14px rgba(0, 230, 118, 0.35);
}

.btn-execute-order.btn-sell {
  background: var(--color-bearish);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(255, 51, 102, 0.35);
}

.btn-execute-order:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

/* Dashboard Table Cards & Modern Tables */
.dashboard-table-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card-tabs-header {
  display: flex;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-card);
  padding: 0.45rem 0.75rem;
  gap: 0.45rem;
  align-items: center;
  overflow-x: auto;
}

[data-theme="light"] .card-tabs-header {
  background: #f8fafc;
  border-bottom-color: #e2e8f0;
}

.card-tab-btn {
  background: transparent;
  border: 1px solid var(--border-subtle);
  outline: none;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.42rem 0.95rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.card-tab-btn:focus,
.card-tab-btn:focus-visible {
  outline: none;
}

.card-tab-btn:hover:not(.active) {
  color: var(--text-primary);
  border-color: var(--color-accent);
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .card-tab-btn {
  color: var(--text-secondary);
  border-color: var(--border-subtle);
}

[data-theme="light"] .card-tab-btn:hover:not(.active) {
  color: var(--text-primary);
  border-color: var(--color-accent);
  background: rgba(0, 0, 0, 0.04);
}

.card-tab-btn.active,
[data-theme="light"] .card-tab-btn.active {
  color: var(--color-accent-text, #ffffff) !important;
  background: var(--color-accent-grad) !important;
  border-color: transparent !important;
  font-weight: 700 !important;
  box-shadow: var(--shadow-glow) !important;
}

#paper-autotrade-badge {
  font-size: 0.72rem;
  font-weight: 700;
  transition: all 0.15s ease;
}

#paper-autotrade-badge.badge-active {
  color: #00f2fe;
}

[data-theme="light"] #paper-autotrade-badge.badge-active {
  color: #0284c7;
  background: #e0f2fe;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-pill);
  border: 1px solid #bae6fd;
}

[data-theme="light"] #paper-autotrade-badge.badge-off {
  color: #94a3b8;
}

.table-responsive {
  overflow-x: auto;
  width: 100%;
}

.modern-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  text-align: left;
}

.modern-table thead th {
  background: rgba(0, 0, 0, 0.2);
  color: var(--text-muted);
  font-weight: 700;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.modern-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.12s;
}

.modern-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

.modern-table tbody td {
  padding: 0.75rem 1rem;
  color: var(--text-primary);
  white-space: nowrap;
  font-family: var(--font-mono);
}

.empty-state-cell {
  text-align: center;
  padding: 3rem 1rem !important;
  color: var(--text-muted) !important;
  font-family: var(--font-sans) !important;
  font-size: 0.88rem !important;
}

.tag-side-buy {
  background: var(--color-bullish-bg);
  color: var(--color-bullish);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.75rem;
}

.tag-side-sell {
  background: var(--color-bearish-bg);
  color: var(--color-bearish);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.75rem;
}

.tag-status-pending {
  background: rgba(255, 179, 0, 0.15);
  color: var(--color-gold);
  border: 1px solid rgba(255, 179, 0, 0.3);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
}

.tag-status-filled {
  background: rgba(0, 230, 118, 0.15);
  color: var(--color-bullish);
  border: 1px solid rgba(0, 230, 118, 0.3);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
}

.tag-status-cancelled {
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-muted);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
}

.btn-table-action {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-table-action:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--color-accent);
}

.btn-table-action.danger {
  color: var(--color-bearish);
  border-color: rgba(255, 51, 102, 0.3);
}

.btn-table-action.danger:hover {
  background: var(--color-bearish-bg);
}

[data-theme="light"] .btn-table-action {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #1e293b;
}

[data-theme="light"] .btn-table-action:hover {
  background: #e2e8f0;
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Watchlist Inline Add Form */
.add-to-watchlist-box {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.select-clean-inline,
.input-clean-inline {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  padding: 0.4rem 0.65rem;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-family: var(--font-sans);
}

.input-clean-inline {
  max-width: 140px;
}

/* Modal Dialogs and Overlays */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: fadeIn 0.2s ease;
}

.modal-dialog {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
  width: 100%;
  max-width: 480px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-dialog.auth-dialog {
  max-width: 620px;
  width: 95%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-card, var(--bg-secondary));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}

.modal-dialog.auth-dialog .modal-body {
  max-height: calc(90vh - 65px);
  overflow-y: auto;
  padding: 1.15rem 1.4rem;
}

.auth-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
}

.auth-grid-2col .auth-full-width {
  grid-column: 1 / -1;
}

@media (max-width: 580px) {
  .modal-dialog.auth-dialog {
    max-width: 96%;
    margin: 10px auto;
  }

  .modal-dialog.auth-dialog .modal-body {
    padding: 1rem;
  }

  .auth-grid-2col {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }
}

.modal-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.modal-close-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
}

.modal-close-btn:hover {
  color: var(--text-primary);
}

.modal-tabs {
  display: flex;
  gap: 0.5rem;
}

.modal-tab-btn {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-tab-btn:hover:not(.active) {
  border-color: var(--color-accent);
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}

[data-theme="light"] .modal-tab-btn:hover:not(.active) {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-primary);
}

.modal-tab-btn.active,
[data-theme="light"] .modal-tab-btn.active {
  background: var(--color-accent-grad) !important;
  border-color: transparent !important;
  color: var(--color-accent-text, #ffffff) !important;
  box-shadow: var(--shadow-glow) !important;
  font-weight: 700 !important;
}

.modal-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.modal-instruction {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0;
}

.preset-amount-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.amount-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  padding: 0.6rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
}

.amount-pill:hover {
  background: rgba(0, 242, 254, 0.12);
  border-color: var(--color-accent);
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.auth-feature-notes {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.auth-feature-notes ul {
  margin: 0.4rem 0 0 1rem;
  padding: 0;
}

.btn-primary-block {
  background: var(--color-accent-grad);
  border: none;
  color: var(--color-accent-text, #ffffff) !important;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 800;
  padding: 0.75rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  box-shadow: var(--shadow-glow);
  transition: transform 0.15s, filter 0.15s;
}

.btn-primary-block:hover {
  transform: translateY(-1px);
}

/* ========================================================================
   TARGET PRICE HIT CELEBRATION POP-UP MODAL (THE PRICE-HIT ENGINE)
   ======================================================================== */
.pop-alert-overlay {
  z-index: 1100;
}

.pop-alert-dialog {
  max-width: 520px;
  border: 2px solid var(--color-bullish);
  box-shadow: 0 0 40px rgba(0, 230, 118, 0.45);
  animation: popBounce 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popBounce {
  0% {
    transform: scale(0.85);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.pop-alert-badge {
  background: var(--color-bullish);
  color: #040d1a;
  font-weight: 900;
  font-size: 0.78rem;
  text-align: center;
  padding: 0.4rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pop-alert-header {
  padding: 1rem 1.25rem 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pop-alert-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
}

.pop-alert-time {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.pop-alert-content {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pop-order-hero {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-size: 1.35rem;
  font-weight: 800;
  font-family: var(--font-mono);
}

.pop-order-side {
  color: var(--color-bullish);
}

.pop-order-side.sell {
  color: var(--color-bearish);
}

.pop-order-qty {
  color: var(--text-primary);
}

.pop-order-sym {
  color: var(--color-accent);
}

.pop-order-at {
  color: var(--text-muted);
  font-size: 1rem;
}

.pop-order-price {
  color: var(--color-gold);
}

.pop-order-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.detail-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.detail-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 700;
}

.detail-val {
  font-size: 0.85rem;
  color: var(--text-primary);
  font-weight: 600;
  font-family: var(--font-mono);
}

.pop-alert-footer {
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

.btn-secondary-clean {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.82rem;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.btn-primary-clean {
  background: var(--color-bullish);
  border: none;
  color: #040d1a;
  font-weight: 800;
  font-size: 0.82rem;
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 230, 118, 0.3);
}

/* Floating Toast Notifications */
.toast-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  pointer-events: none;
}

.toast-item {
  background: var(--bg-card);
  border: 1px solid var(--border-active);
  color: var(--text-primary);
  padding: 0.75rem 1.1rem;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  backdrop-filter: blur(10px);
  pointer-events: auto;
  animation: slideInRight 0.3s ease;
  max-width: 360px;
}

.toast-item.success {
  border-color: var(--color-bullish);
}

.toast-item.error {
  border-color: var(--color-bearish);
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ========================================================================
   TARGET & TRAILING STOP LOSS (BRACKET) STYLES
   ======================================================================== */
.bracket-form-panel {
  background: rgba(14, 165, 233, 0.05);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: var(--radius-md);
  padding: 0.75rem 0.85rem;
  margin-bottom: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  animation: fadeIn 0.2s ease-in-out;
}

[data-theme="light"] .bracket-form-panel {
  background: rgba(2, 132, 199, 0.04);
  border: 1px solid rgba(2, 132, 199, 0.22);
}

.bracket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 0.4rem;
}

/* 2-Column Row for Target Price & Stop Loss Price (1st row Headings, 2nd row Number Inputs) */
.bracket-prices-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}

.bracket-prices-grid>div {
  min-width: 0;
  box-sizing: border-box;
}

.bracket-prices-grid .form-group-clean {
  margin-bottom: 0;
}

.bracket-prices-grid .label-with-calc {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
}

.bracket-prices-grid .label-with-calc label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.7rem;
  font-weight: 700;
  flex: 1;
  min-width: 0;
}

.bracket-prices-grid .calc-gain-badge,
.bracket-prices-grid .calc-loss-badge {
  font-size: 0.68rem;
  font-weight: 700;
  flex-shrink: 0;
  white-space: nowrap;
}

.bracket-prices-grid .input-clean {
  padding-right: 46px;
  box-sizing: border-box;
}

.bracket-prices-grid .price-tag-badge {
  right: 0.35rem;
  font-size: 0.62rem;
  padding: 0.12rem 0.35rem;
}


.bracket-title {
  font-size: 0.76rem;
  font-weight: 800;
  color: #38bdf8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bracket-badge-live {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-pill);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
}

.label-with-calc {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.calc-gain-badge {
  color: #22c55e;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-mono);
}

.calc-loss-badge {
  color: #ef4444;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-mono);
}

.calc-trail-badge {
  color: #c084fc;
  font-size: 0.7rem;
  font-weight: 700;
  font-family: var(--font-mono);
}

.profit-pill {
  background: rgba(34, 197, 94, 0.18) !important;
  color: #22c55e !important;
  border: 1px solid rgba(34, 197, 94, 0.35);
}

.loss-pill {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.sl-type-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}

.sl-choice-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.sl-choice-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(56, 189, 248, 0.4);
}

.sl-choice-btn.active {
  background: rgba(56, 189, 248, 0.12);
  border-color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
}

.sl-icon {
  font-size: 1.1rem;
}

.sl-btn-text strong {
  display: block;
  font-size: 0.78rem;
  color: var(--text-primary);
  line-height: 1.1;
}

.sl-btn-text small {
  display: block;
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.sl-choice-btn.active .sl-btn-text strong {
  color: #38bdf8;
}

.bracket-status-explainer {
  background: rgba(14, 165, 233, 0.08);
  border: 1px dashed rgba(56, 189, 248, 0.35);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.7rem;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--text-secondary);
  box-sizing: border-box;
  width: 100%;
}

.bracket-status-explainer strong {
  color: #38bdf8;
}

[data-theme="light"] .bracket-status-explainer {
  background: rgba(2, 132, 199, 0.06);
  border: 1px dashed rgba(2, 132, 199, 0.35);
  color: #0369a1;
}

[data-theme="light"] .bracket-status-explainer strong {
  color: #0c4a6e;
}

[data-theme="light"] .sl-choice-btn {
  background: #ffffff;
  border-color: #cbd5e1;
}

[data-theme="light"] .sl-choice-btn.active {
  background: #e0f2fe;
  border-color: #0284c7;
  box-shadow: 0 0 10px rgba(2, 132, 199, 0.2);
}

[data-theme="light"] .sl-choice-btn.active .sl-btn-text strong {
  color: #0369a1;
}

.btn-table-action.bracket {
  background: rgba(56, 189, 248, 0.1);
  border-color: rgba(56, 189, 248, 0.35);
  color: #38bdf8;
  font-weight: 700;
}

.btn-table-action.bracket:hover {
  background: rgba(56, 189, 248, 0.25);
  border-color: #38bdf8;
}

.badge-trailing-type {
  display: inline-block;
  background: rgba(192, 132, 252, 0.15);
  color: #c084fc;
  border: 1px solid rgba(192, 132, 252, 0.35);
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 700;
}

.badge-constant-type {
  display: inline-block;
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 700;
}

.pop-alert-badge.trailing {
  background: #a855f7 !important;
  color: #ffffff !important;
}

.pop-alert-badge.stop-loss {
  background: #ef4444 !important;
  color: #ffffff !important;
}

/* ========================================================================
   AUTO TRADE BOT COMPONENT STYLES
   ======================================================================== */
.autotrade-top-group {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.action-btn-autotrade {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  transition: all 0.2s ease;
}

.action-btn-autotrade:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--text-primary);
}

.action-btn-autotrade.active {
  background: rgba(34, 197, 94, 0.15);
  border-color: #22c55e;
  color: #4ade80;
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.3);
}

.action-btn-autotrade-gear {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.2s;
}

.action-btn-autotrade-gear:hover {
  background: rgba(0, 242, 254, 0.12);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.status-indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.status-indicator-dot.on {
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: pulseDot 1.5s infinite;
}

.status-indicator-dot.off {
  background: #64748b;
}

@keyframes pulseDot {
  0% {
    transform: scale(0.9);
    opacity: 0.7;
  }

  50% {
    transform: scale(1.3);
    opacity: 1;
  }

  100% {
    transform: scale(0.9);
    opacity: 0.7;
  }
}

.broker-ready-pill {
  background: rgba(0, 242, 254, 0.12);
  border: 1px solid rgba(0, 242, 254, 0.3);
  color: var(--color-accent);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
}

[data-theme="light"] .broker-ready-pill {
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  color: #0369a1;
  font-weight: 700;
}

/* Auto Trade Desk Banner */
.autotrade-desk-banner {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.85));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.4rem;
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  transition: all 0.2s ease;
}

.autotrade-desk-banner.active {
  border-color: rgba(34, 197, 94, 0.5);
  box-shadow: 0 0 24px rgba(34, 197, 94, 0.18);
}

[data-theme="light"] .autotrade-desk-banner {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .autotrade-desk-banner.active {
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
  border-color: #86efac;
  box-shadow: 0 4px 20px -2px rgba(34, 197, 94, 0.15), 0 1px 4px rgba(34, 197, 94, 0.06);
}

.bot-banner-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  min-width: 280px;
}

.bot-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: rgba(0, 242, 254, 0.12);
  border: 1px solid rgba(0, 242, 254, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

[data-theme="light"] .bot-avatar {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.1);
}

.bot-info-col {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.bot-title-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.bot-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

[data-theme="light"] .bot-title {
  color: #0f172a;
}

.bot-status-pill {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: all 0.15s ease;
}

.bot-status-pill.on {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
  border: 1px solid #22c55e;
}

[data-theme="light"] .bot-status-pill.on {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
}

.bot-status-pill.standby {
  background: rgba(234, 179, 8, 0.2);
  color: #facc15;
  border: 1px solid #eab308;
}

[data-theme="light"] .bot-status-pill.standby {
  background: #fef9c3;
  color: #a16207;
  border: 1px solid #fde047;
}

.bot-status-pill.off {
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-muted);
  border: 1px solid rgba(148, 163, 184, 0.3);
}

[data-theme="light"] .bot-status-pill.off {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
}

.bot-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

[data-theme="light"] .bot-desc {
  color: #475569;
}

.bot-banner-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.btn-bot-primary {
  background: var(--color-bullish);
  color: #040d1a;
  border: none;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0.62rem 1.15rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  box-shadow: 0 2px 10px rgba(0, 230, 118, 0.3);
  transition: all 0.15s ease;
}

[data-theme="light"] .btn-bot-primary {
  background: #059669;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.28);
}

[data-theme="light"] .btn-bot-primary:hover {
  background: #047857;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.38);
}

.btn-bot-primary.pause-mode {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.4);
  box-shadow: none;
}

[data-theme="light"] .btn-bot-primary.pause-mode {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fca5a5;
  box-shadow: none;
}

[data-theme="light"] .btn-bot-primary.pause-mode:hover {
  background: #fecaca;
}

.btn-bot-primary:hover {
  transform: translateY(-1px);
}

.btn-bot-secondary {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.62rem 1rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.15s ease;
}

.btn-bot-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--color-accent);
}

[data-theme="light"] .btn-bot-secondary {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #1e293b;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .btn-bot-secondary:hover {
  background: #f8fafc;
  border-color: #0284c7;
  color: #0284c7;
}

.btn-bot-ghost {
  background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.62rem 0.9rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-bot-ghost:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

[data-theme="light"] .btn-bot-ghost {
  background: #ffffff;
  border: 1px dashed #d97706;
  color: #b45309;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .btn-bot-ghost:hover {
  background: #fef3c7;
  border-color: #b45309;
  color: #92400e;
}

/* Parameters Strip */
.autotrade-params-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.65rem;
  margin-bottom: 1.25rem;
}

.param-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transition: all 0.15s ease;
}

.param-box.highlight-param {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.04);
}

[data-theme="light"] .param-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .param-box:hover {
  border-color: #cbd5e1;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .param-box.highlight-param {
  background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%);
  border-color: #fde68a;
}

.param-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
}

[data-theme="light"] .param-label {
  color: #64748b;
}

.param-val {
  font-size: 0.88rem;
  color: var(--text-primary);
  font-weight: 700;
  font-family: var(--font-sans);
}

[data-theme="light"] .param-val {
  color: #0f172a;
}

.param-val-method {
  color: #fbbf24;
  font-weight: 700;
}

[data-theme="light"] .param-val-method {
  color: #b45309;
}

.param-val-ml {
  color: #00f2fe;
  font-weight: 700;
}

[data-theme="light"] .param-val-ml {
  color: #0284c7;
}

.param-val.bullish {
  color: #22c55e;
}

[data-theme="light"] .param-val.bullish {
  color: #15803d;
  font-weight: 800;
}

.param-val.bearish {
  color: #ef4444;
}

[data-theme="light"] .param-val.bearish {
  color: #dc2626;
  font-weight: 800;
}

/* Auto Trade Logs Section */
.autotrade-logs-section {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.logs-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logs-section-title {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

[data-theme="light"] .logs-section-title {
  color: #1e293b;
  font-weight: 800;
}

.tag-action-autobuy {
  background: rgba(34, 197, 94, 0.18);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.35);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 800;
}

[data-theme="light"] .tag-action-autobuy {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
}

.tag-action-bracket {
  background: rgba(56, 189, 248, 0.18);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 800;
}

[data-theme="light"] .tag-action-bracket {
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd;
}

[data-theme="light"] .modern-table thead th {
  background: #f8fafc;
  color: #475569;
  border-bottom: 1px solid #e2e8f0;
}

[data-theme="light"] .modern-table tbody tr {
  border-bottom: 1px solid #f1f5f9;
}

[data-theme="light"] .modern-table tbody tr:hover {
  background: #f8fafc;
}

[data-theme="light"] .modern-table tbody td {
  color: #0f172a;
}

[data-theme="light"] .btn-table-action {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .btn-table-action:hover {
  background: #f8fafc;
  border-color: #0284c7;
  color: #0284c7;
}

/* Modal and Stop Loss Selector Helpers */
.modal-method-label {
  color: #fbbf24;
}

.modal-method-tag {
  color: #00f2fe;
}

.modal-ml-label {
  color: #00f2fe;
}

.modal-toggle-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 8px 10px;
  border-radius: 6px;
  margin: 0;
}

.modal-toggle-shariah label {
  color: #22c55e;
}

.modal-toggle-dynamic label {
  color: #38bdf8;
}

.modal-activate-box {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 10px;
  border-radius: 8px;
  margin-top: 0.5rem;
}

[data-theme="light"] .modal-method-label {
  color: #b45309;
}

[data-theme="light"] .modal-method-tag {
  color: #0284c7;
}

[data-theme="light"] .modal-ml-label {
  color: #0284c7;
}

[data-theme="light"] .modal-toggle-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

[data-theme="light"] .modal-toggle-shariah label {
  color: #15803d;
}

[data-theme="light"] .modal-toggle-dynamic label {
  color: #0284c7;
}

[data-theme="light"] .modal-activate-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

[data-theme="light"] .sl-choice-btn {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .sl-choice-btn:hover {
  background: #f8fafc;
  border-color: #0284c7;
}

[data-theme="light"] .sl-choice-btn.active {
  background: #e0f2fe;
  border-color: #0284c7;
  box-shadow: 0 0 0 1px #0284c7, 0 2px 8px rgba(2, 132, 199, 0.15);
}

[data-theme="light"] .sl-choice-btn.active .sl-btn-text strong {
  color: #0284c7;
}

/* ========================================================================
   SEHRAI BUSINESS — MAIN NAVIGATION STRIP & ADMIN STYLES
   ======================================================================== */

.main-nav-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.25rem 1.25rem 0.25rem;
  background: var(--bg-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  overflow-x: auto;
  scrollbar-width: none;
}

.main-nav-strip::-webkit-scrollbar {
  display: none;
}

.main-nav-strip .app-view-nav {
  display: inline-flex;
  gap: 0.35rem;
  background: var(--bg-secondary);
  padding: 0.25rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.main-nav-strip .view-nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  padding: 0.45rem 1.15rem;
  border-radius: var(--radius-pill);
  font-weight: 500;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.main-nav-strip .view-nav-tab:hover:not(.active) {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

.main-nav-strip .view-nav-tab.active {
  background: var(--color-accent-grad);
  color: var(--color-accent-text, #ffffff) !important;
  box-shadow: var(--shadow-glow);
  font-weight: 600;
}

.main-nav-strip .view-nav-tab.admin-nav-tab {
  border-color: rgba(245, 158, 11, 0.4) !important;
  color: #f59e0b !important;
  background: rgba(245, 158, 11, 0.08) !important;
}

.main-nav-strip .view-nav-tab.admin-nav-tab.active {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #000000 !important;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.45) !important;
}

.badge-role-admin {
  background: #f59e0b;
  color: #000000;
  font-size: 0.65rem;
  font-weight: 900;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  margin-left: 0.35rem;
  vertical-align: middle;
  letter-spacing: 0.05em;
}

.badge-role-manager {
  background: #a855f7;
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 900;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  margin-left: 0.35rem;
  vertical-align: middle;
  letter-spacing: 0.05em;
}

/* Admin Client Inspection Banner in Trading Desk */
.admin-watch-banner {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(217, 119, 6, 0.08));
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: var(--radius-md);
  padding: 0.75rem 1.25rem;
  margin-bottom: 0.85rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.15);
  animation: fadeIn 0.2s ease-in-out;
}

.admin-watch-info {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.88rem;
}

.admin-watch-icon {
  font-size: 1.2rem;
}

.admin-watch-title {
  font-weight: 800;
  color: #f59e0b;
  letter-spacing: 0.02em;
}

.admin-watch-name {
  font-weight: 700;
  color: var(--text-primary);
  margin-left: 0.35rem;
}

.admin-watch-email {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-left: 0.35rem;
}

.admin-watch-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.admin-watch-select {
  border-color: rgba(245, 158, 11, 0.45) !important;
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  font-size: 0.82rem;
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-pill);
}

.btn-action-watch {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #f59e0b;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-action-watch:hover {
  background: #f59e0b;
  color: #000;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}

/* Admin Terminal Filter Bar & Table */
.admin-filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin: 1.25rem 0;
  flex-wrap: wrap;
}

.admin-filter-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.admin-tab-btn {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 0.42rem 0.95rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-tab-btn:hover:not(.active) {
  border-color: var(--color-accent);
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}

[data-theme="light"] .admin-tab-btn:hover:not(.active) {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-primary);
}

.admin-tab-btn.active,
[data-theme="light"] .admin-tab-btn.active {
  background: var(--color-accent-grad) !important;
  border-color: transparent !important;
  color: var(--color-accent-text, #ffffff) !important;
  box-shadow: var(--shadow-glow) !important;
  font-weight: 700 !important;
}

.badge-count-pill {
  background: #eab308;
  color: #000000;
  font-weight: 900;
  font-size: 0.72rem;
  padding: 0.1rem 0.45rem;
  border-radius: 9999px;
  margin-left: 0.35rem;
}

.admin-search-wrapper {
  min-width: 260px;
  flex: 1;
  max-width: 380px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th,
.admin-table td {
  padding: 0.65rem 0.65rem;
  font-size: 0.82rem;
  vertical-align: middle;
}

.admin-table th:first-child,
.admin-table td:first-child {
  padding-left: 1rem;
}

.admin-table th:last-child,
.admin-table td:last-child {
  padding-right: 1rem;
}

.admin-table tr.row-pending {
  background: rgba(234, 179, 8, 0.04);
}

.admin-action-btns {
  display: flex;
  gap: 0.35rem;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
}

.btn-action-approve {
  background: #10b981;
  color: #ffffff;
  border: none;
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-action-approve:hover {
  background: #059669;
}

.btn-action-reject {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-action-reject:hover {
  background: #ef4444;
  color: #ffffff;
}

.btn-action-toggle {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-action-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
}

.btn-action-pw {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-action-pw:hover {
  background: #38bdf8;
  color: #000000;
}

.badge-role.admin {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.35);
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 0.72rem;
}

.badge-role.manager {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.35);
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 0.72rem;
}

.badge-role.user {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.72rem;
}

.btn-action-edit {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-action-edit:hover {
  background: #a855f7;
  color: #ffffff;
}

.select-role-inline {
  background: var(--bg-card, #131722);
  color: var(--text-primary, #ffffff);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.15));
  padding: 0.28rem 0.45rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
}

.select-status-inline {
  background: var(--bg-card, #131722);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.15));
  padding: 0.28rem 0.5rem;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
}

.select-status-inline.status-approved {
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.12);
}

.select-status-inline.status-restricted {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.12);
}

.select-status-inline.status-pending {
  color: #eab308;
  border-color: rgba(234, 179, 8, 0.45);
  background: rgba(234, 179, 8, 0.12);
}

.select-status-inline option {
  background: var(--bg-secondary, #0f141f);
  color: var(--text-primary, #ffffff);
}

.select-autotrade-inline {
  background: var(--bg-card, #131722);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.15));
  padding: 0.28rem 0.5rem;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
}

.select-autotrade-inline.autotrade-allowed {
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.45);
  background: rgba(56, 189, 248, 0.12);
}

.select-autotrade-inline.autotrade-restricted {
  color: var(--text-muted, #94a3b8);
  border-color: var(--border-subtle);
  background: rgba(255, 255, 255, 0.04);
}

.select-autotrade-inline option {
  background: var(--bg-secondary, #0f141f);
  color: var(--text-primary, #ffffff);
}

.badge-status.approved {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 0.72rem;
}

.badge-status.pending {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
  border: 1px solid rgba(234, 179, 8, 0.35);
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 0.72rem;
}

.badge-status.deactivated {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.35);
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 0.72rem;
  margin-left: 0.25rem;
}

/* Auth Modal Enhancements */
.label-with-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.35rem;
}

.btn-text-link {
  background: none;
  border: none;
  color: #38bdf8;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.btn-text-link:hover {
  color: #7dd3fc;
}

.field-sub-hint {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: -0.2rem;
  margin-bottom: 0.4rem;
}

/* ========================================================================
   TREND BADGES & CAP/VOL TAGS — SOLID VIBRANT BACKGROUNDS + WHITE TEXT
   Matches user's Google Sheets design with rich, high-contrast jewel tones
   ======================================================================== */
.trend-cell-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 125px;
}

.trend-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 800;
  color: #ffffff !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  user-select: none;
}

.trend-badge .trend-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  line-height: 1;
}

.trend-badge .trend-text {
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* 1. EXTREME BULLISH — Solid Deep Vivid Emerald with White Text */
.trend-badge.extreme-bullish {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.trend-badge.extreme-bullish:hover {
  box-shadow: 0 3px 12px rgba(16, 185, 129, 0.6);
  transform: translateY(-1px);
}

/* 2. STRONG BULLISH — Solid Forest Green with White Text */
.trend-badge.strong-bullish {
  background: linear-gradient(135deg, #15803d 0%, #16a34a 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.35);
}

/* 3. BULLISH — Solid Clean Jade Green with White Text */
.trend-badge.bullish {
  background: #16a34a !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.3);
}

/* 4. OVER-BOUGHT — Solid Electric Amber-Gold with White Text */
.trend-badge.overbought {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* 5. OVER-SOLD — Solid Electric Aquamarine / Cyan-Blue with White Text */
.trend-badge.oversold {
  background: linear-gradient(135deg, #0284c7 0%, #06b6d4 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 2px 8px rgba(6, 182, 212, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* 6. SQUEEZE — Solid Royal Violet with White Text */
.trend-badge.squeeze {
  background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
}

/* 7. NEUTRAL / SIDEWAYS — Solid Steel Slate with White Text */
.trend-badge.neutral {
  background: #475569 !important;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

/* 8. BEARISH — Solid Coral Red with White Text */
.trend-badge.bearish {
  background: #dc2626 !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3);
}

/* 9. STRONG BEARISH — Solid Crimson Red with White Text */
.trend-badge.strong-bearish {
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 6px rgba(185, 28, 28, 0.35);
}

/* 10. EXTREME BEARISH — Solid Fiery Deep Ruby with White Text */
.trend-badge.extreme-bearish {
  background: linear-gradient(135deg, #991b1b 0%, #e11d48 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.trend-badge.extreme-bearish:hover {
  box-shadow: 0 3px 12px rgba(225, 29, 72, 0.6);
  transform: translateY(-1px);
}

/* Subtitle for Key Target Level (e.g. Above 191.06, Below 394.01, Support: 163.01) */
.trend-level-text {
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* Dedicated Solid Upper Cap, Lower Cap & Low Vol Chips with White Text */
.trend-cap-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  line-height: 1.2;
  white-space: nowrap;
  color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.trend-cap-tag.upper-cap {
  background: #ca8a04 !important;
  border: 1px solid #eab308;
  box-shadow: 0 0 8px rgba(202, 138, 4, 0.5);
}

.trend-cap-tag.lower-cap {
  background: #991b1b !important;
  border: 1px solid #dc2626;
  box-shadow: 0 0 8px rgba(153, 27, 27, 0.5);
}

.trend-cap-tag.low-vol {
  background: #475569 !important;
  border: 1px solid #64748b;
}

/* Backward-compatible inline sub-tag in case nested */
.trend-badge .trend-sub-tag {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 3px;
  text-transform: uppercase;
  color: #ffffff !important;
}

/* Light Theme: Maintain Crisp Contrast with Rich Solid Colors & White Text */
body.light-theme .trend-badge {
  color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

body.light-theme .trend-badge.extreme-bullish {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
}

body.light-theme .trend-badge.strong-bullish {
  background: linear-gradient(135deg, #15803d 0%, #16a34a 100%) !important;
}

body.light-theme .trend-badge.bullish {
  background: #16a34a !important;
}

body.light-theme .trend-badge.overbought {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
}

body.light-theme .trend-badge.oversold {
  background: linear-gradient(135deg, #0284c7 0%, #06b6d4 100%) !important;
}

body.light-theme .trend-badge.neutral {
  background: #64748b !important;
}

body.light-theme .trend-badge.bearish {
  background: #dc2626 !important;
}

body.light-theme .trend-badge.strong-bearish {
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%) !important;
}

body.light-theme .trend-badge.extreme-bearish {
  background: linear-gradient(135deg, #991b1b 0%, #e11d48 100%) !important;
}

body.light-theme .trend-level-text {
  color: #64748b;
}

/* Stock Sym & Range Lines */
.stock-sym-line {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stock-range-line {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-top: 2px;
}

.stock-range-line .hl-tag {
  font-weight: 700;
  color: var(--text-secondary);
}

.stock-range-line .hl-val {
  color: var(--text-primary);
}

.stock-range-line .hl-sep {
  color: var(--border-subtle);
  margin: 0 2px;
}

/* Dedicated Market Scanner */
.scanner-wrapper {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0.4rem 1.25rem 3rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.scanner-header-card {
  margin-bottom: 0.65rem !important;
}

.scanner-sub-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1.25rem;
  border: none !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.02) !important;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.scanner-search-box {
  min-width: 260px;
}

.scanner-table-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.scanner-table-header-wrap {
  width: 100%;
  background-color: var(--bg-secondary);
  border-bottom: 2px solid var(--border-subtle);
  overflow: hidden;
  scrollbar-gutter: stable;
}

.scanner-table-scroll {
  width: 100%;
  overflow-x: auto;
}

.scanner-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  table-layout: fixed;
}

.scanner-table thead {
  position: sticky;
  top: 0;
  z-index: 25;
  background-color: var(--bg-secondary);
}

.scanner-table th,
.scanner-table td {
  box-sizing: border-box;
  padding: 0.5rem 0.85rem;
}

.scanner-table th {
  height: 54px;
  background-color: var(--bg-secondary) !important;
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-top: none !important;
  border-bottom: 2px solid var(--border-subtle);
  text-align: center !important;
  vertical-align: middle;
}

.scanner-table th.sortable-th:hover {
  background-color: var(--bg-secondary) !important;
  color: var(--color-accent) !important;
  box-shadow: inset 0 0 0 1000px rgba(125, 125, 125, 0.08);
}

.scanner-table td {
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
  text-align: center;
}

.scanner-table th:nth-child(1),
.scanner-table td:nth-child(1) {
  width: 13%;
  text-align: center;
}

.scanner-table th:nth-child(2) {
  width: 9%;
  text-align: left !important;
  padding-left: 0.85rem;
}

.scanner-table td:nth-child(2) {
  width: 9%;
  text-align: left !important;
  padding-left: 0.85rem;
}

.scanner-table th:nth-child(3),
.scanner-table td:nth-child(3) {
  width: 19%;
  text-align: center;
}

.scanner-table th:nth-child(4),
.scanner-table td:nth-child(4) {
  width: 8%;
  text-align: center;
}

.scanner-table th:nth-child(5),
.scanner-table td:nth-child(5) {
  width: 8.5%;
  text-align: center;
}

.scanner-table th:nth-child(6),
.scanner-table td:nth-child(6) {
  width: 8%;
  text-align: center;
}

.scanner-table th:nth-child(7),
.scanner-table td:nth-child(7) {
  width: 8.5%;
  text-align: center;
}

.scanner-table th:nth-child(8),
.scanner-table td:nth-child(8) {
  width: 8.5%;
  text-align: center;
}

.scanner-table th:nth-child(9),
.scanner-table td:nth-child(9) {
  width: 8.5%;
  text-align: center;
}

.scanner-table th:nth-child(10),
.scanner-table td:nth-child(10) {
  width: 9%;
  text-align: center;
}

.scanner-table tr.clickable-stock-row {
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.scanner-table tr.clickable-stock-row:hover {
  background: rgba(56, 189, 248, 0.08) !important;
}

.scanner-sym-cell-clean {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.scanner-pivots-strip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 0;
  font-family: var(--font-mono, monospace);
  line-height: 1;
  white-space: nowrap;
}

.pivot-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: default;
}

.pivot-chip .lbl {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  line-height: 1;
  color: var(--text-muted, #94a3b8) !important;
  display: inline-block;
  user-select: none;
}

.pivot-chip .val {
  font-size: 0.88rem;
  font-weight: 800;
  font-family: var(--font-mono, monospace);
  letter-spacing: -0.01em;
  line-height: 1;
  background: transparent !important;
}

/* S2 (Support 2): Matching Ocean Blue Text */
.pivot-chip.p-s2 .val {
  color: #0284c7 !important;
}

/* S1 (Support 1): Matching Cyan-Teal Text */
.pivot-chip.p-s1 .val {
  color: #0891b2 !important;
}

/* PP (Pivot Point): Matching Royal Violet Text */
.pivot-chip.p-pp .val {
  color: #7e22ce !important;
  font-size: 0.88rem;
}

/* R1 (Resistance 1): Matching Coral Red Text */
.pivot-chip.p-r1 .val {
  color: #e11d48 !important;
}

/* R2 (Resistance 2): Matching Crimson Red Text */
.pivot-chip.p-r2 .val {
  color: #dc2626 !important;
}

/* Light Theme Overrides:
   Keep S2, S1, PP, R1, R2 label text dim without background boxes */
body.light-theme .pivot-chip {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.light-theme .pivot-chip .lbl {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #78716c !important;
}

body.light-theme .pivot-chip.p-s2 .val {
  color: #0284c7 !important;
}

body.light-theme .pivot-chip.p-s1 .val {
  color: #0891b2 !important;
}

body.light-theme .pivot-chip.p-pp .val {
  color: #7e22ce !important;
}

body.light-theme .pivot-chip.p-r1 .val {
  color: #e11d48 !important;
}

body.light-theme .pivot-chip.p-r2 .val {
  color: #dc2626 !important;
}

.scanner-sym-cell-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.scanner-sym-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.scanner-sym-name {
  font-weight: 800;
  color: var(--text-primary);
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-scanner-trade-inline {
  padding: 0.22rem 0.55rem;
  font-size: 0.74rem;
  line-height: 1.2;
  border-radius: 5px;
  flex-shrink: 0;
}

.scanner-sym-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scanner-sector-tag {
  font-size: 0.75rem;
  color: var(--text-secondary);
  background: var(--bg-surface-2);
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
}

.btn-scanner-action {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
}

.btn-scanner-action.chart {
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.3);
}

.btn-scanner-action.chart:hover {
  background: rgba(56, 189, 248, 0.15);
}

.btn-scanner-action.trade {
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.3);
}

.btn-scanner-action.trade:hover {
  background: rgba(34, 197, 94, 0.15);
}

.scanner-table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  background: var(--bg-surface-2);
  border-top: 1px solid var(--border-subtle);
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

body.light-theme .scanner-table-footer {
  background: linear-gradient(180deg, #ffffff 0%, #fbf9f4 100%);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Table Footer Stat Badges — Clean text adhering to theme color scheme */
.table-footer-count-badge,
#scanner-count-badge,
#payouts-count-badge {
  display: inline-flex;
  align-items: center;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--text-primary) !important;
  user-select: none;
}

/* Scanner Count: Follows theme primary typography */
.scanner-footer-badge,
#scanner-count-badge {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: var(--text-primary) !important;
}

body.light-theme .scanner-footer-badge,
body.light-theme #scanner-count-badge {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: var(--text-primary) !important;
}

.scanner-tip-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted) !important;
}

body.light-theme .scanner-tip-text {
  color: var(--text-muted) !important;
}

/* Admin Action Suspend & Reactivate */
.btn-action-suspend {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.35);
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-action-suspend:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: #ef4444;
}

.btn-action-reactivate {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.35);
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-action-reactivate:hover {
  background: rgba(34, 197, 94, 0.25);
  border-color: #22c55e;
}

.badge-status.suspended {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.35);
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 0.72rem;
}

.row-suspended {
  opacity: 0.75;
  background: rgba(239, 68, 68, 0.03);
}

.badge-role-investor,
.badge-role.user {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
}

/* ========================================================================
   SHARIAH COMPLIANCE (KMIALLSHR 🌙) STYLING
   ======================================================================== */
.shariah-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  margin-left: 2px;
  cursor: help;
  filter: drop-shadow(0 0 4px rgba(250, 204, 21, 0.45));
  transition: transform 0.15s ease;
}

.shariah-badge:hover {
  transform: scale(1.25);
}

.tag-badge-nc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(239, 68, 68, 0.18);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.45);
  margin-left: 3px;
  letter-spacing: 0.5px;
  line-height: 1.1;
  vertical-align: middle;
}

.tag-badge-xd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.18);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.45);
  margin-left: 3px;
  letter-spacing: 0.5px;
  line-height: 1.1;
  vertical-align: middle;
}

.tag-badge-xb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(59, 130, 246, 0.18);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.45);
  margin-left: 3px;
  letter-spacing: 0.5px;
  line-height: 1.1;
  vertical-align: middle;
}

.tag-badge-xr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(245, 158, 11, 0.18);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.45);
  margin-left: 3px;
  letter-spacing: 0.5px;
  line-height: 1.1;
  vertical-align: middle;
}

.pill-btn.shariah-pill {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.32);
  color: #10b981;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.32rem 0.8rem;
  min-height: 31px;
  box-sizing: border-box;
  border-radius: var(--radius-pill, 9999px);
  line-height: 1.2;
  transition: all 0.2s ease;
}

.pill-btn.shariah-pill .shariah-btn-label {
  color: inherit;
  font-size: inherit;
  font-weight: 500;
  letter-spacing: normal;
  transition: color 0.2s ease;
}

.pill-btn.shariah-pill .shariah-btn-moon {
  font-size: 0.88rem !important;
  line-height: 1;
  margin-left: 2px;
}

.pill-btn.shariah-pill:hover {
  background: rgba(16, 185, 129, 0.16);
  border-color: rgba(16, 185, 129, 0.55);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.25);
  color: #34d399;
}

.pill-btn.shariah-pill:hover .shariah-btn-label {
  color: #34d399;
}

.pill-btn.shariah-pill.active {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  color: #ffffff !important;
  border-color: #34d399 !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.45) !important;
  font-weight: 600 !important;
}

.pill-btn.shariah-pill.active .shariah-btn-label {
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* ========================================================================
   MARKET HEAT MAP (TREEMAP) STYLING
   ======================================================================== */
.heatmap-page-wrapper {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0.4rem 1.25rem 3rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.heatmap-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  background: var(--bg-card);
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
}

.heatmap-title-group {
  display: flex;
  flex-direction: column;
}

.heatmap-main-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.heatmap-subtitle {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 4px 0 0 0;
}

.heatmap-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.heatmap-control-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bg-surface-2);
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
}

.heatmap-control-item .control-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
}

.select-clean-inline {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  padding-right: 0.25rem;
}

.select-clean-inline option {
  background: #0f172a;
  color: #ffffff;
}

.heatmap-legend-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  background: var(--bg-card);
  padding: 0.65rem 1.25rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

.legend-scale {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
}

.legend-chip {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: #ffffff;
}

.legend-chip.neg-deep {
  background: #991b1b;
}

.legend-chip.neg-med {
  background: #dc2626;
}

.legend-chip.neg-light {
  background: #ef4444;
}

.legend-chip.neutral {
  background: #475569;
  color: #cbd5e1;
}

.legend-chip.pos-light {
  background: #22c55e;
  color: #000;
}

.legend-chip.pos-med {
  background: #16a34a;
}

.legend-chip.pos-deep {
  background: #15803d;
}

.heatmap-stats-summary {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

/* View button like Standard Capital */
.btn-heatmap-view {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: #ffffff;
  border: 1px solid #22c55e;
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.95rem;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3);
  transition: all 0.2s ease;
}

.btn-heatmap-view:hover {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.45);
}

/* Heatmap Canvas Container - Always Landscape */
.heatmap-canvas-container {
  width: 100%;
  min-height: 420px;
  height: calc(100vh - 210px);
  max-height: calc(100vw * 10 / 16);
  position: relative;
  background: #090d16;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

/* Portrait screens & extended monitors in portrait mode (e.g. 1080x1920 rotated Acer V226HQL):
   Keep Heat Map strictly LANDSCAPE (width > height), using widescreen 16:10 ratio */
@media (orientation: portrait),
(max-aspect-ratio: 1/1) {
  .heatmap-canvas-container {
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    max-height: calc(100vw * 10 / 16) !important;
    min-height: 360px !important;
  }
}

.heatmap-board {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* ================= SQUARIFIED TREEMAP LAYOUT (SECTOR WISE & MARKET WISE) ================= */

/* Sector Box for Sector Wise Mode */
.tm-sector-box {
  position: absolute;
  box-sizing: border-box;
  background: #0d1322;
  border: 1.5px solid #1e293b;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.tm-sector-box:hover {
  border-color: #38bdf8;
  z-index: 2;
}

.tm-sector-header {
  height: 24px;
  min-height: 24px;
  background: rgba(15, 23, 42, 0.95);
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  user-select: none;
  overflow: hidden;
}

.tm-sector-title {
  font-size: 0.72rem;
  font-weight: 800;
  color: #cbd5e1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tm-sector-stats {
  font-size: 0.68rem;
  font-family: var(--font-mono);
  font-weight: 700;
  white-space: nowrap;
}

.tm-sector-body {
  position: relative;
  width: 100%;
  height: calc(100% - 24px);
  overflow: hidden;
}

/* Stock Tile */
.tm-stock-tile {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.4);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  user-select: none;
  padding: 2px 4px;
  color: #ffffff;
  transition: filter 0.12s ease, outline 0.12s ease;
}

.tm-stock-tile:hover {
  filter: brightness(1.22) contrast(1.05);
  z-index: 10;
  outline: 2px solid #ffffff;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.85);
}

/* Typography Inside Stock Tiles */
.tm-sym {
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  display: block;
  text-align: center;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tm-sym-long {
  font-size: 0.88em !important;
  letter-spacing: -0.015em;
}

.tm-price {
  font-family: var(--font-mono);
  font-weight: 550;
  line-height: 1.15;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

.tm-chg {
  font-family: var(--font-mono);
  font-weight: 550;
  line-height: 1.1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

.tm-vol {
  font-family: var(--font-mono);
  font-weight: 450;
  opacity: 0.85;
  line-height: 1.1;
  white-space: nowrap;
}

.tm-shariah-moon {
  font-size: 0.75em;
  opacity: 0.9;
  vertical-align: middle;
  margin-left: 2px;
}

/* Scaled Typography Classes based on tile geometry */
.tm-size-xl .tm-sym {
  font-size: 1.35rem;
}

.tm-size-xl .tm-price {
  font-size: 0.95rem;
  margin-top: 3px;
}

.tm-size-xl .tm-chg {
  font-size: 0.82rem;
  margin-top: 1px;
}

.tm-size-xl .tm-vol {
  font-size: 0.72rem;
  margin-top: 2px;
}

.tm-size-lg .tm-sym {
  font-size: 1.05rem;
}

.tm-size-lg .tm-price {
  font-size: 0.80rem;
  margin-top: 2px;
}

.tm-size-lg .tm-chg {
  font-size: 0.72rem;
  margin-top: 1px;
}

.tm-size-lg .tm-vol {
  font-size: 0.65rem;
  margin-top: 1px;
}

.tm-size-md .tm-sym {
  font-size: 0.85rem;
}

.tm-size-md .tm-price {
  font-size: 0.70rem;
  margin-top: 1px;
}

.tm-size-md .tm-chg {
  font-size: 0.64rem;
}

.tm-size-md .tm-vol {
  display: none;
}

.tm-size-sm .tm-sym {
  font-size: 0.72rem;
}

.tm-size-sm .tm-price {
  display: none;
}

.tm-size-sm .tm-chg {
  font-size: 0.62rem;
  margin-top: 1px;
}

.tm-size-sm .tm-vol {
  display: none;
}

.tm-size-xs .tm-sym {
  font-size: 0.60rem;
}

.tm-size-xs .tm-price {
  display: none;
}

.tm-size-xs .tm-chg {
  font-size: 0.52rem;
  margin-top: 1px;
}

.tm-size-xs .tm-vol {
  display: none;
}

.tm-size-micro {
  padding: 1px 2px;
}

.tm-size-micro .tm-sym {
  font-size: 0.48rem;
  line-height: 1.1;
}

.tm-size-micro .tm-price,
.tm-size-micro .tm-chg,
.tm-size-micro .tm-vol {
  display: none;
}

/* Authentic Pakistani Market & TradingView Heatmap Colors */
.tm-color-neg-3 {
  background-color: #b71c1c;
}

/* <= -3.0% (Deep Red) */
.tm-color-neg-2 {
  background-color: #c62828;
}

/* -1.5% to -3.0% */
.tm-color-neg-1 {
  background-color: #d32f2f;
}

/* -0.5% to -1.5% */
.tm-color-neg-0 {
  background-color: #e53935;
}

/* 0% to -0.5% */
.tm-color-neutral {
  background-color: #374151;
  color: #e2e8f0;
}

/* 0.0% Unchanged */
.tm-color-pos-0 {
  background-color: #43a047;
}

/* 0% to +0.5% */
.tm-color-pos-1 {
  background-color: #388e3c;
}

/* +0.5% to +1.5% */
.tm-color-pos-2 {
  background-color: #2e7d32;
}

/* +1.5% to +3.0% */
.tm-color-pos-3 {
  background-color: #1b5e20;
}

/* >= +3.0% (Deep Forest Green) */

/* ========================================================================
   MARKET PULSE (SUBVIEW SWITCHER: HEAT MAP & TOP CONTRIBUTORS)
   ======================================================================== */
.pulse-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.pulse-view-switcher {
  display: inline-flex;
  align-items: center;
  background: var(--bg-surface-2, rgba(148, 163, 184, 0.08));
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 3px;
  gap: 3px;
}

.pulse-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.42rem 1.05rem;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  border: none;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  letter-spacing: -0.01em;
}

.pulse-toggle-btn:hover {
  color: var(--text-primary);
  background: rgba(148, 163, 184, 0.1);
}

.pulse-toggle-btn.active {
  background: var(--bg-card, #ffffff);
  color: var(--text-primary) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  font-weight: 600;
}

/* Contributors Summary Strip & Modern KPI Cards */
.contributors-summary-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

.contrib-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.contrib-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.1);
  border-color: var(--border-active);
}

.contrib-stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.index-level-card::before {
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
}

.pos-points-card::before {
  background: linear-gradient(90deg, #10b981, #34d399);
}

.neg-points-card::before {
  background: linear-gradient(90deg, #f43f5e, #fb7185);
}

.net-points-card::before {
  background: linear-gradient(90deg, #6366f1, #a855f7);
}

.contrib-card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.contrib-stat-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.contrib-card-icon {
  font-size: 0.95rem;
  opacity: 0.75;
}

.contrib-card-icon.pos-icon {
  color: #10b981;
  font-weight: 700;
}

.contrib-card-icon.neg-icon {
  color: #f43f5e;
  font-weight: 700;
}

.contrib-stat-val {
  font-size: 1.55rem;
  font-weight: 600;
  font-family: var(--font-mono, monospace);
  color: var(--text-primary);
  line-height: 1.2;
}

.contrib-stat-sub-row {
  display: flex;
  align-items: center;
  margin-top: 0.2rem;
}

.contrib-sub-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 6px;
  font-family: var(--font-mono, monospace);
}

.index-sub-pill {
  background: rgba(14, 165, 233, 0.1);
  color: #0284c7;
  border: 1px solid rgba(14, 165, 233, 0.2);
}

.pos-sub-pill {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.neg-sub-pill {
  background: rgba(244, 63, 94, 0.1);
  color: #f43f5e;
  border: 1px solid rgba(244, 63, 94, 0.2);
}

.net-sub-pill {
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
  border: 1px solid rgba(99, 102, 241, 0.2);
}

/* Main Contributors Chart Card */
.contributors-chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.5rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--shadow-card);
  min-height: 560px;
}

/* Card Header matching screenshot */
.contributors-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
}

.contributors-card-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.015em;
}

.contributors-type-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--bg-surface-2, rgba(148, 163, 184, 0.08));
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}

.contrib-type-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  padding: 5px 16px;
  font-size: 0.80rem;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
}

.contrib-type-btn:hover {
  color: var(--text-primary);
}

.contrib-type-btn.active {
  background: var(--bg-card, #002738);
  color: var(--text-primary) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  font-weight: 600;
}

.contributors-bars-stage {
  flex: 1;
  display: flex;
  justify-content: space-evenly;
  align-items: stretch;
  gap: 0.75rem;
  min-height: 460px;
  position: relative;
  padding: 1.5rem 0.5rem 0.75rem 0.5rem;
}

/* Individual Column for paired positive & negative */
.contrib-pair-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  min-width: 64px;
  max-width: 110px;
  height: 460px;
  padding: 0 4px;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.contrib-pair-col:hover {
  background: rgba(148, 163, 184, 0.06);
}

/* Top half (Positive) - exactly 50% height above baseline */
.contrib-top-half {
  height: 220px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 2px;
}

.contrib-top-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 8px;
  text-align: center;
  user-select: none;
  width: 100%;
  gap: 3px;
}

.contrib-sym-top {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  max-width: 98%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.contrib-pill-pos {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  color: #059669;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: var(--font-mono, monospace);
}

.contrib-bar-pos {
  width: 82%;
  max-width: 52px;
  background: linear-gradient(180deg, #10b981 0%, #059669 100%);
  border-radius: 4px 4px 1px 1px;
  transition: height 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.15s ease, transform 0.15s ease;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.2);
}

.contrib-bar-pos:hover {
  filter: brightness(1.15);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
  transform: scaleY(1.02);
}

/* Central Baseline (Zero Axis) */
.contrib-baseline {
  width: 100%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.3) 5%, rgba(148, 163, 184, 0.3) 95%, transparent);
  position: relative;
  z-index: 5;
}

/* Bottom half (Negative) - exactly 50% height below baseline */
.contrib-bottom-half {
  height: 220px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 2px;
}

.contrib-bar-neg {
  width: 82%;
  max-width: 52px;
  background: linear-gradient(180deg, #f43f5e 0%, #be123c 100%);
  border-radius: 1px 1px 4px 4px;
  transition: height 0.35s cubic-bezier(0.16, 1, 0.3, 1), filter 0.15s ease, transform 0.15s ease;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(244, 63, 94, 0.2);
}

.contrib-bar-neg:hover {
  filter: brightness(1.15);
  box-shadow: 0 4px 14px rgba(244, 63, 94, 0.4);
  transform: scaleY(1.02);
}

.contrib-bottom-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 8px;
  text-align: center;
  user-select: none;
  width: 100%;
  gap: 3px;
}

.contrib-sym-bottom {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  max-width: 98%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.contrib-pill-neg {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  color: #e11d48;
  background: rgba(244, 63, 94, 0.12);
  border: 1px solid rgba(244, 63, 94, 0.25);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: var(--font-mono, monospace);
}

/* Chart Bottom Summary Legend / Footer Ticker */
.contributors-chart-footer {
  margin-top: 1.25rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.footer-ticker-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 20px;
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid var(--border-subtle);
  font-size: 0.82rem;
  font-family: var(--font-mono, monospace);
}

.footer-ticker-badge .live-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  animation: pulseDotGlow 1.8s infinite ease-in-out;
}

.live-pulse-dot.dot-bull {
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
}

.live-pulse-dot.dot-bear {
  background: #f43f5e;
  box-shadow: 0 0 6px #f43f5e;
}

@keyframes pulseDotGlow {

  0%,
  100% {
    opacity: 0.6;
    transform: scale(0.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

.footer-ticker-badge .ticker-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.footer-ticker-badge .ticker-idx-name {
  font-weight: 600;
  color: var(--text-primary);
}

.footer-ticker-badge .ticker-idx-val {
  font-weight: 600;
  color: var(--text-primary);
}

.footer-ticker-badge .ticker-pill {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.74rem;
  font-weight: 600;
}

.ticker-pill.ticker-pos {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.ticker-pill.ticker-neg {
  background: rgba(244, 63, 94, 0.15);
  color: #f43f5e;
}

/* Floating Tooltip for Contributor Bars */
.contrib-tooltip {
  position: absolute;
  z-index: 100;
  pointer-events: none;
  background: var(--bg-card);
  border: 1px solid var(--border-active);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.85rem;
  color: var(--text-primary);
  font-size: 0.78rem;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(8px);
  min-width: 170px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: opacity 0.1s ease;
}

.contrib-tooltip-header {
  font-weight: 800;
  font-size: 0.92rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 3px;
  margin-bottom: 3px;
}

.contrib-tooltip-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.contrib-tooltip-row span:first-child {
  color: var(--text-muted);
}

.contrib-tooltip-row span:last-child {
  font-weight: 700;
  font-family: var(--font-mono);
}

/* ========================================================================
   AI COPILOT FLOATING BUTTON, DRAWER, CHAT BUBBLES & VOICE ANIMATION
   ======================================================================== */
.ai-copilot-float-btn {
  display: none !important;
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1050;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 9999px;
  padding: 0.65rem 1.15rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.45), 0 0 15px rgba(99, 102, 241, 0.3);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.ai-copilot-float-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 30px rgba(14, 165, 233, 0.6), 0 0 20px rgba(99, 102, 241, 0.45);
}

.ai-float-icon {
  font-size: 1.15rem;
}

.ai-float-pulse {
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 8px #10b981;
  animation: pulseAi 1.5s infinite;
}

@keyframes pulseAi {
  0% {
    transform: scale(0.9);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.3);
    opacity: 1;
    box-shadow: 0 0 12px #10b981;
  }

  100% {
    transform: scale(0.9);
    opacity: 0.8;
  }
}

/* AI Copilot Slide-Over Drawer */
.ai-copilot-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 13, 26, 0.65);
  backdrop-filter: blur(4px);
  z-index: 1080;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.ai-copilot-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.ai-copilot-drawer {
  position: fixed;
  top: 0;
  right: -520px;
  width: 100%;
  max-width: 480px;
  height: 100vh;
  background: rgba(13, 21, 37, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-left: 1px solid rgba(56, 189, 248, 0.2);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.65);
  z-index: 1090;
  display: flex;
  flex-direction: column;
  transition: right 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.ai-copilot-drawer.active {
  right: 0;
}

/* Header */
.ai-drawer-header {
  padding: 1rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.ai-drawer-title-box {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.ai-robot-avatar {
  font-size: 1.6rem;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(99, 102, 241, 0.25));
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: 12px;
  padding: 0.25rem 0.4rem;
}

.ai-drawer-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #f8fafc;
  letter-spacing: -0.01em;
}

.ai-drawer-sub {
  font-size: 0.72rem;
  color: #38bdf8;
  font-weight: 600;
}

.ai-header-controls {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.ai-control-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.ai-control-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
}

.ai-control-btn.active {
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.4);
  background: rgba(14, 165, 233, 0.15);
}

/* Context Bar */
.ai-context-bar {
  padding: 0.5rem 1.2rem;
  background: rgba(14, 165, 233, 0.08);
  border-bottom: 1px solid rgba(56, 189, 248, 0.15);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
}

.ai-context-label {
  color: #94a3b8;
}

.ai-context-sym {
  font-weight: 800;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
}

.ai-context-price {
  font-weight: 700;
  color: #f8fafc;
}

.ai-quick-analyze-btn {
  margin-left: auto;
  background: rgba(56, 189, 248, 0.2);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 6px;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  transition: all 0.15s;
}

.ai-quick-analyze-btn:hover {
  background: #38bdf8;
  color: #040d1a;
}

/* Quick Chips */
.ai-chips-scroll {
  padding: 0.6rem 1.2rem;
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  scrollbar-width: none;
}

.ai-chips-scroll::-webkit-scrollbar {
  display: none;
}

.ai-chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.35rem 0.7rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.ai-chip:hover {
  background: rgba(14, 165, 233, 0.2);
  border-color: rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  transform: translateY(-1px);
}

/* Chat Body */
.ai-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ai-message {
  display: flex;
  gap: 0.65rem;
  max-width: 92%;
  animation: fadeInMsg 0.2s ease-out;
}

@keyframes fadeInMsg {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ai-message-user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.ai-message-assistant,
.ai-message-system {
  align-self: flex-start;
}

.ai-msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  background: rgba(14, 165, 233, 0.2);
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.ai-message-user .ai-msg-avatar {
  background: rgba(99, 102, 241, 0.25);
  border-color: rgba(99, 102, 241, 0.4);
}

.ai-msg-content {
  background: rgba(30, 41, 59, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 0.75rem 0.95rem;
  font-size: 0.84rem;
  line-height: 1.5;
  color: #e2e8f0;
}

.ai-message-user .ai-msg-content {
  background: linear-gradient(135deg, #0284c7, #4f46e5);
  color: #ffffff;
  border: none;
  border-top-right-radius: 2px;
}

.ai-message-assistant .ai-msg-content {
  border-top-left-radius: 2px;
}

.ai-msg-content h3 {
  font-size: 0.95rem;
  margin: 0.2rem 0 0.5rem;
  color: #38bdf8;
}

.ai-msg-content h4 {
  font-size: 0.85rem;
  margin: 0.5rem 0 0.3rem;
  color: #93c5fd;
}

.ai-msg-content p {
  margin: 0.3rem 0;
}

.ai-msg-content ul {
  margin: 0.3rem 0;
  padding-left: 1.2rem;
}

.ai-msg-content blockquote {
  margin: 0.5rem 0;
  padding: 0.4rem 0.65rem;
  border-left: 3px solid #38bdf8;
  background: rgba(56, 189, 248, 0.08);
  font-size: 0.78rem;
  color: #bae6fd;
}

.ai-msg-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0;
  font-size: 0.74rem;
}

.ai-msg-content th,
.ai-msg-content td {
  padding: 0.35rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
}

.ai-msg-content th {
  background: rgba(255, 255, 255, 0.06);
  color: #cbd5e1;
}

.ai-engine-tag {
  font-size: 0.65rem;
  color: #64748b;
  margin-top: 0.4rem;
  text-align: right;
}

/* Typing Indicator */
.ai-typing-bubble {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0.6rem 0.85rem;
}

.ai-typing-dot {
  width: 6px;
  height: 6px;
  background: #38bdf8;
  border-radius: 50%;
  animation: typingBounce 1.2s infinite ease-in-out;
}

.ai-typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.ai-typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingBounce {

  0%,
  80%,
  100% {
    transform: scale(0.6);
    opacity: 0.5;
  }

  40% {
    transform: scale(1.1);
    opacity: 1;
  }
}

/* Voice Waveform Box */
.ai-voice-wave-box {
  padding: 0.6rem 1.2rem;
  background: rgba(239, 68, 68, 0.1);
  border-top: 1px solid rgba(239, 68, 68, 0.3);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ai-wave-bar {
  width: 4px;
  height: 16px;
  background: #ef4444;
  border-radius: 2px;
  animation: waveAnim 0.8s infinite ease-in-out;
}

.ai-wave-bar:nth-child(2) {
  animation-delay: 0.15s;
  height: 24px;
}

.ai-wave-bar:nth-child(3) {
  animation-delay: 0.3s;
  height: 18px;
}

.ai-wave-bar:nth-child(4) {
  animation-delay: 0.45s;
  height: 26px;
}

.ai-wave-bar:nth-child(5) {
  animation-delay: 0.6s;
  height: 14px;
}

@keyframes waveAnim {

  0%,
  100% {
    transform: scaleY(0.4);
  }

  50% {
    transform: scaleY(1.2);
  }
}

.ai-listening-text {
  font-size: 0.78rem;
  color: #fca5a5;
  font-weight: 700;
  margin-left: 0.3rem;
}

.ai-stop-mic-btn {
  margin-left: auto;
  background: #ef4444;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
}

/* Input Bar */
.ai-input-container {
  padding: 0.75rem 1.2rem 1rem;
  background: rgba(13, 21, 37, 0.98);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ai-mic-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #cbd5e1;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
}

.ai-mic-btn:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  color: #38bdf8;
}

.ai-mic-btn.listening {
  background: #ef4444;
  border-color: #f87171;
  color: #ffffff;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.6);
  animation: pulseMic 1s infinite;
}

@keyframes pulseMic {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.ai-text-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f8fafc;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  border-radius: 20px;
  padding: 0.55rem 1rem;
  outline: none;
  transition: border-color 0.2s;
}

.ai-text-input:focus {
  border-color: #38bdf8;
  background: rgba(255, 255, 255, 0.08);
}

.ai-send-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0284c7, #6366f1);
  border: none;
  color: #ffffff;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s, box-shadow 0.2s;
}

.ai-send-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.45);
}

/* ========================================================================
   PSX & TADAWUL LIVE STOCK DASHBOARD HEADER (DASHBOARD SCREENSHOT STYLE)
   ======================================================================== */
/* ================= LEFT PANEL: FROZEN HEADER & SCROLLABLE BODY ================= */
#panel-screener {
  height: fit-content;
  max-height: calc(100vh - 75px);
  align-self: start !important;
  overflow: hidden;
  padding: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
}

/* Frozen Top Header: Search Bar & Company Details (Matching Right Bar Top Area) */
.left-panel-frozen-header {
  flex-shrink: 0;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
  z-index: 50;
  overflow: visible !important;
}

.left-panel-frozen-header .symbol-search-box {
  padding: 0.6rem 0.75rem 0.45rem;
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
  overflow: visible !important;
}

.left-panel-frozen-header .psx-dash-top-bar {
  padding: 0.55rem 0.75rem;
  background: transparent !important;
  border-bottom: none !important;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  width: 100%;
  box-sizing: border-box;
}

.left-panel-frozen-header .psx-dash-identity-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  width: 100%;
  min-width: 0;
}

.left-panel-frozen-header .psx-dash-company-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  min-width: 0;
  white-space: nowrap;
}

.left-panel-frozen-header .psx-dash-company-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex-shrink: 1;
}

.left-panel-frozen-header .dash-shariah-moon-icon {
  font-size: 1.2rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 3px rgba(245, 158, 11, 0.5));
  user-select: none;
  cursor: default;
}

.left-panel-frozen-header .psx-dash-sector-trade-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.5rem;
  min-width: 0;
}

.left-panel-frozen-header .psx-dash-sector-row {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.left-panel-frozen-header .psx-dash-sector-name {
  font-size: 0.76rem;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
}

.left-panel-frozen-header .psx-dash-right-col {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}

.left-panel-frozen-header .chart-quick-trade-btn {
  margin-left: 0 !important;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0.22rem 0.6rem;
  font-size: 0.74rem;
  font-weight: 600;
  border-radius: 6px;
}

#panel-screener .left-panel-body {
  padding: 0.35rem 0.65rem 0.35rem 0.65rem;
  gap: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  height: auto;
  scrollbar-width: thin;
}

.psx-dash-card-left {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  background: transparent !important;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  overflow: visible !important;
  height: auto;
  justify-content: flex-start;
}

.psx-dash-card-left .psx-dash-grid {
  grid-template-columns: 1fr !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 auto;
  justify-content: flex-start;
  gap: 0.25rem !important;
  padding: 0.05rem 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.psx-dash-card-left .psx-dash-col {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.15rem 0 !important;
  gap: 0.15rem !important;
  box-shadow: none !important;
}

.psx-dash-card-left .psx-dash-col+.psx-dash-col {
  border-top: 1px dashed var(--border-subtle) !important;
  margin-top: 0.2rem !important;
  padding-top: 0.32rem !important;
}

/* Seamless Day Range & 52-Week Range (No White background, no nested box) */
.psx-dash-card-left .dash-range-widget {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0.2rem 0 !important;
  margin-top: 0.1rem !important;
}

.psx-dash-card-left .range-52w-widget {
  border-top: 1px dashed var(--border-subtle) !important;
  padding-top: 0.35rem !important;
  margin-top: 0.25rem !important;
}

/* Seamless Weekly, Monthly, Yearly Analysis Table (Header look for TH, No lines between rows) */
.psx-dash-card-left .dash-history-table {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: 100% !important;
  table-layout: auto !important;
}

.psx-dash-card-left .dash-history-table thead tr {
  background: var(--bg-secondary) !important;
}

.psx-dash-card-left .dash-history-table th {
  background: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  border-top: none !important;
  padding: 3.5px 5px !important;
  font-size: 0.67rem !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  height: 23px !important;
  white-space: nowrap !important;
}

.psx-dash-card-left .dash-history-table th:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  text-align: left !important;
}

.psx-dash-card-left .dash-history-table th:nth-child(2) {
  text-align: right !important;
}

.psx-dash-card-left .dash-history-table th:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  text-align: right !important;
}

.psx-dash-card-left .dash-history-table tbody tr {
  border: none !important;
}

.psx-dash-card-left .dash-history-table td {
  background: transparent !important;
  border-bottom: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  padding: 3px 5px !important;
  height: 23px !important;
  font-size: 0.74rem !important;
  white-space: nowrap !important;
}

.psx-dash-card-left .dash-history-table td:first-child {
  text-align: left !important;
}

.psx-dash-card-left .dash-history-table td:nth-child(2) {
  text-align: right !important;
}

.psx-dash-card-left .dash-history-table td:last-child {
  text-align: right !important;
}

.psx-dash-card-left .dash-history-table tbody tr:last-child td {
  border-bottom: none !important;
}

[data-theme="light"] .psx-dash-card-left .dash-history-table thead tr,
[data-theme="light"] .psx-dash-card-left .dash-history-table th,
[data-theme="system"] .psx-dash-card-left .dash-history-table thead tr,
[data-theme="system"] .psx-dash-card-left .dash-history-table th {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #475569 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

[data-theme="dark"] .psx-dash-card-left .dash-history-table thead tr,
[data-theme="dark"] .psx-dash-card-left .dash-history-table th {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--text-muted) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Divider above Open Price inside psx-dash-col-price */
.psx-dash-col-price .dash-stat-line:first-of-type {
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .psx-dash-col-price .dash-stat-line:first-of-type,
[data-theme="system"] .psx-dash-col-price .dash-stat-line:first-of-type {
  border-top: 1px dashed rgba(0, 0, 0, 0.12);
}

.psx-dash-card-left .psx-dash-top-bar {
  padding: 0.6rem 0.75rem;
}

/* ================= FUNDAMENTAL TAB: P/E & DIVIDEND YIELD HIGHLIGHT ================= */
.fund-highlight-card {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  margin-bottom: 0.85rem;
  box-shadow: var(--shadow-card);
}

.fund-highlight-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
}

.fund-hl-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #38bdf8;
}

.fund-hl-val {
  font-size: 1.65rem;
  font-weight: 900;
  font-family: var(--font-mono);
  color: #ffffff;
  margin: 0.2rem 0;
}

.fund-hl-sub {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.fund-hl-divider {
  width: 1px;
  height: 48px;
  background: rgba(255, 255, 255, 0.12);
  margin: 0 0.5rem;
}

/* ================= TAB HERO RESULT CARDS (CURRENT TREND & FUNDAMENTAL EVALUATION) ================= */
.tab-hero-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.9rem;
  margin-bottom: 0.75rem;
  box-shadow: var(--shadow-card);
  gap: 0.5rem;
}

.tab-hero-left {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.tab-hero-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.035em;
  color: var(--color-accent);
}

.tab-hero-detail {
  font-size: 0.74rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.tab-hero-right {
  display: flex;
  align-items: center;
}

/* Stacked 2-line layout for Current Trend Hero Card (Technical Tab) */
.tab-hero-card.tech-trend-hero-stacked {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.35rem;
  padding: 0.65rem 0.9rem;
}

.tech-trend-hero-stacked .tab-hero-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.tech-trend-hero-stacked .tab-hero-row-bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

.tech-trend-hero-stacked .tab-hero-row-bottom .tab-hero-detail {
  font-size: 0.74rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  white-space: nowrap;
  text-align: right;
  line-height: 1.2;
}

/* Stacked 3-line layout for Fundamental Evaluation Hero Card */
.tab-hero-card.fund-eval-hero-stacked {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.35rem;
  padding: 0.75rem 0.9rem;
}

.fund-eval-hero-stacked .tab-hero-line-1 {
  width: 100%;
}

.fund-eval-hero-stacked .tab-hero-line-2 {
  width: 100%;
  display: flex;
  align-items: center;
  margin: 0.1rem 0;
}

.fund-eval-hero-stacked .tab-hero-line-3 {
  width: 100%;
}

.fund-eval-hero-stacked .tab-hero-detail {
  display: block;
  font-size: 0.73rem;
  line-height: 1.4;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  word-break: break-word;
}

/* ================= BENJAMIN GRAHAM INTRINSIC VALUATION CARD ================= */
.graham-valuation-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.85rem;
  margin-top: 0.4rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

#ai-ml-hero-card {
  background: #fbfaff !important;
  border: 1px solid #c4b5fd !important;
  box-shadow: 0 2px 6px rgba(139, 92, 246, 0.08);
}

#fund-graham-card {
  background: #f8faff !important;
  border: 1px solid #93c5fd !important;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.08);
}

#super-gainer-hero-card {
  background: #f6fdf9 !important;
  border: 1px solid #86efac !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.08);
}

[data-theme="dark"] #ai-ml-hero-card {
  background: rgba(139, 92, 246, 0.07) !important;
  border: 1px solid rgba(139, 92, 246, 0.35) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] #fund-graham-card {
  background: rgba(59, 130, 246, 0.07) !important;
  border: 1px solid rgba(59, 130, 246, 0.35) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] #super-gainer-hero-card {
  background: rgba(16, 185, 129, 0.07) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.graham-card-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
  margin-bottom: 0.55rem !important;
  width: 100% !important;
}

.graham-card-title-group {
  display: flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.graham-card-icon {
  font-size: 1.05rem;
  line-height: 1;
  flex-shrink: 0;
}

.graham-card-title {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.2px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.graham-card-badge-wrap {
  width: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-shrink: 0 !important;
}

.graham-card-badge-wrap .eval-badge {
  font-size: 0.68rem !important;
  padding: 3px 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

.graham-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.55rem;
}

.graham-stat-box {
  background: #ffffff !important;
  border-top: 1px solid #cbd5e1 !important;
  border-right: 1px solid #cbd5e1 !important;
  border-bottom: 1px solid #cbd5e1 !important;
  border-left-width: 4px !important;
  border-left-style: solid !important;
  border-radius: 6px !important;
  padding: 0.46rem 0.65rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.18rem !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  position: relative;
  overflow: hidden;
}

.graham-stat-box:hover {
  transform: translateY(-1.5px) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.09) !important;
}

[data-theme="dark"] .graham-stat-box {
  background: #0f172a !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-left-width: 4px !important;
  border-left-style: solid !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .graham-stat-box:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

/* Vibrant Left Accent Colors and Left Gradient Shades */
.stat-box-bullish,
.graham-stat-box.stat-bullish {
  border-left-color: #10b981 !important;
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.10) 0%, rgba(16, 185, 129, 0.01) 45%, #ffffff 75%) !important;
}

.stat-box-bearish,
.graham-stat-box.stat-bearish {
  border-left-color: #ef4444 !important;
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.10) 0%, rgba(239, 68, 68, 0.01) 45%, #ffffff 75%) !important;
}

.stat-box-gold,
.graham-stat-box.stat-gold {
  border-left-color: #f59e0b !important;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.10) 0%, rgba(245, 158, 11, 0.01) 45%, #ffffff 75%) !important;
}

.stat-box-purple,
.graham-stat-box.stat-purple {
  border-left-color: #8b5cf6 !important;
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.10) 0%, rgba(139, 92, 246, 0.01) 45%, #ffffff 75%) !important;
}

.stat-box-cyan,
.graham-stat-box.stat-cyan {
  border-left-color: #06b6d4 !important;
  background: linear-gradient(90deg, rgba(6, 182, 212, 0.10) 0%, rgba(6, 182, 212, 0.01) 45%, #ffffff 75%) !important;
}

/* Dark Theme Left Shades */
[data-theme="dark"] .stat-box-bullish,
[data-theme="dark"] .graham-stat-box.stat-bullish {
  border-left-color: #10b981 !important;
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.18) 0%, rgba(15, 23, 42, 0.75) 50%) !important;
}

[data-theme="dark"] .stat-box-bearish,
[data-theme="dark"] .graham-stat-box.stat-bearish {
  border-left-color: #ef4444 !important;
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.18) 0%, rgba(15, 23, 42, 0.75) 50%) !important;
}

[data-theme="dark"] .stat-box-gold,
[data-theme="dark"] .graham-stat-box.stat-gold {
  border-left-color: #f59e0b !important;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.18) 0%, rgba(15, 23, 42, 0.75) 50%) !important;
}

[data-theme="dark"] .stat-box-purple,
[data-theme="dark"] .graham-stat-box.stat-purple {
  border-left-color: #8b5cf6 !important;
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.18) 0%, rgba(15, 23, 42, 0.75) 50%) !important;
}

[data-theme="dark"] .stat-box-cyan,
[data-theme="dark"] .graham-stat-box.stat-cyan {
  border-left-color: #06b6d4 !important;
  background: linear-gradient(90deg, rgba(6, 182, 212, 0.18) 0%, rgba(15, 23, 42, 0.75) 50%) !important;
}

.graham-stat-label {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  color: #475569 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.35px !important;
}

[data-theme="dark"] .graham-stat-label {
  color: #94a3b8 !important;
}

.graham-stat-val {
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  font-family: var(--font-mono) !important;
  color: #0f172a !important;
  letter-spacing: -0.2px !important;
}

[data-theme="dark"] .graham-stat-val {
  color: #f8fafc !important;
}

.tab-hero-right .eval-badge {
  font-size: 0.64rem !important;
  padding: 2px 7px !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
}

.tab-header-badge {
  margin-left: auto;
  font-size: 0.62rem !important;
  padding: 1.5px 6px !important;
  border-radius: 4px !important;
  line-height: 1.2 !important;
}

.psx-dash-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 0.65rem;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
}

/* Dashboard Header Banner — Soft, Refined Theme */
.psx-dash-top-bar {
  background: var(--bg-secondary);
  padding: 0.75rem 1.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}

.psx-dash-identity-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
}

.psx-dash-right-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0.35rem;
}

.psx-dash-shariah-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 1.3rem;
}

.dash-shariah-moon-icon {
  font-size: 1.25rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  filter: drop-shadow(0 1px 4px rgba(245, 158, 11, 0.45));
}

.psx-dash-company-name {
  color: var(--text-primary);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.psx-dash-sector-row {
  display: flex;
  align-items: center;
  margin-top: 1px;
}

.psx-dash-sector-name {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.psx-dash-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Main Dashboard 3-Column Grid */
.psx-dash-grid {
  display: grid;
  grid-template-columns: 28% 34% 38%;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  background: var(--bg-card);
  align-items: stretch;
}

@media (max-width: 1200px) {
  .psx-dash-grid {
    grid-template-columns: 1fr 1fr;
  }

  .psx-dash-col-history {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .psx-dash-grid {
    grid-template-columns: 1fr;
  }
}

.psx-dash-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.35rem;
}

/* Col 1: Price & Volume Box with Unified Change Metrics */
.dash-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.dash-price-val {
  font-size: 1.28rem;
  font-weight: 650;
  font-family: var(--font-numbers);
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.01em;
}

.dash-chg-pill {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.25rem;
  font-family: var(--font-numbers);
  font-weight: 500;
  font-size: 0.78rem;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

.dash-diff-val {
  font-family: var(--font-numbers);
  font-size: 0.78rem;
  font-weight: 500;
}

.dash-pct-val {
  font-family: var(--font-numbers);
  font-size: 0.78rem;
  font-weight: 500;
}

.dash-vol-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.45rem;
}

.dash-vol-val {
  font-size: 1.05rem;
  font-weight: 600;
  font-family: var(--font-numbers);
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.01em;
}

.dash-vol-chg-badge {
  font-size: 0.74rem;
  font-weight: 500;
  font-family: var(--font-numbers);
  text-align: right;
  white-space: nowrap;
}

.dash-vol-chg-badge.bullish {
  color: #10b981;
}

.dash-vol-chg-badge.bearish {
  color: #ef4444;
}

.dash-vol-chg-badge.neutral {
  color: var(--text-muted);
}

.dash-sub-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.76rem;
  color: var(--text-muted);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
  padding: 2px 0.2rem;
  min-height: 22px;
}

.dash-sub-label {
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.dash-sub-val {
  color: var(--text-primary);
  font-family: var(--font-numbers);
  font-weight: 500;
  font-size: 0.74rem;
  text-align: right;
}

/* Col 2: Open / Low / High / Circuit Breakers */
.dash-stat-line {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  align-items: center;
  font-size: 0.76rem;
  padding: 2.5px 0.2rem;
  min-height: 22px;
}

.stat-tag {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.stat-tag.open-tag {
  color: var(--color-accent, #00d2ff);
}

.stat-tag.low-tag {
  color: #f87171;
}

.stat-tag.high-tag {
  color: #4ade80;
}

.stat-num {
  font-family: var(--font-numbers);
  font-weight: 550;
  font-size: 0.76rem;
  color: var(--text-primary);
  text-align: center;
  /* In the center of both */
  padding: 0 4px;
}

.stat-chg-group {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.28rem;
  text-align: right;
  white-space: nowrap;
}

.stat-diff,
.stat-diff-pct {
  font-family: var(--font-numbers);
  font-size: 0.71rem;
  font-weight: 500;
}

.dash-circuit-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

/* Range Widgets: Circuit Breaker & 52-Week Price Range (Rich & Dynamic Color Palettes) */
.dash-range-widget {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.85rem;
  margin-top: 0.55rem;
  box-shadow: var(--shadow-card);
  transition: all 0.25s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
}

.dash-range-widget:hover {
  border-color: var(--border-active);
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}

.circuit-breaker-widget,
.range-52w-widget {
  padding: 0.50rem 0.80rem 0.55rem;
}

.circuit-breaker-widget .range-values,
.range-52w-widget .range-values {
  margin-top: 0.1rem;
  margin-bottom: 0.40rem;
}

.dash-range-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.45rem;
}

.dash-range-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.range-mode-pill {
  font-size: 0.66rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.circuit-pill {
  background: var(--color-bearish-bg, rgba(239, 68, 68, 0.18));
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.year-pill {
  background: rgba(56, 189, 248, 0.18);
  color: #7dd3fc;
  border: 1px solid rgba(56, 189, 248, 0.35);
}

.dash-range-widget .range-values {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 0.15rem;
  margin-bottom: 0.40rem;
}

.range-bound-col {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

/* Lower Lock & Upper Cap Labels & Numbers (No background box) */
.range-sub-danger {
  display: inline-flex;
  align-items: center;
  background: transparent !important;
  color: #f87171 !important;
  border: none !important;
  padding: 0 !important;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  width: fit-content;
  box-shadow: none !important;
}

.range-val-danger {
  color: #ff5252 !important;
  font-size: 0.80rem;
  font-weight: 550;
  font-family: var(--font-numbers);
  letter-spacing: -0.01em;
  text-shadow: none;
}

.range-sub-success {
  display: inline-flex;
  align-items: center;
  background: transparent !important;
  color: #4ade80 !important;
  border: none !important;
  padding: 0 !important;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: auto;
  width: fit-content;
  box-shadow: none !important;
}

.range-val-success {
  color: #10b981 !important;
  font-size: 0.80rem;
  font-weight: 550;
  font-family: var(--font-numbers);
  letter-spacing: -0.01em;
  text-shadow: none;
}

/* 52-Week Range: Yearly Lowest & Yearly Highest Labels & Numbers (No background box) */
.range-sub-yearly-low {
  display: inline-flex;
  align-items: center;
  background: transparent !important;
  color: #fbbf24 !important;
  border: none !important;
  padding: 0 !important;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  width: fit-content;
  box-shadow: none !important;
}

.range-val-yearly-low {
  color: #fbbf24 !important;
  font-size: 0.80rem;
  font-weight: 550;
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
  text-shadow: none;
}

.range-sub-yearly-high {
  display: inline-flex;
  align-items: center;
  background: transparent !important;
  color: #38bdf8 !important;
  border: none !important;
  padding: 0 !important;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: auto;
  width: fit-content;
  box-shadow: none !important;
}

.range-val-yearly-high {
  color: #38bdf8 !important;
  font-size: 0.80rem;
  font-weight: 550;
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
  text-shadow: none;
}

/* Range Tracks and Glowing Fill Bars */
.dash-range-widget .range-bar-track {
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

.circuit-bar-fill {
  background: linear-gradient(90deg, #ef4444 0%, #f59e0b 50%, #10b981 100%) !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.45);
  border-radius: 6px;
  transition: width 0.35s ease;
}

.range-52w-bar-fill {
  background: linear-gradient(90deg, #f59e0b 0%, #38bdf8 50%, #818cf8 100%) !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.55);
  border-radius: 6px;
  transition: width 0.35s ease;
}

/* ==========================================================================
   Range Widgets Light Theme Overrides (Data Theme Light & System Light)
   ========================================================================== */
[data-theme="light"] .dash-range-widget,
[data-theme="system"] .dash-range-widget {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .dash-range-widget:hover,
[data-theme="system"] .dash-range-widget:hover {
  border-color: var(--border-active);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .dash-range-title,
[data-theme="system"] .dash-range-title {
  color: var(--text-primary);
}

[data-theme="light"] .range-sub-danger,
[data-theme="system"] .range-sub-danger {
  background: transparent !important;
  color: #dc2626 !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

[data-theme="light"] .range-val-danger,
[data-theme="system"] .range-val-danger {
  color: #dc2626 !important;
  text-shadow: none;
}

[data-theme="light"] .range-sub-success,
[data-theme="system"] .range-sub-success {
  background: transparent !important;
  color: #059669 !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

[data-theme="light"] .range-val-success,
[data-theme="system"] .range-val-success {
  color: #059669 !important;
  text-shadow: none;
}

[data-theme="light"] .range-sub-yearly-low,
[data-theme="system"] .range-sub-yearly-low {
  background: transparent !important;
  color: #d97706 !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

[data-theme="light"] .range-val-yearly-low,
[data-theme="system"] .range-val-yearly-low {
  color: #d97706 !important;
  text-shadow: none;
}

[data-theme="light"] .range-sub-yearly-high,
[data-theme="system"] .range-sub-yearly-high {
  background: transparent !important;
  color: #0284c7 !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

[data-theme="light"] .range-val-yearly-high,
[data-theme="system"] .range-val-yearly-high {
  color: #0284c7 !important;
  text-shadow: none;
}

[data-theme="light"] .year-pill,
[data-theme="system"] .year-pill {
  background: rgba(2, 132, 199, 0.1);
  color: #0284c7;
  border: 1px solid rgba(2, 132, 199, 0.28);
}

[data-theme="light"] .dash-range-widget .range-bar-track,
[data-theme="system"] .dash-range-widget .range-bar-track {
  background: rgba(0, 0, 0, 0.07);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .circuit-bar-fill,
[data-theme="system"] .circuit-bar-fill {
  background: linear-gradient(90deg, #dc2626 0%, #d97706 50%, #059669 100%) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .range-52w-bar-fill,
[data-theme="system"] .range-52w-bar-fill {
  background: linear-gradient(90deg, #d97706 0%, #0284c7 50%, #6366f1 100%) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .stat-tag.low-tag,
[data-theme="system"] .stat-tag.low-tag {
  color: #dc2626;
}

[data-theme="light"] .stat-tag.high-tag,
[data-theme="system"] .stat-tag.high-tag {
  color: #059669;
}

[data-theme="light"] .dash-sub-item,
[data-theme="system"] .dash-sub-item {
  border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
}


.circuit-box {
  padding: 4px 8px;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.76rem;
}

.circuit-box.lower-lock {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
}

.circuit-box.upper-cap {
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #4ade80;
}

.circuit-label {
  font-weight: 500;
}

.circuit-val {
  font-family: var(--font-mono);
  font-weight: 500;
}

/* Col 3: Data Analysis Table */
.dash-history-banner {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-bottom: none;
  padding: 4px 8px;
  border-radius: 4px 4px 0 0;
  font-size: 0.74rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
}

.dash-history-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.74rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  overflow: hidden;
}

.dash-history-table th {
  background: var(--bg-secondary);
  padding: 5px 6px;
  font-size: 0.67rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border-subtle);
}

.dash-history-table th:first-child {
  text-align: left;
}

.dash-history-table th:nth-child(2),
.dash-history-table th:nth-child(3) {
  text-align: right;
}

.dash-history-table td {
  padding: 4px 6px;
  border: none;
  font-family: var(--font-mono);
  color: var(--text-primary);
  vertical-align: middle;
}

.dash-history-table td:nth-child(2),
.dash-history-table td:nth-child(3) {
  text-align: right;
}

.dash-history-table tbody tr:last-child td {
  border-bottom: none;
}

.dash-history-table .history-period {
  font-weight: 600;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  text-align: left;
}

.hist-cell-val {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.35rem;
  white-space: nowrap;
}

.hist-price-num,
.hist-vol-num {
  font-family: var(--font-mono);
  font-weight: 500 !important;
  font-size: 0.70rem;
  color: var(--text-primary);
  line-height: 1.2;
}

.hist-pct,
.hist-vol-pct {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  line-height: 1.2;
}

/* Footer of Dashboard Card */
.psx-dash-footer {
  background: var(--bg-secondary);
  padding: 0.35rem 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.74rem;
}

.dash-footer-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.dash-date-pill {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.72rem;
}

.dash-footer-disclaimer {
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.4;
  display: block;
}

.disclaimer-tag {
  color: #ef4444;
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 4px;
  display: inline;
}

[data-theme="light"] .dash-yearly-range {
  background: #f8fafc;
  border-color: #e2e8f0;
}

[data-theme="light"] .disclaimer-tag {
  color: #dc2626;
}

/* ========================================================================
   INTRADAY LEVELS (PIVOT POINTS) CARD IN TECHNICAL TAB
   ======================================================================== */
.pivots-levels-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.15rem 0 !important;
  margin-bottom: 0.65rem !important;
  box-shadow: none !important;
}

.pivots-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35rem 0.2rem 0.4rem;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 0.35rem;
}

.pivots-title {
  font-size: 0.71rem;
  font-weight: 600;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pivots-levels-table {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.pivot-level-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0.25rem !important;
  min-height: 22px !important;
  background: transparent !important;
  border: none !important;
  font-size: 0.76rem;
}

.pivot-level-row .lvl-name {
  font-weight: 500;
  font-size: 0.74rem;
}

.pivot-level-row .lvl-val {
  font-family: var(--font-numbers);
  font-weight: 550 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.01em;
}

.pivot-level-row.level-resistance,
.pivot-level-row.level-target {
  background: transparent !important;
  border: none !important;
  color: #10b981;
}

.pivot-level-row.level-average {
  background: transparent !important;
  border: none !important;
  color: #f59e0b;
  font-weight: 500;
}

.pivot-level-row.level-support {
  background: transparent !important;
  border: none !important;
  color: #ef4444;
}

.pivots-trend-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.76rem;
}

.pivots-trend-footer .trend-lbl {
  font-weight: 700;
  color: var(--text-secondary);
}

/* ========================================================================
   HOME EVALUATION SECTION (BELOW 3 BARS, MATCHING GOOGLE SHEETS)
   ======================================================================== */
.home-evaluation-section {
  max-width: 1920px;
  margin: 5px auto 1.5rem;
  padding: 0 1rem;
  box-sizing: border-box;
  scroll-margin-top: 95px;
}

.eval-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom: none;
  gap: 1rem;
  flex-wrap: wrap;
}

[data-theme="light"] .eval-section-header {
  background: #ffffff;
  border-color: #e2e8f0;
}

/* Evaluation & Quantitative Research Sub-Tabs in Home Terminal */
.eval-subnav-tabs {
  display: flex;
  flex-wrap: wrap;
  background: var(--bg-card);
  border-left: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: 0.45rem 0.85rem;
  gap: 0.45rem 0.5rem;
  overflow-x: visible;
  align-items: center;
}

[data-theme="light"] .eval-subnav-tabs {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.eval-subnav-tabs .card-tab-btn {
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 0.77rem;
  font-weight: 550;
  padding: 0.32rem 0.82rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.eval-subnav-tabs .card-tab-btn:hover:not(.active) {
  color: var(--text-primary);
  border-color: var(--color-accent);
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .eval-subnav-tabs .card-tab-btn:hover:not(.active) {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-primary);
}

.eval-subnav-tabs .card-tab-btn.active,
[data-theme="light"] .eval-subnav-tabs .card-tab-btn.active {
  background: var(--color-accent-grad) !important;
  color: var(--color-accent-text, #ffffff) !important;
  border-color: transparent !important;
  font-weight: 700 !important;
  box-shadow: var(--shadow-glow) !important;
}

.eval-sub-pane {
  background: var(--bg-card);
  border-left: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-sizing: border-box;
}

[data-theme="light"] .eval-sub-pane {
  background: #ffffff;
  border-color: #e2e8f0;
}

.eval-header-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.eval-header-icon {
  font-size: 1.35rem;
}

.eval-header-badge-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.eval-header-main-title {
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

.eval-sym-badge {
  background: var(--color-accent);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.15rem 0.45rem;
  border-radius: 5px;
  letter-spacing: 0.02em;
}

.eval-sub-caption {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
}

.eval-header-sub {
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-top: 0.15rem;
}

.eval-header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.eval-header-quick-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  transition: all 0.25s ease;
}

[data-theme="light"] .eval-header-quick-summary {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.eval-live-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
  animation: pulse-dot 1.8s infinite;
}

.eval-header-status-note {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-bullish, #10b981);
  letter-spacing: 0.2px;
}

.eval-score-box,
.eval-verdict-box,
.eval-intent-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.eval-score-label {
  font-size: 0.66rem;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.15rem;
}

.eval-score-val-row {
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
}

.eval-score-num {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--color-accent);
  font-family: var(--font-mono);
  line-height: 1;
}

.eval-score-denom {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Domain Section Strips */
.eval-domain-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 1rem 0.25rem;
  background: var(--bg-card);
  border-left: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
}

.eval-domain-strip-tier2 {
  border-top: none;
  padding-top: 0.45rem;
  margin-top: 0.45rem;
}

[data-theme="light"] .eval-domain-strip {
  background: #ffffff;
  border-color: #e2e8f0;
}

.eval-domain-label {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* Multi-Column Grid Matrix */
.eval-matrix-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  padding: 0.5rem 1rem 0.85rem;
  background: var(--bg-card);
  border-left: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
}

.eval-matrix-grid-3col {
  grid-template-columns: repeat(3, 1fr) !important;
  border-bottom: none;
}

.eval-matrix-grid-bottom {
  border-bottom: 1px solid var(--border-subtle) !important;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  padding-bottom: 1rem !important;
}

[data-theme="light"] .eval-matrix-grid {
  background: #ffffff;
  border-color: #e2e8f0;
}

[data-theme="light"] .eval-matrix-grid-bottom {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

/* Keep 3 cards in a row on landscape, laptops, and portrait monitors (Acer V226HQL) */
@media (max-width: 680px) {
  .eval-matrix-grid-3col {
    grid-template-columns: 1fr !important;
  }
}

.eval-matrix-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  display: flex;
  flex-direction: column;
  min-height: 190px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.eval-matrix-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .eval-matrix-card,
[data-theme="system"] .eval-matrix-card {
  background: var(--bg-secondary);
  border-color: var(--border-subtle);
}

/* Card Specific Accents (Distinct Left Border + Title Color, Uniform Background) */
.card-accent-tech {
  border-left: 3px solid #0284c7;
}

.card-accent-ai {
  border-left: 3px solid #8b5cf6;
}

.title-ai {
  color: #a78bfa !important;
}

[data-theme="light"] .title-ai,
[data-theme="system"] .title-ai {
  color: #7c3aed !important;
}

.card-accent-fund {
  border-left: 3px solid #3b82f6;
}

.title-fund {
  color: #60a5fa !important;
}

[data-theme="light"] .title-fund,
[data-theme="system"] .title-fund {
  color: #2563eb !important;
}

.card-accent-gainer {
  border-left: 3px solid #10b981;
}

.title-gainer {
  color: #34d399 !important;
}

[data-theme="light"] .title-gainer,
[data-theme="system"] .title-gainer {
  color: #059669 !important;
}

.eval-card-title {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-bottom: 0.35rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--border-subtle);
}

.eval-table {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.eval-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.15rem 0.45rem;
  font-size: 0.78rem;
  line-height: 1.45;
  min-height: 26px;
  padding: 0.22rem 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
}

.eval-row:last-child {
  border-bottom: none;
}

.eval-row.highlight-row {
  background: rgba(255, 152, 0, 0.06);
  border-radius: 4px;
  padding: 0.2rem 0.4rem;
  border-bottom: none;
}

.eval-lbl {
  color: var(--text-secondary);
  font-weight: 600;
  white-space: nowrap;
}

.eval-val {
  font-weight: 700;
  color: var(--text-primary);
  text-align: right;
  margin-left: auto;
}

.eval-val-group {
  display: contents;
}

.eval-val-group .eval-badge {
  margin-left: auto;
}

.eval-sub-text {
  flex-basis: 100%;
  width: 100%;
  font-size: 0.65rem;
  color: var(--text-muted);
  font-family: var(--font-numbers);
  font-weight: 500;
  text-align: right;
  white-space: normal;
  overflow: visible;
  line-height: 1.3;
  margin-top: 2px;
  padding-bottom: 2px;
}

.eval-sub-text:empty {
  display: none;
}

/* High-Contrast Evaluation Badges matching Google Sheets */
.eval-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  font-size: 0.64rem;
  font-weight: 700;
  border-radius: 4px;
  text-align: center;
  white-space: nowrap;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #f8fafc !important;
  /* Soft off-white to eliminate harsh glare */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.eval-verdict-box .eval-badge,
.eval-intent-box .eval-badge {
  font-size: 0.68rem !important;
  padding: 2.5px 8px !important;
  border-radius: 5px !important;
  white-space: nowrap !important;
}

.eval-badge.badge-buy,
.eval-badge.badge-bullish,
.eval-badge.bullish,
.eval-badge.buy {
  background: #16a34a !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 1px 4px rgba(22, 163, 74, 0.35) !important;
}

.eval-badge.badge-strong-buy,
.eval-badge.extreme-bullish,
.eval-badge.strong-bullish {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.45) !important;
}

.eval-badge.badge-warning,
.eval-badge.badge-hold,
.eval-badge.badge-wait,
.eval-badge.overbought {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 1px 4px rgba(245, 158, 11, 0.35) !important;
}

.eval-badge.badge-sell,
.eval-badge.badge-bearish,
.eval-badge.bearish,
.eval-badge.sell {
  background: #dc2626 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 1px 4px rgba(220, 38, 38, 0.35) !important;
}

.eval-badge.badge-strong-sell,
.eval-badge.extreme-bearish,
.eval-badge.strong-bearish {
  background: linear-gradient(135deg, #991b1b 0%, #e11d48 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 2px 6px rgba(225, 29, 72, 0.45) !important;
}

.eval-badge.badge-neutral,
.eval-badge.neutral {
  background: #475569 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="light"] .eval-badge.badge-neutral,
[data-theme="system"] .eval-badge.badge-neutral {
  background: #475569 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

/* Condition 2: Market Intent & Readiness Stage Badges */
.eval-badge.badge-intent-breakout {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.5) !important;
}

.eval-badge.badge-intent-reversal-up {
  background: linear-gradient(135deg, #0d9488 0%, #06b6d4 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 2px 8px rgba(6, 182, 212, 0.45) !important;
}

.eval-badge.badge-intent-exhaustion {
  background: linear-gradient(135deg, #ea580c 0%, #f43f5e 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 2px 8px rgba(244, 63, 94, 0.45) !important;
}

.eval-badge.badge-intent-reversal-down {
  background: linear-gradient(135deg, #be123c 0%, #e11d48 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.45) !important;
}

/* Market Intent & Readiness Transition Card (Integrated into Strategy Header - 2 Lines) */
.eval-intent-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 8px;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.35);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
  transition: all 0.25s ease;
  cursor: default;
  max-width: 520px;
}

.eval-intent-banner.stage-breakout {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.22) 100%) !important;
  border: 1px solid rgba(16, 185, 129, 0.45) !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.22) !important;
}

.eval-intent-banner.stage-breakout .eval-intent-title {
  color: #10b981 !important;
}

.eval-intent-banner.stage-reversal-up {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.15) 0%, rgba(2, 132, 199, 0.22) 100%) !important;
  border: 1px solid rgba(14, 165, 233, 0.45) !important;
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.22) !important;
}

.eval-intent-banner.stage-reversal-up .eval-intent-title {
  color: #38bdf8 !important;
}

.eval-intent-banner.stage-exhaustion {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.22) 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.45) !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.22) !important;
}

.eval-intent-banner.stage-exhaustion .eval-intent-title {
  color: #fbbf24 !important;
}

.eval-intent-banner.stage-reversal-down {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.22) 100%) !important;
  border: 1px solid rgba(239, 68, 68, 0.45) !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.22) !important;
}

.eval-intent-banner.stage-reversal-down .eval-intent-title {
  color: #f87171 !important;
}

.eval-intent-content {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
}

.eval-intent-icon {
  font-size: 1.2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.eval-intent-texts {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.25;
}

.eval-intent-title {
  font-size: 0.79rem;
  font-weight: 600;
  color: #e2e8f0;
  letter-spacing: 0.15px;
  white-space: nowrap;
}

.eval-intent-desc {
  font-size: 0.69rem;
  color: var(--text-muted, #94a3b8);
  font-weight: 400;
  line-height: 1.2;
}

/* Scanner Breakout Filter Pill Button */
.pill-btn.breakout-pill {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.32);
  color: #10b981;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.32rem 0.8rem;
  min-height: 31px;
  box-sizing: border-box;
  border-radius: var(--radius-pill, 9999px);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
  transition: all 0.2s ease;
}

.pill-btn.breakout-pill:hover {
  background: rgba(16, 185, 129, 0.16);
  border-color: rgba(16, 185, 129, 0.55);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.25);
  color: #34d399;
}

.pill-btn.breakout-pill.active {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  color: #ffffff !important;
  border-color: #34d399 !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.45) !important;
  font-weight: 600 !important;
}

/* Screener intent pill */
.intent-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.intent-pill.intent-breakout {
  background: rgba(139, 92, 246, 0.2);
  color: #c084fc;
  border: 1px solid rgba(192, 132, 252, 0.4);
}

.intent-pill.intent-reversal-up {
  background: rgba(6, 182, 212, 0.2);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
}

.intent-pill.intent-exhaustion {
  background: rgba(244, 63, 94, 0.2);
  color: #fb7185;
  border: 1px solid rgba(251, 113, 133, 0.4);
}

.intent-pill.intent-reversal-down {
  background: rgba(225, 29, 72, 0.2);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.4);
}

/* ========================================================================
   HOME MARKET MOVERS (LEADERS, GAINERS, LOSERS, TRENDING)
   ======================================================================== */
.home-market-movers,
.home-movers-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0.85rem;
  padding: 0;
  max-width: 100%;
  margin: 0 0 1.5rem;
  box-sizing: border-box;
}

@media (max-width: 1080px) {
  .home-market-movers,
  .home-movers-3col {
    grid-template-columns: 1fr !important;
  }
}

/* Trending Section Controls Header */
.home-trending-section {
  margin-bottom: 1.5rem !important;
}

.home-trending-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: none !important;
}

[data-theme="light"] .home-trending-header,
body.light-theme .home-trending-header {
  border-bottom: none !important;
}

.home-trending-controls {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Trending Center Filter Buttons (ALLSHR, KSE100, Shariah) */
.home-trending-center-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.home-trending-center-filters .mover-btn-group {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0;
  background: transparent;
  border-bottom: none !important;
}

.home-trending-center-filters .shariah-pill {
  cursor: pointer;
  min-height: 28px;
  padding: 0.28rem 0.75rem;
  font-size: 0.74rem;
  line-height: 1.2;
}

@media (max-width: 900px) {
  .home-trending-header {
    flex-wrap: wrap;
    gap: 10px;
  }
  .home-trending-center-filters {
    order: 3;
    width: 100%;
    justify-content: center;
  }
}

/* Trending Bottom Footer Bar (Criteria Steppers & Reset Button - Seamless / No Background) */
.home-trending-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.25rem 1rem 0.5rem !important;
  background: transparent !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

[data-theme="light"] .home-trending-footer,
body.light-theme .home-trending-footer,
[data-theme-mode="light"] .home-trending-footer {
  background: transparent !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.home-trending-footer .trending-criteria-bar {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  margin: 0;
  padding: 0;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  flex-wrap: wrap;
}

.home-trending-footer .criteria-lbl {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

.home-trending-footer .criteria-stepper {
  height: 28px;
  border-radius: 6px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
}

[data-theme="light"] .home-trending-footer .criteria-stepper,
body.light-theme .home-trending-footer .criteria-stepper {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.home-trending-footer .criteria-step-btn {
  width: 26px;
  height: 100%;
  font-size: 0.85rem;
}

.home-trending-footer .criteria-val-input {
  width: 60px;
  font-size: 0.76rem;
}

.mover-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.mover-card:hover {
  border-color: rgba(56, 189, 248, 0.4);
}

.mover-card-header {
  background: var(--bg-secondary);
  padding: 0.45rem 0.65rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
}

.mover-title-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mover-icon {
  font-size: 1.05rem;
  line-height: 1;
}

.mover-title {
  font-size: 0.94rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

/* Headings for Trending, Leaders, Gainers, Losers */
.home-market-movers .mover-card-header {
  padding: 0.48rem 0.70rem;
}

.home-market-movers .mover-title-group {
  gap: 7px;
}

.home-market-movers .mover-icon {
  font-size: 1.12rem;
  line-height: 1;
}

.home-market-movers .mover-title {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

/* Compact Segmented Buttons (By Volume, By Price, By Percentage) */
.mover-btn-group {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem 0.45rem;
  background: transparent;
  border-bottom: none !important;
}

.mover-filter-btn {
  flex: 1;
  padding: 0.28rem 0.55rem;
  border-radius: var(--radius-sm, 6px);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  white-space: nowrap;
}

.mover-filter-btn:hover:not(.active) {
  color: var(--text-primary);
  border-color: var(--color-accent);
  background: var(--bg-card-hover);
}

.mover-filter-btn.active {
  background: var(--color-accent-grad) !important;
  color: var(--color-accent-text, #ffffff) !important;
  border-color: transparent !important;
  box-shadow: var(--shadow-glow) !important;
  font-weight: 700 !important;
}

/* Trending Criteria Controls Bar (Below Table Items - Transparent / No Background) */
.trending-criteria-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.85rem;
  padding: 0.35rem 0.65rem;
  background: transparent !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

[data-theme="light"] .trending-criteria-bar,
body.light-theme .trending-criteria-bar,
[data-theme-mode="light"] .trending-criteria-bar {
  background: transparent !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.criteria-field {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
  min-width: 0;
}

.criteria-lbl {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.criteria-stepper {
  display: inline-flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  overflow: hidden;
  height: 20px;
}

[data-theme="light"] .criteria-stepper {
  background: #ffffff;
  border-color: #cbd5e1;
}

.criteria-step-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 800;
  width: 16px;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  padding: 0;
  line-height: 1;
}

.criteria-step-btn:hover {
  background: var(--color-accent);
  color: #ffffff;
}

.criteria-val-input {
  width: 44px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  text-align: center;
  padding: 0 1px;
  outline: none;
}

.mover-table-wrap {
  flex: 1;
  overflow: visible;
}

.mover-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  padding: 0.25rem 0.45rem 0.45rem;
}

.mover-see-more-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--color-accent);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  line-height: 1.2;
}

.mover-see-more-btn:hover {
  background: var(--color-accent);
  color: #ffffff;
  border-color: var(--color-accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.mover-show-less-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.45rem;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  line-height: 1.2;
}

.mover-show-less-btn:hover {
  color: var(--text-primary);
  background: var(--bg-secondary);
  border-color: var(--border-subtle);
}

[data-theme="light"] .mover-see-more-btn {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: var(--color-accent);
}

[data-theme="light"] .mover-see-more-btn:hover {
  background: var(--color-accent);
  color: #ffffff;
  border-color: var(--color-accent);
}

[data-theme="light"] .mover-show-less-btn {
  background: transparent;
  border-color: #cbd5e1;
  color: #64748b;
}

[data-theme="light"] .mover-show-less-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* Trending Dedicated Footer: Reset on Left and See More / Show Less on Right */
.trending-footer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem 0.65rem;
  background: transparent;
}

.trending-reset-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
  border-radius: 8px;
  color: var(--color-accent);
  font-size: 0.78rem;
  font-weight: 700;
  font-family: inherit;
  padding: 0.35rem 0.95rem;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
  letter-spacing: 0.02em;
  user-select: none;
}

.trending-reset-btn .reset-icon {
  font-size: 0.9rem;
  display: inline-block;
  line-height: 1;
  color: var(--color-accent);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.trending-reset-btn:hover {
  background: var(--color-accent-grad, var(--color-accent));
  border-color: var(--color-accent);
  color: var(--color-accent-text, #ffffff);
  transform: translateY(-1.5px);
  box-shadow: var(--shadow-glow, 0 4px 12px rgba(0, 0, 0, 0.3));
}

.trending-reset-btn:hover .reset-icon {
  color: var(--color-accent-text, #ffffff);
  transform: rotate(-180deg);
}

.trending-reset-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .trending-reset-btn,
body.light-theme .trending-reset-btn,
[data-theme-mode="light"] .trending-reset-btn {
  background: color-mix(in srgb, var(--color-accent) 8%, #ffffff) !important;
  border-color: color-mix(in srgb, var(--color-accent) 35%, transparent) !important;
  color: var(--color-accent) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .trending-reset-btn .reset-icon,
body.light-theme .trending-reset-btn .reset-icon,
[data-theme-mode="light"] .trending-reset-btn .reset-icon {
  color: var(--color-accent) !important;
}

[data-theme="light"] .trending-reset-btn:hover,
body.light-theme .trending-reset-btn:hover,
[data-theme-mode="light"] .trending-reset-btn:hover {
  background: var(--color-accent-grad, var(--color-accent)) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-accent-text, #ffffff) !important;
  box-shadow: var(--shadow-glow, 0 3px 10px rgba(0, 0, 0, 0.25)) !important;
}

[data-theme="light"] .trending-reset-btn:hover .reset-icon,
body.light-theme .trending-reset-btn:hover .reset-icon,
[data-theme-mode="light"] .trending-reset-btn:hover .reset-icon {
  color: var(--color-accent-text, #ffffff) !important;
}

/* Card List Layout Matching Compact Design */
.mover-items-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.35rem 0.45rem 0.45rem;
}

.mover-item-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-top: 2.5px solid #10b981;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.mover-item-card.card-gain {
  border-top: 2.5px solid #10b981;
}

.mover-item-card.card-loss {
  border-top: 2.5px solid #ef4444;
}

.mover-item-card.card-neutral {
  border-top: 2.5px solid var(--border-subtle);
}

.mover-item-card:hover {
  background: var(--bg-card-hover, var(--bg-secondary));
  transform: translateY(-1.5px);
  border-color: var(--color-accent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.mover-item-card.selected-item {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1.5px var(--color-accent), var(--shadow-glow);
}

/* Row 1: Left [Exchange] Symbol [NC/SC] | Right [Price Pill] +Change (+Change%) */
.mover-card-row1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 6px;
}

.mover-r1-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.mover-badge-exchange {
  border: 1px solid rgba(217, 119, 6, 0.4);
  background: rgba(245, 158, 11, 0.08);
  color: #b45309;
  font-size: 0.63rem;
  padding: 1px 4.5px;
  border-radius: 4px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

[data-theme="dark"] .mover-badge-exchange {
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.12);
}

.mover-sym-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
}

.mover-shariah-icon {
  font-size: 0.78rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  user-select: none;
  filter: drop-shadow(0 1px 2px rgba(245, 158, 11, 0.45));
}

.mover-badge-shariah {
  font-size: 0.58rem;
  padding: 1px 4px;
  border-radius: 4px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.mover-tag-nc {
  background: rgba(239, 68, 68, 0.10);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.28);
}

.mover-tag-sc {
  background: rgba(16, 185, 129, 0.10);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.28);
}

[data-theme="dark"] .mover-tag-sc {
  color: #10b981;
}

.mover-r1-right {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.mover-price-pill {
  border-radius: 6px;
  padding: 2px 7px;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.mover-price-pill.pill-gain {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #059669;
}

[data-theme="dark"] .mover-price-pill.pill-gain {
  color: #10b981;
  background: rgba(16, 185, 129, 0.16);
}

.mover-price-pill.pill-loss {
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.32);
  color: #dc2626;
}

[data-theme="dark"] .mover-price-pill.pill-loss {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
}

.mover-price-pill.pill-neutral {
  background: rgba(148, 163, 184, 0.10);
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: var(--text-muted);
}

.mover-chg-text {
  font-family: var(--font-mono);
  font-size: 0.77rem;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.2;
}

.mover-chg-text.text-gain {
  color: #059669;
}

[data-theme="dark"] .mover-chg-text.text-gain {
  color: #10b981;
}

.mover-chg-text.text-loss {
  color: #dc2626;
}

[data-theme="dark"] .mover-chg-text.text-loss {
  color: #ef4444;
}

.mover-chg-text.text-neutral {
  color: var(--text-muted);
}

/* Row 2: Left [REG/FUT] [Sector] | Right L: xx.xx • H: xx.xx */
.mover-card-row2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 6px;
}

.mover-r2-left {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex: 1;
}

.mover-vol-text {
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  color: var(--text-primary, #e2e8f0) !important;
  font-family: var(--font-mono, monospace) !important;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

[data-theme="light"] .mover-vol-text,
body.light-theme .mover-vol-text {
  color: #0f172a !important;
}

.mover-badge-market {
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  background: rgba(148, 163, 184, 0.08);
  font-size: 0.58rem;
  padding: 1px 4.5px;
  border-radius: 4px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.mover-badge-sector {
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  background: rgba(148, 163, 184, 0.06);
  font-size: 0.66rem;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 400;
  line-height: 1.25;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mover-r2-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.mover-range-text {
  font-size: 0.67rem;
  font-weight: 400;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.mover-range-text .range-dot {
  margin: 0 3px;
  opacity: 0.6;
}

/* Inline Trade Button for Home Cards (Macro, Commodities, Securities) */
.mover-trade-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: linear-gradient(135deg, rgba(0, 242, 254, 0.15) 0%, rgba(79, 172, 254, 0.22) 100%);
  border: 1px solid rgba(0, 242, 254, 0.4);
  color: #00f2fe !important;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  margin-top: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  text-decoration: none;
}

.mover-trade-btn:hover {
  background: linear-gradient(135deg, #00f2fe 0%, #4facfe 100%);
  color: #0b111e !important;
  border-color: #00f2fe;
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 3px 10px rgba(0, 242, 254, 0.45);
}

.mover-trade-btn span {
  font-size: 0.70rem;
}

[data-theme="light"] .mover-trade-btn {
  background: rgba(14, 165, 233, 0.12);
  border-color: rgba(14, 165, 233, 0.35);
  color: #0284c7 !important;
}

[data-theme="light"] .mover-trade-btn:hover {
  background: #0284c7;
  color: #ffffff !important;
  border-color: #0284c7;
}

.mover-item-card .trend-badge {
  font-size: 0.70rem;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 800;
  letter-spacing: 0.02em;
  gap: 4px;
  line-height: 1.15;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.mover-item-card .trend-badge .trend-icon {
  font-size: 0.66rem;
}

.mover-item-card .trend-badge .trend-text {
  font-size: 0.70rem;
  font-weight: 800;
}

.mover-item-card .macro-cat-pill {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  line-height: 1.2;
}

.mover-item-card .macro-cell-flag {
  font-size: 1.02rem;
  line-height: 1;
}

/* Light Theme overrides for Market Movers */
[data-theme="light"] .mover-card {
  background: #ffffff;
  border-color: #e2e8f0;
}

[data-theme="light"] .mover-card-header {
  background: #f8fafc;
  border-bottom-color: #e2e8f0;
}

[data-theme="light"] .mover-btn-group,
body.light-theme .mover-btn-group,
[data-theme-mode="light"] .mover-btn-group {
  border-bottom: none !important;
}

[data-theme="light"] .mover-filter-btn {
  background: var(--bg-secondary);
  border-color: var(--border-subtle);
  color: var(--text-secondary);
}

[data-theme="light"] .mover-filter-btn:hover:not(.active) {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-primary);
  border-color: var(--color-accent);
}

[data-theme="light"] .mover-filter-btn.active {
  background: var(--color-accent-grad) !important;
  color: var(--color-accent-text, #ffffff) !important;
  border-color: transparent !important;
  box-shadow: var(--shadow-glow) !important;
}

[data-theme="light"] .mover-item-card,
[data-theme="system"] .mover-item-card {
  background: var(--bg-card);
  border-color: var(--border-subtle);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .mover-item-card:hover,
[data-theme="system"] .mover-item-card:hover {
  background: var(--bg-card-hover, var(--bg-secondary));
  border-color: var(--color-accent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .mover-chg-sub.text-loss {
  color: #dc2626 !important;
}

.mover-name {
  font-size: 0.65rem;
  color: var(--text-muted);
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mover-price {
  font-family: var(--font-mono);
  font-weight: 700;
}

.mover-chg {
  font-family: var(--font-mono);
  font-weight: 800;
}

.mover-vol {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-secondary);
}

/* ========================================================================
   TRADINGVIEW FAMOUS INDICATORS & PIVOT POINTS DESIGN SYSTEM
   ======================================================================== */

/* Intraday Levels (Pivot Points) Card - Seamless Terminal Look */
.pivots-levels-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.15rem 0 !important;
  margin-bottom: 0.65rem !important;
  box-shadow: none !important;
}

.pivots-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.35rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border-subtle);
}

.pivots-title {
  font-size: 0.71rem;
  font-weight: 600;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pivots-levels-table {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.pivot-level-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0.25rem;
  min-height: 22px;
  background: transparent !important;
  border: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: all 0.15s ease;
}

.pivot-level-row:hover {
  background: transparent !important;
  border-color: transparent !important;
  transform: none !important;
}

.pivot-level-row .lvl-name {
  font-size: 0.74rem;
  font-weight: 500 !important;
}

.pivot-level-row .lvl-val {
  font-family: var(--font-numbers);
  font-size: 0.78rem !important;
  font-weight: 550 !important;
  letter-spacing: 0.01em;
}

/* Resistance (R1, R2, R3) */
.pivot-level-row.level-resistance,
.pivot-level-row.level-target {
  background: transparent !important;
  border: none !important;
  border-left: none !important;
}

.pivot-level-row.level-resistance .lvl-name,
.pivot-level-row.level-target .lvl-name {
  color: #10b981 !important;
  font-weight: 500 !important;
}

.pivot-level-row.level-resistance .lvl-val,
.pivot-level-row.level-target .lvl-val {
  color: #10b981 !important;
  font-weight: 550 !important;
}

/* Pivot Point / Average */
.pivot-level-row.level-average {
  background: transparent !important;
  border: none !important;
  border-left: none !important;
}

.pivot-level-row.level-average .lvl-name {
  color: #f59e0b !important;
  font-weight: 500 !important;
}

.pivot-level-row.level-average .lvl-val {
  color: #f59e0b !important;
  font-weight: 600 !important;
}

/* Supports (S1, S2, S3) */
.pivot-level-row.level-support {
  background: transparent !important;
  border: none !important;
  border-left: none !important;
}

.pivot-level-row.level-support .lvl-name {
  color: #ef4444 !important;
  font-weight: 500 !important;
}

.pivot-level-row.level-support .lvl-val {
  color: #ef4444 !important;
  font-weight: 550 !important;
}

/* Light Theme Overrides for Pivot Points */
[data-theme="light"] .pivot-level-row.level-resistance .lvl-name,
[data-theme="light"] .pivot-level-row.level-resistance .lvl-val,
[data-theme="light"] .pivot-level-row.level-target .lvl-name,
[data-theme="light"] .pivot-level-row.level-target .lvl-val,
[data-theme="system"] .pivot-level-row.level-resistance .lvl-name,
[data-theme="system"] .pivot-level-row.level-resistance .lvl-val,
[data-theme="system"] .pivot-level-row.level-target .lvl-name,
[data-theme="system"] .pivot-level-row.level-target .lvl-val {
  color: #059669 !important;
}

[data-theme="light"] .pivot-level-row.level-average .lvl-name,
[data-theme="light"] .pivot-level-row.level-average .lvl-val,
[data-theme="system"] .pivot-level-row.level-average .lvl-name,
[data-theme="system"] .pivot-level-row.level-average .lvl-val {
  color: #d97706 !important;
}

[data-theme="light"] .pivot-level-row.level-support .lvl-name,
[data-theme="light"] .pivot-level-row.level-support .lvl-val,
[data-theme="system"] .pivot-level-row.level-support .lvl-name,
[data-theme="system"] .pivot-level-row.level-support .lvl-val {
  color: #dc2626 !important;
}

.pivots-trend-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--border-subtle);
}

.pivots-trend-footer .trend-lbl {
  font-size: 0.76rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
}

/* Candlestick Pattern Card */
.pattern-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.85rem;
  margin-bottom: 0.85rem;
  box-shadow: var(--shadow-card);
}

.pattern-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4rem;
}

.pattern-title-label {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-weight: 700;
}

.pattern-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

/* TradingView Style Indicator Sections - Attractive Card Design */
.tv-ind-section {
  background: transparent;
  border: none;
  margin-bottom: 0.85rem;
}

.tv-ind-section-header {
  padding: 0.35rem 0.2rem 0.4rem;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.71rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

.tv-indicator-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.tv-indicator-row {
  display: flex;
  flex-direction: column;
  padding: 0.38rem 0.2rem;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px dashed var(--border-subtle) !important;
  border-radius: 0 !important;
  gap: 0.25rem;
  box-shadow: none !important;
  transition: all 0.15s ease;
}

.tv-indicator-row:last-child {
  border-bottom: none !important;
}

.tv-indicator-row:hover {
  background: transparent !important;
  border-bottom-color: var(--border-active) !important;
  transform: none !important;
}

[data-theme="light"] .tv-indicator-row,
[data-theme="system"] .tv-indicator-row {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.08) !important;
  box-shadow: none !important;
}

[data-theme="light"] .tv-indicator-row:last-child,
[data-theme="system"] .tv-indicator-row:last-child {
  border-bottom: none !important;
}

.tv-ind-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.tv-ind-left {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  min-width: 0;
}

.tv-ind-name {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}

.tv-ind-params {
  font-family: var(--font-numbers);
  font-size: 0.65rem;
  color: var(--text-muted);
  font-weight: 450;
  white-space: nowrap;
}

.tv-ind-bottom {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

.tv-ind-val {
  font-family: var(--font-numbers);
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}

.tv-ind-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.5px 6px;
  border-radius: 4px;
  font-size: 0.60rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.15;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  user-select: none;
}

.tv-badge-buy {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 1px 4px rgba(16, 185, 129, 0.4) !important;
}

.tv-badge-sell {
  background: linear-gradient(135deg, #991b1b 0%, #dc2626 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 1px 4px rgba(220, 38, 38, 0.4) !important;
}

.tv-badge-neutral {
  background: #475569 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
}

.tv-badge-warning {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 1px 4px rgba(245, 158, 11, 0.4) !important;
}

[data-theme="light"] .tv-badge-buy,
[data-theme="system"] .tv-badge-buy {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  color: #ffffff !important;
}

[data-theme="light"] .tv-badge-sell,
[data-theme="system"] .tv-badge-sell {
  background: linear-gradient(135deg, #991b1b 0%, #dc2626 100%) !important;
  color: #ffffff !important;
}

[data-theme="light"] .tv-badge-neutral,
[data-theme="system"] .tv-badge-neutral {
  background: #475569 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

/* ================= CANDLESTICK PATTERN STRIP (BELOW CHART) ================= */
.chart-pattern-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.35rem 0.65rem;
  margin-top: 0.35rem;
  transition: all 0.25s ease;
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  box-sizing: border-box;
  flex-shrink: 0;
}

.chart-pattern-strip:hover {
  border-color: var(--border-hover, var(--border-active));
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.pattern-strip-left {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 1 1 auto;
  min-width: 0;
}

.pattern-strip-icon-box {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.pattern-strip-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.1rem;
}

.pattern-strip-label {
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  line-height: 1.1;
}

.pattern-strip-sub {
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 0.64rem;
  color: var(--text-muted);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.pattern-strip-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
  flex-shrink: 0;
  text-align: right;
}

.pattern-strip-name {
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  text-align: right;
}

.pattern-strip-bias-line {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.pattern-strip-bias-line .verdict-badge {
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: 0.62rem;
  font-weight: 700;
  padding: 1.5px 6.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: 4px;
}

/* ================= CURRENT TREND HERO CARD (EVALUATION TAB) ================= */
.current-trend-hero-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  margin-bottom: 0.85rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transition: all 0.25s ease;
}

.current-trend-hero-card:hover {
  border-color: var(--border-hover);
}

.trend-hero-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.trend-hero-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.trend-hero-icon {
  font-size: 1.4rem;
  line-height: 1;
}

.trend-hero-sub {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
}

.trend-hero-name {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0.1rem 0 0 0;
  color: var(--text-primary);
  line-height: 1.2;
}

.trend-hero-badge-box {
  flex-shrink: 0;
}

.trend-hero-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.trend-hero-meta-item strong {
  color: var(--text-primary);
}

/* Light Mode Overrides */
[data-theme="light"] .chart-pattern-strip,
[data-theme="light"] .current-trend-hero-card {
  background: #ffffff;
  border-color: #e2e8f0;
}

[data-theme="light"] .pattern-strip-icon-box {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

[data-theme="light"] .trend-hero-detail-row {
  border-top-color: #f1f5f9;
}

/* ========================================================================
   SCANNER SORTING, MULTI-HORIZON BADGES & ADMIN BUYING RULES STYLING
   ======================================================================== */

/* Scanner Quick Sorting Toolbar */
.scanner-sort-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.5rem 0 0.85rem 0;
  padding: 0.5rem 0.85rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
}

.scanner-sort-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sort-toolbar-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.scanner-sort-dropdown {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 0.35rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}

.scanner-sort-dropdown:focus,
.scanner-sort-dropdown:hover {
  border-color: var(--accent-gold);
}

.scanner-sort-toggle-btn {
  background: var(--bg-surface);
  color: var(--accent-gold);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 0.35rem 0.6rem;
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.scanner-sort-toggle-btn:hover {
  background: rgba(234, 179, 8, 0.15);
  border-color: var(--accent-gold);
}

.scanner-stocks-only-notice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.stocks-tag-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.2px;
}

.buying-tag-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.buying-tag-badge:hover {
  background: rgba(16, 185, 129, 0.22);
}

/* Sortable Table Headers */
.sortable-th {
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  line-height: 1.25;
  transition: color 0.15s, background 0.15s;
}

.sortable-th:hover {
  color: var(--accent-gold);
  background: rgba(255, 255, 255, 0.03);
}

.th-sort-icon {
  font-size: 0.75rem;
  opacity: 0.4;
  margin-left: 2px;
}

.th-sort-icon.active {
  opacity: 1;
  color: var(--accent-gold);
  font-weight: 800;
}

/* Multi-Horizon Returns Badges */
.return-pill {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.2px;
  text-align: right;
  min-width: 54px;
}

.return-pos {
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
}

.return-neg {
  color: #f43f5e;
  background: rgba(244, 63, 94, 0.12);
}

.return-zero {
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.1);
}

.return-na {
  color: var(--text-muted);
  background: transparent;
}

/* Buying Tag in Symbol Column */
.buying-matched-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  color: #10b981;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 5px;
  vertical-align: middle;
}

/* Scanner Filter Pill Specifics */
.pill-btn.buying-pill {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.32);
  color: #10b981;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.32rem 0.8rem;
  min-height: 31px;
  box-sizing: border-box;
  border-radius: var(--radius-pill, 9999px);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
  transition: all 0.2s ease;
}

.pill-btn.buying-pill:hover {
  background: rgba(16, 185, 129, 0.16);
  border-color: rgba(16, 185, 129, 0.55);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.25);
  color: #34d399;
}

.pill-btn.buying-pill.active {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  color: #ffffff !important;
  border-color: #34d399 !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.45) !important;
  font-weight: 600 !important;
}

.pill-btn.trend-bullish-pill {
  border-color: rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}

.pill-btn.trend-bullish-pill.active {
  background: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
}

/* Admin Buying Filter Strategy Rules Card */
.buying-strategy-card {
  margin-top: 0.5rem;
}

.buying-card-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.buying-rule-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.btn-sm-action {
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 0.35rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-sm-action:hover {
  color: var(--text-primary);
  border-color: var(--border-focus, #38bdf8);
}

.btn-sm-save {
  padding: 0.35rem 0.85rem !important;
  font-size: 0.78rem !important;
}

.buying-filter-criteria-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
}

.criteria-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
}

.clean-select {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 0.35rem 0.65rem;
  font-size: 0.78rem;
  outline: none;
}

.clean-num-input {
  width: 55px;
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
  outline: none;
}

.btn-xs-pill {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  border-radius: 4px;
  padding: 0.2rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-xs-pill:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38bdf8;
  color: #38bdf8;
}

/* 13 Strategies Checklist Grid */
.strategy-checklist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.strategy-admin-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 0.85rem;
  transition: border-color 0.2s;
}

.strategy-admin-card:hover {
  border-color: rgba(56, 189, 248, 0.4);
}

.strat-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.65rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
}

.strat-category-tag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #38bdf8;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.strat-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.strat-ticked-counter {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  color: var(--text-secondary);
  font-family: monospace;
}

.strat-options-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 240px;
  overflow-y: auto;
  padding-right: 4px;
}

.strategy-chk-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  border-radius: 5px;
  cursor: pointer;
  user-select: none;
  background: transparent;
  transition: background 0.15s;
}

.strategy-chk-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.strategy-chk-item.active {
  background: rgba(16, 185, 129, 0.08);
}

.strategy-chk-item input[type="checkbox"] {
  cursor: pointer;
  accent-color: #10b981;
  width: 15px;
  height: 15px;
}

.chk-label-text {
  font-size: 0.76rem;
  font-weight: 600;
}

.chk-tag-bullish {
  color: #34d399;
}

.chk-tag-bearish {
  color: #f87171;
}

.chk-tag-neutral {
  color: var(--text-secondary);
}

.buying-bottom-actions {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

/* ==========================================================================
   INDEX MACRO BAROMETER & FUNDAMENTAL DOSSIER (DUAL THEME ADAPTIVE)
   ========================================================================== */
.index-macro-barometer {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 8px);
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.75rem;
  box-shadow: var(--shadow-card);
}

.macro-baro-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 0.6rem;
  gap: 0.35rem;
}

.macro-baro-title {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-align: center;
  white-space: nowrap;
}

.macro-baro-regime {
  text-align: center;
  font-size: 0.74rem;
  font-weight: 550;
  padding: 3px 14px;
  border-radius: 999px;
  background: var(--color-bullish-bg);
  color: var(--color-bullish);
  border: 1px solid rgba(5, 150, 105, 0.25);
  white-space: nowrap;
  display: inline-block;
}

.macro-baro-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
}

.macro-baro-row {
  display: grid;
  gap: 0.5rem;
  align-items: center;
}

.macro-baro-row-top {
  grid-template-columns: repeat(3, 1fr);
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--border-subtle);
}

.macro-baro-row-bottom {
  grid-template-columns: repeat(2, 1fr);
}

.macro-baro-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.macro-baro-item .m-lbl {
  font-size: 0.67rem;
  color: var(--text-secondary);
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  font-weight: 500;
  white-space: nowrap;
}

.macro-baro-item strong {
  font-size: 0.88rem;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

/* Index Macro Hero Card in Fundamental Tab (Refined & Beautifully Stacked) */
.index-macro-hero-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--color-bullish);
  border-radius: var(--radius-md, 8px);
  padding: 0.65rem 0.85rem;
  margin-top: 0.35rem;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}

.index-macro-tag {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.035em;
  color: var(--color-accent);
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.2rem;
}

.index-macro-title {
  margin: 0 0 0.3rem 0;
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--text-primary);
  line-height: 1.3;
  display: block;
}

.index-macro-badge-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.35rem;
}

.index-macro-badge-row .eval-badge {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.index-macro-narrative {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* Multiples Strip (2 in a Row for Perfect Proportions) */
.index-multiples-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.45rem;
  margin-top: 0.35rem;
}

.idx-mult-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 0.52rem 0.65rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
}

.idx-mult-card .mult-label {
  font-size: 0.60rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  margin-bottom: 2px;
  letter-spacing: 0.02em;
}

.idx-mult-card .mult-val {
  font-size: 0.95rem;
  font-family: var(--font-mono);
  font-weight: 550;
  color: var(--text-primary);
  line-height: 1.18;
}

.idx-mult-card .mult-sub {
  font-size: 0.58rem;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Consolidated Totals Grid (2 in a Row) */
.index-totals-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.45rem;
  margin-top: 0.35rem;
}

.idx-total-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 0.48rem 0.60rem;
  text-align: left;
  box-shadow: var(--shadow-card);
}

.idx-total-card .tot-lbl {
  font-size: 0.58rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  margin-bottom: 2px;
  font-weight: 500;
  white-space: nowrap;
}

.idx-total-card .tot-val {
  font-size: 0.86rem;
  font-weight: 550;
  font-family: var(--font-mono);
  color: var(--text-primary);
}

/* Heavyweights & Profit Drivers Split */
.idx-heavyweights-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  margin-top: 0.35rem;
}

.idx-concentration-col {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 0.45rem 0.55rem;
  box-shadow: var(--shadow-card);
}

.idx-conc-title {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.35rem;
  display: flex;
  justify-content: space-between;
}

.idx-conc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.22rem 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.72rem;
}

.idx-conc-row:last-child {
  border-bottom: none;
}

.idx-conc-sym {
  font-weight: 600;
  cursor: pointer;
  color: var(--color-accent);
}

.idx-conc-sym:hover {
  text-decoration: underline;
}

.idx-conc-bar-wrap {
  flex: 1;
  margin: 0 0.65rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
}

.idx-conc-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-bullish));
}

.idx-conc-pct {
  font-family: var(--font-mono);
  font-weight: 550;
  font-size: 0.74rem;
  min-width: 45px;
  text-align: right;
  color: var(--text-primary);
}

/* Constituent Table */
.idx-constituents-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.76rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  overflow: hidden;
}

.idx-constituents-tbl th {
  background: var(--bg-secondary);
  padding: 7px 9px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.idx-constituents-tbl td {
  padding: 6px 9px;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
  font-family: var(--font-mono);
  color: var(--text-primary);
}

.idx-constituents-tbl tr:hover {
  background: var(--bg-secondary);
  cursor: pointer;
}

/* Universal High-Contrast Color Helpers */
.text-green {
  color: var(--color-bullish, #059669) !important;
}

.text-red {
  color: var(--color-bearish, #dc2626) !important;
}

.text-blue {
  color: var(--color-accent, #0284c7) !important;
}

.text-amber {
  color: #d97706 !important;
}

[data-theme="dark"] .text-green {
  color: #10b981 !important;
}

[data-theme="dark"] .text-red {
  color: #ef4444 !important;
}

[data-theme="dark"] .text-blue {
  color: #38bdf8 !important;
}

[data-theme="dark"] .text-amber {
  color: #f59e0b !important;
}

/* ========================================================================
   CORPORATE PAYOUTS & XDATES VIEW STYLING
   ======================================================================== */
.payouts-wrapper {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0.4rem 1.25rem 3rem;
  box-sizing: border-box;
}

.payouts-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.payouts-title-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.payouts-main-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: -0.01em;
}

.payouts-subtitle {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 0;
}

.payouts-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.payouts-search-box {
  min-width: 280px;
}

.payouts-search-box .search-input-clean {
  width: 100%;
  padding: 0.45rem 0.75rem;
  background: var(--bg-input, var(--bg-card));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 6px);
  color: var(--text-primary);
  font-size: 0.8rem;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.payouts-search-box .search-input-clean:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2);
}

.btn-refresh-payouts,
.btn-export-payouts {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.95rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-refresh-payouts:hover,
.btn-export-payouts:hover {
  background: var(--bg-secondary);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn-export-payouts {
  background: rgba(2, 132, 199, 0.1);
  border-color: rgba(2, 132, 199, 0.3);
  color: var(--color-accent);
}

.btn-export-payouts:hover {
  background: var(--color-accent);
  color: #ffffff;
}

/* KPI Ribbon Cards */
.payouts-kpi-ribbon {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 1024px) {
  .payouts-kpi-ribbon {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .payouts-kpi-ribbon {
    grid-template-columns: 1fr;
  }
}

.payouts-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.payouts-kpi-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-accent);
}

.payouts-kpi-card.highlight-green {
  border-left: 3px solid #10b981;
}

.payouts-kpi-card.highlight-cyan {
  border-left: 3px solid #06b6d4;
}

.payouts-kpi-card.highlight-purple {
  border-left: 3px solid #a855f7;
}

.payouts-kpi-card .kpi-label {
  font-size: 0.68rem;
  font-weight: 750;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.payouts-kpi-card .kpi-val {
  font-size: 1.55rem;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--text-primary);
  line-height: 1.1;
}

.payouts-kpi-card.highlight-green .kpi-val {
  color: #10b981;
}

.payouts-kpi-card.highlight-cyan .kpi-val {
  color: #06b6d4;
}

.payouts-kpi-card.highlight-purple .kpi-val {
  color: #a855f7;
}

.payouts-kpi-card .kpi-sub {
  font-size: 0.72rem;
  color: var(--text-secondary);
}

/* Filter Bar */
.payouts-filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.02) !important;
  border: none !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  border-radius: 0 !important;
  padding: 0.85rem 1.25rem !important;
  margin-bottom: 0 !important;
}

.payouts-filter-left {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.payouts-filter-left .pill-btn {
  padding: 0.35rem 0.75rem;
  font-size: 0.76rem;
  font-weight: 600;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.payouts-filter-left .pill-btn:hover {
  color: var(--text-primary);
  border-color: var(--color-accent);
}

.payouts-filter-left .pill-btn.active {
  background: var(--color-accent);
  color: #ffffff;
  border-color: var(--color-accent);
}

.payouts-filter-right {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.payouts-t1-note {
  display: inline-block;
  background: rgba(2, 132, 199, 0.08);
  border: 1px solid rgba(2, 132, 199, 0.2);
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  color: var(--text-secondary);
}

/* Table Card */
.payouts-table-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.payouts-table-scroll {
  width: 100%;
  overflow-x: auto;
}

.payouts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  text-align: left;
}

.payouts-table thead {
  position: sticky;
  top: 0;
  z-index: 25;
  background-color: var(--bg-secondary);
}

.payouts-table thead tr {
  height: 54px;
}

.payouts-table th {
  height: 54px;
  box-sizing: border-box;
  background-color: var(--bg-secondary) !important;
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.5rem 0.85rem;
  border-bottom: 2px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 25;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  white-space: nowrap;
  user-select: none;
  transition: all 0.15s ease;
}

.payouts-table th.sortable-th {
  cursor: pointer;
}

.payouts-table th.sortable-th:hover {
  background-color: var(--bg-secondary) !important;
  color: var(--color-accent) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15), inset 0 0 0 1000px rgba(125, 125, 125, 0.08);
}

.payouts-table td {
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: middle;
}

.payout-row {
  cursor: pointer;
  transition: background 0.15s ease;
}

.payout-row:hover {
  background: rgba(2, 132, 199, 0.05);
}

[data-theme="light"] .payout-row:hover {
  background: #f1f5f9;
}

/* Cell specific formatting */
.payout-code-cell .code-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.payout-sym-code {
  font-weight: 800;
  font-size: 0.92rem;
  font-family: var(--font-mono);
  color: #38bdf8;
  letter-spacing: 0.02em;
}

[data-theme="light"] .payout-sym-code {
  color: #0284c7;
}

.payout-sector-pill {
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.payout-company-subtext {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-secondary);
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.1rem;
}

.payout-name-cell .name-wrap {
  font-weight: 600;
  color: var(--text-primary);
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ann-sub-date {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* Badges for Dividend, Bonus, Right */
.payout-badge {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  font-weight: 750;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  white-space: nowrap;
}

.payout-badge.dividend {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

[data-theme="light"] .payout-badge.dividend {
  background: #ecfdf5;
  color: #059669;
  border-color: #a7f3d0;
}

.payout-badge.bonus {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

[data-theme="light"] .payout-badge.bonus {
  background: #faf5ff;
  color: #7e22ce;
  border-color: #e9d5ff;
}

.payout-badge.right {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

[data-theme="light"] .payout-badge.right {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}

.payout-dash {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.payout-xdate-val {
  font-weight: 800;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: #38bdf8;
  white-space: nowrap;
}

[data-theme="light"] .payout-xdate-val {
  color: #0369a1;
}

.payout-bc-val {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Status Pills */
.status-pill {
  display: inline-block;
  padding: 0.22rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

.status-pill.status-upcoming {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

[data-theme="light"] .status-pill.status-upcoming {
  background: #dcfce7;
  color: #15803d;
  border-color: #86efac;
}

.status-pill.status-today,
.status-pill.status-lastday {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.5);
  animation: pulse-border 1.5s infinite;
}

[data-theme="light"] .status-pill.status-today,
[data-theme="light"] .status-pill.status-lastday {
  background: #fef3c7;
  color: #b45309;
  border-color: #fcd34d;
}

.status-pill.status-exdate {
  background: rgba(239, 68, 68, 0.18);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.45);
  font-weight: 700;
}

[data-theme="light"] .status-pill.status-exdate {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fca5a5;
}

.status-pill.status-passed {
  background: var(--bg-secondary);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}

.status-pill.status-unknown {
  color: var(--text-muted);
}

.btn-payout-action {
  padding: 0.25rem 0.65rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 5px;
  color: var(--text-primary);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-payout-action:hover {
  background: var(--color-accent);
  color: #ffffff;
  border-color: var(--color-accent);
  transform: scale(1.04);
}

/* Footer / Pagination */
.payouts-table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  background: var(--bg-surface-2);
  border-top: 1px solid var(--border-subtle);
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

body.light-theme .payouts-table-footer {
  background: linear-gradient(180deg, #ffffff 0%, #fbf9f4 100%);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.payouts-footer-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Payouts Count Badge: Follows theme primary typography */
.payouts-footer-badge,
#payouts-count-badge {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: var(--text-primary) !important;
}

body.light-theme .payouts-footer-badge,
body.light-theme #payouts-count-badge {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: var(--text-primary) !important;
}

.payouts-update-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 0.76rem;
  font-family: var(--font-mono, monospace);
  font-weight: 500;
  color: var(--text-muted) !important;
}

body.light-theme .payouts-update-time {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: var(--text-muted) !important;
}

.payouts-pagination,
.scanner-pagination {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pagination-btn {
  padding: 0.35rem 0.85rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pagination-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.pagination-btn:not(:disabled):hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: rgba(56, 189, 248, 0.08);
}

body.light-theme .pagination-btn {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: #1e293b;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

body.light-theme .pagination-btn:not(:disabled):hover {
  border-color: #0284c7;
  color: #0284c7;
  background: rgba(2, 132, 199, 0.06);
}

.page-indicator {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 0 4px;
}

/* Tadawul Placeholder */
.payouts-placeholder-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 4rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
}

.payouts-placeholder-card .placeholder-icon {
  font-size: 3.5rem;
}

.payouts-placeholder-card h3 {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.payouts-placeholder-card p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  max-width: 500px;
  line-height: 1.5;
  margin: 0;
}

.spin {
  display: inline-block;
  animation: spin-anim 1s linear infinite;
}

@keyframes spin-anim {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes pulse-border {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
  }

  70% {
    box-shadow: 0 0 0 5px rgba(245, 158, 11, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
  }
}

/* ========================================================================
   SECTORS PERFORMANCE VIEW STYLING (BSL INSPIRED & EXECUTIVE MODERN)
   ======================================================================== */
.sectors-wrapper {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0.4rem 1.25rem 3.5rem;
  box-sizing: border-box;
}

.sectors-header-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid rgba(99, 102, 241, 0.35);
  border-radius: var(--radius-lg, 12px);
  padding: 0.85rem 1.25rem;
  margin-bottom: 0.65rem !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
  gap: 1rem;
}

.sectors-header-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sectors-icon-badge {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.sectors-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #16a34a;
  flex-shrink: 0;
}

.sectors-header-svg {
  width: 14px;
  height: 14px;
}

.sectors-badge-num {
  font-weight: 800;
  color: #6366f1;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.sectors-badge-sep {
  color: var(--text-muted);
  font-weight: 300;
  margin: 0 0.15rem;
}

.sectors-main-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.01em;
}

.sectors-main-title span:not(.sectors-badge-icon) {
  font-weight: 500;
}

.sectors-subtitle {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.sectors-header-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
}

.header-overview-widget {
  min-width: 330px;
  max-width: 400px;
  padding: 0.5rem 0.85rem !important;
  margin: 0 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

@media (max-width: 900px) {
  .sectors-header-card {
    flex-direction: column;
    align-items: stretch;
  }
  .sectors-header-actions {
    align-items: stretch;
    width: 100%;
  }
  .header-overview-widget {
    min-width: 100%;
    max-width: 100%;
  }
}

.btn-refresh-sectors {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 8px);
  color: var(--text-primary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-refresh-sectors:hover {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.08);
  color: #6366f1;
}

.sectors-sort-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-style: italic;
  white-space: nowrap;
}

/* Sectors Table Card & Sub-bar */
.sectors-table-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.sectors-sub-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.02);
  flex-wrap: wrap;
  gap: 0.85rem;
}

.sectors-controls-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.sectors-search-box {
  min-width: 200px;
}

.sectors-search-box .search-input-clean {
  width: 100%;
  padding: 0.45rem 0.75rem;
  background: var(--bg-input, var(--bg-card));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 6px);
  color: var(--text-primary);
  font-size: 0.8rem;
  transition: all 0.2s ease;
}

.sectors-search-box .search-input-clean:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.sectors-idx-select-wrap select {
  padding: 0.45rem 0.65rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 6px);
  color: var(--text-primary);
  font-size: 0.82rem;
  cursor: pointer;
}

.sectors-summary-stats {
  font-size: 0.85rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sectors-summary-stats strong {
  color: var(--text-primary);
  font-family: monospace;
  font-size: 0.95rem;
}

.stat-gain {
  color: #16a34a;
  font-weight: 700;
}

.stat-loss {
  color: #dc2626;
  font-weight: 700;
}

.stat-sep {
  color: var(--text-muted);
}

/* Sectors Sort Controls */
.sectors-sort-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  padding: 2px 6px;
  border-radius: var(--radius-md, 6px);
  border: 1px solid var(--border-subtle);
}

.sectors-sort-lbl {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
}

.sectors-sort-dir-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 0.82rem;
  padding: 3px 6px;
  border-radius: 4px;
  transition: background 0.15s ease, color 0.15s ease;
}

.sectors-sort-dir-btn:hover {
  background: rgba(99, 102, 241, 0.15);
  color: #6366f1;
}

/* Sectors Cards Viewport & Responsive Auto Grid */
.sectors-cards-container {
  padding: 16px 20px 28px 20px;
}

.sectors-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 16px;
}

@media (min-width: 1551px) and (max-width: 1800px) {
  .sectors-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1801px) {
  .sectors-cards-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 950px) {
  .sectors-cards-container {
    padding: 12px;
  }

  .sectors-cards-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.sector-stock-card {
  background: var(--bg-card, #1e293b);
  border: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.18));
  border-radius: 14px;
  padding: 14px 16px 12px 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease, border-color 0.18s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  cursor: pointer;
  user-select: none;
}

.sector-stock-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-color: rgba(99, 102, 241, 0.45);
}

.sector-stock-card.card-bullish {
  border-top: 3px solid #10b981;
}

.sector-stock-card.card-bearish {
  border-top: 3px solid #ef4444;
}

.sector-stock-card.card-neutral {
  border-top: 3px solid rgba(148, 163, 184, 0.45);
}

.sector-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.sector-card-title-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.sector-card-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sector-card-folder-icon {
  font-size: 1.05rem;
  line-height: 1;
}

.sector-card-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sector-stock-card:hover .sector-card-name {
  color: #6366f1;
}

.sector-card-badges-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.sector-cos-pill,
.sector-weight-pill {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-muted);
  border: 1px solid rgba(148, 163, 184, 0.18);
  white-space: nowrap;
}

.sector-card-chg-col {
  flex-shrink: 0;
}

.sector-price-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 7px;
  font-family: var(--font-mono, monospace);
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
}

.sector-price-badge.bullish {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.sector-price-badge.bearish {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.sector-price-badge.neutral {
  background: rgba(148, 163, 184, 0.12);
  color: #64748b;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

/* Breadth Progress Section */
.sector-card-breadth-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 7px 10px;
  background: rgba(148, 163, 184, 0.05);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 8px;
}

.sector-breadth-bar-track {
  width: 100%;
  height: 6px;
  background: rgba(148, 163, 184, 0.15);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
}

.sector-breadth-bar-track .breadth-fill.up {
  background: #10b981;
  height: 100%;
}

.sector-breadth-bar-track .breadth-fill.down {
  background: #ef4444;
  height: 100%;
}

.sector-breadth-bar-track .breadth-fill.eq {
  background: #94a3b8;
  height: 100%;
}

.sector-breadth-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: var(--font-mono, monospace);
}

.breadth-cnt-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.breadth-cnt-up {
  color: #10b981;
}

.breadth-cnt-down {
  color: #ef4444;
}

.breadth-cnt-eq {
  color: #64748b;
}

/* Metrics 4-Box Grid */
.sector-card-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

@media (max-width: 500px) {
  .sector-card-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.sector-metric-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(148, 163, 184, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 6px;
  padding: 6px 8px;
}

.sec-metric-lbl {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.sec-metric-val {
  font-size: 0.78rem;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sec-metric-val.text-green {
  color: #10b981;
}

/* Card Footer */
.sector-card-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 2px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: color 0.15s ease;
}

.sector-stock-card:hover .sector-card-footer {
  color: #6366f1;
}

.sector-card-footer .arrow-glyph {
  margin-left: 3px;
  transition: transform 0.15s ease;
}

.sector-stock-card:hover .arrow-glyph {
  transform: translateX(3px);
}

/* ========================================================================
   MARKET SCANNER CARDS & GRID SYSTEM
   ======================================================================== */
.scanner-cards-container {
  padding: 16px 20px 24px 20px;
}

/* Responsive Grid System (Pure Auto):
   - Laptop (951px - 1550px): 2 cards in a row
   - Mid-Large Screen (1551px - 1800px): 3 cards in a row
   - Large Desktop / 1080p FHD 2nd Display (>= 1801px): 4 cards in a row
   - Mobile / Tablet (<= 950px): 1 card
*/
.scanner-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 16px;
}

@media (min-width: 1551px) and (max-width: 1800px) {
  .scanner-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1801px) {
  .scanner-cards-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 950px) {
  .scanner-cards-container {
    padding: 12px;
  }

  .scanner-cards-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* Scanner Stock Card Container */
.scanner-stock-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 14px 16px 12px 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
}

.scanner-stock-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
  border-color: rgba(99, 102, 241, 0.45);
}

/* Card Accent Borders */
.scanner-stock-card.card-bullish {
  border-top: 3px solid #10b981;
}

.scanner-stock-card.card-bearish {
  border-top: 3px solid #ef4444;
}

.scanner-stock-card.card-neutral {
  border-top: 3px solid #64748b;
}

/* Trend & Strategy / YL-YH Signal Strip (Unboxed) */
.scanner-card-signal-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 4px 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.scanner-card-signal-strip .trend-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 5px;
  letter-spacing: 0.02em;
}

/* YL (Yearly Lowest) and YH (Yearly Highest) Indicator Wrap */
.scanner-card-ylyh-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.71rem;
  font-family: var(--font-mono, monospace);
  color: var(--text-muted);
}

.scanner-card-ylyh-wrap .range-val-yearly-low {
  color: #fbbf24 !important;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
}

.scanner-card-ylyh-wrap .range-val-yearly-high {
  color: #38bdf8 !important;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
}

[data-theme="light"] .scanner-card-ylyh-wrap .range-val-yearly-low,
body.light-theme .scanner-card-ylyh-wrap .range-val-yearly-low {
  color: #d97706 !important;
}

[data-theme="light"] .scanner-card-ylyh-wrap .range-val-yearly-high,
body.light-theme .scanner-card-ylyh-wrap .range-val-yearly-high {
  color: #0284c7 !important;
}

.scanner-card-verdict-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
}

.scanner-verdict-lbl {
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.4px;
}

.scanner-verdict-tag {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.scanner-verdict-tag.bullish {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.scanner-verdict-tag.bearish {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.scanner-verdict-tag.neutral {
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-muted);
  border: 1px solid rgba(148, 163, 184, 0.2);
}

/* Card Header (Left & Right) */
.scanner-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.scanner-card-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.scanner-card-sym-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.scanner-card-mkt-pill {
  font-size: 0.64rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.scanner-card-mkt-pill.psx {
  background: rgba(0, 166, 81, 0.15);
  color: #00a651;
  border: 1px solid rgba(0, 166, 81, 0.35);
}

.scanner-card-mkt-pill.tadawul {
  background: rgba(30, 64, 175, 0.15);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.35);
}

.scanner-card-mkt-pill.global {
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
  border: 1px solid rgba(168, 85, 247, 0.35);
}

.scanner-card-sym {
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.scanner-card-sec-row {
  display: flex;
  align-items: center;
}

.scanner-card-sec-pill {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.16);
  padding: 1px 7px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.scanner-card-name-row {
  display: flex;
  align-items: center;
}

.scanner-card-company-title {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Card Header Right: Price, Trend, Vol */
.scanner-card-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.scanner-card-price-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.scanner-card-price {
  font-size: 1.25rem;
  font-weight: 800;
  font-family: var(--font-numbers, monospace);
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.scanner-card-currency {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
}

.scanner-card-chg-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 4px;
  font-family: var(--font-numbers, monospace);
}

.scanner-card-chg-badge.bullish {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.scanner-card-chg-badge.bearish {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.scanner-card-chg-badge.neutral {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.scanner-card-trend-row {
  display: flex;
  align-items: center;
}

.scanner-card-trend-row .trend-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 5px;
  letter-spacing: 0.02em;
}

.scanner-card-vol-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.scanner-card-vol-lbl {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.scanner-card-vol-val {
  font-weight: 700;
  font-family: var(--font-numbers, monospace);
  color: var(--text-secondary);
}

/* Multi-Horizon Returns Grid (1M, 3M, 1Y, 52W Growth) */
.scanner-card-returns-section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  padding: 6px 6px;
  background: rgba(148, 163, 184, 0.05);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 8px;
}

.scanner-card-return-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  text-align: center;
  min-width: 0;
}

.scanner-ret-lbl {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  font-size: 0.60rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  line-height: 1.15;
  min-height: 25px;
  width: 100%;
}

.scanner-ret-lbl-line,
.scanner-ret-lbl span {
  display: block;
  white-space: nowrap;
  line-height: 1.15;
  overflow: visible;
}

.scanner-ret-val {
  display: flex;
  justify-content: center;
  width: 100%;
}

.return-pill {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-numbers, monospace);
  padding: 2px 2px;
  border-radius: 4px;
  text-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  letter-spacing: -0.01em;
}

.return-pill.return-pos {
  background: rgba(16, 185, 129, 0.14);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.28);
}

.return-pill.return-neg {
  background: rgba(239, 68, 68, 0.14);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.28);
}

.return-pill.return-zero {
  background: rgba(148, 163, 184, 0.1);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.return-pill.return-na {
  background: rgba(148, 163, 184, 0.06);
  color: var(--text-muted);
}

/* Floor Pivots Strip */
.scanner-card-pivots-section {
  width: 100%;
}

.scanner-pivots-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 4px 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.pivot-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.68rem;
  font-family: var(--font-numbers, monospace);
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  white-space: nowrap;
}

.pivot-chip .lbl {
  font-weight: 800;
  font-size: 0.6rem;
  opacity: 0.85;
  text-transform: uppercase;
}

.pivot-chip .val {
  font-weight: 700;
}

.pivot-chip.p-s2 {
  color: #3b82f6;
  background: transparent !important;
  border: none !important;
}

.pivot-chip.p-s1 {
  color: #06b6d4;
  background: transparent !important;
  border: none !important;
}

.pivot-chip.p-pp {
  color: #a855f7;
  background: transparent !important;
  border: none !important;
}

.pivot-chip.p-r1 {
  color: #f59e0b;
  background: transparent !important;
  border: none !important;
}

.pivot-chip.p-r2 {
  color: #ef4444;
  background: transparent !important;
  border: none !important;
}

.scanner-pivots-none {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-style: italic;
  display: block;
  text-align: center;
  padding: 4px;
}

/* Card Footer Prompt */
.scanner-card-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 6px;
  border-top: 1px solid var(--border-subtle);
  margin-top: auto;
}

.scanner-card-link-hint {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: color 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.scanner-stock-card:hover .scanner-card-link-hint {
  color: #6366f1;
}

.scanner-stock-card:hover .scanner-card-link-hint .arrow-glyph {
  transform: translateX(3px);
}

.scanner-card-link-hint .arrow-glyph {
  transition: transform 0.15s ease;
  display: inline-block;
}

/* Sectors Table (Legacy Fallback) */
.sectors-table-scroll {
  overflow-x: auto;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}

.sectors-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  text-align: left;
}

.sectors-table thead {
  position: sticky;
  top: 0;
  z-index: 25;
  background-color: var(--bg-secondary);
}

.sectors-table thead tr {
  height: 54px;
}

.sectors-table thead th {
  height: 54px;
  box-sizing: border-box;
  padding: 0.5rem 0.85rem;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  background-color: var(--bg-secondary) !important;
  border-bottom: 2px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 25;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all 0.15s ease;
}

.sectors-table thead th:hover {
  background-color: var(--bg-secondary) !important;
  color: var(--color-accent) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15), inset 0 0 0 1000px rgba(125, 125, 125, 0.08);
}

.sectors-table thead th.text-left {
  text-align: left;
}

.sectors-table thead th.text-right {
  text-align: right;
}

.sectors-table thead th.text-center {
  text-align: center;
}

.sectors-table tbody tr {
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.15s ease;
  cursor: pointer;
}

.sectors-table tbody tr:hover {
  background: rgba(99, 102, 241, 0.08);
}

.sectors-table tbody td {
  padding: 0.85rem 1rem;
  vertical-align: middle;
  white-space: nowrap;
  font-size: 0.82rem;
}

.sectors-table tbody td.text-left {
  text-align: left;
}

.sectors-table tbody td.text-right {
  text-align: right;
}

.sectors-table tbody td.text-center {
  text-align: center;
}

/* Sector Name Cell */
.sector-name-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.sector-name-text {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 0.88rem;
  transition: color 0.15s;
}

.sectors-table tbody tr:hover .sector-name-text {
  color: #6366f1;
}

.sector-drilldown-hint {
  display: none !important;
}

/* Today % Cell with Visual Track */
.sector-bar-cell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}

.sector-bar-track {
  position: relative;
  display: inline-block;
  width: 85px;
  height: 14px;
  background: rgba(148, 163, 184, 0.14);
  border: 1px solid var(--border-subtle);
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}

.sector-bar-midline {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(148, 163, 184, 0.45);
  transform: translateX(-50%);
  z-index: 2;
}

.sector-bar-fill {
  position: absolute;
  top: 2px;
  bottom: 2px;
  border-radius: 2px;
  z-index: 1;
  transition: width 0.3s ease;
}

.sector-bar-fill.gain {
  left: 50%;
  background: rgba(22, 163, 74, 0.85);
}

.sector-bar-fill.loss {
  right: 50%;
  background: rgba(220, 38, 38, 0.85);
}

.sector-pct-val {
  min-width: 4.25rem;
  text-align: right;
  font-weight: 700;
  font-family: monospace;
  font-size: 0.86rem;
}

.sector-pct-val.bullish {
  color: #16a34a;
}

.sector-pct-val.bearish {
  color: #dc2626;
}

.sector-pct-val.neutral {
  color: var(--text-muted);
}

/* Breadth Cell */
.sector-breadth-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
}

.breadth-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 700;
  font-family: monospace;
}

.breadth-pill.up {
  color: #16a34a;
}

.breadth-pill.down {
  color: #dc2626;
}

.breadth-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}

.breadth-dot.dot-up {
  background: #16a34a;
}

.breadth-dot.dot-down {
  background: #dc2626;
}

.breadth-sep {
  color: var(--text-muted);
  opacity: 0.6;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .sectors-header-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .sectors-sub-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .sectors-controls-left {
    width: 100%;
  }

  .sectors-search-box {
    width: 100%;
  }
}

/* ========================================================================
   UNIFIED PAGE HEADERS & CONTROLS ACROSS TERMINAL (Scanner, Sectors, Payouts, Watchlist, Portfolio, Trading)
   ======================================================================== */
.trading-header-card,
.portfolio-header-card,
.watchlist-header-card,
.scanner-header-card,
.payouts-header-card,
.settings-header-card,
.research-header-card,
.institutional-header-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 12px);
  padding: 0.85rem 1.25rem;
  margin-bottom: 0.65rem !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
  gap: 1rem;
}

.trading-header-card:hover,
.portfolio-header-card:hover,
.watchlist-header-card:hover,
.scanner-header-card:hover,
.payouts-header-card:hover,
.settings-header-card:hover,
.research-header-card:hover,
.institutional-header-card:hover {
  border-color: rgba(99, 102, 241, 0.35);
}

.payouts-search-box,
.settings-search-box {
  min-width: 220px;
}

.scanner-search-box {
  min-width: 220px;
}

/* ========================================================================
   MORNING TRADE BOOK & BROKER EXECUTION DESK STYLES
   ======================================================================== */
.tradebook-telemetry-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 8px);
  padding: 0.85rem 1.25rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.telemetry-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.telemetry-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.telemetry-status-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
}

.execution-mode-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mode-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mode-badge.simulated {
  background: rgba(99, 102, 241, 0.15);
  color: #818cf8;
  border: 1px solid rgba(99, 102, 241, 0.35);
}

.mode-badge.live {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
  animation: pulseLiveBadge 2s infinite ease-in-out;
}

@keyframes pulseLiveBadge {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
  }
}

.toggle-hint-text {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.tradebook-actions-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.tradebook-filters-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.tradebook-actions-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.filter-pill-group {
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 9999px;
  padding: 0.15rem;
  gap: 0.2rem;
}

.filter-pill {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.filter-pill:hover {
  color: var(--text-primary);
}

.filter-pill.active {
  background: var(--color-accent, #6366f1);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}

.tradebook-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 1.25rem;
}

.tradebook-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 12px);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}

.tradebook-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.1);
}

.tradebook-card.status-pending {
  border-left: 4px solid var(--color-gold, #f59e0b);
}

.tradebook-card.status-approved {
  border-left: 4px solid var(--color-accent, #6366f1);
}

.tradebook-card.status-executed {
  border-left: 4px solid var(--color-bullish, #10b981);
}

.tradebook-card.status-rejected,
.tradebook-card.status-cancelled {
  border-left: 4px solid var(--color-bearish, #ef4444);
  opacity: 0.8;
}

.tb-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tb-sym-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tb-sym-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

.tb-mkt-tag {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

.tb-score-pill {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.tb-card-close-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  line-height: 1;
  padding: 0;
  margin-left: 4px;
}

.tb-card-close-btn:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.45);
  color: #ef4444;
  transform: scale(1.12);
}

.tb-card-close-btn:active {
  transform: scale(0.95);
}

.tb-card-subline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.tb-strategy-badge {
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.tb-calibrated-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.tb-prices-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.15);
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-md, 8px);
}

.tb-price-box {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.tb-price-box .tb-lbl {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.tb-price-box .tb-val {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
}

.tb-price-box.target .tb-val {
  color: var(--color-bullish, #10b981);
}

.tb-price-box.stop .tb-val {
  color: var(--color-bearish, #ef4444);
}

.tb-sizing-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  padding-top: 0.2rem;
  border-top: 1px dashed var(--border-subtle);
}

.tb-sizing-item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.tb-sizing-item .lbl {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.tb-sizing-item .val {
  font-weight: 600;
  color: var(--text-primary);
}

.tb-reasons-text {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.35;
  font-style: italic;
}

.tb-receipt-panel {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.tb-receipt-row {
  display: flex;
  justify-content: space-between;
  color: var(--text-muted);
}

.tb-receipt-row strong {
  color: var(--text-primary);
}

.tb-card-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.5rem;
}

.tb-btn-approve {
  flex: 1;
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.35);
  color: #818cf8;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.tb-btn-approve:hover {
  background: rgba(99, 102, 241, 0.25);
  color: #fff;
}

.tb-btn-execute {
  flex: 1.3;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
  color: #fff;
  font-size: 0.84rem;
  font-weight: 700;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.3);
  transition: all 0.18s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.tb-btn-execute:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.tb-btn-reject {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: 0.82rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: all 0.18s ease;
}

.tb-btn-reject:hover {
  color: var(--color-bearish, #ef4444);
  border-color: rgba(239, 68, 68, 0.4);
}

/* ========================================================================
   HOME STOCK FINANCIALS SECTION (BELOW EVALUATION)
   ======================================================================== */
.stock-financials-section {
  max-width: 1920px;
  margin: 5px auto 1.5rem;
  padding: 0 1rem;
  box-sizing: border-box;
  scroll-margin-top: 95px;
}

.financials-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom: none;
  gap: 1rem;
  flex-wrap: wrap;
}

[data-theme="light"] .financials-section-header {
  background: #ffffff;
  border-color: #e2e8f0;
}

.financials-header-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.financials-header-icon {
  font-size: 1.35rem;
}

.financials-header-titles {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.financials-header-badge-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.financials-header-main-title {
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  color: var(--text-primary);
}

.financials-sym-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--bg-secondary);
  color: var(--color-accent);
  border: 1px solid var(--border-active);
}

.financials-header-sub {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.financials-tabs-nav {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.fin-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.95rem;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.fin-tab-btn:hover:not(.active) {
  color: var(--text-primary);
  border-color: var(--color-accent);
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .fin-tab-btn:hover:not(.active) {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-primary);
}

.fin-tab-btn.active,
[data-theme="light"] .fin-tab-btn.active {
  background: var(--color-accent-grad) !important;
  color: var(--color-accent-text, #ffffff) !important;
  border-color: transparent !important;
  box-shadow: var(--shadow-glow) !important;
  font-weight: 700 !important;
}

.financials-body {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: 1rem;
}

[data-theme="light"] .financials-body {
  background: #ffffff;
  border-color: #e2e8f0;
}

.fin-pane-header-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--border-subtle);
}

.fin-pane-title-group {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.fin-pane-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.fin-pane-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.fin-table-scrollable {
  overflow-x: auto;
  max-width: 100%;
  border-radius: var(--radius-md, 8px);
}

/* Custom Scrollbars for wide financial tables */
.fin-table-scrollable::-webkit-scrollbar {
  height: 8px;
}

.fin-table-scrollable::-webkit-scrollbar-track {
  background: rgba(148, 163, 184, 0.05);
  border-radius: 4px;
}

.fin-table-scrollable::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.25);
  border-radius: 4px;
}

.fin-table-scrollable::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.4);
}

.financials-index-placeholder {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: 1.25rem 1.5rem;
  text-align: left;
}

[data-theme="light"] .financials-index-placeholder {
  background: #ffffff;
  border-color: #e2e8f0;
}

.fin-index-macro-dashboard {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

/* Macro Dashboard Top Executive Banner */
.macro-dash-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(16, 185, 129, 0.06) 100%);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--color-accent);
  border-radius: 10px;
  padding: 0.85rem 1.25rem;
  gap: 1rem;
}

.macro-dash-banner-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.macro-dash-icon-badge {
  font-size: 1.6rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.macro-dash-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.macro-dash-headline {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.macro-dash-main-title {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  color: var(--text-primary);
  text-transform: uppercase;
}

.macro-baro-regime {
  font-size: 0.70rem;
  font-weight: 550;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.10);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.22);
  letter-spacing: 0.015em;
  display: inline-flex;
  align-items: center;
}

.macro-dash-sub {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.45;
}

.macro-dash-banner-right {
  flex-shrink: 0;
}

.macro-dash-signal-pill {
  font-size: 0.76rem;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.macro-dash-signal-pill strong {
  font-weight: 600;
}

.signal-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-bullish);
  display: inline-block;
}

/* 6 Full-Width KPI Cards Row */
.macro-kpi-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.65rem;
}

@media (max-width: 1200px) {
  .macro-kpi-row {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .macro-kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.macro-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 0.65rem 0.80rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.macro-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
}

.macro-kpi-card .kpi-label {
  font-size: 0.62rem;
  font-weight: 550;
  text-transform: uppercase;
  color: var(--text-secondary);
  letter-spacing: 0.025em;
  margin-bottom: 0.20rem;
}

.macro-kpi-card .kpi-val {
  font-size: 1.10rem;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-primary);
  line-height: 1.25;
}

.macro-kpi-card .kpi-note {
  font-size: 0.64rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 0.22rem;
}

.macro-kpi-card.highlight-green {
  border-top: 3px solid var(--color-bullish);
}

.macro-kpi-card.highlight-cyan {
  border-top: 3px solid #06b6d4;
}

.macro-kpi-card.highlight-amber {
  border-top: 3px solid var(--color-gold, #f59e0b);
}

.macro-kpi-card.highlight-blue {
  border-top: 3px solid var(--color-accent);
}

.macro-kpi-card.highlight-purple {
  border-top: 3px solid #8b5cf6;
}

.macro-kpi-card.highlight-danger,
.macro-kpi-card.highlight-red {
  border-top: 3px solid var(--color-bearish, #ef4444);
}

.macro-kpi-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

@media (max-width: 900px) {
  .macro-kpi-row-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .macro-kpi-row-3 {
    grid-template-columns: 1fr;
  }
}

.macro-kpi-row-8 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

@media (max-width: 1200px) {
  .macro-kpi-row-8 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .macro-kpi-row-8 {
    grid-template-columns: 1fr;
  }
}

.macro-kpi-row-8-single {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.45rem;
}

#research-clusters-grid .kpi-val {
  font-weight: 500 !important;
}

@media (max-width: 1100px) {
  .macro-kpi-row-8-single {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
  }
}

@media (max-width: 640px) {
  .macro-kpi-row-8-single {
    grid-template-columns: repeat(2, 1fr);
  }
}

.macro-kpi-row-12-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.45rem;
}

@media (min-width: 1600px) {
  .macro-kpi-row-12-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .macro-kpi-row-12-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
  }
}

@media (max-width: 640px) {
  .macro-kpi-row-12-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.committee-debate-arena {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
  align-items: stretch;
}

@media (max-width: 1100px) {
  .committee-debate-arena {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* Detail Columns: Financial Totals + Index Constitution */
.macro-detail-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

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

.macro-detail-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 0.85rem 1.10rem;
  box-shadow: var(--shadow-card);
}

.macro-detail-card .macro-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--border-subtle);
}

.macro-detail-card .card-icon {
  font-size: 1.05rem;
}

.macro-detail-card .card-title {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

/* Totals Quad Grid */
.macro-totals-quad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.macro-totals-quad .tot-item {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 0.60rem 0.80rem;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.macro-totals-quad .tot-item .lbl {
  font-size: 0.64rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.macro-totals-quad .tot-item .val {
  font-size: 1.05rem;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-primary);
}

/* Split Tables for Heavyweights */
.macro-split-tables {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.macro-split-tables .split-head {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 0.45rem;
  padding-bottom: 0.30rem;
  border-bottom: 1px dashed var(--border-subtle);
}

.macro-split-tables .split-list {
  display: flex;
  flex-direction: column;
  gap: 0.30rem;
}

.macro-split-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.30rem 0.55rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  font-size: 0.74rem;
  transition: background 0.15s ease;
}

.macro-split-row:hover {
  background: var(--bg-hover);
}

.macro-split-sym {
  font-weight: 600;
  font-size: 0.74rem;
  color: var(--color-accent);
  cursor: pointer;
}

.macro-split-sym:hover {
  text-decoration: underline;
}

.macro-split-pct {
  font-weight: 550;
  font-size: 0.74rem;
  font-family: var(--font-mono);
  color: var(--text-primary);
}

/* Quick Jump Card in Right Panel Fundamental Tab */
.fund-deep-nav-card {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.08) 0%, rgba(99, 102, 241, 0.08) 100%);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: var(--radius-md, 8px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fund-deep-nav-card:hover {
  border-color: var(--accent-primary);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.14) 0%, rgba(99, 102, 241, 0.14) 100%);
  transform: translateY(-1px);
}

.fund-deep-nav-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.fund-deep-nav-icon {
  font-size: 1.3rem;
}

.fund-deep-nav-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.fund-deep-nav-title {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-primary);
}

.fund-deep-nav-sub {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.fund-deep-nav-btn {
  background: var(--accent-primary);
  color: #fff;
  border: none;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s ease;
}

.fund-deep-nav-btn:hover {
  filter: brightness(1.1);
}

/* Highlight pulse when jumping to financials section */
@keyframes sectionPulseGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.7);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(56, 189, 248, 0.2);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
  }
}

.section-highlight-pulse {
  animation: sectionPulseGlow 1.2s ease-out;
  border-radius: var(--radius-lg);
}

/* ========================================================================
   THEMED DYNAMIC MODALS (UNIVERSAL THEMED DIALOG SYSTEM)
   ======================================================================== */
.themed-confirm-dialog,
.themed-prompt-dialog,
.themed-choice-dialog {
  background: var(--bg-card, #131722);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
  border-radius: var(--radius-lg, 14px);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65), 0 0 1px 1px rgba(255, 255, 255, 0.05);
  max-width: 520px;
  width: 95%;
  overflow: hidden;
  animation: modalPopIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="light"] .themed-confirm-dialog,
[data-theme="light"] .themed-prompt-dialog,
[data-theme="light"] .themed-choice-dialog {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.18), 0 0 1px 1px rgba(15, 23, 42, 0.06);
}

@keyframes modalPopIn {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(8px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.themed-confirm-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.themed-confirm-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text-primary);
}

.themed-modal-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.themed-confirm-body {
  padding: 1.25rem;
}

.themed-confirm-msg,
.themed-prompt-msg,
.themed-choice-msg {
  font-size: 0.92rem;
  color: var(--text-primary);
  line-height: 1.5;
  margin: 0 0 0.85rem;
}

.themed-confirm-msg strong {
  color: var(--accent-primary, #38bdf8);
}

/* Order Execution Detail Card inside Themed Modal */
.confirm-order-card {
  background: rgba(148, 163, 184, 0.06);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 8px);
  padding: 0.85rem 1rem;
  margin-top: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

[data-theme="light"] .confirm-order-card {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.confirm-order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.65rem;
  border-bottom: 1px dashed var(--border-subtle);
}

.confirm-order-sym {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.confirm-order-sym strong {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
}

.setup-market-tag {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-secondary);
}

.confirm-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem 1rem;
}

.confirm-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.confirm-stat .c-lbl {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.confirm-stat strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.confirm-mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
}

.confirm-mode-pill.mode-sim {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.confirm-mode-pill.mode-live {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.confirm-mode-pill .mode-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}

.themed-confirm-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-subtle);
}

.btn-ghost-modal {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.55rem 1.15rem;
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: all 0.18s ease;
}

.btn-ghost-modal:hover {
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-primary);
}

[data-theme="light"] .btn-ghost-modal {
  border-color: #cbd5e1;
  color: #475569;
}

[data-theme="light"] .btn-ghost-modal:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.btn-confirm-modal {
  background: var(--accent-primary, #38bdf8);
  color: #ffffff;
  border: none;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.58rem 1.35rem;
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(56, 189, 248, 0.35);
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.btn-confirm-modal:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.btn-confirm-modal.variant-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 3px 12px rgba(16, 185, 129, 0.4);
}

.btn-confirm-modal.variant-danger {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  box-shadow: 0 3px 12px rgba(239, 68, 68, 0.4);
}

.btn-confirm-modal.variant-warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 3px 12px rgba(245, 158, 11, 0.4);
  color: #0f172a;
}

/* Themed Choice Modal Cards */
.themed-choice-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.themed-choice-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.15rem;
  background: rgba(148, 163, 184, 0.05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.themed-choice-card:hover {
  background: rgba(56, 189, 248, 0.1);
  border-color: var(--accent-primary);
  transform: translateY(-1px);
}

[data-theme="light"] .themed-choice-card {
  background: #f8fafc;
  border-color: #e2e8f0;
}

[data-theme="light"] .themed-choice-card:hover {
  background: #eff6ff;
  border-color: #3b82f6;
}

.choice-icon-wrap {
  font-size: 1.8rem;
  line-height: 1;
}

.choice-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.choice-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.choice-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.35;
}

/* ========================================================================
   PHASE 7, 8, 9: INSTITUTIONAL RISK ENGINE & RESEARCH LAB STYLING
   ======================================================================== */
.text-warning {
  color: var(--color-gold) !important;
}

.text-danger {
  color: var(--color-bearish) !important;
}

.text-accent {
  color: var(--color-accent) !important;
}

.portfolio-risk-card {
  margin-bottom: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.portfolio-risk-card .card-tabs-header {
  border-bottom: 1px solid var(--border-subtle);
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.02);
}

/* ========================================================================
   UNIVERSAL THEME BUTTON SYSTEM & INTERACTIVE CONTROLS
   Ensures WCAG AAA contrast, seamless theme adaptability & glow effects
   ======================================================================== */

.btn-primary,
.btn-theme-primary,
.action-btn-accent,
.btn-primary-clean,
.btn-primary-block {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--color-accent-grad);
  color: var(--color-accent-text, #ffffff) !important;
  border: 1px solid transparent;
  border-radius: var(--radius-md, 8px);
  padding: 0.52rem 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-glow);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary:hover,
.btn-theme-primary:hover,
.action-btn-accent:hover,
.btn-primary-clean:hover,
.btn-primary-block:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), var(--shadow-glow);
}

.btn-primary:active,
.btn-theme-primary:active,
.action-btn-accent:active,
.btn-primary-clean:active,
.btn-primary-block:active {
  transform: translateY(0);
  filter: brightness(0.95);
}

.btn-primary:disabled,
.btn-theme-primary:disabled,
.action-btn-accent:disabled,
.btn-primary-clean:disabled,
.btn-primary-block:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  filter: grayscale(0.5);
  box-shadow: none;
}

.btn-secondary,
.btn-theme-secondary,
.btn-theme-ghost,
.btn-secondary-clean {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 8px);
  padding: 0.52rem 1.15rem;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  white-space: nowrap;
}

[data-theme="light"] .btn-secondary,
[data-theme="light"] .btn-theme-secondary,
[data-theme="light"] .btn-theme-ghost,
[data-theme="light"] .btn-secondary-clean {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

.btn-secondary:hover,
.btn-theme-secondary:hover,
.btn-theme-ghost:hover,
.btn-secondary-clean:hover {
  background: var(--bg-card-hover);
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ========================================================================
   RESEARCH LAB (QUANTITATIVE STRATEGIES & BACKTESTING SUITE)
   ======================================================================== */

.research-wrapper,
.institutional-wrapper {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0.4rem 1.25rem 3.5rem;
  box-sizing: border-box;
}

#view-container-research {
  animation: fadeInView 0.25s ease-out;
}

#view-container-research .dashboard-table-card,
#view-container-institutional .dashboard-table-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  margin-bottom: 1.25rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#view-container-research .dashboard-table-card:hover,
#view-container-institutional .dashboard-table-card:hover {
  border-color: rgba(99, 102, 241, 0.25);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.08);
}

.research-toolbar-card,
#view-container-research .research-toolbar-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 12px);
  padding: 1.15rem 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  transition: border-color 0.2s ease;
}

.research-toolbar-card:hover,
#view-container-research .research-toolbar-card:hover {
  border-color: rgba(168, 85, 247, 0.35);
}

.research-control-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
}

.research-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.research-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.research-input,
.research-select {
  padding: 0.55rem 0.85rem;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 6px);
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 600;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.research-input:focus,
.research-select:focus {
  border-color: var(--border-active);
  box-shadow: var(--shadow-glow);
}

.research-input::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

/* Strategy Quick-Preset Pills Bar */
.research-presets-bar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
}

[data-theme="light"] .research-presets-bar {
  border-top-color: rgba(0, 0, 0, 0.06);
}

.research-presets-lbl {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  white-space: nowrap;
}

.research-presets-pills {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.strat-pill-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.28rem 0.65rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.strat-pill-btn:hover {
  background: rgba(255, 255, 255, 0.09);
  color: var(--text-primary);
  border-color: var(--color-accent);
}

[data-theme="light"] .strat-pill-btn {
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .strat-pill-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-primary);
}

.strat-pill-btn.active {
  background: var(--color-accent-grad, linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35) !important;
}

.optimal-frontier-strat-btn {
  border: none !important;
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: none !important;
  padding: 0.22rem 0.55rem !important;
  font-size: 0.72rem !important;
}

[data-theme="light"] .optimal-frontier-strat-btn {
  background: rgba(0, 0, 0, 0.04) !important;
}

.optimal-frontier-strat-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--text-primary) !important;
  border: none !important;
}

[data-theme="light"] .optimal-frontier-strat-btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  border: none !important;
}

.optimal-frontier-strat-btn.active {
  background: var(--color-accent-grad, linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35) !important;
}

.research-select optgroup {
  font-weight: 700;
  color: var(--color-accent);
  background: var(--bg-card);
}

.research-select option {
  font-weight: 500;
  color: var(--text-primary);
  background: var(--bg-card);
}

/* Enhanced Quant Research Refinements */
.research-champion-callout {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: var(--radius-md, 8px);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

[data-theme="light"] .research-champion-callout {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.4);
}

.corr-legend-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.75rem;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 6px 12px;
  margin-bottom: 10px;
}

[data-theme="light"] .corr-legend-bar {
  background: rgba(0, 0, 0, 0.02);
}

.corr-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
}

.corr-legend-chip {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

.corr-allocation-banner {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 8px);
  padding: 12px 16px;
}

/* Research Tab Header & Panes */
#view-container-research .card-tabs-header {
  display: flex;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.02);
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  overflow-x: auto;
  align-items: center;
}

#view-container-research .card-tab-btn {
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.42rem 0.95rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

#view-container-research .card-tab-btn:hover:not(.active) {
  color: var(--text-primary);
  border-color: var(--color-accent);
  background: rgba(255, 255, 255, 0.05);
}

#view-container-research .card-tab-btn.active {
  background: var(--color-accent-grad) !important;
  color: var(--color-accent-text, #ffffff) !important;
  border-color: transparent !important;
  font-weight: 700 !important;
  box-shadow: var(--shadow-glow) !important;
}

/* Scorecard Metric Grid & Cards */
.stats-overview-grid,
#view-container-research .stats-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.overview-card,
#view-container-research .overview-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 10px);
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}

.overview-card:hover,
#view-container-research .overview-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-active);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.overview-card.highlight,
#view-container-research .overview-card.highlight {
  border-color: var(--border-active);
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.12) 0%, var(--bg-card) 100%);
  box-shadow: var(--shadow-glow);
}

.overview-card.highlight::before,
#view-container-research .overview-card.highlight::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-accent-grad);
}

.research-philosophy-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md, 10px);
  padding: 1rem 1.25rem;
  margin-top: 0.5rem;
}

.research-philosophy-title {
  margin: 0 0 0.35rem 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-accent);
}

.research-philosophy-desc {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* ========================================================================
   INSTITUTIONAL SUITE & MULTI-TENANCY HUB
   Avellaneda-Stoikov MM • ETF Creation/Redemption • Tenants • Audit
   ======================================================================== */

#view-container-institutional {
  animation: fadeInView 0.25s ease-out;
}

#view-container-institutional .dashboard-header-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 10px);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Institutional Subnav Strip */
.table-card-tabs,
.inst-subnav-strip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  margin-bottom: 1.25rem;
}

.tab-btn,
.inst-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid transparent;
  padding: 0.55rem 1.15rem;
  border-radius: var(--radius-md, 8px);
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.tab-btn:hover:not(.active),
.inst-tab-btn:hover:not(.active) {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.tab-btn.active,
.inst-tab-btn.active {
  background: var(--color-accent-grad);
  color: var(--color-accent-text, #ffffff) !important;
  border-color: transparent;
  box-shadow: var(--shadow-glow);
  font-weight: 700;
}

/* FIX Status Badge */
.inst-fix-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--color-bullish-bg);
  color: var(--color-bullish);
  border: 1px solid rgba(0, 230, 118, 0.3);
  box-shadow: 0 0 10px rgba(0, 230, 118, 0.15);
}

.inst-fix-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-bullish);
  box-shadow: 0 0 8px var(--color-bullish);
  animation: pulseDot 2s infinite ease-in-out;
}

@keyframes pulseDot {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.4;
    transform: scale(0.85);
  }
}

@keyframes fadeInView {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Institutional Banner Cards (ETF Desk, Tenants, Compliance, TCA, Tradebook) */
.inst-banner-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.15rem 1.5rem;
  margin-bottom: 1.25rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%), var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  transition: border-color 0.2s ease;
}

.inst-banner-card:hover {
  border-color: rgba(99, 102, 241, 0.25);
}

/* Harmonized Modern Tables & Responsive Viewports for Research & Institutional */
#view-container-research .table-responsive,
#view-container-institutional .table-responsive {
  overflow-x: auto;
  width: 100%;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}

#view-container-research .table-responsive::-webkit-scrollbar,
#view-container-institutional .table-responsive::-webkit-scrollbar {
  height: 6px;
}

#view-container-research .table-responsive::-webkit-scrollbar-thumb,
#view-container-institutional .table-responsive::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: 4px;
}

#view-container-research .modern-table,
#view-container-institutional .modern-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  text-align: left;
}

#view-container-research .modern-table thead,
#view-container-institutional .modern-table thead {
  position: sticky;
  top: 0;
  z-index: 15;
  background-color: var(--bg-secondary);
}

#view-container-research .modern-table thead th,
#view-container-institutional .modern-table thead th {
  height: 50px;
  box-sizing: border-box;
  padding: 0.6rem 0.95rem;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.035em;
  color: var(--text-secondary);
  background-color: var(--bg-secondary) !important;
  border-bottom: 2px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 15;
  white-space: nowrap;
  user-select: none;
  transition: all 0.15s ease;
}

#view-container-research .modern-table thead th:hover,
#view-container-institutional .modern-table thead th:hover {
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.04) !important;
}

#view-container-research .modern-table tbody tr,
#view-container-institutional .modern-table tbody tr {
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.15s ease;
}

#view-container-research .modern-table tbody tr:hover,
#view-container-institutional .modern-table tbody tr:hover {
  background: rgba(99, 102, 241, 0.07);
}

#view-container-research .modern-table tbody td,
#view-container-institutional .modern-table tbody td {
  padding: 0.85rem 1rem;
  vertical-align: middle;
  white-space: nowrap;
  font-size: 0.82rem;
  color: var(--text-primary);
}

#view-container-institutional .table-card-header,
#view-container-research .table-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.02);
  gap: 0.85rem;
  flex-wrap: wrap;
}

#view-container-institutional .table-card-title,
#view-container-research .table-card-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: -0.01em;
}

.inst-banner-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.inst-banner-sub {
  margin: 0.25rem 0 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.45;
}

/* Avellaneda-Stoikov MM Metric Cards */
.inst-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.inst-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 10px);
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}

.inst-stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-active);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.inst-stat-card.stat-gold {
  border-left: 4px solid var(--color-gold);
}

.inst-stat-card.stat-indigo {
  border-left: 4px solid #818cf8;
}

.inst-stat-card.stat-bullish {
  border-left: 4px solid var(--color-bullish);
}

.inst-stat-card.stat-bearish {
  border-left: 4px solid var(--color-bearish);
}

.inst-stat-card.stat-accent {
  border-left: 4px solid var(--color-accent);
}

.inst-stat-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.inst-stat-hero {
  font-size: 1.4rem;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--text-primary);
  margin-top: 0.2rem;
}

.inst-stat-sub {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.inst-skew-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  background: rgba(99, 102, 241, 0.2);
  color: #c7d2fe;
  margin-top: 0.3rem;
  letter-spacing: 0.04em;
  width: fit-content;
}

/* Light Theme Precision Overrides for Research & Institutional */
[data-theme="light"] .research-toolbar-card,
[data-theme="light"] #view-container-research .research-toolbar-card,
[data-theme="light"] .home-evaluation-section .dashboard-table-card,
[data-theme="light"] #view-container-research .dashboard-table-card,
[data-theme="light"] #view-container-institutional .dashboard-table-card,
[data-theme="light"] #view-container-institutional .inst-banner-card,
[data-theme="light"] #view-container-institutional .table-card-tabs,
[data-theme="light"] #view-container-institutional .inst-subnav-strip,
[data-theme="light"] #view-container-institutional .tradebook-telemetry-banner,
[data-theme="light"] .overview-card,
[data-theme="light"] #view-container-research .overview-card,
[data-theme="light"] #view-container-institutional .inst-stat-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .research-philosophy-card {
  background: #f8fafc;
  border-color: #e2e8f0;
}

[data-theme="light"] .research-input {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}

[data-theme="light"] .research-input:focus {
  background: #ffffff;
}

[data-theme="light"] .tab-btn:hover:not(.active),
[data-theme="light"] .inst-tab-btn:hover:not(.active) {
  background: #f1f5f9;
  color: #0f172a;
}

[data-theme="light"] .btn-secondary,
[data-theme="light"] .btn-theme-secondary,
[data-theme="light"] .btn-theme-ghost {
  background: #f1f5f9;
  color: #1e293b;
  border-color: #cbd5e1;
}

[data-theme="light"] .btn-secondary:hover,
[data-theme="light"] .btn-theme-secondary:hover,
[data-theme="light"] .btn-theme-ghost:hover {
  background: #e2e8f0;
  color: var(--color-accent);
}

/* ========================================================================
   SEHRAI CAPITAL MARKETS OS — INSTITUTIONAL SUITE & QUANT EXPANSIONS
   Phases 15-21: Regime, Quantamental Factors, TCA, Alpha Decay, Portfolio
   ======================================================================== */
.header-regime-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.65rem;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.35);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.header-regime-badge:hover {
  background: rgba(16, 185, 129, 0.22);
  transform: translateY(-1px);
}

.header-regime-badge.regime-high-vol {
  background: rgba(239, 68, 68, 0.14);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.35);
}

.header-regime-badge.regime-sideways {
  background: rgba(245, 158, 11, 0.14);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.35);
}

[data-theme="light"] .header-regime-badge,
body.light-theme .header-regime-badge {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}

[data-theme="light"] .header-regime-badge:hover,
body.light-theme .header-regime-badge:hover {
  background: #d1fae5;
}

[data-theme="light"] .header-regime-badge.regime-high-vol,
body.light-theme .header-regime-badge.regime-high-vol {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fca5a5;
}

[data-theme="light"] .header-regime-badge.regime-sideways,
body.light-theme .header-regime-badge.regime-sideways {
  background: #fef3c7;
  color: #b45309;
  border-color: #fde68a;
}

.dedicated-market-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-subtle);
  color: var(--color-accent);
  margin-left: 0.4rem;
  vertical-align: middle;
}

[data-theme="light"] .dedicated-market-tag {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.regime-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  animation: pulse-ring 1.8s infinite;
}

/* Quantamental Factor Cards */
.quantamental-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.quantamental-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.quantamental-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-accent);
}

.quantamental-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.quantamental-sym-box h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.quantamental-sym-box span {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.quantamental-grade-pill {
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.18);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.factor-bars-container {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.factor-bar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
}

.factor-bar-label {
  width: 95px;
  color: var(--text-secondary);
  font-weight: 600;
}

.factor-bar-track {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}

[data-theme="light"] .factor-bar-track {
  background: #e2e8f0;
}

.factor-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #3b82f6, #06b6d4);
  transition: width 0.4s ease;
}

.factor-bar-val {
  width: 32px;
  text-align: right;
  font-weight: 700;
  color: var(--text-primary);
}

.shariah-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
}

.shariah-tag.compliant {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.shariah-tag.non-compliant {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

/* Strategy Correlation Matrix Heatmap */
.corr-matrix-table th,
.corr-matrix-table td {
  text-align: center;
  padding: 0.55rem;
  font-size: 0.76rem;
}

.corr-cell-high-pos {
  background: rgba(16, 185, 129, 0.28) !important;
  color: #10b981 !important;
  font-weight: 700;
}

.corr-cell-mod-pos {
  background: rgba(16, 185, 129, 0.14) !important;
  color: #34d399 !important;
}

.corr-cell-low {
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--text-muted) !important;
}

.corr-cell-neg {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
  font-weight: 700;
}

/* Alpha Decay & Health Badges */
.decay-badge-healthy {
  background: rgba(16, 185, 129, 0.18);
  color: #10b981;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}

.decay-badge-monitor {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}

.decay-badge-decaying {
  background: rgba(239, 68, 68, 0.18);
  color: #ef4444;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
}

/* TCA Desk & Execution Quality */
.tca-grade-badge {
  display: inline-block;
  font-weight: 800;
  font-size: 0.8rem;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
}

.tca-grade-aplus {
  background: rgba(16, 185, 129, 0.25);
  color: #10b981;
}

.tca-grade-a {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
}

.tca-grade-b {
  background: rgba(59, 130, 246, 0.18);
  color: #60a5fa;
}

.tca-grade-c {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
}

.tca-grade-d {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

/* Institutional Factsheet / Tear-Sheet Container */
.tearsheet-view {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 1.75rem;
  max-width: 1100px;
  margin: 0 auto;
}

.tearsheet-header-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--border-subtle);
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
}

.tearsheet-brand-title {
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.tearsheet-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.tearsheet-kpi-box {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: 1rem;
}

.tearsheet-kpi-box .label {
  font-size: 0.74rem;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 700;
}

.tearsheet-kpi-box .val {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-top: 0.35rem;
}

/* ========================================================================
   UNIVERSAL MODERN SELECT & FORM DROPDOWNS (GLOBAL ELEVATION)
   ======================================================================== */
select,
.select-clean,
.select-clean-inline,
.research-select,
.clean-select,
.admin-watch-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-primary, #f1f5f9);
  background-color: var(--bg-card, #0f172a);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2300f2fe' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 0.75rem) center;
  background-size: 11px 11px;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
  border-radius: var(--radius-sm, 6px);
  padding: 0.45rem 2.2rem 0.45rem 0.8rem;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  min-height: 35px;
  box-sizing: border-box;
}

select:hover,
.select-clean:hover,
.select-clean-inline:hover,
.research-select:hover,
.clean-select:hover {
  border-color: rgba(0, 242, 254, 0.45);
}

select:focus,
.select-clean:focus,
.select-clean-inline:focus,
.research-select:focus,
.clean-select:focus {
  border-color: var(--color-accent, #00f2fe);
  box-shadow: 0 0 0 3px rgba(0, 242, 254, 0.18);
}

select option,
.select-clean option,
.select-clean-inline option,
.research-select option,
.clean-select option {
  background-color: #0b1320;
  color: #f1f5f9;
  padding: 0.5rem;
}

/* Inline select variant */
.select-clean-inline {
  display: inline-block;
  width: auto;
  min-height: 31px;
  padding: 0.3rem 1.85rem 0.3rem 0.65rem;
  font-size: 0.82rem;
  font-weight: 600;
}

/* Light Theme Universal Dropdowns */
[data-theme="light"] select,
[data-theme="light"] .select-clean,
[data-theme="light"] .select-clean-inline,
[data-theme="light"] .research-select,
[data-theme="light"] .clean-select,
[data-theme="light"] .admin-watch-select {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230284c7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: calc(100% - 0.75rem) center !important;
  background-size: 11px 11px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] select:hover,
[data-theme="light"] .select-clean:hover,
[data-theme="light"] .select-clean-inline:hover,
[data-theme="light"] .research-select:hover,
[data-theme="light"] .clean-select:hover {
  border-color: #94a3b8 !important;
  background-color: #f8fafc !important;
}

[data-theme="light"] select:focus,
[data-theme="light"] .select-clean:focus,
[data-theme="light"] .select-clean-inline:focus,
[data-theme="light"] .research-select:focus,
[data-theme="light"] .clean-select:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
  background-color: #ffffff !important;
}

[data-theme="light"] select option,
[data-theme="light"] .select-clean option,
[data-theme="light"] .select-clean-inline option,
[data-theme="light"] .research-select option,
[data-theme="light"] .clean-select option {
  background-color: #ffffff;
  color: #0f172a;
}

/* Form Control Inputs & Selects */
.form-control,
input.form-control,
select.form-control,
textarea.form-control {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text-primary);
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 6px);
  padding: 0.45rem 0.75rem;
  min-height: 35px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
}

select.form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2300f2fe' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 0.75rem) center;
  background-size: 11px 11px;
  padding-right: 2.2rem;
  cursor: pointer;
}

.form-control:focus,
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(0, 242, 254, 0.18);
}

[data-theme="light"] .form-control,
[data-theme="light"] input.form-control,
[data-theme="light"] select.form-control,
[data-theme="light"] textarea.form-control {
  background-color: #ffffff;
  color: #0f172a;
  border-color: #cbd5e1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230284c7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

[data-theme="light"] .form-control:focus,
[data-theme="light"] input.form-control:focus,
[data-theme="light"] select.form-control:focus,
[data-theme="light"] textarea.form-control:focus {
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.form-label {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 0.35rem;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

[data-theme="light"] .form-label {
  color: #334155;
}

/* ========================================================================
   MULTI-MARKET CORE & GCC REGIONAL DESK STYLING
   ======================================================================== */
.filter-pill-btn,
.mmkt-filter-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.02em;
}

.filter-pill-btn:hover:not(.active),
.mmkt-filter-btn:hover:not(.active) {
  background: var(--bg-card-hover);
  color: var(--text-primary);
  border-color: var(--color-accent);
}

[data-theme="light"] .filter-pill-btn,
[data-theme="light"] .mmkt-filter-btn {
  background: var(--bg-secondary);
  border-color: var(--border-subtle);
  color: var(--text-secondary);
}

[data-theme="light"] .filter-pill-btn:hover:not(.active),
[data-theme="light"] .mmkt-filter-btn:hover:not(.active) {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-primary);
}

.filter-pill-btn.active,
.mmkt-filter-btn.active,
[data-theme="light"] .filter-pill-btn.active,
[data-theme="light"] .mmkt-filter-btn.active {
  background: var(--color-accent-grad) !important;
  border-color: transparent !important;
  color: var(--color-accent-text, #ffffff) !important;
  box-shadow: var(--shadow-glow) !important;
  font-weight: 700 !important;
}

/* Multi-Market Session Cards */
.mmkt-session-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 10px);
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.mmkt-session-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-active);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

[data-theme="light"] .mmkt-session-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .mmkt-session-card:hover {
  border-color: #0284c7;
  box-shadow: 0 6px 20px -2px rgba(2, 132, 199, 0.12);
}

.mmkt-phase-badge {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.mmkt-phase-open {
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.35);
}

.mmkt-phase-preopen {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.mmkt-phase-closed,
.mmkt-phase-postclose {
  background: rgba(148, 163, 184, 0.15);
  color: var(--text-muted);
  border: 1px solid rgba(148, 163, 184, 0.25);
}

[data-theme="light"] .mmkt-phase-open {
  background: #dcfce7;
  color: #15803d;
  border-color: #86efac;
}

[data-theme="light"] .mmkt-phase-preopen {
  background: #fef3c7;
  color: #b45309;
  border-color: #fde68a;
}

[data-theme="light"] .mmkt-phase-closed,
[data-theme="light"] .mmkt-phase-postclose {
  background: #f1f5f9;
  color: #64748b;
  border-color: #cbd5e1;
}

/* ========================================================================
   INSTITUTIONAL & RESEARCH COMPLETE DESIGN SYSTEM UTILITIES
   ======================================================================== */
.inst-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.inst-stat-val {
  font-size: 1.35rem;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--text-primary);
  margin-top: 0.2rem;
}

.inst-stat-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.dashboard-chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card, 12px);
  padding: 1.25rem;
  box-shadow: var(--shadow-card);
  margin-bottom: 1.25rem;
}

[data-theme="light"] .dashboard-chart-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.06);
}

.table-card-subtitle {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

.text-bullish {
  color: var(--color-bullish, #10b981) !important;
}

.text-bearish {
  color: var(--color-bearish, #ef4444) !important;
}

.badge-gold {
  background: rgba(245, 158, 11, 0.18);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.35);
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.72rem;
}

[data-theme="light"] .badge-gold {
  background: #fef3c7;
  color: #b45309;
  border-color: #fde68a;
}

.bracket-currency-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
}

.btn-ghost-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  background: transparent;
  border: 1px dashed var(--border-subtle);
  color: var(--text-secondary);
  padding: 0.6rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-ghost-block:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--bg-card-hover);
}

[data-theme="light"] .btn-ghost-block {
  border-color: var(--border-subtle);
  color: var(--text-secondary);
}

[data-theme="light"] .btn-ghost-block:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--bg-card-hover);
}

.btn-subtle {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-subtle:hover {
  background: var(--bg-card-hover);
  color: var(--color-accent);
  border-color: var(--color-accent);
}

[data-theme="light"] .btn-subtle {
  background: var(--bg-secondary);
  border-color: var(--border-subtle);
  color: var(--text-secondary);
}

[data-theme="light"] .btn-subtle:hover {
  background: var(--bg-card-hover);
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.1rem;
}

[data-theme="light"] .kpi-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.05);
}

.app-view-section {
  margin-bottom: 1.5rem;
}

/* Light Theme Card & Container Elevators */
[data-theme="light"] .inst-stat-card,
[data-theme="light"] .inst-stats-grid>div,
[data-theme="light"] .tearsheet-view,
[data-theme="light"] .tearsheet-kpi-box {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .tearsheet-kpi-box .val,
[data-theme="light"] .inst-stat-hero,
[data-theme="light"] .inst-stat-val {
  color: #0f172a !important;
}

[data-theme="light"] .modern-table,
[data-theme="light"] .data-table {
  background: #ffffff;
  color: #0f172a;
  border-color: #e2e8f0;
}

[data-theme="light"] .modern-table th,
[data-theme="light"] .data-table th {
  background: #f8fafc;
  color: #475569;
  border-bottom: 1px solid #e2e8f0;
}

[data-theme="light"] .modern-table td,
[data-theme="light"] .data-table td {
  border-bottom: 1px solid #f1f5f9;
  color: #1e293b;
}

[data-theme="light"] .modern-table tr:hover td,
[data-theme="light"] .data-table tr:hover td {
  background: #f8fafc;
}

/* Header Regime Badge Cursor & Interactivity */
/* Header Regime Badge Cursor & Interactivity */
.header-regime-badge {
  cursor: pointer !important;
  user-select: none;
}

.header-regime-badge * {
  cursor: pointer !important;
}

/* ========================================================================
   STRIKE.MONEY STYLE VISUAL QUANTAMENTAL FINANCIAL DYNAMICS & RADAR
   ======================================================================== */
.qf-radar-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  transition: all 0.2s ease;
}

[data-theme="light"] .qf-radar-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.qf-factor-tile {
  background: var(--bg-card);
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  transition: all 0.2s ease;
}

[data-theme="light"] .qf-factor-tile {
  background: #f8fafc;
  border-color: #e2e8f0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .quantamental-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .quantamental-card:hover {
  background: #ffffff;
  border-color: var(--color-accent, #0284c7);
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.12);
}

[data-theme="light"] .quantamental-sym-box h3 {
  color: #0f172a;
}

[data-theme="light"] .factor-bar-label {
  color: #334155;
}

[data-theme="light"] .factor-bar-val {
  color: #0f172a;
}

.qf-dynamics-section {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 1.25rem;
}

[data-theme="light"] .qf-dynamics-section {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.qf-dynamics-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.qf-top-desks-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 14px;
}

@media (max-width: 1400px) {
  .qf-top-desks-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .qf-top-desks-grid {
    grid-template-columns: 1fr;
  }
}

.qf-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}

@media (max-width: 1200px) {
  .qf-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .qf-cards-grid {
    grid-template-columns: 1fr;
  }
}

.qf-dual-grid,
.qf-seasonals-dual-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 14px;
}

@media (max-width: 992px) {

  .qf-dual-grid,
  .qf-seasonals-dual-grid {
    grid-template-columns: 1fr;
  }
}

.qf-card {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
  position: relative;
  min-height: 250px;
}

.qf-card:hover {
  border-color: rgba(0, 210, 255, 0.4);
}

[data-theme="light"] .qf-card {
  background: #f8fafc;
  border-color: #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .qf-card:hover {
  background: #ffffff;
  border-color: var(--color-accent, #0284c7);
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.12);
}

.qf-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.qf-card-title-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.qf-card-title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
}

[data-theme="light"] .qf-card-title {
  color: #0f172a;
}

.qf-recommended-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

[data-theme="light"] .qf-recommended-badge {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}

.qf-select {
  background: var(--bg-surface, #1e293b);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: 0.72rem;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
}

[data-theme="light"] .qf-select {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}

.qf-toggle-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--text-secondary);
}

[data-theme="light"] .qf-toggle-group {
  color: #475569;
}

.qf-toggle-group label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.qf-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}

[data-theme="light"] .qf-legend {
  color: #64748b;
}

.qf-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.qf-legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.qf-canvas-container {
  width: 100%;
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qf-canvas {
  width: 100%;
  height: 190px;
  display: block;
}

/* ========================================================================
   GLOBAL MULTI-MARKET OHLCV INSPECTOR MODAL DUAL THEME SYSTEM
   ======================================================================== */
.mmkt-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

[data-theme="light"] .mmkt-modal-backdrop,
[data-theme="system"] .mmkt-modal-backdrop {
  @media (prefers-color-scheme: light) {
    background: rgba(15, 23, 42, 0.45);
  }
}

[data-theme="light"] .mmkt-modal-backdrop {
  background: rgba(15, 23, 42, 0.45);
}

.mmkt-modal-container {
  background: var(--bg-secondary, #0f1422);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-lg, 12px);
  max-width: 880px;
  width: 94%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
  font-family: var(--font-sans);
}

[data-theme="light"] .mmkt-modal-container,
[data-theme="system"] .mmkt-modal-container {
  @media (prefers-color-scheme: light) {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.16);
  }
}

[data-theme="light"] .mmkt-modal-container {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.16);
}

.mmkt-modal-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-card, #121826);
}

[data-theme="light"] .mmkt-modal-header,
[data-theme="system"] .mmkt-modal-header {
  @media (prefers-color-scheme: light) {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
  }
}

[data-theme="light"] .mmkt-modal-header {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.mmkt-modal-title-row {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-theme="light"] .mmkt-modal-title-row {
  color: #0f172a;
}

.mmkt-modal-title-row .badge-bullish {
  background: #059669;
  color: #ffffff !important;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
}

.mmkt-modal-title-row .badge-bearish {
  background: #dc2626;
  color: #ffffff !important;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
}

.mmkt-modal-title-row .badge-neutral {
  background: #475569;
  color: #ffffff !important;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
}

.mmkt-modal-subtitle {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
}

[data-theme="light"] .mmkt-modal-subtitle {
  color: #64748b;
}

.mmkt-modal-input {
  background: var(--bg-primary, #080b11);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.75rem;
  color: var(--text-primary);
  width: 230px;
  outline: none;
  transition: border-color 0.15s ease;
}

.mmkt-modal-input:focus {
  border-color: var(--color-accent);
}

[data-theme="light"] .mmkt-modal-input,
[data-theme="system"] .mmkt-modal-input {
  @media (prefers-color-scheme: light) {
    background: #ffffff;
    border-color: #cbd5e1;
    color: #0f172a;
  }
}

[data-theme="light"] .mmkt-modal-input {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}

.mmkt-modal-btn {
  font-size: 0.75rem !important;
  padding: 5px 10px !important;
  font-weight: 700 !important;
}

.mmkt-modal-close {
  font-size: 20px;
  cursor: pointer;
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 4px 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: color 0.15s ease, background 0.15s ease;
}

.mmkt-modal-close:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .mmkt-modal-close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #0f172a;
}

.mmkt-modal-body {
  padding: 18px 20px;
  overflow-y: auto;
  flex: 1;
  background: var(--bg-secondary, #0f1422);
}

[data-theme="light"] .mmkt-modal-body,
[data-theme="system"] .mmkt-modal-body {
  @media (prefers-color-scheme: light) {
    background: #f8fafc;
  }
}

[data-theme="light"] .mmkt-modal-body {
  background: #f8fafc;
}

.mmkt-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.mmkt-kpi-card {
  background: var(--bg-card, #121826);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  padding: 11px 12px;
  border-radius: 8px;
  text-align: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}

[data-theme="light"] .mmkt-kpi-card,
[data-theme="system"] .mmkt-kpi-card {
  @media (prefers-color-scheme: light) {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  }
}

[data-theme="light"] .mmkt-kpi-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.mmkt-kpi-card .kpi-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

[data-theme="light"] .mmkt-kpi-card .kpi-label {
  color: #64748b;
}

.mmkt-kpi-card .kpi-val {
  font-size: 1.15rem;
  font-weight: 800;
  font-family: var(--font-numbers);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-primary);
  margin-top: 2px;
}

[data-theme="light"] .mmkt-kpi-card .kpi-val {
  color: #0f172a;
}

.mmkt-kpi-card .kpi-sub {
  font-size: 0.74rem;
  font-weight: 600;
  font-family: var(--font-numbers);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-primary);
}

[data-theme="light"] .mmkt-kpi-card .kpi-sub {
  color: #1e293b;
}

.mmkt-verdict-banner {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 8px);
  padding: 12px 16px;
  margin-bottom: 16px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.mmkt-verdict-banner.mmkt-verdict-bullish {
  border-left: 4px solid var(--color-bullish, #10b981);
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.08) 0%, var(--bg-card) 60%);
}

.mmkt-verdict-banner.mmkt-verdict-bullish .mmkt-verdict-title {
  color: var(--color-bullish, #10b981);
}

.mmkt-verdict-banner.mmkt-verdict-bearish {
  border-left: 4px solid var(--color-bearish, #ef4444);
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.08) 0%, var(--bg-card) 60%);
}

.mmkt-verdict-banner.mmkt-verdict-bearish .mmkt-verdict-title {
  color: var(--color-bearish, #ef4444);
}

.mmkt-verdict-banner.mmkt-verdict-neutral {
  border-left: 4px solid var(--color-warning, #f59e0b);
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.08) 0%, var(--bg-card) 60%);
}

.mmkt-verdict-banner.mmkt-verdict-neutral .mmkt-verdict-title {
  color: var(--color-warning, #f59e0b);
}

.mmkt-verdict-title {
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.mmkt-verdict-score {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  font-family: var(--font-numbers);
  font-variant-numeric: tabular-nums;
}

.mmkt-verdict-reason {
  font-size: 0.76rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.mmkt-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

[data-theme="light"] .mmkt-section-label {
  color: #64748b;
}

.mmkt-table-wrapper {
  max-height: 270px;
  overflow-y: auto;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
  background: var(--bg-card, #121826);
}

[data-theme="light"] .mmkt-table-wrapper,
[data-theme="system"] .mmkt-table-wrapper {
  @media (prefers-color-scheme: light) {
    background: #ffffff;
    border-color: #e2e8f0;
  }
}

[data-theme="light"] .mmkt-table-wrapper {
  background: #ffffff;
  border-color: #e2e8f0;
}

.mmkt-modal-table {
  width: 100%;
  border-collapse: collapse;
}

.mmkt-modal-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  font-size: 0.72rem;
  padding: 8px 12px;
  background: #182236;
  color: #94a3b8;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .mmkt-modal-table thead th,
[data-theme="system"] .mmkt-modal-table thead th {
  @media (prefers-color-scheme: light) {
    background: #f1f5f9;
    color: #475569;
    border-bottom: 1px solid #cbd5e1;
  }
}

[data-theme="light"] .mmkt-modal-table thead th {
  background: #f1f5f9;
  color: #475569;
  border-bottom: 1px solid #cbd5e1;
}

.mmkt-modal-table tbody td {
  padding: 7px 12px;
  font-size: 0.76rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-family: var(--font-numbers);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-primary);
}

[data-theme="light"] .mmkt-modal-table tbody td,
[data-theme="system"] .mmkt-modal-table tbody td {
  @media (prefers-color-scheme: light) {
    border-bottom: 1px solid #f1f5f9;
    color: #0f172a;
  }
}

[data-theme="light"] .mmkt-modal-table tbody td {
  border-bottom: 1px solid #f1f5f9;
  color: #0f172a;
}

.mmkt-modal-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}

[data-theme="light"] .mmkt-modal-table tbody tr:hover td {
  background: #f8fafc;
}

.mmkt-modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  background: var(--bg-card, #121826);
  display: flex;
  justify-content: flex-end;
}

[data-theme="light"] .mmkt-modal-footer,
[data-theme="system"] .mmkt-modal-footer {
  @media (prefers-color-scheme: light) {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
  }
}

[data-theme="light"] .mmkt-modal-footer {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.mmkt-btn-close {
  font-size: 0.78rem !important;
  padding: 6px 16px !important;
  font-weight: 700 !important;
}

/* ========================================================================
   PREMIUM MULTI-MARKET RADAR & COMMODITIES CARDS
   ======================================================================== */
.macro-radar-card {
  background: var(--bg-surface, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 8px 11px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

[data-theme="light"] .macro-radar-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.09);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.macro-radar-card:hover {
  transform: translateY(-1.5px);
  border-color: var(--color-accent);
  box-shadow: 0 4px 12px rgba(0, 242, 254, 0.15);
}

[data-theme="light"] .macro-radar-card:hover {
  border-color: #0284c7;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.12);
}

.macro-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.macro-card-sym-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.macro-flag {
  font-size: 0.9rem;
  line-height: 1;
  flex-shrink: 0;
}

.macro-sym {
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

[data-theme="light"] .macro-sym {
  color: #0f172a;
}

.macro-name {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

[data-theme="light"] .macro-name {
  color: #64748b;
}

.macro-verdict-pill {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 1.5px 6px;
  border-radius: 4px;
  line-height: 1.2;
  white-space: nowrap;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.macro-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.macro-val {
  font-family: var(--font-numbers);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

[data-theme="light"] .macro-val {
  color: #0f172a;
}

.macro-card-chg-wrap {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-shrink: 0;
}

.macro-pct {
  font-size: 0.82rem;
  font-weight: 800;
  font-family: var(--font-numbers);
  white-space: nowrap;
}

.macro-pts {
  font-size: 0.68rem;
  font-family: var(--font-numbers);
  color: var(--text-muted);
  white-space: nowrap;
}

.macro-card-impact {
  font-size: 0.67rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-style: italic;
  margin-top: 1px;
}

[data-theme="light"] .macro-card-impact {
  color: #94a3b8;
}

.macro-cat-pill {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

/* ========================================================================
   INSTITUTIONAL MACRO QUOTE TABLES (BENCHMARK INDICES & COMMODITIES)
   ======================================================================== */
.macro-tables-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 1.5rem;
  align-items: start;
}

@media (max-width: 1200px) {
  .macro-tables-grid {
    grid-template-columns: 1fr;
  }
}

.macro-table-card {
  min-width: 0;
  width: 100%;
  padding: 0 !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}

[data-theme="light"] .macro-table-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.macro-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid var(--border-subtle);
}

[data-theme="light"] .macro-card-header {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.macro-card-header-title {
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.01em;
}

[data-theme="light"] .macro-card-header-title {
  color: #0f172a;
}

.macro-count-badge {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
}

[data-theme="light"] .macro-count-badge {
  background: #e2e8f0;
  color: #475569;
  border-color: #cbd5e1;
}

.macro-quote-table {
  width: 100%;
  margin: 0;
  font-size: 0.8rem;
  border-collapse: collapse;
}

.macro-quote-table th {
  padding: 9px 12px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

[data-theme="light"] .macro-quote-table th {
  background: #f1f5f9;
  color: #64748b;
  border-bottom: 1px solid #e2e8f0;
}

.macro-quote-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
  white-space: nowrap;
}

[data-theme="light"] .macro-quote-table td {
  border-bottom: 1px solid #f1f5f9;
}

.macro-quote-table tr:hover td {
  background: rgba(0, 242, 254, 0.03);
}

[data-theme="light"] .macro-quote-table tr:hover td {
  background: rgba(2, 132, 199, 0.03);
}

.macro-table-row {
  cursor: pointer;
  transition: background 0.12s ease;
}

.macro-cell-asset {
  display: flex;
  align-items: center;
  gap: 7px;
}

.macro-cell-flag {
  font-size: 0.95rem;
  line-height: 1;
}

.macro-cell-sym {
  font-weight: 800;
  color: var(--text-primary);
  font-size: 0.84rem;
  letter-spacing: 0.02em;
}

[data-theme="light"] .macro-cell-sym {
  color: #0f172a;
}

.macro-cell-name {
  font-size: 0.76rem;
  color: var(--text-muted);
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-theme="light"] .macro-cell-name {
  color: #64748b;
}

.macro-cell-val {
  font-family: var(--font-numbers);
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--text-primary);
  text-align: right;
}

[data-theme="light"] .macro-cell-val {
  color: #0f172a;
}

.macro-cell-net {
  font-family: var(--font-numbers);
  font-size: 0.78rem;
  font-weight: 700;
  text-align: right;
}

.macro-badge-pct {
  font-family: var(--font-numbers);
  font-size: 0.75rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-block;
  min-width: 58px;
  text-align: right;
}

.macro-badge-pct.pos {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.macro-badge-pct.neg {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

[data-theme="light"] .macro-badge-pct.pos {
  background: #ecfdf5;
  color: #059669;
  border-color: #a7f3d0;
}

[data-theme="light"] .macro-badge-pct.neg {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}

.macro-badge-reg {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.macro-impact-desc {
  font-size: 0.74rem;
  color: var(--text-muted);
  font-style: italic;
  white-space: normal;
  line-height: 1.35;
}

[data-theme="light"] .macro-impact-desc {
  color: #64748b;
}

/* ========================================================================
   MULTI-MARKET MOVERS ROW (BENCHMARK INDICES, COMMODITIES, DIRECTORY)
   3 Cards in One Row matching Home Movers (Leaders, Gainers, Losers)
   Equal Heights (Top & Bottom) with Internal Smooth Scrolling
   ======================================================================== */
.multi-market-movers-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  align-items: stretch !important;
}

.multi-market-movers-row .mover-card {
  height: 1280px !important;
  min-height: 1280px !important;
  display: flex !important;
  flex-direction: column !important;
}

.multi-market-movers-row .mover-table-wrap {
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin;
}

.multi-market-movers-row .mover-table-wrap::-webkit-scrollbar {
  width: 5px;
}

.multi-market-movers-row .mover-table-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.multi-market-movers-row .mover-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.35);
  border-radius: 4px;
}

.multi-market-movers-row .mover-table-wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.65);
}

@media (max-width: 1080px) {
  .multi-market-movers-row {
    grid-template-columns: 1fr !important;
  }
}

/* ========================================================================
   MULTI-MARKET MOVERS SMART CARDS (MATCHING POS/SCANNER SPEC)
   ======================================================================== */
.multi-market-movers-row .mover-items-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 0.45rem 0.55rem 0.65rem 0.55rem;
}

.multi-market-movers-row .macro-mover-card {
  padding: 8px 11px 7px 11px;
  gap: 6px;
  border-radius: 11px;
}

.macro-mover-card {
  background: var(--bg-card, #1e293b);
  border: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.16));
  border-radius: 12px;
  padding: 10px 12px 9px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.16s ease, border-color 0.16s ease;
}

.macro-mover-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
  border-color: rgba(99, 102, 241, 0.5);
}

.macro-mover-card.card-bullish {
  border-top: 3px solid #10b981;
}

.macro-mover-card.card-bearish {
  border-top: 3px solid #ef4444;
}

.macro-mover-card.card-neutral {
  border-top: 3px solid #64748b;
}

[data-theme="light"] .macro-mover-card,
body.light-theme .macro-mover-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .macro-mover-card:hover,
body.light-theme .macro-mover-card:hover {
  border-color: #6366f1;
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.12);
}

/* ========================================================================
   UNIFIED CARD TYPOGRAPHY (MATCHING HOME MOVER CARDS SCALE ACROSS ALL PAGES:
   GLOBAL, SCANNER, PAYOUTS, WATCHLIST, TRADING, PORTFOLIO)
   ======================================================================== */
.macro-mover-card .pos-symbol-name,
.scanner-stock-card .pos-symbol-name,
.payout-stock-card .pos-symbol-name,
.watchlist-stock-card .pos-symbol-name,
.position-card .pos-symbol-name {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
}

.macro-mover-card .pos-price-badge,
.scanner-stock-card .pos-price-badge,
.payout-stock-card .pos-price-badge,
.watchlist-stock-card .pos-price-badge,
.position-card .pos-price-badge {
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  padding: 2px 7px;
  line-height: 1.2;
}

.macro-mover-card .pos-day-chg,
.scanner-stock-card .pos-day-chg,
.payout-stock-card .pos-day-chg,
.watchlist-stock-card .pos-day-chg,
.position-card .pos-day-chg {
  font-size: 0.77rem;
  font-weight: 500;
  line-height: 1.2;
}

.macro-mover-card .pos-header-right-row2,
.scanner-stock-card .pos-header-right-row2,
.payout-stock-card .pos-header-right-row2,
.watchlist-stock-card .pos-header-right-row2,
.position-card .pos-header-right-row2 {
  font-size: 0.67rem;
  font-weight: 400;
}

/* Unified Right-Side Volume: strictly bold and standardized to Trending card specifications across all cards */
.macro-mover-card .pos-header-right-row3,
.macro-mover-card .vol-val,
.scanner-stock-card .pos-header-right-row3,
.scanner-stock-card .vol-val,
.payout-stock-card .pos-header-right-row3,
.payout-stock-card .vol-val,
.watchlist-stock-card .pos-header-right-row3,
.watchlist-stock-card .vol-val,
.position-card .pos-header-right-row3,
.position-card .vol-val,
.home-trending-section .pos-header-right-row3,
.home-trending-section .vol-val {
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  color: var(--text-primary, #e2e8f0) !important;
  font-family: var(--font-mono, monospace) !important;
  margin-top: 2px;
}

[data-theme="light"] .macro-mover-card .pos-header-right-row3,
body.light-theme .macro-mover-card .pos-header-right-row3,
[data-theme="light"] .macro-mover-card .vol-val,
body.light-theme .macro-mover-card .vol-val,
[data-theme="light"] .scanner-stock-card .pos-header-right-row3,
body.light-theme .scanner-stock-card .pos-header-right-row3,
[data-theme="light"] .scanner-stock-card .vol-val,
body.light-theme .scanner-stock-card .vol-val,
[data-theme="light"] .payout-stock-card .pos-header-right-row3,
body.light-theme .payout-stock-card .pos-header-right-row3,
[data-theme="light"] .payout-stock-card .vol-val,
body.light-theme .payout-stock-card .vol-val,
[data-theme="light"] .watchlist-stock-card .pos-header-right-row3,
body.light-theme .watchlist-stock-card .pos-header-right-row3,
[data-theme="light"] .watchlist-stock-card .vol-val,
body.light-theme .watchlist-stock-card .vol-val,
[data-theme="light"] .position-card .pos-header-right-row3,
body.light-theme .position-card .pos-header-right-row3,
[data-theme="light"] .position-card .vol-val,
body.light-theme .position-card .vol-val,
[data-theme="light"] .home-trending-section .pos-header-right-row3,
body.light-theme .home-trending-section .pos-header-right-row3,
[data-theme="light"] .home-trending-section .vol-val,
body.light-theme .home-trending-section .vol-val {
  color: #0f172a !important;
}

.macro-mover-card .pos-contract-tag,
.scanner-stock-card .pos-contract-tag,
.payout-stock-card .pos-contract-tag,
.watchlist-stock-card .pos-contract-tag,
.position-card .pos-contract-tag {
  font-size: 0.63rem;
  padding: 1px 4.5px;
}

/* Institutional Market Logo Badges & Square Image Logos (PSX, Tadawul, Global/Forex) */
.pos-market-logo-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  max-width: 22px;
  max-height: 22px;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1.5px;
  box-sizing: border-box;
  flex-shrink: 0;
  vertical-align: middle;
  overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.pos-market-logo-wrapper:hover {
  transform: scale(1.08);
  border-color: rgba(255, 255, 255, 0.25);
}

.pos-market-logo-wrapper.psx-logo {
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.08);
}

.pos-market-logo-wrapper.tadawul-logo {
  border-color: rgba(20, 184, 166, 0.35);
  background: rgba(20, 184, 166, 0.08);
}

.pos-market-logo-wrapper.global-logo {
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(56, 189, 248, 0.08);
}

[data-theme="light"] .pos-market-logo-wrapper,
body.light-theme .pos-market-logo-wrapper {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .pos-market-logo-wrapper.psx-logo,
body.light-theme .pos-market-logo-wrapper.psx-logo {
  background: #f0fdf4;
  border-color: #86efac;
}

[data-theme="light"] .pos-market-logo-wrapper.tadawul-logo,
body.light-theme .pos-market-logo-wrapper.tadawul-logo {
  background: #f0fdfa;
  border-color: #99f6e4;
}

[data-theme="light"] .pos-market-logo-wrapper.global-logo,
body.light-theme .pos-market-logo-wrapper.global-logo {
  background: #f0f9ff;
  border-color: #bae6fd;
}

.pos-mkt-img-logo {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
}

.pos-market-logo-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 5.5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
  color: var(--text-muted, #94a3b8);
  user-select: none;
  flex-shrink: 0;
  vertical-align: middle;
}

.pos-market-logo-badge .mkt-flag-icon {
  font-size: 0.84rem;
  line-height: 1;
}

.pos-market-logo-badge .mkt-name-tag {
  font-weight: 700;
  letter-spacing: 0.03em;
}

.pos-market-logo-badge.psx-badge {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
  color: #34d399;
}

.pos-market-logo-badge.tadawul-badge {
  background: rgba(20, 184, 166, 0.12);
  border-color: rgba(20, 184, 166, 0.35);
  color: #2dd4bf;
}

.pos-market-logo-badge.global-badge {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.35);
  color: #38bdf8;
}

[data-theme="light"] .pos-market-logo-badge.psx-badge,
body.light-theme .pos-market-logo-badge.psx-badge {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}

[data-theme="light"] .pos-market-logo-badge.tadawul-badge,
body.light-theme .pos-market-logo-badge.tadawul-badge {
  background: #f0fdfa;
  border-color: #99f6e4;
  color: #0f766e;
}

[data-theme="light"] .pos-market-logo-badge.global-badge,
body.light-theme .pos-market-logo-badge.global-badge {
  background: #f0f9ff;
  border-color: #bae6fd;
  color: #0284c7;
}

.macro-mover-card .pos-contract-pill,
.scanner-stock-card .pos-contract-pill,
.payout-stock-card .pos-contract-pill,
.watchlist-stock-card .pos-contract-pill,
.position-card .pos-contract-pill {
  font-size: 0.63rem;
  padding: 1px 4.5px;
}

.macro-mover-card .pos-sector-pill,
.scanner-stock-card .pos-sector-pill,
.payout-stock-card .pos-sector-pill,
.watchlist-stock-card .pos-sector-pill,
.position-card .pos-sector-pill {
  font-size: 0.65rem;
  max-width: 140px;
  padding: 1px 5px;
}

.scanner-stock-card .pos-company-title,
.payout-stock-card .pos-company-title,
.watchlist-stock-card .pos-company-title,
.position-card .pos-company-title {
  font-size: 0.68rem;
  max-width: 100%;
}

/* Macro Mover Card Left-Side Company Name (Increased Prominence) */
.macro-mover-card .pos-company-title {
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  color: var(--text-primary, #f1f5f9) !important;
  max-width: 100%;
  margin-top: 2px;
  line-height: 1.25;
}

[data-theme="light"] .macro-mover-card .pos-company-title,
body.light-theme .macro-mover-card .pos-company-title {
  color: #1e293b !important;
}

.macro-mover-card .trend-badge,
.scanner-stock-card .trend-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
}

.macro-mover-card .scanner-card-ylyh-wrap,
.scanner-stock-card .scanner-card-ylyh-wrap {
  font-size: 0.67rem;
  font-weight: 400;
}

.macro-mover-card .pos-shariah-moon,
.scanner-stock-card .pos-shariah-moon,
.payout-stock-card .pos-shariah-moon,
.watchlist-stock-card .pos-shariah-moon,
.position-card .pos-shariah-moon {
  font-size: 0.78rem;
}

.macro-mover-card .tag-badge-nc,
.scanner-stock-card .tag-badge-nc,
.payout-stock-card .tag-badge-nc,
.watchlist-stock-card .tag-badge-nc,
.position-card .tag-badge-nc {
  font-size: 0.63rem;
  padding: 1px 4px;
}

.macro-mover-card .pos-type-badge,
.position-card .pos-type-badge {
  font-size: 0.63rem;
  padding: 1px 4.5px;
}

/* Page-specific interior elements harmonization */
.watchlist-stock-card .wl-target-badge {
  font-size: 0.68rem;
}
.watchlist-stock-card .wl-target-label {
  font-size: 0.65rem;
}
.watchlist-stock-card .wl-target-val {
  font-size: 0.78rem;
}
.watchlist-stock-card .wl-ob-lbl {
  font-size: 0.64rem;
}
.watchlist-stock-card .wl-ob-val {
  font-size: 0.84rem;
}

.payout-stock-card .payout-card-date-lbl {
  font-size: 0.63rem;
}
.payout-stock-card .payout-card-date-val {
  font-size: 0.78rem;
}
.payout-stock-card .status-pill {
  font-size: 0.67rem;
  padding: 2px 6px;
}
.payout-stock-card .payout-benefit-lbl {
  font-size: 0.60rem;
}
.payout-stock-card .payout-benefit-val {
  font-size: 0.78rem;
}

.position-card .pos-metric-lbl {
  font-size: 0.64rem;
}
.position-card .pos-metric-val {
  font-size: 0.84rem;
}
.position-card .pos-toggle-title {
  font-size: 0.72rem;
}
.position-card .pos-toggle-sub {
  font-size: 0.66rem;
}
.position-card .pos-status-chip {
  font-size: 0.64rem;
}
.position-card .pos-blotter-label {
  font-size: 0.62rem;
}
.position-card .pos-blotter-val {
  font-size: 0.76rem;
}
.position-card .pos-order-ticket-main {
  font-size: 0.78rem;
}
.position-card .pos-order-ticket-sub {
  font-size: 0.67rem;
}

.macro-mover-card .pos-price-badge.neutral,
.scanner-stock-card .pos-price-badge.neutral,
.payout-stock-card .pos-price-badge.neutral,
.watchlist-stock-card .pos-price-badge.neutral,
.position-card .pos-price-badge.neutral {
  background: rgba(148, 163, 184, 0.14) !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(148, 163, 184, 0.28);
}

[data-theme="light"] .macro-mover-card .pos-price-badge.neutral,
body.light-theme .macro-mover-card .pos-price-badge.neutral,
[data-theme="light"] .scanner-stock-card .pos-price-badge.neutral,
body.light-theme .scanner-stock-card .pos-price-badge.neutral,
[data-theme="light"] .payout-stock-card .pos-price-badge.neutral,
body.light-theme .payout-stock-card .pos-price-badge.neutral,
[data-theme="light"] .watchlist-stock-card .pos-price-badge.neutral,
body.light-theme .watchlist-stock-card .pos-price-badge.neutral,
[data-theme="light"] .position-card .pos-price-badge.neutral,
body.light-theme .position-card .pos-price-badge.neutral {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border-color: #cbd5e1;
}

/* ========================================================================
   EVALUATION ENHANCEMENTS: CONFLUENCE GAUGE, HEATMAP & DRIFT CHARTS
   ======================================================================== */
.eval-confluence-banner-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 12px 16px 10px 16px;
  margin-bottom: 0.55rem;
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s ease, background 0.2s ease;
}

[data-theme="light"] .eval-confluence-banner-card,
[data-theme="system"] .eval-confluence-banner-card {
  background: var(--bg-card);
  border-color: var(--border-subtle);
}

.eval-confluence-banner-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: none;
}

.eval-confluence-body {
  display: block;
  width: 100%;
  margin-top: 10px;
}

.eval-confluence-stats {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

@media (max-width: 1400px) {
  .eval-confluence-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .eval-confluence-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .eval-confluence-stats {
    grid-template-columns: 1fr;
  }
}

.confluence-stat-box {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 8px 12px;
  min-height: 72px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.confluence-stat-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background: var(--border-subtle);
}

.confluence-stat-box.card-theme-ai::before {
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
}

.confluence-stat-box.card-theme-verdict::before {
  background: linear-gradient(90deg, #6366f1, #818cf8);
}

.confluence-stat-box.card-theme-intent::before {
  background: linear-gradient(90deg, #8b5cf6, #a855f7);
}

.confluence-stat-box.card-theme-tech::before {
  background: linear-gradient(90deg, #10b981, #34d399);
}

.confluence-stat-box.card-theme-tech.box-bearish::before {
  background: linear-gradient(90deg, #ef4444, #f87171);
}

.confluence-stat-box.card-theme-fund::before {
  background: linear-gradient(90deg, #06b6d4, #22d3ee);
}

.confluence-stat-box.card-theme-action::before {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.confluence-stat-box:hover {
  transform: translateY(-2px);
  border-color: var(--color-accent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.09);
}

[data-theme="light"] .confluence-stat-box,
[data-theme="system"] .confluence-stat-box {
  background: var(--bg-secondary);
  border-color: var(--border-subtle);
}

/* Card Header Components */
.confluence-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 2px;
}

.confluence-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted, #64748b);
}

.confluence-card-tag i {
  font-size: 0.65rem;
  opacity: 0.85;
}

.confluence-card-badge {
  font-size: 0.58rem;
  font-weight: 600;
  padding: 1.5px 6px;
  border-radius: 5px;
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-muted, #64748b);
  letter-spacing: 0.2px;
}

/* Card Hero Metric Display */
.confluence-card-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  margin: 1px 0;
  width: 100%;
}

.hero-score-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  justify-content: center;
}

.hero-score-num {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-accent, #0ea5e9);
  line-height: 1.1;
  font-feature-settings: "tnum";
}

.hero-score-den {
  font-size: 0.68rem;
  color: var(--text-muted, #94a3b8);
  font-weight: 600;
}

.hero-metric-text {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.2px;
  font-feature-settings: "tnum";
}

/* Micro Progress Bar */
.confluence-micro-bar {
  width: 100%;
  max-width: 120px;
  height: 3.5px;
  background: rgba(148, 163, 184, 0.16);
  border-radius: 4px;
  margin: 4px auto 0;
  overflow: hidden;
}

.confluence-micro-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
}

.confluence-micro-fill.score-fill {
  background: linear-gradient(90deg, #ef4444 0%, #f59e0b 50%, #10b981 100%);
}

.confluence-micro-fill.tech-fill {
  background: linear-gradient(90deg, #34d399, #10b981);
}

.confluence-micro-fill.fund-fill {
  background: linear-gradient(90deg, #38bdf8, #0ea5e9);
}

/* Tactical Action Pill */
.hero-action-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.25);
  transition: all 0.2s ease;
}

.hero-action-pill.action-buy {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.3);
}

.hero-action-pill.action-risk {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}

.hero-action-pill.action-neutral {
  background: rgba(14, 165, 233, 0.12);
  color: #0ea5e9;
  border-color: rgba(14, 165, 233, 0.3);
}

/* Card Subtext / Footer */
.confluence-card-sub {
  font-size: 0.65rem;
  color: var(--text-muted, #94a3b8);
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
  width: 100%;
}

.confluence-verdict-pill-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1px 0;
  width: 100%;
}

.eval-intent-pill-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2.5px !important;
  width: 100% !important;
}

.eval-intent-pill-container .eval-badge {
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  padding: 2.5px 10px !important;
  border-radius: 6px !important;
  letter-spacing: 0.2px !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

.eval-intent-trigger-sub {
  font-size: 0.69rem !important;
  font-weight: 600 !important;
  color: #c084fc !important;
  letter-spacing: 0.2px !important;
  line-height: 1.1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

[data-theme="light"] .eval-intent-trigger-sub,
[data-theme="system"] .eval-intent-trigger-sub {
  color: #7c3aed !important;
}

.confluence-stat-box .eval-badge {
  font-size: 0.72rem !important;
  padding: 2.5px 9px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.eval-regime-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 20px;
  color: var(--color-bullish);
  font-size: 0.76rem;
  transition: all 0.25s ease;
}

.eval-regime-pill.bullish {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
  color: #10b981;
}

.eval-regime-pill.bearish {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
  color: #ef4444;
}

.eval-regime-pill.neutral {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
  color: #f59e0b;
}

.pulse-bullish {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
}

.pulse-bearish {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 6px #ef4444;
}

.pulse-neutral {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 6px #f59e0b;
}

/* QUANTITATIVE CONSENSUS SPECTRUM BAR (26 DESKS: 13 PER LINE) */
.eval-consensus-spectrum-bar {
  margin-top: 4px;
  margin-bottom: 6px;
  padding-top: 4px;
  padding-bottom: 12px;
  border-top: none;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.spectrum-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .spectrum-bar-header {
  background: #f8fafc;
  border-color: #cbd5e1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.eval-consensus-title {
  font-size: 0.84rem;
  font-weight: 800;
  color: #1e293b;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

[data-theme="dark"] .eval-consensus-title {
  color: #f1f5f9;
}

.eval-consensus-counts {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 500;
}

.eval-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 16px;
  line-height: 1.25;
  letter-spacing: 0.2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: transform 0.15s ease;
}

.eval-count-badge:hover {
  transform: translateY(-1px);
}

.eval-count-badge.bullish,
[data-theme="dark"] .eval-count-badge.bullish,
[data-theme="light"] .eval-count-badge.bullish {
  background: #16a34a !important;
  color: #ffffff !important;
  border: 1.5px solid #15803d !important;
  box-shadow: 0 1px 4px rgba(22, 163, 74, 0.35) !important;
  font-weight: 600 !important;
}

.eval-count-badge.neutral,
[data-theme="light"] .eval-count-badge.neutral {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706 !important;
  border: 1.5px solid rgba(245, 158, 11, 0.45);
  font-weight: 600 !important;
}

[data-theme="dark"] .eval-count-badge.neutral {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24 !important;
  border: 1.5px solid rgba(245, 158, 11, 0.55);
}

.eval-count-badge.bearish,
[data-theme="dark"] .eval-count-badge.bearish,
[data-theme="light"] .eval-count-badge.bearish {
  background: #dc2626 !important;
  color: #ffffff !important;
  border: 1.5px solid #b91c1c !important;
  box-shadow: 0 1px 4px rgba(220, 38, 38, 0.35) !important;
  font-weight: 600 !important;
}

.eval-regime-cycle-badge {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.eval-market-phase-pill {
  font-weight: 700;
  padding: 3px 11px;
  border-radius: 16px;
  font-size: 0.80rem;
  display: inline-block;
  letter-spacing: 0.25px;
  border: 1px solid currentColor;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.eval-desks-grid {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: 5px;
  width: 100%;
}

@media (max-width: 1280px) {
  .eval-desks-grid {
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 5px;
  }
}

@media (max-width: 768px) {
  .eval-desks-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
  }
}

@media (max-width: 480px) {
  .eval-desks-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
  }
}

.eval-desk-pill {
  position: relative;
  overflow: hidden;
  background: var(--bg-secondary, var(--bg-card));
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 6px 3px 6px 3px;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4.5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
}

.eval-desk-pill:active {
  transform: scale(0.96);
}

/* Gradient accent bar across top, echoing the executive cards above */
.eval-desk-pill::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background: var(--border-subtle);
  transition: all 0.22s ease;
}

.eval-desk-pill.bullish::before {
  background: linear-gradient(90deg, #10b981, #34d399);
}

.eval-desk-pill.bearish::before {
  background: linear-gradient(90deg, #ef4444, #f87171);
}

.eval-desk-pill.neutral::before {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

/* Status variants with soft gradient glow & refined border */
.eval-desk-pill.bullish {
  border-color: rgba(16, 185, 129, 0.38);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0.03) 100%), var(--bg-card);
  color: var(--text-primary);
}

.eval-desk-pill.bullish:hover {
  transform: translateY(-2px);
  border-color: #10b981;
  box-shadow: 0 5px 15px rgba(16, 185, 129, 0.22);
}

.eval-desk-pill.bearish {
  border-color: rgba(239, 68, 68, 0.38);
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.12) 0%, rgba(239, 68, 68, 0.03) 100%), var(--bg-card);
  color: var(--text-primary);
}

.eval-desk-pill.bearish:hover {
  transform: translateY(-2px);
  border-color: #ef4444;
  box-shadow: 0 5px 15px rgba(239, 68, 68, 0.22);
}

.eval-desk-pill.neutral {
  border-color: rgba(245, 158, 11, 0.38);
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.12) 0%, rgba(245, 158, 11, 0.03) 100%), var(--bg-card);
  color: var(--text-primary);
}

.eval-desk-pill.neutral:hover {
  transform: translateY(-2px);
  border-color: #f59e0b;
  box-shadow: 0 5px 15px rgba(245, 158, 11, 0.22);
}

/* Light / System theme consistency */
[data-theme="light"] .eval-desk-pill,
[data-theme="system"] .eval-desk-pill {
  background: var(--bg-card, #ffffff);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .eval-desk-pill.bullish,
[data-theme="system"] .eval-desk-pill.bullish {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.14) 0%, rgba(16, 185, 129, 0.04) 100%), #ffffff;
  border-color: rgba(16, 185, 129, 0.42);
}

[data-theme="light"] .eval-desk-pill.bearish,
[data-theme="system"] .eval-desk-pill.bearish {
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.14) 0%, rgba(239, 68, 68, 0.04) 100%), #ffffff;
  border-color: rgba(239, 68, 68, 0.42);
}

[data-theme="light"] .eval-desk-pill.neutral,
[data-theme="system"] .eval-desk-pill.neutral {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.14) 0%, rgba(245, 158, 11, 0.04) 100%), #ffffff;
  border-color: rgba(245, 158, 11, 0.42);
}

/* Glowing Indicator Dot */
.eval-desk-dot {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 0.22s ease;
}

.eval-desk-pill:hover .eval-desk-dot {
  transform: scale(1.25);
}

.eval-desk-dot.bullish {
  background: #10b981;
  box-shadow: 0 0 6px #10b981, 0 0 2px #34d399;
}

.eval-desk-dot.bearish {
  background: #ef4444;
  box-shadow: 0 0 6px #ef4444, 0 0 2px #f87171;
}

.eval-desk-dot.neutral {
  background: #f59e0b;
  box-shadow: 0 0 6px #f59e0b, 0 0 2px #fbbf24;
}

/* Typography */
.eval-desk-name,
.eval-desk-pill span:not(.eval-desk-dot) {
  font-size: 0.77rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

/* PYFOLIO HEATMAP TABLE CELLS */
.backtest-heatmap-table {
  border-collapse: separate;
  border-spacing: 3px;
}

.backtest-heatmap-table th {
  padding: 6px 4px;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.backtest-heatmap-table td {
  padding: 7px 4px;
  font-family: 'JetBrains Mono', monospace, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 4px;
  transition: transform 0.15s ease;
}

.backtest-heatmap-table td:hover {
  transform: scale(1.08);
  z-index: 2;
  position: relative;
  outline: 1px solid rgba(255, 255, 255, 0.5);
}

.heatmap-year-cell {
  background: transparent !important;
  color: var(--text-primary);
  font-weight: 800;
  text-align: left;
}

.heatmap-total-cell {
  font-weight: 800 !important;
  border-left: 2px solid var(--border-subtle);
}

/* ========================================================================
   MODERN EXPANDABLE POSITION CARDS DESK
   ======================================================================== */
.pos-desk-tabs-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
}

.pos-desk-tabs-left {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pos-desk-tabs-right {
  display: flex;
  gap: 8px;
  align-items: center;
}

.desk-history-btn {
  padding: 5px 12px !important;
  font-size: 0.78rem !important;
  border-radius: 6px !important;
}

.position-cards-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-height: 120px;
  align-items: start;
}

@media (max-width: 1024px) {
  .position-cards-container {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.position-card {
  background: var(--bg-card, #1e222d);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.09));
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
  position: relative;
  cursor: pointer;
}

.position-card:hover {
  transform: translateY(-1px);
  border-color: var(--border-active, rgba(0, 242, 254, 0.35));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

[data-theme="light"] .position-card,
body.light-theme .position-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

[data-theme="light"] .position-card:hover,
body.light-theme .position-card:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
}

/* Header Row: Structured 2-row left (Symbol+🌙, Sector+Name) & 2-row right (Price+Chg, Vol+L+H) */
.pos-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.pos-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.pos-header-left-row1 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.pos-header-left-row2 {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

.pos-header-left-row3 {
  display: flex;
  align-items: center;
  text-align: left;
  min-width: 0;
  overflow: hidden;
}

.pos-company-title {
  font-size: 0.73rem;
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

[data-theme="light"] .pos-company-title,
body.light-theme .pos-company-title {
  color: #64748b;
}

.pos-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
  flex-shrink: 0;
}

.pos-header-right-row1 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pos-header-right-row2 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.71rem;
  font-family: var(--font-mono, monospace);
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
}

.pos-header-right-row3 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 0.71rem;
  font-family: var(--font-mono, monospace);
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
}

.pos-day-hl-sep {
  opacity: 0.4;
}

.pos-contract-tag {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}

[data-theme="light"] .pos-contract-tag,
body.light-theme .pos-contract-tag {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #475569;
}

.pos-contract-pill {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex-shrink: 0;
  line-height: 1.2;
}

.pos-contract-pill.reg {
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-muted, #94a3b8);
  border: 1px solid rgba(148, 163, 184, 0.22);
}

.pos-contract-pill.fut {
  background: rgba(234, 179, 8, 0.14);
  color: #eab308;
  border: 1px solid rgba(234, 179, 8, 0.35);
}

.pos-sector-pill {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
  background: rgba(148, 163, 184, 0.1);
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 170px;
  flex-shrink: 0;
  border: 1px solid rgba(148, 163, 184, 0.15);
  line-height: 1.2;
}

[data-theme="light"] .pos-sector-pill,
body.light-theme .pos-sector-pill {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #475569;
}

.pos-symbol-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary, #ffffff);
  letter-spacing: -0.01em;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

[data-theme="light"] .pos-symbol-name,
body.light-theme .pos-symbol-name {
  color: #0f172a !important;
}

.pos-shariah-moon {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  line-height: 1;
}

.pos-shariah-svg {
  width: 14px;
  height: 14px;
  filter: drop-shadow(0 0 4px rgba(234, 179, 8, 0.6));
  flex-shrink: 0;
}

.pos-price-badge {
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  padding: 2px 7px;
  border-radius: 6px;
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.pos-price-badge.bullish {
  background: rgba(16, 185, 129, 0.16) !important;
  color: #10b981 !important;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.pos-price-badge.bearish {
  background: rgba(244, 63, 94, 0.16) !important;
  color: #f43f5e !important;
  border: 1px solid rgba(244, 63, 94, 0.35);
}

[data-theme="light"] .pos-price-badge.bullish,
body.light-theme .pos-price-badge.bullish {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border-color: #a7f3d0;
}

[data-theme="light"] .pos-price-badge.bearish,
body.light-theme .pos-price-badge.bearish {
  background: #fff1f2 !important;
  color: #dc2626 !important;
  border-color: #fecdd3;
}

.pos-day-chg {
  font-size: 0.77rem;
  font-weight: 500;
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
}

.pos-day-chg.bullish {
  color: #10b981;
}

.pos-day-chg.bearish {
  color: #f43f5e;
}

[data-theme="light"] .pos-day-chg.bullish,
body.light-theme .pos-day-chg.bullish {
  color: #059669;
}

[data-theme="light"] .pos-day-chg.bearish,
body.light-theme .pos-day-chg.bearish {
  color: #dc2626;
}

.pos-day-hl {
  font-size: 0.67rem;
  font-weight: 400;
  font-family: var(--font-mono, monospace);
  color: var(--text-muted, #94a3b8);
  display: flex;
  gap: 6px;
  white-space: nowrap;
}

.pos-day-hl .low-val {
  color: #f43f5e;
  font-weight: 600;
}

.pos-day-hl .high-val {
  color: #10b981;
  font-weight: 600;
}

[data-theme="light"] .pos-day-hl .low-val,
body.light-theme .pos-day-hl .low-val {
  color: #dc2626;
}

[data-theme="light"] .pos-day-hl .high-val,
body.light-theme .pos-day-hl .high-val {
  color: #059669;
}

/* 4-Column Balanced Financial Metrics Strip (No Empty Middle Gap) */
.pos-metrics-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 10px 0 4px 0;
  margin-top: 8px;
  border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
}

@media (max-width: 900px) {
  .pos-metrics-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

.pos-metric-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}

.pos-metric-cell.text-right {
  align-items: flex-end;
  text-align: right;
}

.pos-metric-lbl {
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="light"] .pos-metric-lbl,
body.light-theme .pos-metric-lbl {
  color: #64748b;
}

.pos-metric-val {
  font-size: 0.95rem;
  font-weight: 600;
  font-family: var(--font-mono, monospace);
  line-height: 1.25;
  color: var(--text-primary, #ffffff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="light"] .pos-metric-val,
body.light-theme .pos-metric-val {
  color: #0f172a;
}

.pos-metric-val.bullish {
  color: #10b981;
}

.pos-metric-val.bearish {
  color: #f43f5e;
}

[data-theme="light"] .pos-metric-val.bullish,
body.light-theme .pos-metric-val.bullish {
  color: #059669;
}

[data-theme="light"] .pos-metric-val.bearish,
body.light-theme .pos-metric-val.bearish {
  color: #dc2626;
}

.pos-metric-sub {
  font-size: 0.67rem;
  color: var(--text-secondary, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="light"] .pos-metric-sub,
body.light-theme .pos-metric-sub {
  color: #64748b;
}

.pos-weight-pill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(99, 102, 241, 0.12);
  color: #6366f1;
}

[data-theme="light"] .pos-weight-pill,
body.light-theme .pos-weight-pill {
  background: #eef2ff;
  color: #4f46e5;
}

/* Card Expand Toggle Line */
.pos-card-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 6px;
  margin-top: 4px;
  border-top: 1px dashed var(--border-subtle, rgba(255, 255, 255, 0.05));
  font-size: 0.68rem;
  color: var(--text-muted);
  cursor: pointer;
}

.pos-card-toggle:hover {
  color: var(--color-accent, #6366f1);
}

.pos-expand-chevron {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent, #6366f1);
  font-size: 0.85rem;
  transition: transform 0.2s ease;
  border-radius: 50%;
}

.pos-expand-chevron.expanded {
  transform: rotate(180deg);
}

/* Transaction & Dividend Cards */
.portfolio-tx-card,
.portfolio-div-card {
  background: var(--bg-card, #1e222d);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.09));
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.portfolio-tx-card:hover,
.portfolio-div-card:hover {
  transform: translateY(-1px);
  border-color: var(--border-active);
}

[data-theme="light"] .portfolio-tx-card,
body.light-theme .portfolio-tx-card,
[data-theme="light"] .portfolio-div-card,
body.light-theme .portfolio-div-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.pos-type-badge {
  font-size: 0.66rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pos-type-badge.buy {
  background: rgba(16, 185, 129, 0.16);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.pos-type-badge.sell {
  background: rgba(244, 63, 94, 0.16);
  color: #f43f5e;
  border: 1px solid rgba(244, 63, 94, 0.35);
}

.pos-type-badge.div {
  background: rgba(99, 102, 241, 0.16);
  color: #6366f1;
  border: 1px solid rgba(99, 102, 241, 0.35);
}

.pos-type-badge.buy-sell {
  background: rgba(14, 165, 233, 0.16);
  color: #0ea5e9;
  border: 1px solid rgba(14, 165, 233, 0.35);
}

[data-theme="light"] .pos-type-badge.buy,
body.light-theme .pos-type-badge.buy {
  background: #ecfdf5;
  color: #059669;
  border-color: #a7f3d0;
}

[data-theme="light"] .pos-type-badge.sell,
body.light-theme .pos-type-badge.sell {
  background: #fff1f2;
  color: #dc2626;
  border-color: #fecdd3;
}

[data-theme="light"] .pos-type-badge.buy-sell,
body.light-theme .pos-type-badge.buy-sell {
  background: #f0f9ff;
  color: #0284c7;
  border-color: #bae6fd;
}

[data-theme="light"] .pos-type-badge.div,
body.light-theme .pos-type-badge.div {
  background: #eef2ff;
  color: #4f46e5;
  border-color: #c7d2fe;
}

/* Expandable Tray */
.pos-expanded-details {
  border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  margin-top: 14px;
  padding-top: 14px;
  animation: fadeInSlideDown 0.22s ease;
}

@keyframes fadeInSlideDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body.light-theme .pos-expanded-details {
  border-top-color: #e2e8f0;
}

.pos-breakdown-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.pos-breakdown-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pos-bought-title {
  color: #2563eb;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.3px;
}

.pos-sold-title {
  color: #db2777;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.3px;
}

.pos-trade-stat {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary, #ffffff);
  font-family: var(--font-mono, monospace);
  margin-top: 2px;
}

body.light-theme .pos-trade-stat {
  color: #1e293b !important;
}

.pos-trade-subval {
  font-size: 0.78rem;
  color: var(--text-muted, #94a3b8);
  font-family: var(--font-mono, monospace);
  margin-top: 1px;
}

.pos-pending-stat {
  font-size: 0.8rem;
  font-weight: 700;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pos-pending-stat.buy-stat {
  color: #2563eb;
}

.pos-pending-stat.sell-stat {
  color: #db2777;
}

.pos-pending-num {
  font-size: 0.88rem;
  font-family: var(--font-mono, monospace);
  font-weight: 800;
  color: var(--text-primary);
  margin-top: 1px;
}

body.light-theme .pos-pending-num {
  color: #1e293b;
}

.pos-realised-row {
  text-align: center;
  margin-top: 14px;
  font-size: 0.92rem;
  color: var(--text-secondary, #cbd5e1);
  font-weight: 600;
}

body.light-theme .pos-realised-row {
  color: #475569;
}

.pos-realised-val {
  font-weight: 800;
  font-family: var(--font-mono, monospace);
  margin-left: 4px;
}

.pos-realised-val.bullish {
  color: #00a676;
}

.pos-realised-val.bearish {
  color: #ff4d4f;
}

/* Card Actions */
.pos-card-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-top: 14px;
  flex-wrap: wrap;
}

.pos-btn {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.16s ease;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.pos-btn-sell {
  background: rgba(239, 68, 68, 0.14);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.pos-btn-sell:hover {
  background: #ef4444;
  color: #ffffff;
}

.pos-btn-buy {
  background: rgba(16, 185, 129, 0.14);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.pos-btn-buy:hover {
  background: #10b981;
  color: #ffffff;
}

.pos-btn-bracket {
  background: rgba(0, 242, 254, 0.12);
  color: var(--color-accent, #00f2fe);
  border: 1px solid rgba(0, 242, 254, 0.35);
}

.pos-btn-bracket:hover {
  background: rgba(0, 242, 254, 0.25);
  border-color: #00f2fe;
}

.pos-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 44px 20px;
  color: var(--text-muted);
}

.pos-empty-icon {
  font-size: 2.2rem;
  margin-bottom: 8px;
  opacity: 0.6;
}

.pos-empty-title {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--text-secondary);
}

.pos-empty-desc {
  font-size: 0.82rem;
  margin-top: 6px;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.4;
}

/* ==========================================================================
   3-Block Financial Triplet & 2-Block Financial Duo:
   Collateral vs Today Open Position
   ========================================================================== */
.pos-financial-triplet {
  display: grid;
  grid-template-columns: 1fr 1fr 1.08fr;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.07));
}

.pos-financial-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.07));
}

@media (max-width: 600px) {

  .pos-financial-triplet,
  .pos-financial-duo {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.pos-financial-block {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  transition: border-color 0.15s ease, background 0.15s ease;
}

[data-theme="light"] .pos-financial-block,
body.light-theme .pos-financial-block {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

.pos-financial-block.summary-block {
  background: rgba(99, 102, 241, 0.05);
  border-color: rgba(99, 102, 241, 0.18);
}

[data-theme="light"] .pos-financial-block.summary-block,
body.light-theme .pos-financial-block.summary-block {
  background: #f5f7ff !important;
  border-color: #c7d2fe !important;
}

.pos-block-title {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, #94a3b8);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

[data-theme="light"] .pos-block-title,
body.light-theme .pos-block-title {
  color: #64748b;
}

.pos-block-val {
  font-size: 0.84rem;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  color: var(--text-primary, #ffffff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

[data-theme="light"] .pos-block-val,
body.light-theme .pos-block-val {
  color: #0f172a;
}

.pos-block-pnl {
  font-size: 0.82rem;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pos-block-pnl.bullish {
  color: #10b981;
}

.pos-block-pnl.bearish {
  color: #f43f5e;
}

.pos-block-pnl.neutral {
  color: var(--text-muted, #94a3b8);
}

[data-theme="light"] .pos-block-pnl.bullish,
body.light-theme .pos-block-pnl.bullish {
  color: #059669;
}

[data-theme="light"] .pos-block-pnl.bearish,
body.light-theme .pos-block-pnl.bearish {
  color: #dc2626;
}

.pos-block-sub {
  font-size: 0.66rem;
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="light"] .pos-block-sub,
body.light-theme .pos-block-sub {
  color: #64748b;
}

.pos-pct-tag {
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0.95;
}

/* ==========================================================================
   Total Shares Strip (Directly above Stock Profit / Loss)
   ========================================================================== */
.pos-total-shares-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.07));
  flex-wrap: wrap;
}

.pos-total-shares-strip+.pos-pnl-summary-bar {
  margin-top: 6px;
}

[data-theme="light"] .pos-total-shares-strip,
body.light-theme .pos-total-shares-strip {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.pos-total-shares-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.pos-total-shares-lbl {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
}

[data-theme="light"] .pos-total-shares-lbl,
body.light-theme .pos-total-shares-lbl {
  color: #64748b;
}

.pos-total-shares-val {
  font-size: 0.95rem;
  font-weight: 800;
  font-family: var(--font-mono, monospace);
  color: var(--text-primary, #ffffff);
}

[data-theme="light"] .pos-total-shares-val,
body.light-theme .pos-total-shares-val {
  color: #0f172a;
}

.pos-total-shares-right {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  font-family: var(--font-mono, monospace);
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
}

[data-theme="light"] .pos-total-shares-right,
body.light-theme .pos-total-shares-right {
  color: #64748b;
}

.pos-total-shares-right strong {
  color: var(--text-primary, #ffffff);
}

[data-theme="light"] .pos-total-shares-right strong,
body.light-theme .pos-total-shares-right strong {
  color: #0f172a;
}

.pos-weight-pill {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 9999px;
  background: rgba(99, 102, 241, 0.12);
  color: #818cf8;
  border: 1px solid rgba(99, 102, 241, 0.28);
  letter-spacing: 0.02em;
}

[data-theme="light"] .pos-weight-pill,
body.light-theme .pos-weight-pill {
  background: #eef2ff;
  color: #4f46e5;
  border-color: #c7d2fe;
}

/* ==========================================================================
   Profit / Loss Summary Bar (Positioned directly below the cards)
   ========================================================================== */
.pos-pnl-summary-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.07));
  flex-wrap: wrap;
}

.pos-pnl-summary-bar.bullish {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.26);
}

.pos-pnl-summary-bar.bearish {
  background: rgba(244, 63, 94, 0.08);
  border-color: rgba(244, 63, 94, 0.26);
}

[data-theme="light"] .pos-pnl-summary-bar,
body.light-theme .pos-pnl-summary-bar {
  background: #f8fafc;
  border-color: #e2e8f0;
}

[data-theme="light"] .pos-pnl-summary-bar.bullish,
body.light-theme .pos-pnl-summary-bar.bullish {
  background: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
}

[data-theme="light"] .pos-pnl-summary-bar.bearish,
body.light-theme .pos-pnl-summary-bar.bearish {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
}

.pos-pnl-summary-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.pos-pnl-summary-lbl {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
}

[data-theme="light"] .pos-pnl-summary-lbl,
body.light-theme .pos-pnl-summary-lbl {
  color: #64748b;
}

.pos-pnl-summary-val {
  font-size: 0.95rem;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  line-height: 1.2;
  white-space: nowrap;
}

.pos-pnl-summary-val.bullish {
  color: #10b981;
}

.pos-pnl-summary-val.bearish {
  color: #f43f5e;
}

[data-theme="light"] .pos-pnl-summary-val.bullish,
body.light-theme .pos-pnl-summary-val.bullish {
  color: #059669;
}

[data-theme="light"] .pos-pnl-summary-val.bearish,
body.light-theme .pos-pnl-summary-val.bearish {
  color: #dc2626;
}

.pos-pnl-summary-pct {
  font-size: 0.8rem;
  font-weight: 700;
  margin-left: 4px;
}

.pos-pnl-summary-right {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.71rem;
  font-family: var(--font-mono, monospace);
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
}

[data-theme="light"] .pos-pnl-summary-right,
body.light-theme .pos-pnl-summary-right {
  color: #64748b;
}

.pos-pnl-sep {
  opacity: 0.35;
}

/* ==========================================================================
   3-Column Horizontal Line in Expanded Details Tray
   (Holding Overview, Market Quote, Brokerage Commission)
   ========================================================================== */
.pos-breakdown-line {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 12px 6px 10px 6px;
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
}

@media (max-width: 650px) {
  .pos-breakdown-line {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.pos-breakdown-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.pos-item-title {
  font-size: 0.74rem;
  font-weight: 700;
  color: #38bdf8;
  letter-spacing: 0.02em;
}

.pos-breakdown-item:nth-child(2) .pos-item-title {
  color: #f472b6;
}

.pos-breakdown-item:nth-child(3) .pos-item-title {
  color: #a78bfa;
}

[data-theme="light"] .pos-item-title,
body.light-theme .pos-item-title {
  color: #0284c7;
}

[data-theme="light"] .pos-breakdown-item:nth-child(2) .pos-item-title,
body.light-theme .pos-breakdown-item:nth-child(2) .pos-item-title {
  color: #db2777;
}

[data-theme="light"] .pos-breakdown-item:nth-child(3) .pos-item-title,
body.light-theme .pos-breakdown-item:nth-child(3) .pos-item-title {
  color: #7c3aed;
}

.pos-item-val {
  font-size: 0.95rem;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  color: var(--text-primary, #ffffff);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="light"] .pos-item-val,
body.light-theme .pos-item-val {
  color: #0f172a;
}

.pos-item-sub {
  font-size: 0.69rem;
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="light"] .pos-item-sub,
body.light-theme .pos-item-sub {
  color: #64748b;
}

/* ==========================================================================
   Open Orders Smart Cards & Filter Bar
   ========================================================================== */
.orders-filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
}

.orders-filter-pills {
  display: inline-flex;
  gap: 6px;
  background: rgba(255, 255, 255, 0.03);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}

[data-theme="light"] .orders-filter-pills,
body.light-theme .orders-filter-pills {
  background: #f1f5f9;
  border-color: #e2e8f0;
}

.btn-filter-pill {
  padding: 4px 10px;
  font-size: 0.73rem;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.btn-filter-pill:hover {
  color: var(--text-primary, #ffffff);
}

.btn-filter-pill.active {
  background: rgba(99, 102, 241, 0.2);
  color: #818cf8;
  border-color: rgba(99, 102, 241, 0.4);
}

[data-theme="light"] .btn-filter-pill.active,
body.light-theme .btn-filter-pill.active {
  background: #ffffff;
  color: #4f46e5;
  border-color: #cbd5e1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.orders-filter-status {
  font-size: 0.72rem;
  color: var(--text-muted, #94a3b8);
  font-family: var(--font-mono, monospace);
}

/* Individual Order Ticket Rows inside Expanded Tray */
.pos-orders-tray-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.pos-orders-tray-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted, #94a3b8);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.pos-order-ticket-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
  transition: background 0.15s ease;
}

.pos-order-ticket-row.buy-row {
  border-left: 3px solid #10b981;
}

.pos-order-ticket-row.sell-row {
  border-left: 3px solid #f43f5e;
}

[data-theme="light"] .pos-order-ticket-row,
body.light-theme .pos-order-ticket-row {
  background: #ffffff;
  border-color: #e2e8f0;
}

[data-theme="light"] .pos-order-ticket-row.buy-row,
body.light-theme .pos-order-ticket-row.buy-row {
  border-left-color: #059669;
}

[data-theme="light"] .pos-order-ticket-row.sell-row,
body.light-theme .pos-order-ticket-row.sell-row {
  border-left-color: #dc2626;
}

.pos-order-ticket-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pos-order-ticket-header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.pos-order-id-badge {
  font-size: 0.68rem;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  color: var(--text-muted, #94a3b8);
}

.pos-order-ticket-main {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary, #ffffff);
  font-family: var(--font-mono, monospace);
}

[data-theme="light"] .pos-order-ticket-main,
body.light-theme .pos-order-ticket-main {
  color: #0f172a;
}

.pos-order-ticket-sub {
  font-size: 0.69rem;
  color: var(--text-muted, #94a3b8);
}

.pos-order-ticket-right {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  flex-shrink: 0;
  min-width: 58px;
}

.pos-order-edit-btn {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.70rem;
  font-weight: 400;
  border: 1px solid rgba(56, 189, 248, 0.4);
  background: rgba(56, 189, 248, 0.1);
  color: #38bdf8;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}

.pos-order-edit-btn:hover {
  background: rgba(56, 189, 248, 0.25);
  border-color: #38bdf8;
}

[data-theme="light"] .pos-order-edit-btn,
body.light-theme .pos-order-edit-btn {
  background: #f0f9ff;
  border-color: #bae6fd;
  color: #0284c7;
}

[data-theme="light"] .pos-order-edit-btn:hover,
body.light-theme .pos-order-edit-btn:hover {
  background: #e0f2fe;
  border-color: #38bdf8;
}

.pos-order-cancel-btn {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.70rem;
  font-weight: 400;
  border: 1px solid rgba(244, 63, 94, 0.4);
  background: rgba(244, 63, 94, 0.1);
  color: #f43f5e;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}

.pos-order-cancel-btn:hover {
  background: rgba(244, 63, 94, 0.25);
  border-color: #f43f5e;
}

[data-theme="light"] .pos-order-cancel-btn,
body.light-theme .pos-order-cancel-btn {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

[data-theme="light"] .pos-order-cancel-btn:hover,
body.light-theme .pos-order-cancel-btn:hover {
  background: #fee2e2;
  border-color: #ef4444;
}

/* ========================================================================
/* ========================================================================
   Trading Desk Cards Typography & Layout Overrides
   Per user: Unbold all texts except "Symbol" and "Current Price"
   Reduce font size of "Committed" and "Target/Cover" / Summary headers
   Harmonize designs across Positions, Executed Orders, and Pending Orders
   ======================================================================== */
.pending-order-card .pos-contract-tag,
.pending-order-card .pos-type-badge,
.pending-order-card .pos-contract-pill,
.pending-order-card .pos-sector-pill,
.pending-order-card .pos-company-title,
.pending-order-card .pos-day-chg,
.pending-order-card .pos-header-right-row2,
.pending-order-card .pos-header-right-row3,
.pending-order-card .pos-block-title,
.pending-order-card .pos-block-val,
.pending-order-card .pos-block-pnl,
.pending-order-card .pos-block-sub,
.pending-order-card .pos-card-toggle,
.pending-order-card .pos-capital-committed-lbl,
.pending-order-card .pos-capital-committed-val,
.pending-order-card .pos-queue-status-text,
.pending-order-card .pos-queue-sub-row,
.pending-order-card .pos-orders-tray-title,
.pending-order-card .pos-order-ticket-row,
.pending-order-card .pos-order-ticket-header,
.pending-order-card .pos-order-id-badge,
.pending-order-card .pos-order-ticket-main,
.pending-order-card .pos-order-ticket-sub,
.executed-order-card .pos-contract-tag,
.executed-order-card .pos-type-badge,
.executed-order-card .pos-contract-pill,
.executed-order-card .pos-sector-pill,
.executed-order-card .pos-company-title,
.executed-order-card .pos-day-chg,
.executed-order-card .pos-header-right-row2,
.executed-order-card .pos-header-right-row3,
.executed-order-card .pos-block-title,
.executed-order-card .pos-block-val,
.executed-order-card .pos-block-pnl,
.executed-order-card .pos-block-sub,
.executed-order-card .pos-pnl-summary-lbl,
.executed-order-card .pos-pnl-summary-val,
.executed-order-card .pos-pnl-summary-pct,
.executed-order-card .pos-pnl-summary-right,
.executed-order-card .pos-card-toggle,
.executed-order-card .pos-order-ticket-row,
.executed-order-card .pos-order-ticket-header,
.executed-order-card .pos-order-id-badge,
.executed-order-card .pos-order-ticket-main,
.executed-order-card .pos-order-ticket-sub {
  font-weight: 400 !important;
}

/* Explicitly preserve bold for Symbol and Current Price */
.pending-order-card .pos-symbol-name,
.executed-order-card .pos-symbol-name {
  font-weight: 700 !important;
}

.pending-order-card .pos-price-badge,
.executed-order-card .pos-price-badge {
  font-weight: 700 !important;
}

/* Reduced font size for Committed and Target/Cover and Executed stats */
.pending-order-card .pos-block-pnl,
.executed-order-card .pos-block-pnl {
  font-size: 0.70rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em;
}

/* Capital Committed Stacked Box: Amount below Text */
.pending-summary-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 12px !important;
  margin-top: 8px !important;
}

.pos-capital-committed-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 125px;
  flex-shrink: 0;
}

.pos-capital-committed-lbl {
  font-size: 0.64rem;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #94a3b8);
}

[data-theme="light"] .pos-capital-committed-lbl,
body.light-theme .pos-capital-committed-lbl {
  color: #64748b;
}

.pos-capital-committed-val {
  font-size: 0.90rem;
  font-weight: 400 !important;
  font-family: var(--font-mono, monospace);
  color: var(--text-primary, #ffffff);
  line-height: 1.2;
}

[data-theme="light"] .pos-capital-committed-val,
body.light-theme .pos-capital-committed-val {
  color: #0f172a;
}

.pos-queue-status-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
  min-width: 0;
  flex: 1;
}

.pos-queue-status-text {
  font-size: 0.74rem;
  font-weight: 400 !important;
  color: var(--color-accent, #38bdf8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

[data-theme="light"] .pos-queue-status-text,
body.light-theme .pos-queue-status-text {
  color: #0284c7;
}

.pos-queue-sub-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.69rem;
  color: var(--text-muted, #94a3b8);
  font-weight: 400 !important;
}


/* ========================================================================
   WATCHLIST SMART CARDS (MATCHING INSTITUTIONAL BROKER APPS)
   ======================================================================== */
.watchlist-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

@media (min-width: 860px) {
  .watchlist-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 14px;
  }
}

.watchlist-stock-card {
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: 14px;
  padding: 14px 16px 12px 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

[data-theme="dark"] .watchlist-stock-card,
[data-theme="system"] .watchlist-stock-card {
  background: rgba(18, 24, 38, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.watchlist-stock-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.wl-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.wl-card-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.wl-card-sym-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.wl-card-symbol {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1.15;
}

.wl-shariah-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(234, 179, 8, 0.14);
  color: #eab308;
  border: 1px solid rgba(234, 179, 8, 0.38);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.wl-shariah-moon {
  font-size: 0.72rem;
  line-height: 1;
}

.wl-vol-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}

.wl-tag-reg {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(148, 163, 184, 0.12);
  padding: 1px 5px;
  border-radius: 4px;
  flex-shrink: 0;
}

.wl-tag-reg.fut {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
  border: 1px solid rgba(234, 179, 8, 0.35);
}

.wl-company-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-top: 1px;
}

.wl-company-name {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 230px;
}

.wl-sector-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
}

.wl-sector-tag {
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  padding: 0;
  border-radius: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 230px;
}

.wl-card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}

.wl-price-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 86px;
  padding: 5px 16px;
  border-radius: 9999px;
  font-size: 1.12rem;
  font-weight: 700;
  font-family: var(--font-mono, 'Roboto Mono', monospace);
  color: #ffffff !important;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: transform 0.12s ease, opacity 0.12s ease;
  user-select: none;
  border: none;
}

.wl-price-pill:hover {
  transform: scale(1.03);
  opacity: 0.95;
}

.wl-price-pill.bullish {
  background: #00a884;
}

.wl-price-pill.bearish {
  background: #ef4444;
}

.wl-change-txt {
  font-size: 0.82rem;
  font-weight: 700;
  font-family: var(--font-mono, 'Roboto Mono', monospace);
}

.wl-change-txt.bullish {
  color: #10b981;
}

.wl-change-txt.bearish {
  color: #ef4444;
}

.wl-range-txt {
  font-size: 0.76rem;
  font-family: var(--font-mono, 'Roboto Mono', monospace);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.wl-range-lbl {
  font-weight: 700;
}

.wl-range-lbl.l {
  color: #f43f5e;
}

.wl-range-lbl.h {
  color: #10b981;
}

.wl-card-remove-corner-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.82rem;
  cursor: pointer;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  opacity: 0.6;
  z-index: 2;
}

.wl-card-remove-corner-btn:hover {
  opacity: 1;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
  transform: scale(1.1);
}

.wl-targets-row,
.wl-targets-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 3px;
  margin-bottom: 3px;
  width: 100%;
}

.wl-target-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.wl-target-badge:hover {
  filter: brightness(1.15);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
}

.wl-target-edit-pen {
  font-size: 0.65rem;
  opacity: 0.6;
  margin-left: 2px;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.wl-target-badge:hover .wl-target-edit-pen {
  opacity: 1;
  transform: scale(1.15);
}

.wl-target-badge.buy {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #10b981;
}

.wl-target-badge.sell {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #ef4444;
  margin-left: auto;
}

.wl-target-badge.buy + .wl-target-badge.sell {
  margin-left: 0;
}

.wl-target-bullet {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.wl-target-bullet.buy {
  background: #10b981;
}

.wl-target-bullet.sell {
  background: #ef4444;
}

.wl-target-label {
  font-weight: 600;
  letter-spacing: 0.01em;
}

.wl-target-val {
  font-family: var(--font-mono, monospace);
  font-weight: 700;
}

/* Persistent Target Alert Blinking Animation */
@keyframes targetBadgeBlinkGreen {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.65);
    background: rgba(16, 185, 129, 0.3);
  }
  50% {
    opacity: 0.25;
    transform: scale(0.97);
    box-shadow: 0 0 2px transparent;
    background: rgba(16, 185, 129, 0.08);
  }
}

@keyframes targetBadgeBlinkRed {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.65);
    background: rgba(239, 68, 68, 0.3);
  }
  50% {
    opacity: 0.25;
    transform: scale(0.97);
    box-shadow: 0 0 2px transparent;
    background: rgba(239, 68, 68, 0.08);
  }
}

.wl-target-badge.buy.triggered,
.wl-target-badge.buy.target-blinking {
  animation: targetBadgeBlinkGreen 0.9s infinite ease-in-out !important;
  border-color: #10b981 !important;
  color: #10b981 !important;
}

.wl-target-badge.sell.triggered,
.wl-target-badge.sell.target-blinking {
  animation: targetBadgeBlinkRed 0.9s infinite ease-in-out !important;
  border-color: #ef4444 !important;
  color: #ef4444 !important;
}

/* Inline Target Price Editing Elements */
.wl-target-inline-edit-box {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.wl-inline-target-input {
  width: 68px;
  padding: 1px 4px;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  background: var(--bg-card, #0f172a);
  border: 1px solid var(--brand-primary, #3b82f6);
  border-radius: 4px;
  color: var(--text-primary, #f8fafc);
  outline: none;
  text-align: right;
}

[data-theme="light"] .wl-inline-target-input,
body.light-theme .wl-inline-target-input {
  background: #ffffff;
  border-color: #3b82f6;
  color: #0f172a;
}

.wl-inline-save-btn,
.wl-inline-cancel-btn {
  padding: 1px 5px;
  font-size: 0.68rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  line-height: 1.2;
}

.wl-inline-save-btn {
  background: #10b981;
  color: #ffffff;
}

.wl-inline-save-btn:hover {
  background: #059669;
}

.wl-inline-cancel-btn {
  background: rgba(148, 163, 184, 0.25);
  color: var(--text-primary, #cbd5e1);
}

.wl-inline-cancel-btn:hover {
  background: rgba(239, 68, 68, 0.4);
  color: #ffffff;
}

/* Trailing "Add Symbol" Card Box */
.watchlist-stock-card.wl-add-stock-card {
  min-height: 175px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px dashed rgba(148, 163, 184, 0.35);
  background: rgba(18, 24, 38, 0.4);
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

[data-theme="light"] .watchlist-stock-card.wl-add-stock-card,
body.light-theme .watchlist-stock-card.wl-add-stock-card {
  background: rgba(241, 245, 249, 0.6);
  border-color: rgba(148, 163, 184, 0.5);
}

.watchlist-stock-card.wl-add-stock-card:hover {
  border-color: var(--brand-primary, #3b82f6);
  background: rgba(59, 130, 246, 0.06);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.wl-add-card-collapsed {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  width: 100%;
  height: 100%;
  padding: 18px 14px;
}

.wl-add-card-plus-icon {
  font-size: 1.8rem;
  line-height: 1;
  color: var(--brand-primary, #3b82f6);
  transition: transform 0.2s ease;
}

.watchlist-stock-card.wl-add-stock-card:hover .wl-add-card-plus-icon {
  transform: scale(1.2) rotate(90deg);
}

.wl-add-card-main-btn {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary, #ffffff);
  background: rgba(59, 130, 246, 0.18);
  border: 1px solid rgba(59, 130, 246, 0.4);
  padding: 6px 20px;
  border-radius: 8px;
  letter-spacing: 0.02em;
  transition: all 0.2s ease;
}

.watchlist-stock-card.wl-add-stock-card:hover .wl-add-card-main-btn {
  background: var(--brand-primary, #3b82f6);
  color: #ffffff;
  box-shadow: 0 0 14px rgba(59, 130, 246, 0.4);
}

.wl-add-card-subtitle {
  font-size: 0.72rem;
  color: var(--text-muted, #94a3b8);
  max-width: 200px;
}

/* Expanded In-Place Form State */
.wl-add-card-expanded {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  gap: 10px;
  padding: 6px 4px;
  cursor: default;
}

.wl-add-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  padding-bottom: 6px;
}

.wl-add-form-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary, #ffffff);
  display: flex;
  align-items: center;
  gap: 6px;
}

.wl-add-form-close {
  background: none;
  border: none;
  color: var(--text-muted, #94a3b8);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}

.wl-add-form-close:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.wl-add-form-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wl-add-field-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.wl-add-field-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
  letter-spacing: 0.02em;
}

.wl-add-targets-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.wl-add-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.wl-orderbook-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  text-align: center;
}

.wl-ob-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

.wl-ob-val {
  font-size: 0.92rem;
  font-weight: 700;
  font-family: var(--font-mono, 'Roboto Mono', monospace);
  line-height: 1.2;
  letter-spacing: -0.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.wl-ob-val.text-bid {
  color: #0284c7;
}

[data-theme="dark"] .wl-ob-val.text-bid,
[data-theme="system"] .wl-ob-val.text-bid {
  color: #38bdf8;
}

.wl-ob-val.text-ask {
  color: #d946ef;
}

[data-theme="dark"] .wl-ob-val.text-ask,
[data-theme="system"] .wl-ob-val.text-ask {
  color: #f472b6;
}

.wl-ob-lbl {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* ==========================================================================
   CORPORATE PAYOUTS SMART CARDS & RESPONSIVE GRID
   ========================================================================== */
.payouts-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 16px 20px 24px 20px;
}

/* Extended Screen (larger than laptop) -> Exactly 3 cards in a row */
@media (min-width: 1620px) {
  .payouts-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile & Small Tablets -> 1 card in a row */
@media (max-width: 820px) {
  .payouts-cards-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
  }
}

.payout-stock-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 14px 16px 12px 16px;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  cursor: pointer;
}

[data-theme="dark"] .payout-stock-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.payout-stock-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  border-color: rgba(0, 242, 254, 0.4);
}

/* Top accent highlight for cards due today or upcoming */
.payout-stock-card.card-today {
  border-top: 3px solid #eab308;
}

.payout-stock-card.card-upcoming {
  border-top: 3px solid #10b981;
}

.payout-stock-card.card-exdate {
  border-top: 3px solid #0ea5e9;
}

.payout-stock-card.card-passed {
  border-top: 3px solid rgba(148, 163, 184, 0.3);
  opacity: 0.82;
}

.payout-stock-card.card-passed:hover {
  opacity: 1;
}

.payout-card-highlight-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  margin-top: 2px;
}

.payout-card-highlight-bar.bar-today {
  background: rgba(234, 179, 8, 0.12);
  border-color: rgba(234, 179, 8, 0.4);
}

.payout-card-highlight-bar.bar-upcoming {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.32);
}

.payout-card-highlight-bar.bar-exdate {
  background: rgba(14, 165, 233, 0.1);
  border-color: rgba(14, 165, 233, 0.32);
}

.payout-card-date-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.payout-card-date-lbl {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.payout-card-date-val {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
}

/* Benefits Strip (Dividend, Bonus, Right) */
.payout-card-benefits-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 2px;
}

.payout-benefit-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 7px 4px;
  border-radius: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  text-align: center;
  min-width: 0;
}

.payout-benefit-lbl {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.payout-benefit-val {
  font-size: 0.84rem;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  color: var(--text-primary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.payout-benefit-pill.active-div {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
}

.payout-benefit-pill.active-div .payout-benefit-val {
  color: #10b981;
}

.payout-benefit-pill.active-bonus {
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.35);
}

.payout-benefit-pill.active-bonus .payout-benefit-val {
  color: #a855f7;
}

.payout-benefit-pill.active-right {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
}

.payout-benefit-pill.active-right .payout-benefit-val {
  color: #f59e0b;
}

.payout-benefit-pill.empty .payout-benefit-val {
  color: var(--text-muted);
  opacity: 0.6;
}

/* Book Closure Footer */
.payout-card-bc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.76rem;
  color: var(--text-muted);
}

.payout-card-bc-val {
  font-weight: 600;
  color: var(--text-primary);
  font-family: var(--font-mono, monospace);
}

/* Payout Card Chart & Technicals Link (Simple text without button) */
.payout-card-chart-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 8px;
  margin-top: 6px;
  border-top: 1px dashed var(--border-subtle);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--color-accent, #3b82f6);
  cursor: pointer;
  letter-spacing: 0.015em;
  transition: color 0.15s ease, opacity 0.15s ease, text-decoration 0.15s ease;
  user-select: none;
  text-align: center;
}

.payout-card-chart-link:hover {
  color: var(--accent-hover, #60a5fa);
  text-decoration: underline;
  opacity: 0.95;
}

[data-theme="light"] .payout-card-chart-link,
body.light-theme .payout-card-chart-link {
  color: #2563eb;
  border-top-color: #e2e8f0;
}

[data-theme="light"] .payout-card-chart-link:hover,
body.light-theme .payout-card-chart-link:hover {
  color: #1d4ed8;
}

/* History Drawer Footer & See Detail Button (Placed Below History) */
.payout-history-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px dashed rgba(148, 163, 184, 0.16);
}

.btn-payout-see-detail {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.18) 0%, rgba(30, 58, 138, 0.3) 100%);
  border: 1px solid rgba(59, 130, 246, 0.5);
  color: #3b82f6;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.02em;
  transition: all 0.2s ease;
}

[data-theme="dark"] .btn-payout-see-detail {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.25) 0%, rgba(30, 58, 138, 0.4) 100%);
  border-color: rgba(96, 165, 250, 0.5);
  color: #93c5fd;
}

.btn-payout-see-detail:hover {
  background: #2563eb;
  color: #ffffff;
  border-color: #3b82f6;
  box-shadow: 0 2px 12px rgba(37, 99, 235, 0.4);
  transform: translateY(-1px);
}

/* Expandable History Drawer */
.payout-history-drawer {
  margin-top: 6px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  animation: fadeIn 0.2s ease-in-out;
}

[data-theme="dark"] .payout-history-drawer {
  background: var(--bg-secondary);
  border-color: var(--border-subtle);
}

.payout-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.payout-history-close-btn {
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.8rem;
  color: var(--text-muted);
  transition: all 0.15s ease;
}

.payout-history-close-btn:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.payout-history-table-wrap {
  overflow-x: auto;
  max-height: 220px;
  overflow-y: auto;
}

.payout-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.73rem;
}

.payout-history-table th {
  padding: 5px 6px;
  background: rgba(148, 163, 184, 0.08);
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.03em;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  white-space: nowrap;
}

.payout-history-table td {
  padding: 6px 6px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
  color: var(--text-primary);
  font-family: var(--font-mono, monospace);
  font-size: 0.74rem;
}

.payout-history-table tr:hover td {
  background: rgba(148, 163, 184, 0.05);
}

.hist-date-val {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.hist-yr-sub {
  font-size: 0.62rem;
  color: var(--text-muted);
}

.hist-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.7rem;
}

.hist-badge.div {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}

.hist-badge.bonus {
  background: rgba(168, 85, 247, 0.12);
  color: #a855f7;
}

.hist-badge.right {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}

.payout-history-empty {
  text-align: center;
  padding: 14px 8px;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-style: italic;
}

/* ==========================================================================
   UNIFIED GLOBAL MARKETS HEADER & ATTRACTIVE REGIME BADGE
   ========================================================================== */
.global-markets-unified-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  background: var(--bg-card) !important;
  border: 1px solid rgba(6, 182, 212, 0.28) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 0 16px rgba(6, 182, 212, 0.05) !important;
  padding: 12px 18px !important;
  margin-bottom: 1rem !important;
}

.global-header-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
}

.attractive-regime-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(6, 182, 212, 0.12));
  border: 1px solid rgba(16, 185, 129, 0.45);
  color: #10b981;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: all 0.25s ease;
}

.attractive-regime-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulseRegimeDot 2s infinite ease-in-out;
  flex-shrink: 0;
}

@keyframes pulseRegimeDot {

  0%,
  100% {
    transform: scale(0.95);
    opacity: 0.85;
    box-shadow: 0 0 4px #10b981;
  }

  50% {
    transform: scale(1.3);
    opacity: 1;
    box-shadow: 0 0 10px #10b981, 0 0 16px rgba(16, 185, 129, 0.6);
  }
}

.attractive-regime-badge.bullish,
.attractive-regime-badge.healthy {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(6, 182, 212, 0.12));
  border-color: rgba(16, 185, 129, 0.45);
  color: #10b981;
}

.attractive-regime-badge.bearish {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.18), rgba(244, 63, 94, 0.12));
  border-color: rgba(239, 68, 68, 0.45);
  color: #ef4444;
}

.attractive-regime-badge.bearish .attractive-regime-dot {
  background: #ef4444;
  box-shadow: 0 0 8px #ef4444;
}

.attractive-regime-badge.cautious {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(217, 119, 6, 0.12));
  border-color: rgba(245, 158, 11, 0.45);
  color: #f59e0b;
}

.attractive-regime-badge.cautious .attractive-regime-dot {
  background: #f59e0b;
  box-shadow: 0 0 8px #f59e0b;
}

.global-sentinel-subbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: rgba(16, 185, 129, 0.05);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 8px;
  padding: 8px 14px;
  width: 100%;
}

.sentinel-left-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sentinel-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.sentinel-text-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sentinel-headline-text {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
}

.sentinel-sep {
  color: var(--border-medium, #4b5563);
  font-size: 0.75rem;
}

.sentinel-sub-text {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.sentinel-right-routing {
  display: flex;
  align-items: center;
  gap: 8px;
}

.routing-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.routing-mode-tag {
  font-size: 0.80rem;
  font-weight: 700;
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}

/* ========================================================================
   CIRCULAR SUNBURST HEATMAP WHEEL (MATCHING USER SCREENSHOT)
   ======================================================================== */
.sunburst-chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--shadow-card);
  min-height: 720px;
}

.sunburst-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  gap: 0.75rem;
}

.sunburst-header-left {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.sunburst-card-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.015em;
}

.sunburst-card-subtitle {
  font-size: 0.80rem;
  font-weight: 400;
  color: var(--text-muted);
}

.sunburst-controls-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.sunburst-stage-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 560px;
  max-height: 680px;
  position: relative;
  width: 100%;
  padding: 0.5rem 0;
}

#sunburst-svg {
  max-width: 660px;
  max-height: 660px;
  filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.16));
  transition: transform 0.2s ease;
  user-select: none;
}

.sunburst-slice {
  cursor: pointer;
  transition: filter 0.18s ease, stroke-width 0.18s ease, stroke 0.18s ease;
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 0.75px;
}

.sunburst-slice:hover {
  filter: brightness(1.22);
  stroke: #ffffff;
  stroke-width: 1.5px;
}

.sunburst-core-circle {
  cursor: pointer;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 2px;
  transition: filter 0.2s ease;
}

.sunburst-core-circle:hover {
  filter: brightness(1.12);
}

.sunburst-text {
  pointer-events: none;
  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  user-select: none;
  filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.7));
}

.sunburst-footer-bar {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.sunburst-stats-text {
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* ========================================================================
   INDEX POINTS & SIP PERFORMANCE EXPLORER (MATCHING USER SCREENSHOT)
   ======================================================================== */
.points-chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--shadow-card);
  min-height: 700px;
}

.points-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.15rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border-subtle);
}

.points-header-left {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.points-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.points-card-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.015em;
}

.points-active-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(14, 165, 233, 0.12);
  color: #0284c7;
  border: 1px solid rgba(14, 165, 233, 0.25);
  font-family: var(--font-mono, monospace);
}

/* Horizon Timeframe Pills matching screenshot */
.points-horizon-pills {
  display: inline-flex;
  align-items: center;
  background: var(--bg-surface-2, rgba(148, 163, 184, 0.08));
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}

.points-hz-btn {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
}

.points-hz-btn:hover {
  color: var(--text-primary);
  background: rgba(148, 163, 184, 0.1);
}

.points-hz-btn.active {
  background: var(--bg-card, #ffffff);
  color: var(--text-primary) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  font-weight: 600;
}

.points-header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Top-right mode pills matching screenshot: [ Points | Trading View | SIP ] */
.points-mode-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--bg-surface-2, rgba(148, 163, 184, 0.08));
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 3px;
  gap: 3px;
}

.points-mode-btn {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  padding: 5px 16px;
  font-size: 0.82rem;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
}

.points-mode-btn:hover {
  color: var(--text-primary);
  background: rgba(148, 163, 184, 0.1);
}

.points-mode-btn.active {
  background: var(--bg-card, #ffffff);
  color: var(--text-primary) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  font-weight: 600;
}

/* KPI Metric Bar */
.points-metric-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.25rem;
  padding: 0.85rem 1.15rem;
  background: rgba(148, 163, 184, 0.05);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
}

.points-metric-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.points-metric-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.points-metric-val {
  font-size: 1.35rem;
  font-weight: 600;
  font-family: var(--font-mono, monospace);
  color: var(--text-primary);
}

/* Main Canvas Wrap */
.points-canvas-wrap {
  position: relative;
  width: 100%;
  min-height: 340px;
  background: rgba(15, 23, 42, 0.02);
  border-radius: 8px;
  margin-bottom: 1.25rem;
}

#points-main-canvas {
  width: 100%;
  height: 340px;
  display: block;
  cursor: crosshair;
}

.points-chart-tooltip {
  position: absolute;
  z-index: 100;
  pointer-events: none;
  background: var(--bg-card, #1e293b);
  border: 1px solid var(--border-active);
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  color: var(--text-primary);
  font-size: 0.78rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  transform: translate(-50%, -115%);
}

/* Multi-Year Cycle Range Navigator (Brush Slider) matching screenshot */
.points-navigator-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.5rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-subtle);
}

.points-nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.points-nav-title {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.points-nav-range-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-family: var(--font-mono, monospace);
}

.points-slider-stage {
  position: relative;
  width: 100%;
  height: 60px;
  background: rgba(148, 163, 184, 0.06);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  overflow: hidden;
  user-select: none;
}

#points-nav-canvas {
  width: 100%;
  height: 60px;
  display: block;
}

/* Draggable Brush Window */
.points-brush-window {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 70%;
  width: 30%;
  background: rgba(2, 132, 199, 0.15);
  border-top: 2px solid #0284c7;
  border-bottom: 2px solid #0284c7;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  cursor: grab;
  box-sizing: border-box;
}

.points-brush-window:active {
  cursor: grabbing;
}

.points-brush-center {
  flex: 1;
  height: 100%;
}

.points-brush-handle {
  width: 10px;
  background: #0284c7;
  cursor: ew-resize;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.points-brush-handle::after {
  content: "";
  width: 2px;
  height: 18px;
  background: #ffffff;
  border-radius: 1px;
}

.points-brush-handle.handle-left {
  border-radius: 4px 0 0 4px;
}

.points-brush-handle.handle-right {
  border-radius: 0 4px 4px 0;
}

/* SIP Calculator Styles */
.sip-calculator-container {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sip-inputs-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  padding: 1.25rem;
  background: rgba(148, 163, 184, 0.04);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}

.sip-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.sip-label {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.sip-input-prefix-wrap {
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  overflow: hidden;
}

.sip-currency-prefix {
  padding: 0.5rem 0.75rem;
  background: rgba(148, 163, 184, 0.08);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  border-right: 1px solid var(--border-subtle);
}

.sip-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0.5rem 0.75rem;
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 600;
  font-family: var(--font-mono, monospace);
  outline: none;
}

.sip-select {
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  color: var(--text-primary);
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  outline: none;
}

.sip-duration-pills {
  display: inline-flex;
  align-items: center;
  background: var(--bg-surface-2, rgba(148, 163, 184, 0.08));
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}

.sip-dur-btn {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
}

.sip-dur-btn:hover {
  color: var(--text-primary);
}

.sip-dur-btn.active {
  background: var(--bg-card, #ffffff);
  color: var(--text-primary) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  font-weight: 600;
}

.sip-results-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.sip-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  box-shadow: 0 4px 18px -2px rgba(0, 0, 0, 0.05);
}

.sip-kpi-card.highlight {
  border-color: rgba(16, 185, 129, 0.35);
  background: linear-gradient(180deg, var(--bg-card), rgba(16, 185, 129, 0.03));
}

.sip-kpi-label {
  font-size: 0.70rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.sip-kpi-val {
  font-size: 1.5rem;
  font-weight: 600;
  font-family: var(--font-mono, monospace);
  color: var(--text-primary);
}

.sip-kpi-sub {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-family: var(--font-mono, monospace);
}

.sip-chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sip-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sip-chart-title {
  font-size: 0.90rem;
  font-weight: 600;
  color: var(--text-primary);
}

.sip-chart-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* ========================================================================
   INSTITUTIONAL CUSTODY & CLEARING PAYLOAD VIEWER (SWIFT FIN / ISO 20022)
   High-contrast, razor-sharp typography for financial telecommunications
   ======================================================================== */
.custody-payload-pre {
  flex: 1;
  margin: 0;
  padding: 14px 16px;
  border-radius: 6px;
  background: #080c14;
  /* Pure dark mode terminal: Deep black */
  color: #f8fafc;
  /* Crisp high-contrast white text */
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', Consolas, 'Courier New', monospace !important;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.2px;
  overflow: auto;
  max-height: 250px;
  min-height: 180px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  white-space: pre-wrap;
  word-break: break-all;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Light Theme: Crisp pure white background with deep black/slate text for maximum legibility */
[data-theme="light"] .custody-payload-pre {
  background: #ffffff !important;
  color: #090d16 !important;
  border-color: #cbd5e1 !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Forced High-Contrast Overrides */
.custody-payload-pre.force-dark {
  background: #05080f !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

.custody-payload-pre.force-light {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #94a3b8 !important;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.08) !important;
}

/* ================= REAL-TIME WEBSOCKET TICK MICRO-FLASH ANIMATIONS ================= */
@keyframes tickFlashGreen {
  0% {
    background-color: rgba(0, 230, 118, 0.40) !important;
    color: #ffffff !important;
  }

  100% {
    background-color: transparent;
  }
}

@keyframes tickFlashRed {
  0% {
    background-color: rgba(255, 51, 102, 0.40) !important;
    color: #ffffff !important;
  }

  100% {
    background-color: transparent;
  }
}

.micro-flash-green {
  animation: tickFlashGreen 0.75s ease-out forwards;
}

.micro-flash-red {
  animation: tickFlashRed 0.75s ease-out forwards;
}

/* ========================================================================
   SMART POSITIONS & DAY TRADES EXPANDABLE CARD TRAY & BLOTTER GRID
   ======================================================================== */
.pos-card-toggle {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 8px 12px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
}

.pos-card-toggle:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="light"] .pos-card-toggle,
body.light-theme .pos-card-toggle {
  background: rgba(0, 0, 0, 0.015) !important;
  border-top-color: rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .pos-card-toggle:hover,
body.light-theme .pos-card-toggle:hover {
  background: rgba(0, 0, 0, 0.035) !important;
}

.pos-toggle-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pos-toggle-title {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-primary, #ffffff);
  letter-spacing: 0.01em;
}

[data-theme="light"] .pos-toggle-title,
body.light-theme .pos-toggle-title {
  color: #0f172a;
}

.pos-toggle-sub {
  font-size: 0.68rem;
  color: var(--text-muted, #94a3b8);
}

.pos-toggle-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pos-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.pos-status-chip.chip-active {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.pos-status-chip.chip-closed {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.pos-status-chip.chip-core {
  background: rgba(99, 102, 241, 0.12);
  color: #818cf8;
  border: 1px solid rgba(99, 102, 241, 0.35);
}

.pos-expand-chevron {
  font-size: 0.82rem;
  color: var(--text-muted, #94a3b8);
  transition: transform 0.2s ease;
  line-height: 1;
}

.pos-expand-chevron.expanded {
  transform: rotate(180deg);
  color: var(--accent-primary, #38bdf8);
}

/* Expanded Tray Container */
.pos-expanded-details {
  background: rgba(15, 23, 42, 0.55);
  border-top: none !important;
  /* Dotted line removed */
  padding: 2px 10px 4px 10px !important;
  /* Strictly minimal space above and below bottom panels */
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}

[data-theme="light"] .pos-expanded-details,
body.light-theme .pos-expanded-details {
  background: rgba(248, 250, 252, 0.85);
  border-top: none !important;
}

.pos-smart-breakdown {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
}

/* 3-Box Blotter Grid (Adjusted in a single row) */
.pos-blotter-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin: 0 !important;
  width: 100%;
  box-sizing: border-box;
}

.pos-blotter-card {
  min-width: 0;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color 0.15s ease;
  overflow: hidden;
}

[data-theme="light"] .pos-blotter-card,
body.light-theme .pos-blotter-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.pos-blotter-header {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 3px;
}

.pos-blotter-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.pos-blotter-dot.dot-buy {
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.4);
}

.pos-blotter-dot.dot-sell {
  background: #f43f5e;
  box-shadow: 0 0 6px rgba(244, 63, 94, 0.4);
}

.pos-blotter-dot.dot-pending {
  background: #38bdf8;
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.4);
}

.pos-blotter-dot.dot-pnl {
  background: #a855f7;
  box-shadow: 0 0 6px rgba(168, 85, 247, 0.4);
}

.pos-blotter-label {
  font-size: 0.62rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
}

.pos-blotter-val {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-primary, #ffffff);
  font-family: var(--font-mono, monospace);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="light"] .pos-blotter-val,
body.light-theme .pos-blotter-val {
  color: #0f172a;
}

.pos-blotter-subprice {
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--text-muted, #94a3b8);
  margin-left: 2px;
}

.pos-blotter-sub {
  font-size: 0.65rem;
  color: var(--text-muted, #94a3b8);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pos-blotter-val.bullish,
.pos-blotter-sub.bullish {
  color: #10b981 !important;
}

.pos-blotter-val.bearish,
.pos-blotter-sub.bearish {
  color: #f43f5e !important;
}

.pos-blotter-cur {
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--text-muted, #94a3b8);
}

/* Working queue pill badges */
.pos-blotter-badges {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 1px 0;
}

.pos-queue-tag {
  font-size: 0.64rem;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-muted, #94a3b8);
}

.pos-queue-tag.active {
  font-weight: 600;
}

.pos-queue-tag.queue-buy.active {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
  color: #10b981;
}

.pos-queue-tag.queue-sell.active {
  background: rgba(244, 63, 94, 0.12);
  border-color: rgba(244, 63, 94, 0.35);
  color: #f43f5e;
}

/* Smart Action Buttons Row */
.pos-smart-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px !important;
}

.pos-action-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
  outline: none;
  white-space: nowrap;
}

.pos-action-btn:hover {
  transform: translateY(-1px);
}

.pos-action-btn:active {
  transform: translateY(0);
}

.pos-action-btn.action-close {
  background: rgba(244, 63, 94, 0.12);
  border-color: rgba(244, 63, 94, 0.35);
  color: #f43f5e;
}

.pos-action-btn.action-close:hover {
  background: rgba(244, 63, 94, 0.22);
  border-color: #f43f5e;
}

.pos-action-btn.action-buy {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
  color: #10b981;
}

.pos-action-btn.action-buy:hover {
  background: rgba(16, 185, 129, 0.22);
  border-color: #10b981;
}

.pos-action-btn.action-bracket {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.35);
  color: #60a5fa;
}

.pos-action-btn.action-bracket:hover {
  background: rgba(59, 130, 246, 0.22);
  border-color: #3b82f6;
}

.pos-action-btn.action-reenter {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.4);
  color: #10b981;
}

.pos-action-btn.action-reenter:hover {
  background: rgba(16, 185, 129, 0.25);
  border-color: #10b981;
}

.pos-action-btn.action-history {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.3);
  color: var(--text-primary, #ffffff);
}

[data-theme="light"] .pos-action-btn.action-history,
body.light-theme .pos-action-btn.action-history {
  color: #334155;
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
}

.pos-action-btn.action-history:hover {
  background: rgba(148, 163, 184, 0.22);
}

/* ================= COMPACT & UNBOLD CURRENCY SIGN ================= */
.curr-sign {
  font-size: 0.50em !important;
  font-weight: 400 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  color: var(--text-muted, #94a3b8) !important;
  margin-right: 3px;
  vertical-align: 0.06em;
  display: inline-block;
  opacity: 0.85;
  letter-spacing: 0.02em;
  line-height: 1;
}

[data-theme="light"] .curr-sign,
body.light-theme .curr-sign {
  color: #64748b !important;
}

/* ========================================================================
   HOME VIEW PORTAL & MULTI-ASSET INTELLIGENCE HUB STYLING
   ======================================================================== */
.home-portal-wrapper {
  max-width: 1920px;
  margin: 0 auto;
  padding: 1rem 1.25rem 2.5rem 1.25rem;
  box-sizing: border-box;
}

/* 1. Hero Search Section */
.home-hero-search-section {
  background: transparent !important;
  border: none !important;
  border-radius: 0;
  padding: 0.5rem 0 0.5rem 0;
  margin-bottom: 1.5rem;
  box-shadow: none !important;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

[data-theme="light"] .home-hero-search-section,
body.light-theme .home-hero-search-section {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.home-auth-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 0 auto 1.25rem auto;
  text-align: center;
}

.home-search-headline-group {
  margin: 0 0 1.25rem 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.home-search-headline-group .home-search-subtitle {
  margin-top: 0.45rem;
}

.home-search-title {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--text-primary, #f8fafc);
  letter-spacing: -0.02em;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

[data-theme="light"] .home-search-title,
body.light-theme .home-search-title {
  color: #0f172a;
}

/* Search Box Container (Even 1.25rem spacing above and below) */
.home-search-box-container {
  position: relative;
  max-width: 900px;
  width: 100%;
  margin: 0 auto 0.35rem auto;
  box-sizing: border-box;
}

.home-search-subtitle-group {
  margin: 0.55rem 0 1.25rem 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.home-search-subtitle {
  font-size: 0.95rem;
  color: var(--text-muted, #94a3b8);
  margin: 0 auto;
  line-height: 1.35;
  text-align: center;
}

.home-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg-card, rgba(15, 23, 42, 0.85));
  border: 1.5px solid var(--border-subtle, rgba(148, 163, 184, 0.24));
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="light"] .home-search-input-wrap,
body.light-theme .home-search-input-wrap {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.home-search-input-wrap:focus-within {
  border-color: #38bdf8;
  box-shadow: 0 0 0 3.5px rgba(56, 189, 248, 0.22), 0 4px 16px rgba(0, 0, 0, 0.3);
}

.home-search-suffix-icon {
  font-size: 1.15rem;
  opacity: 0.75;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
  user-select: none;
  padding: 2px;
}

.home-search-suffix-icon:hover {
  opacity: 1;
  transform: scale(1.1);
}

.home-global-search-input {
  width: 100%;
  padding: 12px 64px 12px 20px;
  font-size: 1.02rem;
  font-weight: 500;
  border: none;
  background: transparent;
  color: var(--text-primary, #f8fafc);
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
}

[data-theme="light"] .home-global-search-input,
body.light-theme .home-global-search-input {
  color: #0f172a;
}

.home-global-search-input::placeholder {
  color: var(--text-muted, #64748b);
  font-size: 0.94rem;
}

.home-search-right-adornment {
  position: absolute;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-search-clear-btn {
  background: rgba(148, 163, 184, 0.18);
  border: none;
  color: var(--text-muted, #94a3b8);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.home-search-clear-btn:hover {
  background: rgba(244, 63, 94, 0.25);
  color: #f43f5e;
}

/* Instant Search Dropdown */
.home-search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 9999;
  text-align: left;
  background: var(--bg-card, #1e293b);
  border: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.25));
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  max-height: 440px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}

[data-theme="light"] .home-search-dropdown,
body.light-theme .home-search-dropdown {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.home-search-empty {
  padding: 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home-search-category-group {
  border-bottom: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.12));
}

.home-search-category-group:last-child {
  border-bottom: none;
}

.home-search-category-header {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #38bdf8;
  padding: 6px 14px;
  background: rgba(56, 189, 248, 0.08);
  display: flex;
  align-items: center;
  gap: 6px;
}

.home-search-result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  border-bottom: 1px solid rgba(148, 163, 184, 0.06);
}

.home-search-result-item:hover,
.home-search-result-item.active {
  background: rgba(56, 189, 248, 0.14) !important;
}

[data-theme="light"] .home-search-result-item:hover,
[data-theme="light"] .home-search-result-item.active,
body.light-theme .home-search-result-item:hover,
body.light-theme .home-search-result-item.active {
  background: #f1f5f9 !important;
}

.home-search-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.home-search-mkt-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 4px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.home-search-mkt-badge.mkt-psx {
  background: rgba(16, 185, 129, 0.16);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.home-search-mkt-badge.mkt-tadawul {
  background: rgba(6, 182, 212, 0.16);
  color: #06b6d4;
  border: 1px solid rgba(6, 182, 212, 0.35);
}

.home-search-mkt-badge.mkt-global {
  background: rgba(56, 189, 248, 0.16);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
}

.home-search-sym-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.home-search-item-symbol {
  font-size: 0.94rem;
  font-weight: 800;
  color: var(--text-primary, #f8fafc);
}

[data-theme="light"] .home-search-item-symbol,
body.light-theme .home-search-item-symbol {
  color: #0f172a;
}

.home-search-item-name {
  font-size: 0.82rem;
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 380px;
}

.home-search-item-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.home-search-price-val {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary, #f8fafc);
}

[data-theme="light"] .home-search-price-val,
body.light-theme .home-search-price-val {
  color: #0f172a;
}

.home-search-chg-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

.home-search-arrow-indicator {
  font-size: 11px;
  color: var(--text-muted, #94a3b8);
  opacity: 0.6;
}

/* Quick Jump Chips */
.home-quick-chips-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 0.75rem;
}

.home-chips-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted, #94a3b8);
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
}

.home-chips-scroll {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0;
}

.home-chips-scroll::-webkit-scrollbar {
  display: none;
}

.home-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--bg-card, rgba(30, 41, 59, 0.6));
  border: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.2));
  color: var(--text-primary, #f8fafc);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

[data-theme="light"] .home-chip-btn,
body.light-theme .home-chip-btn {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #1e293b;
}

.home-chip-btn:hover {
  transform: translateY(-1px);
  border-color: #38bdf8;
  color: #38bdf8;
  box-shadow: 0 2px 8px rgba(56, 189, 248, 0.2);
}

.home-chip-btn .chip-mkt {
  font-size: 8.5px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(148, 163, 184, 0.2);
  color: inherit;
  text-transform: uppercase;
}

/* ==========================================================================
   HOME MACRO SECTIONS: 4 CARDS IN A ROW GRID (INDICES, COMMODITIES, BELLWETHERS)
   ========================================================================== */
.home-macro-sections-group {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  margin-bottom: 2rem;
  width: 100%;
}

.home-macro-section {
  background: var(--bg-card, #1e293b);
  border: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.16));
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  width: 100%;
  box-sizing: border-box;
}

[data-theme="light"] .home-macro-section,
body.light-theme .home-macro-section {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.home-macro-section-header {
  background: var(--bg-secondary, #0f172a);
  padding: 0.65rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-subtle, rgba(148, 163, 184, 0.16));
}

[data-theme="light"] .home-macro-section-header,
body.light-theme .home-macro-section-header,
[data-theme-mode="light"] .home-macro-section-header {
  background: #f8fafc;
  border-bottom-color: #e2e8f0;
}

/* Explicitly remove hairline below Trending buttons in all themes */
#home-section-trending .home-macro-section-header,
#home-section-trending .home-trending-header,
.home-trending-section .home-macro-section-header,
.home-trending-section .home-trending-header,
.home-trending-header {
  border-bottom: none !important;
}

[data-theme="light"] #home-section-trending .home-macro-section-header,
body.light-theme #home-section-trending .home-macro-section-header,
[data-theme-mode="light"] #home-section-trending .home-macro-section-header,
[data-theme="light"] .home-trending-header,
body.light-theme .home-trending-header,
[data-theme-mode="light"] .home-trending-header {
  border-bottom: none !important;
}

/* Unified Modern Themed Count Badges for Macro Sections (Benchmark Indices, Global Macro, Bellwethers) */
.home-macro-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  user-select: none;
  transition: all 0.2s ease;
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
  color: var(--color-accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .home-macro-count-badge,
body.light-theme .home-macro-count-badge,
[data-theme-mode="light"] .home-macro-count-badge {
  background: color-mix(in srgb, var(--color-accent) 8%, #ffffff) !important;
  border-color: color-mix(in srgb, var(--color-accent) 30%, transparent) !important;
  color: var(--color-accent) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

.home-macro-cards-grid-wrap {
  padding: 14px;
  box-sizing: border-box;
}

.home-macro-cards-grid-wrap .mover-items-list {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.home-macro-cards-grid-wrap .macro-mover-card {
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

@media (max-width: 1400px) {
  .home-macro-cards-grid-wrap .mover-items-list {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 1000px) {
  .home-macro-cards-grid-wrap .mover-items-list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

@media (max-width: 600px) {
  .home-macro-cards-grid-wrap {
    padding: 10px;
  }
  .home-macro-cards-grid-wrap .mover-items-list {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

/* ==========================================================================
   HOME VIEW: PSX & TADAWUL DUAL CARDS MARKET OVERVIEW (STOCKS & SECTORS)
   ========================================================================== */
.home-market-overview-row {
  width: 100%;
  max-width: 100%;
  margin: 0 auto 1.5rem auto;
  display: flex;
  justify-content: center;
}

@media (max-width: 1024px) {
  .home-market-overview-row {
    grid-template-columns: 1fr;
  }
}

.home-market-overview-card {
  width: 100%;
  background: var(--bg-card, #131b2a);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  padding: 1.15rem 1.35rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  font-weight: 400 !important;
}

/* Refined Executive Typography for PSX & Tadawul Market Overview Cards */
.home-market-overview-card {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.home-market-overview-card .home-mo-title {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--text-primary, #0f172a);
  letter-spacing: -0.02em;
}

[data-theme="light"] .home-market-overview-card .home-mo-title,
body.light-theme .home-market-overview-card .home-mo-title {
  color: #0f172a !important;
}

.home-market-overview-card .home-mo-subtitle {
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  color: var(--text-muted, #64748b) !important;
  letter-spacing: 0.01em;
}

.home-market-overview-card .home-mo-idx-tab {
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
}

.home-market-overview-card .home-mo-idx-symbol {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  font-family: var(--font-sans, 'Inter', -apple-system, sans-serif) !important;
  color: var(--text-primary, #0f172a);
}

[data-theme="light"] .home-market-overview-card .home-mo-idx-symbol,
body.light-theme .home-market-overview-card .home-mo-idx-symbol {
  color: #0f172a !important;
}

.home-market-overview-card .home-mo-idx-price-pill {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  font-family: var(--font-mono, 'Inter', -apple-system, sans-serif) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  line-height: 1.25;
}

.home-market-overview-card .home-mo-idx-chg {
  font-size: 0.86rem !important;
  font-weight: 400 !important;
  font-family: var(--font-mono, 'Inter', -apple-system, sans-serif) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.home-market-overview-card .home-mo-badge-index,
.home-market-overview-card .home-mo-badge-mkt {
  font-size: 0.67rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.home-market-overview-card .home-mo-range-text,
.home-market-overview-card .home-mo-idx-range {
  font-size: 0.76rem !important;
  font-weight: 400 !important;
  font-family: var(--font-mono, 'Inter', -apple-system, sans-serif) !important;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted, #64748b) !important;
}

.home-market-overview-card .home-mo-range-text span,
.home-market-overview-card .home-mo-idx-range span {
  font-weight: 400 !important;
  color: #0284c7 !important;
}

[data-theme="dark"] .home-market-overview-card .home-mo-range-text span,
[data-theme="dark"] .home-market-overview-card .home-mo-idx-range span,
body:not([data-theme="light"]):not(.light-theme) .home-market-overview-card .home-mo-range-text span {
  color: #38bdf8 !important;
}

.home-market-overview-card .home-mo-idx-fullname {
  font-size: 1.10rem !important;
  font-weight: 600 !important;
  font-family: var(--font-sans, 'Inter', -apple-system, sans-serif) !important;
  color: var(--text-secondary, #475569) !important;
}

.home-market-overview-card .home-mo-idx-volume {
  font-size: 0.90rem !important;
  font-weight: 500 !important;
  font-family: var(--font-mono, 'Inter', -apple-system, sans-serif) !important;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted, #64748b) !important;
}

.home-market-overview-card .home-mo-idx-volume strong,
.home-market-overview-card .home-mo-idx-volume span {
  font-weight: 700 !important;
  color: var(--text-primary, #0f172a) !important;
  font-family: var(--font-mono, 'Inter', -apple-system, sans-serif) !important;
}

[data-theme="dark"] .home-market-overview-card .home-mo-idx-volume strong,
[data-theme="dark"] .home-market-overview-card .home-mo-idx-volume span,
body:not([data-theme="light"]):not(.light-theme) .home-market-overview-card .home-mo-idx-volume strong,
body:not([data-theme="light"]):not(.light-theme) .home-market-overview-card .home-mo-idx-volume span {
  color: #f8fafc !important;
}

.home-market-overview-card .home-mo-subgroup-title {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: var(--text-primary, #0f172a) !important;
  letter-spacing: -0.01em;
}

[data-theme="light"] .home-market-overview-card .home-mo-subgroup-title,
body.light-theme .home-market-overview-card .home-mo-subgroup-title {
  color: #0f172a !important;
}

.home-market-overview-card .home-mo-badge-btn {
  font-size: 0.74rem !important;
  font-weight: 600 !important;
}

.home-market-overview-card .home-mo-legend-item {
  font-size: 0.76rem !important;
  font-weight: 600 !important;
}

.home-market-overview-card .home-mo-count {
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

.home-market-overview-card .home-mo-metric-label {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #64748b) !important;
}

.home-market-overview-card .home-mo-metric-val {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: var(--text-primary, #0f172a) !important;
  letter-spacing: -0.02em;
}

[data-theme="light"] .home-market-overview-card .home-mo-metric-val,
body.light-theme .home-market-overview-card .home-mo-metric-val {
  color: #0f172a !important;
}

.home-market-overview-card:hover {
  border-color: rgba(56, 189, 248, 0.25);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.32);
}

.home-mo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.home-mo-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.home-mo-logo-wrapper {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  padding: 2px;
}

.home-mo-img-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 7px;
}

.home-mo-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.home-mo-title {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--text-primary, #f8fafc);
  margin: 0;
  letter-spacing: -0.02em;
}

.home-mo-subtitle {
  font-size: 0.72rem;
  color: var(--text-muted, #94a3b8);
  font-weight: 400 !important;
}

.home-mo-action-badges {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.home-mo-badge-btn {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 20px;
  padding: 4px 11px;
  font-size: 0.75rem;
  font-weight: 400 !important;
  color: #e2e8f0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

/* Stocks & Sectors Theme-Adaptive Badges (Dark Mode) */
.home-mo-badge-btn.home-mo-btn-stocks,
.home-mo-badge-btn.home-mo-btn-sectors {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-accent) 35%, transparent);
  color: var(--text-primary);
}

.home-mo-badge-btn.home-mo-btn-stocks .home-mo-chevron,
.home-mo-badge-btn.home-mo-btn-sectors .home-mo-chevron {
  color: var(--color-accent);
}

.home-mo-badge-btn.home-mo-btn-stocks:hover,
.home-mo-badge-btn.home-mo-btn-sectors:hover {
  background: var(--color-accent-grad, var(--color-accent));
  border-color: var(--color-accent);
  color: var(--color-accent-text, #ffffff);
  transform: translateY(-1.5px);
  box-shadow: var(--shadow-glow, 0 4px 12px rgba(0, 0, 0, 0.3));
}

.home-mo-badge-btn.home-mo-btn-stocks:hover .home-mo-chevron,
.home-mo-badge-btn.home-mo-btn-sectors:hover .home-mo-chevron {
  color: var(--color-accent-text, #ffffff);
  transform: translateX(2px);
  opacity: 1;
}

.home-mo-badge-btn:hover .home-mo-chevron {
  transform: translateX(2px);
  opacity: 1;
}

.home-mo-badge-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.home-mo-badge-icon {
  font-size: 0.76rem;
  line-height: 1;
}

.home-mo-chevron {
  font-size: 0.95rem;
  font-weight: 400 !important;
  line-height: 1;
  opacity: 0.8;
  transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease;
}

/* ==========================================================================
   MARKET OVERVIEW: BENCHMARK INDEX CAROUSEL & CARD
   ========================================================================== */
.home-mo-index-carousel-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}

/* Redesigned left/right arrows without background */
.home-mo-carousel-arrow {
  width: 24px;
  height: 100%;
  min-height: 44px;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none;
  color: var(--text-muted, #94a3b8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: color 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
  flex-shrink: 0;
  user-select: none;
  opacity: 0.65;
}

.home-mo-carousel-arrow svg {
  display: block;
  stroke: currentColor;
  transition: transform 0.18s ease;
}

.home-mo-carousel-arrow:hover {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--color-accent, #38bdf8) !important;
  opacity: 1;
}

.home-mo-carousel-arrow.arrow-left:hover svg {
  transform: translateX(-2.5px);
}

.home-mo-carousel-arrow.arrow-right:hover svg {
  transform: translateX(2.5px);
}

.home-mo-carousel-arrow:active {
  transform: scale(0.92);
}

[data-theme="light"] .home-mo-carousel-arrow,
body.light-theme .home-mo-carousel-arrow,
[data-theme-mode="light"] .home-mo-carousel-arrow {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #64748b !important;
}

[data-theme="light"] .home-mo-carousel-arrow:hover,
body.light-theme .home-mo-carousel-arrow:hover,
[data-theme-mode="light"] .home-mo-carousel-arrow:hover {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #0284c7 !important;
}

.home-mo-index-card {
  flex: 1;
  min-width: 0;
  background: var(--bg-surface, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  padding: 0.85rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  position: relative;
}

.home-mo-index-card:focus-visible,
.home-mo-index-card:hover {
  border-color: rgba(56, 189, 248, 0.35);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Header Index Tabs - Theme-Adaptive Pill Design (Matches Stocks & Sectors Badges) */
.home-mo-header-idx-tabs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-wrap: wrap;
}

.home-mo-idx-tab {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
  border-radius: 20px;
  padding: 4px 11px;
  font-size: 0.76rem;
  font-weight: 600 !important;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  line-height: 1.2;
}

.home-mo-idx-tab:hover {
  background: color-mix(in srgb, var(--color-accent) 24%, transparent);
  border-color: var(--color-accent);
  color: var(--text-primary);
  transform: translateY(-1.5px);
  box-shadow: var(--shadow-glow, 0 4px 12px rgba(0, 0, 0, 0.3));
}

.home-mo-idx-tab.active {
  background: var(--color-accent-grad, var(--color-accent)) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-accent-text, #ffffff) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow, 0 4px 12px rgba(0, 0, 0, 0.3)) !important;
}

.home-mo-idx-tab.active:hover {
  background: var(--color-accent-grad, var(--color-accent)) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-accent-text, #ffffff) !important;
  transform: translateY(-1.5px);
  box-shadow: var(--shadow-glow, 0 6px 14px rgba(0, 0, 0, 0.38)) !important;
}

.home-mo-idx-tab:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Index Card Top Split: Left (Symbol/Name/Volume) & Right (Price/Change) - Balanced Typography */
.home-mo-idx-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
}

.home-mo-idx-left {
  display: flex;
  flex-direction: column;
  gap: 0.20rem;
  min-width: 0;
  flex: 1;
}

.home-mo-idx-header {
  display: flex;
  align-items: baseline;
  gap: 0.40rem;
  flex-wrap: wrap;
  line-height: 1.25;
}

.home-mo-idx-symbol {
  font-size: 1.20rem !important;
  font-weight: 700 !important;
  color: var(--text-primary, #f8fafc);
  letter-spacing: -0.015em;
  font-family: var(--font-sans, 'Inter', -apple-system, sans-serif) !important;
}

.home-mo-idx-divider {
  color: var(--text-muted, #94a3b8);
  font-size: 0.75rem;
  font-weight: 600;
  user-select: none;
  opacity: 0.7;
}

.home-mo-idx-fullname {
  font-size: 0.90rem !important;
  font-weight: 450 !important;
  color: var(--text-muted, #94a3b8);
  font-family: var(--font-sans, 'Inter', -apple-system, sans-serif) !important;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-mo-idx-volume-row {
  display: flex;
  align-items: baseline;
  gap: 0.40rem;
  line-height: 1.2;
}

.home-mo-idx-vol-label {
  font-size: 0.80rem !important;
  font-weight: 500 !important;
  color: var(--text-muted, #94a3b8);
  font-family: var(--font-sans, 'Inter', -apple-system, sans-serif) !important;
}

.home-mo-idx-volume {
  font-size: 0.92rem !important;
  color: var(--text-primary, #f8fafc) !important;
  font-weight: 600 !important;
  font-family: var(--font-mono, 'Inter', -apple-system, sans-serif) !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.home-mo-idx-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 0.15rem;
  flex-shrink: 0;
}

.home-mo-idx-hero-price,
.home-mo-idx-price-pill {
  font-size: 1.38rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
  font-family: var(--font-mono, 'Inter', -apple-system, sans-serif) !important;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  color: var(--text-primary, #f8fafc);
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  text-align: right;
}

.home-mo-idx-hero-price.bullish,
.home-mo-idx-price-pill.bullish {
  color: #10b981 !important;
}

.home-mo-idx-hero-price.bearish,
.home-mo-idx-price-pill.bearish {
  color: #ef4444 !important;
}

.home-mo-idx-hero-price.neutral,
.home-mo-idx-price-pill.neutral {
  color: #94a3b8 !important;
}

.home-mo-idx-hero-chg,
.home-mo-idx-chg {
  font-size: 0.86rem !important;
  font-weight: 500 !important;
  font-family: var(--font-mono, 'Inter', -apple-system, sans-serif) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
  line-height: 1.2;
  text-align: right;
}

.home-mo-idx-hero-chg.bullish,
.home-mo-idx-chg.bullish {
  color: #10b981 !important;
}

.home-mo-idx-hero-chg.bearish,
.home-mo-idx-chg.bearish {
  color: #ef4444 !important;
}

.home-mo-idx-hero-chg.neutral,
.home-mo-idx-chg.neutral {
  color: #94a3b8 !important;
}

/* Sub-Metrics Grid: Open, Low, High (Centered, Crisp & Balanced) */
.home-mo-idx-submetrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.70rem;
  padding-top: 0.15rem;
  border: none !important;
}

.home-mo-submetric-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.15rem;
  min-width: 0;
}

.home-mo-submetric-label {
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  color: var(--text-muted, #94a3b8) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
}

.home-mo-submetric-val {
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: var(--text-primary, #f8fafc) !important;
  font-family: var(--font-mono, 'Inter', -apple-system, sans-serif) !important;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  text-align: center;
  letter-spacing: -0.01em;
}

.home-mo-submetric-diff {
  font-size: 0.76rem !important;
  font-weight: 500 !important;
  font-family: var(--font-mono, 'Inter', -apple-system, sans-serif) !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1.2;
  text-align: center;
}

.home-mo-submetric-diff.bullish {
  color: #10b981 !important;
}

.home-mo-submetric-diff.bearish {
  color: #ef4444 !important;
}

.home-mo-submetric-diff.neutral {
  color: #94a3b8 !important;
}

/* Light Theme Overrides */
[data-theme="light"] .home-mo-index-card,
body.light-theme .home-mo-index-card,
[data-theme-mode="light"] .home-mo-index-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .home-mo-idx-symbol,
body.light-theme .home-mo-idx-symbol,
[data-theme-mode="light"] .home-mo-idx-symbol {
  color: #0f172a !important;
  font-weight: 700 !important;
}

[data-theme="light"] .home-mo-idx-divider,
body.light-theme .home-mo-idx-divider,
[data-theme-mode="light"] .home-mo-idx-divider {
  color: #94a3b8 !important;
}

[data-theme="light"] .home-mo-idx-fullname,
body.light-theme .home-mo-idx-fullname,
[data-theme-mode="light"] .home-mo-idx-fullname {
  color: #64748b !important;
  font-weight: 450 !important;
}

[data-theme="light"] .home-mo-idx-vol-label,
body.light-theme .home-mo-idx-vol-label,
[data-theme-mode="light"] .home-mo-idx-vol-label {
  color: #64748b !important;
  font-weight: 500 !important;
}

[data-theme="light"] .home-mo-idx-volume,
body.light-theme .home-mo-idx-volume,
[data-theme-mode="light"] .home-mo-idx-volume {
  color: #1e293b !important;
  font-weight: 600 !important;
}

[data-theme="light"] .home-mo-submetric-label,
body.light-theme .home-mo-submetric-label,
[data-theme-mode="light"] .home-mo-submetric-label {
  color: #64748b !important;
}

[data-theme="light"] .home-mo-submetric-val,
body.light-theme .home-mo-submetric-val,
[data-theme-mode="light"] .home-mo-submetric-val {
  color: #0f172a !important;
  font-weight: 600 !important;
}

[data-theme="light"] .home-mo-badge-index,
body.light-theme .home-mo-badge-index,
[data-theme-mode="light"] .home-mo-badge-index {
  background: rgba(37, 99, 235, 0.08) !important;
  color: #2563eb !important;
  font-weight: 700 !important;
}

[data-theme="light"] .home-mo-badge-mkt,
body.light-theme .home-mo-badge-mkt,
[data-theme-mode="light"] .home-mo-badge-mkt {
  background: rgba(100, 116, 139, 0.08) !important;
  color: #475569 !important;
  font-weight: 700 !important;
}

[data-theme="light"] .home-mo-idx-price-pill.bearish,
body.light-theme .home-mo-idx-price-pill.bearish,
[data-theme-mode="light"] .home-mo-idx-price-pill.bearish {
  background: transparent !important;
  border: none !important;
  color: #dc2626 !important;
}

[data-theme="light"] .home-mo-idx-price-pill.bullish,
body.light-theme .home-mo-idx-price-pill.bullish,
[data-theme-mode="light"] .home-mo-idx-price-pill.bullish {
  background: transparent !important;
  border: none !important;
  color: #16a34a !important;
}

[data-theme="light"] .home-mo-idx-chg.bearish,
body.light-theme .home-mo-idx-chg.bearish,
[data-theme-mode="light"] .home-mo-idx-chg.bearish {
  color: #dc2626 !important;
}

[data-theme="light"] .home-mo-idx-chg.bullish,
body.light-theme .home-mo-idx-chg.bullish,
[data-theme-mode="light"] .home-mo-idx-chg.bullish {
  color: #16a34a !important;
}

.home-mo-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  text-align: center;
  padding: 0.55rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
}

[data-theme="light"] .home-mo-metrics-grid,
body.light-theme .home-mo-metrics-grid,
[data-theme-mode="light"] .home-mo-metrics-grid {
  border-color: rgba(203, 213, 225, 0.6);
  background: rgba(248, 250, 252, 0.8);
}

.home-mo-metric-box {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  align-items: center;
}

.home-mo-metric-label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #94a3b8);
  font-weight: 400 !important;
}

.home-mo-metric-val {
  font-size: 1.0rem;
  font-weight: 400 !important;
  color: var(--text-primary, #f8fafc);
  font-family: var(--font-numbers, monospace);
  letter-spacing: -0.01em;
}

.home-mo-subgroup {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: rgba(15, 23, 42, 0.4);
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.home-mo-subgroup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
}

.home-mo-subgroup-title {
  font-weight: 400 !important;
  color: var(--text-primary, #e2e8f0);
  cursor: pointer;
  transition: color 0.15s ease;
}

.home-mo-subgroup-title:hover {
  color: #38bdf8;
}

.home-mo-subgroup-link {
  color: var(--text-muted, #94a3b8);
  font-size: 0.74rem;
  font-weight: 400 !important;
  cursor: pointer;
  transition: color 0.15s ease;
}

.home-mo-subgroup-link:hover {
  color: #38bdf8;
}

.home-mo-breadth-track {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 5px;
  display: flex;
  overflow: hidden;
  gap: 2px;
}

.home-mo-bar-segment {
  height: 100%;
  transition: width 0.4s ease;
}

.home-mo-bar-segment.bar-up {
  background: #10b981;
}

.home-mo-bar-segment.bar-unchanged {
  background: #64748b;
}

.home-mo-bar-segment.bar-down {
  background: #ef4444;
}

.home-mo-breadth-legend {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.76rem;
  padding: 0 1px;
}

.home-mo-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 400 !important;
}

.home-mo-legend-item.legend-up {
  color: #10b981;
}

.home-mo-legend-item.legend-unchanged {
  color: #94a3b8;
}

.home-mo-legend-item.legend-down {
  color: #ef4444;
}

.home-mo-legend-item .home-mo-tri {
  font-size: 0.68rem;
}

.home-mo-legend-item .home-mo-count {
  font-weight: 400 !important;
  font-family: var(--font-numbers, monospace);
}

/* Light Theme Overrides for Market Overview Cards */
[data-theme="light"] .home-market-overview-card,
body.light-theme .home-market-overview-card,
[data-theme-mode="light"] .home-market-overview-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .home-mo-title,
body.light-theme .home-mo-title,
[data-theme-mode="light"] .home-mo-title {
  color: #0f172a !important;
}

[data-theme="light"] .home-mo-subtitle,
body.light-theme .home-mo-subtitle,
[data-theme-mode="light"] .home-mo-subtitle {
  color: #64748b !important;
}

[data-theme="light"] .home-mo-badge-btn,
body.light-theme .home-mo-badge-btn,
[data-theme-mode="light"] .home-mo-badge-btn {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #1e293b;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Stocks & Sectors & Index Tabs Theme-Adaptive Badges (Light Mode) */
[data-theme="light"] .home-mo-badge-btn.home-mo-btn-stocks,
body.light-theme .home-mo-badge-btn.home-mo-btn-stocks,
[data-theme-mode="light"] .home-mo-badge-btn.home-mo-btn-stocks,
[data-theme="light"] .home-mo-badge-btn.home-mo-btn-sectors,
body.light-theme .home-mo-badge-btn.home-mo-btn-sectors,
[data-theme-mode="light"] .home-mo-badge-btn.home-mo-btn-sectors,
[data-theme="light"] .home-mo-idx-tab,
body.light-theme .home-mo-idx-tab,
[data-theme-mode="light"] .home-mo-idx-tab {
  background: color-mix(in srgb, var(--color-accent) 8%, #ffffff) !important;
  border-color: color-mix(in srgb, var(--color-accent) 30%, transparent) !important;
  color: var(--color-accent) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .home-mo-badge-btn.home-mo-btn-stocks .home-mo-chevron,
body.light-theme .home-mo-badge-btn.home-mo-btn-stocks .home-mo-chevron,
[data-theme-mode="light"] .home-mo-badge-btn.home-mo-btn-stocks .home-mo-chevron,
[data-theme="light"] .home-mo-badge-btn.home-mo-btn-sectors .home-mo-chevron,
body.light-theme .home-mo-badge-btn.home-mo-btn-sectors .home-mo-chevron,
[data-theme-mode="light"] .home-mo-badge-btn.home-mo-btn-sectors .home-mo-chevron {
  color: var(--color-accent) !important;
}

[data-theme="light"] .home-mo-badge-btn.home-mo-btn-stocks:hover,
body.light-theme .home-mo-badge-btn.home-mo-btn-stocks:hover,
[data-theme-mode="light"] .home-mo-badge-btn.home-mo-btn-stocks:hover,
[data-theme="light"] .home-mo-badge-btn.home-mo-btn-sectors:hover,
body.light-theme .home-mo-badge-btn.home-mo-btn-sectors:hover,
[data-theme-mode="light"] .home-mo-badge-btn.home-mo-btn-sectors:hover,
[data-theme="light"] .home-mo-idx-tab:hover,
body.light-theme .home-mo-idx-tab:hover,
[data-theme-mode="light"] .home-mo-idx-tab:hover {
  background: var(--color-accent-grad, var(--color-accent)) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-accent-text, #ffffff) !important;
  box-shadow: var(--shadow-glow, 0 4px 12px rgba(0, 0, 0, 0.2)) !important;
}

[data-theme="light"] .home-mo-badge-btn.home-mo-btn-stocks:hover .home-mo-chevron,
body.light-theme .home-mo-badge-btn.home-mo-btn-stocks:hover .home-mo-chevron,
[data-theme-mode="light"] .home-mo-badge-btn.home-mo-btn-stocks:hover .home-mo-chevron,
[data-theme="light"] .home-mo-badge-btn.home-mo-btn-sectors:hover .home-mo-chevron,
body.light-theme .home-mo-badge-btn.home-mo-btn-sectors:hover .home-mo-chevron,
[data-theme-mode="light"] .home-mo-badge-btn.home-mo-btn-sectors:hover .home-mo-chevron {
  color: var(--color-accent-text, #ffffff) !important;
}

[data-theme="light"] .home-mo-idx-tab.active,
body.light-theme .home-mo-idx-tab.active,
[data-theme-mode="light"] .home-mo-idx-tab.active {
  background: var(--color-accent-grad, var(--color-accent)) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-accent-text, #ffffff) !important;
  box-shadow: var(--shadow-glow, 0 4px 12px rgba(0, 0, 0, 0.2)) !important;
}

[data-theme="light"] .home-mo-idx-tab.active:hover,
body.light-theme .home-mo-idx-tab.active:hover,
[data-theme-mode="light"] .home-mo-idx-tab.active:hover {
  transform: translateY(-1.5px);
  box-shadow: var(--shadow-glow, 0 6px 14px rgba(0, 0, 0, 0.25)) !important;
}

[data-theme="light"] .home-mo-metric-label,
body.light-theme .home-mo-metric-label,
[data-theme-mode="light"] .home-mo-metric-label {
  color: #64748b !important;
}

[data-theme="light"] .home-mo-metric-val,
body.light-theme .home-mo-metric-val,
[data-theme-mode="light"] .home-mo-metric-val {
  color: #0f172a !important;
}

/* Light Theme Stocks & Sectors Overview Subgroup Containers */
[data-theme="light"] .home-mo-subgroup,
body.light-theme .home-mo-subgroup,
[data-theme-mode="light"] .home-mo-subgroup {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .home-mo-subgroup-title,
body.light-theme .home-mo-subgroup-title,
[data-theme-mode="light"] .home-mo-subgroup-title {
  color: #0f172a !important;
}

[data-theme="light"] .home-mo-subgroup-link,
body.light-theme .home-mo-subgroup-link,
[data-theme-mode="light"] .home-mo-subgroup-link {
  color: #64748b !important;
}

[data-theme="light"] .home-mo-subgroup-link:hover,
body.light-theme .home-mo-subgroup-link:hover,
[data-theme-mode="light"] .home-mo-subgroup-link:hover {
  color: #0284c7 !important;
}

[data-theme="light"] .home-mo-breadth-track,
body.light-theme .home-mo-breadth-track,
[data-theme-mode="light"] .home-mo-breadth-track {
  background: #e2e8f0 !important;
}

[data-theme="light"] .home-mo-legend-item.legend-unchanged,
body.light-theme .home-mo-legend-item.legend-unchanged,
[data-theme-mode="light"] .home-mo-legend-item.legend-unchanged {
  color: #64748b !important;
}

[data-theme="light"] .home-mo-legend-item.legend-up,
body.light-theme .home-mo-legend-item.legend-up,
[data-theme-mode="light"] .home-mo-legend-item.legend-up {
  color: #16a34a !important;
}

[data-theme="light"] .home-mo-legend-item.legend-down,
body.light-theme .home-mo-legend-item.legend-down,
[data-theme-mode="light"] .home-mo-legend-item.legend-down {
  color: #dc2626 !important;
}

@media (max-width: 640px) {
  .home-mo-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .home-mo-action-badges {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ========================================================================
   HIGH PERFORMANCE BROWSER ENGINE OPTIMIZATIONS (GPU ACCELERATION & LAZY LAYOUT)
   ======================================================================== */
.view-container:not(.active) {
  content-visibility: hidden;
  contain-intrinsic-size: 0 0;
}

.macro-mover-card,
.mover-item-card,
.stock-row,
.payout-stock-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 72px;
}

/* Hardware accelerated transitions for smooth 60/120fps rendering */
.macro-mover-card,
.mover-item-card,
.pos-price-badge,
.stock-row {
  transform: translateZ(0);
  backface-visibility: hidden;
}


/* ========================================================================
   WATCHLIST CARD REDESIGN & REAL-TIME PRICE TARGET POP-UP ALERTS
   ======================================================================== */

/* Watchlist card Lower Lock and Upper Cap styling */
.watchlist-stock-card .lower-lock-val {
  color: #f43f5e !important;
  font-weight: 700 !important;
  font-family: var(--font-mono, monospace);
}

.watchlist-stock-card .upper-cap-val {
  color: #10b981 !important;
  font-weight: 700 !important;
  font-family: var(--font-mono, monospace);
}

.watchlist-stock-card .pos-header-left-row2 {
  margin-top: 1px;
  margin-bottom: 2px;
}

.watchlist-stock-card .pos-header-left-row3 {
  margin-top: 2px;
}

.watchlist-stock-card .pos-header-right-row3 {
  font-size: 0.72rem !important;
  font-family: var(--font-mono, monospace) !important;
  font-weight: 600 !important;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: flex-end;
}

/* REAL-TIME PRICE TARGET POPUP ALERT HUB */
#price-alert-popup-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 380px;
  width: calc(100vw - 48px);
  pointer-events: none;
}

.price-alert-card {
  pointer-events: auto;
  position: relative;
  border-radius: 14px;
  padding: 14px 16px;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #f8fafc;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  animation: slideInRightAlert 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: transform 0.2s ease, opacity 0.25s ease;
}

[data-theme="light"] .price-alert-card,
body.light-theme .price-alert-card {
  background: rgba(255, 255, 255, 0.96);
  color: #0f172a;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.price-alert-card.alert-buy {
  border-left: 4px solid #10b981;
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.25);
}

.price-alert-card.alert-sell {
  border-left: 4px solid #f59e0b;
  box-shadow: 0 10px 30px rgba(245, 158, 11, 0.25);
}

.price-alert-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.price-alert-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
}

.price-alert-type-badge.buy {
  background: rgba(16, 185, 129, 0.16);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.price-alert-type-badge.sell {
  background: rgba(245, 158, 11, 0.16);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.price-alert-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  animation: alertPulse 1.2s infinite;
}

.price-alert-type-badge.buy .price-alert-pulse-dot {
  background: #10b981;
}

.price-alert-type-badge.sell .price-alert-pulse-dot {
  background: #f59e0b;
}

.price-alert-close-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.15s ease, background 0.15s ease;
}

.price-alert-close-btn:hover {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.1);
}

.price-alert-sym-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.price-alert-symbol {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary, #ffffff);
}

[data-theme="light"] .price-alert-symbol,
body.light-theme .price-alert-symbol {
  color: #0f172a !important;
}

.price-alert-price-badge {
  font-size: 0.88rem;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  padding: 2px 8px;
  border-radius: 6px;
}

.price-alert-price-badge.buy {
  background: rgba(16, 185, 129, 0.18);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.price-alert-price-badge.sell {
  background: rgba(245, 158, 11, 0.18);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.price-alert-company {
  font-size: 0.76rem;
  color: #94a3b8;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.price-alert-target-info {
  font-size: 0.82rem;
  line-height: 1.35;
  color: #cbd5e1;
  margin-bottom: 6px;
}

.price-alert-card.buttonless-alert-card {
  padding: 12px 14px 14px 14px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.price-alert-card.buttonless-alert-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}

.price-alert-card.buttonless-alert-card .price-alert-target-info {
  margin-bottom: 4px;
}

[data-theme="light"] .price-alert-target-info,
body.light-theme .price-alert-target-info {
  color: #334155;
}

.price-alert-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.price-alert-action-btn {
  flex: 1;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.price-alert-action-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

.price-alert-action-btn.view-btn {
  background: rgba(148, 163, 184, 0.18);
  color: #e2e8f0;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

[data-theme="light"] .price-alert-action-btn.view-btn,
body.light-theme .price-alert-action-btn.view-btn {
  background: #f1f5f9;
  color: #1e293b;
  border-color: #cbd5e1;
}

.price-alert-action-btn.trade-btn.buy {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
}

.price-alert-action-btn.trade-btn.sell {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
}

.price-alert-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
}

.price-alert-progress-bar {
  height: 100%;
  width: 100%;
  transform-origin: left;
  animation: alertProgress 9s linear forwards;
}

.price-alert-card.alert-buy .price-alert-progress-bar {
  background: #10b981;
}

.price-alert-card.alert-sell .price-alert-progress-bar {
  background: #f59e0b;
}

@keyframes slideInRightAlert {
  from {
    transform: translateX(110%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

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

@keyframes alertProgress {
  from { width: 100%; }
  to { width: 0%; }
}


/* ================= BUY ALERT BADGE (TERMINAL TRENDING CARDS & SCANNER) ================= */
.buy-alert-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3.5px;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff !important;
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  line-height: 1.2;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  animation: buyBadgeGlow 2.5s infinite ease-in-out;
}

.buy-alert-badge:hover {
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.65);
  transform: translateY(-1px);
}

.buy-alert-badge .buy-icon {
  font-size: 0.72rem;
  line-height: 1;
}

@keyframes buyBadgeGlow {
  0%, 100% {
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
  50% {
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  }
}

[data-theme="light"] .buy-alert-badge,
body.light-theme .buy-alert-badge {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
}

/* ========================================================================
   GLOBAL FOOTER (CAPITAL MIDWAY STOCK MARKETS OS)
   ======================================================================== */
.app-global-footer {
  width: 100%;
  background: var(--bg-card);
  border-top: 1px solid var(--border-subtle);
  margin-top: 2.5rem;
  padding: 2.25rem 1.25rem 1.75rem;
  box-sizing: border-box;
  color: var(--text-secondary);
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  position: relative;
  z-index: 10;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.15rem;
}

.footer-brand-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.footer-brand-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
}

.footer-brand-logo {
  width: 32px;
  height: 32px;
  background: var(--color-accent-grad, linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%));
  border-radius: var(--radius-md, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  font-size: 1.1rem;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.footer-brand-titles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  line-height: 1.1;
}

.footer-brand-name {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  text-transform: none !important;
}

.footer-brand-sub {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent, #3b82f6);
  margin-top: 2px;
}

.footer-tagline {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin: 0.35rem 0 0 0;
  max-width: 700px;
  line-height: 1.5;
}

.footer-nav-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin: 0.25rem 0;
}

.footer-nav-link {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  transition: color 0.2s ease;
  cursor: pointer;
}

.footer-nav-link:hover {
  color: var(--color-accent, #3b82f6);
  text-decoration: underline;
}

.footer-nav-divider {
  color: var(--border-subtle, #334155);
  font-size: 0.8rem;
  user-select: none;
}

.footer-disclaimer-box {
  background: var(--bg-secondary, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-md, 8px);
  padding: 0.85rem 1.25rem;
  max-width: 820px;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  text-align: left;
  line-height: 1.45;
  box-sizing: border-box;
}

.footer-disclaimer-icon {
  font-size: 1.15rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.footer-disclaimer-text {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
}

.footer-disclaimer-text strong {
  color: var(--text-secondary);
  font-weight: 600;
}

.footer-bottom-bar {
  font-size: 0.78rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border-subtle);
  padding-top: 0.85rem;
  width: 100%;
}

.footer-domain-link {
  color: var(--color-accent, #3b82f6);
  font-weight: 600;
  text-decoration: none;
}

.footer-domain-link:hover {
  text-decoration: underline;
}

/* Modal for Footer Info (Risk, Terms, About, Contact) */
.footer-info-dialog {
  max-width: 650px;
  width: 90%;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.footer-info-tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
  padding: 0.75rem 1.25rem 0;
  background: var(--bg-secondary, rgba(0, 0, 0, 0.1));
}

.footer-info-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.5rem 0.75rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.footer-info-tab-btn.active {
  color: var(--color-accent, #3b82f6);
  border-bottom-color: var(--color-accent, #3b82f6);
}

.footer-info-pane {
  display: none;
  padding: 1.25rem 1.5rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.footer-info-pane.active {
  display: block;
}

.footer-info-pane h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.15rem;
  color: var(--text-primary);
}

.footer-info-pane p {
  margin: 0 0 0.75rem 0;
}

.footer-info-pane ul {
  margin: 0.5rem 0 0.75rem 1.25rem;
  padding: 0;
}

.footer-info-pane li {
  margin-bottom: 0.35rem;
}

@media (max-width: 767px) {
  .app-global-footer {
    padding-bottom: calc(var(--bottom-nav-height, 60px) + 2rem);
  }
}


/* =============================================================================
   CAPITAL MIDWAY BRAND ASSETS & TRANSPARENT LOGO SYSTEM
   ============================================================================= */
.brand-logo {
  width: 38px;
  height: 38px;
  background: transparent !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
  box-shadow: none !important;
  flex-shrink: 0;
  padding: 0 !important;
}

.brand-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4));
}

.brand-title-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 38px;
  padding: 1px 0;
  box-sizing: border-box;
  width: fit-content;
}

.brand-title {
  font-size: 1.32rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0;
  padding: 0;
  line-height: 1.05;
  white-space: nowrap;
  text-transform: none !important;
}

.brand-subtitle {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.215em !important;
  margin-right: -0.215em;
  text-transform: uppercase;
  color: var(--color-accent, #3b82f6);
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding: 0;
  line-height: 1;
  white-space: nowrap;
  display: block;
  width: 100%;
}

.footer-brand-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.footer-brand-logo {
  width: 38px;
  height: 38px;
  background: transparent !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
  flex-shrink: 0;
  box-shadow: none !important;
  padding: 0 !important;
}

.footer-brand-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

.footer-brand-titles {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 38px;
  padding: 1px 0;
  box-sizing: border-box;
  width: fit-content;
}

.footer-brand-name {
  font-size: 1.32rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  text-transform: none !important;
  line-height: 1.05;
  white-space: nowrap;
}

.footer-brand-sub {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.215em !important;
  margin-right: -0.215em;
  text-transform: uppercase;
  color: var(--color-accent, #3b82f6);
  line-height: 1;
  white-space: nowrap;
  display: block;
  width: 100%;
}

.auth-brand-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.25rem;
  padding: 0.5rem 0;
  background: transparent !important;
  border-radius: 0 !important;
  border: none !important;
}

.auth-brand-img {
  max-width: 220px;
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
}

.about-hero-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 1.25rem 0.5rem;
  margin-bottom: 1.25rem;
  box-shadow: none !important;
  border: none !important;
}

.about-hero-img {
  max-width: 290px;
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}

/* Light / Dark Mode Logo Adaptations */
.realmidway-logo-dark {
  display: block;
}
.realmidway-logo-light {
  display: none;
}

[data-theme="light"] .realmidway-logo-dark {
  display: none !important;
}
[data-theme="light"] .realmidway-logo-light {
  display: block !important;
}

/* ========================================================================
   QUANTITATIVE STRATEGY BUTTON GROUP (PURE INSTITUTIONAL ALPHA ENGINES)
   ======================================================================== */
.research-strat-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle, rgba(226, 232, 240, 0.6));
}

.research-strat-btn {
  position: relative;
  overflow: hidden;
  background: var(--bg-secondary, #f8fafc);
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: 8px;
  padding: 6px 14px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary, #475569);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  user-select: none;
}

.research-strat-btn .strat-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted, #94a3b8);
  transition: all 0.22s ease;
}

.research-strat-btn:hover {
  transform: translateY(-1.5px);
  border-color: #3b82f6;
  color: var(--text-primary, #0f172a);
  background: var(--bg-card, #ffffff);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.research-strat-btn.active {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.14) 0%, rgba(37, 99, 235, 0.06) 100%), var(--bg-card, #ffffff);
  border-color: #3b82f6;
  color: #1d4ed8;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.22);
}

.research-strat-btn.active .strat-dot {
  background: #2563eb;
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.7);
}

/* Dark mode styling */
[data-theme="dark"] .research-strat-btn {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.09);
  color: #94a3b8;
}

[data-theme="dark"] .research-strat-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #60a5fa;
  color: #f8fafc;
  box-shadow: 0 4px 12px rgba(96, 165, 250, 0.25);
}

[data-theme="dark"] .research-strat-btn.active {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.26) 0%, rgba(37, 99, 235, 0.12) 100%), #1e293b;
  border-color: #60a5fa;
  color: #93c5fd;
  box-shadow: 0 3px 12px rgba(59, 130, 246, 0.35);
}

[data-theme="dark"] .research-strat-btn.active .strat-dot {
  background: #60a5fa;
  box-shadow: 0 0 10px rgba(96, 165, 250, 0.9);
}


/* ========================================================================
   AUTHENTICATION MODAL REFINED SPACING & DESIGN (CAPITAL MIDWAY)
   ======================================================================== */
.modal-dialog.auth-dialog {
  max-width: 580px;
  width: 95%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
}

.modal-dialog.auth-dialog .modal-header {
  padding: 0.9rem 1.4rem;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-primary);
}

.modal-dialog.auth-dialog .modal-body {
  padding: 1.5rem 1.75rem 2rem 1.75rem;
}

.auth-brand-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.25rem 0 1.5rem 0;
  padding: 0;
  background: transparent !important;
}

.auth-brand-img {
  max-width: 195px;
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
}

.auth-form-clean {
  max-width: 440px;
  margin: 0 auto;
  width: 100%;
}

.auth-form-clean .auth-field-group {
  margin-bottom: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.auth-form-clean .auth-field-group label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.auth-form-clean .input-clean {
  padding: 0.7rem 0.95rem;
  font-size: 0.92rem;
  border-radius: 9px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.auth-form-clean .input-clean:focus {
  outline: none;
  border-color: var(--color-accent, #d97706);
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.16);
  background: var(--bg-card, var(--bg-primary));
}

.auth-forgot-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.45rem;
  margin-bottom: 0.2rem;
}

.auth-forgot-link {
  background: transparent !important;
  border: none !important;
  color: var(--color-accent, #c9933e) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  cursor: pointer;
  padding: 2px 4px !important;
  text-decoration: none !important;
  transition: all 0.2s ease;
  line-height: 1.2;
}

.auth-forgot-link:hover {
  color: var(--color-accent-hover, #e0a349) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  opacity: 0.9;
}

.auth-submit-btn {
  margin-top: 0.85rem;
  width: 100%;
  padding: 0.75rem 1.25rem;
  font-size: 0.94rem;
  font-weight: 800;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  box-shadow: var(--shadow-glow, 0 4px 15px rgba(217, 119, 6, 0.28));
  transition: all 0.2s ease;
}

.auth-submit-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.auth-submit-btn:active {
  transform: translateY(0);
}