/*
 * NepseIQ — Premium Fintech Design System v2.0
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 
 * Design Direction: Bloomberg clarity, TradingView usability,
 * Robinhood smoothness, Zerodha simplicity.
 * 
 * NOT a generic AI dashboard. A serious NEPSE fintech product.
 */

/* ═══ Design Tokens ═══ */
:root {
    /* Core Palette — Deep Professional */
    --bg-primary: #0a0e1a;
    --bg-secondary: #111827;
    --bg-card: #151c2c;
    --bg-card-solid: #151c2c;
    --bg-card-hover: #1a2236;
    --bg-input: #0f1525;
    --bg-elevated: #1e2740;
    --bg-surface: #131a2b;
    
    /* Borders */
    --border-color: rgba(255, 255, 255, 0.07);
    --border-subtle: rgba(255, 255, 255, 0.04);
    --border-glow: rgba(37, 99, 235, 0.3);
    --border-hover: rgba(37, 99, 235, 0.2);
    
    /* Text Hierarchy */
    --text-primary: #e5e7eb;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;
    --text-dim: #4b5563;
    
    /* Accent System — Controlled, Professional */
    --accent-blue: #2563eb;
    --accent-blue-light: #93c5fd;   /* light-on-dark blue text (replaces stray #a5b4fc) */
    --accent-cyan: #0891b2;
    --accent-purple: #7c3aed;
    --accent-green: #059669;
    --accent-red: #dc2626;
    --accent-yellow: #d97706;
    --accent-orange: #ea580c;
    --accent-emerald: #10b981;
    --accent-rose: #e11d48;
    
    /* Market Colors */
    --market-up: #10b981;
    --market-down: #ef4444;
    /* Solid fills for .pct-pill — deeper than the text colours above so white
       text on top stays legible (the plain --market-* tones are tuned for
       text ON the background, not as a background). */
    --pill-up: #0f9d76;
    --pill-down: #d64545;
    --market-neutral: #6b7280;
    --market-up-bg: rgba(16, 185, 129, 0.08);
    --market-down-bg: rgba(239, 68, 68, 0.08);
    
    /* Gradients — Subtle, not garish */
    --gradient-brand: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
    --gradient-hero: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
    --gradient-green: linear-gradient(135deg, #059669 0%, #10b981 100%);
    --gradient-red: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
    --gradient-gold: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
    --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.005) 100%);
    --gradient-card-border: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(124,58,237,0.08));
    
    /* Heatmap */
    --heat-n5: #991b1b;
    --heat-n4: #b91c1c;
    --heat-n3: #dc2626;
    --heat-n2: #ef4444;
    --heat-n1: #f87171;
    --heat-0: #1e293b;
    --heat-p1: #34d399;
    --heat-p2: #10b981;
    --heat-p3: #059669;
    --heat-p4: #047857;
    --heat-p5: #065f46;
    
    /* Typography */
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
    
    /* Spacing */
    --nav-height: 56px;
    --mobile-nav-height: 56px;
    /* Data-dense terminal, not an article — a 1360px cap left ~75px of dead
       space either side on a 1512px laptop while tables stayed cramped.
       TradingView/Binance run effectively full-bleed for the same reason. */
    --container-max: 1800px;
    --radius: 8px;
    --radius-sm: 6px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.25);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.3);
    --shadow-card: 0 1px 3px rgba(0,0,0,0.2), 0 0 0 1px var(--border-color);

    /* Semantic surface overlays — replace scattered rgba(255,255,255,x) so
       surfaces invert correctly between themes. Dark = light film on dark bg. */
    --surface-1: rgba(255,255,255,0.02);
    --surface-2: rgba(255,255,255,0.04);
    --surface-3: rgba(255,255,255,0.06);
    --surface-4: rgba(255,255,255,0.09);

    /* Chrome surfaces (translucent, blurred) */
    --nav-bg: rgba(10,14,26,0.92);
    --overlay-scrim: rgba(10,14,26,0.85);

    /* Transitions */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;
    --nav-indicator-duration: 350ms;
}

/* ═══ Light theme ═══ (applied via data-theme="light" on <html>) */
:root[data-theme="light"] {
    --bg-primary: #f7f8fa;
    --bg-secondary: #eef1f5;
    --bg-card: #ffffff;
    --bg-card-solid: #ffffff;
    --bg-card-hover: #f4f6f9;
    --bg-input: #ffffff;
    --bg-elevated: #ffffff;
    --bg-surface: #f4f6f9;

    --border-color: rgba(17,24,39,0.10);
    --border-subtle: rgba(17,24,39,0.06);
    --border-glow: rgba(37,99,235,0.35);
    --border-hover: rgba(37,99,235,0.28);

    --text-primary: #111827;   /* near-black, never pure */
    --text-secondary: #4b5563;
    --text-muted: #6b7280;
    --text-dim: #9aa3b0;

    /* Accents nudged for contrast on white */
    --accent-blue: #2563eb;
    --accent-blue-light: #1d4ed8;   /* readable blue text on light */
    --accent-purple: #7c3aed;
    --accent-green: #059669;
    --accent-red: #dc2626;

    --market-up: #059669;
    --market-down: #dc2626;
    --pill-up: #047857;
    --pill-down: #b91c1c;
    --market-neutral: #6b7280;
    --market-up-bg: rgba(5,150,105,0.10);
    --market-down-bg: rgba(220,38,38,0.09);

    --surface-1: rgba(17,24,39,0.025);
    --surface-2: rgba(17,24,39,0.045);
    --surface-3: rgba(17,24,39,0.065);
    --surface-4: rgba(17,24,39,0.09);

    --heat-0: #e5e9f0;   /* neutral heatmap tile reads on light */

    --nav-bg: rgba(255,255,255,0.88);
    --overlay-scrim: rgba(247,248,250,0.82);

    --gradient-hero: linear-gradient(135deg,#eef2ff 0%,#f7f8fa 50%,#eef2ff 100%);
    --gradient-glass: linear-gradient(135deg, rgba(17,24,39,0.02) 0%, rgba(17,24,39,0.005) 100%);
    --gradient-card-border: linear-gradient(135deg, rgba(37,99,235,0.14), rgba(124,58,237,0.10));

    --shadow-sm: 0 1px 2px rgba(17,24,39,0.06);
    --shadow-md: 0 4px 14px rgba(17,24,39,0.08);
    --shadow-lg: 0 10px 30px rgba(17,24,39,0.10);
    --shadow-card: 0 1px 3px rgba(17,24,39,0.06), 0 0 0 1px var(--border-color);
    --shadow-glass: 0 4px 20px rgba(17,24,39,0.06);
}

/* Tasteful theme-switch animation on the surfaces that actually change */
body, .panel, .glass, .navbar, .mobile-bottom-nav, .footer,
.filter-input, .filter-select, input, select, textarea, .btn, button,
.stat-card, .feature-card, .learn-card, table, td, th, .toast {
    transition: background-color var(--duration-normal) var(--ease-out),
                border-color var(--duration-normal) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-normal) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
    body, .panel, .glass, .navbar, .mobile-bottom-nav, .footer,
    .filter-input, .filter-select, input, select, textarea, .btn, button,
    .stat-card, .feature-card, .learn-card, table, td, th, .toast { transition: none; }

    .navbar-wash::before { animation: none; }
    .nav-liquid-indicator, .mobile-nav-indicator, .liquid-tab-indicator { transition: none; }
    .value-flash { animation: none !important; }
    .auth-modal, .auth-card, .nav-dd-menu { transition: none; }
    .page.active { animation: none; }
    .nav-status { animation: none !important; }
    .status-dot { animation: none; }
}


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

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

body {
    font-family: var(--font-main);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    min-height: 100vh;
}

a { color: var(--accent-blue); text-decoration: none; }
a:hover { color: #3b82f6; }

img { max-width: 100%; display: block; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }

/* Selection */
::selection { background: rgba(37,99,235,0.3); color: var(--text-primary); }


/* ═══ Utility Classes ═══ */
.hidden { display: none !important; }
.up, .positive { color: var(--market-up) !important; }
.down, .negative { color: var(--market-down) !important; }
.neutral { color: var(--text-muted) !important; }
.mono, .text-mono { font-family: var(--font-mono); }


/* ═══ Skeleton Loading ═══ */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-elevated) 50%, var(--bg-card) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

.loading-pulse {
    color: var(--text-muted);
    font-size: 13px;
    padding: 24px;
    text-align: center;
    animation: pulse-opacity 2s ease-in-out infinite;
}

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

.shimmer {
    background: linear-gradient(90deg, transparent 0%, var(--surface-2) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

.loading-overlay {
    position: fixed; inset: 0;
    background: var(--overlay-scrim);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.loading-overlay.hidden { display: none; }

.loader {
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    color: var(--text-secondary); font-size: 13px; font-weight: 500;
}

.loader-ring {
    width: 32px; height: 32px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }


/* ═══ Navigation — Top Bar ═══ */
.navbar {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--nav-height);
    background: var(--nav-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    padding: 0 20px;
    z-index: 1000;
    gap: 8px;
}

/* Slow-moving current of brand color behind the bar — the "watery" ambient
   layer. Own overflow:hidden (not on .navbar) so it never clips the
   Markets/More dropdown, which intentionally renders below the bar's box. */
.navbar-wash {
    position: absolute; inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
.navbar-wash::before {
    content: '';
    position: absolute; top: 0; left: 0;
    width: 200%; height: 100%;
    background-image: linear-gradient(90deg,
        var(--accent-blue), var(--accent-purple) 35%, var(--accent-cyan) 65%, var(--accent-blue));
    background-size: 50% 100%;
    background-repeat: repeat-x;
    opacity: 0.08;
    will-change: transform;
    animation: waterFlow 18s linear infinite;
    transition: background-image 1.2s ease;
}
/* Today's real direction, applied by applyMarketMood() in app.js while the
   market is open — the same restrained 8% opacity, just the middle color
   stop swapped toward green/red. Reverts to the neutral gradient above once
   the session closes, so a lingering tint never reads as "something's
   wrong right now". */
body.mood-up .navbar-wash::before {
    background-image: linear-gradient(90deg,
        var(--accent-blue), var(--market-up, #10b981) 35%, var(--accent-cyan) 65%, var(--accent-blue));
}
body.mood-down .navbar-wash::before {
    background-image: linear-gradient(90deg,
        var(--accent-blue), var(--market-down, #ef4444) 35%, var(--accent-cyan) 65%, var(--accent-blue));
}
@keyframes waterFlow {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.nav-brand {
    display: flex; align-items: center; gap: 10px;
    cursor: pointer; flex-shrink: 0;
    margin-right: 8px;
}

.brand-icon {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
}

.brand-name {
    font-size: 17px; font-weight: 800;
    letter-spacing: -0.3px;
    background: var(--gradient-brand);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}

.brand-tag {
    font-size: 9px; font-weight: 700;
    color: var(--accent-blue);
    background: rgba(37,99,235,0.12);
    padding: 2px 6px; border-radius: 4px;
    letter-spacing: 0.5px;
    margin-left: 4px;
    vertical-align: super;
}

.nav-links {
    display: flex; align-items: center;
    gap: 2px; flex: 1;
    /* Must stay visible: overflow-x:auto made this a scroll container that
       clipped the absolutely-positioned Markets/More dropdown menus. The nav
       now has only 6 items, so it fits without scrolling. */
    overflow: visible;
    padding: 0 4px;
    position: relative; /* containing block for .nav-liquid-indicator */
}
.nav-links::-webkit-scrollbar { display: none; }

/* Shared indicator that glides between nav items instead of a static
   underline per link. JS writes --ix/--iw (positionNavIndicator in app.js);
   all timing/easing lives here in CSS. .no-transition snaps it instantly
   for first paint and resize instead of animating in from nowhere. */
.nav-liquid-indicator {
    position: absolute;
    bottom: -1px; left: 0;
    height: 3px;
    width: var(--iw, 0px);
    border-radius: var(--radius-full);
    background: var(--gradient-brand);
    box-shadow: 0 0 8px rgba(37,99,235,0.45);
    transform: translateX(var(--ix, 0px));
    transition: transform var(--nav-indicator-duration) var(--ease-spring),
                width var(--nav-indicator-duration) var(--ease-spring);
    pointer-events: none;
}
.nav-liquid-indicator.no-transition { transition: none; }

/* Reusable liquid indicator for any tab-toggle group (Gainers/Losers, 52W
   High/Low, chart period buttons, ...) — see positionGroupIndicator
   in app.js, which lazily injects one of these into each group. Same --ix/
   --iw contract and easing as .nav-liquid-indicator, just two visual shapes. */
.liquid-tab-indicator {
    position: absolute;
    width: var(--iw, 0px);
    transform: translateX(var(--ix, 0px));
    transition: transform var(--nav-indicator-duration) var(--ease-spring),
                width var(--nav-indicator-duration) var(--ease-spring);
    pointer-events: none;
    z-index: 0;
}
.liquid-tab-indicator.no-transition { transition: none; }

.liquid-tab-indicator--pill {
    top: 0; left: 0; height: 100%;
    border-radius: var(--radius-full);
    /* Was var(--surface-4) — a neutral tint barely a shade off the page's
       own background and the button's own resting --surface-2, so the
       "liquid" pill read as just a slightly-darker blob instead of a
       distinct accent. Same accent-blue wash already used for .btn-sm-
       accent's resting state, so this actually reads as brand color. */
    background: rgba(37,99,235,0.12);
    border: 1px solid rgba(37,99,235,0.22);
}

.liquid-tab-indicator--underline {
    bottom: -1px; left: 0;
    height: 2px;
    background: var(--accent-blue);
}

.nav-link {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    font-size: 13px; font-weight: 500;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    transition: all var(--duration-fast) ease;
    white-space: nowrap;
    position: relative;
    text-decoration: none;
}

.nav-link:hover {
    color: var(--text-primary);
    background: var(--surface-2);
}

.nav-link.active {
    color: var(--text-primary);
    font-weight: 600;
}

.nav-text { /* Used in HTML */ }

/* Mobile "More" menu items */
.mm-item {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 12px;
    font-size: 12.5px; font-weight: 600;
    color: var(--text-secondary);
    background: var(--surface-2);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer; text-decoration: none;
    transition: background var(--duration-fast), color var(--duration-fast);
}
.mm-item .ic { width: 16px; height: 16px; color: var(--accent-blue-light); }
.mm-item:active, .mm-item:hover { color: var(--text-primary); background: var(--surface-3); }
.mm-divider { height: 1px; background: var(--border-subtle); margin: 12px 0; }
.mm-row { display: flex; align-items: center; justify-content: space-between; padding: 0 2px; }
.mm-row span { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }

/* Nav dropdowns (Markets / More) */
.nav-dropdown { position: relative; }
.nav-dd-btn { background: none; border: none; cursor: pointer; font-family: var(--font-main); }
.nav-dd-caret { font-size: 10px; opacity: 0.7; transition: transform var(--duration-fast); }
.nav-dropdown.open .nav-dd-caret,
.nav-dropdown:hover .nav-dd-caret { transform: rotate(180deg); }
.nav-dd-menu {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 200;
    min-width: 190px;
    display: flex; flex-direction: column;
    padding: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-6px);
    transition: opacity var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out),
                visibility 0s linear var(--duration-fast);
}
.nav-dropdown:hover .nav-dd-menu,
.nav-dropdown.open .nav-dd-menu {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateY(0);
    transition: opacity var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out),
                visibility 0s linear 0s;
}
/* hover bridge so the menu doesn't close in the 8px gap */
.nav-dropdown::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 10px; }
.nav-dd-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    font-size: 13px; font-weight: 500;
    color: var(--text-secondary);
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
}
.nav-dd-item .ic { width: 15px; height: 15px; color: var(--text-muted); }
.nav-dd-item:hover { background: var(--surface-2); color: var(--text-primary); }
.nav-dd-item:hover .ic { color: var(--accent-blue-light); }
/* highlight the dropdown button when one of its pages is active */
.nav-dropdown.has-active .nav-dd-btn { color: var(--text-primary); font-weight: 600; }

.nav-status {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 12px;
    font-size: 11px; font-weight: 600;
    color: var(--market-up);
    background: var(--market-up-bg);
    border: 1px solid rgba(16,185,129,0.15);
    border-radius: var(--radius-full);
    flex-shrink: 0;
    margin-left: auto;
}
/* "Is this live right now" needs to be legible at a glance, not just a 6px
   dot — a soft glow ring breathing around the whole pill, same rhythm as
   the dot's own opacity pulse below. Off entirely once market-closed. */
.nav-status:not(.closed) { animation: statusGlow 2s ease-in-out infinite; }
@keyframes statusGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.35); }
    50% { box-shadow: 0 0 0 5px rgba(16,185,129,0); }
}

.status-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--market-up);
    animation: status-pulse 2s ease-in-out infinite;
}

.nav-status.closed {
    color: var(--market-down);
    background: var(--market-down-bg);
    border-color: rgba(239,68,68,0.15);
}
.nav-status.closed .status-dot {
    background: var(--market-down);
    animation: none;
}

.status-text { /* Used in HTML */ }

@keyframes status-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}


/* ═══ Mobile Bottom Navigation ═══ */
.mobile-bottom-nav {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0;
    height: var(--mobile-nav-height);
    background: var(--nav-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-color);
    z-index: 1000;
    padding: 0 8px;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.mobile-nav-items {
    display: flex; align-items: center; justify-content: space-around;
    height: 100%; max-width: 500px; margin: 0 auto;
    position: relative; /* containing block for .mobile-nav-indicator */
}

/* Shared pill that glides behind the active item — mobile counterpart of
   .nav-liquid-indicator. A full-item highlight reads clearly at a thumb
   glance; a thin underline would be near-invisible at this size. */
.mobile-nav-indicator {
    position: absolute;
    top: 4px; left: 0;
    height: calc(100% - 8px);
    width: var(--iw, 0px);
    border-radius: var(--radius-lg);
    background: var(--gradient-brand);
    opacity: 0.14;
    transform: translateX(var(--ix, 0px));
    transition: transform var(--nav-indicator-duration) var(--ease-spring),
                width var(--nav-indicator-duration) var(--ease-spring);
    pointer-events: none;
    z-index: 0;
}
.mobile-nav-indicator.no-transition { transition: none; }

.mobile-nav-item {
    display: flex; flex-direction: column; align-items: center;
    gap: 2px; padding: 6px 12px;
    font-size: 10px; font-weight: 500;
    color: var(--text-muted);
    background: none; border: none;
    cursor: pointer;
    transition: color var(--duration-fast);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    position: relative; z-index: 1; /* sit above .mobile-nav-indicator */
}

.mobile-nav-item svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.mobile-nav-item.active { color: var(--accent-blue); }
.mobile-nav-item.active svg { stroke-width: 2.2; }


/* ═══ Main Content ═══ */
.main-content {
    padding-top: var(--nav-height);
    min-height: 100vh;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
}


/* ═══ Page System ═══ */
.page { display: none; padding: 20px 0 40px; }
.page.active { display: block; animation: pageFadeIn var(--duration-normal) var(--ease-out); }
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}


/* ═══ Section Headers ═══ */
.section-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; gap: 12px;
    flex-wrap: wrap;
}

.section-header h1 {
    font-size: 20px; font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--text-primary);
}

.section-desc {
    color: var(--text-secondary);
    font-size: 13px;
    margin-top: 2px;
}


/* ═══ Cards & Panels ═══ */
.glass, .panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: border-color var(--duration-normal) ease;
}

/* Remove the pseudo-element glow that was on .glass */
.glass::before { display: none; }

.glass:hover, .panel:hover {
    border-color: var(--border-hover);
}

.panel {
    margin-bottom: 16px;
}

.panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-subtle);
    gap: 8px;
}

.panel-header h2 {
    font-size: 14px; font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.2px;
}


/* ═══ Buttons ═══ */
.btn-primary, .hero-btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 24px;
    background: var(--accent-blue);
    color: #fff; font-weight: 600; font-size: 13px;
    border: none; border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
    font-family: var(--font-main);
    text-decoration: none;
    line-height: 1.4;
}
.btn-primary:hover, .hero-btn-primary:hover {
    background: #3b82f6;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37,99,235,0.3);
}

.btn-secondary, .hero-btn-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 24px;
    background: transparent;
    color: var(--text-secondary); font-weight: 600; font-size: 13px;
    border: 1px solid var(--border-color); border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--duration-fast) ease;
    font-family: var(--font-main);
    text-decoration: none;
}
.btn-secondary:hover, .hero-btn-secondary:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
    background: var(--surface-2);
}

.btn-sm {
    padding: 5px 12px;
    font-size: 11px; font-weight: 600;
    color: var(--text-secondary);
    background: var(--surface-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--duration-fast);
    font-family: var(--font-main);
}
.btn-sm:hover {
    color: var(--text-primary);
    background: var(--surface-3);
    border-color: var(--border-hover);
}
.btn-sm-accent {
    background: rgba(37,99,235,0.1);
    color: var(--accent-blue-light);
    border-color: rgba(37,99,235,0.2);
}
.btn-sm-accent:hover {
    background: rgba(37,99,235,0.16);
    color: var(--accent-blue-light);
    border-color: rgba(37,99,235,0.32);
}

.btn-refresh {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 14px;
    font-size: 12px; font-weight: 600;
    color: var(--text-secondary);
    background: var(--surface-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--duration-fast);
    font-family: var(--font-main);
}
.btn-refresh:hover {
    color: var(--accent-blue);
    border-color: var(--border-glow);
    background: rgba(37,99,235,0.06);
}

.btn-analyze {
    padding: 10px 24px;
    background: var(--accent-blue);
    color: #fff; font-weight: 600; font-size: 13px;
    border: none; border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--duration-fast);
    font-family: var(--font-main);
    position: relative;
    overflow: hidden;
}
.btn-analyze::before { display: none; }
.btn-analyze:hover { background: #3b82f6; transform: translateY(-1px); }
.btn-analyze:hover::before { display: none; }
.btn-analyze:active { transform: translateY(0); }

.btn-analyze-sm {
    padding: 5px 14px;
    background: rgba(37,99,235,0.1);
    color: var(--accent-blue); font-weight: 600; font-size: 11px;
    border: 1px solid rgba(37,99,235,0.2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--duration-fast);
    font-family: var(--font-main);
}
.btn-analyze-sm:hover { background: rgba(37,99,235,0.18); }

.btn-screen {
    padding: 8px 20px;
    background: var(--accent-blue);
    color: #fff; font-weight: 600; font-size: 12px;
    border: none; border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--duration-fast);
    font-family: var(--font-main);
    display: inline-flex; align-items: center; gap: 5px;
}
.btn-screen:hover { background: #3b82f6; }

.btn-reset-filters {
    padding: 8px 16px;
    background: transparent;
    color: var(--text-muted); font-weight: 500; font-size: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--duration-fast);
    font-family: var(--font-main);
}
.btn-reset-filters:hover { color: var(--text-secondary); border-color: var(--text-muted); }

.btn-apply-filters {
    padding: 8px 20px;
    background: var(--accent-blue);
    color: #fff; font-weight: 600; font-size: 12px;
    border: none; border-radius: var(--radius);
    cursor: pointer;
    font-family: var(--font-main);
}
.btn-apply-filters:hover { background: #3b82f6; }

.btn-back {
    padding: 6px 14px;
    background: var(--surface-2);
    color: var(--text-secondary); font-weight: 500; font-size: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-main);
    transition: all var(--duration-fast);
}
.btn-back:hover { color: var(--text-primary); background: var(--surface-3); }

.btn-close-drilldown { display: none; }
.btn-close-drilldown:hover { display: none; }

/* Ask IQ Button */
.ask-iq-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    background: rgba(124,58,237,0.1);
    color: var(--accent-purple);
    font-weight: 600; font-size: 12px;
    border: 1px solid rgba(124,58,237,0.2);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--duration-fast);
    font-family: var(--font-main);
}
.ask-iq-btn:hover {
    background: rgba(124,58,237,0.18);
    border-color: rgba(124,58,237,0.35);
}
.ask-iq-btn .iq-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px;
    background: var(--gradient-brand);
    color: #fff; font-size: 9px; font-weight: 800;
    border-radius: 50%;
    flex-shrink: 0;
}


/* ═══ Market Pulse — Dashboard Hero ═══ */
.market-pulse {
    padding: 0;
    margin-bottom: 20px;
    overflow: hidden;
    position: relative;
}

/* Remove decorative pseudo-elements */
.market-pulse::before, .market-pulse::after { display: none; }

.pulse-main {
    display: flex; align-items: stretch;
    gap: 0;
}

.pulse-index {
    padding: 20px 24px;
    min-width: 200px;
    border-right: 1px solid var(--border-subtle);
}

/* Index label and the market-status pill share a row */
.pulse-index-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 2px; }
.pulse-index-top .nav-status { padding: 3px 9px; font-size: 10px; }

.pulse-label {
    font-size: 10px; font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.pulse-value {
    font-size: 28px; font-weight: 800;
    font-family: var(--font-mono);
    color: var(--text-primary);
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.pulse-change {
    font-size: 13px; font-weight: 600;
    font-family: var(--font-mono);
    margin-top: 4px;
}
.pulse-change.up, .pulse-change.positive { color: var(--market-up); }
.pulse-change.down, .pulse-change.negative { color: var(--market-down); }

.pulse-stats {
    display: flex; align-items: center;
    flex-wrap: wrap;
    flex: 1;
    padding: 8px 12px;
    gap: 0;
}

.pulse-stat {
    padding: 10px 16px;
    text-align: center;
    flex: 1;
    min-width: 80px;
    border-right: 1px solid var(--border-subtle);
    transition: background var(--duration-fast);
}
.pulse-stat:last-child { border-right: none; }
.pulse-stat:hover { background: var(--surface-1); }

.pulse-stat-label {
    font-size: 10px; font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 4px;
}

.pulse-stat-value {
    font-size: 15px; font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-primary);
    display: block;
}
.pulse-stat-value.up { color: var(--market-up); }
.pulse-stat-value.down { color: var(--market-down); }

/* Brief "just ticked" flash — see flashOnChange() in app.js. Fires on the
   3-minute auto-refresh (and manual refresh) whenever a number actually
   changes, so a silent data update reads as live instead of static. */
.value-flash { animation: valuePulse 700ms var(--ease-out); border-radius: var(--radius-sm); }
.value-flash-up { --flash-color: var(--market-up); }
.value-flash-down { --flash-color: var(--market-down); }
.value-flash-neutral { --flash-color: var(--accent-blue); }
@keyframes valuePulse {
    0%   { text-shadow: 0 0 0 rgba(0,0,0,0); background: color-mix(in srgb, var(--flash-color, var(--accent-blue)) 22%, transparent); }
    100% { text-shadow: none; background: transparent; }
}

/* Chart area in pulse */
.pulse-chart-area {
    border-top: 1px solid var(--border-subtle);
    padding: 8px 12px 12px;
    min-height: 120px;
}
.pulse-chart-area canvas {
    width: 100% !important;
    max-height: 140px;
}

/* AI Insight bar */
.pulse-insight {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 18px;
    border-top: 1px solid var(--border-subtle);
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--surface-1);
}
.insight-icon { flex-shrink: 0; display: flex; align-items: center; }
/* Landing hero shortcuts — a fixed 2×2. auto-fit used to resolve to 3 columns
   at common widths, which stranded the 4th card alone next to a block of dead
   space. Four cards only ever look right as 2×2 or 4-across, never 3+1. */
.hero-demo-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px; margin: 28px 0 20px; max-width: 780px;
}
.hero-demo-grid > * { display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 560px) { .hero-demo-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── Permanent nav search ──────────────────────────────────────────────────
   Looking up a stock is the most common action on the site, so it is a control
   that is always present rather than a page you navigate to. */
.nav-search { position: relative; margin-left: auto; width: 100%; max-width: 320px; }
.nav-search-input {
    width: 100%; box-sizing: border-box; padding: 8px 13px 8px 34px;
    font-family: inherit; font-size: 13px; border-radius: 999px; outline: none;
    background: var(--surface-2); border: 1px solid var(--surface-4);
    color: var(--text-primary); transition: border-color var(--duration-fast), background var(--duration-fast);
}
.nav-search-input::placeholder { color: var(--text-muted); }
.nav-search-input:focus { border-color: var(--accent-blue); background: var(--bg-card); }
/* magnifier drawn in CSS so no icon sprite is needed */
.nav-search::before {
    content: ""; position: absolute; left: 13px; top: 50%; width: 11px; height: 11px;
    margin-top: -7px; border: 1.6px solid var(--text-muted); border-radius: 50%;
    pointer-events: none;
}
.nav-search::after {
    content: ""; position: absolute; left: 22px; top: 50%; width: 5px; height: 1.6px;
    margin-top: 3px; background: var(--text-muted); transform: rotate(45deg);
    pointer-events: none;
}
.nav-search .ac-dropdown { top: calc(100% + 6px); left: 0; right: 0; }

@media (max-width: 900px) { .nav-search { max-width: 260px; } }

/* Phones: the nav has to fit a brand, a search box, the market status, the
   theme switch and the account control in ~360px. Without this the row needed
   456px and pushed the market-status badge clean off the right edge. */
@media (max-width: 768px) {
    .navbar { gap: 6px; }
    /* Logo mark only — the wordmark is the cheapest thing to give up */
    .brand-text { display: none; }
    /* Search takes whatever is left rather than collapsing to a stub */
    .nav-search { flex: 1 1 auto; max-width: none; min-width: 0; margin-left: 0; }
    .nav-search-input { padding: 7px 10px 7px 30px; font-size: 12.5px; }
    .nav-search::before { left: 11px; }
    .nav-search::after { left: 19px; }
    /* The suggestion list is anchored to the viewport, not to the input. Tied
       to the input it was only ~100px wide on a phone, so every company name
       was clipped away and you saw bare symbols. */
    .nav-search .ac-dropdown {
        position: fixed; left: 10px; right: 10px;
        top: calc(var(--nav-height) + 4px); margin-top: 0;
    }
}

/* ── Compact IPO strip (was a 72px promo banner) ───────────────────────── */
.ipo-strip {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 8px 14px; margin-bottom: 12px; border-radius: 10px;
    text-decoration: none; font-size: 12.5px;
    background: rgba(37, 99, 235, 0.08); border: 1px solid rgba(37, 99, 235, 0.18);
    transition: border-color var(--duration-fast);
}
.ipo-strip:hover { border-color: rgba(37, 99, 235, 0.42); }
.ipo-strip b { color: var(--text-primary); font-weight: 700; }
.ipo-strip span { color: var(--text-muted); }
.ipo-strip em { margin-left: auto; font-style: normal; font-weight: 700; color: var(--accent-blue); }

/* Community safety controls: report a message, block a person */
.chat-msg-actions { margin-left: auto; display: flex; gap: 4px; opacity: 0; transition: opacity var(--duration-fast); }
.chat-msg:hover .chat-msg-actions, .chat-msg:focus-within .chat-msg-actions { opacity: 1; }
.chat-msg-actions button {
    background: none; border: none; cursor: pointer; font-family: inherit;
    font-size: 10.5px; font-weight: 600; color: var(--text-muted);
    padding: 2px 6px; border-radius: 6px;
}
.chat-msg-actions button:hover { color: var(--market-down); background: var(--surface-3); }
.chat-unblock-btn {
    background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
    font-size: 11.5px; font-weight: 700; color: var(--accent-blue); text-decoration: underline;
}
/* Touch devices have no hover, so the controls must always be visible */
@media (hover: none) { .chat-msg-actions { opacity: 1; } }

/* ── Accounts: nav button, avatar menu, sign-in dialog ─────────────────── */
.nav-account { position: relative; display: flex; align-items: center; margin-left: 8px; }
.acct-signin {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 999px; cursor: pointer; font-family: inherit;
    font-size: 12.5px; font-weight: 700; color: #fff; border: none;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
    white-space: nowrap;
    transition: filter var(--duration-fast);
}
.acct-signin:hover { filter: brightness(1.08); }
/* The class rule above's display:inline-flex has equal CSS specificity to
   the browser's default [hidden]{display:none} UA rule, and author styles
   always win that tie — so without this, btn.hidden=true (set by
   renderAccountNav() once signed in) silently stopped hiding the button,
   showing "Sign in" next to the avatar at the same time. Same bug shape
   already fixed on .auth-modal[hidden] earlier; missed this one then. */
.acct-signin[hidden] { display: none; }
.acct-signin-icon { display: none; width: 15px; height: 15px; }
.acct-menu-wrap { position: relative; }
.acct-avatar {
    width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 800; color: #fff;
    border: none; background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
    display: grid; place-items: center;
}
.acct-avatar:hover { filter: brightness(1.1); }
.acct-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 1200;
    min-width: 218px; padding: 6px; border-radius: 12px;
    background: var(--bg-card); border: 1px solid var(--surface-3);
    box-shadow: 0 16px 44px rgba(0,0,0,.32);
}
.acct-menu-head { padding: 9px 10px 10px; border-bottom: 1px solid var(--surface-2); margin-bottom: 4px; }
.acct-menu-head b { display: block; font-size: 13.5px; color: var(--text-primary); }
.acct-menu-head span { display: block; font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; }
.acct-menu-item {
    display: block; width: 100%; text-align: left; padding: 9px 10px; border-radius: 8px;
    background: none; border: none; cursor: pointer; font-family: inherit; font-size: 13px;
    color: var(--text-secondary); text-decoration: none;
}
.acct-menu-item:hover { background: var(--surface-2); color: var(--text-primary); }
.acct-menu-item.danger { color: #ef4444; }

.auth-modal {
    position: fixed; inset: 0; z-index: 12000; display: flex;
    align-items: center; justify-content: center; padding: 20px;
    background: var(--overlay-scrim); backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-out);
}
.auth-modal[hidden] { display: none; }
.auth-modal.open { opacity: 1; }
.auth-card {
    position: relative; width: 100%; max-width: 400px; padding: 28px 26px;
    border-radius: 18px; background: var(--bg-card); border: 1px solid var(--surface-3);
    box-shadow: 0 24px 70px rgba(0,0,0,.42);
    transform: scale(.94) translateY(10px);
    transition: transform var(--duration-normal) var(--ease-spring);
}
.auth-modal.open .auth-card { transform: scale(1) translateY(0); }
.auth-close { position: absolute; top: 12px; right: 14px; background: none; border: none; cursor: pointer; font-size: 17px; color: var(--text-muted); }
.auth-close:hover { color: var(--text-primary); }
.auth-title { font-size: 20px; font-weight: 800; color: var(--text-primary); margin: 0 0 8px; }
.auth-sub { font-size: 13px; line-height: 1.6; color: var(--text-muted); margin: 0 0 20px; }
.auth-label { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-bottom: 6px; }
.auth-input {
    width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 14px;
    font-family: inherit; border-radius: 10px; outline: none;
    background: var(--surface-2); border: 1.5px solid var(--surface-4); color: var(--text-primary);
}
.auth-input:focus { border-color: var(--accent-blue); }
.auth-code-input { text-align: center; font-size: 26px; font-weight: 800; letter-spacing: 12px; font-family: var(--font-mono); padding: 14px; }
.auth-btn {
    width: 100%; margin-top: 14px; padding: 12px 16px; border-radius: 10px; cursor: pointer;
    font-family: inherit; font-size: 14px; font-weight: 700; color: #fff; border: none;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
}
.auth-btn:hover:not(:disabled) { filter: brightness(1.08); }
.auth-btn:disabled { opacity: .65; cursor: default; }
.auth-hint { margin-top: 7px; font-size: 11.5px; color: var(--text-muted); }
.auth-error {
    margin-top: 10px; padding: 9px 11px; border-radius: 9px;
    font-size: 12.5px; line-height: 1.5; color: #ef4444;
    background: rgba(239,68,68,.09); border: 1px solid rgba(239,68,68,.24);
}
.auth-error[hidden] { display: none; }
.auth-fine { font-size: 11.5px; line-height: 1.5; color: var(--text-muted); margin: 14px 0 0; text-align: center; }
.auth-alt { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }
.auth-link { background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--accent-blue); }
.auth-link:hover { text-decoration: underline; }
.auth-link:disabled { opacity: .6; cursor: default; }

@media (max-width: 720px) {
    .acct-signin { padding: 6px 11px; font-size: 12px; }
    .auth-card { padding: 22px 18px; }
    .auth-code-input { letter-spacing: 8px; font-size: 22px; }
}

/* News items are clickable and open the full announcement */
.news-item { cursor: pointer; transition: background var(--duration-fast); }
.news-item:hover, .news-item:focus-visible { background: var(--surface-2); outline: none; }
.news-item:focus-visible { box-shadow: inset 3px 0 0 var(--accent-blue); }
.news-item-more { font-size: 11px; font-weight: 600; color: var(--accent-blue); margin-top: 6px; opacity: 0; transition: opacity var(--duration-fast); }
.news-item:hover .news-item-more, .news-item:focus-visible .news-item-more { opacity: 1; }

/* Compact news feed embedded on the dashboard — same NEWS_TYPES/openNewsDetail
   system as the full News page, just a shorter list with tighter rows. */
.dash-news-item {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--surface-2);
    transition: background var(--duration-fast);
}
.dash-news-item:last-child { border-bottom: none; }
.dash-news-item:hover, .dash-news-item:focus-visible { background: var(--surface-2); outline: none; }
.dash-news-icon { flex-shrink: 0; margin-top: 1px; font-size: 14px; }
.dash-news-body { min-width: 0; flex: 1; }
.dash-news-title {
    font-size: 12.5px; font-weight: 600; color: var(--text-primary);
    line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.dash-news-meta { font-size: 10.5px; color: var(--text-muted); margin-top: 4px; font-weight: 600; }
.dash-news-sym { color: var(--accent-blue); font-family: var(--font-mono); font-weight: 800; }
.dash-news-item .sym-avatar { width: 22px; height: 22px; font-size: 8.5px; margin-top: 1px; }

.news-modal {
    position: fixed; inset: 0; z-index: 10000; display: none;
    align-items: center; justify-content: center; padding: 20px;
    background: var(--overlay-scrim); backdrop-filter: blur(4px);
}
.news-modal.open { display: flex; }
.news-modal-card {
    width: 100%; max-width: 640px; max-height: 82vh; overflow-y: auto;
    background: var(--bg-card); border: 1px solid var(--surface-3);
    border-radius: 16px; padding: 20px 22px; box-shadow: var(--shadow-lg, 0 20px 60px rgba(0,0,0,.45));
}
.news-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.news-modal-tag { padding: 4px 10px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.news-modal-close { background: none; border: none; color: var(--text-muted); font-size: 20px; cursor: pointer; line-height: 1; padding: 2px 6px; border-radius: 6px; }
.news-modal-close:hover { color: var(--text-primary); background: var(--surface-3); }
.news-modal-title { font-size: 17px; font-weight: 800; color: var(--text-primary); margin: 12px 0 8px; line-height: 1.35; }
.news-modal-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--text-muted); padding-bottom: 12px; border-bottom: 1px solid var(--surface-2); }
.news-modal-meta a { color: var(--accent-blue); font-weight: 700; text-decoration: none; }
.news-modal-meta a:hover { text-decoration: underline; }
.news-modal-body { margin-top: 14px; font-size: 14px; line-height: 1.7; color: var(--text-secondary); white-space: pre-line; }
.news-modal-empty, .news-modal-note { margin-top: 14px; font-size: 12.5px; line-height: 1.6; color: var(--text-muted); background: var(--surface-1); border: 1px solid var(--surface-2); border-radius: 10px; padding: 10px 12px; }
@media (max-width: 560px) { .news-modal { padding: 12px; } .news-modal-card { padding: 16px; max-height: 88vh; } }

.insight-text { line-height: 1.5; }
/* Pulsing dot shown beside the daily note while the market is actually open */
.note-live-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: #22c55e; margin-right: 7px; vertical-align: middle;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    animation: noteLivePulse 2s infinite;
}
@keyframes noteLivePulse {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
    70%  { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
@media (prefers-reduced-motion: reduce) { .note-live-dot { animation: none; } }


/* ═══ Index Period Buttons ═══ */
/* Wraps the ALL/1Y/30D/7D/Today buttons; hosts their liquid pill indicator. */
.index-period-group {
    display: flex; gap: 4px;
    position: relative;
}
.btn-index-period {
    font-size: 10px;
    padding: 3px 10px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    transition: all var(--duration-fast);
    font-family: var(--font-main);
    position: relative; z-index: 1;
}
.btn-index-period:hover {
    color: var(--text-secondary);
    border-color: var(--text-muted);
}
.btn-index-period.active {
    color: var(--accent-blue);
    border-color: rgba(37,99,235,0.25);
}


/* ═══ Smart Signals ═══ */
.signals-grid {
    display: grid;
    gap: 8px;
    padding: 12px 16px;
}

.signal-card {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 16px;
    background: var(--surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    transition: all var(--duration-fast);
    position: relative;
}
.signal-card::after { display: none; }
.signal-card:hover { background: var(--surface-2); border-color: var(--border-color); }
.signal-card:hover::after { display: none; }

.signal-header {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 4px;
}

.signal-icon {
    font-size: 14px; flex-shrink: 0;
}

.signal-title {
    font-size: 13px; font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}

.signal-body .signal-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-subtle);
    transition: background var(--duration-fast);
}
.signal-body .signal-item:hover { background: var(--surface-1); }
.signal-body .signal-item:last-child { border-bottom: none; }

.signal-item .sig-symbol {
    font-weight: 700; font-size: 13px;
    color: var(--text-primary);
    min-width: 60px;
}
.signal-item .sig-value {
    font-family: var(--font-mono);
    font-size: 12px; font-weight: 600;
}
.signal-item .sig-extra {
    font-size: 11px;
    color: var(--text-muted);
}

.signal-buy { color: var(--market-up); }
.signal-sell { color: var(--market-down); }
.signal-hold { color: var(--accent-yellow); }

.signal-methodology { display: none; }
.signal-methodology.visible { display: block; }

/* Signal filter buttons */
.btn-signal-filter {
    padding: 4px 12px;
    font-size: 11px; font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--duration-fast);
    font-family: var(--font-main);
}
.btn-signal-filter:hover {
    color: var(--text-secondary);
    border-color: var(--text-muted);
}
.btn-signal-filter.active {
    color: var(--text-primary);
    background: var(--surface-3);
    border-color: var(--text-secondary);
}

/* ── Icon system ──────────────────────────────────────────────
   One consistent stroke icon set (replaces emoji, which rendered
   differently per OS and read as toy-like). Inherits currentColor,
   so an icon takes the colour of the text it sits in. */
.ic {
    width: 1em; height: 1em;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.125em;
}
.ic-lg { width: 1.35em; height: 1.35em; }
.ic-xl { width: 2em; height: 2em; stroke-width: 1.75; }
/* Tinted icon tile — replaces the big emoji blocks on cards */
.ic-tile {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: 12px;
    background: rgba(37,99,235,0.10);
    color: var(--accent-blue-light);
}
.ic-tile .ic { width: 20px; height: 20px; }

/* ── Live movers ticker tape ──────────────────────────────
   Real market moves scrolling across the top of the dashboard. */
.ticker-strip {
    /* Sticky rather than fixed: .main-content's own padding-top:var(--nav-height)
       already pushes this (its first child) below the fixed navbar for free,
       so sticky just needs the same offset to stay put as the page scrolls —
       no separate height bookkeeping needed anywhere else. */
    position: sticky; top: var(--nav-height); z-index: 999;
    overflow: hidden;
    margin-bottom: 14px;
    padding: 7px 0;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.ticker-strip[hidden] { display: none; }
.ticker-track {
    display: flex; align-items: center;
    width: max-content;
    animation: ticker-scroll 70s linear infinite;
}
.ticker-strip:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }   /* content is duplicated once */
}
.ticker-item {
    display: inline-flex; align-items: baseline; gap: 7px;
    padding: 3px 16px;
    background: none; border: none;
    border-right: 1px solid var(--border-subtle);
    cursor: pointer;
    font-family: var(--font-mono);
    white-space: nowrap;
}
.ticker-sym { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.ticker-ltp { font-size: 12px; color: var(--text-secondary); }
.ticker-pct { font-size: 11.5px; font-weight: 700; }
.ticker-pct.up { color: var(--market-up); }
.ticker-pct.down { color: var(--market-down); }
.ticker-item:hover .ticker-sym { color: var(--accent-blue); }
@media (prefers-reduced-motion: reduce) {
    .ticker-track { animation: none; }
    .ticker-strip { overflow-x: auto; }
}

/* Technical-chart shortcut button (dashboard index panel) */
.btn-tech-chart {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700;
    padding: 4px 12px;
    color: #fff;
    background: var(--gradient-brand);
    border: none; border-radius: var(--radius-full);
    text-decoration: none;
    transition: transform var(--duration-fast);
}
.btn-tech-chart:hover { transform: translateY(-1px); color: #fff; }
.btn-tech-chart .ic { width: 13px; height: 13px; }

/* Analysis page intro chips + empty state */
.ana-chip {
    padding: 8px 16px; font-size: 13px; font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-primary);
    background: var(--surface-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--duration-fast);
}
.ana-chip:hover { border-color: var(--accent-blue); background: var(--surface-3); }
/* Hide the intro once a stock analysis is showing */
#page-analysis:has(#analysis-results:not(.hidden)) #analysis-intro { display: none; }

/* Theme toggle — animated pill with sliding sun/moon thumb */
.theme-toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    border-radius: var(--radius-full);
    outline: none;
}
.theme-toggle-track {
    position: relative;
    width: 50px; height: 26px;
    border-radius: var(--radius-full);
    background: var(--surface-3);
    border: 1px solid var(--border-color);
    transition: background var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out);
}
.theme-toggle-thumb {
    position: absolute; top: 2px; left: 2px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--bg-card);
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
    display: grid; place-items: center;
    transition: transform var(--duration-normal) var(--ease-spring), background var(--duration-normal) var(--ease-out);
}
:root[data-theme="light"] .theme-toggle-thumb { transform: translateX(24px); }
:root[data-theme="light"] .theme-toggle-track { background: var(--accent-blue); border-color: transparent; }
.theme-toggle-thumb .ic { position: absolute; width: 13px; height: 13px; transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-normal) var(--ease-out); }
.theme-ic-moon { color: var(--accent-blue-light); opacity: 1; }
.theme-ic-sun { color: var(--accent-yellow); opacity: 0; transform: rotate(-90deg); }
:root[data-theme="light"] .theme-ic-moon { opacity: 0; transform: rotate(90deg); }
:root[data-theme="light"] .theme-ic-sun { opacity: 1; transform: rotate(0); }
.theme-toggle:hover .theme-toggle-track { border-color: var(--border-hover); }
.theme-toggle:focus-visible .theme-toggle-track { box-shadow: 0 0 0 3px var(--border-glow); }

/* Cookie consent banner */
.cookie-banner {
    position: fixed;
    left: 16px; right: 16px; bottom: 16px;
    z-index: 9998;
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--bg-card-solid, #151c2c);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.45);
}
.cookie-banner[hidden] { display: none; }
.cookie-text { flex: 1 1 260px; min-width: 0; font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); }
.cookie-text a { color: var(--accent-blue-light); }
.cookie-actions { display: flex; gap: 8px; flex-shrink: 0; }
.cookie-btn {
    padding: 8px 16px; font-size: 12.5px; font-weight: 700;
    border-radius: 9px; cursor: pointer; font-family: var(--font-main);
    background: transparent; color: var(--text-secondary);
    border: 1px solid var(--border-color);
}
.cookie-btn.primary { background: var(--gradient-brand); color: #fff; border: none; }
.cookie-btn:hover { color: var(--text-primary); }
@media (max-width: 600px) {
    .cookie-banner { bottom: 74px; }  /* clear the mobile bottom nav */
}

/* Gainers/Losers toggle tabs */
.mover-tabs {
    display: inline-flex;
    gap: 4px;
    background: var(--surface-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    padding: 3px;
    position: relative;
}
.mover-tab {
    padding: 5px 14px;
    font-size: 12px; font-weight: 700;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--duration-fast);
    font-family: var(--font-main);
    white-space: nowrap;
    position: relative; z-index: 1;
}
.mover-tab:hover { color: var(--text-secondary); }
.mover-tab.active {
    color: var(--text-primary);
}

/* ═══ Portfolio / Watchlist page ═══ */
.pf-page-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px;
    margin-bottom: 16px;
}
.pf-sync-status { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.pf-sync-status a { color: var(--accent-blue); text-decoration: underline; }
.pf-signin-btn {
    padding: 7px 16px;
    background: rgba(37,99,235,0.1);
    border: 1px solid rgba(37,99,235,0.2);
    border-radius: var(--radius-lg);
    color: var(--accent-blue-light);
    font-size: 12px; font-weight: 700;
    cursor: pointer;
    font-family: var(--font-main);
    transition: background var(--duration-fast), border-color var(--duration-fast);
}
.pf-signin-btn:hover { background: rgba(37,99,235,0.16); border-color: rgba(37,99,235,0.32); }

.pf-tabs { margin-bottom: 14px; }

.pf-summary-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px; margin-bottom: 14px;
}
.pf-summary-card {
    padding: 14px 16px;
    transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-normal) ease;
}
.pf-summary-card:hover { transform: translateY(-2px); }
.pf-summary-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
    color: var(--text-muted);
}
.pf-summary-value {
    font-size: 19px; font-weight: 800; font-family: var(--font-mono); margin-top: 4px;
}

.pf-add-form { padding: 14px 16px; margin-bottom: 14px; position: relative; }
.pf-add-form-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pf-add-input {
    flex: 1 1 120px; min-width: 0;
    padding: 10px 14px; font-size: 13px; border-radius: var(--radius-lg);
    background: var(--bg-input); border: 1px solid var(--border-color);
    color: var(--text-primary); box-sizing: border-box;
    transition: border-color var(--duration-fast);
    font-family: var(--font-main);
}
.pf-add-input:focus { outline: none; border-color: var(--border-hover); }
#pf-symbol.pf-add-input { text-transform: uppercase; flex-basis: 120px; }
#pf-qty.pf-add-input { flex-basis: 90px; }
#pf-price.pf-add-input { flex-basis: 110px; }
.pf-add-btn {
    flex: 0 0 auto; padding: 10px 20px;
    background: var(--gradient-brand); border: none; border-radius: var(--radius-lg);
    color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap;
    font-family: var(--font-main);
    transition: filter var(--duration-fast);
}
.pf-add-btn:hover { filter: brightness(1.08); }
.pf-add-hint { font-size: 11px; color: var(--text-dim); margin-top: 6px; }

.holding-row, .watchlist-row {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 16px;
    background: var(--surface-1); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    flex-wrap: wrap;
    transition: background var(--duration-fast);
}
.holding-row:hover, .watchlist-row:hover { background: var(--surface-2); }

/* Sparkline placeholder — fixed size reserved up front so the row doesn't
   jump when the SVG (attachSparklines(), fetched after the row's own data
   already rendered) fills in a moment later. Used in every stock list:
   dashboard mini-lists, market table, screener, watchlist, portfolio. */
.spark-cell { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 20px; flex-shrink: 0; }
.spark-cell svg { display: block; }

/* Sector-colored stock avatar (symbolAvatar() in app.js) — the closest
   honest stand-in for the per-asset icon Binance shows next to every coin,
   since NEPSE stocks have no real logos to use. transition:background lets
   the neutral placeholder (rendered before /api/sectors resolves) shift to
   its real color instead of popping in. */
.sym-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 50%;
    font-size: 9.5px; font-weight: 800;
    color: #fff;
    letter-spacing: -0.2px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.25);
    transition: background var(--duration-normal) var(--ease-out);
}

/* ═══ Hot Stocks strip (dashboard) ═══
   Binance-style horizontal cards ranking today's biggest movers — up OR
   down — by |% change|, built from the gainers+losers data already fetched
   for the mover panels (zero extra network cost). See renderHotStocks(). */
.hot-stocks-panel .panel-header { border-bottom: none; padding-bottom: 6px; }
.hot-stocks-panel .panel-header h2 { display: flex; align-items: center; gap: 7px; }
.hot-stocks-sub { font-size: 11px; color: var(--text-muted); }
.hot-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #f97316;
    animation: status-pulse 1.6s ease-in-out infinite;
    flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) { .hot-dot { animation: none; } }

.hot-stocks-track {
    display: flex; gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 4px 16px 16px;
    scroll-snap-type: x proximity;
}
.hot-stocks-track::-webkit-scrollbar { display: none; }

.hot-stock-card {
    position: relative;
    flex: 0 0 auto;
    width: 128px;
    scroll-snap-align: start;
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 12px 12px 10px;
    cursor: pointer;
    transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast);
}
.hot-stock-card:hover { transform: translateY(-2px); border-color: var(--border-hover); }
.hot-stock-card.up { border-top: 2px solid var(--market-up); }
.hot-stock-card.down { border-top: 2px solid var(--market-down); }

.hot-stock-badge {
    position: absolute; top: -8px; right: 8px;
    font-size: 9px; font-weight: 800; letter-spacing: 0.3px;
    color: #fff;
    background: linear-gradient(135deg, #f97316, #ef4444);
    padding: 2px 7px;
    border-radius: var(--radius-full);
    box-shadow: 0 2px 6px rgba(239,68,68,0.35);
}

.hot-stock-top { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.hot-stock-card .sym-avatar { width: 30px; height: 30px; font-size: 11px; }
.hot-stock-sym { font-size: 12.5px; font-weight: 700; font-family: var(--font-mono); color: var(--text-primary); }

.hot-stock-price { font-size: 14px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; margin-bottom: 2px; }
.hot-stock-pct { font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.hot-stock-card.up .hot-stock-pct { color: var(--market-up); }
.hot-stock-card.down .hot-stock-pct { color: var(--market-down); }

.hot-stock-spark { width: 100%; height: 22px; }
.hot-stock-spark svg { width: 100%; height: 100%; }

/* ═══ Market data primitives (TradingView-style) ═══
   A % change reads as a filled badge, not loose coloured text — it's the
   single strongest "this is a real terminal" cue and it scans far faster in
   a long list. See pctPill() in app.js. */
.pct-pill {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: 11.5px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #fff;
    white-space: nowrap;
    line-height: 1.35;
}
/* Variants are is-up/is-down, NOT up/down: there is a global
   `.up, .positive { color: var(--market-up) !important }` utility, and a bare
   `up` class on the pill let that !important win — the text rendered
   green-on-green. !important beats specificity, so the fix is to not collide
   with the utility's class names at all. */
.pct-pill.is-up { background: var(--pill-up); color: #fff; }
.pct-pill.is-down { background: var(--pill-down); color: #fff; }
.pct-pill.is-flat { background: var(--surface-4); color: var(--text-secondary); }
.pct-pill.lg { font-size: 13px; padding: 5px 11px; border-radius: 8px; }

/* Ticker badge shown beside a full company name — lets the name be the
   headline while the symbol stays scannable. */
.sym-chip {
    display: inline-flex; align-items: center;
    padding: 2px 7px;
    border-radius: 5px;
    background: var(--surface-3);
    border: 1px solid var(--border-subtle);
    font-family: var(--font-mono);
    font-size: 10.5px; font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.2px;
    white-space: nowrap;
}

/* Tiny caps currency/unit marker after a price (323.86 USD) */
.unit-label {
    font-size: 10px; font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-left: 4px;
}

/* Only the digits that actually changed recolour on a tick, the way a real
   quote terminal does — see tickPrice() in app.js. */
.tick-digits { transition: color var(--duration-normal) var(--ease-out); }
.tick-digits.is-up { color: var(--market-up); }
.tick-digits.is-down { color: var(--market-down); }

.holding-row-info, .watchlist-row-info { flex: 1 1 130px; min-width: 0; cursor: pointer; }
.holding-row-symbol, .watchlist-row-symbol {
    display: flex; align-items: center; gap: 8px;
    font-weight: 800; font-family: var(--font-mono); font-size: 14px; color: var(--text-primary);
}
.holding-row-meta, .watchlist-row-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.watchlist-row-quote { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.watchlist-row-quote-price { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.watchlist-row-quote-pct { font-size: 12px; font-weight: 700; }
.watchlist-row-quote-vol { font-size: 10px; color: var(--text-muted); }

.holding-row-price, .holding-row-pl { flex: 0 1 auto; text-align: right; }
.holding-row-price { flex-basis: 110px; }
.holding-row-pl { flex-basis: 130px; }
.holding-row-price-main { font-size: 13px; font-weight: 700; font-family: var(--font-mono); }
.holding-row-price-sub { font-size: 10.5px; }
.holding-row-pl-main { font-size: 13px; font-weight: 800; font-family: var(--font-mono); }
.holding-row-pl-sub { font-size: 10.5px; }
[data-day-trend="up"] .holding-row-price-sub { color: var(--market-up); }
[data-day-trend="down"] .holding-row-price-sub { color: var(--market-down); }
[data-pl-trend="up"] .holding-row-pl-main,
[data-pl-trend="up"] .holding-row-pl-sub { color: var(--market-up); }
[data-pl-trend="down"] .holding-row-pl-main,
[data-pl-trend="down"] .holding-row-pl-sub { color: var(--market-down); }
[data-trend="up"] .watchlist-row-quote-pct { color: var(--market-up); }
[data-trend="down"] .watchlist-row-quote-pct { color: var(--market-down); }

.pf-add-date-wrap { display: flex; flex-direction: column; gap: 4px; flex: 0 1 160px; }
.pf-add-date-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); padding-left: 2px; }
.pf-add-date { flex: none; width: 100%; color-scheme: dark; }
:root[data-theme="light"] .pf-add-date { color-scheme: light; }

/* Capital gains estimate — sized to match the holding rows just above it
   (13-14px symbols, generous row padding) rather than reading as a dense
   afterthought bolted onto the bottom of the page. */
.pf-cgt-card { padding: 20px 22px; margin-top: 14px; }
.pf-cgt-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.pf-cgt-head h3 { font-size: 15px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.pf-cgt-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); background: var(--surface-2); padding: 3px 9px; border-radius: var(--radius-full); }
.pf-cgt-rate-inputs { display: flex; gap: 16px; flex-wrap: wrap; }
.pf-cgt-rate-inputs label { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 7px; }
.pf-cgt-rate-inputs input {
    width: 58px; padding: 6px 8px; font-size: 13px; text-align: right;
    background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    color: var(--text-primary); font-family: var(--font-mono);
}
.pf-cgt-rows-head, .pf-cgt-row {
    display: grid; grid-template-columns: 1.4fr 92px 104px 96px 104px; gap: 10px; align-items: center;
}
.pf-cgt-rows-head { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); padding: 0 14px 8px; }
.pf-cgt-rows-head span:not(:first-child), .pf-cgt-row span:not(.pf-cgt-sym) { text-align: right; }
.pf-cgt-row { padding: 14px; border-top: 1px solid var(--border-subtle); font-size: 13.5px; }
.pf-cgt-row:first-child { border-top: none; }
.pf-cgt-sym { font-weight: 800; font-family: var(--font-mono); font-size: 14px; }
.pf-cgt-period { color: var(--text-muted); font-family: var(--font-mono); font-size: 12.5px; }
.pf-cgt-period i { font-style: normal; opacity: .7; }
.pf-cgt-term { font-size: 12.5px; font-weight: 700; }
.pf-cgt-term.short { color: var(--accent-orange); }
.pf-cgt-term.long { color: var(--accent-blue-light); }
.pf-cgt-gain { color: var(--market-up); font-family: var(--font-mono); font-weight: 600; }
.pf-cgt-tax { font-weight: 800; font-family: var(--font-mono); }
.pf-cgt-total { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-subtle); font-size: 13.5px; color: var(--text-secondary); text-align: right; }
.pf-cgt-total b { color: var(--text-primary); font-family: var(--font-mono); font-size: 17px; }
.pf-cgt-note { margin-top: 12px; font-size: 11.5px; line-height: 1.7; color: var(--text-dim); }
@media (max-width: 640px) {
    .pf-add-date-wrap { flex-basis: 100%; }
    .pf-cgt-rows-head { display: none; }
    .pf-cgt-row { grid-template-columns: 1fr auto; grid-template-areas: "sym tax" "period term" "gain gain"; row-gap: 6px; }
    .pf-cgt-sym { grid-area: sym; } .pf-cgt-tax { grid-area: tax; } .pf-cgt-period { grid-area: period; text-align: left; }
    .pf-cgt-term { grid-area: term; } .pf-cgt-gain { grid-area: gain; text-align: left; }
}

.holding-row-remove, .watchlist-row-star {
    flex-shrink: 0; background: none; border: none; cursor: pointer;
    padding: 4px;
    transition: color var(--duration-fast);
}
.holding-row-remove { color: var(--text-muted); }
.holding-row-remove:hover { color: var(--market-down); }
.watchlist-row-star { color: #f59e0b; font-size: 18px; }

.watchlist-row-w52 { width: 60px; flex-shrink: 0; }
.watchlist-row-w52-track { height: 4px; background: var(--surface-3); border-radius: 2px; }
.watchlist-row-w52-fill { height: 100%; border-radius: 2px; }
.watchlist-row-w52-label { font-size: 9px; color: var(--text-muted); text-align: center; margin-top: 2px; }

/* Composite signal badges */
.composite-signal {
    display: inline-flex; align-items: center;
    padding: 3px 10px;
    font-size: 10px; font-weight: 700;
    border-radius: var(--radius-full);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.composite-signal.buy, .composite-signal.strong-buy {
    background: var(--market-up-bg); color: var(--market-up);
    border: 1px solid rgba(16,185,129,0.2);
}
.composite-signal.sell, .composite-signal.strong-sell {
    background: var(--market-down-bg); color: var(--market-down);
    border: 1px solid rgba(239,68,68,0.2);
}

/* Confidence bar */
.confidence-bar {
    height: 3px; background: var(--bg-elevated);
    border-radius: 2px; overflow: hidden;
    margin-top: 6px;
}
.confidence-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--accent-blue);
    transition: width var(--duration-slow);
}


/* ═══ Stock Lists (Gainers/Losers/Activity) ═══ */
.stock-list {
    padding: 0;
}

.stock-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--border-subtle);
    transition: background var(--duration-fast);
    cursor: pointer;
    position: relative;
}
.stock-item::before { display: none; }
.stock-item:hover { background: var(--surface-1); }
.stock-item:hover::before { display: none; }
.stock-item:last-child { border-bottom: none; }

.stock-item .symbol {
    font-weight: 700; font-size: 13px;
    color: var(--text-primary);
    min-width: 60px;
}

.stock-item .name {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.stock-item .price {
    font-family: var(--font-mono);
    font-size: 13px; font-weight: 600;
    color: var(--text-primary);
    text-align: right;
    min-width: 70px;
}

.stock-item .change {
    font-family: var(--font-mono);
    font-size: 12px; font-weight: 600;
    text-align: right;
    min-width: 60px;
    padding: 2px 8px;
    border-radius: 4px;
}
.stock-item .change.positive { color: var(--market-up); background: var(--market-up-bg); }
.stock-item .change.negative { color: var(--market-down); background: var(--market-down-bg); }
.stock-item .change.neutral { color: var(--text-muted); }

.stock-symbol {
    font-weight: 700; font-size: 13px;
    color: var(--accent-blue);
    cursor: pointer;
    transition: color var(--duration-fast);
}
.stock-symbol:hover { color: #3b82f6; }


/* ═══ Data Tables ═══ */
.table-container {
    overflow-x: auto;
    padding: 0;
    -webkit-overflow-scrolling: touch;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

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

.data-table th {
    padding: 10px 14px;
    font-size: 11px; font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    cursor: default;
    user-select: none;
}

.data-table th:hover { color: var(--text-secondary); }
.data-table th.sorted { color: var(--accent-blue); }

.data-table td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
    color: var(--text-primary);
    vertical-align: middle;
}

.data-table tbody tr {
    transition: background var(--duration-fast);
}
.data-table tbody tr:hover { background: var(--surface-1); }
.data-table tbody tr:hover td:first-child { color: var(--accent-blue); }

.data-table .mono { font-family: var(--font-mono); font-weight: 500; }
.data-table .positive { color: var(--market-up); }
.data-table .negative { color: var(--market-down); }

/* Screener quick-preview: an expanded row beneath the clicked one, not a
   navigation — the whole point is never losing the filtered list. */
.data-table tbody tr.preview-active { background: var(--surface-1); }
.data-table tbody tr.preview-active td:first-child { color: var(--accent-blue); }
#screener-preview-row > td { white-space: normal; cursor: default; padding: 0; border-bottom: 1px solid var(--border-color); }
.screener-preview {
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
    padding: 16px 20px; background: var(--surface-1);
    animation: screenerPreviewIn var(--duration-normal) var(--ease-out);
}
@keyframes screenerPreviewIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.screener-preview-verdict { flex: 0 0 220px; }
.screener-preview-verdict > b { font-size: 14px; font-weight: 800; color: var(--text-primary); }
.screener-preview-verdict.up > b { color: var(--market-up); }
.screener-preview-verdict.down > b { color: var(--market-down); }
.screener-preview-verdict ul { margin: 6px 0 0; padding-left: 16px; }
.screener-preview-verdict li { font-size: 11.5px; color: var(--text-muted); line-height: 1.5; }
.screener-preview-stats { display: flex; gap: 20px; flex-wrap: wrap; flex: 1 1 auto; }
.screener-preview-stat { display: flex; flex-direction: column; gap: 3px; }
.screener-preview-stat span { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }
.screener-preview-stat b { font-size: 13px; font-weight: 700; font-family: var(--font-mono); color: var(--text-primary); }

/* Sortable columns */
.sortable, .sortable-screen {
    cursor: pointer !important;
    user-select: none;
    transition: color var(--duration-fast);
}
.sortable:hover, .sortable-screen:hover { color: var(--accent-blue) !important; }
.sortable.sorted, .sortable-screen.sorted { color: var(--accent-blue) !important; }

.market-table-wrapper { overflow-x: auto; }


/* ═══ Heatmap ═══ */
.heatmap-container {
    padding: 16px;
    min-height: 200px;
}

.heatmap-controls {
    display: flex; gap: 4px;
}

.btn-heatmap-mode {
    padding: 5px 14px;
    font-size: 12px; font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-main);
    transition: all var(--duration-fast);
}
.btn-heatmap-mode:hover { color: var(--text-secondary); }
.btn-heatmap-mode.active {
    background: rgba(37,99,235,0.1);
    color: var(--accent-blue);
    border-color: rgba(37,99,235,0.25);
}

.heatmap-legend {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 12px;
    justify-content: center;
}

.legend-gradient {
    width: 200px; height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--heat-n5), var(--heat-n3), var(--heat-0), var(--heat-p3), var(--heat-p5));
}

.legend-label { font-size: 10px; color: var(--text-muted); font-weight: 600; }

.heatmap-sectors {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}

/* Every tile is the same size — a two-line sector name must not make its row
   taller than the others. */
.heatmap-sector, .heatmap-tile {
    padding: 14px 16px;
    min-height: 96px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--duration-fast);
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
}
.heatmap-sector::before, .heatmap-tile::before { display: none; }
.heatmap-sector:hover, .heatmap-tile:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    border-color: var(--surface-4);
}

.heatmap-sector-label, .heatmap-stock-symbol {
    font-size: 12px; font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.heatmap-sector-change, .heatmap-stock-pct {
    font-size: 16px; font-weight: 800;
    font-family: var(--font-mono);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    margin-top: 4px;
}

.heatmap-sector-count { 
    font-size: 10px; 
    color: rgba(255,255,255,0.6); 
    margin-top: 4px; 
}

.heatmap-stock-ltp, .heatmap-stock-pct {
    font-family: var(--font-mono);
}

.heatmap-stocks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 4px;
}

.heatmap-stock {
    padding: 10px 8px;
    min-height: 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    border-radius: var(--radius-sm);
    text-align: center;
    cursor: pointer;
    transition: all var(--duration-fast);
    position: relative;
}
.heatmap-stock::before { display: none; }
.heatmap-stock:hover { transform: scale(1.03); }

.heatmap-stock-symbol, .tile-symbol { font-size: 11px; font-weight: 700; color: #fff; }
.heatmap-stock-ltp, .tile-ltp { font-size: 10px; color: rgba(255,255,255,0.7); }
.heatmap-stock-pct, .tile-change { font-size: 12px; font-weight: 700; color: #fff; }

.heatmap-tooltip {
    position: absolute;
    padding: 10px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    pointer-events: none;
    font-size: 12px;
}
.tt-symbol { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.tt-row { display: flex; justify-content: space-between; gap: 16px; margin-top: 2px; }
.tt-label { color: var(--text-muted); }
.tt-value { font-family: var(--font-mono); font-weight: 600; }

/* ═══ Sector Drilldown ═══ */
.sector-drilldown { padding: 16px; }
.sector-drilldown.hidden { display: none; }

.drilldown-header {
    display: flex; align-items: center; gap: 16px;
    margin-bottom: 16px; flex-wrap: wrap;
}
.drilldown-header h2 { font-size: 18px; font-weight: 700; }
.drilldown-stats { font-size: 13px; color: var(--text-secondary); }
.drilldown-stocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }


/* ═══ Sectors Grid (Dashboard) ═══ */
.sector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    padding: 12px 16px;
}

/* Ranked sector leaderboard (updateSectors()) — up/down tint mirrors
   .hot-stock-card's language so the two "biggest mover" surfaces read
   as one visual system. */
.sector-perf-tile {
    position: relative;
    padding: 10px 14px;
    background: var(--surface-1);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--border-subtle);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--duration-fast);
}
.sector-perf-tile:hover { background: var(--surface-2); border-color: var(--border-color); transform: translateY(-1px); }
.sector-perf-tile.up { border-left-color: var(--market-up); background: linear-gradient(90deg, rgba(16,185,129,0.07), transparent 60%); }
.sector-perf-tile.down { border-left-color: var(--market-down); background: linear-gradient(90deg, rgba(239,68,68,0.07), transparent 60%); }

.sector-perf-name {
    font-size: 12px; font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 3px;
}
.sector-perf-value { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--text-primary); }
.sector-perf-change { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; margin-top: 2px; }
.sector-perf-tile.up .sector-perf-change { color: var(--market-up); }
.sector-perf-tile.down .sector-perf-change { color: var(--market-down); }

.sector-perf-rank {
    position: absolute; top: -7px; right: 8px;
    font-size: 8.5px; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase;
    color: #fff;
    background: var(--gradient-brand);
    padding: 2px 7px;
    border-radius: var(--radius-full);
}

.sector-header-tile { font-weight: 700; }


/* ═══ Screener ═══ */
.preset-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0;
    position: relative;
}
.preset-bar::-webkit-scrollbar { display: none; }

.preset-btn, .btn-preset {
    padding: 6px 14px;
    font-size: 12px; font-weight: 600;
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--duration-fast);
    font-family: var(--font-main);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.preset-btn:hover, .btn-preset:hover {
    color: var(--text-secondary);
    border-color: var(--text-muted);
}
/* Fill/border now come from the shared .liquid-tab-indicator gliding
   underneath (positionGroupIndicator) instead of a static per-button
   background swap — same pattern already used for .mover-tab. */
.preset-btn.active, .btn-preset.active {
    color: var(--accent-blue);
}

.filters-row {
    display: flex; align-items: flex-end; gap: 10px;
    padding: 14px 18px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.filter-grid { display: flex; gap: 10px; flex-wrap: wrap; }

.filter-group { display: flex; flex-direction: column; gap: 4px; }
.filter-group label, .filter-label {
    font-size: 10px; font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.filter-group input, .filter-input,
.filter-group select, .filter-select {
    padding: 7px 12px;
    font-size: 12px;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-family: var(--font-main);
    outline: none;
    transition: border-color var(--duration-fast);
    min-width: 100px;
}
.filter-group input:focus, .filter-input:focus,
.filter-group select:focus, .filter-select:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
}
.filter-group select option, .filter-select option {
    background: var(--bg-card);
    color: var(--text-primary);
}

.filter-presets { display: flex; gap: 6px; flex-wrap: wrap; }

.screener-count {
    font-size: 13px; color: var(--text-muted); font-weight: 500;
}
.screener-count strong { color: var(--text-primary); font-weight: 700; }

/* Broker directory */
.broker-search-input {
    width: 100%; box-sizing: border-box; padding: 10px 14px; font-size: 13px;
    border-radius: var(--radius-lg); background: var(--bg-input); border: 1px solid var(--border-color);
    color: var(--text-primary); font-family: var(--font-main); outline: none;
    transition: border-color var(--duration-fast);
}
.broker-search-input:focus { border-color: var(--border-hover); }
.broker-row {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-subtle);
    transition: background var(--duration-fast);
}
.broker-row:last-child { border-bottom: none; }
.broker-row:hover { background: var(--surface-1); }
.broker-row-code {
    flex: 0 0 34px; text-align: center;
    font-family: var(--font-mono); font-size: 11px; font-weight: 700;
    color: var(--text-muted); background: var(--surface-2); border-radius: var(--radius-sm);
    padding: 3px 0;
}
.broker-row-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.broker-row-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.broker-row-dealer {
    font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
    padding: 2px 7px; border-radius: var(--radius-full);
    background: rgba(124,58,237,0.12); color: var(--accent-purple);
}
.broker-row-phone { flex: 0 0 auto; font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }
.broker-row-tms {
    flex: 0 0 auto; padding: 6px 14px; border-radius: var(--radius-lg);
    background: rgba(37,99,235,0.1); border: 1px solid rgba(37,99,235,0.2);
    color: var(--accent-blue-light); font-size: 12px; font-weight: 700;
    text-decoration: none; white-space: nowrap;
    transition: background var(--duration-fast), border-color var(--duration-fast);
}
.broker-row-tms:hover { background: rgba(37,99,235,0.16); border-color: rgba(37,99,235,0.32); }
.broker-row-tms.disabled { background: none; border: none; color: var(--text-dim); font-weight: 500; }
@media (max-width: 640px) {
    .broker-row { flex-wrap: wrap; }
    .broker-row-phone { flex: 1 1 auto; }
}

.screener-filters { display: flex; gap: 8px; flex-wrap: wrap; }

/* 52W Position bar */
.w52-bar {
    width: 60px; height: 4px;
    background: var(--bg-elevated);
    border-radius: 2px;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
}
.w52-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--accent-blue);
}
.w52-pct { font-size: 11px; font-weight: 600; margin-left: 6px; }
.w52-text { font-size: 11px; color: var(--text-muted); }


/* ═══ Analysis Page ═══ */
.analysis-search {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.analysis-input {
    flex: 1; min-width: 200px;
    padding: 10px 16px;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-family: var(--font-main);
    outline: none;
    transition: border-color var(--duration-fast);
}
.analysis-input::placeholder { color: var(--text-muted); }
.analysis-input:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
}

.analysis-input-row {
    display: flex; gap: 8px;
}
.analysis-input-row input {
    flex: 1;
    padding: 8px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 13px;
    outline: none;
}
.analysis-input-row input::placeholder { color: var(--text-muted); }
.analysis-input-row input:focus { border-color: var(--accent-blue); }

.analysis-results { }
.analysis-results.hidden { display: none !important; }

/* ─── Autocomplete Dropdown ─── */
.ac-dropdown {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    z-index: 999;
    margin-top: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    max-height: 340px;
    overflow-y: auto;
    display: none;
    backdrop-filter: blur(16px);
}
.ac-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.12s;
    border-bottom: 1px solid var(--surface-2);
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item.ac-active {
    background: rgba(99,102,241,0.1);
}
.ac-symbol {
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 14px;
    color: var(--accent-blue);
    min-width: 70px;
}
.ac-name {
    flex: 1;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ac-sector {
    font-size: 10px;
    color: var(--text-muted);
    background: var(--surface-2);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

/* Stock Header */
.stock-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 20px 24px;
    margin-bottom: 16px;
    gap: 12px; flex-wrap: wrap;
}

.stock-info h2 {
    font-size: 18px; font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.stock-price-big {
    font-size: 28px; font-weight: 800;
    font-family: var(--font-mono);
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.stock-change-big {
    font-size: 15px; font-weight: 700;
    font-family: var(--font-mono);
    padding: 3px 10px;
    border-radius: var(--radius-sm);
}
.stock-change-big.positive { color: var(--market-up); background: var(--market-up-bg); }
.stock-change-big.negative { color: var(--market-down); background: var(--market-down-bg); }
.stock-change-big.neutral { color: var(--text-muted); }

.data-status { display: flex; align-items: center; gap: 8px; }
.data-badge {
    font-size: 11px; font-weight: 600;
    padding: 4px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    color: var(--text-muted);
}

/* Stock Details Grid */
.stock-details-grid {
    padding: 16px 20px;
    margin-bottom: 16px;
}

.stock-detail-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle);
}
.stock-detail-row:last-child { border-bottom: none; }

.stock-detail-item { display: flex; flex-direction: column; gap: 2px; }

.detail-label {
    font-size: 10px; font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.detail-value {
    font-size: 14px; font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-primary);
}
.detail-value.positive { color: var(--market-up); }
.detail-value.negative { color: var(--market-down); }


/* Chart controls */
.chart-controls { display: flex; gap: 4px; }

.btn-chart-period {
    padding: 5px 12px;
    font-size: 11px; font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-main);
    transition: all var(--duration-fast);
}
.btn-chart-period:hover { color: var(--text-secondary); }
.btn-chart-period.active {
    background: rgba(37,99,235,0.12);
    color: var(--accent-blue);
    border-color: rgba(37,99,235,0.3);
}

.chart-wrapper {
    padding: 12px 16px;
    min-height: 300px;
}


/* ═══ AI Assistant (In-page + Drawer) ═══ */
.assistant-wrapper {
    display: flex; flex-direction: column;
}

.assistant-chat-history {
    max-height: 400px;
    overflow-y: auto;
    padding: 16px;
    display: flex; flex-direction: column; gap: 12px;
}

.assistant-msg {
    display: flex; gap: 10px; align-items: flex-start;
}
.assistant-msg.user { flex-direction: row-reverse; }
.assistant-msg.assistant { }

.msg-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800;
    flex-shrink: 0;
}

.msg-content {
    padding: 10px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius) var(--radius) var(--radius) 4px;
    font-size: 13px; line-height: 1.6;
    color: var(--text-secondary);
    max-width: 80%;
}

.assistant-presets {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 10px 16px;
    border-top: 1px solid var(--border-subtle);
}

.btn-preset-query {
    padding: 5px 12px;
    font-size: 11px; font-weight: 600;
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    cursor: pointer;
    font-family: var(--font-main);
    transition: all var(--duration-fast);
}
.btn-preset-query:hover { color: var(--text-secondary); border-color: var(--text-muted); }

.assistant-input-row {
    display: flex; gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-subtle);
}
.assistant-input-row input {
    flex: 1;
    padding: 9px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 13px;
    outline: none;
}
.assistant-input-row input::placeholder { color: var(--text-muted); }
.assistant-input-row input:focus { border-color: var(--accent-blue); }
.assistant-input-row button {
    padding: 9px 18px;
    background: var(--accent-blue);
    color: #fff; font-weight: 600; font-size: 12px;
    border: none; border-radius: var(--radius);
    cursor: pointer;
    font-family: var(--font-main);
    display: flex; align-items: center; gap: 5px;
}
.assistant-input-row button:hover { background: #3b82f6; }


/* ═══ IQ Drawer (Global Chat) ═══ */
.iq-drawer-tab {
    position: fixed; right: 0;
    top: 50%; transform: translateY(-50%);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-right: none;
    border-radius: var(--radius) 0 0 var(--radius);
    padding: 12px 8px;
    cursor: pointer;
    z-index: 999;
    display: flex; flex-direction: column;
    align-items: center; gap: 6px;
    transition: all var(--duration-fast);
    box-shadow: var(--shadow-md);
}
.iq-drawer-tab.hidden { display: none; }
.iq-drawer-tab:hover {
    background: var(--bg-card-hover);
    padding-right: 12px;
}

.iq-tab-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent-blue);
    animation: status-pulse 2s ease-in-out infinite;
}

.iq-tab-label {
    writing-mode: vertical-rl;
    font-size: 11px; font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
}

.iq-drawer {
    position: fixed; right: -420px; top: 0; bottom: 0;
    width: 400px; max-width: 100vw;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    z-index: 1001;
    display: flex; flex-direction: column;
    transition: right var(--duration-slow) var(--ease-out);
    box-shadow: -8px 0 32px rgba(0,0,0,0.4);
}
.iq-drawer.open { right: 0; }
.iq-drawer.expanded { width: 600px; }

.iq-drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.iq-drawer-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--gradient-brand);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

.iq-drawer-btn {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    transition: all var(--duration-fast);
}
.iq-drawer-btn:hover { color: var(--text-primary); background: var(--surface-4); }

.iq-drawer-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex; flex-direction: column; gap: 12px;
}

.iq-chat-msg {
    display: flex; gap: 10px; align-items: flex-start;
}
.iq-chat-msg.user { flex-direction: row-reverse; }
.iq-chat-msg.user .iq-msg-avatar {
    background: rgba(37,99,235,0.15);
    color: var(--accent-blue);
}
.iq-chat-msg.user .iq-msg-bubble {
    background: rgba(37,99,235,0.08);
    border-color: rgba(37,99,235,0.15);
    border-radius: var(--radius) 4px var(--radius) var(--radius);
}

.iq-msg-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--gradient-brand);
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

.iq-msg-bubble {
    padding: 10px 14px;
    background: var(--surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: 4px var(--radius) var(--radius) var(--radius);
    font-size: 13px; line-height: 1.6;
    color: var(--text-secondary);
    max-width: 85%;
    word-wrap: break-word;
}

/* IQ Analysis Blocks */
.iq-analysis { margin-top: 8px; }
.iq-section { margin-bottom: 8px; }
.iq-label { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; }
.iq-text { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.iq-value { font-family: var(--font-mono); font-weight: 600; font-size: 13px; color: var(--text-primary); }
.iq-levels { display: flex; gap: 16px; margin-top: 4px; }
.iq-support { color: var(--market-up); font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.iq-resist { color: var(--market-down); font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.iq-disclaimer { 
    font-size: 10px; color: var(--text-dim); 
    margin-top: 8px; padding-top: 6px; 
    border-top: 1px solid var(--border-subtle); 
    font-style: italic; 
}
.iq-disclaimer::after { display: none; }

.iq-drawer-suggestions {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 10px 16px;
    border-top: 1px solid var(--border-subtle);
    flex-shrink: 0;
}
.iq-drawer-suggestions button {
    padding: 5px 12px;
    font-size: 11px; font-weight: 600;
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    cursor: pointer;
    font-family: var(--font-main);
    transition: all var(--duration-fast);
}
.iq-drawer-suggestions button:hover {
    color: var(--text-secondary);
    border-color: var(--text-muted);
}

.iq-drawer-input {
    display: flex; gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}
.iq-drawer-input input {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 13px;
    outline: none;
}
.iq-drawer-input input::placeholder { color: var(--text-muted); }
.iq-drawer-input input:focus { border-color: var(--accent-blue); }
.iq-drawer-input button {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-blue);
    color: #fff;
    border: none; border-radius: var(--radius);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--duration-fast);
}
.iq-drawer-input button:hover { background: #3b82f6; }


/* ═══ Indicators Grid (Analysis) ═══ */
.indicators-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
    padding: 12px 16px;
}

.indicator-card {
    padding: 12px 14px;
    background: var(--surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    transition: all var(--duration-fast);
}
.indicator-card:hover { background: var(--surface-2); }

.indicator-name { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.indicator-value { font-size: 16px; font-weight: 700; font-family: var(--font-mono); color: var(--text-primary); margin-top: 2px; }
.indicator-signal {
    display: inline-block; font-size: 10px; font-weight: 700;
    padding: 2px 8px; border-radius: var(--radius-full);
    margin-top: 4px; text-transform: uppercase;
}
.indicator-signal.buy { color: var(--market-up); background: var(--market-up-bg); }
.indicator-signal.sell { color: var(--market-down); background: var(--market-down-bg); }
.indicator-signal.neutral { color: var(--text-muted); background: var(--surface-2); }

/* Predictions */
.predictions-panel { padding: 12px 16px; }
.prediction-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    margin-bottom: 8px;
    transition: background var(--duration-fast);
}
.prediction-item:hover { background: var(--surface-1); }
.prediction-model { font-size: 12px; font-weight: 600; color: var(--text-primary); min-width: 80px; }
.prediction-value { font-family: var(--font-mono); font-weight: 700; font-size: 14px; }
.prediction-direction { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; }
.prediction-direction.bullish { color: var(--market-up); background: var(--market-up-bg); }
.prediction-direction.bearish { color: var(--market-down); background: var(--market-down-bg); }
.prediction-confidence { font-size: 11px; color: var(--text-muted); }


/* ═══ Landing Page ═══ */
.landing-hero {
    position: relative;
    padding: 80px 24px 60px;
    text-align: center;
    overflow: hidden;
    background: var(--gradient-hero);
}

/* Animated grid background */
.landing-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(99,102,241,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99,102,241,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, black 30%, transparent 80%);
    animation: gridPulse 8s ease-in-out infinite;
}

@keyframes gridPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* Glowing orb */
.hero-glow {
    position: absolute;
    top: -20%; left: 50%; transform: translateX(-50%);
    width: 700px; height: 500px;
    background: radial-gradient(ellipse, rgba(37,99,235,0.1) 0%, rgba(124,58,237,0.05) 40%, transparent 70%);
    pointer-events: none;
    animation: glowFloat 10s ease-in-out infinite;
}

.landing-hero::after {
    content: '';
    position: absolute;
    bottom: -20%; right: 10%;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(16,185,129,0.06) 0%, transparent 60%);
    pointer-events: none;
    animation: glowFloat 12s ease-in-out infinite reverse;
}

@keyframes glowFloat {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-20px); }
}

.hero-content {
    position: relative; z-index: 1;
    max-width: 750px; margin: 0 auto;
}

.hero-badge {
    display: inline-flex; align-items: center;
    padding: 6px 18px;
    font-size: 12px; font-weight: 600;
    color: var(--accent-blue);
    background: rgba(37,99,235,0.08);
    border: 1px solid rgba(37,99,235,0.15);
    border-radius: var(--radius-full);
    margin-bottom: 28px;
    animation: fadeInUp 0.8s ease-out;
    backdrop-filter: blur(8px);
}

.hero-title {
    font-size: 46px; font-weight: 900;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin-bottom: 18px;
    animation: fadeInUp 0.8s ease-out 0.1s both;
}

.hero-text-white { color: var(--text-primary); }
.hero-text-gradient {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 40%, #a855f7 70%, #6366f1 100%);
    background-size: 200% auto;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 6s ease-in-out infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% center; }
    50% { background-position: 100% center; }
    100% { background-position: 0% center; }
}

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

.hero-subtitle {
    font-size: 16px; line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 36px;
    max-width: 560px; margin-left: auto; margin-right: auto;
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

.hero-stats {
    display: flex; align-items: center; justify-content: center;
    gap: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 0;
    margin-bottom: 32px;
    max-width: 600px; margin-left: auto; margin-right: auto;
    overflow: hidden;
    animation: fadeInUp 0.8s ease-out 0.3s both;
    box-shadow: var(--shadow-md);
}

.hero-stat {
    padding: 18px 28px;
    text-align: center;
    flex: 1;
}

.hero-stat-divider {
    width: 1px; height: 44px;
    background: linear-gradient(180deg, transparent, rgba(99,102,241,0.2), transparent);
    flex-shrink: 0;
}

.hero-stat-label {
    font-size: 10px; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 6px;
}

.hero-stat-value {
    font-size: 20px; font-weight: 800;
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.hero-cta {
    display: flex; align-items: center; justify-content: center;
    gap: 14px;
    margin-top: 28px;
    flex-wrap: wrap;
    animation: fadeInUp 0.8s ease-out 0.4s both;
}


/* ═══ Feature Cards — Bento Grid ═══ */
.landing-features {
    padding: 80px 24px;
    max-width: 1000px;
    margin: 0 auto;
}

.features-header {
    text-align: center;
    margin-bottom: 48px;
}
.features-header h2 {
    font-size: 30px; font-weight: 900;
    letter-spacing: -1px;
    line-height: 1.2;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.feature-card {
    padding: 28px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
}

/* Animated gradient border on hover */
.feature-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(99,102,241,0.3), rgba(139,92,246,0.2), rgba(16,185,129,0.2));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s;
}

.feature-card:hover::before { opacity: 1; }

.feature-card:hover {
    border-color: transparent;
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.15), 0 0 60px rgba(99,102,241,0.05);
}

/* Bento layout: first and fourth cards span 2 columns */
.feature-card:nth-child(1) { grid-column: span 2; }
.feature-card:nth-child(4) { grid-column: span 2; }

.feature-card h3 {
    font-size: 16px; font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
    margin-top: 14px;
}
.feature-card p {
    font-size: 13px; line-height: 1.7;
    color: var(--text-secondary);
}

/* ═══ IPO Result Checker page ═══ */
.ipo-hero { position: relative; overflow: hidden; padding-bottom: 0; }
.ipo-hero-wash {
    position: absolute; top: -60%; left: -10%; width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(37,99,235,0.08) 0%, transparent 70%);
    pointer-events: none;
}
.ipo-hero h1 { display: flex; align-items: center; gap: 12px; }
.ipo-hero-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(37,99,235,0.15), rgba(139,92,246,0.15));
    color: var(--accent-blue-light);
}

.ipo-check-card { padding: 28px; border-radius: var(--radius-xl); max-width: 650px; margin: 0 auto 20px; }

.ipo-select, .ipo-input { width: 100%; padding: 12px 14px; font-size: 14px; border-radius: var(--radius-lg); box-sizing: border-box; }
.ipo-hint { font-size: 11px; color: var(--text-dim); margin-top: 4px; }

/* ── Numbered steps ────────────────────────────────────────────────────
   The page used to be a stack of unlabelled fields where the same box was
   both "type a BOID to check" and "type a BOID to save" — people could not
   tell which button applied to what. Numbering the two decisions, and
   giving BOIDs their own section, removes the guesswork. */
.ipo-step { margin-bottom: 22px; }
.ipo-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ipo-step-num {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(37,99,235,0.14); border: 1px solid rgba(37,99,235,0.30);
    color: var(--accent-blue); font-size: 11px; font-weight: 800;
}
.ipo-step-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.ipo-saved-count { margin-left: auto; font-size: 11px; color: var(--text-dim); font-weight: 600; }

.ipo-boid-section {
    padding: 14px; border-radius: var(--radius-xl);
    background: var(--bg-input); border: 1px solid var(--border-color);
}
.ipo-saved-list { display: flex; flex-direction: column; gap: 8px; }

/* ── A saved BOID ──────────────────────────────────────────────────── */
.boid-card {
    display: flex; align-items: center; gap: 6px;
    padding: 6px; border-radius: var(--radius-lg);
    background: var(--bg-card); border: 1px solid var(--border-color);
    transition: border-color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
}
.boid-card.is-selected { border-color: rgba(37,99,235,0.45); background: rgba(37,99,235,0.07); }

.boid-pick {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px;
    padding: 6px; background: none; border: 0; cursor: pointer;
    font-family: var(--font-main); text-align: left; color: inherit;
}
.boid-avatar {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800; letter-spacing: 0.3px;
    color: hsl(var(--boid-hue, 210) 70% 62%);
    background: hsl(var(--boid-hue, 210) 70% 55% / 0.16);
    border: 1px solid hsl(var(--boid-hue, 210) 70% 55% / 0.28);
}
.boid-avatar .ic { width: 16px; height: 16px; opacity: 0.85; }
.boid-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.boid-name {
    font-size: 14px; font-weight: 700; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.boid-num {
    font-size: 11px; color: var(--text-dim);
    font-family: var(--font-mono, monospace); letter-spacing: 0.4px;
}
.boid-check {
    flex-shrink: 0; margin-left: auto; width: 22px; height: 22px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--border-color); color: transparent;
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                transform var(--duration-normal) var(--ease-spring);
}
.boid-check .ic { width: 13px; height: 13px; }
.boid-card.is-selected .boid-check {
    background: var(--accent-blue); border-color: var(--accent-blue);
    color: #fff; transform: scale(1.06);
}

.boid-tools { flex-shrink: 0; display: flex; gap: 0; }
.boid-tool {
    width: 28px; height: 28px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0; cursor: pointer;
    color: var(--text-dim); opacity: 0.75;
    transition: background var(--duration-fast), color var(--duration-fast), opacity var(--duration-fast);
}
.boid-tool:hover { background: var(--bg-card-hover); color: var(--text-primary); opacity: 1; }
.boid-tool .ic { width: 14px; height: 14px; }
.boid-tool.is-primary { color: var(--accent-blue); opacity: 1; }

/* Inline rename — no native prompt() */
.boid-card.is-editing { padding: 6px 6px 6px 12px; gap: 9px; }
.boid-rename {
    flex: 1; min-width: 0; padding: 8px 10px; font-size: 14px; font-weight: 600;
    border-radius: 9px; background: var(--bg-input); color: var(--text-primary);
    border: 1px solid var(--accent-blue); font-family: var(--font-main); outline: none;
}

/* Two-step remove — a 16-digit number is a pain to find again */
.boid-card.is-deleting {
    padding: 10px 12px; gap: 8px;
    border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.07);
}
.boid-confirm-text { flex: 1; min-width: 0; font-size: 13px; color: var(--text-secondary); }
.boid-confirm-text strong { color: var(--text-primary); }
.boid-confirm-no, .boid-confirm-yes {
    flex-shrink: 0; padding: 7px 13px; border-radius: 9px;
    font-size: 12px; font-weight: 700; cursor: pointer; font-family: var(--font-main);
}
.boid-confirm-no { background: none; border: 1px solid var(--border-color); color: var(--text-secondary); }
.boid-confirm-yes { background: var(--market-down); border: 1px solid var(--market-down); color: #fff; }

/* Empty state */
.boid-empty { text-align: center; padding: 22px 16px 8px; }
.boid-empty-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 14px; margin-bottom: 10px;
    background: rgba(37,99,235,0.10); border: 1px solid rgba(37,99,235,0.22);
    color: var(--accent-blue);
}
.boid-empty-title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.boid-empty-sub { font-size: 12px; color: var(--text-muted); line-height: 1.6; max-width: 300px; margin: 0 auto; }

/* ── Add / select-all row ──────────────────────────────────────────── */
.ipo-boid-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.ipo-add-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 15px; border-radius: var(--radius-lg);
    background: rgba(37,99,235,0.12); border: 1px solid rgba(37,99,235,0.30);
    color: var(--accent-blue); font-size: 13px; font-weight: 700;
    cursor: pointer; font-family: var(--font-main);
    transition: background var(--duration-fast), border-color var(--duration-fast);
}
.ipo-add-btn:hover { background: rgba(37,99,235,0.18); border-color: rgba(37,99,235,0.45); }
.ipo-add-btn .ic { width: 13px; height: 13px; }
.ipo-select-all { margin-left: auto; font-size: 11px; color: var(--accent-blue); cursor: pointer; font-weight: 700; }

/* ── Add form ──────────────────────────────────────────────────────── */
.ipo-add-form {
    margin-top: 12px; padding: 14px; border-radius: var(--radius-lg);
    background: var(--bg-card); border: 1px solid rgba(37,99,235,0.28);
}
.ipo-add-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.ipo-add-field { position: relative; }
.ipo-add-label {
    display: block; margin-bottom: 5px; font-size: 11px; font-weight: 700;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px;
}
.ipo-add-input { width: 100%; padding: 11px 13px; font-size: 14px; border-radius: 10px; box-sizing: border-box; }
.ipo-add-boid { padding-right: 54px; font-family: var(--font-mono, monospace); letter-spacing: 0.6px; }
.ipo-add-counter {
    position: absolute; right: 12px; bottom: 12px;
    font-size: 11px; font-weight: 700; color: var(--text-dim);
    font-family: var(--font-mono, monospace); pointer-events: none;
}
.ipo-add-counter.is-ok { color: var(--market-up); }
.ipo-add-counter.is-bad { color: var(--market-down); }
.ipo-add-msg { margin-top: 9px; font-size: 11px; color: var(--text-muted); line-height: 1.6; }
.ipo-add-msg.is-ok { color: var(--market-up); }
.ipo-add-msg.is-bad { color: var(--market-down); }
.ipo-add-buttons { display: flex; gap: 8px; margin-top: 12px; }
.ipo-add-cancel, .ipo-add-save {
    flex: 1; padding: 11px; border-radius: 10px;
    font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--font-main);
    transition: opacity var(--duration-fast), transform var(--duration-fast) var(--ease-spring);
}
.ipo-add-cancel { background: none; border: 1px solid var(--border-color); color: var(--text-secondary); }
.ipo-add-save { background: var(--accent-blue); border: 1px solid var(--accent-blue); color: #fff; }
.ipo-add-save:disabled { opacity: 0.42; cursor: not-allowed; }
.ipo-add-save:not(:disabled):hover { transform: translateY(-1px); }

/* ── One-off (don't save) escape hatch ─────────────────────────────── */
.ipo-oneoff { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-color); }
.ipo-oneoff-toggle { font-size: 11px; color: var(--text-muted); cursor: pointer; font-weight: 600; }
.ipo-oneoff-toggle:hover { color: var(--accent-blue); }
.ipo-oneoff-wrap { margin-top: 9px; }
.ipo-down-note {
    margin-bottom: 20px; padding: 14px 16px; border-radius: var(--radius-lg);
    background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.22);
}
.ipo-down-title { font-size: 13px; font-weight: 800; color: var(--accent-orange); margin-bottom: 5px; }
.ipo-down-sub { font-size: 12px; color: var(--text-secondary); line-height: 1.65; }
.ipo-down-link {
    display: inline-block; margin-top: 10px; padding: 8px 14px; border-radius: 9px;
    background: rgba(245,158,11,0.14); border: 1px solid rgba(245,158,11,0.32);
    color: var(--accent-orange); font-size: 12px; font-weight: 700; text-decoration: none;
}
.ipo-down-link:hover { background: rgba(245,158,11,0.22); }
.ipo-check-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.ipo-check-btn:disabled:hover { transform: none; }
.ipo-oneoff-foot { display: flex; align-items: baseline; gap: 12px; }
.ipo-oneoff-foot .ipo-hint { flex: 1; min-width: 0; }
.ipo-oneoff-save {
    flex-shrink: 0; font-size: 11px; font-weight: 700;
    color: var(--accent-blue); cursor: pointer;
}

@media (min-width: 480px) {
    .ipo-add-grid { grid-template-columns: 120px 1fr; }
}

.ipo-check-btn {
    width: 100%; padding: 14px;
    background: var(--gradient-brand); border: none; border-radius: var(--radius-lg);
    color: #fff; font-size: 15px; font-weight: 800; cursor: pointer; letter-spacing: 0.3px;
    font-family: var(--font-main);
    box-shadow: 0 4px 20px rgba(37,99,235,0.3);
    transition: transform var(--duration-fast) var(--ease-out);
}
.ipo-check-btn:hover { transform: translateY(-1px); }

.ipo-quick-links { max-width: 650px; margin: 0 auto 20px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.ipo-quick-link {
    display: flex; flex-direction: column; align-items: center; padding: 18px 12px;
    text-decoration: none; gap: 6px; text-align: center;
}
/* Same specificity as .feature-card:nth-child(1/4)'s bento span, later in source order,
   so it wins — this grid is a plain 3-up row, not the landing page's bento layout. */
.ipo-quick-links .ipo-quick-link { grid-column: auto; }
.ipo-quick-link-title { font-size: 11px; font-weight: 700; color: var(--text-primary); }
.ipo-quick-link-sub { font-size: 10px; color: var(--text-muted); }

.ipo-tips-card { padding: 20px 24px; border-radius: var(--radius-xl); max-width: 650px; margin: 0 auto; border: 1px solid rgba(16,185,129,0.1); }
.ipo-tips-card h3 { font-size: 12px; font-weight: 700; color: var(--accent-green); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }
.ipo-tips-card div { font-size: 12px; color: var(--text-secondary); line-height: 1.8; }

/* Reusable small loading spinner (IPO result rows, etc.) */
.spinner {
    display: inline-block; flex-shrink: 0;
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.25);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    vertical-align: middle;
}

/* IPO result rows */
.ipo-result-row {
    padding: 16px; border-radius: var(--radius-lg); margin-bottom: 8px;
    display: flex; align-items: center; gap: 12px;
}
.ipo-result-row.pending { background: var(--bg-input); border: 1px solid var(--border-color); }
.ipo-result-row.allotted { background: var(--market-up-bg); border: 1px solid rgba(16,185,129,0.2); }
.ipo-result-row.failed { background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.15); }
.ipo-result-row.not-allotted { background: var(--market-down-bg); border: 1px solid rgba(239,68,68,0.15); }
.ipo-result-row .ic-xl { flex-shrink: 0; }
.ipo-result-label { font-size: 14px; font-weight: 700; }
.ipo-result-row.allotted .ipo-result-label { color: var(--market-up); }
.ipo-result-row.failed .ipo-result-label { color: var(--accent-orange); }
.ipo-result-row.not-allotted .ipo-result-label { color: var(--market-down); }
.ipo-result-row.pending .ipo-result-label { color: var(--text-secondary); }
.ipo-result-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.ipo-result-who { font-weight: 700; color: var(--text-secondary); }
.ipo-result-row .spinner { width: 18px; height: 18px; border-color: rgba(139,92,246,0.3); color: var(--accent-purple); }

/* Landing/contact quick-action cards and footer link buttons — a shared
   --card-accent(-base) custom property lets one hover rule serve many
   per-instance accent colors instead of a JS mouseenter/leave hack. */
.demo-card {
    padding: 20px; border-radius: 16px; cursor: pointer;
    border: 1px solid var(--surface-3);
    transition: transform var(--duration-normal) var(--ease-spring), border-color var(--duration-normal) var(--ease-out);
}
.demo-card:hover { transform: translateY(-3px); border-color: var(--card-accent, var(--border-hover)); }

.ai-screener-btn { transition: transform var(--duration-fast) var(--ease-spring); }
.ai-screener-btn:hover { transform: scale(1.03); }

.contact-quick-card {
    padding: 20px; border-radius: 14px; text-align: center; cursor: pointer;
    border: 1px solid rgba(var(--card-accent-base, 148,163,184), 0.15);
    transition: border-color var(--duration-normal) var(--ease-out);
}
.contact-quick-card:hover { border-color: rgba(var(--card-accent-base, 148,163,184), 0.3); }

.footer-link-btn { border: 1px solid var(--btn-border-base, var(--surface-4)); transition: border-color var(--duration-normal) var(--ease-out); }
.footer-link-btn:hover { border-color: rgba(var(--card-accent-base, 148,163,184), 0.3); }

.smart-signal-card { transition: background var(--duration-fast) var(--ease-out); }
.smart-signal-card:hover { background: var(--surface-1); }

.ai-screener-result-row { background: var(--surface-1); transition: background var(--duration-fast) var(--ease-out); }
.ai-screener-result-row:hover { background: var(--surface-2); }

.iq-suggestion-chip { background: rgba(37,99,235,0.08); transition: background var(--duration-fast) var(--ease-out); }
.iq-suggestion-chip:hover { background: rgba(37,99,235,0.15); }

.feature-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
}

/* CTA Section */
.landing-cta {
    text-align: center;
    padding: 60px 24px;
    border-top: 1px solid var(--border-subtle);
}
.landing-cta h2 { font-size: 24px; font-weight: 800; margin-bottom: 8px; }
.landing-cta p { color: var(--text-secondary); font-size: 14px; }


/* ═══ Learn Page ═══ */
.learn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.learn-card {
    padding: 20px;
    cursor: pointer;
    transition: all var(--duration-normal);
    position: relative;
}
.learn-card::before { display: none; }
.learn-card:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.learn-card:hover::before { display: none; }

.learn-card h3, .learn-card-title { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.learn-card p, .learn-card-desc { font-size: 12px; line-height: 1.6; color: var(--text-secondary); }
.learn-card-icon { margin-bottom: 12px; }

.learn-tag {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10px; font-weight: 600;
    border-radius: var(--radius-full);
    margin-top: 10px;
    color: var(--text-muted);
    background: var(--surface-2);
}


/* ═══ News Page ═══ */
/* Reuses panel/card styles */


/* ═══ Community Page ═══ */
.community-card {
    padding: 16px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    margin-bottom: 8px;
    transition: border-color var(--duration-fast);
}
.community-card:hover { border-color: var(--border-hover); }
.community-vote-btn:focus { outline: 2px solid var(--accent-blue); outline-offset: 2px; }


/* ═══ IPO Page ═══ */
.ipo-section { margin-bottom: 24px; }

.ipo-input-row {
    display: flex; gap: 8px;
    align-items: stretch;
}
.ipo-input-row input {
    flex: 1;
    padding: 10px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 14px;
    outline: none;
}
.ipo-input-row input::placeholder { color: var(--text-muted); }
.ipo-input-row input:focus { border-color: var(--accent-blue); }
.ipo-input-row button {
    padding: 10px 24px;
    background: var(--accent-blue);
    color: #fff; font-weight: 600; font-size: 13px;
    border: none; border-radius: var(--radius);
    cursor: pointer;
    font-family: var(--font-main);
}
.ipo-input-row button:hover { background: #3b82f6; }

.ipo-result {
    margin-top: 16px;
    padding: 16px 20px;
    border-radius: var(--radius);
    font-size: 14px;
}
.ipo-result.allotted {
    background: var(--market-up-bg);
    border: 1px solid rgba(16,185,129,0.2);
    color: var(--market-up);
}
.ipo-result.not-allotted {
    background: var(--market-down-bg);
    border: 1px solid rgba(239,68,68,0.2);
    color: var(--market-down);
}


/* ═══ Contact Form ═══ */
.contact-form { max-width: 500px; }

.form-group {
    margin-bottom: 16px;
}
.form-group label {
    display: block;
    font-size: 12px; font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.form-group input, .form-group textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 13px;
    outline: none;
    transition: border-color var(--duration-fast);
}
.form-group input:focus, .form-group textarea:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
}
.form-group textarea { min-height: 120px; resize: vertical; }


/* ═══ Search Inputs ═══ */
.search-bar { display: flex; align-items: center; }
.search-box { position: relative; }
.search-box .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.search-box input {
    padding: 8px 14px 8px 36px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 13px;
    outline: none;
}
.search-box input::placeholder { color: var(--text-muted); }
.search-box input:focus { border-color: var(--accent-blue); }

.search-input {
    padding: 8px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 13px;
    min-width: 200px;
    outline: none;
}
.search-input::placeholder { color: var(--text-muted); }
.search-input:focus { border-color: var(--accent-blue); }


/* ═══ Stats Grid ═══ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    padding: 12px 16px;
}

.stat-card {
    padding: 14px 16px;
    background: var(--surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    position: relative;
    transition: all var(--duration-fast);
}
.stat-card::after { display: none; }
.stat-card:hover { background: var(--surface-2); }
.stat-card:hover::after { display: none; }

.stat-label { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.stat-value { font-size: 18px; font-weight: 800; font-family: var(--font-mono); color: var(--text-primary); margin-top: 4px; }
.stat-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }


/* ═══ Empty & Error States ═══ */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.error-message {
    padding: 14px 18px;
    background: var(--market-down-bg);
    border: 1px solid rgba(239,68,68,0.2);
    border-radius: var(--radius);
    color: var(--market-down);
    font-size: 13px;
}

.loading-state {
    display: flex; align-items: center; justify-content: center;
    padding: 32px;
    color: var(--text-muted);
}


/* ═══ Toast Notifications ═══ */
.toast-container {
    position: fixed;
    top: calc(var(--nav-height) + 12px);
    right: 16px;
    z-index: 10001;
    display: flex; flex-direction: column; gap: 8px;
}

.toast {
    padding: 12px 18px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 13px; font-weight: 500;
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
    animation: toast-in 0.3s var(--ease-out);
    max-width: 340px;
}
.toast.success { border-left: 3px solid var(--market-up); }
.toast.error { border-left: 3px solid var(--market-down); }
.toast.warning { border-left: 3px solid var(--accent-yellow); }
.toast.info { border-left: 3px solid var(--accent-blue); }
.toast-exit { animation: toast-out 0.3s ease-in forwards; }

@keyframes toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(20px); } }


/* ═══ Footer ═══ */
.footer {
    margin-top: 40px;
    border-top: 1px solid var(--border-color);
    padding: 32px 20px 24px;
    position: relative;
}
.footer::before { display: none; }

.footer-content {
    max-width: var(--container-max);
    margin: 0 auto;
    text-align: center;
}

.footer-brand {
    font-weight: 800; font-size: 16px;
    background: var(--gradient-brand);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 12px;
    display: inline-block;
}

.footer-text {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 16px;
}

.footer-links {
    display: flex; flex-wrap: wrap; gap: 12px;
    justify-content: center;
    margin-bottom: 16px;
}

.footer-link {
    font-size: 12px; font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--duration-fast);
}
.footer-link:hover { color: var(--text-secondary); }


/* ═══ Redirect/Loading Spinner ═══ */
.redirect-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    color: var(--text-muted);
}


/* ═══ Dual Panel Layout ═══ */
.dual-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}


/* ═══════════════════════════════════════════════ */
/*  RESPONSIVE — Mobile First                     */
/* ═══════════════════════════════════════════════ */

/* Tablet and below */
@media (max-width: 1024px) {
    .nav-links { gap: 0; }
    .nav-link { padding: 8px 10px; font-size: 12px; }
    .dual-panel { grid-template-columns: 1fr; }
}

/* Tablet portrait */
@media (max-width: 768px) {
    /* Suggestion rows: symbol + sector on the first line, the company
       name wrapping onto its own full-width line underneath, so the
       name is readable instead of ellipsised into nothing. */
    .ac-item { gap: 8px; padding: 11px 14px; flex-wrap: wrap; }
    .ac-symbol { min-width: 0; }
    .ac-name { flex: 1 1 100%; order: 3; white-space: normal; font-size: 11.5px; }
    .ac-sector { margin-left: auto; }

    /* Nav controls that are defined further up the file — these have to
       live here, after those definitions, or the base rules win. */
    .theme-toggle { padding: 2px; }
    .theme-toggle-track { width: 38px; height: 21px; }
    .theme-toggle-thumb { width: 15px; height: 15px; }
    .theme-toggle-thumb .ic { width: 10px; height: 10px; }
    :root[data-theme="light"] .theme-toggle-thumb { transform: translateX(18px); }
    /* Signed-out state was a full text pill fighting the search box for the
       same ~360px — collapse to a circular icon button matching the signed-in
       avatar's own size/shape below, so search (the thing people actually
       came to use) gets the room instead. */
    .acct-signin { width: 32px; height: 32px; padding: 0; border-radius: 50%; justify-content: center; }
    .acct-signin-icon { display: block; }
    .acct-signin-text { display: none; }
    .acct-avatar { width: 28px; height: 28px; font-size: 12px; }
    /* Theme toggle moves into the mobile "More" sheet (#theme-toggle-mobile)
       instead of sitting in the congested top bar — it's the least-frequently
       touched of the three controls fighting for room there. */
    #theme-toggle { display: none; }

    html { font-size: 13.5px; }
    
    .main-content { padding-left: 12px; padding-right: 12px; }
    
    /* Hide desktop nav links on mobile, show bottom nav */
    .nav-links { display: none; }
    .mobile-bottom-nav { display: flex; }
    
    /* Adjust main content for bottom nav */
    .main-content { padding-bottom: calc(var(--mobile-nav-height) + 20px); }

    /* Sit above the bottom bar, not on top of it. At bottom:16px this
       banner covered the whole mobile nav (and the Markets sheet) until
       it was dismissed, so a first-time visitor could not navigate. */
    .cookie-banner { bottom: calc(var(--mobile-nav-height) + 12px); left: 10px; right: 10px; }
    
    /* Market pulse stacks */
    .pulse-main { flex-direction: column; }
    .pulse-index { border-right: none; border-bottom: 1px solid var(--border-subtle); padding: 16px 18px; }
    .pulse-stats { padding: 8px; }
    .pulse-stat { min-width: 65px; padding: 8px 10px; }
    .pulse-stat-value { font-size: 13px; }
    .pulse-value { font-size: 24px; }
    
    /* Hero responsive */
    .hero-title { font-size: 28px; }
    .hero-subtitle { font-size: 14px; }
    .hero-stats { flex-wrap: wrap; }
    .hero-stat { padding: 12px 16px; }
    .hero-stat-divider { display: none; }
    .landing-hero { padding: 60px 16px 40px; }
    
    .features-grid { grid-template-columns: 1fr; }
    .feature-card:nth-child(1), .feature-card:nth-child(4) { grid-column: span 1; }
    .features-header h2 { font-size: 22px; }
    
    /* Stock detail */
    .stock-detail-row { grid-template-columns: repeat(2, 1fr); }
    .stock-header { flex-direction: column; }
    .stock-price-big { font-size: 22px; }
    
    /* Analysis */
    .analysis-search { flex-direction: column; }
    .analysis-input { width: 100%; min-width: unset; }
    
    /* Filters */
    .filters-row { flex-direction: column; gap: 8px; }
    .filter-group { width: 100%; }
    .filter-group input, .filter-input, .filter-group select, .filter-select { width: 100%; min-width: unset; }
    
    /* Tables on mobile → card-style */
    .data-table th:nth-child(n+5),
    .data-table td:nth-child(n+5) { display: none; }
    .data-table th, .data-table td { padding: 8px 10px; font-size: 12px; }
    
    /* Sectors */
    .sector-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    
    /* Heatmap */
    .heatmap-sectors { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

    /* IQ Drawer full width on mobile */
    .iq-drawer { width: 100%; right: -100%; }
    .iq-drawer-tab { display: none; }
    
    /* Indicators */
    .indicators-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
    
    /* Learn */
    .learn-grid { grid-template-columns: 1fr; }
    
    /* Section headers */
    .section-header h1 { font-size: 18px; }
}

/* Small phones */
@media (max-width: 480px) {
    html { font-size: 13px; }
    
    .main-content { padding-left: 8px; padding-right: 8px; }
    .page { padding: 12px 0 32px; }
    
    .navbar { padding: 0 12px; }
    .brand-name { font-size: 15px; }
    
    .pulse-value { font-size: 22px; }
    .pulse-stats { flex-wrap: wrap; }
    .pulse-stat { flex: 1 1 30%; min-width: 70px; border-right: none; border-bottom: 1px solid var(--border-subtle); }
    
    .hero-title { font-size: 24px; }
    .hero-stat-value { font-size: 15px; }
    
    .panel-header { padding: 12px 14px; }
    .panel-header h2 { font-size: 13px; }
    
    .stock-detail-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    
    .data-table th:nth-child(n+4),
    .data-table td:nth-child(n+4) { display: none; }
    
    .preset-btn { padding: 5px 10px; font-size: 11px; }
    
    .sector-grid { grid-template-columns: 1fr 1fr; }
    
    .signals-grid { padding: 8px 12px; }
    
    .assistant-chat-history { padding: 12px; max-height: 300px; }
}


/* ═══ Print Styles ═══ */
@media print {
    .navbar, .mobile-bottom-nav, .iq-drawer, .iq-drawer-tab,
    .toast-container, .loading-overlay { display: none !important; }
    body { background: #fff; color: #000; }
    .glass, .panel { background: #fff; border: 1px solid #ddd; }
}

/* Community chat is switched off while the app goes through Play review.
   One class on <body> hides every entry point; see the comment above <body>
   in index.html for how to bring it back. Marked !important so it wins
   regardless of where a panel rule sits in this file. */
body.no-community [data-community] { display: none !important; }