@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ── Viewport-adaptive scaling ──────────────────────────────────────────────
   Reference resolution: 1440 × 860px. At exactly 1440px wide the font-size
   is 16px and all rem values match the design spec below. Narrower viewports
   scale down (min 12px), wider viewports scale up (max 20px).
   Every element sized in rem — including the --t-* type tokens — scales
   proportionally so the layout looks correct on any monitor size.
   ───────────────────────────────────────────────────────────────────────── */
html {
    font-size: clamp(12px, calc(100vw / 1440 * 16), 20px);
}

/* CSS Variables for Themes - CONTENT AREAS ONLY */
:root {
    /* ── Typefaces ─────────────────────────────────────────────── */
    --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
    --font-display: 'Instrument Serif', Georgia, serif;

    /* ── Type scale — rem-based so it scales with the html font-size above.
       Reference: 16px html base (1440px viewport). Values match the old px
       spec exactly at 1440px width.                                        */
    --t-xs:   0.5625rem;  /* ≈  9px @ 1440 — labels, timestamps, badges   */
    --t-sm:   0.6875rem;  /* ≈ 11px @ 1440 — secondary text, captions     */
    --t-base: 0.8125rem;  /* ≈ 13px @ 1440 — body, inputs, paragraphs     */
    --t-md:   1rem;       /* = 16px @ 1440 — nav links, subtext emphasis  */
    --t-lg:   1.1875rem;  /* ≈ 19px @ 1440 — card titles, subheadings     */
    --t-xl:   1.4375rem;  /* ≈ 23px @ 1440 — section headings (h3)        */
    --t-2xl:  1.6875rem;  /* ≈ 27px @ 1440 — page headings (h2)           */
    --t-3xl:  2rem;       /* = 32px @ 1440 — major headings (h1)          */
    --t-4xl:  2.4375rem;  /* ≈ 39px @ 1440 — hero headings                */
    --t-5xl:  2.9375rem;  /* ≈ 47px @ 1440 — display / stat callouts      */

    /* ── Motion tokens ─────────────────────────────────────────── */
    --ease-enter:  cubic-bezier(0.22, 1, 0.36, 1);   /* fast-in, gentle-settle  */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot        */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);    /* smooth deceleration     */
    --dur-fast:    100ms;
    --dur-base:    220ms;
    --dur-slow:    400ms;

    /* LIGHT MODE — Cool Slate (default) */
    --bg-color: #f1f3f6;
    --text-color: #1a1a2e;
    --border-color: #dde1e7;
    --card-bg: #ffffff;
    --shadow: rgba(0, 0, 0, 0.07);
    --primary-accent: #b5651d;    /* copper — readable on light bg */
    --secondary-accent: #c87941;
    --primary-accent-rgb: 181,101,29; /* fallback; JS overrides this */
    --accent-gradient: linear-gradient(135deg, #b5651d, #c87941);
    --accent-gradient-size: 100%;
    --success: #2a9d5c;
    --warning: #d97706;
    --danger: #dc2626;
    --gray-200: #dde1e7;

    /* HEADER-SPECIFIC VARIABLES FOR LIGHT MODE */
    --header-bg: #ffffff;
    --header-text: #1a1a2e;
    --header-border: #dde1e7;
    --nav-link-bg: #f1f3f6;
    --nav-link-text: #475569;
    --nav-link-hover-bg: #b5651d;
    --nav-link-hover-text: #ffffff;
    --input-bg: #ffffff;
    --input-text: #1a1a2e;
    --input-border: #c8cdd6;
    --input-focus-border: #b5651d;

    /* SOLO MODE GAME VARIABLES FOR LIGHT MODE */
    --tower-bg: linear-gradient(135deg, #f4f6fa, #edf0f5);
    --reveal-bg: linear-gradient(135deg, #f4f6fa, #e8ecf3);
    --game-card-glow: 0 20px 30px -10px rgba(var(--primary-accent-rgb), 0.2);
    --very-bullish: #7C3AED;
    --bullish: #2a9d5c;
    --bearish: #F59E0B;
    --very-bearish: #DC2626;
    --gold: #f0b429;
    --silver: #94a3b8;
    --bronze: #c87941;
    --text-muted: #475569;
}

/* ── Warm Ore theme — unlocks at Level 3 ─────────────────── */
[data-theme="warm"] {
    --bg-color: #f4f1ee;
    --text-color: #1a1a2e;
    --border-color: #e0d9d1;
    --card-bg: #ffffff;
    --shadow: rgba(0, 0, 0, 0.07);
    --success: #2a9d5c;
    --warning: #d97706;
    --danger: #dc2626;
    --gray-200: #e0d9d1;

    --header-bg: #ffffff;
    --header-text: #1a1a2e;
    --header-border: #e0d9d1;
    --nav-link-bg: #f4f1ee;
    --nav-link-text: #475569;
    --nav-link-hover-text: #ffffff;
    --input-bg: #ffffff;
    --input-text: #1a1a2e;
    --input-border: #d1c9bf;

    --tower-bg: linear-gradient(135deg, #fdf6ee, #f4ece0);
    --reveal-bg: linear-gradient(135deg, #fdf6ee, #f0e8d8);
    --game-card-glow: 0 20px 30px -10px rgba(var(--primary-accent-rgb), 0.2);
    --very-bullish: #7C3AED;
    --bullish: #2a9d5c;
    --bearish: #F59E0B;
    --very-bearish: #DC2626;
    --gold: #f0b429;
    --silver: #94a3b8;
    --bronze: #c87941;
    --text-muted: #475569;
}

/* ── Light-mode component polish ─────────────────────────── */
body[data-theme="light"] input,
body[data-theme="light"] select,
body[data-theme="light"] textarea {
    background: #ffffff !important;
    border-color: var(--input-border) !important;
    color: var(--text-color) !important;
}
body[data-theme="light"] input::placeholder,
body[data-theme="light"] textarea::placeholder {
    color: #6b7280 !important;
    opacity: 1 !important;
}
body[data-theme="warm"] input::placeholder,
body[data-theme="warm"] textarea::placeholder {
    color: #6b7280 !important;
    opacity: 1 !important;
}

body[data-theme="light"] input:focus,
body[data-theme="light"] select:focus,
body[data-theme="light"] textarea:focus,
body[data-theme="warm"] input:focus,
body[data-theme="warm"] select:focus,
body[data-theme="warm"] textarea:focus {
    border-color: var(--input-focus-border) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-accent-rgb), 0.14) !important;
    outline: none !important;
}

/* Dark mode inputs also get the accent glow */
body[data-theme="dark"] input:focus,
body[data-theme="dark"] select:focus,
body[data-theme="dark"] textarea:focus {
    border-color: var(--input-focus-border) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-accent-rgb), 0.18) !important;
    outline: none !important;
}

/* Muted secondary text — uses --text-muted token per theme */
.muted, [class*="-muted"], .text-muted { color: var(--text-muted); }
body[data-theme="light"] .muted,
body[data-theme="light"] [class*="-muted"],
body[data-theme="light"] .text-muted,
body[data-theme="warm"] .muted,
body[data-theme="warm"] [class*="-muted"],
body[data-theme="warm"] .text-muted {
    color: var(--text-muted) !important;
}

/* Light/warm mode cards — subtle depth only, no accent ring */
body[data-theme="light"] .card,
body[data-theme="light"] .stat-card,
body[data-theme="light"] .profile-card,
body[data-theme="light"] .settings-card,
body[data-theme="warm"] .card,
body[data-theme="warm"] .stat-card,
body[data-theme="warm"] .profile-card,
body[data-theme="warm"] .settings-card {
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04) !important;
}

/* Light mode section titles pick up accent border */
body[data-theme="light"] .section-title,
body[data-theme="warm"] .section-title {
    border-bottom-color: var(--primary-accent);
}

[data-theme="dark"] {
    /* DARK MODE - Ore & Copper Theme */
    --bg-color: #0c0e14;            /* near-black with blue-grey tint */
    --text-color: #e8e4dd;          /* warm white — less harsh than pure #e2e8f0 */
    --border-color: #252838;        /* subtle blue-grey border */
    --card-bg: #13161f;             /* dark charcoal card */
    --shadow: rgba(0, 0, 0, 0.45);
    --primary-accent: #c87941;
    --primary-accent-rgb: 200, 121, 65;
    --success: #2ec27e;
    --warning: #f0b429;
    --danger: #e5534b;
    --gray-200: #252838;

    /* HEADER-SPECIFIC VARIABLES FOR DARK MODE */
    --header-bg: #09090f;
    --header-text: #e8e4dd;
    --header-border: #1a1d28;
    --nav-link-bg: #13161f;
    --nav-link-text: #b0a99e;
    --nav-link-hover-text: #ffffff;
    --input-bg: #13161f;
    --input-text: #e8e4dd;
    --input-border: #2e3244;

    /* SOLO MODE GAME VARIABLES FOR DARK MODE */
    --tower-bg: linear-gradient(135deg, #161820, #0c0e14);
    --reveal-bg: linear-gradient(135deg, #1c1510, #0c0e14);
    --game-card-glow: 0 20px 30px -10px rgba(var(--primary-accent-rgb), 0.25);
    --very-bullish: #7C3AED;
    --bullish: #2ec27e;
    --bearish: #F59E0B;
    --very-bearish: #DC2626;
    --gold: #f0b429;
    --silver: #9ea8b8;
    --bronze: #c87941;
    --text-muted: #7a8694;
}

[data-theme="blue"] {
    /* BLUE THEME - Alternative */
    --bg-color: #1e3a8a;
    /* Deep Navy */
    --text-color: #e2e8f0;
    --border-color: #3b82f6;
    --card-bg: #2563eb;
    --shadow: rgba(0, 0, 0, 0.4);
    --success: #34d399;
    --warning: #fbbf24;
    --danger: #f87171;
    --gray-200: #3b82f6;

    /* HEADER-SPECIFIC VARIABLES FOR BLUE THEME */
    --header-bg: #1e3a8a;
    --header-text: #e2e8f0;
    --header-border: #3b82f6;
    --nav-link-bg: #2563eb;
    --nav-link-text: #e2e8f0;
    --nav-link-hover-text: #ffffff;
    --input-bg: #1e293b;
    --input-text: #e2e8f0;
    --input-border: #3b82f6;

    /* SOLO MODE GAME VARIABLES FOR BLUE THEME */
    --tower-bg: linear-gradient(135deg, #1e3a8a, #172554);
    --reveal-bg: linear-gradient(135deg, #2d1b3a, #1a1f35);
    --game-card-glow: 0 20px 30px -10px rgba(96, 165, 250, 0.3);
    --very-bullish: #7C3AED;
    --bullish: #3b82f6;
    --bearish: #F59E0B;
    --very-bearish: #DC2626;
    --gold: #f59e0b;
    --silver: #cbd5e1;
    --bronze: #b45309;
}

/* ================================= */
/* BASE STYLES */
/* ================================= */

* {
    box-sizing: border-box;
}

/* Base body - switches with theme */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-sans);
    margin: 0;
    padding: 0;
    transition: background-color 0.3s ease, color 0.3s ease;
    min-height: 100vh;
    overflow-y: auto;
}

/* ── Display settings ───────────────────────────────────────── */

/* Reduce Motion — disables all transitions and animations */
body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}

/* High Contrast — sharpens borders and text on dark bg */
body.high-contrast {
    --text-color: #ffffff !important;
    --border-color: rgba(255,255,255,0.35) !important;
}
body.high-contrast[data-theme="light"],
body.high-contrast[data-theme="warm"] {
    --text-color: #000000 !important;
    --border-color: rgba(0,0,0,0.45) !important;
}
body.high-contrast .card,
body.high-contrast .stat-card,
body.high-contrast .thread-item,
body.high-contrast .discussed-stocks,
body.high-contrast .mode-card,
body.high-contrast .settings-card {
    border-width: 2px !important;
}

/* Large Text — global 112% scale */
body.large-text {
    font-size: 112%;
}
body.large-text h1 { font-size: 2.4rem; }
body.large-text h2 { font-size: 1.9rem; }
body.large-text h3 { font-size: 1.5rem; }
body.large-text h4 { font-size: 1.2rem; }

/* ── Prism accent animated gradient ────────────────────────── */
@keyframes prism-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
body[data-accent="prism"] .btn-copper,
body[data-accent="prism"] button.btn-copper {
    background: linear-gradient(135deg, #f43f5e, #f59e0b, #4ade80, #38bdf8, #a78bfa);
    background-size: 300% 300%;
    animation: prism-shift 4s ease infinite;
    border: none;
    color: #fff;
}
body[data-accent="prism"] .btn-copper:hover,
body[data-accent="prism"] button.btn-copper:hover {
    opacity: 0.88;
    color: #fff;
}
body[data-accent="prism"] .accent-preview-bar {
    background: linear-gradient(90deg, #f43f5e, #f59e0b, #4ade80, #38bdf8, #a78bfa);
    background-size: 300% 300%;
    animation: prism-shift 3s ease infinite;
}

/* ── Background textures — accent-aware, theme-split ────────── */

/* Dark: dot grid tinted by accent + corner glow */
body[data-theme="dark"] {
    background-image:
        radial-gradient(ellipse 55% 35% at 95% 2%,  rgba(var(--primary-accent-rgb), 0.07) 0%, transparent 70%),
        radial-gradient(ellipse 45% 30% at 5%  98%, rgba(var(--primary-accent-rgb), 0.05) 0%, transparent 70%),
        radial-gradient(circle, rgba(var(--primary-accent-rgb), 0.08) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 24px 24px;
}

/* Light: fine crosshatch (premium paper feel) */
body[data-theme="light"] {
    background-image:
        radial-gradient(ellipse 50% 30% at 90% 0%, rgba(var(--primary-accent-rgb), 0.06) 0%, transparent 65%),
        radial-gradient(ellipse 40% 25% at 10% 100%, rgba(var(--primary-accent-rgb), 0.04) 0%, transparent 65%),
        linear-gradient(rgba(var(--primary-accent-rgb), 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--primary-accent-rgb), 0.05) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 32px 32px, 32px 32px;
}

/* Warm: diamond/lozenge grid — handcrafted feel */
body[data-theme="warm"] {
    background-image:
        radial-gradient(ellipse 50% 30% at 90% 0%, rgba(var(--primary-accent-rgb), 0.08) 0%, transparent 65%),
        radial-gradient(ellipse 40% 25% at 10% 100%, rgba(var(--primary-accent-rgb), 0.05) 0%, transparent 65%),
        linear-gradient(45deg, rgba(var(--primary-accent-rgb), 0.06) 1px, transparent 1px),
        linear-gradient(-45deg, rgba(var(--primary-accent-rgb), 0.06) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 28px 28px, 28px 28px;
}

/* ── Unlockable background themes ──────────────────────────────────────
   Each theme sets CSS variables + a distinct background texture.
   Colors are fixed per-theme (not accent-aware) to preserve the mood.
   ────────────────────────────────────────────────────────────────────── */

/* Lv 8 — Underground: deep earth, geological strata bands */
[data-theme="underground"] {
    --bg-color:      #15110a;
    --text-color:    #ddd4b8;
    --border-color:  #352a18;
    --card-bg:       #1e1610;
    --shadow:        rgba(0,0,0,0.6);
    --header-bg:     #0f0c07;
    --header-text:   #ddd4b8;
    --header-border: #2a2010;
    --nav-link-bg:   #1e1610;
    --nav-link-text: #a09070;
    --input-bg:      #1e1610;
    --input-text:    #ddd4b8;
    --input-border:  #352a18;
    --input-focus-border: var(--primary-accent);
    --success: #8fbc5a; --warning: #d4841a; --danger: #c04a3a;
    --gray-200: #352a18;
    --tower-bg: linear-gradient(135deg, #1e1610, #15110a);
    --reveal-bg: linear-gradient(135deg, #231a0c, #15110a);
    --game-card-glow: 0 20px 30px -10px rgba(var(--primary-accent-rgb), 0.25);
    --very-bullish: #7C3AED; --bullish: #8fbc5a; --bearish: #D4841A; --very-bearish: #C04A3A;
    --gold: #c8881a; --silver: #8a9aa8; --bronze: #9a6028;
}
body[data-theme="underground"] {
    background-image:
        radial-gradient(ellipse 60% 30% at 50% -5%, rgba(var(--primary-accent-rgb), 0.05) 0%, transparent 60%),
        repeating-linear-gradient(180deg,
            transparent 0px, transparent 34px,
            rgba(80,50,10,0.20) 34px, rgba(80,50,10,0.20) 36px),
        repeating-linear-gradient(180deg,
            transparent 0px, transparent 88px,
            rgba(100,65,15,0.14) 88px, rgba(100,65,15,0.14) 92px);
    background-size: 100% 100%, 100% 36px, 100% 92px;
}

/* Lv 22 — Steel Exchange: dark with fine orthogonal 1px grid */
[data-theme="steel"] {
    --bg-color:      #111418;
    --text-color:    #c8d4dc;
    --border-color:  #1e2830;
    --card-bg:       #161c22;
    --shadow:        rgba(0,0,0,0.5);
    --header-bg:     #0c1014;
    --header-text:   #c8d4dc;
    --header-border: #1a2028;
    --nav-link-bg:   #161c22;
    --nav-link-text: #7a8c9a;
    --input-bg:      #161c22;
    --input-text:    #c8d4dc;
    --input-border:  #1e2830;
    --input-focus-border: var(--primary-accent);
    --success: #20c060; --warning: #d49020; --danger: #c84040;
    --gray-200: #1e2830;
    --tower-bg: linear-gradient(135deg, #161c22, #111418);
    --reveal-bg: linear-gradient(135deg, #181e26, #111418);
    --game-card-glow: 0 20px 30px -10px rgba(var(--primary-accent-rgb), 0.2);
    --very-bullish: #7C3AED; --bullish: #20c060; --bearish: #D49020; --very-bearish: #C84040;
    --gold: #c8a020; --silver: #9ab0c0; --bronze: #a07040;
}
body[data-theme="steel"] {
    background-image:
        radial-gradient(ellipse 40% 30% at 95% 5%, rgba(var(--primary-accent-rgb), 0.06) 0%, transparent 60%),
        linear-gradient(rgba(var(--primary-accent-rgb), 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--primary-accent-rgb), 0.04) 1px, transparent 1px);
    background-size: 100% 100%, 40px 40px, 40px 40px;
}

/* Lv 30 — Malachite Vault: deep forest green, organic ring pattern */
[data-theme="malachite"] {
    --bg-color:      #091410;
    --text-color:    #d0ecd8;
    --border-color:  #163020;
    --card-bg:       #0d1c16;
    --shadow:        rgba(0,0,0,0.55);
    --header-bg:     #060e0a;
    --header-text:   #d0ecd8;
    --header-border: #102818;
    --nav-link-bg:   #0d1c16;
    --nav-link-text: #70a880;
    --input-bg:      #0d1c16;
    --input-text:    #d0ecd8;
    --input-border:  #163020;
    --input-focus-border: var(--primary-accent);
    --success: #4ade80; --warning: #a0c020; --danger: #e05040;
    --gray-200: #163020;
    --tower-bg: linear-gradient(135deg, #0d1c16, #091410);
    --reveal-bg: linear-gradient(135deg, #0f2018, #091410);
    --game-card-glow: 0 20px 30px -10px rgba(var(--primary-accent-rgb), 0.25);
    --very-bullish: #7C3AED; --bullish: #4ade80; --bearish: #A0C020; --very-bearish: #E05040;
    --gold: #a0b820; --silver: #70a880; --bronze: #608050;
}
body[data-theme="malachite"] {
    background-image:
        radial-gradient(ellipse 60% 50% at 50% 50%, rgba(var(--primary-accent-rgb), 0.06) 0%, transparent 65%),
        radial-gradient(ellipse 80% 60% at 15% 85%, rgba(10,70,35,0.3) 0%, transparent 55%),
        repeating-radial-gradient(circle at 50% 40%,
            transparent 0, transparent 30px,
            rgba(var(--primary-accent-rgb), 0.04) 31px, transparent 32px);
    background-size: 100% 100%, 100% 100%, 100% 100%;
}

/* Lv 40 — The Pit: near-black, deep vignette, scattered grain */
[data-theme="pit"] {
    --bg-color:      #060608;
    --text-color:    #a8a4a0;
    --border-color:  #141418;
    --card-bg:       #0a0a0e;
    --shadow:        rgba(0,0,0,0.7);
    --header-bg:     #030305;
    --header-text:   #a8a4a0;
    --header-border: #0f0f14;
    --nav-link-bg:   #0a0a0e;
    --nav-link-text: #6a6870;
    --input-bg:      #0a0a0e;
    --input-text:    #a8a4a0;
    --input-border:  #141418;
    --input-focus-border: var(--primary-accent);
    --success: #30a060; --warning: #b08820; --danger: #b84040;
    --gray-200: #141418;
    --tower-bg: linear-gradient(135deg, #0a0a0e, #060608);
    --reveal-bg: linear-gradient(135deg, #0c0c10, #060608);
    --game-card-glow: 0 20px 30px -10px rgba(var(--primary-accent-rgb), 0.2);
    --very-bullish: #7C3AED; --bullish: #30a060; --bearish: #B08820; --very-bearish: #B84040;
    --gold: #988020; --silver: #707880; --bronze: #806040;
}
body[data-theme="pit"] {
    background-image:
        radial-gradient(ellipse 80% 60% at 50% 50%, transparent 45%, rgba(0,0,0,0.65) 100%),
        radial-gradient(circle at 25% 30%, rgba(var(--primary-accent-rgb), 0.03) 0, transparent 30%),
        radial-gradient(circle, rgba(255,255,255,0.018) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,255,255,0.012) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 53px 53px, 29px 29px;
    background-position: 0 0, 0 0, 0 0, 17px 11px;
}

/* Lv 70 — Aurora: deep midnight blue, animated aurora ribbons */
@keyframes aurora-drift {
    0%   { background-position: 0% 50%, 100% 50%, 0 0, 0 0; }
    50%  { background-position: 100% 30%, 0% 70%, 0 0, 0 0; }
    100% { background-position: 0% 50%, 100% 50%, 0 0, 0 0; }
}

[data-theme="aurora"] {
    --bg-color:      #040812;
    --text-color:    #d0e4f0;
    --border-color:  #0f1828;
    --card-bg:       #080e1a;
    --shadow:        rgba(0,0,0,0.6);
    --header-bg:     #020610;
    --header-text:   #d0e4f0;
    --header-border: #0a1220;
    --nav-link-bg:   #080e1a;
    --nav-link-text: #607898;
    --input-bg:      #080e1a;
    --input-text:    #d0e4f0;
    --input-border:  #0f1828;
    --input-focus-border: var(--primary-accent);
    --success: #20d0a0; --warning: #c0a020; --danger: #d05060;
    --gray-200: #0f1828;
    --tower-bg: linear-gradient(135deg, #080e1a, #040812);
    --reveal-bg: linear-gradient(135deg, #0a1020, #040812);
    --game-card-glow: 0 20px 30px -10px rgba(var(--primary-accent-rgb), 0.25);
    --very-bullish: #7C3AED; --bullish: #20d0a0; --bearish: #C0A020; --very-bearish: #D05060;
    --gold: #a09020; --silver: #6090b0; --bronze: #406888;
}
body[data-theme="aurora"] {
    background-image:
        radial-gradient(ellipse 120% 40% at 20% 5%,  rgba(var(--primary-accent-rgb), 0.10) 0%, transparent 55%),
        radial-gradient(ellipse 100% 30% at 80% 18%, rgba(34,211,238,0.07) 0%, transparent 50%),
        radial-gradient(ellipse 80% 25% at 50% 30%,  rgba(74,222,128,0.04) 0%, transparent 50%),
        radial-gradient(circle, rgba(var(--primary-accent-rgb), 0.03) 1px, transparent 1px);
    background-size: 200% 200%, 200% 200%, 200% 200%, 36px 36px;
    animation: aurora-drift 18s ease-in-out infinite;
}

/* Lv 85 — Void: cosmic black, scattered star points */
[data-theme="void"] {
    --bg-color:      #04040a;
    --text-color:    #c0b8d0;
    --border-color:  #10101c;
    --card-bg:       #08081a;
    --shadow:        rgba(0,0,0,0.75);
    --header-bg:     #020208;
    --header-text:   #c0b8d0;
    --header-border: #0c0c18;
    --nav-link-bg:   #08081a;
    --nav-link-text: #605878;
    --input-bg:      #08081a;
    --input-text:    #c0b8d0;
    --input-border:  #10101c;
    --input-focus-border: var(--primary-accent);
    --success: #3090c0; --warning: #9080c0; --danger: #c04880;
    --gray-200: #10101c;
    --tower-bg: linear-gradient(135deg, #08081a, #04040a);
    --reveal-bg: linear-gradient(135deg, #0a0818, #04040a);
    --game-card-glow: 0 20px 30px -10px rgba(var(--primary-accent-rgb), 0.25);
    --very-bullish: #7C3AED; --bullish: #3090c0; --bearish: #9080c0; --very-bearish: #c04880;
    --gold: #806898; --silver: #504868; --bronze: #483060;
}
body[data-theme="void"] {
    background-image:
        radial-gradient(ellipse 50% 35% at 50% 40%, rgba(var(--primary-accent-rgb), 0.05) 0%, transparent 65%),
        radial-gradient(circle, rgba(255,255,255,0.65) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,255,255,0.40) 1px, transparent 1px),
        radial-gradient(circle, rgba(255,255,255,0.20) 1px, transparent 1px);
    background-size: 100% 100%, 113px 113px, 67px 67px, 41px 41px;
    background-position: 0 0, 13px 27px, 41px 11px, 7px 43px;
}

/* Lv 99 — Onyx Glass: black with iridescent oil-slick conic sheen */
[data-theme="onyx"] {
    --bg-color:      #060606;
    --text-color:    #e0dce8;
    --border-color:  #181622;
    --card-bg:       #0c0a14;
    --shadow:        rgba(0,0,0,0.8);
    --header-bg:     #030308;
    --header-text:   #e0dce8;
    --header-border: #120f1c;
    --nav-link-bg:   #0c0a14;
    --nav-link-text: #504870;
    --input-bg:      #0c0a14;
    --input-text:    #e0dce8;
    --input-border:  #181622;
    --input-focus-border: var(--primary-accent);
    --success: #4060e0; --warning: #8060d0; --danger: #d040a0;
    --gray-200: #181622;
    --tower-bg: linear-gradient(135deg, #0c0a14, #060606);
    --reveal-bg: linear-gradient(135deg, #100c18, #060606);
    --game-card-glow: 0 20px 30px -10px rgba(var(--primary-accent-rgb), 0.3);
    --very-bullish: #7C3AED; --bullish: #4060e0; --bearish: #8060d0; --very-bearish: #d040a0;
    --gold: #7050c0; --silver: #503870; --bronze: #402858;
}
body[data-theme="onyx"] {
    background-image:
        conic-gradient(from 0deg at 30% 30%,
            rgba(160,0,255,0.05) 0deg, rgba(0,180,255,0.04) 90deg,
            rgba(255,120,0,0.03) 180deg, rgba(80,0,200,0.05) 270deg,
            rgba(160,0,255,0.05) 360deg),
        conic-gradient(from 180deg at 70% 70%,
            rgba(0,255,180,0.04) 0deg, rgba(255,0,120,0.03) 90deg,
            rgba(40,0,255,0.05) 180deg, rgba(0,180,80,0.03) 270deg,
            rgba(0,255,180,0.04) 360deg),
        radial-gradient(circle, rgba(255,255,255,0.012) 1px, transparent 1px);
    background-size: 70% 70%, 70% 70%, 52px 52px;
    background-position: 0 0, 100% 100%, 0 0;
}

/* ── Pill-style price indicators ────────────────────────────── */
.price-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}
.price-pill.positive {
    background: rgba(46, 194, 126, 0.15);
    color: #2ec27e;
}
.price-pill.negative {
    background: rgba(229, 83, 75, 0.15);
    color: #e5534b;
}
.price-pill.neutral {
    background: rgba(176, 169, 158, 0.12);
    color: #9ea8b8;
}

/* ── Ghost-to-fill buttons — accent-aware ───────────────────── */
.btn-copper,
button.btn-copper {
    background: rgba(var(--primary-accent-rgb), 0.09);
    color: var(--primary-accent);
    border: 1px solid rgba(var(--primary-accent-rgb), 0.28);
    border-radius: 4px;
    padding: 9px 18px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease,
                border-color 150ms ease, opacity 150ms ease;
}
.btn-copper:hover,
button.btn-copper:hover {
    background: var(--primary-accent);
    color: #fff;
    border-color: var(--primary-accent);
    opacity: 1;
}
.btn-copper:active,
button.btn-copper:active {
    filter: brightness(0.88);
}

/* ── Tabular number utility ─────────────────────────────────── */
.tabular-nums,
.price,
.volume,
.xp-value,
.level-value {
    font-variant-numeric: tabular-nums;
}

/* ================================= */
/* DISCUSSION STYLES */
/* ================================= */

/* Discussion Container */
.discussion-container {
    display: flex;
    max-width: 1400px;
    margin: 0 auto;
    gap: 30px;
    padding: 0 20px;
    overflow-y: auto;
    padding-top: 20px;
}

/* Sidebar */
.discussion-sidebar {
    flex: 0 0 320px;
}

/* Most Discussed Today - Centered Title and Boxed Items */
.discussed-stocks {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: none;
}

.discussed-stocks .section-title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.4rem;
}

/* Individual Stock Boxes */
.stock-link {
    color: var(--text-color);
    text-decoration: none;
    padding: 12px 15px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
    margin-bottom: 8px;
    background-color: var(--card-bg);
}

.stock-link:hover {
    background-color: var(--secondary-accent);
    color: white;
    border-color: var(--primary-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--shadow);
}

/* Discussion Tabs - Boxed */
.discussion-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    background-color: var(--card-bg);
    padding: 10px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
}

.discussion-tab {
    flex: 1;
    padding: 12px 20px;
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-color);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.discussion-tab:hover {
    background-color: var(--secondary-accent);
    color: white;
    border-color: var(--primary-accent);
}

.discussion-tab.active {
    background-color: var(--primary-accent);
    color: white;
    border-color: var(--primary-accent);
}

/* Live Indicator */
.live-chat-indicator {
    background: linear-gradient(135deg, var(--primary-accent) 0%, var(--secondary-accent) 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Thread Items — row separator style */
.thread-item {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    padding: 18px 0;
    margin-bottom: 0;
    transition: background-color 180ms ease, box-shadow 180ms ease;
}

.thread-item:first-child {
    border-top: 1px solid var(--border-color);
}

.thread-item:hover {
    background-color: rgba(var(--primary-accent-rgb), 0.04);
    box-shadow: inset 2px 0 0 var(--primary-accent);
}

/* Your Activity Stats */
.profile-stat .stat-value {
    color: var(--text-color);
    font-size: 1.8rem;
    font-weight: 800;
}

.profile-stat .stat-label {
    color: var(--secondary-accent);
    font-size: 0.9rem;
}

/* Buttons */
button[style*="background: var(--primary-green)"],
button[style*="background-color: var(--primary-green)"] {
    background: linear-gradient(135deg, var(--primary-accent) 0%, var(--secondary-accent) 100%) !important;
    color: white !important;
    border: none !important;
    font-weight: 600 !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

button[style*="background: var(--primary-green)"]:hover,
button[style*="background-color: var(--primary-green)"]:hover {
    background: linear-gradient(135deg, var(--secondary-accent) 0%, var(--primary-accent) 100%) !important;
    transform: translateY(-1px) !important;
}

/* Section Titles — editorial overline style */
.section-title {
    color: var(--text-color);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 16px;
    padding: 0;
    border: none;
    opacity: 0.5;
}

/* File Upload */
.file-upload-area {
    border: 1px dashed var(--border-color);
    background-color: transparent;
    transition: border-color 0.2s ease;
    border-radius: 4px;
    padding: 32px 20px;
    text-align: center;
}

.file-upload-area:hover {
    border-color: var(--primary-accent);
    border-style: solid;
}

.file-upload-icon i {
    color: var(--primary-accent);
    font-size: 2.5rem;
    margin-bottom: 15px;
}

/* Make sure discussion content is visible */
.discussion-main {
    flex: 1;
    overflow-y: auto;
}

/* ================================= */
/* REMOVE UNNECESSARY ELEMENTS */
/* ================================= */

/* Remove old theme toggle elements */
.theme-switch,
.switch,
.slider,
.theme-text,
.light-text,
.dark-text {
    display: none !important;
}

/* Remove quick theme buttons */
.quick-theme-switcher,
.theme-buttons,
.theme-btn,
.theme-icon {
    display: none !important;
}

/* Remove quick themes at bottom */
.theme-preview {
    display: none !important;
}

/* Header Component Integration Styles */
#header-component {
    position: relative;
    z-index: 1000;
}

/* Page transition animations */
.page-transition {
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Active page highlighting */
.nav-link-box.active,
.nav-links a.active {
    background-color: var(--primary-accent);
    color: white !important;
}

/* Dropdown styles */
.dropdown-content {
    display: none;
    position: absolute;
    z-index: 1001;
}

.dropdown-content.show {
    display: block;
}

/* Ensure header stays on top */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--bg-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Adjust main content for fixed header */
main {
    position: relative;
    z-index: 1;
}

/* ================================= */
/* HEADER IS NOW IN header-component.js */
/* ================================= */
/* ALL HEADER, SENTIMENT, AND COMMUNITY STYLES REMOVED */
/* THESE ARE NOW SELF-CONTAINED IN THE COMPONENT */
/* ================================= */
/* HEADER COMPONENT INTEGRATION */
/* ================================= */

/* Ensure header component is properly positioned */
#header-component {
    position: relative;
    z-index: 1000;
    width: 100%;
}

/* Fixed header (85px) + sentiment bar (60px) = 145px.
   Set this in CSS so content is positioned correctly before JS fires,
   preventing the content-behind-header flash on initial load. */
body {
    padding-top: 145px;
    margin: 0;
    min-height: 100vh;
}

/* Main content should start below header */
main {
    position: relative;
    z-index: 1;
    margin-top: 0;
    padding-top: 0;
}

/* Remove any conflicting header styles */
header:not(.header),
.header:not([class*="header"]) {
    display: none !important;
}

/* ================================= */
/* GLOBAL LOGIN OVERLAY STYLES */
/* ================================= */

.global-login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(10px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease forwards;
}

.global-login-modal {
    background: var(--card-bg);
    border-radius: 6px;
    padding: 36px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    animation: slideUp 0.3s ease forwards;
}

.global-login-modal > i {
    font-size: 64px;
    color: var(--secondary-accent);
    margin-bottom: 20px;
    display: block;
}

.global-login-modal h2 {
    margin-bottom: 15px;
    color: var(--text-color);
    font-size: 1.8rem;
    font-weight: 700;
}

.global-login-modal p {
    margin-bottom: 25px;
    color: var(--text-color);
    opacity: 0.8;
    line-height: 1.5;
}

.global-login-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.global-login-btn {
    padding: 12px 24px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.global-login-btn.primary {
    background: var(--secondary-accent);
    color: white;
}

.global-login-btn.primary:hover {
    background: var(--primary-accent);
    transform: translateY(-1px);
}

.global-login-btn.secondary {
    background: var(--border-color);
    color: var(--text-color);
}

.global-login-btn.secondary:hover {
    background: var(--card-bg);
}

.global-login-modal a {
    color: var(--secondary-accent);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

.global-login-modal a:hover {
    text-decoration: underline;
    opacity: 0.9;
}

/* Signup link specific styling */
.global-login-modal a[href="login.html?alpha=1"] {
    font-size: 15px;
}

/* ================================= */
/* LOGOUT BUTTON STYLES */
/* ================================= */

.logout-button {
    background: none;
    border: 1px solid var(--border-color);
    padding: 8px 16px;
    border-radius: 4px;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 10px;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.logout-button:hover {
    background: var(--secondary-accent);
    color: white;
    border-color: var(--secondary-accent);
    transform: translateY(-1px);
}

.logout-button i {
    font-size: 14px;
}

/* ================================= */
/* ANIMATIONS - SINGLE DEFINITION */
/* ================================= */

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* ================================= */
/* THEME-SPECIFIC ADJUSTMENTS */
/* ================================= */

/* Dark mode specific adjustments */
[data-theme="dark"] .global-login-modal {
    background: var(--card-bg);
    border-color: var(--secondary-accent);
}

[data-theme="dark"] .global-login-modal p {
    color: var(--text-color);
}

[data-theme="dark"] .logout-button {
    border-color: var(--border-color);
}

/* Blue theme specific adjustments */
[data-theme="blue"] .global-login-modal {
    border-color: var(--secondary-accent);
}

[data-theme="blue"] .global-login-btn.primary {
    background: var(--secondary-accent);
}

[data-theme="blue"] .global-login-btn.primary:hover {
    background: var(--primary-accent);
}

/* ================================= */
/* RESPONSIVE STYLES */
/* ================================= */

@media (max-width: 768px) {
    .global-login-modal {
        padding: 30px 20px;
        margin: 20px;
        width: calc(100% - 40px);
    }

    .global-login-modal i {
        font-size: 48px;
    }

    .global-login-modal h2 {
        font-size: 1.5rem;
    }

    .global-login-modal p {
        font-size: 14px;
    }

    .global-login-btn {
        padding: 10px 20px;
        font-size: 14px;
    }

    .logout-button {
        padding: 6px 12px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .global-login-modal {
        padding: 25px 15px;
    }

    .global-login-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .global-login-btn {
        width: 100%;
        justify-content: center;
    }
}