@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 100 700;
    font-display: block;
    src: url('../assets/fonts/MaterialSymbolsOutlined.woff2') format('woff2'),
         url('https://fonts.gstatic.com/s/materialsymbolsoutlined/v383/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2') format('woff2');
}

/* MATERIAL SYMBOLS OUTLINED ICON SYSTEM - GUARANTEED RENDERING */
.material-symbols-outlined,
[data-icon],
.stitch2-material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-outlined[data-weight="fill"],
.material-symbols-outlined.fill,
[data-icon][data-weight="fill"] {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
}

:root {
    /* Liquid Glass Material System - Unified Palette */
    --bg-base: #F4EFE6;
    
    /* Liquid Glass Translucency & Fill */
    --glass-fill: linear-gradient(155deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.46) 55%, rgba(255, 255, 255, 0.38) 100%);
    --glass-fill-subtle: linear-gradient(155deg, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0.36) 100%);
    --glass-fill-elevated: linear-gradient(155deg, rgba(255, 255, 255, 0.76) 0%, rgba(255, 255, 255, 0.58) 100%);
    --glass-fill-sheet: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.76) 100%);
    --glass-fill-input: rgba(255, 255, 255, 0.52);

    --glass-bg: rgba(255, 255, 255, 0.52);
    --glass-bg-subtle: rgba(255, 255, 255, 0.38);
    --glass-bg-elevated: rgba(255, 255, 255, 0.65);
    --glass-bg-sheet: rgba(255, 255, 255, 0.82);
    --glass-bg-input: rgba(255, 255, 255, 0.48);
    --glass-bg-hover: rgba(255, 255, 255, 0.68);

    /* Blurs & Saturation */
    --glass-blur: blur(18px) saturate(145%) brightness(102%);
    --glass-blur-heavy: blur(28px) saturate(160%) brightness(102%);

    /* Liquid Edge Highlights & Specular Reflections */
    --glass-border: rgba(255, 255, 255, 0.82);
    --glass-border-subtle: rgba(255, 255, 255, 0.52);
    --glass-border-focused: rgba(135, 110, 85, 0.75);

    /* Specular Top Sheen & Rim Highlight */
    --glass-rim: rgba(255, 255, 255, 0.95);
    --glass-sheen: rgba(255, 255, 255, 0.28);

    /* Specular Shadows & Ambient Occlusion */
    --glass-shadow: 
        0 8px 28px -4px rgba(60, 45, 30, 0.07),
        0 2px 8px -1px rgba(60, 45, 30, 0.04),
        inset 0 1.5px 1.5px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 1.5px 0 rgba(0, 0, 0, 0.03);

    --glass-shadow-lg: 
        0 18px 44px -8px rgba(60, 45, 30, 0.10),
        0 6px 16px -3px rgba(60, 45, 30, 0.05),
        inset 0 2px 2px 0 rgba(255, 255, 255, 1),
        inset 0 -1.5px 2px 0 rgba(0, 0, 0, 0.04);

    --glass-hover-lift: translateY(-2px) scale(1.003);
    --glass-hover-shadow: 
        0 14px 36px -6px rgba(60, 45, 30, 0.12),
        0 4px 12px -2px rgba(60, 45, 30, 0.06),
        inset 0 1.5px 2px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 1.5px 0 rgba(0, 0, 0, 0.03);

    --glass-shadow-input: 
        inset 0 1.5px 3px rgba(0, 0, 0, 0.04),
        inset 0 -1px 1px rgba(255, 255, 255, 0.8),
        0 2px 8px rgba(0, 0, 0, 0.02);

    /* Typography & Contrast */
    --text-primary: #27231F;
    --text-secondary: #6B645C;
    --text-tertiary: #9E968D;
    --border: rgba(60, 50, 40, 0.08);

    /* Semantic Tailwind Bridge Tokens */
    --tw-surface: transparent;
    --tw-surface-container: #F4ECE8;
    --tw-surface-container-lowest: rgba(255, 255, 255, 0.88);
    --tw-surface-container-low: rgba(250, 242, 238, 0.78);
    --tw-surface-container-high: #EEE7E3;
    --tw-surface-container-highest: #E9E1DD;
    --tw-on-surface: #1E1B19;
    --tw-on-surface-variant: #3C4A42;
    --tw-outline: #6C7A71;
    --tw-outline-variant: rgba(187, 202, 191, 0.45);
    --tw-inverse-surface: #33302D;
    --tw-inverse-on-surface: #F7EFEB;
    --tw-surface-bright: #FFF8F5;
    --tw-surface-dim: #E0D8D5;

    /* Accent Palette */
    --accent: #876E55;
    --accent-light: rgba(135, 110, 85, 0.12);
    --accent-dark: #67523E;

    --income: #1B7A46;
    --income-light: rgba(27, 122, 70, 0.12);
    --expense: #BE382A;
    --expense-light: rgba(190, 56, 42, 0.12);

    --warning: #D97706;
    --warning-light: rgba(217, 119, 6, 0.12);

    /* Dimensions & Radii */
    --nav-height: 76px;
    --max-width: 520px;
    --radius-xl: 26px;
    --radius-lg: 18px;
    --radius-md: 14px;
    --radius-sm: 10px;

    /* Spring Easing Curves */
    --spring-quick: 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    --spring-bounce: 0.36s cubic-bezier(0.34, 1.56, 0.64, 1);
    --trans-normal: 0.25s cubic-bezier(0.2, 0, 0.2, 1);
}

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-tap-highlight-color: transparent;
}

html {
    min-height: 100%;
    background-color: var(--bg-base);
}

body {
    width: 100%;
    min-height: 100%;
    background-color: transparent; /* Allows bg-layer to show through */
    color: var(--text-primary);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 24px) + 20px);
    overflow-x: hidden;
    position: relative;
}

/* Background system: crisp underlying image + subtle mood overlay */
.bg-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    opacity: 1;
    transition: background-image 0.4s ease, opacity 0.4s ease;
}
.bg-layer.active { opacity: 1; }

.bg-mesh-default {
    background-image: 
        radial-gradient(at 15% 15%, rgba(235, 225, 205, 0.92) 0px, transparent 65%),
        radial-gradient(at 85% 20%, rgba(215, 235, 225, 0.65) 0px, transparent 60%),
        radial-gradient(at 50% 80%, rgba(245, 228, 218, 0.75) 0px, transparent 65%);
}

.bg-overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: radial-gradient(circle at 50% 25%, rgba(244, 239, 230, 0.06) 0%, rgba(244, 239, 230, 0.22) 100%);
    pointer-events: none;
}

/* Layout App Container */
.app-container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Header (Liquid Glass) */
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 4px 18px;
}
.brand-group {
    display: flex;
    align-items: center;
    gap: 12px;
}
.brand-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 4px 14px rgba(135, 110, 85, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.9);
    transition: transform var(--spring-quick);
}
.brand-avatar:hover {
    transform: scale(1.04);
}
.brand-text h1 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.brand-date {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Streak Badge (Liquid Glass Pill) */
.streak-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    background: var(--glass-bg-elevated);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text-primary);
    box-shadow: var(--glass-shadow);
    cursor: pointer;
    transition: transform var(--spring-bounce), box-shadow var(--spring-quick);
}
.streak-badge:active {
    transform: scale(0.93);
}
.streak-badge .fire-icon {
    font-size: 1rem;
    line-height: 1;
}

/* Icon Buttons (Liquid Glass Circle) */
.btn-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--glass-bg-elevated);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    cursor: pointer;
    box-shadow: var(--glass-shadow);
    transition: background var(--spring-quick), transform var(--spring-bounce);
}
.btn-icon:active {
    transform: scale(0.92);
}

/* Liquid Glass Cards (Translucent, Specular Bevel & Top Sheen) */
.card {
    position: relative;
    background: var(--glass-fill);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: 20px;
    box-shadow: var(--glass-shadow);
    margin-bottom: 18px;
    overflow: hidden;
    transition: transform var(--spring-quick), box-shadow var(--spring-quick), border-color 0.2s ease;
}
.card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, var(--glass-sheen) 0%, rgba(255, 255, 255, 0) 45%);
    pointer-events: none;
    z-index: 0;
}
.card > * {
    position: relative;
    z-index: 1;
}
.card:hover {
    transform: var(--glass-hover-lift);
    box-shadow: var(--glass-hover-shadow);
    border-color: rgba(255, 255, 255, 0.95);
}

/* Hero Balance Card (Liquid Glass Showcase) */
.balance-card {
    position: relative;
    background: var(--glass-fill-elevated);
    backdrop-filter: var(--glass-blur-heavy);
    -webkit-backdrop-filter: var(--glass-blur-heavy);
    border: 1.5px solid var(--glass-border);
    box-shadow: var(--glass-shadow-lg);
    border-radius: var(--radius-xl);
    text-align: center;
    padding: 26px 20px 22px;
    overflow: hidden;
    transition: transform var(--spring-quick), box-shadow var(--spring-quick);
}
.balance-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0) 48%);
    pointer-events: none;
    z-index: 0;
}
.balance-card > * {
    position: relative;
    z-index: 1;
}
.balance-card:hover {
    transform: var(--glass-hover-lift);
    box-shadow: var(--glass-hover-shadow);
}
.balance-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.balance-amount {
    font-size: 2.35rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin-bottom: 8px;
    transition: transform var(--spring-quick);
}
.balance-comparison {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid var(--glass-border-subtle);
    backdrop-filter: blur(8px);
    color: var(--text-secondary);
    margin-bottom: 18px;
    transition: background-color var(--spring-quick);
}
.balance-comparison.positive {
    background: var(--income-light);
    color: var(--income);
    border-color: rgba(27, 122, 70, 0.2);
}
.balance-comparison.negative {
    background: var(--expense-light);
    color: var(--expense);
    border-color: rgba(190, 56, 42, 0.2);
}

.month-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.stat-pill {
    padding: 12px;
    border-radius: var(--radius-md);
    background: var(--glass-bg-subtle);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border-subtle);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
    transition: transform var(--spring-quick);
}
.stat-pill:hover {
    transform: translateY(-2px);
}
.stat-pill-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}
.stat-pill-value {
    font-size: 1.05rem;
    font-weight: 700;
}
.stat-pill-value.income { color: var(--income); }
.stat-pill-value.expense { color: var(--expense); }

/* Daily Goal Bar */
.goal-bar-container {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    text-align: left;
}
.goal-bar-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    margin-bottom: 6px;
}
.goal-progress-bg {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 999px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}
.goal-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--accent);
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
}

/* Section Titles */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 22px 4px 12px;
}
.section-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}
.section-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
    background: none;
    border: none;
    transition: opacity var(--spring-quick);
}
.section-link:hover { opacity: 0.75; }

/* Transaction List Item (Liquid Glass Row with Top Sheen & Lift) */
.tx-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--glass-fill);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    margin-bottom: 10px;
    box-shadow: var(--glass-shadow);
    transition: transform var(--spring-quick), box-shadow var(--spring-quick), border-color 0.2s ease;
    overflow: hidden;
    cursor: default;
}
.tx-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 45%);
    pointer-events: none;
    z-index: 0;
}
.tx-item > * {
    position: relative;
    z-index: 1;
}
.tx-item:hover {
    transform: var(--glass-hover-lift);
    box-shadow: var(--glass-hover-shadow);
    border-color: rgba(255, 255, 255, 0.95);
}
.tx-item:active {
    transform: scale(0.985);
}
.tx-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.tx-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.tx-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.tx-category {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tx-note {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tx-meta {
    font-size: 0.72rem;
    color: var(--text-tertiary);
}
.tx-amount {
    font-weight: 700;
    font-size: 1.02rem;
    text-align: right;
    white-space: nowrap;
    margin-left: 10px;
}
.tx-amount.income { color: var(--income); }
.tx-amount.expense { color: var(--expense); }

/* Journal Card Item (Liquid Glass Card with Top Sheen & Lift) */
.journal-item {
    position: relative;
    padding: 18px;
    background: var(--glass-fill);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    margin-bottom: 14px;
    box-shadow: var(--glass-shadow);
    transition: transform var(--spring-quick), box-shadow var(--spring-quick), border-color 0.2s ease;
    overflow: hidden;
}
.journal-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 45%);
    pointer-events: none;
    z-index: 0;
}
.journal-item > * {
    position: relative;
    z-index: 1;
}
.journal-item:hover {
    transform: var(--glass-hover-lift);
    box-shadow: var(--glass-hover-shadow);
    border-color: rgba(255, 255, 255, 0.95);
}
.journal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.journal-date-badge {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-light);
    border: 1px solid rgba(135, 110, 85, 0.15);
    padding: 3px 10px;
    border-radius: 999px;
}
.journal-spent {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
}
.journal-spent strong {
    color: var(--expense);
}
.journal-title {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 6px;
    color: var(--text-primary);
}
.journal-content {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-bottom: 12px;
    white-space: pre-line;
}
.journal-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 8px;
    margin-top: 10px;
}
.journal-photo-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    object-fit: cover;
    cursor: pointer;
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    transition: transform var(--spring-bounce);
}
.journal-photo-thumb:hover {
    transform: scale(1.04);
}
.journal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.btn-action-text {
    background: none;
    border: none;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: opacity var(--spring-quick);
}
.btn-action-text:hover { opacity: 0.75; }
.btn-action-text.danger { color: var(--expense); }

/* Screens View Management */
.screen {
    display: none !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}
.screen.active {
    display: block !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    pointer-events: auto !important;
    width: 100%;
}
#screen-home.active {
    display: flex !important;
    flex-direction: column !important;
}


/* Bottom Navigation (Liquid Glass Dock) */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: var(--glass-blur-heavy);
    -webkit-backdrop-filter: var(--glass-blur-heavy);
    border-top: 1.5px solid rgba(255, 255, 255, 0.88);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom, 16px);
    z-index: 1000;
    max-width: var(--max-width);
    margin: 0 auto;
    box-shadow: 0 -8px 32px rgba(60, 45, 30, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.95);
}
.nav-item {
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--text-tertiary);
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    transition: color var(--spring-quick), transform var(--spring-bounce);
    position: relative;
}
.nav-item:active {
    transform: scale(0.92);
}
.nav-item.active {
    color: var(--accent);
    font-weight: 700;
}
.nav-item svg {
    width: 22px;
    height: 22px;
    stroke-width: 2;
    transition: stroke var(--spring-quick), transform var(--spring-bounce);
}
.nav-item.active svg {
    stroke: var(--accent);
    transform: translateY(-2px);
}

/* Center Elevated FAB */
.fab-wrapper {
    position: relative;
    top: -18px;
}
.fab-button {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #FFF;
    border: 3px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 28px rgba(135, 110, 85, 0.38), inset 0 1px 1px rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform var(--spring-bounce), box-shadow var(--spring-quick);
}
.fab-button:active {
    transform: scale(0.9) rotate(45deg);
}
.fab-button svg {
    width: 28px;
    height: 28px;
    stroke: #FFF;
}

/* Modals & Bottom Sheets (Frosted Liquid Glass Sheet) */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(30, 22, 16, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2000;
    display: none;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--spring-quick);
}
.modal-overlay.active {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
.bottom-sheet {
    width: 100%;
    max-width: var(--max-width);
    max-height: 90vh;
    background: var(--glass-bg-sheet);
    backdrop-filter: var(--glass-blur-heavy);
    -webkit-backdrop-filter: var(--glass-blur-heavy);
    border: 1.5px solid rgba(255, 255, 255, 0.88);
    border-radius: 28px 28px 0 0;
    padding: 16px 20px 36px;
    box-shadow: 0 -16px 48px rgba(60, 45, 30, 0.12), inset 0 1.5px 2px rgba(255, 255, 255, 1);
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}
.modal-overlay.active .bottom-sheet {
    transform: translateY(0);
}
.sheet-drag-handle {
    width: 44px;
    height: 5px;
    background: rgba(0, 0, 0, 0.16);
    border-radius: 999px;
    margin: 0 auto 16px;
}

/* Tabs (Liquid Glass Segmented) */
.tabs-segmented {
    display: flex;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(14px);
    border-radius: var(--radius-md);
    padding: 4px;
    gap: 4px;
    margin-bottom: 20px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
}
.tab-seg-item {
    flex: 1;
    text-align: center;
    padding: 10px 4px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: none;
    border: none;
    transition: background var(--spring-quick), color var(--spring-quick), transform var(--spring-bounce);
}
.tab-seg-item:active {
    transform: scale(0.96);
}
.tab-seg-item.active {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    color: var(--text-primary);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.95);
}

/* Form Controls (Liquid Glass Insets) */
.form-group {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}
.form-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.form-input, .form-select, .form-textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1.5px solid rgba(255, 255, 255, 0.72);
    background: var(--glass-bg-input);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--glass-shadow-input);
    color: var(--text-primary);
    font-size: 0.95rem;
    outline: none;
    transition: border-color var(--spring-quick), box-shadow var(--spring-quick);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(135, 110, 85, 0.18), inset 0 1px 2px rgba(0,0,0,0.03);
}
.form-textarea {
    resize: vertical;
    min-height: 90px;
}

/* Big Amount Input */
.amount-hero-input {
    font-size: 1.85rem;
    font-weight: 700;
    text-align: center;
    padding: 14px;
    background: var(--glass-bg-subtle);
    backdrop-filter: blur(16px);
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    box-shadow: var(--glass-shadow-input);
    color: var(--text-primary);
    border-radius: var(--radius-lg);
}

/* Buttons */
.btn-primary {
    width: 100%;
    padding: 14px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #FFF;
    font-weight: 700;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(135, 110, 85, 0.32), inset 0 1px 1px rgba(255, 255, 255, 0.35);
    transition: transform var(--spring-bounce), opacity var(--spring-quick);
}
.btn-primary:active {
    transform: scale(0.97);
}
.btn-secondary {
    width: 100%;
    padding: 14px;
    border-radius: var(--radius-lg);
    background: var(--glass-bg-elevated);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: transform var(--spring-bounce), background var(--spring-quick);
}
.btn-secondary:active {
    transform: scale(0.97);
}
.btn-danger {
    background: linear-gradient(135deg, var(--expense), #992D22);
    color: #FFF;
    box-shadow: 0 8px 24px rgba(190, 56, 42, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

/* Photo Upload Picker & Preview */
.photo-uploader-box {
    border: 2px dashed rgba(135, 110, 85, 0.35);
    border-radius: var(--radius-lg);
    padding: 16px;
    text-align: center;
    background: var(--glass-bg-subtle);
    backdrop-filter: blur(12px);
    cursor: pointer;
    transition: border-color var(--spring-quick), background-color var(--spring-quick);
}
.photo-uploader-box:hover {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.65);
}
.photo-preview-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}
.photo-preview-item {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.photo-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.btn-remove-photo {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 22px;
    height: 22px;
    background: rgba(0, 0, 0, 0.65);
    color: #FFF;
    border-radius: 50%;
    border: none;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Fullscreen Photo Lightbox */
.lightbox-viewer {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(18, 14, 10, 0.88);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--spring-quick);
}
.lightbox-viewer.active {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Universal Overlay Non-Interference Safety Guard (Prevents Mobile Freeze & Touch Block) */
.modal-overlay:not(.active),
.lightbox-viewer:not(.active),
[id^="sheet-"]:not(.active),
#allocation-sheet:not(.active),
.action-hub-modal:not(.active) {
    display: none !important;
    pointer-events: none !important;
}

/* Touch responsiveness optimization: eliminate 300ms tap delay across mobile browsers */
button, a, input, select, textarea, [onclick], .touch-tactile, .cursor-pointer {
    touch-action: manipulation;
}
.lightbox-img {
    max-width: 92vw;
    max-height: 88vh;
    border-radius: var(--radius-md);
    object-fit: contain;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.lightbox-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    color: #FFF;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
}
.lightbox-download {
    position: absolute;
    top: 24px;
    left: 24px;
    height: 44px;
    padding: 0 16px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 22px;
    color: #FFF;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s, transform 0.2s;
}
.lightbox-download:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.35);
}

/* Toast (Liquid Glass Notification) */
.toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: calc(100% - 36px);
    max-width: 400px;
    pointer-events: none;
}
.toast-item {
    background: rgba(35, 30, 25, 0.84);
    color: #FFF;
    padding: 12px 18px;
    border-radius: var(--radius-lg);
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    pointer-events: auto;
    animation: toastSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
@keyframes toastSlideDown {
    from { opacity: 0; transform: translateY(-16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive Media Queries */
@media (max-width: 380px) {
    .balance-amount { font-size: 2rem; }
    .card { padding: 16px; }
    .stat-pill { padding: 10px; }
}

@media (min-width: 768px) {
    .app-container {
        padding-top: 32px;
    }
    .card {
        padding: 24px;
    }
    .bottom-nav {
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.05);
    }
}

/* REDUCED MOTION SUPPORT (System preference and User setting) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001s !important;
        scroll-behavior: auto !important;
    }
}

html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
}

/* ==========================================================================
   LIQUID GLASS COMPONENTS: CALENDAR, EMOTIONS & PHOTO GALLERY
   ========================================================================== */

/* Calendar Weekly Strip Component (Liquid Glass) */
.calendar-strip {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 6px;
    padding: 12px 14px;
    background: var(--glass-fill);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--glass-shadow);
    margin-bottom: 20px;
    overflow: hidden;
}
.calendar-strip::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, transparent 50%);
    pointer-events: none;
    border-radius: inherit;
}
.calendar-day-item {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    border-radius: var(--radius-md);
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
    transition: transform var(--spring-quick), background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    user-select: none;
    z-index: 1;
}
.calendar-day-item:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.45);
}
.calendar-day-item.active {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.72) 100%);
    border: 1px solid rgba(255, 255, 255, 1);
    box-shadow: 
        0 4px 14px rgba(135, 110, 85, 0.16),
        inset 0 1px 1.5px rgba(255, 255, 255, 1);
    transform: translateY(-2px) scale(1.04);
}
.calendar-day-item .cal-weekday {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    margin-bottom: 3px;
}
.calendar-day-item.active .cal-weekday {
    color: var(--accent-dark);
}
.calendar-day-item .cal-daynum {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}
.calendar-day-item.active .cal-daynum {
    color: var(--accent);
}
.calendar-day-item .cal-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
    margin-top: 4px;
    opacity: 0;
}
.calendar-day-item.has-tx .cal-dot {
    opacity: 1;
}

/* Emotion Selector (Liquid Glass Pills) */
.emotion-selector {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 6px 2px 10px;
    scrollbar-width: none;
}
.emotion-selector::-webkit-scrollbar { display: none; }

.emotion-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--glass-fill);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    box-shadow: var(--glass-shadow);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: transform var(--spring-quick), background var(--spring-quick), border-color 0.2s ease, box-shadow var(--spring-quick);
    user-select: none;
}
.emotion-chip:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.75);
    color: var(--text-primary);
}
.emotion-chip.active {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96) 0%, rgba(250, 246, 240, 0.88) 100%);
    border: 1.5px solid var(--accent);
    color: var(--accent-dark);
    box-shadow: 
        0 6px 18px rgba(135, 110, 85, 0.22),
        inset 0 1px 1.5px rgba(255, 255, 255, 1);
    transform: translateY(-2px) scale(1.05);
}

/* Journal Emotion Display Pill */
.journal-emotion-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--glass-fill);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    color: var(--accent-dark);
    margin-left: 6px;
}

/* Photo Gallery & Lightbox (Liquid Glass Frames) */
.journal-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
    margin-top: 10px;
}
.journal-photo-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 14px rgba(60, 45, 30, 0.08);
    cursor: pointer;
    background: var(--glass-fill);
    transition: transform var(--spring-quick), box-shadow var(--spring-quick);
}
.journal-photo-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, transparent 42%);
    pointer-events: none;
    z-index: 1;
}
.journal-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.journal-photo-item:hover img {
    transform: scale(1.06);
}
.journal-photo-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(60, 45, 30, 0.14);
}

.photo-preview-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.photo-preview-item {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    box-shadow: var(--glass-shadow);
}
.photo-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.btn-remove-photo {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #FFF;
    border: none;
    font-size: 13px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Accessibility: Reduced Transparency Fallback */
@media (prefers-reduced-transparency: reduce) {
    :root {
        --glass-bg: #F8F4EE;
        --glass-fill: #F8F4EE;
        --glass-fill-elevated: #FFFFFF;
        --glass-fill-sheet: #FFFFFF;
        --glass-blur: none;
        --glass-blur-heavy: none;
    }
    .card, .tx-item, .journal-item, .bottom-sheet, .bottom-nav, .calendar-strip, .emotion-chip {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: #F8F4EE !important;
    }
}

/* Fallback for browsers without backdrop-filter support */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .card, .tx-item, .journal-item, .bottom-sheet, .bottom-nav, .calendar-strip, .emotion-chip {
        background: rgba(248, 244, 238, 0.95);
    }
}

/* ==========================================================================
   THEME DARK OVERRIDES (For Dark & Atmosphere Themes)
   ========================================================================== */
html.theme-dark, body.theme-dark {
    --bg-primary: #111215;
    --bg-card: rgba(24, 26, 32, 0.76);
    --bg-glass: rgba(24, 26, 32, 0.82);
    --text-primary: #F5F5F7;
    --text-secondary: #A6AAB4;
    --text-tertiary: #6E7382;
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-fill: rgba(28, 30, 38, 0.72);
    --glass-fill-elevated: rgba(38, 41, 52, 0.88);
    --glass-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    --glass-top-bevel: rgba(255, 255, 255, 0.16);
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    --card-shadow-hover: 0 18px 45px rgba(0, 0, 0, 0.6);
    --input-bg: rgba(255, 255, 255, 0.08);
    --input-border: rgba(255, 255, 255, 0.16);
    --accent: #E0A96D;
    --accent-light: #F2CE9D;
    --accent-dark: #C68B45;
}

html.theme-dark .app-header {
    background: rgba(18, 20, 26, 0.75);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

html.theme-dark .bottom-nav {
    background: rgba(18, 20, 26, 0.82);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

html.theme-dark .calendar-day-item.active {
    background: linear-gradient(145deg, rgba(50, 54, 66, 0.95) 0%, rgba(35, 38, 48, 0.85) 100%);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

html.theme-dark .emotion-chip.active {
    background: linear-gradient(145deg, rgba(60, 48, 32, 0.9) 0%, rgba(45, 36, 25, 0.85) 100%);
    border-color: var(--accent);
}

/* ==========================================================================
   DAY FOCUS CARD & DAY DETAIL (Daily Financial Journal)
   ========================================================================== */
.day-focus-card {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    margin-bottom: 22px;
    padding: 20px 22px;
    transition: transform var(--spring-quick), box-shadow var(--spring-quick);
}

.day-focus-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--card-shadow-hover);
}

.day-focus-card:active {
    transform: scale(0.985);
}

.day-focus-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.day-focus-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.day-focus-badge {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    background: rgba(184, 134, 11, 0.14);
    color: var(--accent-dark);
    border: 1px solid rgba(184, 134, 11, 0.25);
}

.day-focus-title {
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--text-primary);
}

.btn-glass-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: var(--glass-fill);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--spring-quick);
}

.btn-glass-pill:hover {
    background: rgba(255, 255, 255, 0.6);
    color: var(--accent-dark);
    transform: translateY(-1px);
}

.day-focus-kpi-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.day-summary-stat {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

html.theme-dark .day-summary-stat {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.day-summary-stat .stat-lbl {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.day-summary-stat .stat-val {
    font-size: 0.96rem;
    font-weight: 800;
    color: var(--text-primary);
}

.day-summary-stat .stat-val.income { color: var(--income); }
.day-summary-stat .stat-val.expense { color: var(--expense); }

/* Day Detail Modal */
.day-detail-sheet {
    max-height: 88vh;
    display: flex;
    flex-direction: column;
}

.day-detail-content {
    overflow-y: auto;
    padding: 18px 22px 36px;
    -webkit-overflow-scrolling: touch;
}

.day-detail-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 22px;
}

.kpi-mini-card {
    padding: 12px;
    border-radius: var(--radius-lg);
    background: var(--glass-fill);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    text-align: center;
}

.kpi-mini-lbl {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-tertiary);
    margin-bottom: 4px;
}

.kpi-mini-val {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-primary);
}

.kpi-mini-val.income { color: var(--income); }
.kpi-mini-val.expense { color: var(--expense); }

.detail-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-timeline-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: var(--glass-fill);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    margin-bottom: 8px;
}

.timeline-time {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text-tertiary);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.05);
    white-space: nowrap;
}

html.theme-dark .timeline-time {
    background: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   STATISTICS DASHBOARD (KPI Grid, Bar Chart, Ratio & Insights)
   ========================================================================== */
.stats-filter-container {
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 18px;
    scrollbar-width: none;
}
.stats-filter-container::-webkit-scrollbar { display: none; }

.stats-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}

.kpi-grid-card {
    padding: 16px 18px;
    position: relative;
    overflow: hidden;
}

.kpi-grid-card.full-width {
    grid-column: span 2;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(245, 240, 230, 0.6) 100%);
}

html.theme-dark .kpi-grid-card.full-width {
    background: linear-gradient(135deg, rgba(38, 42, 54, 0.85) 0%, rgba(28, 30, 38, 0.75) 100%);
}

.kpi-card-lbl {
    display: block;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.kpi-card-val {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
}

.kpi-card-val.income { color: var(--income); }
.kpi-card-val.expense { color: var(--expense); }

.kpi-card-val.net-savings {
    font-size: 1.45rem;
    color: var(--accent);
}

.stats-insights-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.insight-card {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.insight-lbl {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-tertiary);
    margin-bottom: 4px;
}

.insight-val {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Daily Spending Bar Chart */
.chart-card {
    padding: 18px 20px;
    margin-bottom: 18px;
}

.analytics-chart-flex {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 160px;
    padding-top: 24px;
    padding-bottom: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}
.analytics-chart-flex::-webkit-scrollbar { display: none; }

.chart-col {
    flex: 1;
    min-width: 28px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
    position: relative;
}

.chart-bar-wrap {
    width: 100%;
    max-width: 24px;
    height: 100%;
    background: rgba(0, 0, 0, 0.04);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

html.theme-dark .chart-bar-wrap {
    background: rgba(255, 255, 255, 0.06);
}

.chart-bar-fill {
    width: 100%;
    background: linear-gradient(180deg, var(--accent) 0%, rgba(184, 134, 11, 0.7) 100%);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease;
}

.chart-bar-fill.peak {
    background: linear-gradient(180deg, var(--expense) 0%, rgba(220, 53, 69, 0.7) 100%);
    box-shadow: 0 0 10px rgba(220, 53, 69, 0.35);
}

.chart-bar-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-tertiary);
    margin-top: 6px;
    white-space: nowrap;
}

/* Ratio Bar */
.ratio-progress-bar {
    display: flex;
    width: 100%;
    height: 12px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: rgba(0, 0, 0, 0.06);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.ratio-fill-income {
    background: linear-gradient(90deg, #28A745, #34D399);
    transition: width 0.6s ease;
}

.ratio-fill-expense {
    background: linear-gradient(90deg, #F87171, #DC3545);
    transition: width 0.6s ease;
}

/* ==========================================================================
   PHOTO ACTION BUTTONS (Add Modal Camera & Gallery)
   ========================================================================== */
.photo-action-buttons {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.btn-photo-action {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    background: var(--glass-fill);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--spring-quick);
}

.btn-photo-action:hover {
    background: rgba(255, 255, 255, 0.65);
    border-color: var(--accent);
    transform: translateY(-2px);
}

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

/* ==========================================================================
   THEME GALLERY MODAL (16 Themes Grid)
   ========================================================================== */
.theme-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding: 16px 20px 30px;
    max-height: 65vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.theme-tile-card {
    position: relative;
    border-radius: var(--radius-lg);
    background: var(--glass-fill);
    backdrop-filter: var(--glass-blur);
    border: 1.5px solid var(--glass-border);
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--glass-shadow);
    transition: transform var(--spring-quick), border-color 0.2s ease, box-shadow var(--spring-quick);
}

.theme-tile-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--card-shadow-hover);
}

.theme-tile-card:active {
    transform: scale(0.97);
}

.theme-tile-card.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent), 0 8px 24px rgba(184, 134, 11, 0.25);
}

.theme-tile-swatch {
    height: 88px;
    width: 100%;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 8px;
}

.theme-active-badge {
    font-size: 0.7rem;
    font-weight: 700;
    color: #FFF;
    background: var(--accent);
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.theme-tile-info {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
}

.theme-tile-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
}

.theme-tile-group {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-tertiary);
    margin-top: 2px;
}

/* ==========================================================================
   AUTHENTICATION MODAL (4 Providers & Form UI)
   ========================================================================== */
.auth-sheet {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.auth-content {
    padding: 20px 24px 34px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.auth-tab-row {
    display: flex;
    gap: 8px;
    background: rgba(0, 0, 0, 0.05);
    padding: 4px;
    border-radius: var(--radius-pill);
    margin-bottom: 20px;
}

html.theme-dark .auth-tab-row {
    background: rgba(255, 255, 255, 0.08);
}

.auth-tab-item {
    flex: 1;
    padding: 8px 12px;
    border-radius: var(--radius-pill);
    border: none;
    background: transparent;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.auth-tab-item.active {
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.floating-group {
    margin-bottom: 14px;
    position: relative;
}

.floating-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.floating-input {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-primary);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.floating-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.18);
}

.auth-alert-box {
    display: none;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 16px;
    animation: fadeIn 0.25s ease;
}

.auth-alert-box.error {
    background: rgba(220, 53, 69, 0.12);
    color: #DC3545;
    border: 1px solid rgba(220, 53, 69, 0.28);
}

.auth-alert-box.success {
    background: rgba(40, 167, 69, 0.12);
    color: #28A745;
    border: 1px solid rgba(40, 167, 69, 0.28);
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--text-tertiary);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.auth-divider::before, .auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--glass-border);
}

.auth-providers-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-provider-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    background: var(--glass-fill);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--glass-shadow);
    transition: all var(--spring-quick);
}

.btn-provider-pill:hover {
    background: rgba(255, 255, 255, 0.7);
    transform: translateY(-2px);
}

.btn-provider-pill:active {
    transform: scale(0.98);
}

.auth-guest-link {
    display: block;
    text-align: center;
    font-size: 0.84rem;
    color: var(--text-tertiary);
    margin-top: 18px;
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.auth-guest-link:hover {
    color: var(--text-primary);
}

/* Tactile Spring Scale on Touch */
button:active, .btn-primary:active, .btn-secondary:active, .btn-fab:active {
    transform: scale(0.97);
}

/* THEME CAROUSEL */
.theme-carousel-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding: 16px 24px 24px;
    scrollbar-width: none;
    max-height: 70vh;
}
.theme-carousel-container::-webkit-scrollbar { display: none; }
.theme-carousel-container .theme-tile-card {
    flex: 0 0 200px;
    scroll-snap-align: center;
    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease, box-shadow 0.3s ease;
    transform: scale(0.92);
    opacity: 0.75;
}
.theme-carousel-container .theme-tile-card.center-card {
    transform: scale(1.04);
    opacity: 1;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.theme-carousel-container .theme-tile-card.active {
    transform: scale(1.04);
    opacity: 1;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent), 0 20px 50px rgba(0,0,0,0.2);
}
.theme-tile-swatch {
    height: 120px;
}


/* ========================
   ANIMATED EMOTION CARDS
   ======================== */
.emotion-card {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 10px 10px;
    min-width: 72px;
    border-radius: var(--radius-lg);
    background: var(--glass-fill);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1.5px solid var(--glass-border);
    cursor: pointer;
    user-select: none;
    opacity: 0.6;
    transform: scale(0.93);
    transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.emotion-card * {
    pointer-events: none;
}
.emotion-card:hover {
    opacity: 0.85;
    transform: scale(0.97);
}
.emotion-card.active {
    opacity: 1;
    transform: scale(1.06);
    border-color: var(--accent);
    background: rgba(255,255,255,0.7);
    box-shadow: 0 6px 20px rgba(184,134,11,0.25),
                inset 0 1px 2px rgba(255,255,255,0.9);
}
html.theme-dark .emotion-card.active {
    background: rgba(255,255,255,0.1);
}
.emotion-anim-wrap {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: relative;
}
.emotion-emoji {
    font-size: 1.6rem;
    line-height: 1;
    display: block;
    transform-origin: center;
}
.emotion-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-align: center;
    white-space: nowrap;
}
.emotion-card.active .emotion-label {
    color: var(--accent-dark);
}

/* ANIMATION: Happy — bouncy pulse */
.emotion-card.active .anim-happy .emotion-emoji {
    animation: emo-happy 0.8s cubic-bezier(0.36,0.07,0.19,0.97) infinite;
}
@keyframes emo-happy {
    0%,100% { transform: scale(1) rotate(0deg); }
    25%      { transform: scale(1.18) rotate(-5deg); }
    75%      { transform: scale(1.12) rotate(5deg); }
}

/* ANIMATION: Peaceful — slow float */
.emotion-card.active .anim-peaceful .emotion-emoji {
    animation: emo-peaceful 2.5s ease-in-out infinite;
}
@keyframes emo-peaceful {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

/* ANIMATION: Motivated — spring bounce */
.emotion-card.active .anim-motivated .emotion-emoji {
    animation: emo-motivated 0.6s cubic-bezier(0.36,0.07,0.19,0.97) infinite;
}
@keyframes emo-motivated {
    0%,100% { transform: scale(1) translateY(0); }
    50%      { transform: scale(1.2) translateY(-6px); }
}

/* ANIMATION: Quiet — gentle sway */
.emotion-card.active .anim-quiet .emotion-emoji {
    animation: emo-quiet 3s ease-in-out infinite;
}
@keyframes emo-quiet {
    0%,100% { transform: rotate(0deg) scale(1); }
    33%      { transform: rotate(-6deg) scale(0.95); }
    66%      { transform: rotate(4deg) scale(0.98); }
}

/* ANIMATION: Grateful — sparkle spin */
.emotion-card.active .anim-grateful .emotion-emoji {
    animation: emo-grateful 1.2s ease-in-out infinite;
}
@keyframes emo-grateful {
    0%,100% { transform: scale(1) rotate(0deg); opacity: 1; }
    50%      { transform: scale(1.15) rotate(15deg); opacity: 0.85; }
}


/* ANIMATION: Excited — party burst */
.emotion-card.active .anim-excited .emotion-emoji {
    animation: emo-excited 0.7s cubic-bezier(0.36,0.07,0.19,0.97) infinite;
}
@keyframes emo-excited {
    0%,100% { transform: scale(1) rotate(0deg); }
    25%      { transform: scale(1.22) rotate(8deg); }
    75%      { transform: scale(1.15) rotate(-8deg); }
}

/* Reduced motion: disable all emotion card animations */
.reduce-motion .emotion-card .emotion-emoji { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
    .emotion-card .emotion-emoji { animation: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PER-THEME CSS OVERRIDES — generated by 20-theme system
   Each [data-theme] block overrides CSS custom properties so every surface
   (cards, inputs, nav, modals, charts) automatically inherits correct tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── DARK THEMES — full surface token overrides ─────────────────────────── */

[data-theme="midnight"] {
    --accent:           #818CF8;
    --accent-light:     rgba(129, 140, 248, 0.18);
    --accent-dark:      #6366F1;
    --income:           #34D399;
    --income-light:     rgba(52, 211, 153, 0.18);
    --expense:          #F87171;
    --expense-light:    rgba(248, 113, 113, 0.18);
    --text-primary:     #F1F5F9;
    --text-secondary:   #94A3B8;
    --text-tertiary:    #64748B;
    --glass-fill:       linear-gradient(155deg, rgba(30,41,59,0.72) 0%, rgba(15,23,42,0.60) 55%, rgba(11,17,32,0.55) 100%);
    --glass-fill-subtle: linear-gradient(155deg, rgba(30,41,59,0.50) 0%, rgba(15,23,42,0.40) 100%);
    --glass-fill-elevated: linear-gradient(155deg, rgba(30,41,59,0.84) 0%, rgba(15,23,42,0.72) 100%);
    --glass-fill-sheet: linear-gradient(180deg, rgba(15,23,42,0.94) 0%, rgba(2,6,23,0.88) 100%);
    --glass-bg:         rgba(30, 41, 59, 0.60);
    --glass-bg-subtle:  rgba(15, 23, 42, 0.40);
    --glass-bg-elevated: rgba(30,41,59,0.75);
    --glass-bg-sheet:   rgba(15,23,42,0.92);
    --glass-bg-input:   rgba(30, 41, 59, 0.50);
    --glass-border:     rgba(129, 140, 248, 0.22);
    --glass-border-subtle: rgba(148, 163, 184, 0.15);
    --glass-border-focused: rgba(129, 140, 248, 0.60);
    --glass-shadow:
        0 8px 28px -4px rgba(0, 0, 10, 0.45),
        0 2px 8px -1px rgba(0, 0, 10, 0.30),
        inset 0 1.5px 1.5px 0 rgba(129, 140, 248, 0.18),
        inset 0 -1px 1.5px 0 rgba(0, 0, 0, 0.20);
    --glass-shadow-lg:
        0 18px 44px -8px rgba(0, 0, 15, 0.55),
        0 6px 16px -3px rgba(0, 0, 15, 0.35),
        inset 0 2px 2px 0 rgba(129, 140, 248, 0.22),
        inset 0 -1.5px 2px 0 rgba(0, 0, 0, 0.25);
    --bg-card:          rgba(15, 23, 42, 0.88);
    --input-bg:         rgba(30, 41, 59, 0.55);
    --input-border:     rgba(129, 140, 248, 0.25);
    --border:           rgba(148, 163, 184, 0.12);
}

[data-theme="graphite"] {
    --accent:           #A1A1AA;
    --accent-light:     rgba(161, 161, 170, 0.18);
    --accent-dark:      #71717A;
    --income:           #4ADE80;
    --income-light:     rgba(74, 222, 128, 0.18);
    --expense:          #F87171;
    --expense-light:    rgba(248, 113, 113, 0.18);
    --text-primary:     #FAFAFA;
    --text-secondary:   #A1A1AA;
    --text-tertiary:    #71717A;
    --glass-fill:       linear-gradient(155deg, rgba(39,39,42,0.72) 0%, rgba(24,24,27,0.60) 55%, rgba(9,9,11,0.55) 100%);
    --glass-fill-subtle: linear-gradient(155deg, rgba(39,39,42,0.50) 0%, rgba(24,24,27,0.40) 100%);
    --glass-fill-elevated: linear-gradient(155deg, rgba(39,39,42,0.84) 0%, rgba(24,24,27,0.72) 100%);
    --glass-fill-sheet: linear-gradient(180deg, rgba(24,24,27,0.94) 0%, rgba(9,9,11,0.90) 100%);
    --glass-bg:         rgba(39, 39, 42, 0.60);
    --glass-bg-subtle:  rgba(24, 24, 27, 0.40);
    --glass-bg-elevated: rgba(39,39,42,0.75);
    --glass-bg-sheet:   rgba(24,24,27,0.92);
    --glass-bg-input:   rgba(39, 39, 42, 0.50);
    --glass-border:     rgba(161, 161, 170, 0.20);
    --glass-border-subtle: rgba(113, 113, 122, 0.15);
    --glass-border-focused: rgba(161, 161, 170, 0.55);
    --glass-shadow:
        0 8px 28px -4px rgba(0,0,0,0.50),
        0 2px 8px -1px rgba(0,0,0,0.35),
        inset 0 1.5px 1.5px 0 rgba(200,200,200,0.12),
        inset 0 -1px 1.5px 0 rgba(0,0,0,0.25);
    --glass-shadow-lg:
        0 18px 44px -8px rgba(0,0,0,0.60),
        0 6px 16px -3px rgba(0,0,0,0.40),
        inset 0 2px 2px 0 rgba(200,200,200,0.14),
        inset 0 -1.5px 2px 0 rgba(0,0,0,0.30);
    --bg-card:          rgba(24, 24, 27, 0.88);
    --input-bg:         rgba(39, 39, 42, 0.55);
    --input-border:     rgba(161, 161, 170, 0.22);
    --border:           rgba(113, 113, 122, 0.15);
}

[data-theme="black_glass"] {
    --accent:           #E5E5E5;
    --accent-light:     rgba(229, 229, 229, 0.14);
    --accent-dark:      #A3A3A3;
    --income:           #4ADE80;
    --income-light:     rgba(74, 222, 128, 0.15);
    --expense:          #FC8181;
    --expense-light:    rgba(252, 129, 129, 0.15);
    --text-primary:     #FFFFFF;
    --text-secondary:   #A3A3A3;
    --text-tertiary:    #737373;
    --glass-fill:       linear-gradient(155deg, rgba(38,38,38,0.65) 0%, rgba(18,18,18,0.52) 55%, rgba(5,5,5,0.48) 100%);
    --glass-fill-subtle: linear-gradient(155deg, rgba(38,38,38,0.45) 0%, rgba(18,18,18,0.35) 100%);
    --glass-fill-elevated: linear-gradient(155deg, rgba(38,38,38,0.80) 0%, rgba(18,18,18,0.68) 100%);
    --glass-fill-sheet: linear-gradient(180deg, rgba(18,18,18,0.96) 0%, rgba(5,5,5,0.92) 100%);
    --glass-bg:         rgba(38, 38, 38, 0.55);
    --glass-bg-subtle:  rgba(18, 18, 18, 0.38);
    --glass-bg-elevated: rgba(38,38,38,0.70);
    --glass-bg-sheet:   rgba(18,18,18,0.94);
    --glass-bg-input:   rgba(38, 38, 38, 0.48);
    --glass-border:     rgba(229, 229, 229, 0.14);
    --glass-border-subtle: rgba(163, 163, 163, 0.10);
    --glass-border-focused: rgba(229, 229, 229, 0.45);
    --glass-shadow:
        0 8px 28px -4px rgba(0,0,0,0.65),
        0 2px 8px -1px rgba(0,0,0,0.45),
        inset 0 1.5px 1.5px 0 rgba(255,255,255,0.08),
        inset 0 -1px 1.5px 0 rgba(0,0,0,0.35);
    --glass-shadow-lg:
        0 18px 44px -8px rgba(0,0,0,0.75),
        0 6px 16px -3px rgba(0,0,0,0.55),
        inset 0 2px 2px 0 rgba(255,255,255,0.10),
        inset 0 -1.5px 2px 0 rgba(0,0,0,0.40);
    --bg-card:          rgba(18, 18, 18, 0.92);
    --input-bg:         rgba(38, 38, 38, 0.52);
    --input-border:     rgba(229, 229, 229, 0.14);
    --border:           rgba(163, 163, 163, 0.10);
}

[data-theme="dark_luxury"] {
    --accent:           #D4A853;
    --accent-light:     rgba(212, 168, 83, 0.18);
    --accent-dark:      #A8823E;
    --income:           #4CAF7A;
    --income-light:     rgba(76, 175, 122, 0.18);
    --expense:          #EF6E5A;
    --expense-light:    rgba(239, 110, 90, 0.18);
    --text-primary:     #F5F0E8;
    --text-secondary:   #B8A898;
    --text-tertiary:    #8A7A6A;
    --glass-fill:       linear-gradient(155deg, rgba(41,37,36,0.72) 0%, rgba(28,25,23,0.60) 55%, rgba(20,18,16,0.55) 100%);
    --glass-fill-subtle: linear-gradient(155deg, rgba(41,37,36,0.50) 0%, rgba(28,25,23,0.40) 100%);
    --glass-fill-elevated: linear-gradient(155deg, rgba(41,37,36,0.84) 0%, rgba(28,25,23,0.72) 100%);
    --glass-fill-sheet: linear-gradient(180deg, rgba(28,25,23,0.95) 0%, rgba(20,18,16,0.90) 100%);
    --glass-bg:         rgba(41, 37, 36, 0.60);
    --glass-bg-subtle:  rgba(28, 25, 23, 0.40);
    --glass-bg-elevated: rgba(41,37,36,0.75);
    --glass-bg-sheet:   rgba(28,25,23,0.93);
    --glass-bg-input:   rgba(41, 37, 36, 0.50);
    --glass-border:     rgba(212, 168, 83, 0.25);
    --glass-border-subtle: rgba(184, 168, 152, 0.18);
    --glass-border-focused: rgba(212, 168, 83, 0.60);
    --glass-shadow:
        0 8px 28px -4px rgba(0,0,0,0.50),
        0 2px 8px -1px rgba(0,0,0,0.32),
        inset 0 1.5px 1.5px 0 rgba(212,168,83,0.22),
        inset 0 -1px 1.5px 0 rgba(0,0,0,0.22);
    --glass-shadow-lg:
        0 18px 44px -8px rgba(0,0,0,0.60),
        0 6px 16px -3px rgba(0,0,0,0.38),
        inset 0 2px 2px 0 rgba(212,168,83,0.26),
        inset 0 -1.5px 2px 0 rgba(0,0,0,0.28);
    --bg-card:          rgba(28, 25, 23, 0.90);
    --input-bg:         rgba(41, 37, 36, 0.55);
    --input-border:     rgba(212, 168, 83, 0.28);
    --border:           rgba(184, 168, 152, 0.14);
}

[data-theme="deep_navy"] {
    --accent:           #60A5FA;
    --accent-light:     rgba(96, 165, 250, 0.18);
    --accent-dark:      #2563EB;
    --income:           #34D399;
    --income-light:     rgba(52, 211, 153, 0.18);
    --expense:          #F87171;
    --expense-light:    rgba(248, 113, 113, 0.18);
    --text-primary:     #E2EEFF;
    --text-secondary:   #93B4D8;
    --text-tertiary:    #5A7FA8;
    --glass-fill:       linear-gradient(155deg, rgba(13,31,60,0.72) 0%, rgba(10,22,40,0.60) 55%, rgba(6,16,32,0.55) 100%);
    --glass-fill-subtle: linear-gradient(155deg, rgba(13,31,60,0.50) 0%, rgba(10,22,40,0.40) 100%);
    --glass-fill-elevated: linear-gradient(155deg, rgba(13,31,60,0.84) 0%, rgba(10,22,40,0.72) 100%);
    --glass-fill-sheet: linear-gradient(180deg, rgba(10,22,40,0.95) 0%, rgba(6,16,32,0.92) 100%);
    --glass-bg:         rgba(13, 31, 60, 0.60);
    --glass-bg-subtle:  rgba(10, 22, 40, 0.40);
    --glass-bg-elevated: rgba(13,31,60,0.76);
    --glass-bg-sheet:   rgba(10,22,40,0.93);
    --glass-bg-input:   rgba(13, 31, 60, 0.52);
    --glass-border:     rgba(96, 165, 250, 0.25);
    --glass-border-subtle: rgba(147, 180, 216, 0.18);
    --glass-border-focused: rgba(96, 165, 250, 0.60);
    --glass-shadow:
        0 8px 28px -4px rgba(0, 4, 20, 0.55),
        0 2px 8px -1px rgba(0, 4, 20, 0.35),
        inset 0 1.5px 1.5px 0 rgba(96, 165, 250, 0.22),
        inset 0 -1px 1.5px 0 rgba(0, 0, 0, 0.25);
    --glass-shadow-lg:
        0 18px 44px -8px rgba(0, 4, 20, 0.65),
        0 6px 16px -3px rgba(0, 4, 20, 0.42),
        inset 0 2px 2px 0 rgba(96, 165, 250, 0.26),
        inset 0 -1.5px 2px 0 rgba(0, 0, 0, 0.30);
    --bg-card:          rgba(10, 22, 40, 0.90);
    --input-bg:         rgba(13, 31, 60, 0.55);
    --input-border:     rgba(96, 165, 250, 0.28);
    --border:           rgba(147, 180, 216, 0.14);
}

/* ── LIGHT / ATMOSPHERE THEMES — accent token overrides ────────────────── */

[data-theme="sunset_beige"] {
    --accent:           #D4714A;
    --accent-light:     rgba(212, 113, 74, 0.14);
    --accent-dark:      #A85238;
    --income:           #2E7D32;
    --income-light:     rgba(46, 125, 50, 0.12);
    --expense:          #B83020;
    --expense-light:    rgba(184, 48, 32, 0.12);
    --glass-border-focused: rgba(212, 113, 74, 0.65);
}

[data-theme="warm_light"],
[data-theme="desert_luxury"] {
    --accent:           #D97706;
    --accent-light:     rgba(217, 119, 6, 0.14);
    --accent-dark:      #B45309;
    --income:           #1B7A46;
    --income-light:     rgba(27, 122, 70, 0.12);
    --expense:          #BE382A;
    --expense-light:    rgba(190, 56, 42, 0.12);
    --glass-border-focused: rgba(217, 119, 6, 0.60);
}

[data-theme="desert_luxury"] {
    --accent:           #92670C;
    --accent-light:     rgba(146, 103, 12, 0.14);
    --accent-dark:      #6B4C0A;
    --glass-border-focused: rgba(146, 103, 12, 0.60);
}

[data-theme="ocean_glass"] {
    --accent:           #0891B2;
    --accent-light:     rgba(8, 145, 178, 0.14);
    --accent-dark:      #0E7490;
    --income:           #065F46;
    --income-light:     rgba(6, 95, 70, 0.12);
    --expense:          #9B1C1C;
    --expense-light:    rgba(155, 28, 28, 0.12);
    --glass-border-focused: rgba(8, 145, 178, 0.65);
}

[data-theme="mist"] {
    --accent:           #4A7FA0;
    --accent-light:     rgba(74, 127, 160, 0.12);
    --accent-dark:      #2E6080;
    --income:           #2E7D32;
    --income-light:     rgba(46, 125, 50, 0.12);
    --expense:          #BE382A;
    --expense-light:    rgba(190, 56, 42, 0.12);
    --glass-border-focused: rgba(74, 127, 160, 0.60);
}

[data-theme="nature"] {
    --accent:           #4A7C59;
    --accent-light:     rgba(74, 124, 89, 0.12);
    --accent-dark:      #2E5E3E;
    --income:           #1B6B35;
    --income-light:     rgba(27, 107, 53, 0.12);
    --expense:          #BE382A;
    --expense-light:    rgba(190, 56, 42, 0.12);
    --glass-border-focused: rgba(74, 124, 89, 0.60);
}

[data-theme="sunset"] {
    --accent:           #EA580C;
    --accent-light:     rgba(234, 88, 12, 0.14);
    --accent-dark:      #C2410C;
    --income:           #1B7A46;
    --income-light:     rgba(27, 122, 70, 0.12);
    --expense:          #9B1C1C;
    --expense-light:    rgba(155, 28, 28, 0.12);
    --glass-border-focused: rgba(234, 88, 12, 0.60);
}

[data-theme="morning_light"],
[data-theme="champagne"] {
    --accent:           #C49A4A;
    --accent-light:     rgba(196, 154, 74, 0.14);
    --accent-dark:      #9A7436;
    --income:           #1B7A46;
    --income-light:     rgba(27, 122, 70, 0.12);
    --expense:          #BE382A;
    --expense-light:    rgba(190, 56, 42, 0.12);
    --glass-border-focused: rgba(196, 154, 74, 0.60);
}

/* ── GALAXY & LUXURY LIQUID GLASS THEMES ─────────────────────────── */

[data-theme="galaxy_nebula"] {
    --accent:           #C084FC;
    --accent-light:     rgba(192, 132, 252, 0.22);
    --accent-dark:      #9333EA;
    --income:           #34D399;
    --income-light:     rgba(52, 211, 153, 0.18);
    --expense:          #F472B6;
    --expense-light:    rgba(244, 114, 182, 0.18);
    --glass-fill:       rgba(15, 12, 32, 0.65);
    --glass-border:     rgba(192, 132, 252, 0.28);
    --glass-shadow:     0 20px 50px rgba(0, 0, 0, 0.55), 0 0 35px rgba(147, 51, 234, 0.2);
    --glass-border-focused: rgba(192, 132, 252, 0.85);
}

[data-theme="cyber_aurora"] {
    --accent:           #2DD4BF;
    --accent-light:     rgba(45, 212, 191, 0.22);
    --accent-dark:      #0F766E;
    --income:           #34D399;
    --income-light:     rgba(52, 211, 153, 0.18);
    --expense:          #FB7185;
    --expense-light:    rgba(251, 113, 133, 0.18);
    --glass-fill:       rgba(6, 18, 22, 0.65);
    --glass-border:     rgba(45, 212, 191, 0.28);
    --glass-shadow:     0 20px 50px rgba(0, 0, 0, 0.55), 0 0 35px rgba(45, 212, 191, 0.18);
    --glass-border-focused: rgba(45, 212, 191, 0.85);
}

[data-theme="imperial_gold"] {
    --accent:           #FBBF24;
    --accent-light:     rgba(251, 191, 36, 0.22);
    --accent-dark:      #D97706;
    --income:           #34D399;
    --income-light:     rgba(52, 211, 153, 0.18);
    --expense:          #F87171;
    --expense-light:    rgba(248, 113, 113, 0.18);
    --glass-fill:       rgba(22, 18, 12, 0.70);
    --glass-border:     rgba(251, 191, 36, 0.32);
    --glass-shadow:     0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(245, 158, 11, 0.25);
    --glass-border-focused: rgba(251, 191, 36, 0.9);
}

[data-theme="royal_amethyst"] {
    --accent:           #D8B4FE;
    --accent-light:     rgba(216, 180, 254, 0.22);
    --accent-dark:      #A855F7;
    --income:           #4ADE80;
    --income-light:     rgba(74, 222, 128, 0.18);
    --expense:          #FB7185;
    --expense-light:    rgba(251, 113, 133, 0.18);
    --glass-fill:       rgba(24, 14, 34, 0.68);
    --glass-border:     rgba(216, 180, 254, 0.28);
    --glass-shadow:     0 20px 50px rgba(0, 0, 0, 0.58), 0 0 30px rgba(168, 85, 247, 0.22);
    --glass-border-focused: rgba(216, 180, 254, 0.85);
}

[data-theme="liquid_titanium_space"] {
    --accent:           #93C5FD;
    --accent-light:     rgba(147, 197, 253, 0.18);
    --accent-dark:      #60A5FA;
    --income:           #34D399;
    --income-light:     rgba(52, 211, 153, 0.18);
    --expense:          #F87171;
    --expense-light:    rgba(248, 113, 113, 0.18);
    --glass-fill:       rgba(20, 22, 28, 0.72);
    --glass-border:     rgba(147, 197, 253, 0.26);
    --glass-shadow:     0 20px 50px rgba(0, 0, 0, 0.62), 0 0 25px rgba(147, 197, 253, 0.15);
    --glass-border-focused: rgba(147, 197, 253, 0.85);
}

[data-theme="emerald_luxury"] {
    --accent:           #34D399;
    --accent-light:     rgba(52, 211, 153, 0.22);
    --accent-dark:      #059669;
    --income:           #10B981;
    --income-light:     rgba(16, 185, 129, 0.18);
    --expense:          #F87171;
    --expense-light:    rgba(248, 113, 113, 0.18);
    --glass-fill:       rgba(10, 24, 18, 0.68);
    --glass-border:     rgba(52, 211, 153, 0.28);
    --glass-shadow:     0 20px 50px rgba(0, 0, 0, 0.58), 0 0 30px rgba(16, 185, 129, 0.22);
    --glass-border-focused: rgba(52, 211, 153, 0.85);
}

/* ── 5 SIGNATURE SKILL-CRAFTED THEMES ───────────────────────────── */

/* 1. CỔ PHONG THỦY MẶC (Shan Shui Ink Wash & Parchment Elegance) */
[data-theme="cophong_thuy_mac"] {
    --accent:           #942923;
    --accent-light:     rgba(148, 41, 35, 0.14);
    --accent-dark:      #6B1D19;
    --income:           #1B4332;
    --income-light:     rgba(27, 67, 50, 0.12);
    --expense:          #942923;
    --expense-light:    rgba(148, 41, 35, 0.12);
    --card-chart-color: #942923;
    --text-primary:     #1C1917;
    --text-secondary:   #5C4D3C;
    --text-tertiary:    #8C7A68;
    --border:           rgba(197, 157, 95, 0.28);
    --glass-fill:       linear-gradient(155deg, rgba(253, 251, 247, 0.90) 0%, rgba(245, 239, 230, 0.80) 100%);
    --glass-fill-subtle: rgba(245, 239, 230, 0.60);
    --glass-fill-elevated: rgba(255, 255, 255, 0.94);
    --glass-fill-sheet: rgba(250, 248, 245, 0.98);
    --glass-fill-input: rgba(245, 239, 230, 0.85);
    --glass-bg:         rgba(253, 251, 247, 0.85);
    --glass-bg-subtle:  rgba(245, 239, 230, 0.60);
    --glass-bg-elevated: rgba(255, 255, 255, 0.94);
    --glass-bg-sheet:   rgba(250, 248, 245, 0.98);
    --glass-bg-input:   rgba(245, 239, 230, 0.85);
    --glass-bg-hover:   rgba(239, 232, 220, 0.92);
    --glass-border:     rgba(197, 157, 95, 0.35);
    --glass-border-subtle: rgba(197, 157, 95, 0.20);
    --glass-rim:        rgba(255, 255, 255, 0.95);
    --glass-sheen:      rgba(197, 157, 95, 0.08);
    --glass-shadow:     0 10px 32px -4px rgba(74, 52, 34, 0.10), inset 0 1.5px 1.5px rgba(255, 255, 255, 0.95);
    --glass-border-focused: rgba(148, 41, 35, 0.70);
}

[data-theme="cophong_thuy_mac"] .btn-primary,
[data-theme="cophong_thuy_mac"] .btn-add-quick {
    background: linear-gradient(135deg, #942923 0%, #7A1E19 100%) !important;
    border: 1px solid rgba(197, 157, 95, 0.5) !important;
    box-shadow: 0 4px 16px rgba(148, 41, 35, 0.3) !important;
    color: #FAF8F5 !important;
}

/* 2. HIỆN ĐẠI 3D POP (Duolingo Chunky Tactile Gamification) */
[data-theme="hien_dai_3d_pop"] {
    --accent:           #10B981;
    --accent-light:     rgba(16, 185, 129, 0.18);
    --accent-dark:      #047857;
    --income:           #059669;
    --income-light:     rgba(5, 150, 105, 0.14);
    --expense:          #E11D48;
    --expense-light:    rgba(225, 29, 72, 0.14);
    --card-chart-color: #10B981;
    --text-primary:     #0F172A;
    --text-secondary:   #334155;
    --text-tertiary:    #64748B;
    --border:           rgba(16, 185, 129, 0.24);
    --glass-fill:       linear-gradient(155deg, rgba(255, 255, 255, 0.96) 0%, rgba(240, 253, 244, 0.92) 100%);
    --glass-fill-subtle: rgba(240, 253, 244, 0.65);
    --glass-fill-elevated: #FFFFFF;
    --glass-fill-sheet: #FFFFFF;
    --glass-fill-input: #F8FAFC;
    --glass-bg:         rgba(255, 255, 255, 0.94);
    --glass-bg-subtle:  rgba(240, 253, 244, 0.65);
    --glass-bg-elevated: #FFFFFF;
    --glass-bg-sheet:   #FFFFFF;
    --glass-bg-input:   #F8FAFC;
    --glass-bg-hover:   #F1F5F9;
    --glass-border:     rgba(16, 185, 129, 0.30);
    --glass-border-subtle: rgba(16, 185, 129, 0.16);
    --glass-rim:        #FFFFFF;
    --glass-sheen:      rgba(16, 185, 129, 0.08);
    --glass-shadow:     0 8px 24px -4px rgba(16, 185, 129, 0.12), 0 4px 0 #CBD5E1;
    --glass-border-focused: #10B981;
}

[data-theme="hien_dai_3d_pop"] .btn-primary,
[data-theme="hien_dai_3d_pop"] .btn-add-quick {
    background: #10B981 !important;
    border: none !important;
    border-bottom: 4px solid #047857 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    transition: transform 0.08s ease, border-bottom 0.08s ease, box-shadow 0.08s ease !important;
}

[data-theme="hien_dai_3d_pop"] .btn-primary:active,
[data-theme="hien_dai_3d_pop"] .btn-add-quick:active {
    transform: translateY(3px) !important;
    border-bottom: 1px solid #047857 !important;
    box-shadow: 0 1px 4px rgba(16, 185, 129, 0.2) !important;
}

[data-theme="hien_dai_3d_pop"] .glass-card {
    border-radius: 20px;
    border-bottom: 3.5px solid rgba(16, 185, 129, 0.28);
}

/* 3. LIQUID QUARTZ KÍNH LỎNG (Apple Liquid Glass & Dark Obsidian) */
[data-theme="liquid_quartz_glass"] {
    --accent:           #D4AF37;
    --accent-light:     rgba(212, 175, 55, 0.20);
    --accent-dark:      #B48C28;
    --income:           #34D399;
    --income-light:     rgba(52, 211, 153, 0.18);
    --expense:          #FB7185;
    --expense-light:    rgba(251, 113, 133, 0.18);
    --card-chart-color: #D4AF37;
    --text-primary:     #F8FAFC;
    --text-secondary:   #CBD5E1;
    --text-tertiary:    #94A3B8;
    --border:           rgba(255, 255, 255, 0.14);
    --glass-fill:       linear-gradient(160deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.04) 100%);
    --glass-fill-subtle: rgba(255, 255, 255, 0.05);
    --glass-fill-elevated: rgba(26, 26, 32, 0.85);
    --glass-fill-sheet: rgba(14, 14, 18, 0.94);
    --glass-fill-input: rgba(255, 255, 255, 0.08);
    --glass-bg:         rgba(20, 20, 26, 0.70);
    --glass-bg-subtle:  rgba(255, 255, 255, 0.05);
    --glass-bg-elevated: rgba(26, 26, 32, 0.85);
    --glass-bg-sheet:   rgba(14, 14, 18, 0.94);
    --glass-bg-input:   rgba(255, 255, 255, 0.08);
    --glass-bg-hover:   rgba(255, 255, 255, 0.12);
    --glass-border:     rgba(255, 255, 255, 0.16);
    --glass-border-subtle: rgba(255, 255, 255, 0.08);
    --glass-rim:        rgba(255, 255, 255, 0.26);
    --glass-sheen:      rgba(212, 175, 55, 0.12);
    --glass-shadow:     0 24px 60px rgba(0, 0, 0, 0.70), 0 0 35px rgba(212, 175, 55, 0.16), inset 0 1.2px 1.2px rgba(255, 255, 255, 0.25);
    --glass-border-focused: rgba(212, 175, 55, 0.85);
}

[data-theme="liquid_quartz_glass"] .glass-card,
[data-theme="liquid_quartz_glass"] .bottom-nav,
[data-theme="liquid_quartz_glass"] .modal-sheet {
    backdrop-filter: blur(28px) saturate(190%) brightness(105%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(190%) brightness(105%) !important;
}

[data-theme="liquid_quartz_glass"] .btn-primary,
[data-theme="liquid_quartz_glass"] .btn-add-quick {
    background: linear-gradient(135deg, #D4AF37 0%, #AA8022 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
    color: #0A0A0C !important;
    font-weight: 800 !important;
}

/* 4. CYBERPUNK HUD VỊ LAI (Neon Cyan, Hot Pink & Matrix HUD) */
[data-theme="cyberpunk_hud"] {
    --accent:           #00F0FF;
    --accent-light:     rgba(0, 240, 255, 0.22);
    --accent-dark:      #00A3AD;
    --income:           #10B981;
    --income-light:     rgba(16, 185, 129, 0.20);
    --expense:          #FF2A6D;
    --expense-light:    rgba(255, 42, 109, 0.20);
    --card-chart-color: #00F0FF;
    --text-primary:     #00F0FF;
    --text-secondary:   #A5F3FC;
    --text-tertiary:    #0891B2;
    --border:           rgba(0, 240, 255, 0.35);
    --glass-fill:       linear-gradient(160deg, rgba(5, 12, 24, 0.85) 0%, rgba(2, 6, 16, 0.90) 100%);
    --glass-fill-subtle: rgba(0, 240, 255, 0.06);
    --glass-fill-elevated: rgba(8, 20, 36, 0.92);
    --glass-fill-sheet: rgba(3, 8, 18, 0.96);
    --glass-fill-input: rgba(0, 240, 255, 0.08);
    --glass-bg:         rgba(5, 12, 24, 0.85);
    --glass-bg-subtle:  rgba(0, 240, 255, 0.06);
    --glass-bg-elevated: rgba(8, 20, 36, 0.92);
    --glass-bg-sheet:   rgba(3, 8, 18, 0.96);
    --glass-bg-input:   rgba(0, 240, 255, 0.08);
    --glass-bg-hover:   rgba(0, 240, 255, 0.15);
    --glass-border:     rgba(0, 240, 255, 0.35);
    --glass-border-subtle: rgba(0, 240, 255, 0.18);
    --glass-rim:        rgba(0, 240, 255, 0.50);
    --glass-sheen:      rgba(0, 240, 255, 0.14);
    --glass-shadow:     0 20px 50px rgba(0, 0, 0, 0.80), 0 0 24px rgba(0, 240, 255, 0.25), inset 0 0 16px rgba(0, 240, 255, 0.06);
    --glass-border-focused: #00F0FF;
}

[data-theme="cyberpunk_hud"] .glass-card {
    border: 1px solid rgba(0, 240, 255, 0.35);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.70), 0 0 20px rgba(0, 240, 255, 0.18);
}

[data-theme="cyberpunk_hud"] .btn-primary,
[data-theme="cyberpunk_hud"] .btn-add-quick {
    background: linear-gradient(135deg, #00F0FF 0%, #0088AA 100%) !important;
    border: 1px solid #00F0FF !important;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.50) !important;
    color: #020617 !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 5. NEO-BRUTALISM FUNKY (Stark Black Borders, Offset Hard Shadows & Pop Yellow) */
[data-theme="neo_brutalism_pop"] {
    --accent:           #000000;
    --accent-light:     rgba(0, 0, 0, 0.10);
    --accent-dark:      #171717;
    --income:           #059669;
    --income-light:     rgba(5, 150, 105, 0.18);
    --expense:          #DC2626;
    --expense-light:    rgba(220, 38, 38, 0.18);
    --card-chart-color: #000000;
    --text-primary:     #000000;
    --text-secondary:   #1F2937;
    --text-tertiary:    #4B5563;
    --border:           #000000;
    --glass-fill:       #FFFFFF;
    --glass-fill-subtle: #FEF9C3;
    --glass-fill-elevated: #FFFFFF;
    --glass-fill-sheet: #FFFBEB;
    --glass-fill-input: #FFFFFF;
    --glass-bg:         #FFFFFF;
    --glass-bg-subtle:  #FEF9C3;
    --glass-bg-elevated: #FFFFFF;
    --glass-bg-sheet:   #FFFBEB;
    --glass-bg-input:   #FFFFFF;
    --glass-bg-hover:   #FEF08A;
    --glass-border:     #000000;
    --glass-border-subtle: #000000;
    --glass-rim:        #000000;
    --glass-sheen:      transparent;
    --glass-shadow:     4px 4px 0px #000000;
    --glass-border-focused: #000000;
}

[data-theme="neo_brutalism_pop"] .glass-card {
    border: 2.5px solid #000000 !important;
    border-radius: 14px !important;
    box-shadow: 4px 4px 0px #000000 !important;
    background: #FFFFFF !important;
}

[data-theme="neo_brutalism_pop"] .btn-primary,
[data-theme="neo_brutalism_pop"] .btn-add-quick {
    background: #FDE047 !important;
    border: 2.5px solid #000000 !important;
    box-shadow: 3.5px 3.5px 0px #000000 !important;
    color: #000000 !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
    transition: transform 0.08s ease, box-shadow 0.08s ease !important;
}

[data-theme="neo_brutalism_pop"] .btn-primary:active,
[data-theme="neo_brutalism_pop"] .btn-add-quick:active {
    transform: translate(2px, 2px) !important;
    box-shadow: 1.5px 1.5px 0px #000000 !important;
}

[data-theme="neo_brutalism_pop"] .bottom-nav {
    border-top: 2.5px solid #000000 !important;
    box-shadow: 0 -4px 0px rgba(0, 0, 0, 0.15) !important;
    background: #FFFBEB !important;
}

/* ── DARK THEME — shared surface token helpers applied via .theme-dark ─── */

.theme-dark body,
.theme-dark #app-shell {
    color-scheme: dark;
}

.theme-dark .glass-card,
.theme-dark .bottom-nav,
.theme-dark .modal-sheet,
.theme-dark .page-header {
    backdrop-filter: blur(24px) saturate(180%) brightness(90%);
}


/* ============================================================================
   PREMIUM THEME SYSTEM v2.0 — 20 Themes with Full Visual Language Override
   Each theme sets CSS vars that cascade to ALL surfaces: cards, nav, modals,
   charts, inputs, buttons, bottom sheets, and overlays.
   ============================================================================ */

/* Shared transition for smooth theme switching */
*,
*::before,
*::after {
    --_theme-trans: background-color 0.35s ease, background 0.35s ease,
        border-color 0.35s ease, color 0.25s ease, box-shadow 0.35s ease;
}

/* ── LIGHT THEMES ─────────────────────────────────────────── */

[data-theme="beige"] {
    --accent: #8B7355;
    --accent-light: rgba(139,115,85,0.12);
    --accent-dark: #6B5540;
    --income: #2E7D52;
    --expense: #C0392B;
    --glass-fill: linear-gradient(155deg,rgba(255,255,255,0.64) 0%,rgba(255,255,255,0.46) 100%);
    --glass-border: rgba(255,255,255,0.88);
    --glass-shadow: 0 8px 28px -4px rgba(80,60,40,0.08), inset 0 1.5px 1.5px rgba(255,255,255,0.95);
    --card-chart-color: #8B7355;
}

[data-theme="warm_sand"] {
    --accent: #A07850;
    --accent-light: rgba(160,120,80,0.12);
    --accent-dark: #7A5C38;
    --income: #2E8B5A;
    --expense: #C0392B;
    --glass-fill: linear-gradient(155deg,rgba(255,252,245,0.7) 0%,rgba(248,240,225,0.55) 100%);
    --glass-border: rgba(255,255,255,0.85);
    --card-chart-color: #A07850;
}

[data-theme="champagne"] {
    --accent: #B8976A;
    --accent-light: rgba(184,151,106,0.12);
    --accent-dark: #8C7050;
    --income: #2E7D52;
    --expense: #BE3A2A;
    --glass-fill: linear-gradient(155deg,rgba(255,252,248,0.72) 0%,rgba(245,235,220,0.56) 100%);
    --glass-border: rgba(255,255,255,0.88);
    --card-chart-color: #B8976A;
}

[data-theme="cream"] {
    --accent: #9E8060;
    --accent-light: rgba(158,128,96,0.12);
    --accent-dark: #7A6045;
    --income: #2A7A4A;
    --expense: #C04535;
    --glass-fill: linear-gradient(155deg,rgba(255,253,249,0.68) 0%,rgba(242,234,222,0.52) 100%);
    --glass-border: rgba(255,255,255,0.82);
    --card-chart-color: #9E8060;
}

[data-theme="soft_stone"] {
    --accent: #7A7268;
    --accent-light: rgba(122,114,104,0.12);
    --accent-dark: #5E5850;
    --income: #2E7A50;
    --expense: #BA3828;
    --glass-fill: linear-gradient(155deg,rgba(255,255,254,0.65) 0%,rgba(235,233,228,0.50) 100%);
    --glass-border: rgba(255,255,255,0.80);
    --card-chart-color: #7A7268;
}

[data-theme="paper"] {
    --accent: #8B7050;
    --accent-light: rgba(139,112,80,0.12);
    --accent-dark: #6A5438;
    --income: #2C7848;
    --expense: #BE3A2A;
    --glass-fill: linear-gradient(155deg,rgba(255,252,244,0.66) 0%,rgba(242,232,215,0.50) 100%);
    --glass-border: rgba(255,255,255,0.84);
    --card-chart-color: #8B7050;
}

[data-theme="morning_light"] {
    --accent: #C8914A;
    --accent-light: rgba(200,145,74,0.12);
    --accent-dark: #9E6E38;
    --income: #2E7A50;
    --expense: #C0392B;
    --glass-fill: linear-gradient(155deg,rgba(255,252,240,0.70) 0%,rgba(248,236,215,0.54) 100%);
    --glass-border: rgba(255,255,255,0.88);
    --card-chart-color: #C8914A;
}

[data-theme="sunset_beige"] {
    --accent: #C86A44;
    --accent-light: rgba(200,106,68,0.14);
    --accent-dark: #9E4E30;
    --income: #2A8A52;
    --expense: #D04030;
    --glass-fill: linear-gradient(155deg,rgba(255,245,235,0.70) 0%,rgba(250,220,195,0.54) 100%);
    --glass-border: rgba(255,255,255,0.84);
    --card-chart-color: #C86A44;
}

[data-theme="desert_luxury"] {
    --accent: #D4A24A;
    --accent-light: rgba(212,162,74,0.14);
    --accent-dark: #A87C30;
    --income: #2A8A52;
    --expense: #C84032;
    --glass-fill: linear-gradient(155deg,rgba(255,248,230,0.72) 0%,rgba(248,230,195,0.56) 100%);
    --glass-border: rgba(255,255,255,0.86);
    --card-chart-color: #D4A24A;
}

/* ── DARK THEMES ──────────────────────────────────────────── */

[data-theme="dark_luxury"],
[data-theme="graphite"],
[data-theme="midnight"],
[data-theme="black_glass"],
[data-theme="deep_navy"],
[data-theme="liquid_quartz_glass"],
[data-theme="cyberpunk_hud"] {
    --text-primary: #F0EDE8;
    --text-secondary: #ACA8A2;
    --text-tertiary: #706C68;
    --border: rgba(255,255,255,0.08);
    --glass-fill: linear-gradient(155deg,rgba(255,255,255,0.09) 0%,rgba(255,255,255,0.06) 100%);
    --glass-fill-subtle: rgba(255,255,255,0.05);
    --glass-fill-elevated: rgba(255,255,255,0.12);
    --glass-fill-sheet: rgba(22,22,26,0.92);
    --glass-fill-input: rgba(255,255,255,0.08);
    --glass-bg: rgba(255,255,255,0.08);
    --glass-bg-subtle: rgba(255,255,255,0.05);
    --glass-bg-elevated: rgba(255,255,255,0.11);
    --glass-bg-sheet: rgba(22,22,26,0.92);
    --glass-bg-input: rgba(255,255,255,0.07);
    --glass-bg-hover: rgba(255,255,255,0.12);
    --glass-border: rgba(255,255,255,0.12);
    --glass-border-subtle: rgba(255,255,255,0.07);
    --glass-rim: rgba(255,255,255,0.15);
    --glass-sheen: rgba(255,255,255,0.06);
}

[data-theme="dark_luxury"] {
    --accent: #D4AA6A;
    --accent-light: rgba(212,170,106,0.18);
    --accent-dark: #A88040;
    --income: #40B875;
    --expense: #F07070;
    --glass-shadow: 0 12px 36px -6px rgba(0,0,0,0.55), inset 0 1.5px 1.5px rgba(255,255,255,0.10);
    --card-chart-color: #D4AA6A;
}

[data-theme="graphite"] {
    --accent: #A0A0A8;
    --accent-light: rgba(160,160,168,0.15);
    --accent-dark: #7C7C84;
    --income: #4CAF82;
    --expense: #EF6060;
    --glass-shadow: 0 12px 36px -6px rgba(0,0,0,0.60), inset 0 1.5px 1.5px rgba(255,255,255,0.08);
    --card-chart-color: #A0A0A8;
}

[data-theme="midnight"] {
    --accent: #7B9FE0;
    --accent-light: rgba(123,159,224,0.18);
    --accent-dark: #5580C0;
    --income: #50C88A;
    --expense: #F07878;
    --glass-shadow: 0 14px 40px -6px rgba(0,0,0,0.65), inset 0 1.5px 1.5px rgba(255,255,255,0.08);
    --card-chart-color: #7B9FE0;
}

[data-theme="black_glass"] {
    --accent: #D0D0D8;
    --accent-light: rgba(208,208,216,0.12);
    --accent-dark: #A0A0A8;
    --income: #52D090;
    --expense: #F08080;
    --glass-shadow: 0 16px 48px -6px rgba(0,0,0,0.72), inset 0 1.5px 1.5px rgba(255,255,255,0.07);
    --card-chart-color: #D0D0D8;
}

[data-theme="deep_navy"] {
    --accent: #6A9FD8;
    --accent-light: rgba(106,159,216,0.18);
    --accent-dark: #4A7EB8;
    --income: #50CC88;
    --expense: #EE7070;
    --glass-shadow: 0 14px 42px -6px rgba(0,0,20,0.70), inset 0 1.5px 1.5px rgba(255,255,255,0.09);
    --card-chart-color: #6A9FD8;
}

/* ── ATMOSPHERE THEMES ────────────────────────────────────── */

[data-theme="nature"],
[data-theme="forest_calm"] {
    --accent: #5A8A55;
    --accent-light: rgba(90,138,85,0.14);
    --accent-dark: #3E6638;
    --income: #2A8A50;
    --expense: #C03828;
    --glass-fill: linear-gradient(155deg,rgba(245,252,240,0.66) 0%,rgba(230,242,225,0.50) 100%);
    --glass-border: rgba(255,255,255,0.82);
    --card-chart-color: #5A8A55;
}

[data-theme="mist"] {
    --accent: #6080A0;
    --accent-light: rgba(96,128,160,0.14);
    --accent-dark: #486080;
    --income: #2A7A50;
    --expense: #BE3830;
    --glass-fill: linear-gradient(155deg,rgba(240,245,252,0.66) 0%,rgba(220,232,245,0.50) 100%);
    --glass-border: rgba(255,255,255,0.80);
    --card-chart-color: #6080A0;
}

[data-theme="sunset"],
[data-theme="sunset_amber"] {
    --accent: #D06030;
    --accent-light: rgba(208,96,48,0.14);
    --accent-dark: #A04020;
    --income: #2A8040;
    --expense: #C04030;
    --glass-fill: linear-gradient(155deg,rgba(255,242,230,0.70) 0%,rgba(252,220,195,0.54) 100%);
    --glass-border: rgba(255,255,255,0.80);
    --card-chart-color: #D06030;
}

[data-theme="architecture"] {
    --accent: #88807A;
    --accent-light: rgba(136,128,122,0.12);
    --accent-dark: #605850;
    --income: #2E7A50;
    --expense: #BA3828;
    --glass-fill: linear-gradient(155deg,rgba(248,248,246,0.65) 0%,rgba(232,230,226,0.50) 100%);
    --glass-border: rgba(255,255,255,0.78);
    --card-chart-color: #88807A;
}

[data-theme="warm_light"] {
    --accent: #E09830;
    --accent-light: rgba(224,152,48,0.14);
    --accent-dark: #B07018;
    --income: #2A8850;
    --expense: #C83828;
    --glass-fill: linear-gradient(155deg,rgba(255,252,230,0.72) 0%,rgba(252,238,195,0.56) 100%);
    --glass-border: rgba(255,255,255,0.86);
    --card-chart-color: #E09830;
}

[data-theme="ocean_glass"] {
    --accent: #2A9090;
    --accent-light: rgba(42,144,144,0.14);
    --accent-dark: #1E6C6C;
    --income: #2A9058;
    --expense: #C03838;
    --glass-fill: linear-gradient(155deg,rgba(230,248,250,0.68) 0%,rgba(200,235,238,0.52) 100%);
    --glass-border: rgba(255,255,255,0.82);
    --card-chart-color: #2A9090;
}

[data-theme="default"] {
    --accent: #876E55;
    --accent-light: rgba(135,110,85,0.12);
    --accent-dark: #67523E;
    --income: #1B7A46;
    --expense: #BE382A;
    --card-chart-color: #876E55;
}

/* ============================================================================
   CHART BAR FILL — uses per-theme chart color
   ============================================================================ */
.chart-bar-fill {
    background: linear-gradient(180deg, var(--card-chart-color, var(--accent)) 0%,
        rgba(var(--card-chart-color, var(--accent)), 0.6) 100%);
}

/* ============================================================================
   PREMIUM KPI CARDS
   ============================================================================ */
.kpi-card {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.kpi-card-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.kpi-card-val {
    font-size: 1.28rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}
.kpi-card-val.income { color: var(--income); }
.kpi-card-val.expense { color: var(--expense); }

.stats-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.stats-kpi-grid .kpi-card:last-child {
    grid-column: span 2;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.stats-kpi-grid .kpi-card:last-child .kpi-card-val {
    font-size: 1.5rem;
    color: var(--accent);
}

/* ============================================================================
   STATS RANGE SCROLL
   ============================================================================ */
.stats-range-scroll {
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: 18px;
    padding-bottom: 4px;
}
.stats-range-scroll::-webkit-scrollbar { display: none; }
.stats-filter-segmented {
    white-space: nowrap;
    display: inline-flex;
    min-width: 100%;
}

/* ============================================================================
   INSIGHTS ROW
   ============================================================================ */
.insights-row {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.insights-row::-webkit-scrollbar { display: none; }
.insight-card {
    flex: 0 0 auto;
    min-width: 140px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.insight-lbl {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.insight-val {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

/* ============================================================================
   BAR CHART — PREMIUM INTERACTIVE
   ============================================================================ */
.stats-chart-container {
    min-height: 180px;
    padding: 4px;
    position: relative;
}

.analytics-chart-flex {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 160px;
    padding: 20px 0 28px;
    overflow-x: auto;
    scrollbar-width: none;
}
.analytics-chart-flex::-webkit-scrollbar { display: none; }

.chart-col {
    flex: 1;
    min-width: 24px;
    max-width: 48px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    cursor: pointer;
}
.chart-col:hover .chart-bar-fill {
    filter: brightness(1.15) saturate(1.2);
}
.chart-col.has-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30,25,20,0.88);
    color: #FFF;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 8px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 10;
}
.chart-col.tooltip-active::after { opacity: 1; }

.chart-bar-wrap {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.04);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    position: relative;
}
html.theme-dark .chart-bar-wrap {
    background: rgba(255,255,255,0.07);
}

.chart-bar-fill {
    width: 100%;
    background: linear-gradient(180deg, var(--accent) 0%, rgba(135,110,85,0.6) 100%);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: height 0.7s cubic-bezier(0.16,1,0.3,1);
    position: relative;
}
.chart-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(180deg,rgba(255,255,255,0.25) 0%,transparent 100%);
    border-radius: inherit;
}
.chart-bar-fill.peak {
    background: linear-gradient(180deg, var(--expense) 0%, rgba(190,56,42,0.65) 100%);
    box-shadow: 0 0 12px rgba(190,56,42,0.35);
}

.chart-bar-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-tertiary);
    margin-top: 4px;
    text-align: center;
    white-space: nowrap;
    letter-spacing: -0.2px;
}
.chart-bar-label.today-label {
    color: var(--accent);
    font-weight: 800;
}

/* ============================================================================
   RATIO BAR
   ============================================================================ */
.ratio-progress-bar {
    display: flex;
    width: 100%;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(0,0,0,0.06);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    margin-top: 12px;
}
html.theme-dark .ratio-progress-bar {
    background: rgba(255,255,255,0.07);
}
.ratio-fill-income {
    background: linear-gradient(90deg, var(--income), rgba(40,167,90,0.75));
    transition: width 0.7s cubic-bezier(0.16,1,0.3,1);
    height: 100%;
}
.ratio-fill-expense {
    background: linear-gradient(90deg, rgba(190,56,42,0.75), var(--expense));
    transition: width 0.7s cubic-bezier(0.16,1,0.3,1);
    height: 100%;
}

/* ============================================================================
   CATEGORY BARS — ANIMATED PROGRESS
   ============================================================================ */
.cat-bar-bg {
    height: 6px;
    border-radius: 999px;
    background: rgba(0,0,0,0.06);
    overflow: hidden;
    margin-top: 8px;
}
html.theme-dark .cat-bar-bg { background: rgba(255,255,255,0.08); }

.cat-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.8s cubic-bezier(0.16,1,0.3,1);
}

/* ============================================================================
   PREMIUM PHOTO ACTIONS (Camera + Gallery)
   ============================================================================ */
.photo-action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}
.btn-photo-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 12px;
    border-radius: var(--radius-lg);
    background: var(--glass-fill);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1.5px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--spring-quick);
    letter-spacing: 0.2px;
    position: relative;
    overflow: hidden;
}
.btn-photo-action::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 40%;
    background: linear-gradient(180deg,rgba(255,255,255,0.28) 0%,transparent 100%);
    pointer-events: none;
}
.btn-photo-action svg, .btn-photo-action .photo-btn-icon {
    font-size: 1.4rem;
    color: var(--accent);
}
.btn-photo-action:hover {
    background: var(--glass-fill-elevated);
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--glass-shadow-lg);
}
.btn-photo-action:active { transform: scale(0.96); }

/* ============================================================================
   PREMIUM THEME CAROUSEL
   ============================================================================ */
.theme-carousel-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding: 16px 24px 28px;
    scrollbar-width: none;
    max-height: 72vh;
    align-items: center;
}
.theme-carousel-container::-webkit-scrollbar { display: none; }

.theme-carousel-container .theme-tile-card {
    flex: 0 0 190px;
    scroll-snap-align: center;
    transform: scale(0.91);
    opacity: 0.7;
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1),
                opacity 0.4s ease,
                border-color 0.3s ease,
                box-shadow 0.4s ease;
}
.theme-carousel-container .theme-tile-card.center-snap {
    transform: scale(1.04);
    opacity: 1;
    box-shadow: 0 20px 50px rgba(0,0,0,0.20), 0 6px 16px rgba(0,0,0,0.10);
}
.theme-carousel-container .theme-tile-card.active {
    transform: scale(1.04);
    opacity: 1;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2.5px var(--accent), 0 20px 50px rgba(0,0,0,0.22);
}
.theme-tile-swatch {
    height: 128px;
    width: 100%;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 10px;
    overflow: hidden;
}
.theme-tile-swatch::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.15) 100%);
    pointer-events: none;
}
.theme-active-badge {
    font-size: 0.68rem;
    font-weight: 800;
    color: #FFF;
    background: var(--accent);
    padding: 3px 9px;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    letter-spacing: 0.2px;
    position: relative;
    z-index: 2;
}
.theme-tile-info {
    padding: 10px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.theme-tile-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}
.theme-tile-group {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    font-weight: 500;
}

/* ============================================================================
   DARK THEME BASE OVERRIDES — applied via JS html.theme-dark
   ============================================================================ */
html.theme-dark .app-header {
    background: rgba(15,15,18,0.78);
    border-bottom-color: rgba(255,255,255,0.06);
}
html.theme-dark .bottom-nav {
    background: rgba(12,12,16,0.85);
    border-top-color: rgba(255,255,255,0.06);
}
html.theme-dark .card {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.10);
}
html.theme-dark .bottom-sheet {
    background: linear-gradient(180deg,rgba(24,24,28,0.96) 0%,rgba(18,18,22,0.98) 100%);
    border-color: rgba(255,255,255,0.10);
}
html.theme-dark .modal-overlay {
    background: rgba(0,0,0,0.72);
}
html.theme-dark .form-input,
html.theme-dark .form-select,
html.theme-dark textarea {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.14);
    color: var(--text-primary);
}
html.theme-dark .tabs-segmented {
    background: rgba(255,255,255,0.06);
}
html.theme-dark .tab-seg-item.active {
    background: rgba(255,255,255,0.14);
    color: var(--text-primary);
}
html.theme-dark .calendar-day-item.active {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.22);
}
html.theme-dark .btn-primary {
    background: var(--accent);
    color: #18181C;
}
html.theme-dark .emotion-chip,
html.theme-dark .emotion-card {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.10);
}
html.theme-dark .emotion-card.active {
    background: rgba(255,255,255,0.12);
    border-color: var(--accent);
}
html.theme-dark .toast-item {
    background: rgba(20,20,24,0.92);
    border-color: rgba(255,255,255,0.12);
}
html.theme-dark .chart-bar-wrap {
    background: rgba(255,255,255,0.06);
}
html.theme-dark .goal-progress-bg,
html.theme-dark .cat-bar-bg {
    background: rgba(255,255,255,0.08);
}
html.theme-dark .day-summary-stat {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.08);
}
html.theme-dark .btn-fab {
    box-shadow: 0 8px 28px rgba(0,0,0,0.5), inset 0 1px 2px rgba(255,255,255,0.2);
}

/* ============================================================================
   PREMIUM ADD MODAL LAYOUT (Photo section)
   ============================================================================ */
.modal-photo-section {
    border-top: 1px solid var(--glass-border);
    padding-top: 14px;
    margin-top: 4px;
}
.modal-photo-section-lbl {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

/* ============================================================================
   FINANCE DAILY NET INDICATOR
   ============================================================================ */
.day-net-indicator {
    font-size: 0.82rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1.5px solid;
}
.day-net-indicator.positive {
    color: var(--income);
    border-color: var(--income);
    background: rgba(27,122,70,0.08);
}
.day-net-indicator.negative {
    color: var(--expense);
    border-color: var(--expense);
    background: rgba(190,56,42,0.08);
}
.day-net-indicator.neutral {
    color: var(--text-tertiary);
    border-color: var(--text-tertiary);
    background: transparent;
}

/* ============================================================================
   SECTION HEADER PREMIUM
   ============================================================================ */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    margin-top: 22px;
}
.section-title {
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}

/* ============================================================================
   EMPTY STATE PREMIUM
   ============================================================================ */
.empty-state-card {
    text-align: center;
    padding: 36px 24px;
    color: var(--text-tertiary);
    font-size: 0.9rem;
    font-weight: 500;
}
.empty-state-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
    opacity: 0.6;
}

/* ============================================================================
   GLOBAL TACTILE SPRING — Pressable feels
   ============================================================================ */
.card, .tx-item, .journal-item, .emotion-card, .theme-tile-card, .kpi-card,
.btn-photo-action, .calendar-day-item {
    cursor: pointer;
}

/* Active press state for all interactive elements */
.card:active:not(.balance-card), .tx-item:active, .journal-item:active,
.btn-photo-action:active, .calendar-day-item:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   INTERACTIVE MONTHLY CALENDAR & GROUPED HISTORY (APPLE LIQUID GLASS 3D)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Interactive Calendar Card ── */
.calendar-interactive-card {
    position: relative;
    border-radius: var(--radius-xl);
    background: var(--glass-fill);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    overflow: hidden;
    transform-style: preserve-3d;
}

.calendar-interactive-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7) 30%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0.7) 70%, transparent);
    pointer-events: none;
    z-index: 2;
}

html.theme-dark .calendar-interactive-card::before {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25) 30%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.25) 70%, transparent);
}

/* 3D Specular Sheen Layer */
.calendar-interactive-card::after,
.balance-card::after,
.kpi-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(
        circle 240px at var(--sheen-x, 50%) var(--sheen-y, 0%),
        rgba(255, 255, 255, 0.28) 0%,
        rgba(255, 255, 255, 0.04) 50%,
        transparent 80%
    );
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

html.theme-dark .calendar-interactive-card::after,
html.theme-dark .balance-card::after,
html.theme-dark .kpi-card::after {
    background: radial-gradient(
        circle 240px at var(--sheen-x, 50%) var(--sheen-y, 0%),
        rgba(255, 255, 255, 0.16) 0%,
        rgba(255, 255, 255, 0.02) 50%,
        transparent 80%
    );
}

/* Calendar Header Bar */
.cal-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.cal-month-title-wrap {
    text-align: center;
    flex: 1;
}

.cal-month-title {
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -0.2px;
    margin: 0;
    color: var(--text-primary);
}

.cal-month-tx-count {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    font-weight: 600;
}

.cal-nav-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: var(--glass-fill);
    color: var(--text-primary);
    font-size: 1.25rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, border-color 0.2s ease;
    user-select: none;
}

.cal-nav-btn:hover {
    background: rgba(255,255,255,0.7);
    border-color: var(--accent);
}

.cal-nav-btn:active {
    transform: scale(0.9);
}

html.theme-dark .cal-nav-btn:hover {
    background: rgba(255,255,255,0.12);
}

.cal-btn-today {
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--glass-border);
    background: var(--accent-light);
    color: var(--accent);
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.18s ease;
}

.cal-btn-today:active {
    transform: scale(0.92);
}

/* Month Financial Summary Strip */
.cal-month-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    background: rgba(0, 0, 0, 0.03);
    margin-bottom: 14px;
}

html.theme-dark .cal-month-summary-grid {
    background: rgba(255, 255, 255, 0.04);
}

.cal-mini-stat {
    text-align: center;
}

.cal-mini-lbl {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}

.cal-mini-stat strong {
    font-size: 0.86rem;
    font-weight: 800;
}

/* Weekdays Row */
.cal-weekdays-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-tertiary);
    margin-bottom: 8px;
    user-select: none;
}

/* Matrix Grid */
.cal-matrix-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    margin-bottom: 12px;
}

.cal-cell {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

html.theme-dark .cal-cell {
    background: rgba(255, 255, 255, 0.04);
}

.cal-cell.empty {
    background: transparent;
    cursor: default;
    border: none;
}

.cal-cell:not(.empty):hover {
    background: rgba(255, 255, 255, 0.6);
    transform: scale(1.06);
    z-index: 1;
}

html.theme-dark .cal-cell:not(.empty):hover {
    background: rgba(255, 255, 255, 0.12);
}

.cal-cell.today {
    border-color: var(--accent);
    background: var(--accent-light);
    font-weight: 800;
}

.cal-cell.today .cal-day-num {
    color: var(--accent-dark);
}

html.theme-dark .cal-cell.today .cal-day-num {
    color: var(--accent);
}

.cal-cell.selected {
    border-color: var(--accent);
    background: var(--accent);
    color: #FFFFFF !important;
    transform: scale(1.08);
    box-shadow: 0 4px 14px rgba(var(--accent-rgb, 180, 130, 20), 0.35);
    z-index: 2;
}

.cal-cell.selected .cal-day-num {
    color: #FFFFFF !important;
    font-weight: 800;
}

.cal-day-num {
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
}

/* Dots */
.cal-dots {
    display: flex;
    gap: 3px;
    margin-top: 3px;
    height: 4px;
    align-items: center;
}

.cal-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
}

.cal-dot.income {
    background-color: var(--income);
}

.cal-dot.expense {
    background-color: var(--expense);
}

.cal-cell.selected .cal-dot {
    background-color: #FFFFFF;
}

/* Selected Day Banner */
.cal-selected-day-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid var(--glass-border);
}

html.theme-dark .cal-selected-day-banner {
    background: rgba(255, 255, 255, 0.03);
}

.cal-badge-today {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--accent);
    color: #FFFFFF;
    letter-spacing: 0.3px;
}

/* ── Month & Year Grouped Cards ── */
.month-history-card,
.year-history-card {
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease;
}

.month-history-card:hover,
.year-history-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

.month-card-header:hover,
.year-card-header:hover {
    background: rgba(255, 255, 255, 0.25);
}

html.theme-dark .month-card-header:hover,
html.theme-dark .year-card-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

.stitch2-pointer-events-none {
  pointer-events: none
}

.stitch2-pointer-events-auto {
  pointer-events: auto
}

.stitch2-fixed {
  position: fixed
}

.stitch2-absolute {
  position: absolute
}

.stitch2-relative {
  position: relative
}

.stitch2-inset-0 {
  inset: 0px
}

.stitch2-inset-x-0 {
  left: 0px;
  right: 0px
}

.stitch2-inset-x-4 {
  left: 1rem;
  right: 1rem
}

.stitch2-inset-x-6 {
  left: 1.5rem;
  right: 1.5rem
}

.stitch2--bottom-0 {
  bottom: -0px
}

.stitch2--bottom-0\.5 {
  bottom: -0.125rem
}

.stitch2--bottom-1 {
  bottom: -0.25rem
}

.stitch2--bottom-16 {
  bottom: -4rem
}

.stitch2--bottom-6 {
  bottom: -1.5rem
}

.stitch2--left-12 {
  left: -3rem
}

.stitch2--left-40 {
  left: -10rem
}

.stitch2--right-0 {
  right: -0px
}

.stitch2--right-0\.5 {
  right: -0.125rem
}

.stitch2--right-1 {
  right: -0.25rem
}

.stitch2--right-12 {
  right: -3rem
}

.stitch2--right-16 {
  right: -4rem
}

.stitch2--right-40 {
  right: -10rem
}

.stitch2--right-6 {
  right: -1.5rem
}

.stitch2--top-0 {
  top: -0px
}

.stitch2--top-0\.5 {
  top: -0.125rem
}

.stitch2--top-1 {
  top: -0.25rem
}

.stitch2--top-10 {
  top: -2.5rem
}

.stitch2--top-11 {
  top: -2.75rem
}

.stitch2--top-12 {
  top: -3rem
}

.stitch2--top-16 {
  top: -4rem
}

.stitch2--top-\[20\%\] {
  top: -20%
}

.stitch2-bottom-0 {
  bottom: 0px
}

.stitch2-bottom-0\.5 {
  bottom: 0.125rem
}

.stitch2-bottom-10 {
  bottom: 2.5rem
}

.stitch2-bottom-3 {
  bottom: 0.75rem
}

.stitch2-bottom-4 {
  bottom: 1rem
}

.stitch2-bottom-5 {
  bottom: 1.25rem
}

.stitch2-bottom-6 {
  bottom: 1.5rem
}

.stitch2-left-1\/2 {
  left: 50%
}

.stitch2-left-2 {
  left: 0.5rem
}

.stitch2-left-2\.5 {
  left: 0.625rem
}

.stitch2-left-4 {
  left: 1rem
}

.stitch2-left-8 {
  left: 2rem
}

.stitch2-left-\[44\%\] {
  left: 44%
}

.stitch2-left-\[88\%\] {
  left: 88%
}

.stitch2-right-0 {
  right: 0px
}

.stitch2-right-0\.5 {
  right: 0.125rem
}

.stitch2-right-1 {
  right: 0.25rem
}

.stitch2-right-1\.5 {
  right: 0.375rem
}

.stitch2-right-2 {
  right: 0.5rem
}

.stitch2-right-2\.5 {
  right: 0.625rem
}

.stitch2-right-3 {
  right: 0.75rem
}

.stitch2-right-3\.5 {
  right: 0.875rem
}

.stitch2-right-4 {
  right: 1rem
}

.stitch2-top-0 {
  top: 0px
}

.stitch2-top-1 {
  top: 0.25rem
}

.stitch2-top-1\.5 {
  top: 0.375rem
}

.stitch2-top-1\/2 {
  top: 50%
}

.stitch2-top-1\/3 {
  top: 33.333333%
}

.stitch2-top-2 {
  top: 0.5rem
}

.stitch2-top-2\.5 {
  top: 0.625rem
}

.stitch2-top-44 {
  top: 11rem
}

.stitch2--z-10 {
  z-index: -10
}

.stitch2-z-0 {
  z-index: 0
}

.stitch2-z-10 {
  z-index: 10
}

.stitch2-z-20 {
  z-index: 20
}

.stitch2-z-50 {
  z-index: 50
}

.stitch2-mx-3 {
  margin-left: 0.75rem;
  margin-right: 0.75rem
}

.stitch2-mx-3\.5 {
  margin-left: 0.875rem;
  margin-right: 0.875rem
}

.stitch2-mx-auto {
  margin-left: auto;
  margin-right: auto
}

.stitch2-my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem
}

.stitch2-my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem
}

.stitch2--mt-6 {
  margin-top: -1.5rem
}

.stitch2-mb-0 {
  margin-bottom: 0px
}

.stitch2-mb-0\.5 {
  margin-bottom: 0.125rem
}

.stitch2-mb-1 {
  margin-bottom: 0.25rem
}

.stitch2-mb-1\.5 {
  margin-bottom: 0.375rem
}

.stitch2-mb-2 {
  margin-bottom: 0.5rem
}

.stitch2-mb-2\.5 {
  margin-bottom: 0.625rem
}

.stitch2-mb-3 {
  margin-bottom: 0.75rem
}

.stitch2-mb-3\.5 {
  margin-bottom: 0.875rem
}

.stitch2-mb-4 {
  margin-bottom: 1rem
}

.stitch2-mb-5 {
  margin-bottom: 1.25rem
}

.stitch2-mb-6 {
  margin-bottom: 1.5rem
}

.stitch2-mr-1 {
  margin-right: 0.25rem
}

.stitch2-mr-1\.5 {
  margin-right: 0.375rem
}

.stitch2-mr-2 {
  margin-right: 0.5rem
}

.stitch2-mr-2\.5 {
  margin-right: 0.625rem
}

.stitch2-mt-0 {
  margin-top: 0px
}

.stitch2-mt-0\.5 {
  margin-top: 0.125rem
}

.stitch2-mt-1 {
  margin-top: 0.25rem
}

.stitch2-mt-2 {
  margin-top: 0.5rem
}

.stitch2-mt-2\.5 {
  margin-top: 0.625rem
}

.stitch2-mt-3 {
  margin-top: 0.75rem
}

.stitch2-mt-3\.5 {
  margin-top: 0.875rem
}

.stitch2-mt-4 {
  margin-top: 1rem
}

.stitch2-mt-5 {
  margin-top: 1.25rem
}

.stitch2-mt-6 {
  margin-top: 1.5rem
}

.stitch2-mt-8 {
  margin-top: 2rem
}

.stitch2-block {
  display: block
}

.stitch2-flex {
  display: flex
}

.stitch2-inline-flex {
  display: inline-flex
}

.stitch2-grid {
  display: grid
}

.stitch2-hidden {
  display: none
}

.stitch2-aspect-\[4\/3\] {
  aspect-ratio: 4/3
}

.stitch2-aspect-square {
  aspect-ratio: 1 / 1
}

.stitch2-size-4 {
  width: 1rem;
  height: 1rem
}

.stitch2-h-1 {
  height: 0.25rem
}

.stitch2-h-1\.5 {
  height: 0.375rem
}

.stitch2-h-10 {
  height: 2.5rem
}

.stitch2-h-11 {
  height: 2.75rem
}

.stitch2-h-12 {
  height: 3rem
}

.stitch2-h-14 {
  height: 3.5rem
}

.stitch2-h-16 {
  height: 4rem
}

.stitch2-h-2 {
  height: 0.5rem
}

.stitch2-h-2\.5 {
  height: 0.625rem
}

.stitch2-h-20 {
  height: 5rem
}

.stitch2-h-24 {
  height: 6rem
}

.stitch2-h-3 {
  height: 0.75rem
}

.stitch2-h-3\.5 {
  height: 0.875rem
}

.stitch2-h-4 {
  height: 1rem
}

.stitch2-h-44 {
  height: 11rem
}

.stitch2-h-5 {
  height: 1.25rem
}

.stitch2-h-6 {
  height: 1.5rem
}

.stitch2-h-64 {
  height: 16rem
}

.stitch2-h-7 {
  height: 1.75rem
}

.stitch2-h-72 {
  height: 18rem
}

.stitch2-h-8 {
  height: 2rem
}

.stitch2-h-9 {
  height: 2.25rem
}

.stitch2-h-\[1\.5px\] {
  height: 1.5px
}

.stitch2-h-\[1px\] {
  height: 1px
}

.stitch2-h-\[500px\] {
  height: 500px
}

.stitch2-h-\[600px\] {
  height: 600px
}

.stitch2-h-\[640px\] {
  height: 640px
}

.stitch2-h-\[68px\] {
  height: 68px
}

.stitch2-h-full {
  height: 100%
}

.stitch2-max-h-\[95vh\] {
  max-height: 95vh
}

.stitch2-min-h-\[920px\] {
  min-height: 920px
}

.stitch2-min-h-full {
  min-height: 100%
}

.stitch2-min-h-screen {
  min-height: 100vh
}

.stitch2-w-1 {
  width: 0.25rem
}

.stitch2-w-1\.5 {
  width: 0.375rem
}

.stitch2-w-10 {
  width: 2.5rem
}

.stitch2-w-11 {
  width: 2.75rem
}

.stitch2-w-12 {
  width: 3rem
}

.stitch2-w-14 {
  width: 3.5rem
}

.stitch2-w-16 {
  width: 4rem
}

.stitch2-w-2 {
  width: 0.5rem
}

.stitch2-w-2\.5 {
  width: 0.625rem
}

.stitch2-w-24 {
  width: 6rem
}

.stitch2-w-3 {
  width: 0.75rem
}

.stitch2-w-3\.5 {
  width: 0.875rem
}

.stitch2-w-4 {
  width: 1rem
}

.stitch2-w-44 {
  width: 11rem
}

.stitch2-w-48 {
  width: 12rem
}

.stitch2-w-5 {
  width: 1.25rem
}

.stitch2-w-6 {
  width: 1.5rem
}

.stitch2-w-64 {
  width: 16rem
}

.stitch2-w-7 {
  width: 1.75rem
}

.stitch2-w-72 {
  width: 18rem
}

.stitch2-w-8 {
  width: 2rem
}

.stitch2-w-9 {
  width: 2.25rem
}

.stitch2-w-\[1px\] {
  width: 1px
}

.stitch2-w-\[500px\] {
  width: 500px
}

.stitch2-w-\[600px\] {
  width: 600px
}

.stitch2-w-\[68px\] {
  width: 68px
}

.stitch2-w-\[720px\] {
  width: 720px
}

.stitch2-w-\[72px\] {
  width: 72px
}

.stitch2-w-\[90\%\] {
  width: 90%
}

.stitch2-w-fit {
  width: -moz-fit-content;
  width: fit-content
}

.stitch2-w-full {
  width: 100%
}

.stitch2-min-w-0 {
  min-width: 0px
}

.stitch2-min-w-\[380px\] {
  min-width: 380px
}

.stitch2-max-w-\[390px\] {
  max-width: 390px
}

.stitch2-max-w-\[440px\] {
  max-width: 440px
}

.stitch2-max-w-\[450px\] {
  max-width: 450px
}

.stitch2-max-w-\[460px\] {
  max-width: 460px
}

.stitch2-max-w-\[470px\] {
  max-width: 470px
}

.stitch2-max-w-\[490px\] {
  max-width: 490px
}

.stitch2-max-w-\[960px\] {
  max-width: 960px
}

.stitch2-max-w-md {
  max-width: 28rem
}

.stitch2-max-w-sm {
  max-width: 24rem
}

.stitch2-max-w-xs {
  max-width: 20rem
}

.stitch2-flex-1 {
  flex: 1 1 0%
}

.stitch2-flex-shrink-0 {
  flex-shrink: 0
}

.stitch2-shrink-0 {
  flex-shrink: 0
}

.stitch2-grow {
  flex-grow: 1
}

.stitch2--translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.stitch2--translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.stitch2--translate-y-2 {
  --tw-translate-y: -0.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.stitch2-translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.stitch2-translate-x-5 {
  --tw-translate-x: 1.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.stitch2-translate-y-16 {
  --tw-translate-y: 4rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.stitch2-scale-75 {
  --tw-scale-x: .75;
  --tw-scale-y: .75;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.stitch2-scale-\[0\.985\] {
  --tw-scale-x: 0.985;
  --tw-scale-y: 0.985;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.stitch2-scale-\[1\.02\] {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.stitch2-transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

@keyframes stitch2-bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8,0,1,1)
  }

  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0,0,0.2,1)
  }
}

.stitch2-animate-bounce {
  animation: stitch2-bounce 1s infinite
}

@keyframes stitch2-ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0
  }
}

.stitch2-animate-ping {
  animation: stitch2-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite
}

@keyframes stitch2-pulse {
  50% {
    opacity: .5
  }
}

.stitch2-animate-pulse {
  animation: stitch2-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
}

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

.stitch2-animate-spin {
  animation: stitch2-spin 1s linear infinite
}

.stitch2-cursor-grab {
  cursor: grab
}

.stitch2-cursor-pointer {
  cursor: pointer
}

.stitch2-select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none
}

.stitch2-resize-none {
  resize: none
}

.stitch2-grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr))
}

.stitch2-grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

.stitch2-grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr))
}

.stitch2-grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr))
}

.stitch2-grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr))
}

.stitch2-flex-col {
  flex-direction: column
}

.stitch2-flex-wrap {
  flex-wrap: wrap
}

.stitch2-items-start {
  align-items: flex-start
}

.stitch2-items-center {
  align-items: center
}

.stitch2-items-baseline {
  align-items: baseline
}

.stitch2-justify-end {
  justify-content: flex-end
}

.stitch2-justify-center {
  justify-content: center
}

.stitch2-justify-between {
  justify-content: space-between
}

.stitch2-justify-around {
  justify-content: space-around
}

.stitch2-gap-0 {
  gap: 0px
}

.stitch2-gap-0\.5 {
  gap: 0.125rem
}

.stitch2-gap-1 {
  gap: 0.25rem
}

.stitch2-gap-1\.5 {
  gap: 0.375rem
}

.stitch2-gap-2 {
  gap: 0.5rem
}

.stitch2-gap-2\.5 {
  gap: 0.625rem
}

.stitch2-gap-3 {
  gap: 0.75rem
}

.stitch2-gap-3\.5 {
  gap: 0.875rem
}

.stitch2-gap-4 {
  gap: 1rem
}

.stitch2-gap-5 {
  gap: 1.25rem
}

.stitch2-gap-8 {
  gap: 2rem
}

.stitch2-space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse))
}

.stitch2-space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
}

.stitch2-space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse))
}

.stitch2-space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse))
}

.stitch2-space-y-3\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.875rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.875rem * var(--tw-space-y-reverse))
}

.stitch2-space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse))
}

.stitch2-self-start {
  align-self: flex-start
}

.stitch2-self-end {
  align-self: flex-end
}

.stitch2-overflow-hidden {
  overflow: hidden
}

.stitch2-overflow-visible {
  overflow: visible
}

.stitch2-overflow-x-auto {
  overflow-x: auto
}

.stitch2-overflow-y-auto {
  overflow-y: auto
}

.stitch2-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.stitch2-whitespace-nowrap {
  white-space: nowrap
}

.stitch2-rounded {
  border-radius: 0.25rem
}

.stitch2-rounded-2xl {
  border-radius: 1rem
}

.stitch2-rounded-3xl {
  border-radius: 1.5rem
}

.stitch2-rounded {
  border-radius: 0.25rem
}

.stitch2-rounded-\[14px\] {
  border-radius: 14px
}

.stitch2-rounded-\[28px\] {
  border-radius: 28px
}

.stitch2-rounded-\[30px\] {
  border-radius: 30px
}

.stitch2-rounded-\[38px\] {
  border-radius: 38px
}

.stitch2-rounded-\[40px\] {
  border-radius: 40px
}

.stitch2-rounded-\[44px\] {
  border-radius: 44px
}

.stitch2-rounded-full {
  border-radius: 9999px
}

.stitch2-rounded-lg {
  border-radius: 0.5rem
}

.stitch2-rounded-xl {
  border-radius: 0.75rem
}

.stitch2-rounded-t-lg {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem
}

.stitch2-border {
  border-width: 1px
}

.stitch2-border-2 {
  border-width: 2px
}

.stitch2-border-b {
  border-bottom-width: 1px
}

.stitch2-border-t {
  border-top-width: 1px
}

.stitch2-border-dashed {
  border-style: dashed
}

.stitch2-border-none {
  border-style: none
}

.stitch2-border-amber-100 {
  border-color: var(--warning-light)
}

.stitch2-border-amber-200 {
  border-color: var(--warning-light)
}

.stitch2-border-emerald-200 {
  border-color: var(--income-light)
}

.stitch2-border-indigo-200 {
  --tw-border-opacity: 1;
  border-color: rgb(199 210 254 / var(--tw-border-opacity))
}

.stitch2-border-rose-500 {
  border-color: var(--expense)
}

.stitch2-border-secondary {
  border-color: var(--text-secondary)
}

.stitch2-border-sky-200 {
  --tw-border-opacity: 1;
  border-color: rgb(186 230 253 / var(--tw-border-opacity))
}

.stitch2-border-slate-300 {
  border-color: var(--glass-border-subtle)
}

.stitch2-border-stone-200\/50 {
  border-color: rgb(231 229 228 / 0.5)
}

.stitch2-border-stone-200\/60 {
  border-color: rgb(231 229 228 / 0.6)
}

.stitch2-border-stone-200\/70 {
  border-color: rgb(231 229 228 / 0.7)
}

.stitch2-border-stone-300 {
  --tw-border-opacity: 1;
  border-color: rgb(214 211 209 / var(--tw-border-opacity))
}

.stitch2-border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity))
}

.stitch2-border-white\/10 {
  border-color: rgb(255 255 255 / 0.1)
}

.stitch2-border-white\/20 {
  border-color: rgb(255 255 255 / 0.2)
}

.stitch2-border-white\/40 {
  border-color: rgb(255 255 255 / 0.4)
}

.stitch2-border-white\/50 {
  border-color: rgb(255 255 255 / 0.5)
}

.stitch2-border-white\/60 {
  border-color: rgb(255 255 255 / 0.6)
}

.stitch2-border-white\/70 {
  border-color: rgb(255 255 255 / 0.7)
}

.stitch2-border-white\/80 {
  border-color: rgb(255 255 255 / 0.8)
}

.stitch2-border-white\/90 {
  border-color: rgb(255 255 255 / 0.9)
}

.stitch2-border-white\/95 {
  border-color: rgb(255 255 255 / 0.95)
}

.stitch2-bg-amber-50 {
  background-color: var(--warning-light)
}

.stitch2-bg-amber-500 {
  background-color: var(--warning)
}

.stitch2-bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity))
}

.stitch2-bg-cyan-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 254 255 / var(--tw-bg-opacity))
}

.stitch2-bg-cyan-500\/15 {
  background-color: rgb(6 182 212 / 0.15)
}

.stitch2-bg-emerald-400 {
  background-color: var(--income)
}

.stitch2-bg-emerald-50 {
  background-color: var(--income-light)
}

.stitch2-bg-emerald-500 {
  background-color: var(--income)
}

.stitch2-bg-emerald-600 {
  background-color: var(--income)
}

.stitch2-bg-indigo-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity))
}

.stitch2-bg-orange-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / var(--tw-bg-opacity))
}

.stitch2-bg-pink-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 39 119 / var(--tw-bg-opacity))
}

.stitch2-bg-primary {
  background-color: var(--text-primary)
}

.stitch2-bg-rose-400 {
  background-color: var(--expense)
}

.stitch2-bg-rose-50 {
  background-color: var(--expense-light)
}

.stitch2-bg-rose-500 {
  background-color: var(--expense)
}

.stitch2-bg-secondary {
  background-color: var(--text-secondary)
}

.stitch2-bg-slate-100 {
  background-color: var(--bg-base)
}

.stitch2-bg-slate-400 {
  background-color: var(--text-tertiary)
}

.stitch2-bg-slate-900 {
  background-color: var(--text-primary)
}

.stitch2-bg-stone-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 244 / var(--tw-bg-opacity))
}

.stitch2-bg-stone-200\/50 {
  background-color: rgb(231 229 228 / 0.5)
}

.stitch2-bg-transparent {
  background-color: transparent
}

.stitch2-bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}

.stitch2-bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1)
}

.stitch2-bg-white\/20 {
  background-color: rgb(255 255 255 / 0.2)
}

.stitch2-bg-white\/25 {
  background-color: rgb(255 255 255 / 0.25)
}

.stitch2-bg-white\/40 {
  background-color: rgb(255 255 255 / 0.4)
}

.stitch2-bg-white\/60 {
  background-color: rgb(255 255 255 / 0.6)
}

.stitch2-bg-white\/70 {
  background-color: rgb(255 255 255 / 0.7)
}

.stitch2-bg-white\/80 {
  background-color: rgb(255 255 255 / 0.8)
}

.stitch2-bg-white\/90 {
  background-color: rgb(255 255 255 / 0.9)
}

.stitch2-bg-white\/95 {
  background-color: rgb(255 255 255 / 0.95)
}

.stitch2-bg-white\/\[0\.08\] {
  background-color: rgb(255 255 255 / 0.08)
}

.stitch2-bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops))
}

.stitch2-bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops))
}

.stitch2-bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops))
}

.stitch2-bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops))
}

.stitch2-bg-gradient-to-tr {
  background-image: linear-gradient(to top right, var(--tw-gradient-stops))
}

.stitch2-from-\[\#1e1b19\] {
  --tw-gradient-from: #1e1b19 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(30 27 25 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.stitch2-from-\[\#292524\] {
  --tw-gradient-from: #292524 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(41 37 36 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.stitch2-from-\[\#fbf9f3\] {
  --tw-gradient-from: #fbf9f3 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(251 249 243 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.stitch2-from-\[\#ffe088\] {
  --tw-gradient-from: #ffe088 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 224 136 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.stitch2-from-amber-100 {
  --tw-gradient-from: var(--warning-light) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.stitch2-from-amber-400 {
  --tw-gradient-from: var(--warning) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.stitch2-from-black\/40 {
  --tw-gradient-from: rgb(0 0 0 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.stitch2-from-emerald-100 {
  --tw-gradient-from: var(--income-light) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.stitch2-from-emerald-400 {
  --tw-gradient-from: var(--income) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.stitch2-from-emerald-500 {
  --tw-gradient-from: var(--income) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.stitch2-from-indigo-100 {
  --tw-gradient-from: #e0e7ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(224 231 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.stitch2-from-indigo-500 {
  --tw-gradient-from: #6366f1 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.stitch2-from-secondary {
  --tw-gradient-from: var(--text-secondary) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.stitch2-from-sky-100 {
  --tw-gradient-from: #e0f2fe var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(224 242 254 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.stitch2-from-sky-400 {
  --tw-gradient-from: #38bdf8 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(56 189 248 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.stitch2-from-slate-100 {
  --tw-gradient-from: var(--bg-base) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.stitch2-from-slate-400 {
  --tw-gradient-from: var(--text-tertiary) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.stitch2-from-transparent {
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.stitch2-via-\[\#121110\] {
  --tw-gradient-to: rgb(18 17 16 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #121110 var(--tw-gradient-via-position), var(--tw-gradient-to)
}

.stitch2-via-\[\#745c00\]\/60 {
  --tw-gradient-to: rgb(116 92 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(116 92 0 / 0.6) var(--tw-gradient-via-position), var(--tw-gradient-to)
}

.stitch2-via-\[\#e9c349\] {
  --tw-gradient-to: rgb(233 195 73 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #e9c349 var(--tw-gradient-via-position), var(--tw-gradient-to)
}

.stitch2-via-\[\#f0eee8\] {
  --tw-gradient-to: rgb(240 238 232 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #f0eee8 var(--tw-gradient-via-position), var(--tw-gradient-to)
}

.stitch2-via-secondary {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--text-secondary) var(--tw-gradient-via-position), var(--tw-gradient-to)
}

.stitch2-via-teal-300 {
  --tw-gradient-to: rgb(94 234 212 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #5eead4 var(--tw-gradient-via-position), var(--tw-gradient-to)
}

.stitch2-via-transparent {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to)
}

.stitch2-via-white {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to)
}

.stitch2-via-white\/80 {
  --tw-gradient-to: rgb(255 255 255 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.8) var(--tw-gradient-via-position), var(--tw-gradient-to)
}

.stitch2-to-\[\#000000\] {
  --tw-gradient-to: #000000 var(--tw-gradient-to-position)
}

.stitch2-to-\[\#1C1917\] {
  --tw-gradient-to: #1C1917 var(--tw-gradient-to-position)
}

.stitch2-to-\[\#e4e2dd\] {
  --tw-gradient-to: #e4e2dd var(--tw-gradient-to-position)
}

.stitch2-to-\[\#fbf9f3\] {
  --tw-gradient-to: #fbf9f3 var(--tw-gradient-to-position)
}

.stitch2-to-\[\#ff9f68\] {
  --tw-gradient-to: #ff9f68 var(--tw-gradient-to-position)
}

.stitch2-to-\[\#ffe088\] {
  --tw-gradient-to: #ffe088 var(--tw-gradient-to-position)
}

.stitch2-to-amber-200 {
  --tw-gradient-to: var(--warning-light) var(--tw-gradient-to-position)
}

.stitch2-to-blue-100 {
  --tw-gradient-to: #dbeafe var(--tw-gradient-to-position)
}

.stitch2-to-blue-500 {
  --tw-gradient-to: #3b82f6 var(--tw-gradient-to-position)
}

.stitch2-to-orange-100 {
  --tw-gradient-to: #ffedd5 var(--tw-gradient-to-position)
}

.stitch2-to-orange-500 {
  --tw-gradient-to: #f97316 var(--tw-gradient-to-position)
}

.stitch2-to-secondary {
  --tw-gradient-to: var(--text-secondary) var(--tw-gradient-to-position)
}

.stitch2-to-slate-500 {
  --tw-gradient-to: var(--text-secondary) var(--tw-gradient-to-position)
}

.stitch2-to-teal-100 {
  --tw-gradient-to: #ccfbf1 var(--tw-gradient-to-position)
}

.stitch2-to-teal-400 {
  --tw-gradient-to: #2dd4bf var(--tw-gradient-to-position)
}

.stitch2-to-teal-500 {
  --tw-gradient-to: #14b8a6 var(--tw-gradient-to-position)
}

.stitch2-to-teal-600 {
  --tw-gradient-to: #0d9488 var(--tw-gradient-to-position)
}

.stitch2-to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position)
}

.stitch2-to-violet-100 {
  --tw-gradient-to: #ede9fe var(--tw-gradient-to-position)
}

.stitch2-to-violet-600 {
  --tw-gradient-to: #7c3aed var(--tw-gradient-to-position)
}

.stitch2-to-zinc-200 {
  --tw-gradient-to: #e4e4e7 var(--tw-gradient-to-position)
}

.stitch2-stroke-\[2\.5\] {
  stroke-width: 2.5
}

.stitch2-object-cover {
  -o-object-fit: cover;
     object-fit: cover
}

.stitch2-p-0 {
  padding: 0px
}

.stitch2-p-0\.5 {
  padding: 0.125rem
}

.stitch2-p-1 {
  padding: 0.25rem
}

.stitch2-p-1\.5 {
  padding: 0.375rem
}

.stitch2-p-2 {
  padding: 0.5rem
}

.stitch2-p-2\.5 {
  padding: 0.625rem
}

.stitch2-p-3 {
  padding: 0.75rem
}

.stitch2-p-3\.5 {
  padding: 0.875rem
}

.stitch2-p-4 {
  padding: 1rem
}

.stitch2-p-5 {
  padding: 1.25rem
}

.stitch2-p-6 {
  padding: 1.5rem
}

.stitch2-p-\[1\.5px\] {
  padding: 1.5px
}

.stitch2-p-\[1px\] {
  padding: 1px
}

.stitch2-p-\[2\.5px\] {
  padding: 2.5px
}

.stitch2-p-\[2px\] {
  padding: 2px
}

.stitch2-px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem
}

.stitch2-px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem
}

.stitch2-px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem
}

.stitch2-px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem
}

.stitch2-px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem
}

.stitch2-px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem
}

.stitch2-px-4 {
  padding-left: 1rem;
  padding-right: 1rem
}

.stitch2-px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem
}

.stitch2-px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem
}

.stitch2-px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem
}

.stitch2-px-8 {
  padding-left: 2rem;
  padding-right: 2rem
}

.stitch2-py-0 {
  padding-top: 0px;
  padding-bottom: 0px
}

.stitch2-py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem
}

.stitch2-py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem
}

.stitch2-py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem
}

.stitch2-py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem
}

.stitch2-py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem
}

.stitch2-py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem
}

.stitch2-py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem
}

.stitch2-py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem
}

.stitch2-py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem
}

.stitch2-py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem
}

.stitch2-pb-0 {
  padding-bottom: 0px
}

.stitch2-pb-0\.5 {
  padding-bottom: 0.125rem
}

.stitch2-pb-1 {
  padding-bottom: 0.25rem
}

.stitch2-pb-12 {
  padding-bottom: 3rem
}

.stitch2-pb-2 {
  padding-bottom: 0.5rem
}

.stitch2-pb-28 {
  padding-bottom: 7rem
}

.stitch2-pb-3 {
  padding-bottom: 0.75rem
}

.stitch2-pb-3\.5 {
  padding-bottom: 0.875rem
}

.stitch2-pb-36 {
  padding-bottom: 9rem
}

.stitch2-pb-4 {
  padding-bottom: 1rem
}

.stitch2-pb-8 {
  padding-bottom: 2rem
}

.stitch2-pl-1 {
  padding-left: 0.25rem
}

.stitch2-pl-3 {
  padding-left: 0.75rem
}

.stitch2-pr-1 {
  padding-right: 0.25rem
}

.stitch2-pt-0 {
  padding-top: 0px
}

.stitch2-pt-0\.5 {
  padding-top: 0.125rem
}

.stitch2-pt-1 {
  padding-top: 0.25rem
}

.stitch2-pt-1\.5 {
  padding-top: 0.375rem
}

.stitch2-pt-16 {
  padding-top: 4rem
}

.stitch2-pt-2 {
  padding-top: 0.5rem
}

.stitch2-pt-3 {
  padding-top: 0.75rem
}

.stitch2-pt-3\.5 {
  padding-top: 0.875rem
}

.stitch2-pt-4 {
  padding-top: 1rem
}

.stitch2-pt-5 {
  padding-top: 1.25rem
}

.stitch2-text-left {
  text-align: left
}

.stitch2-text-center {
  text-align: center
}

.stitch2-text-right {
  text-align: right
}

.stitch2-font-\[\'Plus_Jakarta_Sans\'\,\'Noto_Sans\'\,sans-serif\] {
  font-family: 'Plus Jakarta Sans','Noto Sans',sans-serif
}

.stitch2-font-\[\'Plus_Jakarta_Sans\'\] {
  font-family: 'Plus Jakarta Sans'
}

.stitch2-font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}

.stitch2-font-sans {
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
}

.stitch2-text-2xl {
  font-size: 1.5rem;
  line-height: 2rem
}

.stitch2-text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem
}

.stitch2-text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem
}

.stitch2-text-\[10\.5px\] {
  font-size: 10.5px
}

.stitch2-text-\[10px\] {
  font-size: 10px
}

.stitch2-text-\[11px\] {
  font-size: 11px
}

.stitch2-text-\[12px\] {
  font-size: 12px
}

.stitch2-text-\[13px\] {
  font-size: 13px
}

.stitch2-text-\[14px\] {
  font-size: 14px
}

.stitch2-text-\[15px\] {
  font-size: 15px
}

.stitch2-text-\[16px\] {
  font-size: 16px
}

.stitch2-text-\[17px\] {
  font-size: 17px
}

.stitch2-text-\[18px\] {
  font-size: 18px
}

.stitch2-text-\[19px\] {
  font-size: 19px
}

.stitch2-text-\[20px\] {
  font-size: 20px
}

.stitch2-text-\[22px\] {
  font-size: 22px
}

.stitch2-text-\[24px\] {
  font-size: 24px
}

.stitch2-text-\[26px\] {
  font-size: 26px
}

.stitch2-text-\[32px\] {
  font-size: 32px
}

.stitch2-text-\[7px\] {
  font-size: 7px
}

.stitch2-text-\[8px\] {
  font-size: 8px
}

.stitch2-text-\[9px\] {
  font-size: 9px
}

.stitch2-text-base {
  font-size: 1rem;
  line-height: 1.5rem
}

.stitch2-text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem
}

.stitch2-text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem
}

.stitch2-text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem
}

.stitch2-text-xs {
  font-size: 0.75rem;
  line-height: 1rem
}

.stitch2-font-black {
  font-weight: 900
}

.stitch2-font-bold {
  font-weight: 700
}

.stitch2-font-extrabold {
  font-weight: 800
}

.stitch2-font-medium {
  font-weight: 500
}

.stitch2-font-normal {
  font-weight: 400
}

.stitch2-font-semibold {
  font-weight: 600
}

.stitch2-uppercase {
  text-transform: uppercase
}

.stitch2-leading-none {
  line-height: 1
}

.stitch2-leading-relaxed {
  line-height: 1.625
}

.stitch2-leading-snug {
  line-height: 1.375
}

.stitch2-leading-tight {
  line-height: 1.25
}

.stitch2-tracking-\[-0\.015em\] {
  letter-spacing: -0.015em
}

.stitch2-tracking-normal {
  letter-spacing: 0em
}

.stitch2-tracking-tight {
  letter-spacing: -0.025em
}

.stitch2-tracking-wide {
  letter-spacing: 0.025em
}

.stitch2-tracking-wider {
  letter-spacing: 0.05em
}

.stitch2-tracking-widest {
  letter-spacing: 0.1em
}

.stitch2-text-amber-300 {
  color: var(--warning)
}

.stitch2-text-amber-700 {
  color: var(--warning)
}

.stitch2-text-amber-800 {
  color: var(--warning)
}

.stitch2-text-emerald-300 {
  color: var(--income)
}

.stitch2-text-emerald-400 {
  color: var(--income)
}

.stitch2-text-emerald-600 {
  color: var(--income)
}

.stitch2-text-emerald-700 {
  color: var(--income)
}

.stitch2-text-indigo-600 {
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity))
}

.stitch2-text-primary {
  color: var(--text-primary)
}

.stitch2-text-rose-300 {
  color: var(--expense)
}

.stitch2-text-rose-500 {
  color: var(--expense)
}

.stitch2-text-rose-600 {
  color: var(--expense)
}

.stitch2-text-secondary {
  color: var(--text-secondary)
}

.stitch2-text-slate-200 {
  color: var(--glass-border-subtle)
}

.stitch2-text-slate-300 {
  color: var(--glass-border-subtle)
}

.stitch2-text-slate-400 {
  color: var(--text-tertiary)
}

.stitch2-text-slate-500 {
  color: var(--text-secondary)
}

.stitch2-text-slate-600 {
  color: var(--text-secondary)
}

.stitch2-text-slate-700 {
  color: var(--text-primary)
}

.stitch2-text-slate-800 {
  color: var(--text-primary)
}

.stitch2-text-slate-900 {
  color: var(--text-primary)
}

.stitch2-text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity))
}

.stitch2-underline {
  text-decoration-line: underline
}

.stitch2-underline-offset-4 {
  text-underline-offset: 4px
}

.stitch2-antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

.stitch2-placeholder-slate-400::-moz-placeholder {
  color: var(--text-tertiary)
}

.stitch2-placeholder-slate-400::placeholder {
  color: var(--text-tertiary)
}

.stitch2-opacity-0 {
  opacity: 0
}

.stitch2-opacity-40 {
  opacity: 0.4
}

.stitch2-opacity-50 {
  opacity: 0.5
}

.stitch2-opacity-60 {
  opacity: 0.6
}

.stitch2-opacity-70 {
  opacity: 0.7
}

.stitch2-opacity-75 {
  opacity: 0.75
}

.stitch2-opacity-80 {
  opacity: 0.8
}

.stitch2-opacity-85 {
  opacity: 0.85
}

.stitch2-opacity-90 {
  opacity: 0.9
}

.stitch2-shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_0_12px_\#fed65b\] {
  --tw-shadow: 0 0 12px #fed65b;
  --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_0_12px_rgba\(212\,175\,55\,0\.4\)\,inset_0_1px_2px_rgba\(255\,255\,255\,1\)\] {
  --tw-shadow: 0 0 12px rgba(212,175,55,0.4),inset 0 1px 2px rgba(255,255,255,1);
  --tw-shadow-colored: 0 0 12px var(--tw-shadow-color), inset 0 1px 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_0_8px_\#fed65b\] {
  --tw-shadow: 0 0 8px #fed65b;
  --tw-shadow-colored: 0 0 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_0_8px_rgba\(212\,175\,55\,0\.6\)\] {
  --tw-shadow: 0 0 8px rgba(212,175,55,0.6);
  --tw-shadow-colored: 0 0 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_10px_25px_rgba\(0\,0\,0\,0\.35\)\] {
  --tw-shadow: 0 10px 25px rgba(0,0,0,0.35);
  --tw-shadow-colored: 0 10px 25px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_10px_25px_rgba\(254\,214\,91\,0\.5\)\] {
  --tw-shadow: 0 10px 25px rgba(254,214,91,0.5);
  --tw-shadow-colored: 0 10px 25px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_12px_32px_-6px_rgba\(212\,175\,55\,0\.08\)\,inset_0_1px_2px_rgba\(255\,255\,255\,0\.95\)\] {
  --tw-shadow: 0 12px 32px -6px rgba(212,175,55,0.08),inset 0 1px 2px rgba(255,255,255,0.95);
  --tw-shadow-colored: 0 12px 32px -6px var(--tw-shadow-color), inset 0 1px 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_12px_32px_-6px_rgba\(28\,25\,23\,0\.06\)\,0_2px_4px_0_rgba\(28\,25\,23\,0\.02\)\] {
  --tw-shadow: 0 12px 32px -6px rgba(28,25,23,0.06),0 2px 4px 0 rgba(28,25,23,0.02);
  --tw-shadow-colored: 0 12px 32px -6px var(--tw-shadow-color), 0 2px 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_12px_36px_rgba\(28\,25\,23\,0\.06\)\,inset_0_1px_2px_rgba\(255\,255\,255\,0\.95\)\] {
  --tw-shadow: 0 12px 36px rgba(28,25,23,0.06),inset 0 1px 2px rgba(255,255,255,0.95);
  --tw-shadow-colored: 0 12px 36px var(--tw-shadow-color), inset 0 1px 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_12px_36px_rgba\(28\,25\,23\,0\.08\)\,0_2px_8px_rgba\(212\,175\,55\,0\.06\)\] {
  --tw-shadow: 0 12px 36px rgba(28,25,23,0.08),0 2px 8px rgba(212,175,55,0.06);
  --tw-shadow-colored: 0 12px 36px var(--tw-shadow-color), 0 2px 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_16px_36px_-4px_rgba\(212\,175\,55\,0\.08\)\,0_8px_20px_-4px_rgba\(28\,25\,23\,0\.04\)\] {
  --tw-shadow: 0 16px 36px -4px rgba(212,175,55,0.08),0 8px 20px -4px rgba(28,25,23,0.04);
  --tw-shadow-colored: 0 16px 36px -4px var(--tw-shadow-color), 0 8px 20px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_16px_36px_-6px_rgba\(212\,175\,55\,0\.08\)\,0_8px_24px_-4px_rgba\(28\,25\,23\,0\.04\)\] {
  --tw-shadow: 0 16px 36px -6px rgba(212,175,55,0.08),0 8px 24px -4px rgba(28,25,23,0.04);
  --tw-shadow-colored: 0 16px 36px -6px var(--tw-shadow-color), 0 8px 24px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_1px_4px_rgba\(0\,0\,0\,0\.03\)\] {
  --tw-shadow: 0 1px 4px rgba(0,0,0,0.03);
  --tw-shadow-colored: 0 1px 4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_1px_8px_rgba\(0\,0\,0\,0\.04\)\] {
  --tw-shadow: 0 1px 8px rgba(0,0,0,0.04);
  --tw-shadow-colored: 0 1px 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_1px_8px_rgba\(28\,25\,23\,0\.03\)\] {
  --tw-shadow: 0 1px 8px rgba(28,25,23,0.03);
  --tw-shadow-colored: 0 1px 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_2px_10px_rgba\(0\,150\,104\,0\.18\)\] {
  --tw-shadow: 0 2px 10px rgba(0,150,104,0.18);
  --tw-shadow-colored: 0 2px 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_2px_8px_rgba\(0\,0\,0\,0\.06\)\] {
  --tw-shadow: 0 2px 8px rgba(0,0,0,0.06);
  --tw-shadow-colored: 0 2px 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_2px_8px_rgba\(0\,0\,0\,0\.15\)\] {
  --tw-shadow: 0 2px 8px rgba(0,0,0,0.15);
  --tw-shadow-colored: 0 2px 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_2px_8px_rgba\(212\,175\,55\,0\.15\)\] {
  --tw-shadow: 0 2px 8px rgba(212,175,55,0.15);
  --tw-shadow-colored: 0 2px 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_2px_8px_rgba\(212\,175\,55\,0\.2\)\] {
  --tw-shadow: 0 2px 8px rgba(212,175,55,0.2);
  --tw-shadow-colored: 0 2px 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_2px_8px_rgba\(28\,25\,23\,0\.03\)\,inset_0_1px_1px_rgba\(255\,255\,255\,0\.8\)\] {
  --tw-shadow: 0 2px 8px rgba(28,25,23,0.03),inset 0 1px 1px rgba(255,255,255,0.8);
  --tw-shadow-colored: 0 2px 8px var(--tw-shadow-color), inset 0 1px 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_2px_8px_rgba\(28\,25\,23\,0\.06\)\,inset_0_1px_1px_rgba\(255\,255\,255\,0\.9\)\] {
  --tw-shadow: 0 2px 8px rgba(28,25,23,0.06),inset 0 1px 1px rgba(255,255,255,0.9);
  --tw-shadow-colored: 0 2px 8px var(--tw-shadow-color), inset 0 1px 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_2px_8px_rgba\(28\,25\,23\,0\.06\)\] {
  --tw-shadow: 0 2px 8px rgba(28,25,23,0.06);
  --tw-shadow-colored: 0 2px 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_3px_10px_rgba\(244\,63\,94\,0\.18\)\] {
  --tw-shadow: 0 3px 10px rgba(244,63,94,0.18);
  --tw-shadow-colored: 0 3px 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_3px_12px_rgba\(28\,25\,23\,0\.08\)\] {
  --tw-shadow: 0 3px 12px rgba(28,25,23,0.08);
  --tw-shadow-colored: 0 3px 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_4px_12px_rgba\(0\,0\,0\,0\.12\)\] {
  --tw-shadow: 0 4px 12px rgba(0,0,0,0.12);
  --tw-shadow-colored: 0 4px 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_4px_12px_rgba\(212\,175\,55\,0\.12\)\] {
  --tw-shadow: 0 4px 12px rgba(212,175,55,0.12);
  --tw-shadow-colored: 0 4px 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_4px_14px_rgba\(0\,150\,104\,0\.18\)\] {
  --tw-shadow: 0 4px 14px rgba(0,150,104,0.18);
  --tw-shadow-colored: 0 4px 14px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_4px_14px_rgba\(244\,63\,94\,0\.18\)\] {
  --tw-shadow: 0 4px 14px rgba(244,63,94,0.18);
  --tw-shadow-colored: 0 4px 14px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_4px_16px_rgba\(115\,92\,0\,0\.22\)\] {
  --tw-shadow: 0 4px 16px rgba(115,92,0,0.22);
  --tw-shadow-colored: 0 4px 16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_4px_16px_rgba\(233\,195\,73\,0\.35\)\] {
  --tw-shadow: 0 4px 16px rgba(233,195,73,0.35);
  --tw-shadow-colored: 0 4px 16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_4px_16px_rgba\(28\,25\,23\,0\.04\)\,inset_0_1px_1px_rgba\(255\,255\,255\,0\.9\)\] {
  --tw-shadow: 0 4px 16px rgba(28,25,23,0.04),inset 0 1px 1px rgba(255,255,255,0.9);
  --tw-shadow-colored: 0 4px 16px var(--tw-shadow-color), inset 0 1px 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_4px_16px_rgba\(28\,25\,23\,0\.06\)\,inset_0_1px_2px_rgba\(255\,255\,255\,1\)\] {
  --tw-shadow: 0 4px 16px rgba(28,25,23,0.06),inset 0 1px 2px rgba(255,255,255,1);
  --tw-shadow-colored: 0 4px 16px var(--tw-shadow-color), inset 0 1px 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_4px_16px_rgba\(28\,25\,23\,0\.18\)\] {
  --tw-shadow: 0 4px 16px rgba(28,25,23,0.18);
  --tw-shadow-colored: 0 4px 16px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_6px_20px_rgba\(28\,25\,23\,0\.25\)\] {
  --tw-shadow: 0 6px 20px rgba(28,25,23,0.25);
  --tw-shadow-colored: 0 6px 20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_8px_16px_-2px_rgba\(186\,26\,26\,0\.15\)\] {
  --tw-shadow: 0 8px 16px -2px rgba(186,26,26,0.15);
  --tw-shadow-colored: 0 8px 16px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_8px_20px_-2px_rgba\(0\,150\,104\,0\.25\)\] {
  --tw-shadow: 0 8px 20px -2px rgba(0,150,104,0.25);
  --tw-shadow-colored: 0 8px 20px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_8px_20px_rgba\(0\,0\,0\,0\.35\)\] {
  --tw-shadow: 0 8px 20px rgba(0,0,0,0.35);
  --tw-shadow-colored: 0 8px 20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_8px_20px_rgba\(115\,92\,0\,0\.12\)\] {
  --tw-shadow: 0 8px 20px rgba(115,92,0,0.12);
  --tw-shadow-colored: 0 8px 20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_8px_24px_-4px_rgba\(28\,25\,23\,0\.04\)\,inset_0_1px_1px_rgba\(255\,255\,255\,0\.95\)\] {
  --tw-shadow: 0 8px 24px -4px rgba(28,25,23,0.04),inset 0 1px 1px rgba(255,255,255,0.95);
  --tw-shadow-colored: 0 8px 24px -4px var(--tw-shadow-color), inset 0 1px 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_8px_24px_-4px_rgba\(28\,25\,23\,0\.05\)\,inset_0_1px_1px_rgba\(255\,255\,255\,0\.9\)\] {
  --tw-shadow: 0 8px 24px -4px rgba(28,25,23,0.05),inset 0 1px 1px rgba(255,255,255,0.9);
  --tw-shadow-colored: 0 8px 24px -4px var(--tw-shadow-color), inset 0 1px 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_8px_24px_rgba\(28\,25\,23\,0\.03\)\] {
  --tw-shadow: 0 8px 24px rgba(28,25,23,0.03);
  --tw-shadow-colored: 0 8px 24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[0_8px_24px_rgba\(28\,25\,23\,0\.22\)\,inset_0_1px_1px_rgba\(255\,255\,255\,0\.2\)\] {
  --tw-shadow: 0 8px 24px rgba(28,25,23,0.22),inset 0 1px 1px rgba(255,255,255,0.2);
  --tw-shadow-colored: 0 8px 24px var(--tw-shadow-color), inset 0 1px 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[inset_0_1px_1px_rgba\(255\,255\,255\,0\.4\)\] {
  --tw-shadow: inset 0 1px 1px rgba(255,255,255,0.4);
  --tw-shadow-colored: inset 0 1px 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[inset_0_1px_1px_rgba\(255\,255\,255\,0\.6\)\] {
  --tw-shadow: inset 0 1px 1px rgba(255,255,255,0.6);
  --tw-shadow-colored: inset 0 1px 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[inset_0_1px_1px_rgba\(255\,255\,255\,0\.7\)\] {
  --tw-shadow: inset 0 1px 1px rgba(255,255,255,0.7);
  --tw-shadow-colored: inset 0 1px 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[inset_0_1px_1px_rgba\(255\,255\,255\,0\.9\)\] {
  --tw-shadow: inset 0 1px 1px rgba(255,255,255,0.9);
  --tw-shadow-colored: inset 0 1px 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[inset_0_2px_4px_rgba\(255\,255\,255\,0\.9\)\,0_4px_10px_rgba\(0\,150\,104\,0\.12\)\] {
  --tw-shadow: inset 0 2px 4px rgba(255,255,255,0.9),0 4px 10px rgba(0,150,104,0.12);
  --tw-shadow-colored: inset 0 2px 4px var(--tw-shadow-color), 0 4px 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-\[inset_0_2px_4px_rgba\(255\,255\,255\,0\.9\)\,0_4px_10px_rgba\(28\,25\,23\,0\.04\)\] {
  --tw-shadow: inset 0 2px 4px rgba(255,255,255,0.9),0 4px 10px rgba(28,25,23,0.04);
  --tw-shadow-colored: inset 0 2px 4px var(--tw-shadow-color), 0 4px 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-inner {
  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.stitch2-shadow-emerald-400 {
  --tw-shadow-color: var(--income);
  --tw-shadow: var(--tw-shadow-colored)
}

.stitch2-shadow-rose-300 {
  --tw-shadow-color: var(--expense);
  --tw-shadow: var(--tw-shadow-colored)
}

.stitch2-shadow-rose-400 {
  --tw-shadow-color: var(--expense);
  --tw-shadow: var(--tw-shadow-colored)
}

.stitch2-ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.stitch2-ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.stitch2-ring-emerald-200 {
  --tw-ring-color: var(--income-light)
}

.stitch2-ring-rose-400 {
  --tw-ring-color: var(--expense)
}

.stitch2-ring-secondary {
  --tw-ring-color: var(--text-secondary)
}

.stitch2-blur-2xl {
  --tw-blur: blur(40px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.stitch2-blur-3xl {
  --tw-blur: blur(64px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.stitch2-blur-\[12px\] {
  --tw-blur: blur(12px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.stitch2-blur-\[14px\] {
  --tw-blur: blur(14px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.stitch2-blur-xl {
  --tw-blur: blur(24px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.stitch2-brightness-\[0\.62\] {
  --tw-brightness: brightness(0.62);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.stitch2-brightness-\[0\.7\] {
  --tw-brightness: brightness(0.7);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.stitch2-drop-shadow-\[0_0_8px_\#fed65b\] {
  --tw-drop-shadow: drop-shadow(0 0 8px #fed65b);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.stitch2-drop-shadow-sm {
  --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.stitch2-filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.stitch2-backdrop-blur-2xl {
  --tw-backdrop-blur: blur(40px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.stitch2-backdrop-blur-\[1px\] {
  --tw-backdrop-blur: blur(1px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.stitch2-backdrop-blur-lg {
  --tw-backdrop-blur: blur(16px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.stitch2-backdrop-blur-md {
  --tw-backdrop-blur: blur(12px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.stitch2-backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.stitch2-backdrop-blur-xl {
  --tw-backdrop-blur: blur(24px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.stitch2-transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms
}

.stitch2-transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms
}

.stitch2-transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms
}

.stitch2-transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms
}

.stitch2-transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms
}

.stitch2-duration-200 {
  transition-duration: 200ms
}

.stitch2-duration-300 {
  transition-duration: 300ms
}

.stitch2-duration-700 {
  transition-duration: 700ms
}

.stitch2-ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
}
.stitch2-liquid-glass {
    background: var(--glass-fill);
    backdrop-filter: blur(32px) saturate(190%);
    -webkit-backdrop-filter: blur(32px) saturate(190%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 16px 36px -8px rgba(15, 23, 42, 0.06), inset 0 1px 1px 0 rgba(255, 255, 255, 0.9);
}
.stitch2-liquid-glass-dark {
    background: var(--glass-fill);
    backdrop-filter: blur(32px) saturate(190%);
    -webkit-backdrop-filter: blur(32px) saturate(190%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 20px 40px -8px rgba(2, 6, 23, 0.4), inset 0 1px 1px 0 rgba(255, 255, 255, 0.25);
}
.stitch2-liquid-badge {
    background: var(--glass-bg-subtle);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.85);
}
.stitch2-btn-obsidian-liquid {
  background: linear-gradient(145deg, #242220 0%, #121110 100%);
  box-shadow: 
    0 14px 28px -6px rgba(20, 20, 22, 0.45),
    0 6px 12px -2px rgba(20, 20, 22, 0.25),
    inset 0 1.5px 1.5px rgba(255, 255, 255, 0.32),
    inset 0 -1.5px 1.5px rgba(0, 0, 0, 0.6);
  transition: all 0.25s ease;
}

.stitch2-btn-obsidian-liquid:hover {
  transform: translateY(-1.5px);
  box-shadow: 
    0 18px 32px -6px rgba(20, 20, 22, 0.52),
    0 8px 16px -2px rgba(20, 20, 22, 0.3),
    inset 0 1.5px 2px rgba(255, 255, 255, 0.45);
}

.stitch2-liquid-sheet {
  background: linear-gradient(165deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.65) 100%);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 1);
  box-shadow: 0 24px 50px -12px rgba(28, 25, 23, 0.15), inset 0 1px 1px 0 rgba(255, 255, 255, 0.95);
}

.stitch2-liquid-field {
  background: rgba(255,255,255,0.45);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.03), inset 0 -1px 2px rgba(255,255,255,0.9);
}

.stitch2-liquid-chip {
  background: linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.4) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.8);
  box-shadow: 0 2px 6px rgba(0,0,0,0.04), inset 0 1px 1px rgba(255,255,255,0.9);
}

.stitch2-liquid-category-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.25) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.75);
  box-shadow: 0 4px 10px rgba(0,0,0,0.03), inset 0 1px 1px rgba(255,255,255,0.8);
}


/* ==========================================================================
   MODULE 01: TỔNG QUAN — LIQUID GLASS APPROVED STITCH STYLES
   ========================================================================== */

/* Account Identity Component */
.account-identity-group {
    display: flex;
    align-items: center;
    gap: 12px;
}
.brand-avatar-gold-frame {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFE088 0%, #D4AF37 50%, #9A7B1C 100%);
    padding: 2.5px;
    box-shadow: 0 4px 14px rgba(212, 175, 55, 0.28), inset 0 1px 1.5px rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}
.brand-avatar-gold-frame:hover {
    transform: scale(1.05);
}
.brand-avatar-gold-frame .avatar-initial {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--text-primary);
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.05rem;
    overflow: hidden;
}
.brand-avatar-gold-frame img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.brand-avatar-gold-frame .online-indicator {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #10B981;
    border: 2px solid #FFF;
}
.account-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.account-name-row {
    display: flex;
    align-items: center;
    gap: 5px;
}
.user-greeting-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.verified-check-blue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #007AFF;
    color: #FFF;
    font-size: 9px;
    font-weight: 800;
    flex-shrink: 0;
}
.star-money-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(254, 214, 91, 0.3) 0%, rgba(212, 175, 55, 0.18) 100%);
    border: 1px solid rgba(212, 175, 55, 0.45);
    backdrop-filter: blur(8px);
    width: fit-content;
}
.star-money-badge .star-icon {
    font-size: 11px;
}
.star-money-badge .badge-text {
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}
.star-money-badge .pro-tag {
    font-size: 0.58rem;
    font-weight: 800;
    background: linear-gradient(135deg, #D4AF37, #9A7B1C);
    color: #FFF;
    padding: 1px 4px;
    border-radius: 4px;
    text-transform: uppercase;
}

/* Header Action Buttons */
.btn-header-icon {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--glass-fill-subtle);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--glass-shadow);
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.btn-header-icon:hover {
    transform: translateY(-1px);
    background: var(--glass-bg-hover);
}
.notification-badge-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--expense);
    border: 1.5px solid #FFF;
}
.streak-badge .streak-label {
    font-size: 0.68rem;
    font-weight: 700;
    opacity: 0.8;
    margin-left: 2px;
}

/* Liquid Hero Master Card */
.liquid-hero-card {
    background: linear-gradient(145deg, #182234 0%, #0d1522 100%) !important;
    color: #FFF !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 20px 40px -8px rgba(2, 6, 23, 0.4), inset 0 1px 1px 0 rgba(255, 255, 255, 0.25) !important;
    border-radius: 28px !important;
    padding: 22px !important;
    position: relative;
    overflow: hidden;
    margin-bottom: 16px;
}
.hero-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.hero-label-group {
    display: flex;
    align-items: center;
    gap: 7px;
}
.live-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 10px #10B981;
    animation: pulse 2s infinite;
}
.hero-label-text {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
}
.hero-surplus-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.18);
    color: #34D399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.hero-balance-row {
    margin: 8px 0 4px;
}
.liquid-hero-card .balance-amount {
    font-size: 2.3rem;
    font-weight: 800;
    color: #FFFFFF !important;
    letter-spacing: -0.02em;
    line-height: 1.1;
    display: block;
}
.liquid-hero-card .balance-comparison {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
}
.diff-tag {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.2);
    color: #34D399;
}
.diff-tag.negative {
    background: rgba(244, 63, 94, 0.2);
    color: #FB7185;
}
.hero-pillars-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.pillar-card {
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    padding: 12px 14px;
    transition: background 0.2s ease;
}
.pillar-card:hover {
    background: rgba(255, 255, 255, 0.12);
}
.pillar-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.pillar-arrow {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
}
.pillar-arrow.income {
    background: rgba(16, 185, 129, 0.25);
    color: #34D399;
}
.pillar-arrow.expense {
    background: rgba(244, 63, 94, 0.25);
    color: #FB7185;
}
.pillar-title {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.7);
}
.pillar-amount {
    font-size: 1.05rem;
    font-weight: 700;
    display: block;
    line-height: 1.2;
}
.pillar-amount.income {
    color: #34D399 !important;
}
.pillar-amount.expense {
    color: #FB7185 !important;
}
.pillar-sub {
    font-size: 0.65rem;
    opacity: 0.75;
    margin-top: 3px;
    display: block;
}

/* Asset Performance Chart Card */
.asset-chart-card {
    border-radius: 26px !important;
    padding: 18px !important;
    margin-top: 16px;
}
.chart-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 8px;
}
.card-section-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
}
.card-section-subtitle {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    display: block;
    margin-top: 2px;
}
.chart-range-tabs {
    display: flex;
    gap: 4px;
    background: var(--glass-bg-subtle);
    padding: 3px;
    border-radius: 999px;
    border: 1px solid var(--glass-border-subtle);
}
.range-tab-btn {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}
.range-tab-btn.active {
    background: var(--text-primary);
    color: #FFF;
    font-weight: 700;
}
.asset-chart-wrapper {
    position: relative;
    width: 100%;
    height: 170px;
}
.chart-tooltip {
    position: absolute;
    background: rgba(24, 34, 52, 0.92);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #FFF;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 0.72rem;
    pointer-events: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    z-index: 10;
    transition: left 0.1s ease, top 0.1s ease;
}
.tooltip-date {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.65rem;
    margin-bottom: 2px;
}
.tooltip-val {
    font-size: 0.95rem;
    font-weight: 800;
    color: #34D399;
}
.tooltip-change {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Asset Allocation Card */
.asset-allocation-card {
    border-radius: 26px !important;
    padding: 18px !important;
    margin-top: 16px;
}
.card-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.card-section-badge {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--glass-bg-elevated);
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
}
.allocation-bar-track {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    display: flex;
    overflow: hidden;
    gap: 3px;
    background: var(--glass-bg-subtle);
    margin-bottom: 14px;
    padding: 2px;
}
.allocation-bar-segment {
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s ease;
}
.allocation-legend-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.allocation-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 14px;
    background: var(--glass-fill-subtle);
    border: 1px solid var(--glass-border-subtle);
}
.allocation-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.allocation-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.allocation-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
}
.allocation-val {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Date Rail Container */
.date-rail-hint {
    font-size: 0.72rem;
    color: var(--text-tertiary);
}
.date-rail-container {
    margin-top: 8px;
    margin-bottom: 16px;
}

/* Upcoming Payments Card */
.upcoming-payments-card {
    border-radius: 26px !important;
    padding: 18px !important;
    margin-top: 16px;
}
.empty-upcoming-state {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border-radius: 16px;
    background: var(--glass-fill-subtle);
    border: 1px dashed var(--glass-border);
    color: var(--text-tertiary);
    font-size: 0.82rem;
}

/* Financial Insight Card */
.financial-insight-card {
    border-radius: 26px !important;
    padding: 18px !important;
    margin-top: 16px;
    background: linear-gradient(135deg, rgba(254, 214, 91, 0.14) 0%, rgba(255, 255, 255, 0.55) 100%) !important;
    border: 1px solid rgba(212, 175, 55, 0.35) !important;
}
.insight-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.sparkle-badge {
    font-size: 0.68rem;
    font-weight: 800;
    color: #745C00;
    background: rgba(254, 214, 91, 0.4);
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: 0.04em;
}
.insight-date {
    font-size: 0.68rem;
    color: var(--text-tertiary);
}
.insight-body {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.insight-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    flex-shrink: 0;
}
.insight-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 3px 0;
}
.insight-desc {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

/* Action Hub Modal */
.action-hub-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2100 !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    background: rgba(15, 12, 10, 0.45) !important;
    display: none;
    align-items: flex-end !important;
    justify-content: center !important;
    padding-bottom: 30px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.action-hub-modal.active,
.action-hub-modal[style*="display: flex"] {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
.action-hub-card {
    width: 90%;
    max-width: 420px;
    border-radius: 30px;
    padding: 22px;
    background: var(--glass-fill-sheet);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow-lg);
    transform: translateY(24px);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.action-hub-modal.active .action-hub-card,
.action-hub-modal[style*="display: flex"] .action-hub-card {
    transform: translateY(0) !important;
}
.action-hub-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.action-hub-title {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}
.btn-close-action-hub {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--glass-bg-subtle);
    color: var(--text-secondary);
    font-weight: 700;
    cursor: pointer;
}
.action-hub-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.action-hub-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 10px;
    border-radius: 20px;
    border: 1px solid var(--glass-border-subtle);
    background: var(--glass-fill-subtle);
    cursor: pointer;
    transition: all 0.2s ease;
}
.action-hub-item:hover {
    transform: translateY(-2px);
    background: var(--glass-bg-hover);
}
.hub-icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.hub-icon-circle.expense { background: rgba(244, 63, 94, 0.12); color: var(--expense); }
.hub-icon-circle.income { background: rgba(16, 185, 129, 0.12); color: var(--income); }
.hub-icon-circle.journal { background: rgba(254, 214, 91, 0.25); color: #745C00; }
.hub-item-title {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--text-primary);
}
.hub-item-sub {
    font-size: 0.65rem;
    color: var(--text-tertiary);
    margin-top: 2px;
}


/* ==========================================================================
   APPROVED STITCH SCREEN "TỔNG QUAN" — EXACT REBUILD STYLES
   ========================================================================== */

/* Overall App Background & Container for Warm Ivory Theme */
body {
    background-color: transparent !important;
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif !important;
    color: #1B1C18 !important;
}

.app-container {
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
}

/* Header & Compact Account Identity */
.app-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 4px 14px 4px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.account-identity-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-avatar-gold {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFE088 0%, #D4AF37 60%, #B8860B 100%);
    padding: 2.5px;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
    cursor: pointer;
    flex-shrink: 0;
}
.header-avatar-gold .avatar-letter {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #1B1C18;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
    overflow: hidden;
}
.header-avatar-gold img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.avatar-verified-dot {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #007AFF;
    color: #FFF;
    font-size: 8px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #FFF;
}

.header-user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.header-user-name-row {
    display: flex;
    align-items: center;
    gap: 5px;
}
.user-name {
    font-size: 0.98rem;
    font-weight: 800;
    color: #1B1C18;
    line-height: 1.1;
}
.blue-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #007AFF;
    color: #FFF;
    font-size: 8px;
    font-weight: 900;
}
.header-badge-row {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    color: #745C00;
}
.star-money-pill {
    font-weight: 700;
    background: rgba(254, 214, 91, 0.4);
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid rgba(212, 175, 55, 0.4);
}
.dot-separator {
    color: #9CA3AF;
}
.streak-text {
    color: #6B7280;
    font-weight: 600;
}

.header-right-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.streak-fire-pill {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #FFF;
    border: 1px solid rgba(229, 231, 235, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 800;
    color: #1B1C18;
}
.header-icon-btn {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #FFF;
    border: 1px solid rgba(229, 231, 235, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    color: #4B5563;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.notif-dot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #EF4444;
    border: 1.5px solid #FFF;
}

/* Common Card Style (Stitch Approved Ivory Glass Cards) */
.card {
    background: #FFFFFF !important;
    border-radius: 24px !important;
    padding: 18px !important;
    box-shadow: 0 10px 28px -4px rgba(28, 25, 23, 0.04), inset 0 1px 1px rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(240, 238, 232, 0.9) !important;
    margin-bottom: 14px !important;
}

/* 1. Hero Total Assets Card */
.hero-total-assets-card {
    background: #FFFFFF !important;
    padding: 20px !important;
}
.hero-header-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.hero-title-group {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #6B7280;
    display: flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
}
.hero-pct-pill {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
}
.hero-pct-pill.positive {
    background: #D1FAE5;
    color: #047857;
}
.hero-amount-line {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 8px 0 16px;
    flex-wrap: wrap;
}
.hero-balance-val {
    font-size: 2.2rem;
    font-weight: 800;
    color: #1B1C18;
    letter-spacing: -0.03em;
    line-height: 1.1;
}
.hero-diff-pill {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
}
.hero-diff-pill.positive {
    background: #D1FAE5;
    color: #047857;
}
.hero-flow-pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid #F3F4F6;
}
.flow-pillar {
    background: #F9FAFB;
    border-radius: 16px;
    padding: 10px 12px;
}
.pillar-label-row {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #6B7280;
    margin-bottom: 4px;
}
.pillar-label-row .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.pillar-label-row .dot.green { background: #10B981; }
.pillar-label-row .dot.red { background: #EF4444; }
.pillar-value {
    font-size: 1.05rem;
    font-weight: 800;
    display: block;
}
.pillar-value.income { color: #059669; }
.pillar-value.expense { color: #DC2626; }

/* 2. Biến Động Tài Sản Chart Card */
.asset-performance-card {
    padding: 18px !important;
}
.card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.card-title-left {
    display: flex;
    align-items: center;
    gap: 6px;
}
.card-title-text {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #1B1C18;
}
.chart-time-tabs {
    display: flex;
    gap: 3px;
    background: #F3F4F6;
    padding: 2.5px;
    border-radius: 999px;
}
.time-tab-btn {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: #6B7280;
    cursor: pointer;
}
.time-tab-btn.active {
    background: #1B1C18;
    color: #FFF;
}
.scenario-pills-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}
.scenario-label {
    font-size: 0.65rem;
    font-weight: 800;
    color: #9CA3AF;
}
.scenario-pill {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid #E5E7EB;
    background: #FFF;
    color: #4B5563;
    cursor: pointer;
}
.scenario-pill.active-green {
    background: #D1FAE5;
    color: #047857;
    border-color: #6EE7B7;
}

.chart-svg-box {
    position: relative;
    width: 100%;
    height: 140px;
    margin: 8px 0;
}

.chart-kpis-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #F3F4F6;
}
.kpi-box {
    background: #F9FAFB;
    border-radius: 14px;
    padding: 8px 10px;
    text-align: center;
}
.kpi-label {
    font-size: 0.68rem;
    color: #6B7280;
    display: block;
    margin-bottom: 2px;
}
.kpi-val {
    font-size: 0.92rem;
    font-weight: 800;
    display: block;
}
.kpi-val.positive { color: #047857; }

/* 3. Phân Bổ Tài Sản */
.badge-pill {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
    background: #F3F4F6;
    color: #4B5563;
}
.badge-pill.gold {
    background: rgba(254, 214, 91, 0.3);
    color: #745C00;
}

.multi-color-bar {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    display: flex;
    overflow: hidden;
    gap: 3px;
    margin: 10px 0 14px;
    background: #E5E7EB;
}
.bar-seg {
    height: 100%;
    border-radius: 999px;
}
.bar-seg.green { background: #10B981; }
.bar-seg.indigo { background: #6366F1; }
.bar-seg.amber { background: #F59E0B; }
.bar-seg.brown { background: #8D6E63; }

.asset-cat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.asset-cat-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 16px;
    background: #F9FAFB;
    border: 1px solid #F3F4F6;
}
.asset-cat-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.asset-cat-left .cat-icon {
    font-size: 1.1rem;
}
.asset-cat-left .cat-name {
    font-size: 0.78rem;
    font-weight: 700;
    color: #1B1C18;
    display: block;
}
.asset-cat-left .cat-amount {
    font-size: 0.68rem;
    color: #6B7280;
    display: block;
}
.cat-pct-badge {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
}
.cat-pct-badge.green { background: #D1FAE5; color: #047857; }
.cat-pct-badge.indigo { background: #E0E7FF; color: #4338CA; }
.cat-pct-badge.amber { background: #FEF3C7; color: #B45309; }
.cat-pct-badge.brown { background: #EFEBE9; color: #5D4037; }

/* 4. Date Rail & Selected Date Summary Banner */
.section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    margin-bottom: 8px;
    padding: 0 4px;
}
.title-left {
    display: flex;
    align-items: center;
    gap: 6px;
}
.section-title-bold {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #1B1C18;
}
.link-today-reset {
    font-size: 0.75rem;
    font-weight: 700;
    color: #047857;
    background: none;
    border: none;
    cursor: pointer;
}
.date-rail-strip {
    margin-bottom: 12px !important;
}

.day-summary-banner-card {
    padding: 16px !important;
}
.banner-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.date-badge-group {
    display: flex;
    align-items: center;
    gap: 6px;
}
.green-today-pill {
    font-size: 0.68rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    background: #D1FAE5;
    color: #047857;
}
.full-date-title {
    font-size: 0.88rem;
    font-weight: 800;
    color: #1B1C18;
}
.net-flow-badge {
    font-size: 0.8rem;
    font-weight: 800;

}
.net-flow-badge.positive { color: #047857; }

.banner-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid #F3F4F6;
}
.kpi-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.kpi-sublabel {
    font-size: 0.68rem;
    color: #6B7280;
}
.kpi-subval {
    font-size: 0.88rem;
    font-weight: 800;
}
.kpi-subval.income { color: #047857; }
.kpi-subval.expense { color: #DC2626; }
.kpi-subval.rating { color: #D97706; }

.tx-count-pill {
    font-size: 0.72rem;
    font-weight: 700;
    color: #6B7280;
}

/* 5. Account Identity System Component & Selector Demo */
.account-identity-system-card {
    padding: 18px !important;
}
.identity-profile-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 18px;
    background: #F9FAFB;
    border: 1px solid #F3F4F6;
    margin-top: 12px;
    margin-bottom: 14px;
    position: relative;
}
.profile-avatar-gold-lg {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFE088 0%, #D4AF37 60%, #B8860B 100%);
    padding: 2.5px;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
    flex-shrink: 0;
}
.profile-avatar-gold-lg .avatar-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #1B1C18;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    overflow: hidden;
}
.profile-info-column {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
.profile-name-row {
    display: flex;
    align-items: center;
    gap: 5px;
}
.profile-name {
    font-size: 0.95rem;
    font-weight: 800;
    color: #1B1C18;
}
.profile-tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #745C00;
    background: rgba(254, 214, 91, 0.35);
    padding: 1px 7px;
    border-radius: 999px;
    width: fit-content;
}
.profile-sync-status {
    font-size: 0.65rem;
    color: #9CA3AF;
}
.size-tag {
    font-size: 0.65rem;
    font-weight: 800;
    color: #9CA3AF;
    background: #E5E7EB;
    padding: 2px 6px;
    border-radius: 6px;
}

.account-selector-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.selector-cap-label {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #6B7280;
}
.selector-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 16px;
    background: #FFF;
    border: 1px solid #E5E7EB;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    cursor: pointer;
}
.selector-left {
    display: flex;
    align-items: center;
    gap: 6px;
}
.mini-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #1B1C18;
    color: #FFF;
    font-size: 0.68rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.badge-mini-gold {
    font-size: 0.62rem;
    font-weight: 700;
    color: #745C00;
    background: rgba(254, 214, 91, 0.4);
    padding: 1px 5px;
    border-radius: 999px;
}
.selector-right {
    display: flex;
    align-items: center;
    gap: 6px;
}
.account-desc {
    font-size: 0.72rem;
    color: #4B5563;
}
.selector-arrows {
    font-size: 0.85rem;
    color: #9CA3AF;
}

/* Bottom Navigation Bar (Exact Stitch Rebuild) */
.bottom-nav {
    position: fixed !important;
    bottom: 12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 28px) !important;
    max-width: 412px !important;
    height: 64px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    box-shadow: 0 12px 32px rgba(28, 25, 23, 0.1), inset 0 1px 1px rgba(255, 255, 255, 1) !important;
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    padding: 0 8px !important;
    z-index: 999 !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, visibility 0.28s !important;
}

.bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: transparent;
    border: none;
    color: #9CA3AF;
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.bottom-nav .nav-item.active {
    color: #047857 !important;
    font-weight: 800 !important;
}
.nav-avatar-circle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #1B1C18;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 800;
}

.fab-wrapper {
    position: relative;
    top: -14px;
    z-index: 1002 !important;
}
.fab-button {
    position: relative !important;
    z-index: 1003 !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: linear-gradient(180deg, #292524 0%, #1C1917 100%) !important;
    color: #FFF !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 20px rgba(28, 25, 23, 0.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    transition: transform 0.2s ease !important;
}
.fab-button * {
    pointer-events: none !important;
}
.fab-button:active {
    transform: scale(0.92) !important;
}



#screen-history, #all-history-list { padding-bottom: 120px !important; }

/* STITCH APPROVED TỔNG QUAN EXACT STYLES */
:root {
  --bg-base: #FBF9F5;
  --card-glass: rgba(255, 255, 255, 0.88);
  --card-border: rgba(255, 255, 255, 0.95);
  --gold-glow: rgba(212, 175, 55, 0.28);
}
body {
  background-color: var(--bg-base);
}
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.liquid-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 30px -5px rgba(28, 25, 23, 0.04), 0 2px 6px -1px rgba(28, 25, 23, 0.02);
}
.liquid-card-elevated {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 1);
  box-shadow: 0 16px 36px -6px rgba(212, 175, 55, 0.08), 0 4px 12px rgba(0,0,0,0.03);
}

.luxury-gold-ring {
  background: linear-gradient(135deg, #ffe088 0%, #d4af37 50%, #997300 100%);
  box-shadow: 0 0 12px var(--gold-glow);
}

.date-item.active {
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
  border: 1.5px solid #10b981;
  box-shadow: 0 8px 20px -4px rgba(16, 185, 129, 0.25), inset 0 1px 1px #fff;
  transform: scale(1.05);
}
.date-item {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.date-rail-strip .calendar-day-item {
    flex: 0 0 auto !important;
}

/* ==========================================================================
   INSTAGRAM MULTI-PHOTO SWIPE CAROUSEL & VIDEO PLAYBACK
   ========================================================================== */
.instagram-carousel-container {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 1.25rem;
    overflow: hidden;
    background: #0f172a;
    user-select: none;
}

.carousel-track {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.carousel-track::-webkit-scrollbar {
    display: none;
}

.carousel-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f172a;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: auto;
    transition: transform 0.4s ease;
}

.carousel-slide video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.carousel-counter {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 9px;
    border-radius: 9999px;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Space Grotesk', monospace;
    z-index: 10;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.carousel-dots {
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    z-index: 10;
    pointer-events: none;
}

.carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.45);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.carousel-dot.active {
    background: #ffffff;
    transform: scale(1.35);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    width: 14px;
    border-radius: 4px;
}

/* Video Play Overlay */
.video-play-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: opacity 0.2s ease;
}

.video-play-btn {
    width: 52px;
    height: 52px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0f172a;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-play-btn:active {
    transform: scale(0.9);
}

.video-duration-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    font-family: monospace;
    z-index: 6;
}

/* ==========================================================================
   STITCH THỐNG KÊ — LIQUID GLASS & INTERACTIVE CHARTS
   ========================================================================== */
.glass-card {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 20px -2px rgba(60, 74, 66, 0.05);
  position: relative;
  overflow: hidden;
}
html.theme-dark .glass-card, [data-theme="midnight"] .glass-card, [data-theme="graphite"] .glass-card, [data-theme="black_glass"] .glass-card, [data-theme="liquid_quartz_glass"] .glass-card, [data-theme="cyberpunk_hud"] .glass-card {
  background: rgba(26, 29, 36, 0.85);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 24px -2px rgba(0, 0, 0, 0.35);
}
.liquid-badge {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(187, 202, 191, 0.35);
}
.glass-sheen::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 60%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 100%
  );
  transform: rotate(25deg);
  pointer-events: none;
  animation: glassSheen 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes glassSheen {
  0% { transform: translateX(-120%) rotate(25deg); opacity: 0; }
  20% { opacity: 0.3; }
  40% { transform: translateX(360%) rotate(25deg); opacity: 0; }
  100% { transform: translateX(360%) rotate(25deg); opacity: 0; }
}
.chart-draw-line {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawPath 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes drawPath { to { stroke-dashoffset: 0; } }
@keyframes radarPulse {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.4); opacity: 0; }
}
.radar-ring {
  transform-origin: center;
  animation: radarPulse 2.4s ease-out infinite;
}
.touch-tactile {
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease, background-color 0.2s ease;
}
.touch-tactile:active {
  transform: scale(0.97);
}
.progress-bar-fill {
  transition: width 1.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.calendar-day-selected {
  box-shadow: 0 0 0 2px #d4af37, 0 4px 12px rgba(115, 92, 0, 0.18);
  transform: scale(1.08);
}

/* ==========================================================================
   UNIVERSAL MODAL & BOTTOM SHEET FIX (Eliminates Bottom Nav Overlap Bug)
   ========================================================================== */
.modal-overlay,
[id^="sheet-"],
#allocation-sheet,
.sheet-modal-wrapper,
.fixed.inset-0.z-50,
.fixed.inset-0.z-\[2500\] {
    z-index: 2500 !important;
}

.sheet-backdrop {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
}

.sheet-modal {
    position: relative !important;
    z-index: 2 !important;
}

/* Hide and smoothly slide bottom nav out of view whenever any sheet or modal is open */
body.modal-open .bottom-nav,
body:has([id^="sheet-"].active) .bottom-nav,
body:has(.modal-overlay.active) .bottom-nav,
body:has(.action-hub-modal.active) .bottom-nav {
    transform: translate(-50%, 120px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* Safe Area Padding for Modal Footers & Sticky Buttons on Gesture Screens */
.sheet-footer-action,
#sheet-edit-assets .sheet-footer-action,
#sheet-edit-assets > div > div:last-child {
    padding-bottom: max(20px, calc(env(safe-area-inset-bottom) + 16px)) !important;
}

/* ============================================================================
   UNIVERSAL THEME ARCHITECTURE & FULL-APP SURFACE CASCADE
   Guarantees 100% full-app redesign across all screens, modals, cards, nav & inputs
   ============================================================================ */

/* 1. All screens are completely transparent to let #bg-layer wallpaper shine */
.screen,
#screen-home,
#screen-stats,
#screen-journal,
#screen-history,
#screen-profile,
#screen-settings {
    background: transparent !important;
}

/* 2. Universal Glass Surface across all screens */
.glass-card,
.journal-feed-card,
#screen-home section.rounded-\[28px\],
#screen-home section.rounded-2xl,
#screen-profile section,
#screen-settings section,
#screen-stats section {
    background: var(--glass-fill, rgba(255, 255, 255, 0.85)) !important;
    border-color: var(--glass-border, rgba(255, 255, 255, 0.6)) !important;
    box-shadow: var(--glass-shadow) !important;
    backdrop-filter: var(--glass-blur, blur(20px)) !important;
    -webkit-backdrop-filter: var(--glass-blur, blur(20px)) !important;
    transition: var(--_theme-trans, background 0.35s ease, border-color 0.35s ease, color 0.25s ease);
}

/* 3. Universal Bottom Sheet & Modal Styling */
.sheet-modal,
.bottom-sheet,
.modal-sheet,
.auth-sheet,
#sheet-settings-modal .sheet-modal,
#sheet-edit-profile .sheet-modal,
#add-modal .bottom-sheet,
#composer-journal-modal .bottom-sheet,
#day-detail-modal .bottom-sheet,
#auth-modal .bottom-sheet {
    background: var(--glass-fill-sheet, #FFFFFF) !important;
    border-top: 1.5px solid var(--glass-border, rgba(255, 255, 255, 0.5)) !important;
    color: var(--tw-on-surface, var(--text-primary)) !important;
    backdrop-filter: var(--glass-blur, blur(24px)) !important;
    -webkit-backdrop-filter: var(--glass-blur, blur(24px)) !important;
    transition: var(--_theme-trans, background 0.35s ease, border-color 0.35s ease, color 0.25s ease);
}

/* 4. Universal Bottom Navigation Bar */
.bottom-nav {
    background: var(--glass-fill-sheet, rgba(255, 255, 255, 0.92)) !important;
    border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.5)) !important;
    box-shadow: var(--glass-shadow) !important;
    backdrop-filter: var(--glass-blur, blur(24px)) !important;
    -webkit-backdrop-filter: var(--glass-blur, blur(24px)) !important;
    transition: var(--_theme-trans, background 0.35s ease, border-color 0.35s ease);
}

/* ── PER-THEME DEEP SURFACE & COMPONENT REDESIGN ────────────────────── */

/* ── A. DARK THEMES DEEP OVERRIDE ── */
html.theme-dark,
[data-theme="dark_luxury"],
[data-theme="graphite"],
[data-theme="midnight"],
[data-theme="black_glass"],
[data-theme="deep_navy"],
[data-theme="liquid_quartz_glass"],
[data-theme="cyberpunk_hud"],
[data-theme="galaxy_nebula"],
[data-theme="cyber_aurora"],
[data-theme="royal_amethyst"],
[data-theme="liquid_titanium_space"],
[data-theme="emerald_luxury"] {
    --tw-surface: transparent;
    --tw-surface-container: rgba(255, 255, 255, 0.08);
    --tw-surface-container-lowest: rgba(22, 22, 28, 0.85);
    --tw-surface-container-low: rgba(255, 255, 255, 0.05);
    --tw-surface-container-high: rgba(255, 255, 255, 0.12);
    --tw-surface-container-highest: rgba(255, 255, 255, 0.16);
    --tw-on-surface: #F8FAFC;
    --tw-on-surface-variant: #CBD5E1;
    --tw-outline: rgba(255, 255, 255, 0.22);
    --tw-outline-variant: rgba(255, 255, 255, 0.12);
    --tw-inverse-surface: #F8FAFC;
    --tw-inverse-on-surface: #0F172A;
    --tw-surface-bright: rgba(255, 255, 255, 0.10);
    --tw-surface-dim: rgba(0, 0, 0, 0.5);
    --glass-fill-sheet: rgba(18, 18, 24, 0.96);
    color-scheme: dark;
}

html.theme-dark .sheet-modal,
html.theme-dark .bottom-sheet,
html.theme-dark .modal-sheet,
html.theme-dark .auth-sheet,
html.theme-dark #sheet-settings-modal .sheet-modal,
html.theme-dark #sheet-edit-profile .sheet-modal,
html.theme-dark #add-modal .bottom-sheet,
html.theme-dark #composer-journal-modal .bottom-sheet,
html.theme-dark #day-detail-modal .bottom-sheet,
html.theme-dark #auth-modal .bottom-sheet,
[data-theme="dark_luxury"] .sheet-modal,
[data-theme="midnight"] .sheet-modal,
[data-theme="black_glass"] .sheet-modal,
[data-theme="liquid_quartz_glass"] .sheet-modal,
[data-theme="cyberpunk_hud"] .sheet-modal {
    background: rgba(18, 18, 24, 0.96) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #F8FAFC !important;
}

html.theme-dark .bottom-nav,
[data-theme="dark_luxury"] .bottom-nav,
[data-theme="midnight"] .bottom-nav,
[data-theme="black_glass"] .bottom-nav,
[data-theme="liquid_quartz_glass"] .bottom-nav,
[data-theme="cyberpunk_hud"] .bottom-nav {
    background: rgba(14, 14, 18, 0.94) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}

html.theme-dark .text-slate-900,
html.theme-dark .text-slate-800,
html.theme-dark .text-on-surface,
[data-theme="dark_luxury"] .text-slate-900,
[data-theme="liquid_quartz_glass"] .text-slate-900,
[data-theme="cyberpunk_hud"] .text-slate-900 {
    color: #F8FAFC !important;
}

html.theme-dark .text-slate-600,
html.theme-dark .text-slate-500,
html.theme-dark .text-on-surface-variant,
[data-theme="dark_luxury"] .text-slate-600,
[data-theme="liquid_quartz_glass"] .text-slate-600,
[data-theme="cyberpunk_hud"] .text-slate-600 {
    color: #CBD5E1 !important;
}

html.theme-dark .text-slate-400,
html.theme-dark .text-outline,
[data-theme="dark_luxury"] .text-slate-400,
[data-theme="liquid_quartz_glass"] .text-slate-400,
[data-theme="cyberpunk_hud"] .text-slate-400 {
    color: #94A3B8 !important;
}

html.theme-dark .bg-slate-50,
html.theme-dark .bg-slate-100,
[data-theme="dark_luxury"] .bg-slate-50,
[data-theme="liquid_quartz_glass"] .bg-slate-50,
[data-theme="cyberpunk_hud"] .bg-slate-50 {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

html.theme-dark .bg-white,
[data-theme="dark_luxury"] .bg-white,
[data-theme="liquid_quartz_glass"] .bg-white,
[data-theme="cyberpunk_hud"] .bg-white {
    background: rgba(26, 26, 34, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

html.theme-dark input[type="text"],
html.theme-dark input[type="number"],
html.theme-dark input[type="date"],
html.theme-dark input[type="datetime-local"],
html.theme-dark textarea,
html.theme-dark select,
[data-theme="liquid_quartz_glass"] input,
[data-theme="cyberpunk_hud"] input {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #F8FAFC !important;
}

/* ── B. CỔ PHONG THỦY MẶC DEEP REDESIGN ── */
[data-theme="cophong_thuy_mac"] {
    --tw-surface: transparent;
    --tw-surface-container: rgba(245, 239, 230, 0.75);
    --tw-surface-container-lowest: rgba(253, 251, 247, 0.92);
    --tw-surface-container-low: rgba(245, 239, 230, 0.85);
    --tw-surface-container-high: rgba(239, 232, 220, 0.90);
    --tw-surface-container-highest: rgba(227, 215, 197, 0.95);
    --tw-on-surface: #1C1917;
    --tw-on-surface-variant: #5C4D3C;
    --tw-outline: rgba(197, 157, 95, 0.45);
    --tw-outline-variant: rgba(197, 157, 95, 0.25);
    --tw-inverse-surface: #1C1917;
    --tw-inverse-on-surface: #FAF8F5;
    --tw-surface-bright: #FDFBF7;
    --tw-surface-dim: #E3D7C5;
    --glass-fill-sheet: rgba(250, 248, 245, 0.98);
}

[data-theme="cophong_thuy_mac"] .sheet-modal,
[data-theme="cophong_thuy_mac"] .bottom-sheet,
[data-theme="cophong_thuy_mac"] .bottom-nav {
    background: linear-gradient(155deg, rgba(253, 251, 247, 0.98) 0%, rgba(245, 239, 230, 0.95) 100%) !important;
    border-top: 1.5px solid rgba(197, 157, 95, 0.40) !important;
    color: #1C1917 !important;
}

[data-theme="cophong_thuy_mac"] .text-slate-800,
[data-theme="cophong_thuy_mac"] .text-slate-900,
[data-theme="cophong_thuy_mac"] .text-on-surface {
    color: #1C1917 !important;
}

[data-theme="cophong_thuy_mac"] .text-slate-600,
[data-theme="cophong_thuy_mac"] .text-slate-500,
[data-theme="cophong_thuy_mac"] .text-on-surface-variant {
    color: #5C4D3C !important;
}

[data-theme="cophong_thuy_mac"] .bg-slate-50,
[data-theme="cophong_thuy_mac"] .bg-slate-100 {
    background: rgba(245, 239, 230, 0.70) !important;
    border-color: rgba(197, 157, 95, 0.25) !important;
}

[data-theme="cophong_thuy_mac"] .bg-white {
    background: rgba(253, 251, 247, 0.92) !important;
    border-color: rgba(197, 157, 95, 0.30) !important;
}

/* ── C. HIỆN ĐẠI 3D POP DEEP REDESIGN (Duolingo Tactile Extrusion) ── */
[data-theme="hien_dai_3d_pop"] {
    --tw-surface: transparent;
    --tw-surface-container: #DCFCE7;
    --tw-surface-container-lowest: #FFFFFF;
    --tw-surface-container-low: #F0FDF4;
    --tw-surface-container-high: #E0F2FE;
    --tw-surface-container-highest: #CBD5E1;
    --tw-on-surface: #0F172A;
    --tw-on-surface-variant: #334155;
    --tw-outline: rgba(16, 185, 129, 0.35);
    --tw-outline-variant: rgba(16, 185, 129, 0.20);
    --tw-inverse-surface: #0F172A;
    --tw-inverse-on-surface: #FFFFFF;
    --tw-surface-bright: #FFFFFF;
    --tw-surface-dim: #E2E8F0;
    --glass-fill-sheet: #FFFFFF;
}

[data-theme="hien_dai_3d_pop"] button:not(.nav-item):not(.btn-close-modal):not(.btn-close-sheet):not(.tab-seg-item):not(.journal-mood-btn):not(.theme-btn) {
    border-bottom: 3.5px solid rgba(0, 0, 0, 0.18) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.20) !important;
    transition: transform 0.08s ease, border-bottom 0.08s ease !important;
}

[data-theme="hien_dai_3d_pop"] button:not(.nav-item):not(.btn-close-modal):not(.btn-close-sheet):not(.tab-seg-item):not(.journal-mood-btn):not(.theme-btn):active {
    transform: translateY(2.5px) !important;
    border-bottom-width: 1px !important;
}

/* ── D. LIQUID QUARTZ KÍNH LỎNG DEEP REDESIGN ── */
[data-theme="liquid_quartz_glass"] {
    --tw-surface: transparent;
    --tw-surface-container: rgba(255, 255, 255, 0.06);
    --tw-surface-container-lowest: rgba(24, 24, 30, 0.78);
    --tw-surface-container-low: rgba(255, 255, 255, 0.04);
    --tw-surface-container-high: rgba(255, 255, 255, 0.12);
    --tw-surface-container-highest: rgba(255, 255, 255, 0.16);
    --tw-on-surface: #F8FAFC;
    --tw-on-surface-variant: #CBD5E1;
    --tw-outline: rgba(255, 255, 255, 0.22);
    --tw-outline-variant: rgba(255, 255, 255, 0.12);
    --tw-inverse-surface: #F8FAFC;
    --tw-inverse-on-surface: #0F172A;
    --tw-surface-bright: rgba(255, 255, 255, 0.10);
    --tw-surface-dim: rgba(0, 0, 0, 0.5);
    --glass-fill-sheet: rgba(14, 14, 18, 0.94);
}

[data-theme="liquid_quartz_glass"] .glass-card,
[data-theme="liquid_quartz_glass"] .journal-feed-card,
[data-theme="liquid_quartz_glass"] section[class*="rounded-"],
[data-theme="liquid_quartz_glass"] .sheet-modal,
[data-theme="liquid_quartz_glass"] .bottom-sheet,
[data-theme="liquid_quartz_glass"] .bottom-nav {
    backdrop-filter: blur(28px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.70), 0 0 35px rgba(212, 175, 55, 0.16), inset 0 1.2px 1.2px rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}

/* ── E. CYBERPUNK HUD VỊ LAI DEEP REDESIGN ── */
[data-theme="cyberpunk_hud"] {
    --tw-surface: transparent;
    --tw-surface-container: rgba(0, 240, 255, 0.08);
    --tw-surface-container-lowest: rgba(5, 12, 24, 0.88);
    --tw-surface-container-low: rgba(2, 6, 16, 0.92);
    --tw-surface-container-high: rgba(0, 240, 255, 0.15);
    --tw-surface-container-highest: rgba(0, 240, 255, 0.25);
    --tw-on-surface: #00F0FF;
    --tw-on-surface-variant: #A5F3FC;
    --tw-outline: rgba(0, 240, 255, 0.45);
    --tw-outline-variant: rgba(0, 240, 255, 0.25);
    --tw-inverse-surface: #00F0FF;
    --tw-inverse-on-surface: #020617;
    --tw-surface-bright: rgba(0, 240, 255, 0.15);
    --tw-surface-dim: rgba(2, 6, 16, 0.98);
    --glass-fill-sheet: rgba(3, 8, 18, 0.96);
}

[data-theme="cyberpunk_hud"] .sheet-modal,
[data-theme="cyberpunk_hud"] .bottom-sheet,
[data-theme="cyberpunk_hud"] .bottom-nav,
[data-theme="cyberpunk_hud"] .glass-card,
[data-theme="cyberpunk_hud"] .journal-feed-card,
[data-theme="cyberpunk_hud"] section[class*="rounded-"] {
    border: 1px solid rgba(0, 240, 255, 0.40) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.85), 0 0 20px rgba(0, 240, 255, 0.22) !important;
}

/* ── F. NEO-BRUTALISM FUNKY DEEP REDESIGN ── */
[data-theme="neo_brutalism_pop"] {
    --tw-surface: transparent;
    --tw-surface-container: #FEF9C3;
    --tw-surface-container-lowest: #FFFFFF;
    --tw-surface-container-low: #FFFBEB;
    --tw-surface-container-high: #FDE68A;
    --tw-surface-container-highest: #000000;
    --tw-on-surface: #000000;
    --tw-on-surface-variant: #1F2937;
    --tw-outline: #000000;
    --tw-outline-variant: #000000;
    --tw-inverse-surface: #000000;
    --tw-inverse-on-surface: #FFFFFF;
    --tw-surface-bright: #FFFFFF;
    --tw-surface-dim: #FEF08A;
    --glass-fill-sheet: #FFFBEB;
}

[data-theme="neo_brutalism_pop"] .sheet-modal,
[data-theme="neo_brutalism_pop"] .bottom-sheet,
[data-theme="neo_brutalism_pop"] .glass-card,
[data-theme="neo_brutalism_pop"] .journal-feed-card,
[data-theme="neo_brutalism_pop"] section[class*="rounded-"] {
    border: 2.5px solid #000000 !important;
    box-shadow: 4px 4px 0px #000000 !important;
    border-radius: 16px !important;
    background: #FFFFFF !important;
    color: #000000 !important;
}

[data-theme="neo_brutalism_pop"] button:not(.nav-item):not(.btn-close-modal):not(.btn-close-sheet):not(.theme-btn) {
    border: 2px solid #000000 !important;
    box-shadow: 3px 3px 0px #000000 !important;
    border-radius: 12px !important;
    transition: transform 0.08s ease, box-shadow 0.08s ease !important;
}

[data-theme="neo_brutalism_pop"] button:not(.nav-item):not(.btn-close-modal):not(.btn-close-sheet):not(.theme-btn):active {
    transform: translate(2px, 2px) !important;
    box-shadow: 1px 1px 0px #000000 !important;
}

[data-theme="neo_brutalism_pop"] .bottom-nav {
    border-top: 2.5px solid #000000 !important;
    background: #FFFBEB !important;
    box-shadow: 0 -4px 0px rgba(0, 0, 0, 0.15) !important;
}

/* ==========================================================================
   DESKTOP RESPONSIVE LAYOUT & WEB EXPANSION (min-width: 1024px)
   ========================================================================== */
@media (min-width: 1024px) {
    /* Unconstrain app container for wide monitors */
    .app-container {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        min-height: 100vh !important;
    }

    /* Hide mobile phone header and bottom navigation bar */
    .app-header {
        display: none !important;
    }
    .bottom-nav {
        display: none !important;
    }

    /* Screen containers full width responsive on desktop */
    .screen {
        max-width: 100% !important;
        width: 100% !important;
        padding-bottom: 40px !important;
    }

    /* Desktop modal centering — transform mobile bottom sheets into centered luxury glass dialogs */
    .modal-overlay {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 24px !important;
        backdrop-filter: blur(16px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
        background: rgba(15, 23, 42, 0.45) !important;
        z-index: 100 !important;
    }

    .modal-overlay[style*="display: none"],
    .modal-overlay[style*="display:none"] {
        display: none !important;
    }

    .bottom-sheet,
    .composer-modal-container,
    .action-hub-card,
    .sheet-modal,
    .liquid-sheet {
        position: relative !important;
        max-width: 580px !important;
        width: 100% !important;
        margin: auto !important;
        border-radius: 28px !important;
        max-height: 88vh !important;
        box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
        animation: desktopModalEnter 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    }

    .sheet-drag-handle {
        display: none !important;
    }

    /* Desktop Sidebar Nav styles */
    .desktop-sidebar {
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-right: 1px solid rgba(226, 232, 240, 0.8);
    }

    .desktop-nav-btn {
        transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
        cursor: pointer;
    }

    .desktop-nav-btn:hover {
        background: rgba(0, 108, 73, 0.08);
        color: #006c49;
        transform: translateX(3px);
    }

    .desktop-nav-btn.active {
        background: linear-gradient(135deg, rgba(0, 108, 73, 0.12), rgba(0, 108, 73, 0.04));
        color: #006c49;
        font-weight: 700;
        border-left: 3px solid #006c49;
        padding-left: 11px;
    }

    .desktop-nav-btn.active .nav-badge {
        background: #006c49 !important;
        color: #ffffff !important;
    }
}

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

/* ── Theme Adaptations for Desktop Sidebar & Topbar ── */
[data-theme="liquid_quartz_glass"] .desktop-sidebar,
[data-theme="liquid_quartz_glass"] .desktop-topbar {
    background: rgba(14, 13, 12, 0.90) !important;
    border-color: rgba(212, 175, 55, 0.25) !important;
    color: #F8FAFC !important;
}
[data-theme="liquid_quartz_glass"] .desktop-sidebar .brand-sidebar-title,
[data-theme="liquid_quartz_glass"] .desktop-sidebar #sidebar-user-name,
[data-theme="liquid_quartz_glass"] .desktop-topbar #desktop-topbar-title {
    color: #F8FAFC !important;
}
[data-theme="liquid_quartz_glass"] .desktop-nav-btn {
    color: #94A3B8 !important;
}
[data-theme="liquid_quartz_glass"] .desktop-nav-btn:hover,
[data-theme="liquid_quartz_glass"] .desktop-nav-btn.active {
    background: rgba(212, 175, 55, 0.18) !important;
    color: #D4AF37 !important;
    border-left-color: #D4AF37 !important;
}
[data-theme="liquid_quartz_glass"] .desktop-nav-btn.active .nav-badge {
    background: #D4AF37 !important;
    color: #000000 !important;
}

[data-theme="cyberpunk_hud"] .desktop-sidebar,
[data-theme="cyberpunk_hud"] .desktop-topbar {
    background: rgba(5, 8, 17, 0.95) !important;
    border-color: rgba(0, 240, 255, 0.35) !important;
    box-shadow: 0 0 25px rgba(0, 240, 255, 0.12) !important;
    color: #00F0FF !important;
}
[data-theme="cyberpunk_hud"] .desktop-sidebar .brand-sidebar-title,
[data-theme="cyberpunk_hud"] .desktop-sidebar #sidebar-user-name,
[data-theme="cyberpunk_hud"] .desktop-topbar #desktop-topbar-title {
    color: #00F0FF !important;
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.5) !important;
}
[data-theme="cyberpunk_hud"] .desktop-nav-btn {
    color: #64748B !important;
}
[data-theme="cyberpunk_hud"] .desktop-nav-btn:hover,
[data-theme="cyberpunk_hud"] .desktop-nav-btn.active {
    background: rgba(0, 240, 255, 0.15) !important;
    color: #00F0FF !important;
    border-left-color: #00F0FF !important;
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.5) !important;
}
[data-theme="cyberpunk_hud"] .desktop-nav-btn.active .nav-badge {
    background: #00F0FF !important;
    color: #050811 !important;
}

[data-theme="cophong_thuy_mac"] .desktop-sidebar,
[data-theme="cophong_thuy_mac"] .desktop-topbar {
    background: rgba(245, 239, 230, 0.92) !important;
    border-color: rgba(197, 157, 95, 0.4) !important;
}
[data-theme="cophong_thuy_mac"] .desktop-nav-btn:hover,
[data-theme="cophong_thuy_mac"] .desktop-nav-btn.active {
    background: rgba(148, 41, 35, 0.10) !important;
    color: #942923 !important;
    border-left-color: #942923 !important;
}
[data-theme="cophong_thuy_mac"] .desktop-nav-btn.active .nav-badge {
    background: #942923 !important;
    color: #FDFBF7 !important;
}

[data-theme="hien_dai_3d_pop"] .desktop-sidebar,
[data-theme="hien_dai_3d_pop"] .desktop-topbar {
    background: rgba(240, 253, 244, 0.95) !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
}
[data-theme="hien_dai_3d_pop"] .desktop-nav-btn.active {
    background: #10B981 !important;
    color: #FFFFFF !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
    border-left: none !important;
}
[data-theme="hien_dai_3d_pop"] .desktop-nav-btn.active .nav-badge {
    background: #047857 !important;
    color: #FFFFFF !important;
}

[data-theme="neo_brutalism_pop"] .desktop-sidebar,
[data-theme="neo_brutalism_pop"] .desktop-topbar {
    background: #FFFBEB !important;
    border-right: 3px solid #000000 !important;
    border-bottom: 3px solid #000000 !important;
}
[data-theme="neo_brutalism_pop"] .desktop-nav-btn {
    border: 2px solid transparent !important;
}
[data-theme="neo_brutalism_pop"] .desktop-nav-btn.active {
    background: #FEF08A !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
    box-shadow: 3px 3px 0px #000000 !important;
    border-left: 2px solid #000000 !important;
}
[data-theme="neo_brutalism_pop"] .desktop-nav-btn.active .nav-badge {
    background: #000000 !important;
    color: #FFFBEB !important;
}