/* ═══════ VIEW-ONLY MODE ═══════ */
        .view-only-mode .budget-input,
        .view-only-mode .person-name-input,
        .view-only-mode .person-short-input,
        .view-only-mode .budget-row-name input {
            pointer-events: none;
            opacity: 0.7;
        }

        .view-only-mode .budget-row-delete,
        .view-only-mode .item-action-btn,
        .view-only-mode .add-category-btn,
        .view-only-mode .shared-toggle,
        .view-only-mode .note-btn,
        .view-only-mode .period-toggle {
            display: none !important;
        }

        /* ═══════════════════════════════════════════════════════════════
           MICRO-INTERACTIONS & ANIMATIONS
           ═══════════════════════════════════════════════════════════════ */

        /* Transition defaults — scoped to interactive elements only.
           Page-level containers (.page, .dashboard, body) must NOT have
           opacity/background transitions — see base.css rationale. */

        /* Button hover lift effect */
        .btn {
            position: relative;
            overflow: hidden;
        }

        .btn::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
            opacity: 0;
            transition: opacity var(--duration);
        }

        .btn:hover::after {
            opacity: 1;
        }

        .btn:active {
            transform: scale(0.97);
        }


        /* Budget row hover highlight */
        .budget-row {
            transition: all var(--duration) var(--ease);
            border-left: 3px solid transparent;
        }

        .budget-row:hover {
            background: var(--bg-secondary);
            border-left-color: var(--person-0);
        }

        /* Input focus glow effect */
        .budget-input {
            transition: all var(--duration) var(--ease);
        }

        .budget-input:focus {
            box-shadow: 0 0 0 4px var(--person-0-light);
            border-color: var(--person-0);
        }

        /* Search box focus state */
        .search-box:focus-within {
            box-shadow: 0 0 0 4px var(--person-0-light);
            border-color: var(--person-0);
        }

        .search-box:focus-within .search-icon {
            color: var(--person-0);
        }

        /* Category bar fill animation */
        .category-bar-fill {
            transition: width 0.6s var(--ease-spring);
        }

        /* Metric card number animation */
        @keyframes countUp {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .metric-value, .dash-card-value {
            animation: countUp 0.4s ease forwards;
        }

        /* Pulse animation for important values */
        @keyframes pulse-scale {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.02); }
        }

        /* Stagger animation for grid items */
        .future-item {
            opacity: 0;
            animation: fadeInUp 0.4s ease forwards;
        }

        .future-item:nth-child(1) { animation-delay: 0.05s; }
        .future-item:nth-child(2) { animation-delay: 0.1s; }
        .future-item:nth-child(3) { animation-delay: 0.15s; }
        .future-item:nth-child(4) { animation-delay: 0.2s; }
        .future-item:nth-child(5) { animation-delay: 0.25s; }
        .future-item:nth-child(6) { animation-delay: 0.3s; }
        .future-item:nth-child(7) { animation-delay: 0.35s; }
        .future-item:nth-child(8) { animation-delay: 0.4s; }

        /* After initial render, suppress ALL entry animations to prevent flicker on updates */
        .dashboard-settled .future-item {
            opacity: 1;
            animation: none;
        }

        .dashboard-settled .metric-value,
        .dashboard-settled .dash-card-value {
            animation: none;
        }

        .dashboard-settled .animate-in {
            opacity: 1;
            animation: none;
        }

        .dashboard-settled .delay-1,
        .dashboard-settled .delay-2,
        .dashboard-settled .delay-3,
        .dashboard-settled .delay-4,
        .dashboard-settled .delay-5 {
            opacity: 1;
        }

        /* Future item hover effect */
        .future-item {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .future-item:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

        .future-item:hover .future-icon {
            transform: scale(1.2);
        }

        .future-icon {
            transition: transform var(--duration) var(--ease);
        }

        /* Tooltip fade in */
        .category-bar-tooltip {
            transition: opacity 0.2s ease, transform 0.2s ease;
            transform: translateY(-5px);
        }

        .category-bar-fill:hover .category-bar-tooltip {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        /* ═══════════════════════════════════════════════════════════════
           VISUAL ENHANCEMENTS
           ═══════════════════════════════════════════════════════════════ */

        /* Gradient text for hero values */
        .dashboard-title {
            background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Frosted glass effect for panels */
        .simulator-panel {
            backdrop-filter: blur(40px);
            -webkit-backdrop-filter: blur(40px);
        }

        [data-theme="dark"] .simulator-panel {
            background: rgba(30, 30, 32, 0.92);
            box-shadow: var(--shadow-xl), inset 0 0 0 0.5px rgba(255,255,255,0.06);
        }

        [data-theme="dark"] .settings-panel {
            background: #1c1c1e;
        }

        [data-theme="dark"] .settings-group {
            background: #2c2c2e;
        }

        [data-theme="dark"] .settings-name-input {
            background: #1c1c1e;
            border-color: #3a3a3c;
        }

        [data-theme="dark"] .settings-select {
            background: #3a3a3c;
            color: var(--text-secondary);
        }

        [data-theme="dark"] .settings-select:hover {
            background: #48484a;
        }

        [data-theme="dark"] .settings-close {
            background: #2c2c2e;
        }

        [data-theme="dark"] .settings-close:hover {
            background: #3a3a3c;
        }

        /* Card borders handled by glass-border token in settings.css */

        /* Subtle gradient on metric cards */
        .metric-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--person-0), var(--person-1));
            border-radius: var(--radius-md) var(--radius-md) 0 0;
            opacity: 0;
            transition: opacity var(--duration-slow);
        }

        .metric-card:hover::before {
            opacity: 1;
        }

        /* Buffer card gradient border */
        .buffer-card {
            position: relative;
            background: var(--bg-primary);
        }

        .buffer-card[class*="person-"]::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            border-radius: var(--radius-md) var(--radius-md) 0 0;
        }
        .buffer-card.person-0::before { background: var(--person-0-gradient); }
        .buffer-card.person-1::before { background: var(--person-1-gradient); }
        .buffer-card.person-2::before { background: var(--person-2-gradient); }
        .buffer-card.person-3::before { background: var(--person-3-gradient); }
        .buffer-card.person-4::before { background: var(--person-4-gradient); }

        /* Income donut glow */
        .income-donut svg {
            filter: drop-shadow(0 4px 12px rgba(0,0,0,0.1));
        }

        /* Category expand icon rotation */
        .expand-icon {
            transition: transform var(--duration-slow) var(--ease);
            display: inline-block;
        }

        .category-bar-item.expanded .expand-icon {
            transform: rotate(180deg);
        }

        /* Budget section header enhancement */
        .budget-section-header {
            position: relative;
            overflow: visible;
            z-index: 2;
        }

        .budget-section-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: var(--person-0-gradient);
        }

        /* View toggle enhancement */
        .view-toggle {
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
            border-radius: var(--radius-lg);
            padding: 4px;
        }

        /* ═══════════════════════════════════════════════════════════════
           UX IMPROVEMENTS
           ═══════════════════════════════════════════════════════════════ */

        /* Better focus states for accessibility */
        *:focus-visible {
            outline: 2px solid var(--person-0);
            outline-offset: 2px;
        }

        button:focus-visible, a:focus-visible, input:focus-visible {
            outline: 2px solid var(--person-0);
            outline-offset: 2px;
        }

        /* Skip to content link (accessibility) */
        .skip-link {
            position: absolute;
            top: -40px;
            left: 0;
            background: var(--person-0);
            color: white;
            padding: 8px 16px;
            z-index: 100;
            transition: top var(--duration-slow);
        }

        .skip-link:focus {
            top: 0;
        }

        /* Loading state for buttons */
        .btn.loading {
            pointer-events: none;
            opacity: 0.7;
        }

        .btn.loading::before {
            content: '';
            display: inline-block;
            width: 14px;
            height: 14px;
            border: 2px solid currentColor;
            border-right-color: transparent;
            border-radius: 50%;
            margin-right: 8px;
            animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        @keyframes ripple {
            to { transform: scale(4); opacity: 0; }
        }

        /* Success state */
        .btn.success {
            background: var(--success) !important;
        }

        /* Smooth scroll behavior */
        html {
            scroll-behavior: smooth;
        }

        /* Better touch targets for mobile */
        @media (max-width: 768px) {
            .btn, .nav-links a, .budget-row {
                min-height: 44px;
            }
        }

        /* ═══════════════════════════════════════════════════════════════
           POLISH & REFINEMENTS
           ═══════════════════════════════════════════════════════════════ */

        /* Smooth number transitions - tabular nums for decimal alignment */
        .metric-value, .dash-card-value, .budget-row-total, .budget-input,
        .savings-amounts, .category-bar-total, .buffer-value, .income-value,
        .category-bar-amount, .sim-result-before, .sim-result-after, .sim-result-diff {
            font-variant-numeric: tabular-nums;
        }

        /* Better typography hierarchy */
        .dashboard-hero {
            text-align: center;
        }

        .dashboard-date {
            font-size: var(--text-small);
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: var(--space-sm);
        }

        .dashboard-title {
            font-size: var(--text-hero);
            font-weight: var(--font-bold);
            letter-spacing: -0.02em;
            margin-bottom: var(--space-xs);
        }

        .dashboard-subtitle {
            font-size: var(--text-body);
            color: var(--text-secondary);
        }

        /* Enhanced scrollbar styling */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: var(--bg-secondary);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb {
            background: var(--border-medium);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--text-muted);
        }

        [data-theme="dark"] ::-webkit-scrollbar-track {
            background: var(--bg-tertiary);
        }

        /* Selection color */
        ::selection {
            background: rgba(0, 122, 255, 0.2);
            color: inherit;
        }

        /* Print improvements */
        /* Reduced motion preference */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }
        .delay-1 { animation-delay: 0.1s; opacity: 0; }
        .delay-2 { animation-delay: 0.2s; opacity: 0; }
        .delay-3 { animation-delay: 0.3s; opacity: 0; }
        .delay-4 { animation-delay: 0.4s; opacity: 0; }
        .delay-5 { animation-delay: 0.5s; opacity: 0; }

/* ===== Reduced Motion Overrides ===== */
@media (prefers-reduced-motion: reduce) {
    .fade-in, .slide-up, .slide-in, .scale-in {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .metric-card, .buffer-card, .dashboard-card {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .overlay, .modal, [class*="panel"] {
        transition: none !important;
    }
}