* { margin: 0; padding: 0; box-sizing: border-box; }
        :root {
            --coral: #F2A09A; --coral-light: #FDF5F4; --coral-dark: #E88B84;
            --teal: #4CB5AE; --teal-dark: #3A9A94; --teal-light: #E8F6F5;
            --navy: #1A2B3C; --text-dark: #2D3748; --text-gray: #5A6B7D;
            --text-light: #8899AA; --white: #FFFFFF; --bg-cream: #FFFAF9; --border: #E8ECF1;
            --dm: #4F46E5; --dm-dark: #3730A3; --dm-light: #EEF2FF; --dm-mid: #A5B4FC;
        }
        html { scroll-behavior: smooth; }
        body { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--text-dark); line-height: 1.6; background: var(--white); -webkit-font-smoothing: antialiased; }
        h1, h2, h3 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; }

        /* HERO */
        .article-hero { padding: 140px 20px 60px; background: linear-gradient(170deg, #0F172A 0%, #1E1B4B 40%, #312E81 100%); text-align: center; position: relative; overflow: hidden; }
        .article-hero::before { content: ''; position: absolute; top: -50%; right: -15%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(79,70,229,0.25) 0%, transparent 70%); border-radius: 50%; pointer-events: none; }
        .article-hero::after { content: ''; position: absolute; bottom: -40%; left: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(165,180,252,0.1) 0%, transparent 70%); border-radius: 50%; pointer-events: none; }
        .article-hero .breadcrumb { font-size: var(--fs-breadcrumb); color: rgba(165,180,252,0.6); margin-bottom: 24px; letter-spacing: 0.5px; }
        .article-hero .breadcrumb a { color: var(--dm-mid); text-decoration: none; }
        .article-hero .breadcrumb a:hover { text-decoration: underline; }
        .article-hero h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); color: #F8FAFC; max-width: 800px; margin: 0 auto 20px; line-height: 1.2; }
        .article-hero .article-meta { font-size: var(--fs-article-meta); color: rgba(165,180,252,0.5); }
        .article-hero .article-meta span { display: inline-block; margin: 0 8px; }
        .tag { display: inline-block; background: rgba(79,70,229,0.3); color: var(--dm-mid); font-size: var(--fs-tag); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; padding: 4px 12px; border-radius: 20px; margin-bottom: 16px; border: 1px solid rgba(165,180,252,0.2); }

        /* ARTICLE */
        .article-body { max-width: 720px; margin: 0 auto; padding: 48px 20px 80px; }
        .article-body p { font-family: 'Newsreader', Georgia, serif; font-size: var(--fs-article-body); line-height: 1.85; color: var(--text-gray); margin-bottom: 28px; }
        .article-body h2 { font-size: var(--fs-article-h2); color: var(--navy); margin: 48px 0 20px; padding-top: 24px; border-top: 1px solid var(--border); }
        .article-body h2:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
        .article-body strong { color: var(--text-dark); font-weight: 600; }

        /* STAT BAR */
        .stat-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 36px 0; padding: 28px 20px; background: linear-gradient(135deg, #0F172A 0%, #1E1B4B 100%); border-radius: 16px; border: 1px solid rgba(165,180,252,0.15); }
        .stat-bar .stat { text-align: center; }
        .stat-bar .stat-num { font-family: 'DM Serif Display', Georgia, serif; font-size: var(--fs-panel-stat); color: var(--dm-mid); line-height: 1; }
        .stat-bar .stat-label { font-size: var(--fs-dot-label); color: rgba(165,180,252,0.5); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
        @media (max-width: 600px) { .stat-bar { grid-template-columns: 1fr 1fr; } }

        /* COMPARISON: LIGHT vs DARK */
        .mode-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 36px 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); }
        .mode-panel { padding: 32px 24px; }
        .mode-panel.light { background: #FFFFFF; }
        .mode-panel.dark { background: #0F172A; }
        .mode-label { font-family: 'DM Sans', sans-serif; font-size: var(--fs-panel-title); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
        .mode-panel.light .mode-label { color: var(--text-light); }
        .mode-panel.dark .mode-label { color: rgba(165,180,252,0.5); }
        .mode-label .dot { width: 8px; height: 8px; border-radius: 50%; }
        .mode-panel.light .mode-label .dot { background: #EF4444; }
        .mode-panel.dark .mode-label .dot { background: #22C55E; }
        .mock-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 6px; margin-bottom: 6px; font-family: 'DM Sans', sans-serif; font-size: var(--fs-mock-row); }
        .mode-panel.light .mock-row { background: #F8FAFC; color: var(--text-gray); border: 1px solid #E2E8F0; }
        .mode-panel.dark .mock-row { background: #1E293B; color: #CBD5E1; border: 1px solid #334155; }
        .mock-row .field-label { font-weight: 600; min-width: 60px; }
        .mode-panel.light .mock-row .field-label { color: var(--text-dark); }
        .mode-panel.dark .mock-row .field-label { color: #E2E8F0; }
        .mock-header { padding: 10px 12px; border-radius: 8px 8px 0 0; margin-bottom: 2px; font-family: 'DM Sans', sans-serif; font-size: var(--fs-mock-header); font-weight: 700; }
        .mode-panel.light .mock-header { background: #3B82F6; color: white; }
        .mode-panel.dark .mock-header { background: #312E81; color: #C7D2FE; }
        .mock-nav { display: flex; gap: 12px; padding: 8px 12px; margin-bottom: 12px; border-radius: 6px; font-family: 'DM Sans', sans-serif; font-size: var(--fs-mock-nav); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
        .mode-panel.light .mock-nav { background: #F1F5F9; color: #64748B; border: 1px solid #E2E8F0; }
        .mode-panel.dark .mock-nav { background: #1E293B; color: #64748B; border: 1px solid #334155; }
        .mock-nav span.active { padding: 2px 8px; border-radius: 4px; }
        .mode-panel.light .mock-nav span.active { background: #3B82F6; color: white; }
        .mode-panel.dark .mock-nav span.active { background: #4F46E5; color: #E0E7FF; }
        .lux-meter { text-align: center; margin-top: 16px; padding: 10px; border-radius: 8px; font-family: 'JetBrains Mono', monospace; font-size: var(--fs-mock-row); }
        .mode-panel.light .lux-meter { background: #FEF2F2; color: #DC2626; border: 1px solid #FECACA; }
        .mode-panel.dark .lux-meter { background: #0D1117; color: #22C55E; border: 1px solid #1A3A2A; }
        @media (max-width: 600px) { .mode-compare { grid-template-columns: 1fr; } }

        /* EXPOSURE CALC */
        .exposure-calc { margin: 36px 0; padding: 32px 24px; background: linear-gradient(135deg, #0F172A 0%, #1E1B4B 100%); border-radius: 16px; border: 1px solid rgba(165,180,252,0.15); }
        .calc-title { font-family: 'DM Sans', sans-serif; font-size: var(--fs-panel-title); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--dm-mid); margin-bottom: 20px; }
        .calc-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-family: 'JetBrains Mono', monospace; font-size: var(--fs-btn); color: #CBD5E1; }
        .calc-row .calc-num { font-size: var(--fs-stat-lg); font-weight: 700; color: var(--dm-mid); min-width: 80px; text-align: right; }
        .calc-row .calc-op { color: #64748B; font-size: var(--fs-calc-op); min-width: 20px; text-align: center; }
        .calc-row .calc-label { color: #94A3B8; }
        .calc-divider { border: none; border-top: 1px solid rgba(165,180,252,0.15); margin: 16px 0; }
        .calc-total { display: flex; align-items: baseline; gap: 12px; font-family: 'JetBrains Mono', monospace; }
        .calc-total .calc-num { font-size: var(--fs-stat-hero); color: #F8FAFC; }
        .calc-total .calc-label { color: var(--dm-mid); font-size: var(--fs-panel-heading); }

        /* SCIENCE CARDS */
        .science-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 36px 0; }
        .sci-card { border-radius: 16px; padding: 28px 24px; position: relative; overflow: hidden; }
        .sci-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
        .sci-card.melatonin { background: linear-gradient(135deg, #FDF4FF 0%, #FAE8FF 100%); border: 1px solid #F0ABFC; }
        .sci-card.melatonin::before { background: #A855F7; }
        .sci-card.eye { background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%); border: 1px solid #FDBA74; }
        .sci-card.eye::before { background: #F97316; }
        .sci-card.migraine { background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%); border: 1px solid #FCA5A5; }
        .sci-card.migraine::before { background: #EF4444; }
        .sci-card.burnout { background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%); border: 1px solid #6EE7B7; }
        .sci-card.burnout::before { background: #10B981; }
        .sci-card h4 { font-family: 'DM Sans', sans-serif; font-size: var(--fs-card-heading); font-weight: 700; margin-bottom: 8px; }
        .sci-card.melatonin h4 { color: #7E22CE; }
        .sci-card.eye h4 { color: #C2410C; }
        .sci-card.migraine h4 { color: #DC2626; }
        .sci-card.burnout h4 { color: #059669; }
        .sci-card p { font-family: 'DM Sans', sans-serif !important; font-size: var(--fs-btn) !important; line-height: 1.55 !important; margin-bottom: 0 !important; }
        .sci-card.melatonin p { color: #6B21A8; }
        .sci-card.eye p { color: #9A3412; }
        .sci-card.migraine p { color: #991B1B; }
        .sci-card.burnout p { color: #065F46; }
        .sci-stat { font-family: 'DM Serif Display', Georgia, serif; font-size: var(--fs-display-lg); line-height: 1; margin-bottom: 4px; }
        .sci-card.melatonin .sci-stat { color: #A855F7; }
        .sci-card.eye .sci-stat { color: #F97316; }
        .sci-card.migraine .sci-stat { color: #EF4444; }
        .sci-card.burnout .sci-stat { color: #10B981; }
        .sci-cite { font-family: 'DM Sans', sans-serif; font-size: var(--fs-panel-small); color: #94A3B8; margin-top: 8px; font-style: italic; }
        @media (max-width: 600px) { .science-grid { grid-template-columns: 1fr; } }

        /* TIMELINE: CAREER DAMAGE */
        .career-timeline { margin: 36px 0; padding: 32px 24px; background: var(--dm-light); border-radius: 16px; border: 1px solid #C7D2FE; }
        .timeline-title { font-family: 'DM Sans', sans-serif; font-size: var(--fs-panel-title); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--dm); margin-bottom: 20px; }
        .timeline-row { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; position: relative; }
        .timeline-row:last-child { margin-bottom: 0; }
        .timeline-year { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-mock-header); font-weight: 700; color: var(--dm); min-width: 80px; padding-top: 2px; }
        .timeline-dot { width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--dm); background: white; margin-top: 4px; flex-shrink: 0; position: relative; z-index: 1; }
        .timeline-row:not(:last-child) .timeline-dot::after { content: ''; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 2px; height: calc(100% + 16px); background: #C7D2FE; }
        .timeline-content { flex: 1; }
        .timeline-content h4 { font-family: 'DM Sans', sans-serif; font-size: var(--fs-panel-heading); font-weight: 700; color: var(--dm-dark); margin-bottom: 2px; }
        .timeline-content p { font-family: 'DM Sans', sans-serif !important; font-size: var(--fs-panel-body) !important; color: #6366F1 !important; line-height: 1.5 !important; margin-bottom: 0 !important; }
        .timeline-hours { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-panel-badge); color: var(--dm); background: rgba(79,70,229,0.1); padding: 2px 8px; border-radius: 4px; display: inline-block; margin-top: 4px; }

        /* DARK MODE BENEFITS PANEL */
        .benefits-panel { margin: 36px 0; padding: 32px 24px; background: linear-gradient(135deg, #0F172A 0%, #1E1B4B 100%); border-radius: 16px; border: 1px solid rgba(165,180,252,0.15); }
        .benefits-title { font-family: 'DM Sans', sans-serif; font-size: var(--fs-panel-title); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--dm-mid); margin-bottom: 20px; }
        .benefit-row { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; padding: 16px; background: rgba(255,255,255,0.03); border-radius: 10px; border: 1px solid rgba(165,180,252,0.08); }
        .benefit-row:last-child { margin-bottom: 0; }
        .benefit-icon { font-size: var(--fs-cta-heading); flex-shrink: 0; width: 40px; text-align: center; }
        .benefit-content h4 { font-family: 'DM Sans', sans-serif; font-size: var(--fs-panel-heading); font-weight: 700; color: #E0E7FF; margin-bottom: 4px; }
        .benefit-content p { font-family: 'DM Sans', sans-serif !important; font-size: var(--fs-panel-body) !important; color: #94A3B8 !important; line-height: 1.55 !important; margin-bottom: 0 !important; }
        .benefit-stat { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-panel-badge); color: #22C55E; background: rgba(34,197,94,0.1); padding: 2px 8px; border-radius: 4px; display: inline-block; margin-top: 6px; }

        /* WHY NOT PANEL */
        .why-not { margin: 36px 0; padding: 32px 24px; background: #FEF2F2; border-radius: 16px; border: 1px solid #FECACA; }
        .why-not-title { font-family: 'DM Sans', sans-serif; font-size: var(--fs-panel-title); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #DC2626; margin-bottom: 16px; }
        .why-not-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; font-family: 'DM Sans', sans-serif; font-size: var(--fs-callout); color: #991B1B; line-height: 1.55; }
        .why-not-item:last-child { margin-bottom: 0; }
        .why-not-x { font-weight: 700; color: #EF4444; flex-shrink: 0; font-size: var(--fs-panel-heading); }

        /* CALLOUT */
        .callout { background: var(--dm-light); border-left: 4px solid var(--dm); padding: 20px 24px; border-radius: 0 10px 10px 0; margin: 32px 0; }
        .callout.teal { background: var(--teal-light); border-left-color: var(--teal); }
        .callout.green { background: #F0FDF4; border-left-color: #16A34A; }
        .callout p { font-family: 'DM Sans', sans-serif !important; font-size: var(--fs-callout) !important; color: var(--text-dark) !important; margin-bottom: 0 !important; line-height: 1.65 !important; }
        .callout strong { color: var(--dm-dark); }
        .callout.teal strong { color: var(--teal-dark); }
        .callout.green strong { color: #15803D; }

        /* CTA */
        .article-cta { text-align: center; padding: 48px 24px; background: linear-gradient(135deg, #0F172A 0%, #1E1B4B 50%, #312E81 100%); border-radius: 20px; margin-top: 48px; }
        .article-cta h3 { font-size: var(--fs-cta-heading); color: #F8FAFC; margin-bottom: 12px; }
        .article-cta p { font-family: 'DM Sans', sans-serif !important; font-size: var(--fs-cta-body) !important; color: rgba(165,180,252,0.6) !important; margin-bottom: 24px !important; max-width: 500px; margin-left: auto; margin-right: auto; }
        .btn { display: inline-block; background: var(--dm); color: white; padding: 14px 36px; border-radius: 50px; text-decoration: none; font-weight: 600; font-size: var(--fs-btn); transition: all 0.3s ease; }
        .btn:hover { background: var(--dm-dark); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(79,70,229,0.3); }

        /* DARK MODE TOGGLE */
        .dm-toggle { position: fixed; bottom: 32px; right: 32px; z-index: 9999; display: flex; align-items: center; gap: 10px; background: #1E293B; color: #E2E8F0; border: 1px solid #334155; padding: 12px 20px; border-radius: 50px; cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: var(--fs-flow-text); font-weight: 600; box-shadow: 0 8px 32px rgba(0,0,0,0.25); transition: all 0.3s ease; user-select: none; }
        .dm-toggle:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,0,0,0.35); }
        .dm-toggle .toggle-track { width: 44px; height: 24px; background: #334155; border-radius: 12px; position: relative; transition: background 0.3s ease; }
        .dm-toggle .toggle-thumb { width: 20px; height: 20px; background: #F8FAFC; border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: transform 0.3s ease; display: flex; align-items: center; justify-content: center; font-size: var(--fs-dot-label); }
        .dm-toggle .toggle-label { letter-spacing: 0.5px; }

        /* Toggle in "on" (dark) state */
        body.dark-active .dm-toggle { background: #312E81; border-color: #4F46E5; }
        body.dark-active .dm-toggle .toggle-track { background: #4F46E5; }
        body.dark-active .dm-toggle .toggle-thumb { transform: translateX(20px); }

        /* ========== DARK MODE OVERRIDES ========== */
        body.dark-active { background: #0B0F1A; color: #CBD5E1; }

        /* Article body */
        body.dark-active .article-body p { color: #94A3B8; }
        body.dark-active .article-body h2 { color: #E2E8F0; border-top-color: #1E293B; }
        body.dark-active .article-body strong { color: #E2E8F0; }

        /* Science cards */
        body.dark-active .sci-card.melatonin { background: linear-gradient(135deg, #1A0F26 0%, #2E1065 100%); border-color: #581C87; }
        body.dark-active .sci-card.melatonin h4 { color: #C084FC; }
        body.dark-active .sci-card.melatonin p { color: #A78BFA; }
        body.dark-active .sci-card.melatonin .sci-stat { color: #C084FC; }
        body.dark-active .sci-card.eye { background: linear-gradient(135deg, #1A130A 0%, #431407 100%); border-color: #7C2D12; }
        body.dark-active .sci-card.eye h4 { color: #FB923C; }
        body.dark-active .sci-card.eye p { color: #FDBA74; }
        body.dark-active .sci-card.eye .sci-stat { color: #FB923C; }
        body.dark-active .sci-card.migraine { background: linear-gradient(135deg, #1A0A0A 0%, #450A0A 100%); border-color: #7F1D1D; }
        body.dark-active .sci-card.migraine h4 { color: #FCA5A5; }
        body.dark-active .sci-card.migraine p { color: #FCA5A5; }
        body.dark-active .sci-card.migraine .sci-stat { color: #F87171; }
        body.dark-active .sci-card.burnout { background: linear-gradient(135deg, #0A1A12 0%, #052E16 100%); border-color: #14532D; }
        body.dark-active .sci-card.burnout h4 { color: #6EE7B7; }
        body.dark-active .sci-card.burnout p { color: #6EE7B7; }
        body.dark-active .sci-card.burnout .sci-stat { color: #34D399; }
        body.dark-active .sci-cite { color: #64748B; }

        /* Career timeline */
        body.dark-active .career-timeline { background: #0F172A; border-color: #1E293B; }
        body.dark-active .timeline-title { color: var(--dm-mid); }
        body.dark-active .timeline-row .timeline-year { color: var(--dm-mid); }
        body.dark-active .timeline-dot { background: #0F172A; border-color: var(--dm-mid); }
        body.dark-active .timeline-row:not(:last-child) .timeline-dot::after { background: #334155; }
        body.dark-active .timeline-content h4 { color: #E0E7FF; }
        body.dark-active .timeline-content p { color: #818CF8 !important; }
        body.dark-active .timeline-hours { color: var(--dm-mid); background: rgba(79,70,229,0.2); }

        /* Why-not panel */
        body.dark-active .why-not { background: #1A0A0A; border-color: #450A0A; }
        body.dark-active .why-not-title { color: #F87171; }
        body.dark-active .why-not-item { color: #FCA5A5; }
        body.dark-active .why-not-x { color: #F87171; }

        /* Callouts */
        body.dark-active .callout { background: #0F172A; border-left-color: var(--dm-mid); }
        body.dark-active .callout p { color: #CBD5E1 !important; }
        body.dark-active .callout strong { color: #E0E7FF; }
        body.dark-active .callout.teal { background: #0A1A17; border-left-color: var(--teal); }
        body.dark-active .callout.teal strong { color: #5EEAD4; }

        /* Mode compare border */
        body.dark-active .mode-compare { border-color: #334155; }
        body.dark-active .mode-panel.light { background: #1E293B; }
        body.dark-active .mode-panel.light .mode-label { color: #64748B; }
        body.dark-active .mode-panel.light .mock-nav { background: #0F172A; color: #475569; border-color: #334155; }
        body.dark-active .mode-panel.light .mock-nav span.active { background: #3B82F6; color: white; }
        body.dark-active .mode-panel.light .mock-header { background: #1E40AF; }
        body.dark-active .mode-panel.light .mock-row { background: #0F172A; color: #94A3B8; border-color: #334155; }
        body.dark-active .mode-panel.light .mock-row .field-label { color: #CBD5E1; }
        body.dark-active .mode-panel.light .lux-meter { background: #1C1017; color: #F87171; border-color: #7F1D1D; }

        @media (max-width: 600px) {
            .article-hero h1 { font-size: var(--fs-panel-stat); }
            .mode-compare { grid-template-columns: 1fr; }
            .dm-toggle { bottom: 20px; right: 20px; padding: 10px 16px; font-size: var(--fs-mock-action); }
        }