/* ==================== APPLE HIG DESIGN SYSTEM ==================== */
/* SF Pro Display + New York · Liquid Glass · Squircle Corners */

/* ── @font-face: SF Pro Display ── */
@font-face { font-family: 'SF Pro Display'; src: url('../fonts/SF-Pro-Display-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Display'; src: url('../fonts/SF-Pro-Display-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Display'; src: url('../fonts/SF-Pro-Display-Semibold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Display'; src: url('../fonts/SF-Pro-Display-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }

/* ── @font-face: New York — 3 optical sizes ── */
@font-face { font-family: 'New York ExtraLarge'; src: url('../fonts/NewYorkExtraLarge-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'New York ExtraLarge'; src: url('../fonts/NewYorkExtraLarge-Semibold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'New York ExtraLarge'; src: url('../fonts/NewYorkExtraLarge-RegularItalic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'New York Large'; src: url('../fonts/NewYorkLarge-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'New York Large'; src: url('../fonts/NewYorkLarge-Semibold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'New York Small'; src: url('../fonts/NewYorkSmall-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'New York Small'; src: url('../fonts/NewYorkSmall-RegularItalic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; }

:root {
    /* Base Colors — Apple system grouped background */
    --bg-base: #F2F2F7;
    --bg-elevated: rgba(255, 255, 255, 0.82);

    /* Surface Elevation — translucent for glass-over-wallpaper */
    --surface-0: #F2F2F7;
    --surface-1: rgba(255, 255, 255, 0.72);
    --surface-2: rgba(255,255,255,0.55);
    --surface-3: rgba(255,255,255,0.30);

    /* Category accent system */
    --cat-money: #34C759;
    --cat-money-soft: rgba(52, 199, 89, 0.10);
    --cat-money-mid: rgba(52, 199, 89, 0.18);
    --cat-planning: #007AFF;
    --cat-planning-soft: rgba(0, 122, 255, 0.10);
    --cat-planning-mid: rgba(0, 122, 255, 0.18);
    --cat-household: #FF9500;
    --cat-household-soft: rgba(255, 149, 0, 0.10);
    --cat-household-mid: rgba(255, 149, 0, 0.18);
    --cat-hustle: #AF52DE;
    --cat-hustle-soft: rgba(175, 82, 222, 0.10);
    --cat-hustle-mid: rgba(175, 82, 222, 0.18);

    /* Liquid Glass Materials */
    --glass-bg: rgba(255, 255, 255, 0.52);
    --glass-bg-thick: rgba(255, 255, 255, 0.82);
    --glass-bg-thin: rgba(255, 255, 255, 0.30);
    --glass-border: rgba(255, 255, 255, 0.48);
    --glass-border-bright: rgba(255, 255, 255, 0.72);
    --glass-shine: linear-gradient(160deg, rgba(255,255,255,0.12) 0%, transparent 50%);
    --glass-blur: 40px;
    --glass-saturate: 180%;

    /* Receipt Design Language */
    --receipt-bg: #FEFCF9;
    --receipt-bg-alt: #FBF9F5;
    --receipt-ink: #1C1C1E;
    --receipt-ink-light: #636366;
    --receipt-ink-faint: #AEAEB2;
    --receipt-divider: #D1D1D6;
    --receipt-stamp-border: #AEAEB2;
    --receipt-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.08);

    /* Text Hierarchy — Apple HIG */
    --text-primary: #1C1C1E;
    --text-secondary: #636366;
    --text-tertiary: #AEAEB2;
    --text-quaternary: #C7C7CC;

    /* Apple HIG System Colors */
    --apple-blue: #007AFF;
    --apple-green: #34C759;
    --apple-orange: #FF9500;
    --apple-red: #FF3B30;
    --apple-purple: #AF52DE;
    --apple-pink: #FF2D55;
    --apple-teal: #5AC8FA;
    --apple-indigo: #5856D6;
    --apple-mint: #00C7BE;
    --apple-yellow: #FFCC00;

    /* System color aliases (backwards compat) */
    --system-blue: var(--apple-blue);
    --system-blue-light: rgba(0, 122, 255, 0.10);
    --system-green: var(--apple-green);
    --system-green-light: rgba(52, 199, 89, 0.10);
    --system-red: var(--apple-red);
    --system-red-light: rgba(255, 59, 48, 0.10);
    --system-orange: var(--apple-orange);
    --system-orange-light: rgba(255, 149, 0, 0.10);
    --system-yellow: var(--apple-yellow);
    --system-purple: var(--apple-purple);
    --system-purple-light: rgba(175, 82, 222, 0.10);
    --system-teal: var(--apple-teal);
    --system-indigo: var(--apple-indigo);

    /* Separators */
    --separator: rgba(0, 0, 0, 0.04);
    --separator-opaque: #dcdce0;

    /* Typography */
    --font-sf: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-ny-xl: 'New York ExtraLarge', 'Georgia', serif;
    --font-ny-lg: 'New York Large', 'Georgia', serif;
    --font-ny-sm: 'New York Small', 'Georgia', serif;
    --font-notes: 'Kalam', cursive;
    --font-mono: 'SF Mono', ui-monospace, monospace;
    /* Legacy aliases — point to new tokens */
    --font-system: var(--font-sf);
    --font-display: var(--font-sf);
    --font-editorial: var(--font-ny-xl);
    --font-body: var(--font-sf);

    /* Accent aliases */
    --accent-blue: var(--apple-blue);
    --accent-green: var(--apple-green);
    --accent-red: var(--apple-red);
    --border-medium: rgba(0, 0, 0, 0.1);
    --border-light: rgba(0, 0, 0, 0.05);
    --border-hairline: rgba(0, 0, 0, 0.06);
    --border-primary: rgba(0, 0, 0, 0.08);
    --border-subtle: rgba(0, 0, 0, 0.04);

    /* Background aliases */
    --bg-primary: var(--bg-base);
    --bg-secondary: rgba(0, 0, 0, 0.03);
    --bg-tertiary: rgba(0, 0, 0, 0.04);
    --card-bg: var(--surface-1);
    --accent-hover: #0066D6;

    /* SF Mono letter-spacing scale (comma-safe) */
    --mono-ls-hero: -0.02em;   /* 36px+ */
    --mono-ls-large: -0.01em;  /* 22-35px */
    --mono-ls-medium: -0.005em; /* 14-21px */
    --mono-ls-small: 0;         /* ≤13px */

    /* Spacing — 4px base grid */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-2xl: 24px;
    --space-3xl: 32px;
    --space-4xl: 40px;

    /* Radii — Apple squircle scale */
    --r-xl: 24px;
    --r-lg: 20px;
    --r-md: 16px;
    --r-sm: 12px;
    --r-xs: 8px;
    /* Legacy aliases */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* Shadows — every level has inset top-light highlight for glass realism */
    --shadow-sm:
        0 0.5px 0 rgba(255,255,255,0.45) inset,
        0 1px 3px rgba(0,0,0,0.03),
        0 4px 12px rgba(0,0,0,0.04);
    --shadow-md:
        0 0.5px 0 rgba(255,255,255,0.45) inset,
        0 1px 3px rgba(0,0,0,0.03),
        0 8px 32px rgba(0,0,0,0.06);
    --shadow-lg:
        0 0.5px 0 rgba(255,255,255,0.50) inset,
        0 2px 6px rgba(0,0,0,0.04),
        0 16px 48px rgba(0,0,0,0.10);
    --shadow-xl:
        0 0.5px 0 rgba(255,255,255,0.60) inset,
        0 4px 12px rgba(0,0,0,0.06),
        0 24px 64px rgba(0,0,0,0.14);
    --shadow-glass:
        0 0.5px 0 rgba(255,255,255,0.45) inset,
        0 1px 3px rgba(0,0,0,0.03),
        0 8px 32px rgba(0,0,0,0.06);
    --shadow-float:
        0 0.5px 0 rgba(255,255,255,0.50) inset,
        0 2px 6px rgba(0,0,0,0.04),
        0 16px 48px rgba(0,0,0,0.10);
    --shadow-hover:
        0 0.5px 0 rgba(255,255,255,0.55) inset,
        0 4px 12px rgba(0,0,0,0.06),
        0 24px 64px rgba(0,0,0,0.12);
    /* Semantic aliases */
    --shadow-rest: var(--shadow-sm);
    --shadow-elevated: var(--shadow-lg);
    --shadow-popover:
        0 0.5px 0 rgba(255,255,255,0.50) inset,
        0 12px 40px -8px rgba(0,0,0,0.15),
        0 4px 12px rgba(0,0,0,0.06);

    /* Motion — Apple spring physics */
    --spring: cubic-bezier(0.32, 1.28, 0.54, 1);
    --spring-tight: cubic-bezier(0.22, 1, 0.36, 1);
    --spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Legacy aliases */
    --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-spring: var(--spring);
    --ease-bounce: var(--spring-bounce);
    --ease-smooth: cubic-bezier(0.4, 0, 0, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 120ms;
    --duration-normal: 220ms;
    --duration-slow: 380ms;
    --duration-entrance: 500ms;

    /* Layout */
    --sidebar-width: 260px;
    --sidebar-collapsed: 76px;
}


/* ==================== RESET & BASE ==================== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    corner-shape: squircle;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

body {
    font-family: var(--font-sf);
    background: var(--bg-base);
    color: var(--text-primary);
    line-height: 1.47059;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    overflow-x: clip;
}


/* ── Page Load Stagger ── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.anim { animation: fadeUp 0.7s var(--spring-tight) both; }
.ad1 { animation-delay: 0.06s; }
.ad2 { animation-delay: 0.12s; }
.ad3 { animation-delay: 0.18s; }
.ad4 { animation-delay: 0.24s; }
.ad5 { animation-delay: 0.30s; }
.ad6 { animation-delay: 0.36s; }

/* ==================== MATERIAL SYMBOLS BASE ==================== */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'liga';
    vertical-align: middle;
    /* Default: outlined, regular weight */
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

/* Filled variant — use class="material-symbols-outlined filled" */
.material-symbols-outlined.filled {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

/* Spinner animation */
.material-symbols-outlined.spin {
    animation: ms-spin 1s linear infinite;
}
@keyframes ms-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Context sizing — icons inherit size from parent where appropriate */
h1 .material-symbols-outlined { font-size: 1em; }
h2 .material-symbols-outlined { font-size: 1em; }
h3 .material-symbols-outlined { font-size: 1em; }
button .material-symbols-outlined { font-size: inherit; }

/* Tiny icons in labels, meta text */
.material-symbols-outlined.sm { font-size: 16px; }
.material-symbols-outlined.xs { font-size: 14px; }
.material-symbols-outlined.lg { font-size: 24px; }
.material-symbols-outlined.xl { font-size: 32px; }

/* Safety net: any icon inside a fixed-size container must not overflow.
   Prevents Material Symbols ligature-failure text from bleeding across layout. */
[class*="-icon"] > .material-symbols-outlined,
[class*="_icon"] > .material-symbols-outlined {
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
}

/* ==================== AMBIENT BACKGROUND ==================== */
.aurora-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(168deg,
        #F2F2F7 0%,
        #F4F4F9 35%,
        #F5F5FA 65%,
        #F2F2F7 100%);
    overflow: hidden;
}

/* Atmospheric haze orbs — cool system-color tints */
.aurora-bg::before,
.aurora-bg::after,
.aurora-bg .blob-1,
.aurora-bg .blob-2,
.aurora-bg .blob-3 {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(180px);
    opacity: 0.18;
    animation: float 50s ease-in-out infinite;
    will-change: transform;
}

.aurora-bg::before {
    width: 900px;
    height: 900px;
    background: radial-gradient(circle, rgba(0, 122, 255, 0.08) 0%, transparent 70%);
    top: -25%;
    right: -12%;
}

.aurora-bg::after {
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(88, 86, 214, 0.06) 0%, transparent 70%);
    bottom: -18%;
    left: -12%;
    animation-delay: -12s;
}

.aurora-bg .blob-1 {
    width: 1000px;
    height: 1000px;
    background: radial-gradient(circle, rgba(52, 199, 89, 0.05) 0%, transparent 70%);
    top: 25%;
    left: 15%;
    animation-delay: -20s;
}

.aurora-bg .blob-2 {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(90, 200, 250, 0.05) 0%, transparent 70%);
    top: 55%;
    right: 12%;
    animation-delay: -6s;
}

.aurora-bg .blob-3 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(175, 82, 222, 0.04) 0%, transparent 70%);
    bottom: 15%;
    left: 30%;
    animation-delay: -15s;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(25px, -20px) scale(1.03); }
    50% { transform: translate(-18px, 12px) scale(0.97); }
    75% { transform: translate(12px, 18px) scale(1.02); }
}

/* ==================== GRID LAYOUTS ==================== */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
}

.grid-2-1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-xl);
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

/* ==================== UTILITIES ==================== */
.text-right { text-align: right; }
.text-center { text-align: center; }

.empty-state {
    text-align: center;
    padding: var(--space-4xl) var(--space-xl);
    color: var(--text-tertiary);
}

.empty-state i,
.empty-state .material-symbols-outlined {
    font-size: 44px;
    margin-bottom: var(--space-md);
    color: var(--text-quaternary);
    opacity: 0.5;
}

/* ==================== CONFETTI ==================== */
@keyframes confetti-fall {
    0% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
    100% { transform: translateY(-150px) rotate(360deg) scale(0); opacity: 0; }
}

.confetti-emoji {
    position: absolute;
    animation: confetti-fall 1.5s ease-out forwards;
    pointer-events: none;
}

/* ==================== CELEBRATION SYSTEM ==================== */

/* Tier 1 — Micro float */
@keyframes microFloat {
    0% { transform: translateY(0) scale(0.5) rotate(0deg); opacity: 1; }
    50% { transform: translateY(-30px) scale(1.2) rotate(15deg); opacity: 1; }
    100% { transform: translateY(-60px) scale(0.8) rotate(-5deg); opacity: 0; }
}

.celebrate-micro {
    position: fixed;
    pointer-events: none;
    z-index: 10001;
    font-size: 24px;
    animation: microFloat 0.7s ease-out forwards;
}

/* Tier 2 — Mini burst */
@keyframes miniBurst {
    0% {
        transform: translate(0, 0) scale(0.3) rotate(0deg);
        opacity: 1;
    }
    30% {
        transform: translate(calc(var(--dx) * 0.6), calc(var(--dy) * 0.4)) scale(1.1) rotate(calc(var(--rot) * 0.5));
        opacity: 1;
    }
    100% {
        transform: translate(var(--dx), var(--dy)) scale(0.4) rotate(var(--rot));
        opacity: 0;
    }
}

.celebrate-mini {
    position: fixed;
    pointer-events: none;
    z-index: 10001;
    font-size: 20px;
    animation: miniBurst 1s ease-out forwards;
}

/* Tier 3 — Screen glow flash */
@keyframes partyGlow {
    0% { opacity: 0; }
    30% { opacity: 1; }
    100% { opacity: 0; }
}

.celebrate-glow {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 9999;
    background: radial-gradient(circle at 50% 80%, rgba(52, 199, 89, 0.08), transparent 70%);
    animation: partyGlow 0.6s ease-out forwards;
}

/* Toast quip (fun secondary message) */
.toast-quip {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.6;
    margin-top: 2px;
    font-style: italic;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .celebrate-micro,
    .celebrate-mini,
    .celebrate-glow {
        animation: none !important;
        display: none !important;
    }
}

@keyframes confettiFall {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    100% { transform: translateY(85vh) rotate(720deg); opacity: 0; }
}

@keyframes fadeIn {
    0% { opacity: 0; transform: translateX(-50%) translateY(8px); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ==================== ENHANCED MICRO-ANIMATIONS ==================== */

/* Button press effect — satisfying squeeze */
.btn:active, .hud-adjust-btn:active {
    transform: scale(0.97);
    transition: transform 80ms var(--ease-spring);
}
button:active:not(.btn):not([class*="nav"]):not([class*="toggle"]):not([class*="calc"]) {
    transform: scale(0.97);
    transition: transform 80ms var(--ease-spring);
}

/* Stat cards staggered entrance */
.stat-card {
    animation: cardFloat 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0;
}

.stat-card:nth-child(1) { animation-delay: 0ms; }
.stat-card:nth-child(2) { animation-delay: 60ms; }
.stat-card:nth-child(3) { animation-delay: 120ms; }
.stat-card:nth-child(4) { animation-delay: 180ms; }

@keyframes cardFloat {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* HUD section hover glow */
.hud-section {
    transition: background 0.25s ease;
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
}

.hud-section:hover {
    background: rgba(0,122,255,0.03);
}

/* Hub item entrance */
.hub-item {
    animation: hubItemIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes hubItemIn {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Health dot pulse */
.health-dot.green {
    animation: healthPulse 2s ease-in-out infinite;
}

@keyframes healthPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(45, 164, 78, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(45, 164, 78, 0); }
}

/* Smooth scrollbar */
.main-content {
    scroll-behavior: smooth;
}

.main-content::-webkit-scrollbar {
    width: 6px;
}

.main-content::-webkit-scrollbar-track {
    background: transparent;
}

.main-content::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 3px;
}

.main-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.25);
}

/* Panel scrollbars — thin, subtle */
.dp-detail-panel::-webkit-scrollbar,
.acl-editor-panel::-webkit-scrollbar,
.pet-editor-panel::-webkit-scrollbar {
    width: 6px;
}
.dp-detail-panel::-webkit-scrollbar-track,
.acl-editor-panel::-webkit-scrollbar-track,
.pet-editor-panel::-webkit-scrollbar-track {
    background: transparent;
}
.dp-detail-panel::-webkit-scrollbar-thumb,
.acl-editor-panel::-webkit-scrollbar-thumb,
.pet-editor-panel::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.1);
    border-radius: 3px;
}
.dp-detail-panel::-webkit-scrollbar-thumb:hover,
.acl-editor-panel::-webkit-scrollbar-thumb:hover,
.pet-editor-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.2);
}

/* Table row hover */
.data-table tbody tr {
    transition: background 0.15s ease;
}

.data-table tbody tr:hover {
    background: rgba(0,122,255,0.03);
}

/* Calendar day hover */
.calendar-day {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.calendar-day:hover {
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Mini calendar day improved hover */
.mini-cal-day {
    transition: all 0.12s cubic-bezier(0.4, 0, 0.2, 1);
}

.mini-cal-day:hover {
    transform: scale(1.15);
    z-index: 1;
}

/* Gauge fill animation */
.gauge-fill {
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Value change flash */
@keyframes valueFlash {
    0% { background: rgba(0,122,255,0.15); }
    100% { background: transparent; }
}

/* ==================== HOMEPAGE ENTRY ANIMATIONS ==================== */
.home-hero {
    animation: heroFadeIn 0.6s ease-out;
}

.home-attention-section {
    animation: sectionFadeUp 0.5s ease-out 0.15s both;
}

.home-navigate-section {
    animation: sectionFadeUp 0.5s ease-out 0.25s both;
}

.home-life-section {
    animation: sectionFadeUp 0.5s ease-out 0.35s both;
}

@keyframes heroFadeIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.995); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes sectionFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==================== APP-WIDE VISUAL UPGRADES ==================== */

/* Background is handled by wallpaper system — body is transparent */
body {
    background: transparent !important;
}

/* Sidebar section labels */
.sidebar-section-label {
    color: var(--text-tertiary);
    font-weight: 640;
    letter-spacing: 0.06em;
}

/* Sidebar active states */
.sidebar-item.active {
    background: rgba(0,122,255,0.1);
}
.sidebar-item.active i {
    /* No box-shadow needed — tinted glyph, no tile */
}

/* Nav tile stagger animation on page load */
.home-nav-tile {
    animation: tileAppear 0.35s ease-out both;
}
.home-nav-tile:nth-child(1) { animation-delay: 0.3s; }
.home-nav-tile:nth-child(2) { animation-delay: 0.36s; }
.home-nav-tile:nth-child(3) { animation-delay: 0.42s; }
.home-nav-tile:nth-child(4) { animation-delay: 0.48s; }
.home-nav-tile:nth-child(5) { animation-delay: 0.54s; }
.home-nav-tile:nth-child(6) { animation-delay: 0.6s; }

@keyframes tileAppear {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Attention cards stagger */
.home-attention-card {
    animation: cardAppear 0.4s ease-out both;
}
.home-attention-card:nth-child(1) { animation-delay: 0.2s; }
.home-attention-card:nth-child(2) { animation-delay: 0.28s; }

@keyframes cardAppear {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Stats row number animation effect */
.home-stat-value {
    transition: color 0.3s ease, transform 0.2s ease;
}

/* Glass treatment for attention cards */
.home-attention-card {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Subtle hover lift for life cards */
.home-life-card {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.home-life-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}

/* ==================== EDITORIAL HEADERS — Apple system color washes ==================== */
.be-editorial-bg {
    background: linear-gradient(155deg, rgba(255,149,0,0.08) 0%, rgba(255,204,0,0.04) 50%, transparent 100%) !important;
}
.cal-editorial-bg {
    background: linear-gradient(155deg, rgba(0,122,255,0.08) 0%, rgba(52,199,89,0.04) 50%, transparent 100%) !important;
}
.inc-editorial-bg {
    background: linear-gradient(155deg, rgba(52,199,89,0.10) 0%, rgba(0,199,190,0.04) 50%, transparent 100%) !important;
}
.goals-editorial-bg {
    background: linear-gradient(155deg, rgba(255,45,85,0.08) 0%, rgba(175,82,222,0.04) 50%, transparent 100%) !important;
}
.sc-editorial-bg {
    background: linear-gradient(155deg, rgba(88,86,214,0.08) 0%, rgba(0,122,255,0.04) 50%, transparent 100%) !important;
}
.doc-editorial-bg {
    background: linear-gradient(155deg, rgba(0,122,255,0.08) 0%, rgba(90,200,250,0.04) 50%, transparent 100%) !important;
}
/* dash-editorial removed in v36 */

/* ==================== DESIGN SYSTEM PRIMITIVES v11 ==================== */
/* Reusable style classes for the premium editorial design language */

/* --- Surface: Floating Panel --- */
.surface-glass {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    border: 0.5px solid rgba(0, 0, 0, 0.04);
    border-radius: 20px;
    box-shadow: var(--shadow-float);
}

.surface-glass-thin {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 0.5px solid rgba(0, 0, 0, 0.04);
    border-radius: 18px;
    box-shadow: var(--shadow-md);
}

/* --- Motion: Hover Float --- */
.hover-float {
    transition: transform var(--duration-slow) var(--ease-out-expo), 
                box-shadow var(--duration-slow) var(--ease-out-expo);
}
.hover-float:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

.hover-lift {
    transition: transform var(--duration-normal) var(--ease-out-expo), 
                box-shadow var(--duration-normal) var(--ease-out-expo);
}
.hover-lift:hover {
    transform: translateY(-1.5px);
    box-shadow: var(--shadow-lg);
}

/* --- Motion: Spring Scale --- */
.spring-scale {
    transition: transform var(--duration-slow) var(--ease-spring);
}
.spring-scale:hover {
    transform: scale(1.02);
}
.spring-scale:active {
    transform: scale(0.98);
}

/* --- Typography: Editorial --- */
.type-headline-xl {
    font-size: 42px;
    font-weight: 820;
    font-family: var(--font-display);
    letter-spacing: -0.04em;
    line-height: 1.04;
    color: var(--text-primary);
}

.type-headline-lg {
    font-size: 36px;
    font-weight: 780;
    font-family: var(--font-display);
    letter-spacing: -0.035em;
    line-height: 1.06;
    color: var(--text-primary);
}

.type-headline-md {
    font-size: 28px;
    font-weight: 740;
    font-family: var(--font-display);
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--text-primary);
}

.type-body-subtle {
    font-size: 15px;
    font-weight: 440;
    color: var(--text-secondary);
    line-height: 1.5;
}

.type-caption {
    font-size: 12px;
    font-weight: 550;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --- Typography: Editorial Serif --- */
.type-editorial-hero {
    font-size: 48px;
    font-weight: 700;
    font-family: var(--font-editorial);
    letter-spacing: -0.03em;
    line-height: 1.02;
    color: var(--text-primary);
}

.type-editorial-title {
    font-size: 32px;
    font-weight: 600;
    font-family: var(--font-editorial);
    letter-spacing: -0.02em;
    line-height: 1.12;
    color: var(--text-primary);
}

.type-editorial-stat {
    font-size: 36px;
    font-weight: 700;
    font-family: var(--font-editorial);
    letter-spacing: -0.03em;
    line-height: 1.0;
    font-variant-numeric: tabular-nums;
}

.type-editorial-accent {
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-editorial);
    font-style: italic;
    color: var(--apple-orange);
    letter-spacing: 0.01em;
}

.money-hero {
    font-size: 44px;
    font-weight: 700;
    font-family: var(--font-editorial);
    letter-spacing: -0.035em;
    line-height: 1.0;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.money-display {
    font-size: 28px;
    font-weight: 600;
    font-family: var(--font-editorial);
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

/* --- Entrance Animations --- */
@keyframes floatUp {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.88); }
    to { opacity: 1; transform: scale(1); }
}

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

.animate-float-up {
    animation: floatUp 0.6s var(--ease-out-expo) forwards;
}

.animate-scale-in {
    animation: scaleIn 0.5s var(--ease-out-expo) forwards;
}

/* --- Shine Line (top highlight for glass surfaces) --- */
.shine-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent);
    z-index: 1;
}

/* --- Ambient Glow (soft gradient haze behind elements) --- */
.ambient-glow {
    position: relative;
}
.ambient-glow::after {
    content: '';
    position: absolute;
    inset: -20px;
    border-radius: inherit;
    background: radial-gradient(ellipse at center, rgba(120, 140, 255, 0.06) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--duration-slow) var(--ease-out-expo);
}
.ambient-glow:hover::after {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════
   REDUCED MOTION — Respect user accessibility preference
   ═══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .page.active {
        animation: none !important;
        opacity: 1;
    }
    .page.active > .card,
    .page.active > .grid-2 > .card,
    .page.active > .grid-2-1 > .card,
    .page.active > .grid-3 > .card {
        animation: none !important;
        opacity: 1;
    }
    .stat-card {
        animation: none !important;
        opacity: 1;
    }
    .card:hover, .stat-card:hover {
        transform: none !important;
    }
    .btn:active, button:active, .sidebar-item:active {
        transform: none !important;
    }
}

/* ═══════════════════════════════════════
   "JUST ADDED" HIGHLIGHT — App-wide
   ═══════════════════════════════════════ */
@keyframes justAddedGlow {
    0%   { box-shadow: 0 0 0 0 rgba(0, 122, 255, 0.4); }
    40%  { box-shadow: 0 0 0 8px rgba(0, 122, 255, 0.15); }
    100% { box-shadow: 0 0 0 0 rgba(0, 122, 255, 0.0); }
}

.just-added {
    animation: justAddedGlow 1.8s ease-out;
    position: relative;
}

.just-added::after {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 2px;
    background: var(--system-blue);
    opacity: 0;
    animation: justAddedAccent 2s ease-out;
}

@keyframes justAddedAccent {
    0%   { opacity: 0.8; }
    60%  { opacity: 0.4; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .just-added {
        animation: none;
        outline: 2px solid rgba(0, 122, 255, 0.3);
        outline-offset: 2px;
    }
    .just-added::after { animation: none; opacity: 0.6; }
}