/* ═══════════════════════════════════════════════════════════════
           APPLE-STYLE RESPONSIVE BREAKPOINTS
           iPad Pro: 1024px, iPad: 834px, iPad Mini: 768px, iPhone: 430px
           ═══════════════════════════════════════════════════════════════ */

        /* ═══════ TABLET LANDSCAPE (1024px - 1199px) ═══════ */
        /* iPad Pro landscape, larger tablets - Optimized 2-column layouts */
        @media (min-width: 768px) and (max-width: 1199px) {
            /* Keep desktop navigation visible on tablets */
            .nav-container {
                display: flex !important;
            }

            /* Hide mobile header and bottom tabs on tablets */
            .mobile-header {
                display: none !important;
            }

            .bottom-tab-bar {
                display: none !important;
            }

            /* Reset page padding for tablets (using desktop nav) */
            .page {
                padding-top: 60px;
                padding-bottom: 0;
            }

            /* Tablet navigation - more compact */
            .nav-inner {
                padding: 10px var(--container-padding);
            }

            .nav-tab {
                padding: 7px 14px;
                font-size: var(--text-caption);
            }

            .nav-brand {
                font-size: var(--text-body);
            }

            /* Touch-friendly action buttons */
            .nav-actions .btn-ghost,
            .nav-actions .btn-icon {
                height: 36px;
            }

            .nav-actions .btn-icon {
                width: 36px;
            }

            .sync-status,
            .user-profile {
                height: 36px;
            }
        }

        @media (max-width: 1199px) and (min-width: 1024px) {
            /* Tablet Landscape - 2 column layout */
            .dashboard-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: var(--space-lg);
            }

            .dash-card.span-4 { grid-column: span 1; }
            .dash-card.span-5 { grid-column: span 1; }
            .dash-card.span-6 { grid-column: span 1; }
            .dash-card.span-7 { grid-column: span 1; }
            .dash-card.span-12 { grid-column: span 2; }

            /* Buffer cards side by side */
            .buffer-cards {
                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                gap: var(--space-lg);
            }

            /* Income split - horizontal with donut */
            .income-split {
                flex-direction: row;
                align-items: flex-start;
                gap: var(--space-xl);
            }

            .income-donut {
                width: 180px;
                height: 180px;
            }

            /* Savings comparison - auto-fit for multi-person */
            .savings-comparison {
                grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
                gap: var(--space-lg);
            }

            .savings-rate-ring {
                width: 100px;
                height: 100px;
            }

            /* Calendar - 4 column grid */
            .calendar-months-grid {
                grid-template-columns: repeat(4, 1fr);
                gap: var(--space-md);
            }

            /* Budget rows - optimized for touch */
            .budget-row {
                grid-template-columns: 28px 1fr 40px 100px 100px 100px 80px 44px 44px;
                padding: 14px 20px;
                gap: 8px;
                min-height: 56px;
            }

            .budget-input {
                font-size: var(--text-caption);
                padding: 10px 8px;
                min-height: 44px;
            }

            .budget-row-total {
                font-size: var(--text-caption);
                padding: 10px 8px;
            }
        }

        /* ═══════ TABLET PORTRAIT (768px - 1023px) ═══════ */
        @media (max-width: 1023px) and (min-width: 768px) {
            /* Collapse segmented theme switcher into compact icon + dropdown */
            .theme-switcher {
                display: none !important;
            }

            .nav-actions .theme-toggle-compact {
                display: block;
            }

            /* Hide text labels on nav buttons at tablet portrait - icon only */
            .nav-btn-label {
                display: none;
            }

            .nav-actions .btn-ghost {
                padding: 0;
                width: 36px;
            }
            /* Dashboard - still 2 column but tighter */
            .dashboard-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: var(--space-md);
            }

            .dash-card.span-4 {
                grid-column: span 1;
            }

            .dash-card.span-5 {
                grid-column: span 1;
            }

            .dash-card.span-6 {
                grid-column: span 1;
            }

            .dash-card.span-7 {
                grid-column: span 1;
            }

            .dash-card.span-12 {
                grid-column: span 2;
            }

            /* Metrics - compact horizontal pills, flex-wrap handles row breaks */
            .metrics-row {
                gap: 8px;
            }

            .metric-card {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 10px;
                padding: 10px 14px;
                text-align: left;
            }

            .metric-card:hover {
                transform: none;
            }

            .metric-icon {
                width: 32px;
                height: 32px;
                font-size: 1rem;
                margin-bottom: 0;
                flex-shrink: 0;
            }

            .metric-value {
                font-size: clamp(14px, 2vw, 17px);
                line-height: 1.2;
            }

            .metric-label {
                font-size: 10px;
                margin-top: 1px;
            }

            .metric-sub {
                display: none;
            }

            /* Buffer cards - side by side */
            .buffer-cards {
                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                gap: var(--space-md);
            }

            .buffer-card {
                padding: var(--space-md);
            }

            .buffer-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: var(--space-xs);
            }

            /* Income split - vertical with centered donut */
            .income-split {
                flex-direction: column;
                align-items: center;
                gap: var(--space-lg);
            }

            .income-donut {
                width: 160px;
                height: 160px;
            }

            .income-details {
                width: 100%;
            }

            /* Savings - auto-fit for multi-person */
            .savings-comparison {
                grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
                gap: var(--space-md);
            }

            .savings-rate-ring {
                width: 90px;
                height: 90px;
            }

            /* Calendar - 3 column grid */
            .calendar-months-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: var(--space-sm);
            }

            .month-card {
                padding: var(--space-md);
            }

            .month-card-name {
                font-size: var(--text-body);
            }

            /* Budget rows - tablet optimized */
            .budget-row {
                grid-template-columns: 28px 1fr 36px 85px 85px 85px 65px 40px 40px;
                padding: 12px 16px;
                gap: 6px;
                min-height: 52px;
            }

            .budget-input {
                font-size: 13px;
                padding: 8px 6px;
                min-height: 40px;
            }

            /* Category bars */
            .category-bar-item {
                border-radius: var(--radius-md);
                margin-bottom: var(--space-sm);
            }

            .category-bar-track {
                height: 28px;
            }
        }

        /* iPad Mini specific adjustments (834px) */
        @media (max-width: 834px) and (min-width: 768px) {
            /* Slightly tighter spacing for iPad Mini */
            .metrics-section {
                padding: var(--space-md);
            }

            .buffer-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* Mobile Landscape & Large Phones */
        @media (max-width: 768px) {
            :root {
                --space-xs: 4px;
                --space-sm: 8px;
                --space-md: 12px;
                --space-lg: 16px;
                --space-xl: 24px;
            }

            /* SINGLE COLUMN GRID ON MOBILE */
            .dashboard-grid {
                grid-template-columns: 1fr;
                gap: var(--space-md);
                padding: 0 var(--space-md) 100px;
                overflow-x: hidden;
            }

            .dash-card.span-4,
            .dash-card.span-5,
            .dash-card.span-6,
            .dash-card.span-7,
            .dash-card.span-12 {
                grid-column: span 1;
            }

            .nav-inner {
                flex-wrap: wrap;
                height: auto;
                padding: var(--space-sm) var(--space-md);
                gap: var(--space-sm);
            }
            .nav-brand {
                width: 100%;
                text-align: center;
                font-size: var(--text-body);
            }
            .nav-tabs {
                order: 3;
                width: 100%;
                justify-content: center;
            }
            .nav-actions {
                position: absolute;
                right: var(--space-md);
                top: var(--space-sm);
            }

            /* ═══════ MOBILE METRIC CARDS - COMPACT HORIZONTAL PILLS ═══════ */
            /* flex-wrap from base handles 3→2+1 row break automatically */
            .metrics-row {
                gap: 8px;
            }

            .metric-card {
                padding: 10px 12px;
                border-radius: var(--radius-md);
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 8px;
                text-align: left;
            }

            .metric-card:hover {
                transform: none;
            }

            .metric-icon {
                width: 28px;
                height: 28px;
                font-size: 0.875rem;
                margin-bottom: 0;
                flex-shrink: 0;
            }

            .metric-value {
                font-size: clamp(13px, 3.5vw, 16px) !important;
                font-weight: var(--font-bold);
                line-height: 1.2;
                white-space: nowrap;
            }

            .metric-label {
                font-size: 10px;
                color: var(--text-secondary);
                line-height: 1.2;
                margin-top: 1px;
            }

            .metric-sub {
                display: none;
            }

            /* Person cards - side by side */
            .buffer-cards {
                grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
                gap: var(--space-sm);
            }

            .buffer-card {
                padding: var(--space-md);
            }

            .buffer-card-header {
                flex-direction: column;
                align-items: flex-start;
                gap: var(--space-xs);
            }

            .buffer-avatar {
                width: 36px;
                height: 36px;
                font-size: 14px;
            }

            .buffer-name {
                font-size: var(--text-small);
            }

            .buffer-income {
                font-size: 10px;
            }

            .buffer-grid {
                grid-template-columns: 1fr;
                gap: var(--space-xs);
            }

            .buffer-item {
                padding: var(--space-sm);
            }

            .buffer-item-value {
                font-size: var(--text-body);
            }

            .buffer-item-label {
                font-size: clamp(8px, 2.5vw, 10px);
            }

            /* ═══════ INCOME SPLIT - PREVENT OVERFLOW ═══════ */
            .income-split {
                flex-direction: column;
                align-items: stretch;
                gap: 20px;
                overflow: hidden;
                max-width: 100%;
            }

            .income-donut {
                width: clamp(100px, 30vw, 140px);
                height: clamp(100px, 30vw, 140px);
                margin: 0 auto;
                flex-shrink: 0;
            }

            .income-donut circle {
                stroke-width: 16;
            }

            .income-donut-total {
                font-size: clamp(14px, 4vw, 18px);
            }

            .income-donut-label {
                font-size: clamp(9px, 2.5vw, 11px);
            }

            .income-details {
                width: 100%;
            }

            .income-person {
                padding: 12px 0;
                gap: 12px;
            }

            .income-name {
                font-size: clamp(13px, 3.5vw, 16px);
            }

            .income-percent {
                font-size: clamp(11px, 3vw, 13px);
            }

            .income-amount {
                font-size: clamp(14px, 4vw, 18px);
            }

            /* ═══════ SAVINGS RATE - FULL HEIGHT, LARGE RINGS ═══════ */
            .savings-comparison {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
                gap: 12px;
                overflow: hidden;
            }

            .savings-person {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center;
                padding: 24px 12px;
                background: var(--bg-secondary);
                border-radius: var(--radius-lg);
                min-height: 180px;
            }

            .savings-person-name {
                font-size: clamp(12px, 3vw, 14px);
                font-weight: var(--font-semibold);
                margin-bottom: 16px;
                color: var(--text-primary);
            }

            .savings-rate-ring {
                width: clamp(70px, 20vw, 100px);
                height: clamp(70px, 20vw, 100px);
                margin: 0 0 16px 0;
            }

            .savings-rate-ring svg {
                width: 100%;
                height: 100%;
            }

            .savings-rate-ring circle {
                stroke-width: 10;
            }

            .savings-rate-value {
                font-size: clamp(18px, 5vw, 24px);
                font-weight: var(--font-bold);
            }

            .savings-amounts {
                font-size: clamp(10px, 2.5vw, 12px);
                color: var(--text-secondary);
                margin-top: 8px;
            }

            .savings-amounts strong {
                color: var(--text-primary);
                font-size: clamp(12px, 3vw, 14px);
                display: block;
            }

            .future-grid { grid-template-columns: repeat(2, 1fr); }
            .budget-summary-card { grid-template-columns: repeat(2, 1fr); }
            .budget-table-header { display: none; }
            .period-toggle { margin-left: 0; margin-top: var(--space-xs); }
            .search-box.full-width { max-width: 100%; }
            .category-bar-item { margin: 0; border-radius: 0; }

            /* ═══════ CATEGORY BAR - HIDE ZERO CONTRIBUTORS & TEXT ═══════ */
            .category-bar-fill[style*="width: 0"],
            .category-bar-fill[style*="width:0"],
            .category-bar-fill[style*="width: 0%"],
            .category-bar-fill[style*="width:0%"] {
                display: none !important;
            }

            .category-bar-fill:only-child,
            .category-bar-fill.person-0:first-child:last-child,
            .category-bar-fill.person-1:first-child:last-child,
            .category-bar-fill.person-2:first-child:last-child,
            .category-bar-fill.person-3:first-child:last-child,
            .category-bar-fill.person-4:first-child:last-child {
                border-radius: var(--radius-md) !important;
            }

            .category-bar-track {
                height: 24px;
            }

            /* Hide percentage text inside category bars on mobile */
            .category-bar-fill span {
                display: none;
            }

            /* ═══════ BUDGET SPLIT CARDS - NO RATIO ON BAR ═══════ */
            .dash-card.span-6 {
                padding: 16px;
            }

            /* Hide percentage text inside split bar segments */
            .shared-segment {
                font-size: 0 !important;
            }

            .shared-bar {
                height: 24px;
                border-radius: var(--radius-md);
            }

            .shared-visual {
                margin-top: 12px;
            }

            .shared-bar {
                height: 20px;
                border-radius: var(--radius-md);
                overflow: hidden;
                background: var(--bg-secondary);
            }

            /* Hide 0-width segments in budget split bar */
            .shared-bar > div[style*="width: 0"],
            .shared-bar > div[style*="width:0"],
            .shared-bar > div[style*="width: 0%"],
            .shared-bar > div[style*="width:0%"] {
                display: none !important;
            }

            .shared-legend {
                display: flex;
                flex-wrap: wrap;
                gap: 8px 16px;
                margin-top: 10px;
            }

            .shared-legend-item {
                display: flex;
                align-items: center;
                gap: 6px;
                font-size: 10px;
                color: var(--text-secondary);
            }

            .shared-dot {
                width: 8px;
                height: 8px;
                border-radius: 2px;
                flex-shrink: 0;
            }

            /* ═══════ BUILDING OUR FUTURE - SCALING ═══════ */
            .future-card .dash-card-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
            }

            .future-total {
                font-size: clamp(16px, 4.5vw, 22px);
                word-break: break-word;
                max-width: 100%;
            }

            /* Grid items restyled to compact rows in mobile.css */

            /* Touch-friendly buttons */
            .btn {
                min-height: 44px;
                padding: var(--space-sm) var(--space-md);
            }

            /* ═══════ CHART ADAPTATIONS FOR MOBILE ═══════ */
            /* NOTE: Income split and savings comparison styles defined earlier in this media query */

            /* Chart.js projections - Mobile optimized */
            .projection-chart-card {
                padding: var(--space-md);
            }

            .chart-container {
                height: 200px;
            }

            .chart-container-combined {
                height: 220px;
            }

            .chart-container-combined canvas {
                max-height: 220px !important;
            }


            /* ═══════ SHARE SPLIT MODAL - PREVENT CARD OVERFLOW ═══════ */
            .share-split-modal {
                padding: 20px;
            }

            .share-split-preview {
                padding: var(--space-md);
                gap: var(--space-sm);
            }

            .share-split-preview-card {
                padding: var(--space-sm) var(--space-md);
            }

            .share-split-preview-amount-input input {
                width: 130px;
                padding: 8px 10px;
                font-size: var(--text-body);
            }

            /* ═══════ ALL DASH CARDS - CONSISTENT TITLES & SUBTITLES ═══════ */
            .dash-card {
                overflow-x: hidden;
                max-width: 100%;
            }

            .dash-card-header {
                flex-wrap: wrap;
                gap: var(--space-sm);
                max-width: 100%;
            }

            .dash-card-icon,
            .dash-section-icon {
                width: 36px;
                height: 36px;
                font-size: 18px;
            }

            .dash-card-title,
            .dash-section-title {
                font-size: clamp(13px, 3.2vw, 15px);
            }

            .dash-card-value,
            .dash-section-subtitle {
                font-size: clamp(11px, 2.6vw, 12px);
            }

            /* ═══════ SPLIT BY CATEGORY - FIX OVERFLOW ═══════ */
            .expand-controls {
                width: 100%;
                display: flex;
                justify-content: flex-start;
                gap: var(--space-xs);
                flex-wrap: wrap;
            }

            .expand-btn {
                font-size: clamp(10px, 2.8vw, 12px);
                padding: 3px 8px;
                white-space: nowrap;
            }

            .budget-export-label {
                display: none;
            }

            .budget-export-btn {
                padding: 6px 8px;
                min-width: 32px;
                min-height: 32px;
                justify-content: center;
            }

            .category-bars {
                overflow: hidden;
                max-width: 100%;
            }

            .category-bar-item {
                overflow: hidden;
                max-width: 100%;
                margin: 0 0 var(--space-md) 0;
                padding: var(--space-sm);
            }

            .category-bar-header {
                margin: 0;
                padding: var(--space-xs);
                flex-wrap: wrap;
                gap: var(--space-xs);
            }

            .category-bar-name {
                font-size: clamp(12px, 3.5vw, 14px);
                flex: 1;
                min-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .category-bar-amount {
                font-size: clamp(12px, 3.5vw, 14px);
                flex-shrink: 0;
            }

            .category-bar-track {
                max-width: 100%;
            }

            .type-badge {
                font-size: 8px;
                padding: 2px 6px;
                margin-left: 4px;
            }

            .category-bar-header .expand-icon {
                margin-left: 4px;
            }

            /* ═══════ MONEY FLOW - RESPONSIVE ═══════ */
            #money-flow-section {
                overflow: visible;
            }

            #money-flow-section .dash-card-header {
                flex-direction: column;
                align-items: stretch;
                gap: var(--space-sm);
                overflow: visible;
            }

            #money-flow-section .dash-card-header > div:first-child {
                min-width: 0;
            }

            .money-flow-tab {
                padding: 10px var(--space-sm);
                font-size: var(--text-caption);
            }

            /* ═══════ SAVINGS GOALS - FIX OVERFLOW ═══════ */
            .goals-card {
                overflow: hidden;
            }

            .goals-grid {
                display: grid;
                grid-template-columns: 1fr !important;
                gap: var(--space-md);
                overflow: hidden;
                max-width: 100%;
            }

            .goal-item {
                padding: var(--space-md);
                overflow: hidden;
                max-width: 100%;
                min-width: 0;
                box-sizing: border-box;
            }

            .goal-header {
                flex-wrap: wrap;
                gap: var(--space-sm);
            }

            .goal-header > div:first-child {
                min-width: 0;
                flex: 1;
            }

            .goal-icon {
                font-size: 24px;
                margin-bottom: 4px;
            }

            .goal-name {
                font-size: clamp(13px, 3.5vw, 16px);
                word-break: break-word;
                white-space: normal;
                line-height: 1.3;
            }

            .goal-target {
                font-size: clamp(11px, 3vw, 14px);
                white-space: normal;
                word-break: break-word;
            }

            .goal-percentage {
                font-size: clamp(16px, 4.5vw, 22px);
                flex-shrink: 0;
            }

            .goal-progress-track {
                height: 6px;
                margin-bottom: 10px;
            }

            .goal-stats {
                font-size: clamp(11px, 3vw, 13px);
                flex-wrap: wrap;
                gap: 4px;
            }

            .goal-eta {
                flex-wrap: wrap;
                font-size: clamp(10px, 2.8vw, 12px);
                gap: 4px;
                margin-top: 10px;
                padding-top: 10px;
            }

            .goal-eta > span:last-child {
                margin-left: 0 !important;
                width: 100%;
                margin-top: 2px;
            }

            .goal-add-btn {
                min-height: 100px;
                padding: var(--space-md);
            }

            .goal-add-icon {
                font-size: 24px;
            }

            .goal-add-text {
                font-size: clamp(12px, 3vw, 14px);
            }

            /* ═══════ PROJECTIONS - TABLET ═══════ */
            .projection-controls .btn {
                white-space: nowrap;
                font-size: clamp(11px, 3vw, 14px);
                padding: var(--space-sm) var(--space-md);
                min-width: max-content;
            }

            .horizon-selector {
                gap: 6px;
            }

            .horizon-pill,
            .fire-line-pill {
                padding: 6px 14px;
                font-size: clamp(11px, 3vw, 13px);
            }

            .projection-glass-cards {
                grid-template-columns: repeat(3, 1fr);
                gap: var(--space-sm);
            }

            .proj-glass-card {
                padding: var(--space-md);
            }

            .proj-glass-value {
                font-size: var(--text-lg);
            }

            .chart-container-combined {
                height: 240px;
            }

            .chart-container-combined canvas {
                max-height: 240px !important;
            }
        }

        /* Mobile Portrait (iPhone Pro Max and smaller) */
        @media (max-width: 480px) {
            .metrics-section {
                padding: var(--space-sm);
                border-radius: var(--radius-md);
            }

            /* Compact pill metrics — tighter at 480px */
            .metrics-row {
                gap: 6px;
            }

            .metric-card {
                padding: 8px 10px;
                gap: 6px;
            }

            .metric-icon {
                width: 24px;
                height: 24px;
                font-size: 0.75rem;
            }

            .metric-value {
                font-size: clamp(12px, 3.2vw, 14px) !important;
            }

            .metric-label {
                font-size: 9px;
            }

            /* Buffer cards - tighter but still readable */
            .buffer-cards {
                gap: var(--space-xs);
            }

            .buffer-card {
                padding: var(--space-sm);
            }

            .buffer-avatar {
                width: 32px;
                height: 32px;
                font-size: 12px;
            }

            .buffer-item-value {
                font-size: var(--text-small);
            }

            /* Savings rate - maintain side by side */
            .savings-person {
                padding: 12px 6px;
            }

            .savings-person-name {
                font-size: 11px;
            }

            .savings-rate-ring {
                width: 64px;
                height: 64px;
            }

            .savings-rate-ring svg {
                width: 64px;
                height: 64px;
            }

            .savings-rate-ring circle {
                stroke-width: 6;
            }

            .savings-rate-ring circle.bg,
            .savings-rate-ring circle.fill {
                r: 26;
            }

            .savings-rate-ring circle.fill {
                stroke-dasharray: 163.36; /* 2 * PI * 26 */
            }

            .savings-rate-value {
                font-size: clamp(14px, 4vw, 18px);
            }

            .savings-amounts {
                font-size: clamp(9px, 2.5vw, 11px);
            }

            .savings-amounts strong {
                font-size: clamp(10px, 3vw, 13px);
            }

            /* Single column grids for small screens */
            .future-grid { grid-template-columns: 1fr; }
            .budget-summary-card { grid-template-columns: 1fr; gap: var(--space-md); }
            .search-bar-container { margin-top: var(--space-sm); }
            .search-box.full-width .search-input {
                padding: 8px 36px 8px 36px;
            }
            .dash-card { padding: var(--space-md); border-radius: var(--radius-md); }
            /* Charts - smaller but still readable */
            .income-donut {
                width: 100px;
                height: 100px;
            }

            .income-donut circle {
                stroke-width: 14;
            }

            .income-donut-total {
                font-size: clamp(12px, 3.5vw, 16px);
            }

            .chart-container {
                height: 160px;
            }

            /* ═══════ SHARE SPLIT MODAL - COMPACT FOR SMALL SCREENS ═══════ */
            .share-split-modal {
                padding: 16px;
            }

            .share-split-preview {
                padding: var(--space-sm);
                gap: var(--space-xs);
            }

            .share-split-preview-card {
                padding: var(--space-xs) var(--space-sm);
            }

            .share-split-preview-name {
                font-size: clamp(11px, 3vw, 13px);
            }

            .share-split-preview-amount-input .currency-prefix {
                font-size: clamp(11px, 3vw, 13px);
            }

            .share-split-preview-amount-input input {
                width: 110px;
                padding: 6px 8px;
                font-size: clamp(12px, 3.2vw, 14px);
            }

            /* Future items - single column, readable */
            .future-item {
                padding: 12px;
            }

            .future-amount {
                font-size: clamp(12px, 3.5vw, 15px);
            }

            /* ═══════ SAVINGS GOALS - TIGHTER ON SMALL MOBILE ═══════ */
            .goal-item {
                padding: var(--space-sm);
            }

            .goal-icon {
                font-size: 20px;
                margin-bottom: 2px;
            }

            .goal-name {
                font-size: clamp(12px, 3.2vw, 14px);
            }

            .goal-target {
                font-size: clamp(10px, 2.8vw, 12px);
            }

            .goal-percentage {
                font-size: clamp(14px, 4vw, 18px);
            }

            .goal-stats {
                font-size: clamp(10px, 2.8vw, 12px);
            }

            .goal-eta {
                font-size: clamp(9px, 2.5vw, 11px);
            }

            .goal-add-btn {
                min-height: 80px;
            }

            /* ═══════ ALL DASH CARDS - TIGHTER TITLES & SUBTITLES ═══════ */
            .dash-card-icon,
            .dash-section-icon {
                width: 32px;
                height: 32px;
                font-size: 16px;
            }

            .dash-card-title,
            .dash-section-title {
                font-size: clamp(12px, 3vw, 14px);
            }

            .dash-card-value,
            .dash-section-subtitle {
                font-size: clamp(10px, 2.4vw, 11px);
            }
        }

        /* Small Mobile (iPhone SE, older phones - 375px and below) */
        @media (max-width: 375px) {
            /* ═══════ SHARE SPLIT MODAL - ULTRA COMPACT ═══════ */
            .share-split-modal {
                padding: 14px;
            }

            .share-split-preview {
                padding: var(--space-sm);
                gap: var(--space-sm);
            }

            .share-split-preview-card {
                flex-wrap: wrap;
                gap: var(--space-xs);
            }

            .share-split-preview-amount-input input {
                width: 100px;
            }

            /* Buffer cards stack vertically on tiny screens */
            .buffer-cards {
                grid-template-columns: 1fr;
            }

            /* Metric cards — ultra-compact pills, flex-wrap handles row breaks */
            .metrics-row {
                gap: 4px;
            }

            .metric-card {
                padding: 6px 8px;
                gap: 5px;
                border-radius: var(--radius-sm);
            }

            .metric-icon {
                width: 22px;
                height: 22px;
                font-size: 0.65rem;
                border-radius: var(--radius-sm);
            }

            .metric-value {
                font-size: clamp(11px, 3vw, 13px) !important;
            }

            .metric-label {
                font-size: 8px;
            }

            /* ═══════ COMPACT CHARTS FOR SMALLEST SCREENS ═══════ */
            .income-donut {
                width: 80px;
                height: 80px;
            }

            .income-donut circle {
                stroke-width: 12;
            }

            .income-donut-center {
                display: none;
            }

            .income-person {
                padding: var(--space-sm) 0;
                gap: var(--space-sm);
            }

            .income-amount {
                font-size: clamp(12px, 3.5vw, 15px);
            }

            /* Savings - single column compact cards */
            .savings-comparison {
                grid-template-columns: 1fr;
                gap: 8px;
            }

            .savings-person {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 12px;
                text-align: left;
                padding: 12px;
                background: var(--bg-secondary);
                border-radius: var(--radius-md);
            }

            .savings-person-name {
                font-size: 12px;
                margin-bottom: 0;
                order: 1;
            }

            .savings-rate-ring {
                width: 48px;
                height: 48px;
                margin: 0;
                flex-shrink: 0;
                order: 0;
            }

            .savings-rate-ring svg {
                width: 48px;
                height: 48px;
            }

            .savings-rate-ring circle {
                stroke-width: 5;
            }

            .savings-rate-ring circle.bg,
            .savings-rate-ring circle.fill {
                r: 20;
            }

            .savings-rate-ring circle.fill {
                stroke-dasharray: 125.66; /* 2 * PI * 20 */
            }

            .savings-rate-value {
                font-size: clamp(12px, 3.5vw, 15px);
            }

            .savings-amounts {
                font-size: clamp(9px, 2.5vw, 11px);
                margin-top: 2px;
            }

            .savings-amounts strong {
                font-size: clamp(10px, 3vw, 13px);
            }

            .chart-container {
                height: 140px;
            }

            /* ═══════ ALL DASH CARDS - COMPACT TITLES & SUBTITLES ═══════ */
            .dash-card-icon,
            .dash-section-icon {
                width: 28px;
                height: 28px;
                font-size: 14px;
            }

            .dash-card-title,
            .dash-section-title {
                font-size: clamp(11px, 2.8vw, 13px);
            }

            .dash-card-value,
            .dash-section-subtitle {
                font-size: clamp(10px, 2.2vw, 11px);
            }

            /* ═══════ SAVINGS GOALS - COMPACT FOR TINY SCREENS ═══════ */
            .goal-item {
                padding: 10px;
            }

            .goal-header {
                margin-bottom: 10px;
            }

            .goal-icon {
                font-size: 18px;
            }

            .goal-name {
                font-size: clamp(11px, 3vw, 13px);
            }

            .goal-target {
                font-size: clamp(9px, 2.5vw, 11px);
            }

            .goal-percentage {
                font-size: clamp(13px, 3.5vw, 16px);
            }

            .goal-stats {
                font-size: clamp(9px, 2.5vw, 11px);
            }

            .goal-eta {
                font-size: clamp(9px, 2.4vw, 10px);
            }

            .goal-add-btn {
                min-height: 64px;
                gap: 4px;
            }

            .goal-add-icon {
                font-size: 20px;
            }

            .goal-add-text {
                font-size: 11px;
            }

            /* Removed: duplicate metric-value override - using clamp() from earlier */
        }

        /* Animations */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }


        @keyframes fadeOut {
            from { opacity: 1; }
            to { opacity: 0; }
        }

        .animate-in { animation: fadeInUp 0.6s ease forwards; }

        /* Staggered row animation */
        @keyframes rowSlideIn {
            from { opacity: 0; transform: translateX(-10px); }
            to { opacity: 1; transform: translateX(0); }
        }

        .budget-row {
            animation: rowSlideIn 0.3s ease forwards;
        }

        /* Stagger delay for rows */
        .budget-row:nth-child(1) { animation-delay: 0s; }
        .budget-row:nth-child(2) { animation-delay: 0.02s; }
        .budget-row:nth-child(3) { animation-delay: 0.04s; }
        .budget-row:nth-child(4) { animation-delay: 0.06s; }
        .budget-row:nth-child(5) { animation-delay: 0.08s; }
        .budget-row:nth-child(6) { animation-delay: 0.1s; }
        .budget-row:nth-child(n+7) { animation-delay: 0.12s; }

        /* Hero value subtle pulse on update */
        @keyframes heroPulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.02); }
            100% { transform: scale(1); }
        }

        .summary-hero-value.updating {
            animation: heroPulse 0.3s ease;
        }

        /* Smooth split bar transition */
        .split-bar-segment {
            transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Compact View Mode — Budget Editor (kept from original for editor pages) */
        .compact-view .budget-row { padding: 8px 12px; }
        .compact-view .budget-item-name { font-size: var(--text-small); }
        .compact-view .budget-input { padding: 4px 8px; font-size: var(--text-small); }

        /* ═══════════════════════════════════════════════════════════════
           MULTI-PERSON COMPACT LAYOUT — RESPONSIVE
           ═══════════════════════════════════════════════════════════════ */

        /* ═══════ TABLET (768px - 1023px) ═══════ */
        @media (max-width: 1023px) and (min-width: 481px) {
            /* Others strip: adaptive on tablet, wraps naturally based on count */
            .others-strip { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
            .others-strip[data-count="1"] { grid-template-columns: 1fr; max-width: 400px; }

            .your-buffer-card {
                padding: 18px 20px;
            }

            .your-card-name {
                font-size: 16px;
            }

            .your-stat-value {
                font-size: 15px;
            }

            /* Savings: stack vertically, your ring inline */
            .proposed-savings {
                flex-direction: column;
                gap: 16px;
            }

            .your-savings {
                width: 100%;
                display: flex;
                align-items: center;
                gap: 20px;
                text-align: left;
            }

            .your-savings .savings-rate-ring {
                width: 100px !important;
                height: 100px !important;
                flex-shrink: 0;
                margin: 0 !important;
            }

            .your-savings .savings-rate-value {
                font-size: 20px !important;
            }

            /* Others savings: adaptive grid on tablet, wraps based on count */
            .others-savings-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
            .others-savings-col[data-count="1"] { grid-template-columns: 1fr; }

            /* Share: stack vertically */
            .proposed-share {
                flex-direction: column;
                gap: 12px;
            }

            .others-share-stack {
                grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            }

            /* Split bar full width */
            .your-split-card {
                padding: 20px;
            }

            /* --- Compact View — Tablet Overrides --- */
            .compact-view .metrics-row {
                gap: var(--space-xs);
            }
            .compact-view .metric-card {
                padding: 8px 10px;
                gap: 8px;
            }
            .compact-view .metric-icon {
                width: 26px;
                height: 26px;
                font-size: 0.8rem;
                margin-bottom: 0;
            }
            .compact-view .metric-value {
                font-size: clamp(12px, 2vw, 15px);
            }
            .compact-view .metric-label {
                font-size: 9px;
            }
            .compact-view .buffer-card {
                padding: var(--space-xs) var(--space-sm);
            }
            .compact-view .savings-rate-ring,
            .compact-view .savings-rate-ring svg {
                width: 64px;
                height: 64px;
            }
            .compact-view .savings-rate-value {
                font-size: var(--text-small);
            }
            .compact-view .dash-card {
                padding: var(--space-sm);
            }

            /* Soft focus: stack split bars on tablet (full width across however many cols) */
            .dash-card.span-5,
            .dash-card.span-7 {
                grid-column: 1 / -1;
            }
        }

        /* ═══════ MOBILE (≤480px) ═══════ */
        @media (max-width: 480px) {
            /* Others strip: single column on mobile */
            .others-strip {
                grid-template-columns: 1fr;
            }

            /* Your buffer card: compact mobile */
            .your-buffer-card {
                padding: 14px 16px;
                border-radius: var(--radius-lg);
            }

            .your-card-header {
                gap: 10px;
                margin-bottom: 14px;
            }

            .your-card-header .buffer-avatar {
                width: 40px !important;
                height: 40px !important;
                font-size: 14px !important;
            }

            .your-card-name {
                font-size: 15px;
            }

            .your-card-income {
                font-size: 11px;
            }

            .your-stats-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 6px;
            }

            .your-stat {
                padding: 10px 6px;
            }

            .your-stat-value {
                font-size: 14px;
            }

            .your-stat-label {
                font-size: 9px;
            }

            .other-card {
                padding: 10px 12px;
                gap: 8px;
            }

            .other-card .buffer-avatar {
                width: 28px !important;
                height: 28px !important;
                font-size: 10px !important;
            }

            .other-card-name {
                font-size: 11px;
            }

            .other-card-sub {
                font-size: 9px;
            }

            .other-card-buffer-value {
                font-size: 12px;
            }

            /* Savings: stack, your ring compact inline */
            .proposed-savings {
                flex-direction: column;
                gap: 10px;
            }

            .your-savings {
                width: 100%;
                display: flex;
                align-items: center;
                gap: 14px;
                text-align: left;
                padding: 14px 16px;
            }

            .your-savings .savings-rate-ring {
                width: 64px !important;
                height: 64px !important;
                flex-shrink: 0;
                margin: 0 !important;
            }

            .your-savings .savings-rate-value {
                font-size: 16px !important;
            }

            .your-savings-name {
                font-size: 13px;
                margin-bottom: 0;
            }

            .your-savings-amount {
                font-size: 11px;
            }

            .others-savings-col {
                gap: 6px;
            }

            .other-savings-row {
                padding: 8px 12px;
                gap: 10px;
            }

            .mini-ring {
                width: 36px;
                height: 36px;
            }

            .mini-ring-value {
                font-size: 9px;
            }

            .other-savings-name {
                font-size: 11px;
            }

            .other-savings-sub {
                font-size: 9px;
            }

            /* Split bar: compact mobile */
            .your-split-card {
                padding: 16px;
                border-radius: var(--radius-lg);
            }

            .your-split-card .split-bar,
            .your-split-card .shared-bar {
                height: 24px;
            }

            .split-legend {
                gap: 10px;
                font-size: 10px;
            }

            /* Share: stack vertically */
            .proposed-share {
                flex-direction: column;
                gap: 10px;
            }

            .your-share-col {
                padding: 14px;
            }

            .others-share-stack {
                grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
                gap: 8px;
            }

            .other-share-col {
                padding: 10px;
            }

            .other-share-col .share-name {
                font-size: 12px;
            }

            .other-share-col .share-stat {
                font-size: 9px;
            }

            /* --- Compact View — Mobile Overrides --- */
            .compact-view .dashboard-hero {
                padding: var(--space-xs) var(--space-sm);
            }
            .compact-view .dashboard-title {
                font-size: var(--text-body);
            }
            .compact-view .metrics-section {
                padding: var(--space-xs);
            }
            .compact-view .metric-card {
                padding: 6px 8px;
                gap: 6px;
            }
            .compact-view .metric-icon {
                width: 22px;
                height: 22px;
                font-size: 0.7rem;
                margin-bottom: 0;
            }
            .compact-view .metric-value {
                font-size: clamp(11px, 3vw, 14px);
            }
            .compact-view .metric-label {
                font-size: 9px;
            }
            .compact-view .buffer-grid {
                gap: 4px;
            }
            .compact-view .savings-rate-ring,
            .compact-view .savings-rate-ring svg {
                width: 56px;
                height: 56px;
            }
            .compact-view .savings-rate-value {
                font-size: var(--text-micro);
            }
            .compact-view .dash-card {
                padding: var(--space-sm);
            }
            .compact-view .dash-card-icon {
                width: 24px;
                height: 24px;
                font-size: 0.8rem;
            }

            /* Soft focus: stack split bars on mobile (full width across however many cols) */
            .dash-card.span-5,
            .dash-card.span-7 {
                grid-column: 1 / -1;
            }

            /* Subscription audit: narrower amount columns on mobile */
            .sub-audit-amt {
                width: 64px;
                font-size: 10px;
            }
        }

        /* ═══════ EXTRA SMALL MOBILE (≤375px) ═══════ */
        @media (max-width: 375px) {
            /* Others strip: already single column from 480px rule */

            .others-share-stack {
                grid-template-columns: 1fr;
            }

            /* --- Compact View — Extra Small Overrides --- */
            .compact-view .metric-icon {
                width: 18px;
                height: 18px;
                font-size: 0.55rem;
            }
            .compact-view .buffer-avatar {
                width: 24px;
                height: 24px;
                font-size: 10px;
            }
            .compact-view .buffer-card {
                padding: var(--space-xs);
            }
            .compact-view .buffer-item {
                padding: 4px 2px;
            }
            .compact-view .buffer-item-value {
                font-size: 10px;
            }
            .compact-view .savings-rate-ring,
            .compact-view .savings-rate-ring svg {
                width: 48px;
                height: 48px;
            }
        }

/* ═══════════════════════════════════════════════════════════════
   MULTI-PERSON (3-5 people) — Responsive layout adjustments
   ═══════════════════════════════════════════════════════════════ */

/* Transfer direction picker: smaller grid cells for many options */
@media (max-width: 480px) {
    .transfer-direction-picker {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: var(--space-sm);
        max-height: 200px;
    }

    .transfer-direction-option {
        padding: var(--space-sm) var(--space-md);
        font-size: var(--text-caption);
        min-height: 44px;
    }
}

/* Budget row person amounts: ensure wrap and compact spacing for 3+ */
@media (max-width: 480px) {
    .budget-row.collapsed .budget-row-persons {
        gap: 4px 8px;
    }

    .budget-row.collapsed .budget-row-persons .person-amount {
        font-size: 11px;
    }
}

/* Budget row expanded inputs: wrap to 2 columns for 3+ people on mobile */
@media (max-width: 480px) {
    .budget-row-controls {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
        gap: var(--space-sm);
    }
}


/* ═══════════════════════════════════════════════════════════════
   CONTAINER QUERIES — Component-intrinsic responsive layout
   Cards adapt based on available container width rather than
   the viewport, enabling correct layout in sidebars, modals,
   and split views.
   ═══════════════════════════════════════════════════════════════ */

/* Metric cards: switch to compact horizontal pills when container is narrow */
@container metrics (max-width: 700px) {
    .metric-card {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        text-align: left;
    }

    .metric-card:hover {
        transform: none;
    }

    .metric-icon {
        width: 32px;
        height: 32px;
        font-size: 1rem;
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .metric-value {
        font-size: clamp(14px, 2cqi, 17px);
        line-height: 1.2;
    }

    .metric-label {
        font-size: 10px;
        margin-top: 1px;
    }

    .metric-sub {
        display: none;
    }
}

/* Ultra-compact metric cards for very narrow containers */
@container metrics (max-width: 480px) {
    .metric-card {
        padding: 10px 12px;
        border-radius: var(--radius-md);
        gap: 8px;
    }

    .metric-icon {
        width: 28px;
        height: 28px;
        font-size: 0.875rem;
    }

    .metric-value {
        font-size: clamp(13px, 3.5cqi, 16px);
        font-weight: var(--font-bold);
        white-space: nowrap;
    }
}

/* Buffer cards: adapt grid columns based on container width */
@container buffers (max-width: 700px) {
    .buffer-card {
        padding: var(--space-md);
    }

    .buffer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-xs);
    }
}

@container buffers (max-width: 480px) {
    .buffer-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }

    .buffer-avatar {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .buffer-name {
        font-size: var(--text-small);
    }

    .buffer-income {
        font-size: 10px;
    }
}

/* Calendar month cards: adapt from 4-column to fewer as container narrows */
@container calendar-grid (max-width: 900px) {
    .calendar-months-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@container calendar-grid (max-width: 600px) {
    .calendar-months-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .month-card {
        padding: var(--space-md);
    }
}

@container calendar-grid (max-width: 380px) {
    .calendar-months-grid {
        grid-template-columns: 1fr;
    }
}