:root {
    /* Performance Optimized Variables - Solid colors replace translucency */
    --glass-bg: #ffffff; 
    --glass-border: #e2e8f0;
    --text: #0f172a;
    --dim: #64748b;
    --green: #10b981;
    --red: #ef4444;
    --blue: #3b82f6;
    --blue-2: #2980b9;
    --border: #e2e8f0;
    --header-accent: #f1f5f9;
    --shadow: 0 4px 12px 0 rgba(31, 38, 135, 0.08); 
    --card: #ffffff;
}

body.dark-mode {
    --glass-bg: #1e293b; 
    --glass-border: #334155;
    --text: #eaecef;
    --dim: #94a3b8;
    --green: #02c076;
    --red: #f84960;
    --blue: #3b82f6;
    --blue-2: #2980b9;
    --border: #1e293b;
    --header-accent: #1e293b;
    --card: #161a1e;
}

/* --- 1. DYNAMIC BACKGROUND ANIMATIONS (GPU OPTIMIZED) --- */
body {
    font-family: 'Inter', -apple-system, sans-serif;
    background: #f8fafc;
    color: var(--text);
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

body.dark-mode { background: #0b0e11; }

/* Pulse Layer - translate3d forces GPU acceleration without changing logic */


/* --- 2. GLOBAL CONTAINERS (GLASS EFFECT REMOVED) --- */
.container, .stat-card, .chart-box, .poll-container, 
.methodology-container, .terminal-header, .stats-bar {
    background: var(--glass-bg) !important;
    /* Explicitly ensuring no blur overhead */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--shadow);
    border-radius: 20px;
    /* Layer promotion to stop parent layout recalculations */
    transform: translateZ(0);
}

.container { max-width: 1600px; margin: 0 auto; padding: 30px; }

/* --- 3. TABLE & WATERMARK --- */
#capture-zone { position: relative; overflow: hidden; background: transparent !important; }
table { width: 100%; border-collapse: separate; border-spacing: 2px; position: relative; z-index: 2; }
th, td { 
    padding: 4px 4px;
    text-align: center;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
}

.row-label, .hdr-month, .hdr-stats { 
    background: var(--header-accent) !important; 
    font-weight: 800; 
    border: 1px solid var(--border); 
}

#capture-zone-watermark {
    position: absolute; top: 50%; left: 50%; 
    transform: translate3d(-50%, -50%, 0);
    width: 600px; opacity: 0.05; pointer-events: none; z-index: 1;
}

/* --- 4. THE FIXED DOT PULSE --- */
.dot {
    width: 10px; height: 10px;
    background-color: var(--green);
    border-radius: 50%;
    position: relative;
    display: inline-block;
}

.dot::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: var(--green);
    border-radius: 50%;
    z-index: -1;
    /* scale3d is more performant than scale */
    animation: pulse-small-dot 2s infinite ease-out;
}

@keyframes pulse-small-dot {
    0% { transform: scale3d(1, 1, 1); opacity: 0.8; }
    100% { transform: scale3d(3.5, 3.5, 1); opacity: 0; }
}

/* --- 5. OTHER ANIMATIONS --- */
#ticker-scroll { 
    display: flex; 
    animation: scroll-news 80s linear infinite; 
    will-change: transform;
}
@keyframes scroll-news { 
    0% { transform: translate3d(0, 0, 0); } 
    100% { transform: translate3d(-50%, 0, 0); } 
}

.poll-container { 
    position: fixed; bottom: 20px; right: 20px; width: 320px; 
    animation: slideUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}
@keyframes slideUp { 
    from { transform: translate3d(0, 120%, 0); opacity: 0; } 
    to { transform: translate3d(0, 0, 0); opacity: 1; } 
}

.live-cell-cycle-table { 
    animation: live-pulse-cycle-table 2s infinite ease-in-out; 
    border: 2px solid var(--green) !important; 
    position: relative;
}
@keyframes live-pulse-cycle-table { 
    0%, 100% { box-shadow: 0 0 0 0px rgba(2, 192, 118, 0); } 
    50% { box-shadow: 0 0 10px 2px rgba(2, 192, 118, 0.3); } 
}

/* --- 6. UI ELEMENTS --- */
.btn:hover { 
    background: var(--blue); 
    color: white; 
    transform: translate3d(0, -3px, 0); 
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
}
.extreme-fear-glow { box-shadow: 0 0 15px rgba(255, 49, 49, 0.3); border: 1px solid #ff3131 !important; }
.extreme-greed-glow { box-shadow: 0 0 15px rgba(2, 192, 118, 0.3); border: 1px solid #02c076 !important; }