html[data-theme="dark"] #section-appeals .appeal-card-orange h4,
        html[data-theme="dark"] #section-appeals .appeal-card-orange .text-orange-600,
        html[data-theme="dark"] #section-appeals .appeal-card-orange .text-orange-700,
        html[data-theme="dark"] #section-appeals .appeal-card-orange .text-orange-800 {
            color: #fb923c !important;
        }
        html[data-theme="dark"] #section-appeals .appeal-card-red {
            background: linear-gradient(180deg, rgba(248, 113, 113, 0.12), #0f172a) !important;
            border-color: color-mix(in srgb, #f87171 35%, #22304d) !important;
        }
        html[data-theme="dark"] #section-appeals .appeal-card-red h4,
        html[data-theme="dark"] #section-appeals .appeal-card-red .text-red-600,
        html[data-theme="dark"] #section-appeals .appeal-card-red .text-red-700,
        html[data-theme="dark"] #section-appeals .appeal-card-red .text-red-800 {
            color: #f87171 !important;
        }
        html[data-theme="dark"] #data .border-slate-200 {
            border-color: var(--border) !important;
        }

        /* Theme tokens (light + dark) */
        :root {
            --bg: #f8fafc;
            --surface: #ffffff;
            --surface-2: #f1f5f9;
            --text: #0f172a;
            --muted: #475569;
            --muted-2: #94a3b8;
            --border: #e2e8f0;
            --header-bg: #0f172a;
            --header-text: #e2e8f0;
            --header-muted: #94a3b8;
            --nav-bg: #ffffff;
            --nav-hover-bg: #f8fafc;
            --primary: #2563eb;
            --primary-2: #1d4ed8;
            --scroll-track: #e2e8f0;
            --scroll-thumb: #cbd5e1;
            --scroll-thumb-hover: #94a3b8;
            --tint-blue: rgba(59, 130, 246, 0.14);
            --tint-indigo: rgba(99, 102, 241, 0.14);
            --tint-amber: rgba(251, 191, 36, 0.16);
            --tint-emerald: rgba(52, 211, 153, 0.14);
            --tint-red: rgba(248, 113, 113, 0.14);
            --ui-scale: 1;
        }

        html[data-theme="dark"] {
            --bg: #0b1220;
            --surface: #0f172a;
            --surface-2: #111827;
            --text: #e2e8f0;
            --muted: #94a3b8;
            --muted-2: #64748b;
            --border: #1f2937;
            --header-bg: #0b1220;
            --header-text: #e2e8f0;
            --header-muted: #9ca3af;
            --nav-bg: #0f172a;
            --nav-hover-bg: #111827;
            --primary: #3b82f6;
            --primary-2: #60a5fa;
            --scroll-track: #111827;
            --scroll-thumb: #1f2937;
            --scroll-thumb-hover: #334155;
            --tint-blue: rgba(59, 130, 246, 0.16);
            --tint-indigo: rgba(99, 102, 241, 0.18);
            --tint-amber: rgba(251, 191, 36, 0.20);
            --tint-emerald: rgba(52, 211, 153, 0.18);
            --tint-red: rgba(248, 113, 113, 0.18);
        }
        
        .tab-content { display: none; } 
        .tab-content.active { display: block; animation: fadeIn 0.3s ease-in-out; }
        .hidden { display: none !important; }
        
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        .custom-scroll::-webkit-scrollbar { width: 6px; }
        .custom-scroll::-webkit-scrollbar-track { background: var(--scroll-track); }
        .custom-scroll::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 3px; }
        .custom-scroll::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }

        .path-card { transition: all 0.2s ease; }
        .path-card.active { border-color: var(--primary); background-color: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
        .path-card:hover { transform: translateY(-2px); }

        /* Denial Wizard: persistent selected state for scenario buttons */
        .denial-reason-btn .denial-reason-icon {
            color: #475569;
        }
        html[data-theme="dark"] .denial-reason-btn .denial-reason-icon {
            color: #cbd5f5;
        }

        /* Tooltip triggers (Statement Generator) */
        .tip-trigger {
            font-size: 14px !important;
            color: #475569;
            cursor: pointer;
        }
        .tip-trigger:hover { color: #1d4ed8; }
        html[data-theme="dark"] .tip-trigger { color: #cbd5f5; }
        html[data-theme="dark"] .tip-trigger:hover { color: #93c5fd; }
        .denial-reason-btn.is-selected {
            border-color: #3b82f6 !important;
            background-color: #eff6ff !important;
        }
        .denial-reason-btn.is-selected .denial-reason-title {
            color: #1d4ed8 !important;
        }
        .denial-reason-btn.is-selected .denial-reason-icon {
            color: #3b82f6 !important;
        }
        html[data-theme="dark"] .denial-reason-btn.is-selected {
            border-color: color-mix(in srgb, var(--primary) 65%, var(--border)) !important;
            background-color: var(--tint-blue) !important;
        }
        html[data-theme="dark"] .denial-reason-btn.is-selected .denial-reason-title {
            color: var(--primary) !important;
        }
        html[data-theme="dark"] .denial-reason-btn.is-selected .denial-reason-icon {
            color: var(--primary-2) !important;
        }

        /* Theme bridge: make common Tailwind utility colors follow the theme */
        body { background: var(--bg); color: var(--text); }
        .bg-white { background-color: var(--surface) !important; }
        .bg-slate-50 { background-color: var(--bg) !important; }
        .bg-slate-100 { background-color: var(--surface-2) !important; }
        .bg-slate-200 { background-color: var(--surface-2) !important; }
        .bg-slate-300 { background-color: var(--border) !important; }
        .border-slate-200 { border-color: var(--border) !important; }
        .border-slate-100 { border-color: var(--border) !important; }
        .border-slate-300 { border-color: var(--border) !important; }
        .text-slate-800, .text-slate-900 { color: var(--text) !important; }

        /* Inline style replacements for CSP tightening */
        .w-pct-94-26 { width: 94.26%; }
        .w-pct-93-71 { width: 93.71%; }
        .w-pct-100 { width: 100%; }
        .w-pct-63 { width: 63%; }
        .w-pct-53 { width: 53%; }
        .w-pct-50 { width: 50%; }
        .w-pct-47 { width: 47%; }
        .w-pct-34 { width: 34%; }
        .w-pct-32 { width: 32%; }
        .w-pct-31 { width: 31%; }
        .w-pct-28 { width: 28%; }
        .w-pct-27 { width: 27%; }
        .w-pct-25 { width: 25%; }
        .w-pct-18 { width: 18%; }
        .chart-h-280 { height: 280px; }
        .wizard-progress-bar { width: 0; }
        .bg-bodysystem-pie {
            background: conic-gradient(
                #8b5cf6 0deg 137.5deg,
                #a78bfa 137.5deg 184deg,
                #c4b5fd 184deg 228deg,
                #ddd6fe 228deg 265deg,
                #ede9fe 265deg 289deg,
                #f5f3ff 289deg 360deg
            );
        }
        .text-slate-700, .text-slate-600, .text-slate-500 { color: var(--muted) !important; }
        .text-slate-400 { color: var(--muted-2) !important; }

        header.bg-slate-900 { background-color: var(--header-bg) !important; color: var(--header-text) !important; }
        header .text-slate-400 { color: var(--header-muted) !important; }
        nav.bg-white { background-color: var(--nav-bg) !important; }
        .hover\:bg-slate-50:hover { background-color: var(--nav-hover-bg) !important; }

        .border-blue-600 { border-color: var(--primary-2) !important; }
        .text-blue-600 { color: var(--primary-2) !important; }

        /* Light-mode readability: make red text a bit darker (less pink) */
        html:not([data-theme="dark"]) .text-red-900,
        html:not([data-theme="dark"]) .text-red-800,
        html:not([data-theme="dark"]) .text-red-700,
        html:not([data-theme="dark"]) .text-red-600,
        html:not([data-theme="dark"]) .text-red-500 {
            color: #b91c1c !important;
        }

        /* QoL: any "Did You Know?" callout -> yellow lightbulb icon */
        [data-did-you-know] .material-symbols-outlined,
        [data-did-you-know] .material-symbols-rounded,
        [data-did-you-know] .material-symbols-sharp {
            color: #fbbf24 !important;
        }

                /* Helper snippet (for future callouts):
                     <div class="mt-6 bg-blue-50 border border-blue-200 p-4 rounded-lg gradient-border" data-did-you-know>
                         <h4 class="font-bold text-blue-800 text-sm mb-2 flex items-center gap-2">
                             <span class="material-symbols-outlined text-lg">lightbulb</span> Did You Know?
                         </h4>
                         <p class="text-xs text-blue-900 leading-relaxed">…</p>
                     </div>
                */

        /* QoL: gradient border utility + a couple spot styles */
        .gradient-border {
            position: relative;
            border: 1px solid transparent;
            background-clip: padding-box;
        }
        .gradient-border::before {
            content: "";
            position: absolute;
            inset: -2px;
            border-radius: inherit;
            padding: 2px;
            background: linear-gradient(135deg, #60a5fa, #34d399, #fbbf24, #fb923c, #ef4444);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
        }
        html[data-theme="dark"] .gradient-border::before {
            background: linear-gradient(135deg, #60a5fa, #34d399, #fbbf24, #fb923c, #ef4444);
            filter: saturate(1.1) brightness(1.05);
        }

        /* QoL: unify "Key Takeaway" visual (dark mode only) */
        html[data-theme="dark"] #element-details .key-takeaway {
            color: #ffffff !important;
        }

        /* Light mode: Key Takeaway should read as blue (original intent) */
        html:not([data-theme="dark"]) #element-details .key-takeaway {
            color: #1d4ed8 !important;
        }

        /* Expanded theme bridge for common accent/tint utilities across tabs */
        html[data-theme="dark"] .bg-blue-50,
        html[data-theme="dark"] .bg-blue-100,
        html[data-theme="dark"] .bg-blue-200 { background-color: var(--tint-blue) !important; }
        html[data-theme="dark"] .border-blue-100,
        html[data-theme="dark"] .border-blue-200,
        html[data-theme="dark"] .border-blue-500 { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)) !important; }
        html[data-theme="dark"] .text-blue-900,
        html[data-theme="dark"] .text-blue-800,
        html[data-theme="dark"] .text-blue-700 { color: color-mix(in srgb, var(--primary) 70%, var(--text)) !important; }
        html[data-theme="dark"] .hover\:bg-blue-50:hover { background-color: var(--tint-blue) !important; }
        html[data-theme="dark"] .hover\:border-blue-500:hover { border-color: var(--primary) !important; }
        html[data-theme="dark"] .group-hover\:text-blue-700,
        html[data-theme="dark"] .hover\:text-blue-700:hover,
        html[data-theme="dark"] .hover\:text-blue-800:hover { color: var(--primary) !important; }
        html[data-theme="dark"] .group-hover\:text-blue-500 { color: var(--primary-2) !important; }

        html[data-theme="dark"] .bg-indigo-50,
        html[data-theme="dark"] .bg-indigo-100,
        html[data-theme="dark"] .bg-indigo-200 { background-color: var(--tint-indigo) !important; }
        html[data-theme="dark"] .border-indigo-100,
        html[data-theme="dark"] .border-indigo-200 { border-color: color-mix(in srgb, #818cf8 35%, var(--border)) !important; }
        html[data-theme="dark"] .text-indigo-900,
        html[data-theme="dark"] .text-indigo-800,
        html[data-theme="dark"] .text-indigo-700,
        html[data-theme="dark"] .text-indigo-600,
        html[data-theme="dark"] .text-indigo-400 { color: #a5b4fc !important; }
        html[data-theme="dark"] .text-indigo-200 { color: #c7d2fe !important; }

        html[data-theme="dark"] .bg-amber-50,
        html[data-theme="dark"] .bg-amber-100 { background-color: var(--tint-amber) !important; }
        html[data-theme="dark"] .border-amber-200,
        html[data-theme="dark"] .border-l-amber-400 { border-color: color-mix(in srgb, #fbbf24 40%, var(--border)) !important; }
        html[data-theme="dark"] .text-amber-900,
        html[data-theme="dark"] .text-amber-800,
        html[data-theme="dark"] .text-amber-700,
        html[data-theme="dark"] .text-amber-600,
        html[data-theme="dark"] .text-amber-400 { color: #fbbf24 !important; }

        /* Est. Monthly Pay emphasis */
        #res-pay { color: #047857 !important; }
        html[data-theme="dark"] #res-pay { color: #22c55e !important; }

        .itf-yellow { color: #fbbf24 !important; }
        .itf-border-danger { border-color: #dc2626 !important; border-width: 2px !important; }
        .itf-red { color: #dc2626 !important; }

        #app-shell { transform: scale(var(--ui-scale)); transform-origin: top center; }
        html.reduce-motion *,
        html.reduce-motion *::before,
        html.reduce-motion *::after {
            animation: none !important;
            transition: none !important;
            scroll-behavior: auto !important;
        }

        html[data-theme="dark"] .bg-emerald-50,
        html[data-theme="dark"] .bg-emerald-100,
        html[data-theme="dark"] .bg-emerald-900 { background-color: var(--tint-emerald) !important; }
        html[data-theme="dark"] .border-emerald-200,
        html[data-theme="dark"] .border-emerald-500,
        html[data-theme="dark"] .border-emerald-700 { border-color: color-mix(in srgb, #34d399 35%, var(--border)) !important; }
        html[data-theme="dark"] .text-emerald-900,
        html[data-theme="dark"] .text-emerald-800,
        html[data-theme="dark"] .text-emerald-700,
        html[data-theme="dark"] .text-emerald-600,
        html[data-theme="dark"] .text-emerald-400,
        html[data-theme="dark"] .text-emerald-200 { color: #34d399 !important; }

        html[data-theme="dark"] .bg-red-50,
        html[data-theme="dark"] .bg-red-100 { background-color: var(--tint-red) !important; }
        html[data-theme="dark"] .border-red-200,
        html[data-theme="dark"] .border-red-500 { border-color: color-mix(in srgb, #ef4444 40%, var(--border)) !important; }
        html[data-theme="dark"] .text-red-900,
        html[data-theme="dark"] .text-red-800,
        html[data-theme="dark"] .text-red-700,
        html[data-theme="dark"] .text-red-500,
        html[data-theme="dark"] .text-red-200 { color: #fb7185 !important; }

        /* VA Forms Wizard dark-mode inputs */
        html[data-theme="dark"] #vaforms-wizard input,
        html[data-theme="dark"] #vaforms-wizard textarea,
        html[data-theme="dark"] #vaforms-wizard select {
            background-color: #2b2a32 !important;
            border-color: #475569 !important;
            color: #e2e8f0 !important;
        }
        html[data-theme="dark"] #vaforms-wizard input::placeholder,
        html[data-theme="dark"] #vaforms-wizard textarea::placeholder {
            color: #94a3b8 !important;
        }
        /* keep headers/footers as-is; only field elements are overridden */

        /* Statement Generator dark-mode inputs */
        html[data-theme="dark"] #statement input,
        html[data-theme="dark"] #statement textarea:not(#stmt-output) {
            background-color: #2b2a32 !important;
            border-color: #475569 !important;
            color: #e2e8f0 !important;
        }
        html[data-theme="dark"] #statement textarea::placeholder,
        html[data-theme="dark"] #statement input::placeholder { color: #94a3b8 !important; }
        /* leave generated output panel/dashed container defaults unchanged */
        /* Statement Generator dashed container visibility */
        html[data-theme="dark"] #statement .border-dashed {
            border-color: color-mix(in srgb, #cbd5f5 65%, #2b2a32) !important;
        }
        html:not([data-theme="dark"]) #statement .border-dashed {
            border-color: color-mix(in srgb, #cbd5e1 65%, #94a3b8) !important;
        }

        /* VA Forms wizard progress bar unfilled track */
        html[data-theme="dark"] #vaforms-wizard .bg-slate-200.rounded-full,
        html:not([data-theme="dark"]) #vaforms-wizard .bg-slate-200.rounded-full { background-color: #e3e8ef !important; }

        /* Evidence Tracker progress bar unfilled track */
        html[data-theme="dark"] #evidence .bg-slate-200.rounded-full,
        html:not([data-theme="dark"]) #evidence .bg-slate-200.rounded-full { background-color: #e3e8ef !important; }

        /* Profile & Settings modals: lock body scroll, center overlay, dark surfaces */
        html.modal-open, body.modal-open { overflow: hidden !important; }

        html[data-theme="dark"] #profile-modal > div,
        html[data-theme="dark"] #settings-modal #settings-panel {
            background-color: #1f2937 !important;
            border-color: #334155 !important;
            color: #e2e8f0 !important;
        }
        html[data-theme="dark"] #profile-modal h3,
        html[data-theme="dark"] #settings-modal h3 { color: #e2e8f0 !important; }

        /* Fix: Profile Modal inputs in dark mode */
        html[data-theme="dark"] #profile-modal input,
        html[data-theme="dark"] #profile-modal select {
            background-color: #2b2a32 !important;
            border-color: #475569 !important;
            color: #e2e8f0 !important;
        }
        html[data-theme="dark"] #profile-modal input::placeholder {
            color: #94a3b8 !important;
        }

        /* Statement Generator light-mode border boost */
        #statement input,
        #statement textarea { border-color: #94a3b8 !important; }

        html[data-theme="dark"] .bg-slate-300 { background-color: var(--border) !important; }
        html[data-theme="dark"] .border-slate-300 { border-color: color-mix(in srgb, var(--border) 70%, #000) !important; }
        html[data-theme="dark"] .text-slate-300 { color: color-mix(in srgb, var(--text) 80%, var(--muted)) !important; }

        #element-details { z-index: 50; }
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }