* { font-family: 'Inter', sans-serif; }
        
        /* Safari / WebKit compatibility – older (Safari 9–14) and current (15+) */
        html {
            min-height: 100vh;
            -webkit-text-size-adjust: 100%;
        }
        @supports (min-height: -webkit-fill-available) {
            html { min-height: -webkit-fill-available; }
            body { min-height: -webkit-fill-available; }
        }
        body { min-height: 100vh; }
        
        /* Nav & mobile menu: fallback background first, then blur (webkit prefix first for older Safari) */
        nav[class*="backdrop"],
        #mobileMenu,
        [class*="backdrop-blur"] {
            background-color: rgba(15, 23, 42, 0.92);
            -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }
        /* Mobile menu when open: distinct panel for visibility in dark mode */
        #mobileMenu {
            background-color: #1e3a5f;
            border-top: 1px solid rgba(148, 163, 184, 0.4);
            color: #f1f5f9;
        }
        #mobileMenu button { color: #f1f5f9; }
        #mobileMenu button:hover { background: rgba(30, 58, 95, 0.9); color: #fff; }
        #mobileMenu button.border-t { border-top-color: #94a3b8; }
        /* Reserve scrollbar space; scrollbar-gutter ignored in Safari < 15.4 */
        html { overflow-y: scroll; scrollbar-gutter: stable; }
        @supports not (scrollbar-gutter: stable) {
            html { overflow-y: scroll; }
        }
        .gradient-bg { background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0f172a 100%); }
        /* Mobile browser: full-width canvas and cards (edge-to-edge) with FAB as pure overlay – v2 execution */
        @media (max-width: 767px) {
            /* Loading overlay above sticky control bar so "Loading…" is visible */
            #appLoading { z-index: 40; }
            /* V2-1: Safe areas – main padding so Safari bottom nav doesn't hide content. Budget tab only: minimal gap under nav for clear separation */
            .gradient-bg main {
                max-width: 100% !important;
                width: 100% !important;
                padding-top: 4.5rem;
                padding-left: env(safe-area-inset-left);
                padding-right: env(safe-area-inset-right);
                padding-bottom: max(2.5rem, env(safe-area-inset-bottom));
                box-sizing: border-box;
            }
            body.budget-tab-active .gradient-bg main { padding-top: 0.5rem; }
            #budget {
                min-width: 0;
                width: 100%;
                overflow-x: hidden;
            }
            #budget .grid {
                width: 100%;
                max-width: 100%;
            }
            #budget .glass-card {
                min-width: 0;
                width: 100%;
                max-width: 100%;
            }
            /* V2-2: Control bar – horizontal scroll so Refresh, month, Save, Clear All all visible (swipe); scrolls with page on mobile (specificity beats global sticky rule) */
            #budget .budget-month-selector-sticky {
                position: static;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                flex-wrap: nowrap;
                min-width: 0;
            }
            #budget .budget-month-selector-sticky .flex-1 {
                flex: 0 0 auto;
                min-width: min-content;
            }
            /* V2-3 / V2-4: Earnings, Expenses, Debts tables – horizontal scroll only (not templates/recurrence) */
            #budget .budget-section-scroll-wrap,
            #budget .budget-debt-scroll-wrap {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                width: 100%;
                max-width: 100%;
            }
            #budget .budget-section-table-inner-income,
            #budget .budget-section-table-inner-expense {
                min-width: 580px;
            }
            #budget .budget-debt-scroll-wrap .budget-section-table-inner,
            #budget .budget-section-table-inner-debt {
                min-width: 800px;
                width: max-content;
                box-sizing: border-box;
            }
            /* Align debt header and data rows: same horizontal padding so columns line up (Safari/Chrome) */
            #budget .budget-debt-scroll-wrap .budget-header-row.debt {
                padding-left: 0.25rem;
                padding-right: 0.25rem;
            }
            #budget .budget-debt-scroll-wrap .budget-line-item[data-debt-id] {
                padding-left: 0.25rem;
                padding-right: 0.25rem;
                min-width: 0;
            }
            #budget .budget-header-row span {
                white-space: nowrap;
            }
            /* Budget title/desc above control bar: safe area padding */
            #budget .budget-title-desc {
                padding-left: max(0.5rem, env(safe-area-inset-left));
                padding-right: max(0.5rem, env(safe-area-inset-right));
            }
            #budget .budget-title-desc p.text-slate-400 {
                min-width: 0;
                overflow-wrap: break-word;
                white-space: normal;
            }
            /* Dashboard: header row wraps so USD + Large/Small buttons don’t overflow (mobile) */
            #dashboard > div:first-child {
                flex-wrap: wrap;
                gap: 0.5rem;
                padding-right: max(1rem, env(safe-area-inset-right));
                box-sizing: border-box;
            }
            #dashboard > div:first-child > div:last-child {
                flex-wrap: wrap;
                flex-shrink: 0;
                min-width: 0;
                max-width: 100%;
                gap: 0.5rem;
            }
            #dashboard #dashboardCardSizeToggle {
                flex-shrink: 0;
            }
            /* Budget tab: templates row (inside .budget-title-desc) can shrink/wrap */
            #budget .budget-templates-row {
                min-width: 0;
            }
            /* V2-8: Footer when open – no condensing; wrap or scroll so Terms, Privacy, Contact, copyright readable & tappable */
            #budgetFooter .budget-footer-content {
                padding-left: max(1rem, env(safe-area-inset-left));
                padding-right: max(1rem, env(safe-area-inset-right));
                padding-bottom: env(safe-area-inset-bottom);
                overflow-y: auto;
                max-height: min(50vh, 280px);
                -webkit-overflow-scrolling: touch;
            }
            #budgetFooter .budget-footer-content .relative {
                min-height: 0;
            }
            #budgetFooter .budget-footer-content .relative > div {
                position: static !important;
                left: auto !important;
                transform: none !important;
                width: 100% !important;
                max-width: 100%;
                flex-wrap: wrap;
                justify-content: center;
                gap: 0.5rem 0.75rem;
                white-space: normal;
            }
            #budgetFooter .budget-footer-content .budget-footer-link,
            #budgetFooter .budget-footer-content .budget-footer-accent,
            #budgetFooter .budget-footer-content p {
                white-space: normal;
            }
            #budgetFooter .budget-footer-content a.budget-footer-link {
                display: inline-block;
                min-height: 2.75rem;
                padding: 0.5rem 0.25rem;
                line-height: 1.4;
            }
            /* Footer links row: one line in portrait – smaller font so Terms, Privacy, Contact fit */
            #budgetFooter .budget-footer-content .relative:first-child > div {
                flex-wrap: nowrap;
                white-space: nowrap;
                font-size: 0.75rem;
                gap: 0.35rem 0.5rem;
            }
            #budgetFooter .budget-footer-content .relative:first-child > div .budget-footer-link,
            #budgetFooter .budget-footer-content .relative:first-child > div .text-slate-500 {
                font-size: inherit;
            }
            #budgetFooter .budget-footer-content .relative:first-child > div a.budget-footer-link {
                padding: 0.4rem 0.15rem;
                min-height: 2.25rem;
            }
        }
        /* V2-5 / V3: Dashboard & empowerment tooltips – fully within viewport on mobile (no overflow) */
        @media (max-width: 767px) {
            .stat-card-tooltip .stat-tooltip-text {
                position: fixed !important;
                left: max(1rem, env(safe-area-inset-left)) !important;
                right: max(1rem, env(safe-area-inset-right)) !important;
                bottom: auto !important;
                top: 50% !important;
                width: auto !important;
                max-width: min(320px, calc(100vw - 2rem)) !important;
                min-width: 240px;
                margin: 0 auto !important;
                transform: translateY(-50%) !important;
                box-sizing: border-box;
            }
            .stat-card-tooltip .stat-tooltip-text::after {
                display: none;
            }
            .empowerment-score-tooltip .empowerment-score-tooltip-panel {
                position: fixed !important;
                left: max(1rem, env(safe-area-inset-left)) !important;
                right: max(1rem, env(safe-area-inset-right)) !important;
                bottom: auto !important;
                top: 50% !important;
                width: auto !important;
                max-width: min(280px, calc(100vw - 2rem)) !important;
                min-width: 200px;
                margin: 0 auto !important;
                transform: translateY(-50%) !important;
                max-height: min(70vh, 320px);
                overflow-y: auto;
                box-sizing: border-box;
            }
            .empowerment-score-tooltip .empowerment-score-tooltip-panel::after {
                display: none;
            }
        }
        /* Opportunities: single column, edge-to-edge cards specifically in portrait */
        @media (max-width: 767px) and (orientation: portrait) {
            #opportunityGrid {
                display: grid;
                grid-template-columns: 1fr;
            }
            #opportunityGrid .opportunity-card {
                min-width: 0;
                width: 100%;
                max-width: 100%;
            }
        }
        /* FAB: ensure it never reserves layout space on small screens; always overlays content */
        @media (max-width: 1024px) {
            .budget-footer-toggle {
                position: fixed !important;
                z-index: 40;
                right: max(1.5rem, env(safe-area-inset-right));
                bottom: max(1.5rem, env(safe-area-inset-bottom));
            }
        }
        /* V3: Header not truncated – full "EmpowerMyBudget™" visible in Chrome & Safari (portrait + landscape) */
        @media (max-width: 1023px) {
            #navTabsAndBadge { display: none !important; }
            #navMobileMenuBtn { display: flex !important; }
            #mobileMenu:not(.hidden) { display: block !important; }
            nav > div > div:first-child {
                max-width: calc(100% - 4rem);
                min-width: 0;
            }
            .nav-brand-gradient-pan { white-space: normal; }
            nav button:has(.nav-brand-gradient-pan) {
                min-width: 0;
                text-align: left;
            }
        }
        /* Safari landscape: keep hamburger and right edge inside viewport (no cutoff) */
        @media (max-width: 1023px) and (orientation: landscape) {
            nav {
                padding-right: env(safe-area-inset-right);
            }
            nav > div {
                padding-right: max(1rem, env(safe-area-inset-right));
                box-sizing: border-box;
            }
            nav > div > div:first-child {
                max-width: calc(100% - 4.5rem);
            }
        }
        /* Safari landscape: earnings, expenses, debts – same scroll behavior as portrait (no overflow, no column overlay) */
        @media (orientation: landscape) and (max-width: 926px) {
            #budget {
                min-width: 0;
                width: 100%;
                overflow-x: hidden;
            }
            #budget .grid {
                width: 100%;
                max-width: 100%;
            }
            #budget .glass-card {
                min-width: 0;
                width: 100%;
                max-width: 100%;
            }
            #budget .budget-section-scroll-wrap,
            #budget .budget-debt-scroll-wrap {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                width: 100%;
                max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 2rem);
            }
            #budget .budget-section-table-inner-income,
            #budget .budget-section-table-inner-expense {
                min-width: 580px;
            }
            #budget .budget-debt-scroll-wrap .budget-section-table-inner,
            #budget .budget-section-table-inner-debt {
                min-width: 800px;
                width: max-content;
                box-sizing: border-box;
            }
            #budget .budget-debt-scroll-wrap .budget-header-row.debt {
                padding-left: 0.25rem;
                padding-right: 0.25rem;
            }
            #budget .budget-debt-scroll-wrap .budget-line-item[data-debt-id] {
                padding-left: 0.25rem;
                padding-right: 0.25rem;
                min-width: 0;
            }
            #budget .budget-header-row span {
                white-space: nowrap;
            }
            #budget .budget-title-desc {
                padding-left: max(0.5rem, env(safe-area-inset-left));
                padding-right: max(0.5rem, env(safe-area-inset-right));
            }
        }
        /* Mobile portrait: single-line header – reduced sizes so all fit without condensing or cutoff */
        @media (max-width: 767px) and (orientation: portrait) {
            nav > div {
                flex-wrap: nowrap;
                align-items: center;
                padding-top: 0.5rem;
                padding-bottom: 0.5rem;
                gap: 0;
            }
            nav > div > div:first-child {
                max-width: calc(100% - 3.5rem);
                min-width: 0;
                gap: 0.375rem;
                flex-shrink: 1;
            }
            nav .nav-finducation-gradient-pan {
                font-size: 0.8125rem;
                line-height: 1.25;
                white-space: nowrap;
            }
            nav button:has(.nav-brand-gradient-pan) .nav-brand-gradient-pan {
                font-size: 0.9375rem;
                line-height: 1.25;
                white-space: nowrap;
            }
            nav button:has(.nav-brand-gradient-pan) .empowerment-gradient {
                width: 2rem;
                height: 2rem;
                flex-shrink: 0;
            }
            nav button:has(.nav-brand-gradient-pan) .empowerment-gradient svg {
                width: 1.25rem;
                height: 1.25rem;
            }
            nav > div > div:first-child > span.text-slate-600 {
                font-size: 0.75rem;
            }
            #navMobileMenuBtn {
                flex-shrink: 0;
                min-width: 2.5rem;
                padding: 0.375rem;
            }
        }
        .card-glow { box-shadow: 0 0 40px rgba(59, 130, 246, 0.15); }
        .empowerment-gradient { background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%); flex-shrink: 0; }
        .wealth-gradient { background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%); }
        .opportunity-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        .opportunity-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 25px 50px rgba(0,0,0,0.4); }
        .score-ring { 
            position: relative;
            /* Layer 1 (top): unfilled gray covers from score to 100%; Layer 2: colored gradient 0-100% */
            background: 
                conic-gradient(from 0deg, transparent 0%, transparent var(--score-percent), #1e293b var(--score-percent), #1e293b 100%),
                conic-gradient(from 0deg, #ef4444 0%, #eab308 39%, #3b82f6 59%, #10b981 79%, #10b981 100%);
            transition: all 0.8s ease-out;
        }
        .pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
        @keyframes pulse-glow {
            0%, 100% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.4); }
            50% { box-shadow: 0 0 40px rgba(16, 185, 129, 0.8); }
        }
        .slide-up { animation: slideUp 0.5s ease-out; }
        @keyframes slideUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .fade-in { animation: fadeIn 0.3s ease-out; }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        .scale-in { animation: scaleIn 0.3s ease-out; }
        /* App loading overlay: same canvas as page background so it blends seamlessly */
        #appLoading.app-loading-overlay { background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0f172a 100%); }
        .app-loading-text { color: #94a3b8; font-size: 0.875rem; }
        /* Nextgen loading spinner: large gradient ring, theme colors */
        .app-loading-spinner {
            --loader-cyan: #00BCD4;
            --loader-cyan-bright: #00d4ff;
            --loader-blue: #1E90FF;
            --loader-blue-deep: #007FFF;
            --loader-emerald: #10b981;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: conic-gradient(from 0deg, var(--loader-cyan), var(--loader-cyan-bright), var(--loader-blue), var(--loader-blue-deep), var(--loader-emerald), var(--loader-cyan));
            mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #fff calc(100% - 10px));
            -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #fff calc(100% - 10px));
            animation: app-loading-spin 1.1s linear infinite;
            box-shadow: 0 0 24px rgba(0, 212, 255, 0.25), 0 0 48px rgba(16, 185, 129, 0.15);
        }
        @keyframes app-loading-spin { to { transform: rotate(360deg); } }
        .confetti { position: fixed; pointer-events: none; z-index: 9999; }
        @keyframes confetti-fall {
            0% { transform: translateY(0) rotate(0deg); opacity: 1; }
            100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
        }
        /* Pro mode: month arrows stick below nav when scrolling – glassmorphic, rounded like section cards */
        .budget-month-selector-sticky {
            position: sticky;
            top: 4.5rem;
            z-index: 30;
            padding: 0.5rem 1rem;
            margin-left: -1rem;
            margin-right: -1rem;
            border-radius: 1rem;
            background: rgba(15, 23, 42, 0.75);
            -webkit-backdrop-filter: blur(16px) saturate(180%);
            backdrop-filter: blur(16px) saturate(180%);
            isolation: isolate;
            border: 1px solid rgba(148, 163, 184, 0.2);
            box-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
        }
        body[data-theme="light"] .budget-month-selector-sticky {
            background: rgba(255, 255, 255, 0.6);
            border-color: rgba(148, 163, 184, 0.25);
            box-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
        }
        body[data-theme="light"] .budget-month-selector-sticky .budget-sticky-bar-btn {
            background: rgba(148, 163, 184, 0.35);
            border-color: rgba(148, 163, 184, 0.4);
            color: #334155;
        }
        body[data-theme="light"] .budget-month-selector-sticky .budget-sticky-bar-btn:hover {
            background: rgba(148, 163, 184, 0.5);
        }
        @keyframes scaleIn {
            from { opacity: 0; transform: scale(0.95); }
            to { opacity: 1; transform: scale(1); }
        }
        .modal-backdrop {
            background: rgba(0, 0, 0, 0.85);
            -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }
        input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }
        input[type="number"] { -moz-appearance: textfield; }
        .progress-bar { transition: width 0.8s ease-out; }
        /* Dashboard stat cards: Reference file style - value first, label below */
        .stat-card {
            transition: all 0.3s ease;
            min-width: 0;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 0.75rem;
            border-radius: 0.75rem;
            background: rgba(30, 41, 59, 0.6);
            -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
            isolation: isolate;
        }
        .stat-card:hover {
            transform: translateY(-2px);
            background: rgba(51, 65, 85, 0.7);
        }
        /* Light theme card styling */
        body[data-theme="light"] .stat-card {
            background: rgba(241,245,249,0.9);
            border-color: rgba(0,0,0,0.08);
        }
        body[data-theme="light"] .stat-card:hover {
            background: rgba(226,232,240,0.95);
        }
        /* Light mode: progress bar tracks (Savings Rate, Debt Ratio) */
        body[data-theme="light"] .progress-bar-track {
            background: #e2e8f0 !important;
        }
        body[data-theme="light"] #savingsRateBar {
            background: #10b981 !important;
        }
        body[data-theme="light"] #debtRatioBar {
            background: #3b82f6 !important;
        }
        /* Value: larger, comes first - always show full value */
        .stat-card {
            container-type: inline-size;
        }
        .stat-card .stat-value {
            min-width: 0;
            overflow: visible;
            white-space: normal;
            word-break: keep-all;
            overflow-wrap: anywhere;
            font-size: 1.125rem;
            font-weight: 700;
            line-height: 1.3;
            margin: 0;
            width: 100%;
            max-width: 100%;
        }
        @media (min-width: 640px) {
            .stat-card .stat-value {
                font-size: 1.25rem;
            }
        }
        /* Scale down font size for very long values using container queries */
        @container (max-width: 120px) {
            .stat-card .stat-value {
                font-size: 0.95rem;
            }
        }
        @container (max-width: 100px) {
            .stat-card .stat-value {
                font-size: 0.85rem;
            }
        }
        @container (max-width: 80px) {
            .stat-card .stat-value {
                font-size: 0.75rem;
            }
        }
        /* Label: smaller, comes below value */
        .stat-card .stat-label {
            min-width: 0;
            overflow: visible;
            white-space: normal;
            word-wrap: break-word;
            font-size: 0.75rem;
            color: #94a3b8;
            margin-top: 0.25rem;
            margin-bottom: 0;
            line-height: 1.2;
            width: 100%;
        }
        /* Grid: Reference file style - 2 cols mobile, 3 cols sm, 5 cols lg */
        .dashboard-stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0.75rem;
            flex: 1 1 0%;
            min-width: 0;
        }
        @media (min-width: 640px) {
            .dashboard-stats-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        @media (min-width: 1024px) {
            .dashboard-stats-grid:not(.dashboard-cards-large) {
                grid-template-columns: repeat(4, 1fr);
                gap: 0.875rem;
            }
        }
        /* Large cards: fewer per row, bigger gap (similar to Debt Defy) */
        .dashboard-stats-grid.dashboard-cards-large {
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
        }
        @media (min-width: 640px) {
            .dashboard-stats-grid.dashboard-cards-large {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        @media (min-width: 1024px) {
            .dashboard-stats-grid.dashboard-cards-large {
                grid-template-columns: repeat(3, 1fr);
                gap: 1.25rem;
            }
        }
        /* Dashboard stat card values: white in dark mode, black in light mode */
        #dashboardStatsGrid .stat-card .stat-value { color: #fff !important; }
        body[data-theme="light"] #dashboardStatsGrid .stat-card .stat-value { color: #0f172a !important; }
        /* Dashboard card size toggle buttons */
        .dashboard-card-size-toggle {
            color: #94a3b8;
            background-color: transparent;
            transition: all 0.2s ease;
        }
        .dashboard-card-size-toggle:hover {
            color: #e2e8f0;
            background-color: rgba(148, 163, 184, 0.15);
        }
        .dashboard-card-size-toggle.active {
            background-color: rgba(16, 185, 129, 0.3);
            color: #34d399;
        }
        body[data-theme="light"] .dashboard-card-size-toggle {
            color: #64748b;
        }
        body[data-theme="light"] .dashboard-card-size-toggle:hover {
            color: #334155;
            background-color: rgba(100, 116, 139, 0.15);
        }
        body[data-theme="light"] .dashboard-card-size-toggle.active {
            background-color: rgba(16, 185, 129, 0.25);
            color: #059669;
        }
        /* Tooltip styling for stat cards */
        .stat-card-tooltip {
            position: relative;
        }
        .stat-card-tooltip:hover {
            z-index: 9998;
        }
        /* Cashflow Summary: elevate grid above Savings Input when any tooltip is hovered */
        #budget .glass-card:has(.stat-card-tooltip:hover) > .grid {
            position: relative;
            z-index: 9998;
        }
        /* Cashflow Summary cards: grow and border glow on hover (tooltips unchanged) */
        #cashflowSummaryGrid .cashflow-summary-card:hover {
            transform: scale(1.04);
        }
        #cashflowSummaryGrid .stat-card-tooltip:nth-child(1) .cashflow-summary-card:hover {
            box-shadow: 0 0 20px 3px rgba(16, 185, 129, 0.5);
        }
        #cashflowSummaryGrid .stat-card-tooltip:nth-child(2) .cashflow-summary-card:hover {
            box-shadow: 0 0 20px 3px rgba(239, 68, 68, 0.5);
        }
        #cashflowSummaryGrid .stat-card-tooltip:nth-child(3) .cashflow-summary-card[data-cashflow-state="positive"]:hover {
            box-shadow: 0 0 20px 3px rgba(16, 185, 129, 0.5);
        }
        #cashflowSummaryGrid .stat-card-tooltip:nth-child(3) .cashflow-summary-card[data-cashflow-state="negative"]:hover {
            box-shadow: 0 0 20px 3px rgba(239, 68, 68, 0.5);
        }
        #cashflowSummaryGrid .stat-card-tooltip:nth-child(3) .cashflow-summary-card[data-cashflow-state="zero"]:hover {
            box-shadow: 0 0 20px 3px rgba(59, 130, 246, 0.5);
        }
        #cashflowSummaryGrid .stat-card-tooltip:nth-child(4) .cashflow-summary-card:hover {
            box-shadow: 0 0 20px 3px rgba(168, 85, 247, 0.5);
        }
        .stat-card-tooltip .stat-tooltip-text {
            visibility: hidden;
            opacity: 0;
            position: absolute;
            z-index: 9999;
            bottom: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%);
            background: rgba(15, 23, 42, 0.92);
            backdrop-filter: blur(16px) saturate(180%);
            -webkit-backdrop-filter: blur(16px) saturate(180%);
            isolation: isolate;
            border: 1px solid rgba(148, 163, 184, 0.25);
            border-radius: 0.75rem;
            padding: 0.75rem 1rem;
            font-size: 0.75rem;
            white-space: normal;
            width: 280px;
            max-width: min(320px, calc(100vw - 2rem));
            min-width: 240px;
            text-align: left;
            line-height: 1.5;
            transition: opacity 0.2s ease, visibility 0.2s ease;
            box-shadow: 0 10px 40px -10px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05) inset;
            pointer-events: none;
        }
        /* Dashboard tooltip preferences: hide value/description based on user settings */
        body[data-tooltip-value="false"] .stat-card-tooltip .stat-tooltip-value { display: none !important; }
        body[data-tooltip-description="false"] .stat-card-tooltip .stat-tooltip-description { display: none !important; }
        /* Hide tooltips that only have description when description is off (e.g. Empowerment score levels) */
        body[data-tooltip-description="false"] .stat-card-tooltip .stat-tooltip-text:not(:has(.stat-tooltip-value)) { visibility: hidden !important; opacity: 0 !important; }
        body[data-tooltip-value="false"][data-tooltip-description="false"] .stat-card-tooltip:hover .stat-tooltip-text { visibility: hidden; opacity: 0; pointer-events: none; }
        /* When description is off, tooltip shrinks to fit the value snugly */
        body[data-tooltip-description="false"] .stat-card-tooltip .stat-tooltip-text {
            width: fit-content;
            min-width: unset;
        }
        .stat-card-tooltip:hover .stat-tooltip-text {
            visibility: visible;
            opacity: 1;
        }
        
        /* Show empowerment score tooltip when hovering over entire container */
        .empowerment-score-container:hover .empowerment-score-tooltip-panel {
            visibility: visible;
            opacity: 1;
        }
        /* Tooltip arrow - points down by default (matches glassmorphic bg) */
        .stat-card-tooltip .stat-tooltip-text::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 6px solid transparent;
            border-top-color: rgba(15, 23, 42, 0.95);
        }
        /* Tooltip arrow when tooltip is below card */
        .stat-card-tooltip .stat-tooltip-text[style*="top: calc(100%"]::after,
        .stat-card-tooltip.tooltip-below .stat-tooltip-text::after {
            top: auto;
            bottom: 100%;
            border-top-color: transparent;
            border-bottom-color: rgba(15, 23, 42, 0.95);
        }
        /* Savings & Investments: always show tooltip below like other top-row cards */
        .stat-card-tooltip.tooltip-below .stat-tooltip-text {
            bottom: auto;
            top: calc(100% + 8px);
        }
        /* Adjust tooltip position for cards near viewport edges */
        .stat-card-tooltip .stat-tooltip-text.left-align {
            left: 0;
            transform: translateX(0);
        }
        .stat-card-tooltip .stat-tooltip-text.left-align::after {
            left: 20px;
            transform: translateX(0);
        }
        .stat-card-tooltip .stat-tooltip-text.right-align {
            left: auto;
            right: 0;
            transform: translateX(0);
        }
        .stat-card-tooltip .stat-tooltip-text.right-align::after {
            left: auto;
            right: 20px;
            transform: translateX(0);
        }
        /* Light theme tooltip – glassmorphic */
        body[data-theme="light"] .stat-card-tooltip .stat-tooltip-text {
            background: rgba(255, 255, 255, 0.5) !important;
            backdrop-filter: blur(20px) saturate(180%) !important;
            -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
            isolation: isolate !important;
            color: #0f172a !important;
            border-color: rgba(148, 163, 184, 0.3) !important;
            box-shadow: 0 10px 40px -10px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.6) inset !important;
        }
        body[data-theme="light"] .stat-card-tooltip .stat-tooltip-text::after {
            border-top-color: rgba(255, 255, 255, 0.9);
        }
        body[data-theme="light"] .stat-card-tooltip .stat-tooltip-text[style*="top: calc(100%"]::after,
        body[data-theme="light"] .stat-card-tooltip.tooltip-below .stat-tooltip-text::after {
            border-bottom-color: rgba(255, 255, 255, 0.9);
        }
        /* Wealth Window tooltip value: app green in both themes (emerald-400 dark, #059669 light) */
        body[data-theme="light"] .stat-card-tooltip .wealth-window-tooltip-value {
            color: #059669 !important;
        }
        /* Debt Payoff tooltip value: app red in both themes (red-400 dark, #dc2626 light) */
        body[data-theme="light"] .stat-card-tooltip .debt-payoff-tooltip-value {
            color: #dc2626 !important;
        }
        /* Debt Payoff card value: app red in both themes */
        body[data-theme="light"] .debt-payoff-card-value {
            color: #dc2626 !important;
        }
        /* Logged-in name: white in dark mode, overridden to black in light mode */
        #navUserEmail { color: #ffffff !important; }
        /* Level badge tooltip: show below nav badge on hover */
        .level-badge-tooltip {
            position: relative;
        }
        .level-badge-tooltip .level-badge-tooltip-panel {
            visibility: hidden;
            opacity: 0;
            position: absolute;
            z-index: 1000;
            top: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%) translateZ(0);
            -webkit-transform: translateX(-50%) translateZ(0);
            min-width: 260px;
            max-width: 320px;
            background: rgba(30, 41, 59, 0.95);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border: 1px solid rgba(148, 163, 184, 0.3);
            border-radius: 0.75rem;
            padding: 0.875rem 1rem;
            font-size: 0.75rem;
            color: #e2e8f0;
            transition: visibility 0.15s 0.2s, opacity 0.15s 0.2s;
        }
        .level-badge-tooltip:hover .level-badge-tooltip-panel {
            visibility: visible;
            opacity: 1;
            transition-delay: 0s;
        }
        .level-badge-tooltip .level-badge-tooltip-panel::after {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 6px solid transparent;
            border-bottom-color: rgba(30, 41, 59, 0.95);
        }
        .level-badge-tooltip .level-tier-row {
            color: #94a3b8;
        }
        .level-badge-tooltip .level-tier-achieved {
            color: #10b981 !important;
            font-weight: 600;
        }
        body[data-theme="light"] .level-badge-tooltip .level-badge-tooltip-panel {
            background: rgba(255, 255, 255, 0.95);
            border-color: rgba(148, 163, 184, 0.4);
            color: #1e293b;
        }
        body[data-theme="light"] .level-badge-tooltip .level-badge-tooltip-panel::after {
            border-bottom-color: rgba(255, 255, 255, 0.95);
        }
        body[data-theme="light"] .level-badge-tooltip .level-tier-row {
            color: #64748b;
        }
        body[data-theme="light"] .level-badge-tooltip .level-tier-achieved {
            color: #059669 !important;
        }
        body[data-theme="light"] .level-badge-tooltip .level-tooltip-desc {
            color: #475569 !important;
        }
        /* Settings level tooltip: positioned at bottom-left of cursor via JS (position: fixed) */
        .level-tooltip-settings {
            position: fixed !important;
            left: 0;
            top: 0;
            transform: none !important;
        }
        .level-tooltip-settings::after {
            display: none;
        }
        /* Empowerment score tooltip: above and to the left of the score circle */
        .empowerment-score-tooltip {
            z-index: 100;
            isolation: isolate;
        }
        .empowerment-score-tooltip .empowerment-score-tooltip-panel {
            bottom: calc(100% + 2px);
            top: auto;
            left: auto;
            right: 0;
            transform: none;
            margin-bottom: 0;
            z-index: 9999;
            width: 260px;
            max-width: min(280px, calc(100vw - 2rem));
            max-height: min(220px, 40vh);
            overflow-y: hidden;
            white-space: normal;
        }
        .empowerment-score-tooltip .empowerment-score-tooltip-panel::after {
            left: auto;
            right: 24px;
            top: 100%;
            bottom: auto;
            transform: none;
            border: 6px solid transparent;
            border-top-color: rgba(30, 41, 59, 0.9);
            border-bottom-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
        }
        body[data-theme="light"] .empowerment-score-tooltip .empowerment-score-tooltip-panel::after {
            border-top-color: rgba(255, 255, 255, 0.9);
            border-bottom-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
        }
        /* Empowerment score dial: border beam on hover around inner circle (tooltip and behavior unchanged) */
        .empowerment-score-tooltip .score-ring {
            overflow: visible;
        }
        .empowerment-score-tooltip .score-ring > div:first-child {
            position: relative;
            overflow: visible;
            transition: box-shadow 0.3s ease;
        }
        .empowerment-score-tooltip:hover .score-ring > div:first-child {
            box-shadow: 0 0 15px rgba(0, 188, 212, 0.3);
        }
        .empowerment-score-tooltip .score-ring > div:first-child::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 9999px;
            padding: 2px;
            background: linear-gradient(90deg, #00BCD4 0%, #00d4ff 25%, #1E90FF 50%, #007FFF 75%, #00BCD4 100%);
            background-size: 300% 100%;
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask-composite: exclude;
            pointer-events: none;
            z-index: 0;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .empowerment-score-tooltip:hover .score-ring > div:first-child::before {
            opacity: 1;
            animation: streamFlow 4s linear infinite;
        }
        .empowerment-score-tooltip .score-ring > div:first-child > * {
            position: relative;
            z-index: 1;
        }
        
        /* Empowerment Score Text Gradient Effect */
        .empowerment-score-heading {
            transition: transform 0.2s ease;
            display: inline-block;
        }
        
        .empowerment-score-container:hover .empowerment-score-heading {
            animation: emailGradient 2s ease-in-out infinite;
            background: linear-gradient(135deg, #00BCD4 0%, #00d4ff 25%, #1E90FF 50%, #007FFF 75%, #10b981 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-size: 200% 200%;
            transform: scale(1.05);
        }
        
        .empowerment-score-container:not(:hover) .empowerment-score-heading {
            -webkit-text-fill-color: currentColor;
        }
        
        /* Trigger dial border beam when hovering over container */
        .empowerment-score-container:hover .score-ring > div:first-child {
            box-shadow: 0 0 15px rgba(0, 188, 212, 0.3);
        }
        
        .empowerment-score-container:hover .score-ring > div:first-child::before {
            opacity: 1;
            animation: streamFlow 4s linear infinite;
        }
        
        .currency-btn.active { background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%); }

        /* Stream border effect – neon tube light flowing around cards on hover */
        /* Excludes empowerment score container (.card-glow) so minicard tooltips aren't clipped */
        /* Brand colors: #00BCD4 → #00d4ff → #1E90FF → #007FFF (seamless loop) */
        @keyframes streamFlow {
            0% { background-position: 0% 0%; }
            100% { background-position: 100% 0%; }
        }
        #dashboard .glass-card:not(.card-glow),
        #dashboard .stat-card-tooltip .stat-card,
        #opportunityGrid .opportunity-card,
        #savedBudgetsGrid .budget-card {
            position: relative;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        #dashboard .glass-card:not(.card-glow):hover,
        #opportunityGrid .opportunity-card:hover,
        #savedBudgetsGrid .budget-card:hover {
            box-shadow: 0 0 15px rgba(0, 188, 212, 0.3);
        }
        #dashboard .stat-card-tooltip:hover .stat-card {
            box-shadow: 0 0 15px rgba(0, 188, 212, 0.3);
        }
        /* Stream pseudo-element: 2px border, rounded corners, visible on hover */
        #dashboard .glass-card:not(.card-glow)::before,
        #dashboard .stat-card-tooltip .stat-card::before,
        #opportunityGrid .opportunity-card::before,
        #savedBudgetsGrid .budget-card::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit; /* or 12px for fixed radius */
            padding: 2px;
            background: linear-gradient(
                90deg,
                #00BCD4 0%,
                #00d4ff 25%,
                #1E90FF 50%,
                #007FFF 75%,
                #00BCD4 100%
            );
            background-size: 300% 100%;
            -webkit-mask:
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask:
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
            mask-composite: exclude;
            pointer-events: none;
            z-index: 0;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        #dashboard .glass-card:not(.card-glow):hover::before,
        #opportunityGrid .opportunity-card:hover::before,
        #savedBudgetsGrid .budget-card:hover::before {
            opacity: 1;
            animation: streamFlow 4s linear infinite;
        }
        #dashboard .stat-card-tooltip:hover .stat-card::before {
            opacity: 1;
            animation: streamFlow 4s linear infinite;
        }
        /* Content above stream border */
        #dashboard .glass-card:not(.card-glow) > *,
        #dashboard .stat-card-tooltip .stat-card > *,
        #opportunityGrid .opportunity-card > *,
        #savedBudgetsGrid .budget-card > * {
            position: relative;
            z-index: 1;
        }

        /* Budget section: stream border on focus-within (when user clicks into earnings, expenses, debts, cashflow) */
        #budget .glass-card:has(#incomeInputs, #expenseInputs, #debtInputs, #summaryIncome) {
            position: relative;
            transition: box-shadow 0.3s ease;
        }
        #budget .glass-card:has(#incomeInputs, #expenseInputs, #debtInputs, #summaryIncome):focus-within {
            box-shadow: 0 0 15px rgba(0, 188, 212, 0.3);
        }
        #budget .glass-card:has(#incomeInputs, #expenseInputs, #debtInputs, #summaryIncome)::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            padding: 2px;
            background: linear-gradient(
                90deg,
                #00BCD4 0%,
                #00d4ff 25%,
                #1E90FF 50%,
                #007FFF 75%,
                #00BCD4 100%
            );
            background-size: 300% 100%;
            -webkit-mask:
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask:
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
            mask-composite: exclude;
            pointer-events: none;
            z-index: 0;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        #budget .glass-card:has(#incomeInputs, #expenseInputs, #debtInputs, #summaryIncome):focus-within::before {
            opacity: 1;
            animation: streamFlow 4s linear infinite;
        }
        #budget .glass-card:has(#incomeInputs, #expenseInputs, #debtInputs, #summaryIncome) > * {
            position: relative;
            z-index: 1;
        }

        /* Budget Companion panel: stream border when input is focused */
        #budgetCompanionPanel {
            position: relative;
            overflow: hidden;
            transition: box-shadow 0.3s ease;
        }
        #budgetCompanionPanel:focus-within {
            box-shadow: 0 0 15px rgba(0, 188, 212, 0.3);
        }
        #budgetCompanionPanel::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            padding: 2px;
            background: linear-gradient(
                90deg,
                #00BCD4 0%,
                #00d4ff 25%,
                #1E90FF 50%,
                #007FFF 75%,
                #00BCD4 100%
            );
            background-size: 300% 100%;
            -webkit-mask:
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask:
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
            mask-composite: exclude;
            pointer-events: none;
            z-index: 0;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        #budgetCompanionPanel:focus-within::before {
            opacity: 1;
            animation: streamFlow 4s linear infinite;
        }
        #budgetCompanionPanel > * {
            position: relative;
            z-index: 1;
        }

        /* Reusable: stream border on focus/click for any parent container */
        .stream-border-on-focus {
            position: relative;
            overflow: hidden;
            transition: box-shadow 0.3s ease;
        }
        .stream-border-on-focus:focus,
        .stream-border-on-focus:focus-within {
            box-shadow: 0 0 15px rgba(0, 188, 212, 0.3);
            outline: none;
        }
        .stream-border-on-focus::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            padding: 2px;
            background: linear-gradient(90deg, #00BCD4 0%, #00d4ff 25%, #1E90FF 50%, #007FFF 75%, #00BCD4 100%);
            background-size: 300% 100%;
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask-composite: exclude;
            pointer-events: none;
            z-index: 0;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .stream-border-on-focus:focus::before,
        .stream-border-on-focus:focus-within::before {
            opacity: 1;
            animation: streamFlow 4s linear infinite;
        }
        .stream-border-on-focus > * {
            position: relative;
            z-index: 1;
        }

        /* Reusable: stream border on hover (beam effect) */
        .stream-border-on-hover {
            position: relative;
            overflow: hidden;
            transition: box-shadow 0.3s ease;
        }
        .stream-border-on-hover:hover {
            box-shadow: 0 0 15px rgba(0, 188, 212, 0.3);
        }
        .stream-border-on-hover::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            padding: 2px;
            background: linear-gradient(90deg, #00BCD4 0%, #00d4ff 25%, #1E90FF 50%, #007FFF 75%, #00BCD4 100%);
            background-size: 300% 100%;
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask-composite: exclude;
            pointer-events: none;
            z-index: 0;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .stream-border-on-hover:hover::before {
            opacity: 1;
            animation: streamFlow 4s linear infinite;
        }
        .stream-border-on-hover > * {
            position: relative;
            z-index: 1;
        }

        /* Standing border beam: always visible animated border (no focus required) */
        .stream-border-standing {
            position: relative;
            overflow: hidden;
            box-shadow: 0 0 15px rgba(0, 188, 212, 0.25);
        }
        .stream-border-standing::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            padding: 2px;
            background: linear-gradient(90deg, #00BCD4 0%, #00d4ff 25%, #1E90FF 50%, #007FFF 75%, #00BCD4 100%);
            background-size: 300% 100%;
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask-composite: exclude;
            pointer-events: none;
            z-index: 0;
            opacity: 1;
            animation: streamFlow 4s linear infinite;
        }
        .stream-border-standing > * {
            position: relative;
            z-index: 1;
        }
        /* Journey Guide modal: beam flush with outer edge (no separate border) */
        #journeyGuideModal .stream-border-standing {
            border: none !important;
        }

        /* Speed: 4s = slow, 2s = fast. Reverse: animation-direction: reverse */
        .nav-link { position: relative; }
        .nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, #10b981, #3b82f6); transition: width 0.3s ease; }
        .nav-link:hover::after, .nav-link.active::after { width: 100%; }
        /* EmpowerMyBudget header text: diagonal gradient pan on hover; standing color = more blue, hint of green */
        .nav-brand-gradient-pan {
            background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 25%, #34d399 50%, #3b82f6 75%, #10b981 100%);
            background-size: 200% 200%;
            background-position: 0% 0%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            transition: background-position 0.6s ease;
        }
        button:has(.nav-brand-gradient-pan):hover .nav-brand-gradient-pan,
        .nav-brand-gradient-pan:hover {
            background-position: 100% 100%;
        }
        /* Finducation™ header text: teal/cyan → electric blue (matches EmpowerMyBudget gradient) */
        .nav-finducation-gradient-pan {
            background: linear-gradient(90deg, #00BCD4 0%, #00d4ff 35%, #1E90FF 70%, #007FFF 100%);
            background-size: 200% 200%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-decoration: none;
            transition: transform 0.2s ease;
            display: inline-block;
        }
        a:hover .nav-finducation-gradient-pan {
            animation: emailGradient 2s ease-in-out infinite;
            background: linear-gradient(135deg, #00BCD4 0%, #00d4ff 25%, #1E90FF 50%, #007FFF 75%, #10b981 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-size: 200% 200%;
            transform: scale(1.05);
        }
        .input-with-currency { position: relative; }
        .input-with-currency input { padding-left: 1.1rem !important; padding-right: 0.5rem; }
        .input-with-currency.symbol-2 input { padding-left: 1.4rem !important; }
        .input-with-currency.symbol-3 input { padding-left: 1.7rem !important; }
        .input-with-currency.symbol-4 input { padding-left: 2rem !important; }
        .input-with-currency .currency-symbol { position: absolute; left: 0.35rem; top: 50%; transform: translateY(-50%); color: #94a3b8; font-weight: 500; font-size: 0.7rem; z-index: 1; pointer-events: none; width: fit-content; }
        /* Suffix currencies (e.g. EUR): symbol after number to match formatCurrency output */
        .input-with-currency.currency-suffix input { padding-left: 0.5rem !important; padding-right: 1.1rem !important; }
        .input-with-currency.currency-suffix.symbol-2 input { padding-right: 1.4rem !important; }
        .input-with-currency.currency-suffix.symbol-3 input { padding-right: 1.7rem !important; }
        .input-with-currency.currency-suffix.symbol-4 input { padding-right: 2rem !important; }
        .input-with-currency.currency-suffix .currency-symbol { left: auto; right: 0.35rem; }
        /* Onboarding currency inputs - dynamic padding matches budget section */
        #onboarding .input-with-currency input { padding-left: 1.1rem !important; }
        #onboarding .input-with-currency.symbol-2 input { padding-left: 1.4rem !important; }
        #onboarding .input-with-currency.symbol-3 input { padding-left: 1.7rem !important; }
        #onboarding .input-with-currency.symbol-4 input { padding-left: 2rem !important; }
        #onboarding .input-with-currency.currency-suffix input { padding-left: 0.5rem !important; padding-right: 1.1rem !important; }
        #onboarding .input-with-currency.currency-suffix.symbol-2 input { padding-right: 1.4rem !important; }
        #onboarding .input-with-currency.currency-suffix.symbol-3 input { padding-right: 1.7rem !important; }
        #onboarding .input-with-currency.currency-suffix.symbol-4 input { padding-right: 2rem !important; }
        #onboarding .input-with-currency.currency-suffix .currency-symbol { left: auto; right: 0.35rem; }
        /* Onboarding debt table: columns fit without overlaying */
        .onboard-debt-grid {
            display: grid;
            grid-template-columns: minmax(0, 2fr) minmax(72px, 1fr) minmax(90px, 1fr);
        }
        .glass-card {
            background: rgba(30, 41, 59, 0.72);
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }
        .tooltip { position: relative; }
        .tooltip:hover .tooltip-text { visibility: visible; opacity: 1; }
        .tooltip-text {
            visibility: hidden;
            opacity: 0;
            position: absolute;
            z-index: 100;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            padding: 0.5rem 0.75rem;
            background: rgba(30, 41, 59, 0.5);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            isolation: isolate;
            border: 1px solid rgba(148, 163, 184, 0.2);
            border-radius: 0.75rem;
            font-size: 0.75rem;
            white-space: nowrap;
            transition: all 0.2s ease;
            margin-bottom: 0.5rem;
            box-shadow: 0 10px 40px -10px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05) inset;
        }
        /* Animated gradient border for empowerment score card */
        .debt-section-info { position: relative; z-index: 100; }
        .debt-section-info .tooltip-text {
            white-space: normal;
            width: 520px;
            max-width: min(520px, calc(100vw - 2rem));
            min-width: 320px;
            text-align: left;
            z-index: 1100;
            left: 100%;
            bottom: auto;
            top: 50%;
            transform: translateY(-50%);
            margin-left: 0.5rem;
            margin-bottom: 0;
        }
        /* Budget section info tooltips (Earnings, Expenses, Debts) – in front, match stat tooltip styling, no scrollbar, more vertical to avoid overlapping section title */
        .budget-section-info-tooltip {
            z-index: 9999 !important;
            white-space: normal !important;
            width: 220px !important;
            max-width: min(260px, calc(100vw - 2rem)) !important;
            min-width: 200px !important;
            max-height: none !important;
            overflow: visible !important;
            text-align: left;
            line-height: 1.5;
            font-size: 0.75rem;
            color: #e2e8f0 !important;
            background: rgba(15, 23, 42, 0.92) !important;
            backdrop-filter: blur(16px) saturate(180%);
            -webkit-backdrop-filter: blur(16px) saturate(180%);
            border: 1px solid rgba(148, 163, 184, 0.25) !important;
            border-radius: 0.75rem;
            padding: 0.75rem 1rem;
            box-shadow: 0 10px 40px -10px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05) inset;
        }
        /* Recurrence tooltips (Earnings, Expenses): open to the right of the (i) icon so they don't overlay the section title */
        .recurrence-toolbar .info-tooltip .budget-section-info-tooltip {
            left: 100% !important;
            bottom: auto !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            margin-left: 0.5rem;
            margin-bottom: 0;
        }
        .debt-section-info .budget-section-info-tooltip {
            width: 320px !important;
            max-width: min(520px, calc(100vw - 2rem)) !important;
            min-width: 300px !important;
            z-index: 99999 !important;
            left: 100% !important;
            bottom: auto !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            margin-left: 0.5rem;
            margin-bottom: 0;
        }
        .recurrence-toolbar .info-tooltip .budget-section-info-tooltip,
        .debt-section-info .budget-section-info-tooltip {
            max-height: none !important;
            overflow: visible !important;
        }
        .budget-section-info-tooltip::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            margin-left: -6px;
            border: 6px solid transparent;
            border-right-color: rgba(15, 23, 42, 0.95);
            transform: translateY(-50%);
        }
        .recurrence-toolbar .budget-section-info-tooltip::after {
            top: 50%;
            left: 0;
            margin-left: -6px;
            margin-top: 0;
            transform: translateY(-50%);
            border-top-color: transparent;
            border-right-color: rgba(15, 23, 42, 0.95);
        }
        body[data-theme="light"] .budget-section-info-tooltip {
            background: rgba(255, 255, 255, 0.95) !important;
            color: #0f172a !important;
            border-color: rgba(148, 163, 184, 0.3) !important;
            box-shadow: 0 10px 40px -10px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.6) inset !important;
        }
        body[data-theme="light"] .budget-section-info-tooltip::after {
            border-right-color: rgba(255, 255, 255, 0.95);
        }
        body[data-theme="light"] .recurrence-toolbar .budget-section-info-tooltip::after {
            border-right-color: rgba(255, 255, 255, 0.95);
        }
        /* Debt Projected Estimate tooltip – same look as stat card tooltips, no question mark, less horizontal */
        .debt-projected-tooltip .debt-projected-tooltip-panel {
            visibility: hidden;
            opacity: 0;
            position: absolute;
            z-index: 9999;
            bottom: calc(100% + 8px);
            right: 0;
            left: auto;
            transform: none;
            width: 260px;
            max-width: min(280px, calc(100vw - 2rem));
            text-align: left;
            line-height: 1.5;
            white-space: normal;
            font-size: 0.75rem;
            color: #e2e8f0;
            background: rgba(15, 23, 42, 0.92);
            backdrop-filter: blur(16px) saturate(180%);
            -webkit-backdrop-filter: blur(16px) saturate(180%);
            isolation: isolate;
            border: 1px solid rgba(148, 163, 184, 0.25);
            border-radius: 0.75rem;
            padding: 0.75rem 1rem;
            box-shadow: 0 10px 40px -10px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05) inset;
            pointer-events: none;
            transition: opacity 0.2s ease, visibility 0.2s ease;
        }
        .debt-projected-tooltip:hover .debt-projected-tooltip-panel {
            visibility: visible;
            opacity: 1;
        }
        .debt-projected-tooltip .debt-projected-tooltip-panel::after {
            content: '';
            position: absolute;
            top: 100%;
            right: 1rem;
            left: auto;
            border: 6px solid transparent;
            border-top-color: rgba(15, 23, 42, 0.95);
        }
        body[data-theme="light"] .debt-projected-tooltip .debt-projected-tooltip-panel {
            background: rgba(255, 255, 255, 0.5) !important;
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            color: #0f172a !important;
            border-color: rgba(148, 163, 184, 0.3) !important;
            box-shadow: 0 10px 40px -10px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.6) inset !important;
        }
        body[data-theme="light"] .debt-projected-tooltip .debt-projected-tooltip-panel::after {
            border-top-color: rgba(255, 255, 255, 0.9);
        }
        .score-number { transition: all 0.5s ease; }
        .glow-text { text-shadow: 0 0 20px rgba(16, 185, 129, 0.5); }
        .budget-card { transition: all 0.3s ease; }
        .budget-card:hover { transform: translateY(-4px); box-shadow: 0 15px 30px rgba(0,0,0,0.3); }
        .budget-line-item { display: grid; grid-template-columns: 1.5rem 2.5rem minmax(0, 1.28fr) minmax(80px, 115px) 3rem 2rem; gap: 0.5rem; align-items: center; min-width: 0; }
        /* With due date: extra column between Amount and Freq; due-date column must not push trash off (Safari fix) */
        #earningsBudgetCard.show-due-date .budget-header-row,
        #expensesBudgetCard.show-due-date .budget-header-row { grid-template-columns: 1.5rem 2.5rem minmax(0, 1fr) minmax(80px, 115px) minmax(0, 58px) 3rem 2.25rem; }
        #earningsBudgetCard.show-due-date .budget-line-item,
        #expensesBudgetCard.show-due-date .budget-line-item { grid-template-columns: 1.5rem 2.5rem minmax(0, 1fr) minmax(80px, 115px) minmax(0, 58px) 3rem 2.25rem; min-width: 0; }
        #earningsBudgetCard.show-due-date .due-header,
        #expensesBudgetCard.show-due-date .due-header { display: block !important; }
        .due-date-field { min-width: 0; max-width: 100%; }
        .budget-line-item .due-date-field { overflow: hidden; }
        /* Trash column: never shrink so it stays visible in Safari */
        .budget-line-item button[onclick*="deleteBudgetItem"] { flex-shrink: 0; min-width: 2rem; }
        .due-date-field input::-webkit-inner-spin-button,
        .due-date-field input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
        .due-date-field input[type="number"] { -moz-appearance: textfield; }
        .due-date-arrows { width: 1.25rem; }
        .due-date-arrow { width: 100%; height: 50%; min-height: 0.75rem; padding: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: #94a3b8; cursor: pointer; transition: background 0.15s, color 0.15s; }
        .due-date-arrow:hover { background: rgba(71, 85, 105, 0.6); color: #e2e8f0; }
        .due-date-arrow:active { background: rgba(71, 85, 105, 0.8); }
        .spinner-btn { width: 1.25rem; height: 1.25rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0; font-size: 0.5rem; line-height: 1; border: 1px solid #475569; border-radius: 0.25rem; background: rgba(71, 85, 105, 0.6); color: #94a3b8; cursor: pointer; transition: background 0.2s, color 0.2s; }
        .spinner-btn:hover { background: rgba(71, 85, 105, 0.9); color: #e2e8f0; }
        .settings-reminder-spinner .spinner-btn { width: 1.5rem; height: 1.5rem; font-size: 0.6rem; }
        body[data-theme="light"] .settings-reminder-spinner .spinner-btn { background: #e2e8f0; border-color: #cbd5e1; color: #475569; }
        body[data-theme="light"] .settings-reminder-spinner .spinner-btn:hover { background: #cbd5e1; color: #334155; }
        body[data-theme="light"] .due-date-arrow { color: #475569; }
        body[data-theme="light"] .due-date-arrow:hover { background: rgba(0, 0, 0, 0.06); color: #334155; }
        body[data-theme="light"] .due-date-arrow:active { background: rgba(0, 0, 0, 0.1); }
        body[data-theme="light"] .due-date-field .due-date-arrows { border-left-color: #cbd5e1; }
        /* Debts have checkbox + additional fields */
        .budget-line-item[data-debt-id] { grid-template-columns: 1.5rem 2.5rem 1.2fr minmax(110px, 140px) minmax(100px, 120px) minmax(70px, 90px) minmax(56px, 72px) 2.5rem minmax(80px, 100px) minmax(120px, 150px) 2rem; }
        .budget-header-row { display: grid; grid-template-columns: 1.5rem 2.5rem minmax(0, 1.28fr) minmax(80px, 115px) 3rem 2rem; gap: 0.5rem; align-items: center; padding: 0 0.25rem; margin: 0 0 0.25rem 0; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: #94a3b8; }
        .budget-header-row.debt { grid-template-columns: 1.5rem 2.5rem 1.2fr minmax(110px, 140px) minmax(100px, 120px) minmax(70px, 90px) minmax(56px, 72px) 2.5rem minmax(80px, 100px) minmax(120px, 150px) 2rem; }
        .debt-payment-wrap { display: flex; align-items: center; gap: 0.25rem; }
        .debt-payment-wrap input[readonly] { background: rgba(51, 65, 85, 0.5); color: #94a3b8; cursor: default; }
        .debt-payment-lock { flex-shrink: 0; padding: 0.35rem; border-radius: 0.375rem; background: rgba(71, 85, 105, 0.6); border: 1px solid #475569; color: #94a3b8; cursor: pointer; transition: all 0.2s; }
        .debt-payment-lock:hover { background: rgba(71, 85, 105, 0.9); color: #e2e8f0; }
        .debt-payment-lock.override { background: rgba(245, 158, 11, 0.2); border-color: #f59e0b; color: #f59e0b; }
        .debt-row-lock { flex-shrink: 0; padding: 0.35rem; border-radius: 0.375rem; background: rgba(71, 85, 105, 0.6); border: 1px solid #475569; color: #94a3b8; cursor: pointer; transition: all 0.2s; }
        .debt-row-lock:hover { background: rgba(71, 85, 105, 0.9); color: #e2e8f0; }
        .debt-row-lock.debt-row-lock-active { background: rgba(245, 158, 11, 0.2); border-color: #f59e0b; color: #f59e0b; }
        /* Header row: base alignment */
        .budget-header-row span { padding: 0; transform: none; }
        /* Earnings and Expenses: center headers above their columns */
        .budget-header-row:not(.debt) span { text-align: center; }
        /* Expenses: nudge DUE and FREQ left to match Earnings section alignment */
        .budget-header-row.expense-header span:nth-child(5),
        .budget-header-row.expense-header span:nth-child(6) { transform: translateX(-0.5rem); }
        /* Bulk action buttons – light mode hover when enabled */
        body[data-theme="light"] button[id*="bulkTrash"]:not(:disabled):hover { color: #dc2626 !important; }
        body[data-theme="light"] button[id*="bulkUndo"]:not(:disabled):hover { color: #059669 !important; }
        /* Budget checkboxes: section colors with theme-specific checkmark (white in light, dark in dark) */
        #earningsBudgetCard input[type="checkbox"],
        #expensesBudgetCard input[type="checkbox"],
        .budget-line-item[data-debt-id] input[type="checkbox"],
        input#selectAllDebt,
        input#showApplyToAllDebt {
            appearance: none;
            -webkit-appearance: none;
            width: 1.125rem;
            height: 1.125rem;
            border: 2px solid #475569;
            border-radius: 0.25rem;
            background: transparent;
            cursor: pointer;
            background-size: 75%;
            background-repeat: no-repeat;
            background-position: center;
            transition: background-color 0.2s, border-color 0.2s;
        }
        /* Dark mode: dark checkmark */
        #earningsBudgetCard input[type="checkbox"]:checked { background-color: #10b981; border-color: #10b981; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e293b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E"); }
        #expensesBudgetCard input[type="checkbox"]:checked { background-color: #ef4444; border-color: #ef4444; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e293b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E"); }
        .budget-line-item[data-debt-id] input[type="checkbox"]:checked,
        input#selectAllDebt:checked,
        input#showApplyToAllDebt:checked { background-color: #f59e0b; border-color: #f59e0b; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e293b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E"); }
        /* Light mode: background #059669 (earnings), #dc2626 (expenses), #d97706 (debts) with white check marks */
        body[data-theme="light"] #earningsBudgetCard input[type="checkbox"] { border-color: #94a3b8; }
        body[data-theme="light"] #earningsBudgetCard input[type="checkbox"]:checked { background-color: #059669 !important; border-color: #059669 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") !important; background-size: 75% !important; background-repeat: no-repeat !important; background-position: center !important; }
        body[data-theme="light"] #expensesBudgetCard input[type="checkbox"] { border-color: #94a3b8; }
        body[data-theme="light"] #expensesBudgetCard input[type="checkbox"]:checked { background-color: #dc2626 !important; border-color: #dc2626 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") !important; background-size: 75% !important; background-repeat: no-repeat !important; background-position: center !important; }
        body[data-theme="light"] .budget-line-item[data-debt-id] input[type="checkbox"],
        body[data-theme="light"] input#selectAllDebt,
        body[data-theme="light"] input#showApplyToAllDebt { border-color: #94a3b8; }
        body[data-theme="light"] .budget-line-item[data-debt-id] input[type="checkbox"]:checked,
        body[data-theme="light"] input#selectAllDebt:checked,
        body[data-theme="light"] input#showApplyToAllDebt:checked { background-color: #d97706 !important; border-color: #d97706 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") !important; background-size: 75% !important; background-repeat: no-repeat !important; background-position: center !important; }
        .recurrence-badge { font-size: 0.65rem; padding: 0.15rem 0.35rem; border-radius: 0.25rem; background: rgba(71, 85, 105, 0.6); color: #94a3b8; min-width: 2rem; text-align: center; }
        .recurrence-badge-btn { cursor: pointer; border: none; outline: none; transition: background 0.2s, color 0.2s; }
        .recurrence-badge-btn:hover { background: rgba(71, 85, 105, 0.9); color: #e2e8f0; }
        .recurrence-dropdown-popup { position: fixed; z-index: 60; background: #1e293b; border: 1px solid #475569; border-radius: 0.5rem; padding: 0.35rem; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.4); min-width: 120px; }
        .recurrence-dropdown-popup .recurrence-option { display: block; width: 100%; padding: 0.4rem 0.6rem; font-size: 0.75rem; text-align: left; background: transparent; border: none; border-radius: 0.375rem; color: #e2e8f0; cursor: pointer; transition: background 0.15s; }
        .recurrence-dropdown-popup .recurrence-option:hover { background: rgba(71, 85, 105, 0.8); }
        .recurrence-dropdown-popup .recurrence-option.active { background: rgba(16, 185, 129, 0.25); color: #10b981; }
        .recurrence-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
        .recurrence-toolbar .recurrence-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-left: auto; }
        .recurrence-toolbar .recurrence-btn { padding: 0.25rem 0.5rem; font-size: 0.75rem; border-radius: 0.375rem; background: rgba(51, 65, 85, 0.6); border: 1px solid #475569; color: #94a3b8; cursor: pointer; transition: all 0.2s; }
        .recurrence-toolbar .recurrence-btn:hover { background: rgba(71, 85, 105, 0.8); color: #e2e8f0; border-color: #64748b; }
        .recurrence-toolbar .recurrence-btn.active { background: rgba(16, 185, 129, 0.3); border-color: #10b981; color: #10b981; }
        .recurrence-toolbar .info-tooltip { margin-left: 0.25rem; }
        .recurrence-toolbar .info-tooltip .tooltip-text { z-index: 1100; }
        .recurrence-toolbar .info-tooltip .tooltip-text {
            white-space: normal;
            width: 320px;
            max-width: min(380px, calc(100vw - 2rem));
            min-width: 200px;
            max-height: min(35vh, 100px);
            overflow-y: auto;
            text-align: left;
            padding: 0.6rem 1rem;
            left: 50%;
            transform: translateX(-50%);
            box-sizing: border-box;
        }
        .budget-line-item .icon-cell { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; background: rgba(51, 65, 85, 0.5); border-radius: 0.5rem; font-size: 1.25rem; cursor: pointer; transition: all 0.2s; }
        .budget-line-item .icon-cell:hover { background: rgba(71, 85, 105, 0.6); }
        .budget-line-item .icon-cell.empty { color: #64748b; font-size: 1rem; }
        .add-line-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.5rem 1rem; border: 1px dashed #475569; border-radius: 0.5rem; color: #94a3b8; font-size: 0.875rem; cursor: pointer; transition: all 0.2s; background: transparent; }
        .add-line-btn:hover { border-color: #10b981; color: #10b981; background: rgba(16, 185, 129, 0.1); }
        .add-expense-btn:hover { border-color: #ef4444; color: #ef4444; background: rgba(239, 68, 68, 0.1); }
        .add-debt-btn:hover { border-color: #f59e0b; color: #f59e0b; background: rgba(245, 158, 11, 0.1); }
        .icon-picker-popup { position: fixed; z-index: 60; background: #1e293b; border: 1px solid #475569; border-radius: 0.75rem; padding: 0.5rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); max-width: min(90vw, 280px); }
        .icon-picker-popup .emoji-scroll-wrapper { overflow-x: auto; overflow-y: hidden; padding: 0.25rem 0 0.5rem 0; scrollbar-width: thin; scrollbar-color: rgba(16, 185, 129, 0.6) #334155; }
        .icon-picker-popup .emoji-scroll-wrapper::-webkit-scrollbar { height: 6px; }
        .icon-picker-popup .emoji-scroll-wrapper::-webkit-scrollbar-track { background: #334155; border-radius: 3px; }
        .icon-picker-popup .emoji-scroll-wrapper::-webkit-scrollbar-thumb { background: rgba(16, 185, 129, 0.6); border-radius: 3px; }
        .icon-picker-popup .emoji-scroll-wrapper::-webkit-scrollbar-thumb:hover { background: rgba(16, 185, 129, 0.9); }
        .icon-picker-popup .emoji-grid { display: grid; grid-template-rows: repeat(3, 2.25rem); grid-auto-flow: column; grid-auto-columns: 2.25rem; gap: 0.25rem; width: max-content; padding-bottom: 0.5rem; }
        .icon-picker-popup .emoji-btn { width: 2.25rem; height: 2.25rem; min-width: 2.25rem; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; border-radius: 0.5rem; cursor: pointer; transition: all 0.15s; background: transparent; border: none; color: inherit; }
        .icon-picker-popup .emoji-btn:hover { background: rgba(16, 185, 129, 0.2); transform: scale(1.1); }
        .icon-picker-popup .emoji-btn.none { font-size: 0.875rem; color: #94a3b8; }
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #1e293b; border-radius: 3px; }
        ::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: #64748b; }
        .chart-container-nextgen { position: relative; height: 180px; width: 100%; }
        body[data-theme="light"] #appLoading.app-loading-overlay { background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%); }
        body[data-theme="light"] .app-loading-text { color: #475569; }
        body[data-theme="light"] .app-loading-spinner { box-shadow: 0 0 20px rgba(0, 188, 212, 0.2), 0 0 40px rgba(16, 185, 129, 0.12); }
        body[data-theme="light"] { --bg-gradient: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%); background: var(--bg-gradient); color: #0f172a !important; }
        body[data-theme="light"] .text-white { color: #0f172a !important; }
        body[data-theme="light"] .gradient-bg { background: var(--bg-gradient); }
        body[data-theme="light"] .glass-card, body[data-theme="light"] .glass-dark { background: rgba(255,255,255,0.9); border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
        body[data-theme="light"] h1, body[data-theme="light"] h2, body[data-theme="light"] h3, body[data-theme="light"] .font-bold, body[data-theme="light"] .font-semibold { color: #0f172a; }
        body[data-theme="light"] p, body[data-theme="light"] span:not([class*="text-"]) { color: #334155; }
        body[data-theme="light"] .text-slate-400 { color: #475569 !important; }
        body[data-theme="light"] .text-slate-300 { color: #475569 !important; }
        body[data-theme="light"] .text-slate-500 { color: #64748b !important; }
        body[data-theme="light"] .text-slate-600 { color: #475569 !important; }
        body[data-theme="light"] nav { background: rgba(255,255,255,0.95); border-color: rgba(0,0,0,0.1); }
        body[data-theme="light"] nav .text-slate-400 { color: #475569 !important; }
        body[data-theme="light"] nav .text-slate-300 { color: #334155 !important; }
        body[data-theme="light"] nav .text-slate-500 { color: #64748b !important; }
        body[data-theme="light"] nav button:not([class*="text-"]) { color: #334155; }
        body[data-theme="light"] nav .nav-link:hover { color: #059669; }
        /* Mobile menu when open: distinct panel for visibility in light mode */
        body[data-theme="light"] #mobileMenu { background: #e2e8f0; border-top: 1px solid #94a3b8; }
        body[data-theme="light"] #mobileMenu button { color: #0f172a; }
        body[data-theme="light"] #mobileMenu button:hover { background: #cbd5e1; color: #0f172a; }
        body[data-theme="light"] #mobileMenu button.border-t { border-top-color: #475569; }
        body[data-theme="light"] .modal-backdrop { background: rgba(15,23,42,0.4); }
        body[data-theme="light"] #settingsModal .bg-slate-800,
        body[data-theme="light"] #settingsModal .settings-modal-panel { background: #ffffff !important; border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.2); }
        body[data-theme="light"] #settingsModal h2, body[data-theme="light"] #settingsModal h3 { color: #0f172a; }
        body[data-theme="light"] #settingsModal .text-slate-300 { color: #475569 !important; }
        body[data-theme="light"] #settingsModal .text-slate-400 { color: #64748b !important; }
        body[data-theme="light"] #settingsModal .text-slate-500 { color: #64748b !important; }
        body[data-theme="light"] #settingsModal .bg-slate-700\/50 { background: #f1f5f9; border-color: rgba(0,0,0,0.08); }
        body[data-theme="light"] #settingsModal input { background: #fff; border: 1px solid #cbd5e1; color: #0f172a; }
        body[data-theme="light"] #wealthToolModal .bg-slate-800 { background: #ffffff; border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.2); }
        body[data-theme="light"] #wealthToolModal h2, body[data-theme="light"] #wealthToolModal h3 { color: #0f172a; }
        body[data-theme="light"] #wealthToolModal .text-slate-300 { color: #475569 !important; }
        body[data-theme="light"] #wealthToolModal .text-slate-400 { color: #64748b !important; }
        body[data-theme="light"] #wealthToolModal button.text-slate-400 { color: #64748b !important; background: transparent; }
        body[data-theme="light"] #wealthToolModal button.text-slate-400:hover { color: #0f172a !important; background: #f1f5f9 !important; }
        body[data-theme="light"] #wealthToolModal .bg-slate-700\/50 { background: #f1f5f9; border-color: rgba(0,0,0,0.08); }
        body[data-theme="light"] #wealthToolModal input[type="range"] { accent-color: #10b981; }
        /* WageWise export modal – type buttons (dark) */
        #wageWiseExportModal .wagewise-type-btn { border: 1px solid rgb(71 85 105); background: rgba(51 65 85 0.5); color: #cbd5e1; }
        #wageWiseExportModal .wagewise-type-btn:hover { background: rgba(71 85 105 0.6); }
        #wageWiseExportModal .wagewise-type-btn.active { background: #4f46e5; border-color: #4f46e5; color: #fff; }
        /* DebtDefy export modal – light theme */
        body[data-theme="light"] #debtDefyExportModal .debtdefy-export-modal-panel { background: #ffffff !important; border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.2); }
        body[data-theme="light"] #debtDefyExportModal .debtdefy-export-modal-title { color: #0f172a; }
        body[data-theme="light"] #debtDefyExportModal .debtdefy-export-modal-subtitle,
        body[data-theme="light"] #debtDefyExportModal .debtdefy-export-modal-list { color: #64748b !important; }
        body[data-theme="light"] #debtDefyExportModal .debtdefy-export-cancel { color: #64748b !important; }
        body[data-theme="light"] #debtDefyExportModal .debtdefy-export-cancel:hover { color: #0f172a !important; background: #f1f5f9; }
        /* WageWise export modal – light theme */
        body[data-theme="light"] #wageWiseExportModal .wagewise-export-modal-panel { background: #ffffff !important; border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.2); }
        body[data-theme="light"] #wageWiseExportModal .wagewise-export-modal-title { color: #0f172a; }
        body[data-theme="light"] #wageWiseExportModal .wagewise-export-modal-subtitle { color: #64748b !important; }
        body[data-theme="light"] #wageWiseExportModal .wagewise-export-cancel { color: #64748b !important; }
        body[data-theme="light"] #wageWiseExportModal .wagewise-export-cancel:hover { color: #0f172a !important; background: #f1f5f9; }
        body[data-theme="light"] #wageWiseExportModal .wagewise-export-input { background: #f1f5f9; border-color: #e2e8f0; color: #0f172a; }
        body[data-theme="light"] #wageWiseExportModal .wagewise-type-btn { border-color: #cbd5e1; color: #475569; }
        body[data-theme="light"] #wageWiseExportModal .wagewise-type-btn:hover { background: #f1f5f9; color: #0f172a; }
        body[data-theme="light"] #wageWiseExportModal .wagewise-type-btn.active { background: #4f46e5; border-color: #4f46e5; color: #fff; }

        /* Wealth tool sliders: brand gradient track (teal/cyan → electric blue) + green thumb with animation */
        #wealthToolModal input[type="range"].wealth-tool-slider {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 8px;
            border-radius: 4px;
            background: linear-gradient(90deg, #00BCD4 0%, #00d4ff 35%, #1E90FF 70%, #007FFF 100%);
            outline: none;
            transition: box-shadow 0.2s ease;
        }
        #wealthToolModal input[type="range"].wealth-tool-slider:hover,
        #wealthToolModal input[type="range"].wealth-tool-slider:focus {
            box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
        }
        #wealthToolModal input[type="range"].wealth-tool-slider::-webkit-slider-runnable-track {
            height: 8px;
            border-radius: 4px;
            background: linear-gradient(90deg, #00BCD4 0%, #00d4ff 35%, #1E90FF 70%, #007FFF 100%);
        }
        #wealthToolModal input[type="range"].wealth-tool-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: #fff;
            border: 3px solid #10b981;
            cursor: pointer;
            margin-top: -7px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        #wealthToolModal input[type="range"].wealth-tool-slider::-webkit-slider-thumb:hover {
            transform: scale(1.1);
            box-shadow: 0 3px 10px rgba(16, 185, 129, 0.35);
        }
        #wealthToolModal input[type="range"].wealth-tool-slider::-moz-range-track {
            height: 8px;
            border-radius: 4px;
            background: linear-gradient(90deg, #00BCD4 0%, #00d4ff 35%, #1E90FF 70%, #007FFF 100%);
        }
        #wealthToolModal input[type="range"].wealth-tool-slider::-moz-range-thumb {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: #fff;
            border: 3px solid #10b981;
            cursor: pointer;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        #wealthToolModal input[type="range"].wealth-tool-slider::-moz-range-thumb:hover {
            transform: scale(1.1);
            box-shadow: 0 3px 10px rgba(16, 185, 129, 0.35);
        }
        body[data-theme="light"] #settingsModal input::placeholder { color: #94a3b8; }
        body[data-theme="light"] #settingsModal button:not(.empowerment-gradient) { color: #334155; }
        body[data-theme="light"] #settingsModal button.text-slate-400 { color: #64748b !important; }
        body[data-theme="light"] #settingsModal button.text-slate-400:hover { color: #0f172a; background: #f1f5f9; }
        body[data-theme="light"] #settingsModal button.text-slate-400 { color: #64748b !important; }
        body[data-theme="light"] #settingsModal button.text-slate-400:hover { color: #0f172a !important; background: #f1f5f9 !important; }
        body[data-theme="light"] #settingsModal .text-emerald-400 { color: #059669 !important; }
        body[data-theme="light"] #settingsModal button.btn-clear-all-data { color: #b45309 !important; background: rgba(245, 158, 11, 0.12) !important; border-color: rgba(245, 158, 11, 0.35) !important; }
        body[data-theme="light"] #settingsModal button.btn-clear-all-data:hover { background: rgba(245, 158, 11, 0.2) !important; }
        body[data-theme="light"] #settingsModal button.btn-export-data { color: #2563eb !important; background: rgba(59, 130, 246, 0.12) !important; border-color: rgba(59, 130, 246, 0.35) !important; }
        body[data-theme="light"] #settingsModal button.btn-export-data:hover { background: rgba(59, 130, 246, 0.2) !important; }
        body[data-theme="light"] #settingsModal #currencyGrid button { background: #f1f5f9; border-color: #e2e8f0; color: #334155; }
        /* Session expired banner: Sign out – same gradient + grow hover as month/year (both light and dark) */
        #onboardingSessionExpiredBanner .session-expired-sign-out {
            transition: transform 0.2s ease;
            display: inline-block;
        }
        /* Dark mode: default amber; hover = gradient + grow (same as month/year) */
        #onboardingSessionExpiredBanner .session-expired-sign-out:hover {
            animation: emailGradient 2s ease-in-out infinite;
            background: linear-gradient(135deg, #00BCD4 0%, #00d4ff 25%, #1E90FF 50%, #007FFF 75%, #10b981 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-size: 200% 200%;
            transform: scale(1.05);
        }
        /* Light mode: default amber-800; hover = same gradient + grow */
        body[data-theme="light"] #onboardingSessionExpiredBanner .session-expired-sign-out { color: #b45309 !important; -webkit-text-fill-color: #b45309 !important; }
        body[data-theme="light"] #onboardingSessionExpiredBanner .session-expired-sign-out:hover {
            animation: emailGradient 2s ease-in-out infinite;
            background: linear-gradient(135deg, #00BCD4 0%, #00d4ff 25%, #1E90FF 50%, #007FFF 75%, #10b981 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent !important;
            background-size: 200% 200%;
            transform: scale(1.05);
        }
        /* Settings: Change Password link – same gradient hover as nav email (light mode) */
        body[data-theme="light"] #settingsModal .settings-change-password-link { color: #0369a1 !important; -webkit-text-fill-color: #0369a1 !important; }
        body[data-theme="light"] #settingsModal .settings-change-password-link:hover {
            animation: emailGradient 2s ease-in-out infinite;
            background: linear-gradient(135deg, #00BCD4 0%, #00d4ff 25%, #1E90FF 50%, #007FFF 75%, #10b981 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent !important;
            background-size: 200% 200%;
        }
        /* Opportunity modal (2nd step): visible scrollbar when content overflows */
        #opportunityModal > div { overflow-y: auto; scrollbar-gutter: stable; }
        #opportunityModal > div::-webkit-scrollbar { width: 10px; }
        #opportunityModal > div::-webkit-scrollbar-track { background: #334155; border-radius: 0 0.75rem 0.75rem 0; }
        #opportunityModal > div::-webkit-scrollbar-thumb { background: #64748b; border-radius: 5px; }
        #opportunityModal > div::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
        body[data-theme="light"] #opportunityModal > div::-webkit-scrollbar-track { background: #e2e8f0; }
        body[data-theme="light"] #opportunityModal > div::-webkit-scrollbar-thumb { background: #94a3b8; }
        body[data-theme="light"] #opportunityModal > div::-webkit-scrollbar-thumb:hover { background: #64748b; }
        /* Settings modal: visible scrollbar for users without scrollwheel */
        #settingsModal .settings-modal-panel { overflow-y: scroll; scrollbar-gutter: stable; }
        #settingsModal .settings-modal-panel::-webkit-scrollbar { width: 10px; }
        #settingsModal .settings-modal-panel::-webkit-scrollbar-track { background: #334155; border-radius: 0 0.75rem 0.75rem 0; }
        #settingsModal .settings-modal-panel::-webkit-scrollbar-thumb { background: #64748b; border-radius: 5px; }
        #settingsModal .settings-modal-panel::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
        body[data-theme="light"] #settingsModal .settings-modal-panel::-webkit-scrollbar-track { background: #e2e8f0; }
        body[data-theme="light"] #settingsModal .settings-modal-panel::-webkit-scrollbar-thumb { background: #94a3b8; }
        body[data-theme="light"] #settingsModal .settings-modal-panel::-webkit-scrollbar-thumb:hover { background: #64748b; }
        body[data-theme="light"] #settingsModal #currencyGrid button:hover { background: #e2e8f0; color: #0f172a; }
        body[data-theme="light"] #settingsModal svg { color: #64748b !important; }
        body[data-theme="light"] #settingsModal button:hover svg { color: #0f172a !important; }
        /* PRO Paywall Modal - Light Mode (theme-matched) */
        body[data-theme="light"] #proPaywallModal .pro-paywall-inner { background: #ffffff !important; border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.2); }
        body[data-theme="light"] #proPaywallModal .text-slate-300 { color: #475569 !important; }
        body[data-theme="light"] #proPaywallModal .text-slate-400 { color: #64748b !important; }
        body[data-theme="light"] #proPaywallModal button.bg-slate-700 { background: #f1f5f9 !important; color: #334155 !important; }
        body[data-theme="light"] #proPaywallModal button.bg-slate-700:hover { background: #e2e8f0 !important; color: #0f172a !important; }
        body[data-theme="light"] #proPaywallModal button.text-slate-400 { color: #64748b !important; }
        body[data-theme="light"] #proPaywallModal button.text-slate-400:hover { color: #0f172a !important; background: #f1f5f9 !important; }
        /* Settings Unsaved Modal - Light Mode */
        body[data-theme="light"] #settingsUnsavedModal .bg-slate-800,
        body[data-theme="light"] #settingsUnsavedModal > div { background: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.2); color: #0f172a; }
        body[data-theme="light"] #settingsUnsavedModal h3 { color: #0f172a !important; }
        body[data-theme="light"] #settingsUnsavedModal p { color: #64748b !important; }
        body[data-theme="light"] #settingsUnsavedModal .bg-slate-700 { background: #e2e8f0 !important; }
        body[data-theme="light"] #settingsUnsavedModal .bg-slate-700:hover { background: #cbd5e1 !important; }
        body[data-theme="light"] #settingsUnsavedModal .text-slate-400 { color: #64748b !important; }
        body[data-theme="light"] #settingsUnsavedModal .text-slate-400:hover { color: #0f172a !important; background: #f1f5f9 !important; }
        /* Budget Unsaved Modal - Light Mode */
        body[data-theme="light"] #budgetUnsavedModal .bg-slate-800,
        body[data-theme="light"] #budgetUnsavedModal > div { background: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.2); color: #0f172a; }
        body[data-theme="light"] #budgetUnsavedModal h3 { color: #0f172a !important; }
        body[data-theme="light"] #budgetUnsavedModal p { color: #64748b !important; }
        body[data-theme="light"] #budgetUnsavedModal .bg-slate-700 { background: #e2e8f0 !important; }
        body[data-theme="light"] #budgetUnsavedModal .bg-slate-700:hover { background: #cbd5e1 !important; }
        body[data-theme="light"] #budgetUnsavedModal .text-slate-400 { color: #64748b !important; }
        body[data-theme="light"] #budgetUnsavedModal .text-slate-400:hover { color: #0f172a !important; background: #f1f5f9 !important; }
        /* Change Password Modal - Light Mode */
        body[data-theme="light"] #changePasswordModal .change-password-modal-inner,
        body[data-theme="light"] #changePasswordModal #changePasswordModalInner { background: #ffffff !important; border: 1px solid rgba(0,0,0,0.1) !important; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.2); }
        body[data-theme="light"] #changePasswordModal .change-password-modal-inner h3 { color: #0f172a !important; }
        body[data-theme="light"] #changePasswordModal .change-password-modal-inner p.text-slate-400 { color: #64748b !important; }
        body[data-theme="light"] #changePasswordModal .change-password-modal-inner input { background: #fff !important; border: 1px solid #cbd5e1 !important; color: #0f172a !important; }
        body[data-theme="light"] #changePasswordModal .change-password-modal-inner input::placeholder { color: #94a3b8; }
        body[data-theme="light"] #changePasswordModal .change-password-modal-inner .cancel-change-password-btn { color: #64748b !important; }
        body[data-theme="light"] #changePasswordModal .change-password-modal-inner .cancel-change-password-btn:hover { color: #0f172a !important; background: #f1f5f9 !important; }
        /* Delete Account Modal - Light Mode */
        body[data-theme="light"] #deleteAccountModal .bg-slate-800,
        body[data-theme="light"] #deleteAccountModal > div { background: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.2); color: #0f172a; }
        body[data-theme="light"] #deleteAccountModal h3 { color: #0f172a !important; }
        body[data-theme="light"] #deleteAccountModal p { color: #64748b !important; }
        body[data-theme="light"] #deleteAccountModal .text-slate-400 { color: #64748b !important; }
        body[data-theme="light"] #deleteAccountModal .text-slate-400:hover { color: #0f172a !important; background: #f1f5f9 !important; }
        body[data-theme="light"] #deleteAccountModal .bg-red-500\/20 { background: rgba(239, 68, 68, 0.1) !important; }
        body[data-theme="light"] #deleteAccountModal .bg-red-500\/30 { background: rgba(239, 68, 68, 0.15) !important; }
        body[data-theme="light"] #deleteAccountModal .bg-red-600 { background: #dc2626 !important; }
        body[data-theme="light"] #deleteAccountModal .bg-red-600:hover { background: #b91c1c !important; }
        body[data-theme="light"] #deleteAccountModal .border-red-500\/40 { border-color: rgba(239, 68, 68, 0.3) !important; }
        /* Clear All Data Modal - Light Mode */
        body[data-theme="light"] #clearAllDataModal .bg-slate-800,
        body[data-theme="light"] #clearAllDataModal > div { background: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.2); color: #0f172a; }
        body[data-theme="light"] #clearAllDataModal h3 { color: #0f172a !important; }
        body[data-theme="light"] #clearAllDataModal p { color: #64748b !important; }
        body[data-theme="light"] #clearAllDataModal .text-slate-400 { color: #64748b !important; }
        body[data-theme="light"] #clearAllDataModal .text-slate-400:hover { color: #0f172a !important; background: #f1f5f9 !important; }
        body[data-theme="light"] #clearAllDataModal .bg-red-500\/20 { background: rgba(239, 68, 68, 0.1) !important; }
        body[data-theme="light"] #clearAllDataModal .bg-red-500\/30 { background: rgba(239, 68, 68, 0.15) !important; }
        body[data-theme="light"] #clearAllDataModal .border-red-500\/40 { border-color: rgba(239, 68, 68, 0.3) !important; }
        /* Delete Budget Modal - Light Mode */
        body[data-theme="light"] #deleteBudgetModal .bg-slate-800,
        body[data-theme="light"] #deleteBudgetModal > div { background: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.2); color: #0f172a; }
        body[data-theme="light"] #deleteBudgetModal h3 { color: #0f172a !important; }
        body[data-theme="light"] #deleteBudgetModal p { color: #64748b !important; }
        body[data-theme="light"] #deleteBudgetModal .text-slate-400 { color: #64748b !important; }
        body[data-theme="light"] #deleteBudgetModal .text-slate-400:hover { color: #0f172a !important; background: #f1f5f9 !important; }
        body[data-theme="light"] #deleteBudgetModal .bg-red-500\/20 { background: rgba(239, 68, 68, 0.1) !important; }
        body[data-theme="light"] #deleteBudgetModal .bg-red-500\/30 { background: rgba(239, 68, 68, 0.15) !important; }
        body[data-theme="light"] #deleteBudgetModal .border-red-500\/40 { border-color: rgba(239, 68, 68, 0.3) !important; }
        body[data-theme="light"] #deleteBudgetModal .text-red-400 { color: #dc2626 !important; }
        
        /* Budget Companion - Light Mode */
        body[data-theme="light"] #budgetCompanionPanel { background: #ffffff; border-color: rgba(0,0,0,0.1); }
        body[data-theme="light"] #budgetCompanionPanel h3 { color: #0f172a !important; }
        body[data-theme="light"] #budgetCompanionPanel .text-slate-400 { color: #64748b !important; }
        body[data-theme="light"] #budgetCompanionMessages { background: #f1f5f9 !important; border: 1px solid #e2e8f0; }
        body[data-theme="light"] #budgetCompanionMessages .text-slate-400 { color: #64748b !important; }
        body[data-theme="light"] #budgetCompanionMessages .text-slate-100 { color: #0f172a !important; }
        body[data-theme="light"] #budgetCompanionMessages .bg-slate-800\/80 { background: #e2e8f0 !important; color: #0f172a !important; }
        body[data-theme="light"] #budgetCompanionMessages .from-purple-600 { color: #ffffff !important; }
        body[data-theme="light"] #budgetCompanionInput { background: #ffffff !important; border-color: #cbd5e1 !important; color: #0f172a !important; }
        body[data-theme="light"] #budgetCompanionInput::placeholder { color: #94a3b8 !important; }
        body[data-theme="light"] #budgetCompanionInput:focus { border-color: #10b981 !important; }
        
        /* Month picker popover – Light Mode */
        body[data-theme="light"] #monthPickerPopover { background: #ffffff !important; border-color: #e2e8f0 !important; box-shadow: 0 10px 40px rgba(0,0,0,0.12); }
        body[data-theme="light"] #monthPickerPopover .month-picker-year { color: #0f172a !important; }
        body[data-theme="light"] #monthPickerPopover .text-slate-200 { color: #0f172a !important; }
        body[data-theme="light"] #monthPickerPopover .text-slate-300 { color: #475569 !important; }
        body[data-theme="light"] #monthPickerPopover button.month-picker-year-prev,
        body[data-theme="light"] #monthPickerPopover button.month-picker-year-next { color: #475569 !important; }
        body[data-theme="light"] #monthPickerPopover button.month-picker-year-prev:hover,
        body[data-theme="light"] #monthPickerPopover button.month-picker-year-next:hover { background: #f1f5f9 !important; color: #0f172a !important; }
        body[data-theme="light"] #monthPickerPopover .month-picker-month { color: #475569 !important; }
        body[data-theme="light"] #monthPickerPopover .month-picker-month:hover { background: #f1f5f9 !important; color: #0f172a !important; }
        body[data-theme="light"] #monthPickerPopover .month-picker-month.bg-emerald-600 { background: #059669 !important; color: #ffffff !important; }
        body[data-theme="light"] #monthPickerPopover .border-slate-600 { border-color: #e2e8f0 !important; }
        body[data-theme="light"] #monthPickerPopover .month-picker-today { background: #059669 !important; color: #ffffff !important; }
        body[data-theme="light"] #monthPickerPopover .month-picker-today:hover { background: #047857 !important; }
        
        /* Onboarding theme toggle – Light Mode */
        body[data-theme="light"] #onboardingThemeBtn { background: #f1f5f9 !important; border-color: #e2e8f0 !important; color: #475569 !important; }
        body[data-theme="light"] #onboardingThemeBtn:hover { background: #e2e8f0 !important; color: #0f172a !important; }
        
        /* Saved Budgets Compare – Light Mode */
        body[data-theme="light"] #savedBudgetsCompareToolbar { background: #f1f5f9 !important; border-color: #e2e8f0 !important; }
        body[data-theme="light"] #savedBudgetsCompareToolbar #savedBudgetsCompareCount { color: #475569 !important; }
        body[data-theme="light"] #savedBudgetsCompareToolbar #savedBudgetsCompareBtn { background: #059669 !important; color: #ffffff !important; }
        body[data-theme="light"] #savedBudgetsCompareToolbar #savedBudgetsCompareBtn:hover:not(:disabled) { background: #047857 !important; }
        body[data-theme="light"] #savedBudgetsCompareToolbar #savedBudgetsReportBtn { background: #2563eb !important; color: #ffffff !important; }
        body[data-theme="light"] #savedBudgetsCompareToolbar #savedBudgetsReportBtn:hover:not(:disabled) { background: #1d4ed8 !important; }
        body[data-theme="light"] #savedBudgetsCompareToolbar button[onclick="clearBudgetCompareSelection()"] { color: #64748b !important; }
        body[data-theme="light"] #savedBudgetsCompareToolbar button[onclick="clearBudgetCompareSelection()"]:hover { color: #0f172a !important; }
        /* Compare Budgets Modal – Light Mode */
        body[data-theme="light"] #compareBudgetsModal > div { background: #ffffff !important; border-color: #e2e8f0 !important; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15); }
        body[data-theme="light"] #compareBudgetsModal h3 { color: #0f172a !important; }
        body[data-theme="light"] #compareBudgetsModal .border-b.border-slate-700 { border-color: #e2e8f0 !important; }
        body[data-theme="light"] #compareBudgetsModal button[onclick="printCompareReport()"] { background: #e2e8f0 !important; color: #334155 !important; }
        body[data-theme="light"] #compareBudgetsModal button[onclick="printCompareReport()"]:hover { background: #cbd5e1 !important; color: #0f172a !important; }
        body[data-theme="light"] #compareBudgetsModal button[onclick="closeCompareModal()"] { color: #64748b !important; }
        body[data-theme="light"] #compareBudgetsModal button[onclick="closeCompareModal()"]:hover { color: #0f172a !important; background: #f1f5f9 !important; }
        body[data-theme="light"] #compareBudgetsModal #compareBudgetsContent { color: #334155; }
        body[data-theme="light"] #compareBudgetsModal .compare-report-table th { color: #475569 !important; border-color: #e2e8f0 !important; }
        body[data-theme="light"] #compareBudgetsModal .compare-report-table td { color: #334155 !important; border-color: #e2e8f0 !important; }
        body[data-theme="light"] #compareBudgetsModal .compare-report-table tr { border-color: #e2e8f0 !important; }
        body[data-theme="light"] #compareBudgetsModal .compare-report-table tbody tr.bg-slate-700\/20 { background: #f8fafc !important; }
        body[data-theme="light"] #compareBudgetsModal .compare-report-table .text-emerald-400 { color: #059669 !important; }
        body[data-theme="light"] #compareBudgetsModal .compare-report-table .text-red-400 { color: #dc2626 !important; }
        
        /* Annual Summary Report Modal – dark mode: report content area */
        body:not([data-theme="light"]) #annualSummaryModalContent { background: #1e293b !important; color: #e2e8f0 !important; }
        body:not([data-theme="light"]) #annualSummaryModalContent .text-slate-800 { color: #f1f5f9 !important; }
        body:not([data-theme="light"]) #annualSummaryModalContent .text-slate-500 { color: #94a3b8 !important; }
        body:not([data-theme="light"]) #annualSummaryModalContent .annual-report-body > div[style] { background: #334155 !important; color: #e2e8f0 !important; }
        body:not([data-theme="light"]) #annualSummaryModalContent .annual-report-body h3 { color: #f1f5f9 !important; }
        body:not([data-theme="light"]) #annualSummaryModalContent .report-table th,
        body:not([data-theme="light"]) #annualSummaryModalContent .report-table td { border-color: #475569 !important; color: #e2e8f0 !important; }
        body:not([data-theme="light"]) #annualSummaryModalContent .report-table td[style*="color:#64748b"] { color: #94a3b8 !important; }
        /* Annual Summary Report Modal – light mode: full modal + content stays light */
        body[data-theme="light"] #annualSummaryModal .bg-slate-800,
        body[data-theme="light"] #annualSummaryModal > div { background: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.2); }
        body[data-theme="light"] #annualSummaryModal h3 { color: #0f172a !important; }
        body[data-theme="light"] #annualSummaryModal .border-slate-600 { border-color: #e2e8f0 !important; }
        body[data-theme="light"] #annualSummaryModal button[aria-label="Close"] { color: #334155 !important; }
        body[data-theme="light"] #annualSummaryModal button[aria-label="Close"]:hover { color: #0f172a !important; background: #f1f5f9 !important; }
        body[data-theme="light"] #annualSummaryModal #annualSummaryModalContent { background: #ffffff !important; color: #0f172a !important; }
        body[data-theme="light"] #annualSummaryModal button.bg-slate-600 { background: #e2e8f0 !important; color: #334155 !important; }
        body[data-theme="light"] #annualSummaryModal button.bg-slate-600:hover { background: #cbd5e1 !important; color: #0f172a !important; }
        /* View Annual Summary Report – light mode: same as other Quick Action buttons (explicit inner text for Safari) */
        body[data-theme="light"] .btn-view-annual-report { background: #f1f5f9 !important; color: #0f172a !important; }
        body[data-theme="light"] .btn-view-annual-report p,
        body[data-theme="light"] .btn-view-annual-report .font-medium { color: #0f172a !important; }
        body[data-theme="light"] .btn-view-annual-report:hover { background: #e2e8f0 !important; color: #0f172a !important; }
        body[data-theme="light"] .btn-view-annual-report:hover p,
        body[data-theme="light"] .btn-view-annual-report:hover .font-medium { color: #0f172a !important; }
        /* Export to PDF button – lighter red (#F05147) in both modes */
        .btn-export-pdf { background: #F05147 !important; color: #ffffff !important; }
        .btn-export-pdf:hover { background: #e0453d !important; color: #ffffff !important; }
        body[data-theme="light"] .btn-export-pdf { background: #F05147 !important; color: #ffffff !important; }
        body[data-theme="light"] .btn-export-pdf:hover { background: #e0453d !important; color: #ffffff !important; }
        body[data-theme="light"] .btn-view-annual-report .text-slate-400 { color: #64748b !important; }
        body[data-theme="light"] .btn-view-annual-report:hover .text-slate-400 { color: #475569 !important; }
        
        /* Currency Selector Button - Light Mode */
        body[data-theme="light"] button[onclick="openSettings()"] { background: #f1f5f9 !important; border-color: #e2e8f0 !important; color: #0f172a !important; }
        body[data-theme="light"] button[onclick="openSettings()"]:hover { background: #e2e8f0 !important; border-color: #cbd5e1 !important; }
        body[data-theme="light"] button[onclick="openSettings()"] .text-slate-400 { color: #64748b !important; }
        body[data-theme="light"] #dashboardCardSizeToggle { background: #f1f5f9 !important; border-color: #e2e8f0 !important; }
        body[data-theme="light"] #dashboardCardSizeToggle:hover { border-color: #cbd5e1 !important; }
        /* Dashboard Quick Actions – light mode hover */
        body[data-theme="light"] #dashboard .quick-action-btn { background: #f1f5f9 !important; }
        body[data-theme="light"] #dashboard .quick-action-btn:hover { background: #e2e8f0 !important; border-color: rgba(0,0,0,0.08); }
        body[data-theme="light"] #dashboard .quick-action-btn:hover .text-slate-400 { color: #475569 !important; }
        body[data-theme="light"] #dashboardStatsGrid { background: #ffffff !important; border-color: #e2e8f0 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
        body[data-theme="light"] .input-with-currency .currency-symbol { color: #64748b; }
        body[data-theme="light"] input, body[data-theme="light"] select, body[data-theme="light"] textarea { background: #fff !important; border: 1px solid #cbd5e1 !important; color: #0f172a !important; }
        body[data-theme="light"] input::placeholder, body[data-theme="light"] textarea::placeholder { color: #94a3b8; }
        body[data-theme="light"] .recurrence-badge { background: #e2e8f0; color: #475569; }
        body[data-theme="light"] .recurrence-badge-btn:hover { background: #cbd5e1; color: #0f172a; }
        body[data-theme="light"] .recurrence-toolbar .recurrence-btn { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }
        body[data-theme="light"] .recurrence-toolbar .recurrence-btn:hover { background: #e2e8f0; color: #0f172a; }
        body[data-theme="light"] .recurrence-toolbar .recurrence-btn.active { background: rgba(16,185,129,0.15); border-color: #10b981; color: #059669; }
        body[data-theme="light"] .recurrence-dropdown-popup { background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.15); }
        body[data-theme="light"] .recurrence-dropdown-popup .recurrence-option { color: #334155; }
        body[data-theme="light"] .recurrence-dropdown-popup .recurrence-option:hover { background: #f1f5f9; }
        body[data-theme="light"] .recurrence-dropdown-popup .recurrence-option.active { background: rgba(16,185,129,0.12); color: #059669; }
        body[data-theme="light"] .tooltip-text {
            background: rgba(255, 255, 255, 0.5) !important;
            backdrop-filter: blur(20px) saturate(180%) !important;
            -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
            isolation: isolate !important;
            color: #0f172a !important;
            border-color: rgba(148, 163, 184, 0.3) !important;
            box-shadow: 0 10px 40px -10px rgba(0,0,0,0.15), 0 0 0 1px rgba(255,255,255,0.6) inset !important;
        }
        body[data-theme="light"] .icon-picker-popup { background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.2); }
        body[data-theme="light"] .icon-picker-popup .emoji-scroll-wrapper { scrollbar-color: #94a3b8 #e2e8f0; }
        body[data-theme="light"] .icon-picker-popup .emoji-scroll-wrapper::-webkit-scrollbar-track { background: #e2e8f0; border-radius: 3px; }
        body[data-theme="light"] .icon-picker-popup .emoji-scroll-wrapper::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 3px; }
        body[data-theme="light"] .icon-picker-popup .emoji-scroll-wrapper::-webkit-scrollbar-thumb:hover { background: #64748b; }
        body[data-theme="light"] .icon-picker-popup .emoji-btn.none { color: #64748b; }
        body[data-theme="light"] .icon-picker-search { background: #f1f5f9 !important; border-color: #e2e8f0 !important; color: #334155 !important; }
        body[data-theme="light"] .icon-picker-search::placeholder { color: #94a3b8; }
        body[data-theme="light"] .add-line-btn { border-color: #cbd5e1; color: #64748b; }
        body[data-theme="light"] .add-line-btn:hover { border-color: #10b981; color: #059669; background: rgba(16,185,129,0.08); }
        body[data-theme="light"] .add-expense-btn:hover { border-color: #dc2626; color: #dc2626; background: rgba(239,68,68,0.08); }
        body[data-theme="light"] .add-debt-btn:hover { border-color: #d97706; color: #d97706; background: rgba(245,158,11,0.08); }
        body[data-theme="light"] .budget-line-item .icon-cell { background: #f1f5f9; }
        body[data-theme="light"] .budget-line-item .icon-cell:hover { background: #e2e8f0; }
        body[data-theme="light"] .budget-line-item .icon-cell.empty { color: #64748b; }
        body[data-theme="light"] .score-ring { background: conic-gradient(from 0deg, transparent 0%, transparent var(--score-percent), #e2e8f0 var(--score-percent), #e2e8f0 100%), conic-gradient(from 0deg, #ef4444 0%, #eab308 39%, #3b82f6 59%, #10b981 79%, #10b981 100%); }
        body[data-theme="light"] .score-ring .text-slate-500 { color: #64748b !important; }
        body[data-theme="light"] .glow-text { text-shadow: none; }
        body[data-theme="light"] .toast-item { background: #fff; border: 1px solid #e2e8f0; color: #334155; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.2); }
        body[data-theme="light"] #opportunityModal .bg-slate-800 { background: #fff; border: 1px solid rgba(0,0,0,0.1); color: #334155; }
        body[data-theme="light"] #opportunityModal h2, body[data-theme="light"] #opportunityModal h3 { color: #0f172a; }
        body[data-theme="light"] #opportunityModal .text-slate-400 { color: #475569 !important; }
        body[data-theme="light"] #opportunityModal button.text-slate-400 { color: #475569 !important; background: transparent; }
        body[data-theme="light"] #opportunityModal button.text-slate-400:hover { color: #0f172a !important; background: #e2e8f0 !important; }
        /* Wealth Building modals – light mode */
        body[data-theme="light"] #wealthIntroModal .bg-slate-800,
        body[data-theme="light"] #wealthJourneyModal .bg-slate-800 { background: #ffffff; border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.2); }
        body[data-theme="light"] #wealthIntroModal h2,
        body[data-theme="light"] #wealthJourneyModal h2 { color: #0f172a; }
        body[data-theme="light"] #wealthIntroModal .border-slate-700,
        body[data-theme="light"] #wealthJourneyModal .border-slate-700 { border-color: #e2e8f0; }
        body[data-theme="light"] #wealthIntroModal #wealthIntroBody,
        body[data-theme="light"] #wealthJourneyModal #wealthJourneyBody { color: #334155; }
        body[data-theme="light"] #wealthIntroModal #wealthIntroBody .text-slate-300,
        body[data-theme="light"] #wealthJourneyModal #wealthJourneyBody .text-slate-300 { color: #475569 !important; }
        body[data-theme="light"] #wealthIntroModal #wealthIntroBody .text-slate-200,
        body[data-theme="light"] #wealthJourneyModal #wealthJourneyBody .text-slate-200 { color: #0f172a !important; }
        body[data-theme="light"] #wealthIntroModal #wealthIntroBody a,
        body[data-theme="light"] #wealthJourneyModal #wealthJourneyBody a.text-emerald-400 { color: #059669 !important; }
        body[data-theme="light"] #wealthIntroModal #wealthIntroBody a:hover,
        body[data-theme="light"] #wealthJourneyModal #wealthJourneyBody a.text-emerald-400:hover { color: #047857 !important; }
        body[data-theme="light"] #wealthIntroModal button.text-slate-400,
        body[data-theme="light"] #wealthJourneyModal button.text-slate-400 { color: #64748b !important; background: transparent; }
        body[data-theme="light"] #wealthIntroModal button.text-slate-400:hover,
        body[data-theme="light"] #wealthJourneyModal button.text-slate-400:hover { color: #0f172a !important; background: #f1f5f9 !important; }
        body[data-theme="light"] #wealthJourneyModal button.bg-slate-600 { background: #e2e8f0 !important; color: #334155 !important; }
        body[data-theme="light"] #wealthJourneyModal button.bg-slate-600:hover { background: #cbd5e1 !important; color: #0f172a !important; }
        body[data-theme="light"] #wealthActionDetailModal .bg-slate-800 { background: #ffffff; border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.2); }
        body[data-theme="light"] #wealthActionDetailModal h2 { color: #0f172a; }
        body[data-theme="light"] #wealthActionDetailModal .border-slate-700 { border-color: #e2e8f0; }
        body[data-theme="light"] #wealthActionDetailModal #wealthActionDetailBody { color: #334155; }
        body[data-theme="light"] #wealthActionDetailModal #wealthActionDetailBody .text-slate-300 { color: #475569 !important; }
        body[data-theme="light"] #wealthActionDetailModal #wealthActionDetailBody .text-slate-200 { color: #0f172a !important; }
        body[data-theme="light"] #wealthActionDetailModal #wealthActionDetailBody a { color: #059669 !important; }
        body[data-theme="light"] #wealthActionDetailModal #wealthActionDetailBody a:hover { color: #047857 !important; }
        body[data-theme="light"] #wealthActionDetailModal button.text-slate-400 { color: #64748b !important; background: transparent; }
        body[data-theme="light"] #wealthActionDetailModal button.text-slate-400:hover { color: #0f172a !important; background: #f1f5f9 !important; }
        body[data-theme="light"] #wealthActionDetailModal button.bg-slate-600 { background: #e2e8f0 !important; color: #334155 !important; }
        body[data-theme="light"] #wealthActionDetailModal button.bg-slate-600:hover { background: #cbd5e1 !important; color: #0f172a !important; }
        /* Global scrollbars (viewport + descendants) in light mode */
        body[data-theme="light"] ::-webkit-scrollbar-track { background: #e2e8f0; }
        body[data-theme="light"] ::-webkit-scrollbar-thumb { background: #94a3b8; }
        body[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #64748b; }
        /* Viewport/root scrollbar in light mode (body and html) */
        body[data-theme="light"]::-webkit-scrollbar-track,
        html:has(body[data-theme="light"])::-webkit-scrollbar-track { background: #e2e8f0; border-radius: 3px; }
        body[data-theme="light"]::-webkit-scrollbar-thumb,
        html:has(body[data-theme="light"])::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 3px; }
        body[data-theme="light"]::-webkit-scrollbar-thumb:hover,
        html:has(body[data-theme="light"])::-webkit-scrollbar-thumb:hover { background: #64748b; }
        body[data-theme="light"],
        html:has(body[data-theme="light"]) { scrollbar-color: #94a3b8 #e2e8f0; }
        body[data-theme="light"] .focus\:ring-emerald-500:focus { --tw-ring-color: rgba(16,185,129,0.5); }
        body[data-theme="light"] .focus\:ring-offset-slate-800 { --tw-ring-offset-color: #f1f5f9; }
        body[data-theme="light"] label { color: #334155; }
        body[data-theme="light"] button:not(.empowerment-gradient):not(.wealth-gradient) { color: #334155; }
        body[data-theme="light"] #dashboardChallengesList button.bg-emerald-600 { color: #fff !important; }
        body[data-theme="light"] button[onclick="exportBudgetToExcel()"] { color: #fff !important; }
        body[data-theme="light"] .empowerment-gradient { color: #fff !important; }
        body[data-theme="light"] button.empowerment-gradient,
        body[data-theme="light"] button.empowerment-gradient span { color: #fff !important; }
        body[data-theme="light"] .empowerment-gradient svg,
        body[data-theme="light"] .empowerment-gradient svg.text-white { color: #fff !important; stroke: #fff !important; }
        body[data-theme="light"] button[onclick*="saveBudgetAsNew"] { color: #fff !important; }
        body[data-theme="light"] .bg-slate-700\/50, body[data-theme="light"] .bg-slate-800\/30 { background: #f1f5f9; border-color: rgba(0,0,0,0.06); }
        body[data-theme="light"] .bg-slate-700\/30 { background: #f8fafc; color: #475569; }
        body[data-theme="light"] .border-slate-700 { border-color: #e2e8f0; }
        body[data-theme="light"] .border-slate-600 { border-color: #cbd5e1; }
        body[data-theme="light"] .border-slate-700\/50 { border-color: rgba(0,0,0,0.08); }
        body[data-theme="light"] .text-emerald-400 { color: #059669 !important; }
        body[data-theme="light"] .text-red-400 { color: #dc2626 !important; }
        body[data-theme="light"] .text-blue-400 { color: #2563eb !important; }
        body[data-theme="light"] .text-amber-400 { color: #d97706 !important; }
        body[data-theme="light"] .text-purple-400 { color: #7c3aed !important; }
        body[data-theme="light"] .budget-header-row { color: #64748b; }
        /* Lv XP Streak badge in nav – light mode */
        body[data-theme="light"] nav button[title*="Level"] { background: rgba(6, 182, 212, 0.15) !important; border-color: rgba(6, 182, 212, 0.35) !important; color: #0f172a; }
        body[data-theme="light"] nav button[title*="Level"] #navBadgeLevel { color: #0f172a !important; }
        body[data-theme="light"] nav button[title*="Level"] #navBadgeXP { color: #475569 !important; }
        body[data-theme="light"] nav button[title*="Level"] #navBadgeStreak { color: #d97706 !important; }
        body[data-theme="light"] #navUserEmail { color: #0369a1 !important; -webkit-text-fill-color: #0369a1 !important; background: none !important; }
        body[data-theme="light"] #navUserEmail:hover {
            animation: emailGradient 2s ease-in-out infinite !important;
            background: linear-gradient(135deg, #00BCD4 0%, #00d4ff 25%, #1E90FF 50%, #007FFF 75%, #10b981 100%) !important;
            background-clip: text !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            background-size: 200% 200% !important;
        }
        body[data-theme="light"] nav button[onclick="signOut()"] { color: #059669 !important; }
        body[data-theme="light"] nav button[onclick="signOut()"]:hover { color: #047857 !important; }
        /* Dashboard empowerment score – inner circle and "76 / 100" text */
        body[data-theme="light"] .score-ring div.bg-slate-900 { background: #f1f5f9 !important; }
        body[data-theme="light"] .score-ring #empowermentScore { color: #047857 !important; }
        body[data-theme="light"] .score-ring .score-number { color: #047857 !important; }
        body[data-theme="light"] .score-ring .text-slate-500 { color: #475569 !important; }
        /* Currency selector (Settings modal) – light mode */
        body[data-theme="light"] .currency-btn { background: #f1f5f9 !important; border-color: #e2e8f0 !important; color: #334155 !important; }
        body[data-theme="light"] .currency-btn:hover { background: #e2e8f0 !important; color: #0f172a !important; }
        body[data-theme="light"] .currency-btn.active { background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%) !important; border-color: #059669 !important; color: #fff !important; }
        /* Budget tab – three buttons at bottom */
        body[data-theme="light"] #budget button.bg-blue-600 { background: #2563eb !important; color: #fff !important; }
        body[data-theme="light"] #budget button.bg-blue-600:hover { background: #1d4ed8 !important; }
        body[data-theme="light"] #budget button.bg-purple-600 { background: #7c3aed !important; color: #fff !important; }
        body[data-theme="light"] #budget button.bg-purple-600:hover { background: #6d28d9 !important; }
        body[data-theme="light"] #budget button.bg-slate-700 { background: #475569 !important; color: #fff !important; }
        body[data-theme="light"] #budget button.bg-slate-700:hover { background: #334155 !important; }
        /* Opportunities tab – filter buttons (All, Quick Start, Low Cost, High Earning) */
        body[data-theme="light"] #opportunities .filter-btn { background: #f1f5f9 !important; border: 1px solid #e2e8f0; color: #334155 !important; }
        body[data-theme="light"] #opportunities .filter-btn:hover { background: #e2e8f0 !important; color: #0f172a !important; }
        body[data-theme="light"] #opportunities .filter-btn.bg-emerald-600 { background: #059669 !important; color: #fff !important; border-color: #059669; }
        body[data-theme="light"] #opportunities .filter-btn.bg-emerald-600:hover { background: #047857 !important; }
        /* Opportunities – icon background padding same in light mode (💰📊💵🎓 etc. = 🚗🍕 style) */
        body[data-theme="light"] #opportunityGrid .opportunity-card [class*="bg-slate-700/50"] { background: #f1f5f9 !important; }
        body[data-theme="light"] #opportunityModal [class*="bg-slate-700/50"] { background: #f1f5f9 !important; }
        body[data-theme="light"] #opportunityModal .opportunity-modal-back-btn { background: #f8fafc !important; border-color: #cbd5e1 !important; color: #475569 !important; }
        body[data-theme="light"] #opportunityModal .opportunity-modal-back-btn:hover { background: #e2e8f0 !important; border-color: #94a3b8 !important; color: #0f172a !important; }
        /* Challenges Hub modal – light mode */
        body[data-theme="light"] #challengesHubModal .bg-slate-800,
        body[data-theme="light"] #challengeDetailModal .bg-slate-800 { background: #fff !important; border-color: #e2e8f0 !important; }
        body[data-theme="light"] #challengesHubModal h2,
        body[data-theme="light"] #challengeDetailModal h2 { color: #0f172a !important; }
        body[data-theme="light"] #challengesHubModal .challenges-hub-tab.bg-slate-700 { background: #f1f5f9 !important; color: #475569 !important; }
        body[data-theme="light"] #challengesHubModal .challenges-hub-tab.bg-emerald-600 { background: #059669 !important; color: #fff !important; }
        body[data-theme="light"] #challengesHubModal .border-slate-700 { border-color: #e2e8f0 !important; }
        body[data-theme="light"] #challengesHubModal [class*="bg-slate-700/50"] { background: #f1f5f9 !important; }
        body[data-theme="light"] #challengesHubModal [class*="bg-emerald-500/10"] { background: #ecfdf5 !important; }
        body[data-theme="light"] #challengesHubModal button.bg-slate-700 { background: #f1f5f9 !important; color: #334155 !important; }
        body[data-theme="light"] #challengesHubModal button.bg-slate-700:hover { background: #e2e8f0 !important; }
        /* Challenges Hub & Challenge Detail modal – X close button light mode (visible on hover) */
        body[data-theme="light"] #challengesHubModal .challenges-hub-close-btn,
        body[data-theme="light"] #challengeDetailModal .challenge-detail-close-btn { color: #64748b !important; }
        body[data-theme="light"] #challengesHubModal .challenges-hub-close-btn:hover,
        body[data-theme="light"] #challengeDetailModal .challenge-detail-close-btn:hover { color: #0f172a !important; background: #e2e8f0 !important; }
        body[data-theme="light"] #journeyGuideModal .bg-slate-800 { background: #fff; border: 1px solid rgba(0,0,0,0.1); }
        body[data-theme="light"] #journeyGuideModal h2, body[data-theme="light"] #journeyGuideModal h3 { color: #0f172a; }
        body[data-theme="light"] #journeyGuideModal .text-slate-400 { color: #475569 !important; }
        body[data-theme="light"] #journeyGuideModal .text-slate-200 { color: #1e293b !important; }
        body[data-theme="light"] #journeyGuideModal button:hover { color: #059669; }
        body[data-theme="light"] #journeyGuideModal #journeyGuideModalClose { color: #64748b !important; }
        body[data-theme="light"] #journeyGuideModal #journeyGuideModalClose:hover { color: #0f172a !important; background: #f1f5f9 !important; }
        /* Delete button hover – light mode: only change color to red, no background */
        body[data-theme="light"] .budget-line-item button[onclick*="delete"]:hover,
        body[data-theme="light"] button[onclick*="deleteBudget"]:hover { background: transparent !important; background-color: transparent !important; color: #dc2626 !important; }
        /* Budget mode toggle (Basic / Pro) in Settings */
        .budget-mode-toggle-wrap { min-height: 40px; }
        .budget-mode-btn { border: none; outline: none; }
        .budget-mode-btn.bg-emerald-600 { background: #059669 !important; color: #fff !important; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
        body[data-theme="light"] .budget-mode-btn.bg-emerald-600 { background: #059669 !important; color: #fff !important; }
        body[data-theme="light"] #settingsModal .budget-mode-toggle-wrap { background: #e2e8f0 !important; }
        body[data-theme="light"] #settingsModal .budget-mode-btn:not(.bg-emerald-600) { background: transparent !important; color: #475569 !important; }
        body[data-theme="light"] #settingsModal .budget-mode-btn:not(.bg-emerald-600):hover { background: #f1f5f9 !important; color: #0f172a !important; }
        /* Apply to all 20XX button – light mode */
        body[data-theme="light"] .apply-to-all-btn {
            background: #f1f5f9 !important;
            border-color: #e2e8f0 !important;
            color: #334155 !important;
        }
        body[data-theme="light"] .apply-to-all-btn:hover {
            background: #e2e8f0 !important;
            color: #0f172a !important;
        }

        /* Budget template buttons (Simple, Moderate, Detailed) – match onboarding question pill styling */
        button.template-btn {
            padding: 0.75rem 1.5rem;
            border-radius: 0.75rem;
            font-size: 0.75rem;
            font-weight: 500;
            border: 1px solid rgba(71, 85, 105, 0.6);
            background: rgba(30, 41, 59, 0.85);
            color: #cbd5e1;
            cursor: pointer;
        }
        button.template-btn:hover {
            background: rgba(51, 65, 85, 0.95);
            border-color: #64748b;
            color: #e2e8f0;
        }
        button.template-btn.selected {
            background: rgba(16, 185, 129, 0.22);
            border-color: #10b981;
            color: #6ee7b7;
            box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.45);
        }
        button.template-btn.selected:hover {
            background: rgba(16, 185, 129, 0.28);
            border-color: #22c55e;
        }

        /* Light mode: deselected = subtle gray pill; selected = green like onboarding options */
        body[data-theme="light"] button.template-btn {
            background: #f1f5f9 !important;
            border: 1px solid #e2e8f0 !important;
            color: #334155 !important;
        }
        body[data-theme="light"] button.template-btn:hover {
            background: #e2e8f0 !important;
            color: #0f172a !important;
            border-color: #cbd5e1 !important;
        }
        body[data-theme="light"] button.template-btn.selected {
            background: rgba(5, 150, 105, 0.15) !important;
            color: #047857 !important;
            border-color: #059669 !important;
        }
        body[data-theme="light"] button.template-btn.selected:hover {
            background: rgba(5, 150, 105, 0.2) !important;
        }
        
        /* Onboarding Questionnaire - Modern Styling */
        #onboarding .glass-card {
            background: rgba(30, 41, 59, 0.78);
            -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(148, 163, 184, 0.2);
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }
        #onboarding h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
        /* Onboarding – full light mode */
        body[data-theme="light"] #onboarding .glass-card { background: #ffffff !important; backdrop-filter: none; border: 1px solid #e2e8f0 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
        body[data-theme="light"] #onboarding .border-slate-700 { border-color: #e2e8f0 !important; }
        body[data-theme="light"] #onboarding .border-slate-700\/50 { border-color: #e2e8f0 !important; }
        body[data-theme="light"] #onboarding .text-slate-400 { color: #64748b !important; }
        body[data-theme="light"] #onboarding .text-slate-500 { color: #64748b !important; }
        body[data-theme="light"] #onboarding .bg-slate-700 { background: #e2e8f0 !important; }
        body[data-theme="light"] #onboarding .bg-slate-700\/50 { background: #f1f5f9 !important; }
        body[data-theme="light"] #onboarding button.text-slate-400 { color: #64748b !important; }
        body[data-theme="light"] #onboarding button.text-slate-400:hover { color: #059669 !important; }
        body[data-theme="light"] #onboarding .bg-emerald-500\/10 { background: rgba(16, 185, 129, 0.1) !important; }
        body[data-theme="light"] #onboarding .bg-blue-500\/10 { background: rgba(59, 130, 246, 0.1) !important; }
        body[data-theme="light"] #onboarding .bg-purple-500\/10 { background: rgba(139, 92, 246, 0.1) !important; }
        body[data-theme="light"] #onboarding .hover\:border-emerald-500\/30:hover { border-color: rgba(16, 185, 129, 0.3) !important; }
        body[data-theme="light"] #onboarding .hover\:border-blue-500\/30:hover { border-color: rgba(59, 130, 246, 0.3) !important; }
        body[data-theme="light"] #onboarding .hover\:border-purple-500\/30:hover { border-color: rgba(139, 92, 246, 0.3) !important; }
        #onboarding label { font-weight: 500; color: #cbd5e1; margin-bottom: 0.75rem; display: block; }
        #onboarding input[type="text"], #onboarding input[type="email"], #onboarding input[type="number"], #onboarding input[type="date"], #onboarding select { background: rgba(51, 65, 85, 0.6); border: 1px solid rgba(71, 85, 105, 0.5); border-radius: 0.75rem; padding: 0.875rem 1rem; transition: all 0.2s; }
        #onboarding input:focus, #onboarding select:focus { outline: none; border-color: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); }
        #onboarding .input-with-currency .currency-symbol { font-size: 0.7rem; }
        
        /* Toggle Button Style (like filter buttons) */
        .onboard-toggle-btn { padding: 0.75rem 1.5rem; border-radius: 0.75rem; font-size: 0.875rem; font-weight: 500; transition: all 0.2s; cursor: pointer; border: 1px solid rgba(71, 85, 105, 0.5); background: rgba(51, 65, 85, 0.6); color: #cbd5e1; }
        .onboard-toggle-btn:hover { background: rgba(71, 85, 105, 0.8); color: #e2e8f0; border-color: #64748b; }
        .onboard-toggle-btn.selected { background: #10b981; color: #fff; border-color: #10b981; }
        .onboard-toggle-btn.selected:hover { background: #059669; border-color: #059669; }
        .onboard-option-btn.selected { background: rgba(16, 185, 129, 0.2); color: #10b981; border-color: #10b981; }
        .onboard-option-btn.selected:hover { background: rgba(16, 185, 129, 0.25); border-color: #10b981; }
        
        /* Yes/No Button Group */
        .onboard-yesno-group { display: flex; gap: 0.75rem; flex-wrap: wrap; }
        
        /* Credit Card Issuers Grid */
        .onboard-issuers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.75rem; margin-top: 0.75rem; }
        
        /* Card Values Grid */
        .onboard-values-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; }
        
        /* Back Button - Light Mode Fix */
        body[data-theme="light"] #onboarding button[onclick="onboardingPrevStep()"] { background: #e2e8f0 !important; color: #334155 !important; border: 1px solid #cbd5e1 !important; }
        body[data-theme="light"] #onboarding button[onclick="onboardingPrevStep()"]:hover { background: #cbd5e1 !important; color: #0f172a !important; border-color: #94a3b8 !important; }
        body[data-theme="light"] .onboard-toggle-btn { background: #f1f5f9 !important; border: 1px solid #e2e8f0 !important; color: #334155 !important; }
        body[data-theme="light"] .onboard-toggle-btn:hover { background: #e2e8f0 !important; color: #0f172a !important; }
        body[data-theme="light"] .onboard-toggle-btn.selected { background: #059669 !important; color: #fff !important; border-color: #059669 !important; }
        body[data-theme="light"] .onboard-toggle-btn.selected:hover { background: #047857 !important; }
        body[data-theme="light"] .onboard-option-btn.selected { background: rgba(5, 150, 105, 0.15) !important; color: #047857 !important; border-color: #059669 !important; }
        body[data-theme="light"] .onboard-option-btn.selected:hover { background: rgba(5, 150, 105, 0.2) !important; }
        /* Onboarding debt table – light mode (was showing dark in light theme) */
        body[data-theme="light"] #onboardDebtTableWrap > div {
            background: #ffffff !important;
            border-color: #e2e8f0 !important;
        }
        body[data-theme="light"] #onboardDebtTableWrap .onboard-debt-grid.border-b {
            background: #f1f5f9 !important;
            border-bottom-color: #e2e8f0 !important;
            color: #334155 !important;
        }
        body[data-theme="light"] #onboardDebtTableWrap .onboard-debt-grid.border-b span {
            color: #334155 !important;
        }
        body[data-theme="light"] #onboardDebtTableWrap .border-t {
            border-top-color: #e2e8f0 !important;
        }
        body[data-theme="light"] #onboardDebtTableBody input {
            background: #ffffff !important;
            border-color: #e2e8f0 !important;
            color: #0f172a !important;
        }
        body[data-theme="light"] #onboardDebtTableBody input::placeholder {
            color: #94a3b8 !important;
        }
        body[data-theme="light"] #onboardDebtTableBody button.p-1\.5 {
            color: #64748b !important;
            background: transparent !important;
        }
        body[data-theme="light"] #onboardDebtTableBody button.p-1\.5:hover {
            color: #dc2626 !important;
            background: #f1f5f9 !important;
        }
        body[data-theme="light"] #onboardDebtTableWrap button[onclick="addOnboardDebtRow()"] {
            background: #f1f5f9 !important;
            border-color: #e2e8f0 !important;
            color: #334155 !important;
        }
        body[data-theme="light"] #onboardDebtTableWrap button[onclick="addOnboardDebtRow()"]:hover {
            background: #e2e8f0 !important;
            color: #0f172a !important;
        }
        body[data-theme="light"] #onboarding label { color: #475569 !important; }
        body[data-theme="light"] #onboarding input, body[data-theme="light"] #onboarding select { background: #fff !important; border-color: #cbd5e1 !important; color: #0f172a !important; }
        body[data-theme="light"] #onboarding input:focus, body[data-theme="light"] #onboarding select:focus { border-color: #10b981 !important; }
        
        /* Dropdown hover styling */
        #onboarding select option { background: #1e293b; color: #e2e8f0; padding: 0.5rem; }
        #onboarding select option:hover { background: #10b981; color: #fff; }
        body[data-theme="light"] #onboarding select option { background: #fff; color: #334155; }
        body[data-theme="light"] #onboarding select option:hover { background: #10b981; color: #fff; }
        
        /* Custom Checkbox Styling for Onboarding */
        #onboarding input[type="checkbox"] { 
            appearance: none; 
            -webkit-appearance: none; 
            width: 1.25rem; 
            height: 1.25rem; 
            border: 2px solid rgba(148, 163, 184, 0.5); 
            border-radius: 0.375rem; 
            background: transparent; 
            cursor: pointer; 
            position: relative; 
            transition: all 0.2s;
            margin: 0;
        }
        #onboarding input[type="checkbox"]:checked { 
            background: #10b981; 
            border-color: #10b981; 
        }
        #onboarding input[type="checkbox"]:checked::after { 
            content: "\2713"; 
            position: absolute; 
            top: 50%; 
            left: 50%; 
            transform: translate(-50%, -50%); 
            color: #fff; 
            font-size: 0.875rem; 
            font-weight: bold; 
            line-height: 1; 
        }
        #onboarding input[type="checkbox"]:hover { 
            border-color: #64748b; 
        }
        #onboarding input[type="checkbox"]:checked:hover { 
            background: #059669; 
            border-color: #059669; 
        }
        body[data-theme="light"] #onboarding input[type="checkbox"] { 
            border-color: #94a3b8; 
            background: #fff; 
        }
        body[data-theme="light"] #onboarding input[type="checkbox"]:hover { 
            border-color: #64748b; 
        }
        body[data-theme="light"] #onboarding input[type="checkbox"]:checked { 
            background: #059669 !important; 
            border-color: #059669 !important; 
        }
        body[data-theme="light"] #onboarding input[type="checkbox"]:checked::after { 
            color: #fff !important; 
        }
        body[data-theme="light"] #onboarding input[type="checkbox"]:checked:hover { 
            background: #047857 !important; 
            border-color: #047857 !important; 
        }
        
        /* Progressive Question Display */
        .onboard-question-group { 
            transition: opacity 0.3s ease, max-height 0.3s ease;
            overflow: hidden;
        }
        .onboard-question-group.hidden { 
            opacity: 0; 
            max-height: 0; 
            margin: 0; 
            padding: 0;
            pointer-events: none;
        }
        .onboard-question-group:not(.hidden) {
            opacity: 1;
            max-height: 1000px;
        }
        
        /* Progress Bar Animation */
        .onboard-step-progress {
            transition: width 0.3s ease, background-color 0.3s ease;
        }
        
        /* During questionnaire: hide header tab menu and gamified indicator */
        body.nav-onboarding .nav-hidden-during-onboarding {
            display: none !important;
        }
        
        /* User Email Interactive Effect */
        @keyframes emailGradient {
            0% {
                background: linear-gradient(135deg, #00BCD4 0%, #00d4ff 25%, #1E90FF 50%, #007FFF 75%, #10b981 100%);
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-size: 200% 200%;
                background-position: 0% 0%;
            }
            50% {
                background: linear-gradient(135deg, #00BCD4 0%, #00d4ff 25%, #1E90FF 50%, #007FFF 75%, #10b981 100%);
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-size: 200% 200%;
                background-position: 100% 100%;
            }
            100% {
                background: linear-gradient(135deg, #00BCD4 0%, #00d4ff 25%, #1E90FF 50%, #007FFF 75%, #10b981 100%);
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-size: 200% 200%;
                background-position: 0% 0%;
            }
        }
        
        .user-email-btn:hover {
            animation: emailGradient 2s ease-in-out infinite;
            background: linear-gradient(135deg, #00BCD4 0%, #00d4ff 25%, #1E90FF 50%, #007FFF 75%, #10b981 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-size: 200% 200%;
        }
        
        .user-email-btn {
            transition: transform 0.2s ease;
            background: none;
            border: none;
            padding: 0;
            text-align: right;
        }
        
        .user-email-btn:not(:hover) {
            -webkit-text-fill-color: currentColor;
        }
        
        /* Border Beam Effect for Month Navigation Arrows */
        @keyframes borderBeam {
            0% {
                border-color: #00BCD4;
                box-shadow: 0 0 8px rgba(0, 188, 212, 0.6);
            }
            25% {
                border-color: #00d4ff;
                box-shadow: 0 0 12px rgba(0, 212, 255, 0.7);
            }
            50% {
                border-color: #1E90FF;
                box-shadow: 0 0 16px rgba(30, 144, 255, 0.8);
            }
            75% {
                border-color: #007FFF;
                box-shadow: 0 0 12px rgba(0, 127, 255, 0.7);
            }
            100% {
                border-color: #00BCD4;
                box-shadow: 0 0 8px rgba(0, 188, 212, 0.6);
            }
        }
        
        body[data-theme="light"] .budget-month-nav:hover,
        body[data-theme="light"] .dashboard-month-nav:hover {
            animation: borderBeam 2s ease-in-out infinite;
            background: #f8fafc !important;
        }
        
        /* Month Display Gradient Hover Effect */
        body[data-theme="light"] #budgetMonthDisplay,
        body[data-theme="light"] #dashboardCurrentMonthDisplay {
            transition: transform 0.2s ease;
            display: inline-block;
        }
        
        body[data-theme="light"] #budgetMonthDisplay:hover,
        body[data-theme="light"] #dashboardCurrentMonthDisplay:hover {
            animation: emailGradient 2s ease-in-out infinite;
            background: linear-gradient(135deg, #00BCD4 0%, #00d4ff 25%, #1E90FF 50%, #007FFF 75%, #10b981 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-size: 200% 200%;
            transform: scale(1.05);
        }
        
        body[data-theme="light"] #budgetMonthDisplay:not(:hover),
        body[data-theme="light"] #dashboardCurrentMonthDisplay:not(:hover) {
            -webkit-text-fill-color: currentColor;
        }
        
        /* Empowerment Score Heading Light Mode */
        body[data-theme="light"] .empowerment-score-container:not(:hover) .empowerment-score-heading {
            color: #0f172a !important;
            -webkit-text-fill-color: #0f172a !important;
        }
        
        /* Budget footer (DebtDefy-style, theme colors: #00BCD4 #00d4ff #1E90FF #007FFF #10b981) */
        .budget-footer-content {
            background: rgba(15, 23, 42, 0.2);
            -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
            border-top: 1px solid rgba(0, 188, 212, 0.2);
            box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }
        body[data-theme="light"] .budget-footer-content {
            background: rgba(248, 250, 252, 0.35);
            border-top-color: rgba(0, 127, 255, 0.15);
        }
        .budget-footer-toggle-colors {
            background: rgba(0, 188, 212, 0.25);
            color: #00d4ff;
            border: 1px solid rgba(0, 212, 255, 0.4);
        }
        .budget-footer-toggle-colors:hover {
            background: rgba(0, 188, 212, 0.4);
            color: #00d4ff;
            border-color: rgba(30, 144, 255, 0.5);
            box-shadow: 0 0 12px rgba(0, 188, 212, 0.3);
        }
        body[data-theme="light"] .budget-footer-toggle-colors {
            background: rgba(0, 127, 255, 0.15);
            color: #007FFF;
            border-color: rgba(30, 144, 255, 0.35);
        }
        body[data-theme="light"] .budget-footer-toggle-colors:hover {
            background: rgba(0, 127, 255, 0.25);
            color: #1E90FF;
            box-shadow: 0 0 12px rgba(0, 127, 255, 0.25);
        }
        .budget-footer-link {
            color: #94a3b8;
            transition: color 0.2s, filter 0.2s;
        }
        .budget-footer-link:hover {
            color: #00d4ff;
            filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.5));
        }
        body[data-theme="light"] .budget-footer-link {
            color: #64748b;
        }
        body[data-theme="light"] .budget-footer-link:hover {
            color: #007FFF;
            filter: drop-shadow(0 0 4px rgba(0, 127, 255, 0.4));
        }
        body[data-theme="light"] .budget-footer-link:hover #budgetCopyrightYear {
            color: #007FFF !important;
        }
        .budget-footer-link:hover #budgetCopyrightYear {
            color: inherit;
        }
        .budget-footer-accent {
            color: #00BCD4;
        }
        body[data-theme="light"] .budget-footer-accent {
            color: #1E90FF;
        }
        /* Collapse: move entire footer down (Safari-safe; avoid transform on backdrop-filter element) */
        #budgetFooter {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            -webkit-transition: -webkit-transform 0.3s ease, transform 0.3s ease;
            transition: transform 0.3s ease;
        }
        #budgetFooter.budget-footer-collapsed {
            -webkit-transform: translateY(100%);
            transform: translateY(100%);
        }
        #budgetFooter.budget-footer-collapsed .budget-footer-content {
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }
        #budgetFooterToggleIcon.rotate-180 {
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }
        body[data-theme="light"] #footerTermsModal .bg-slate-800,
        body[data-theme="light"] #footerPrivacyModal .bg-slate-800,
        body[data-theme="light"] #footerContactModal .bg-slate-800 {
            background: #ffffff !important;
            border-color: rgba(0, 0, 0, 0.1);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
        }
        body[data-theme="light"] #footerTermsModal h3,
        body[data-theme="light"] #footerPrivacyModal h3,
        body[data-theme="light"] #footerContactModal h3 { color: #0f172a !important; }
        body[data-theme="light"] #footerTermsModal .text-slate-300,
        body[data-theme="light"] #footerPrivacyModal .text-slate-300,
        body[data-theme="light"] #footerContactModal .text-slate-300 { color: #475569 !important; }
        body[data-theme="light"] #footerContactModal input,
        body[data-theme="light"] #footerContactModal textarea {
            background: #f8fafc !important;
            border-color: #e2e8f0;
            color: #0f172a !important;
        }
        body[data-theme="light"] #footerContactModal label { color: #334155 !important; }
        /* Light mode: footer modal close button (avoid dark-mode styling) */
        body[data-theme="light"] #footerTermsModal button[aria-label="Close"],
        body[data-theme="light"] #footerPrivacyModal button[aria-label="Close"],
        body[data-theme="light"] #footerContactModal button[aria-label="Close"] {
            background: #f1f5f9 !important;
            color: #475569 !important;
        }
        body[data-theme="light"] #footerTermsModal button[aria-label="Close"]:hover,
        body[data-theme="light"] #footerPrivacyModal button[aria-label="Close"]:hover,
        body[data-theme="light"] #footerContactModal button[aria-label="Close"]:hover {
            background: #e2e8f0 !important;
            color: #0f172a !important;
        }
        /* Focus stays inside field: inset outline so it doesn’t run over edges */
        #footerContactModal input:focus,
        #footerContactModal textarea:focus {
            outline: 2px solid #06b6d4 !important;
            outline-offset: -2px !important;
            box-shadow: none !important;
            border-color: #06b6d4;
        }
        body[data-theme="light"] #footerContactModal input:focus,
        body[data-theme="light"] #footerContactModal textarea:focus {
            outline-color: #0891b2 !important;
            border-color: #0891b2;
        }