/**
 * Shared CSS - Base styles, variables, and components used across all pages
 * This file imports all modular CSS components
 */

/* Google Fonts - DM Sans + JetBrains Mono */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=JetBrains+Mono:wght@500;600&display=swap');

/**
 * CSS Variables - Theme colors and design tokens
 * Updated design system with Phosphor icons and warmer palette
 */

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* CSS Variables */
:root {
    /* Primary - Indigo */
    --primary: #4F46E5;
    --primary-dark: #4338CA;
    --primary-light: rgba(79, 70, 229, 0.1);
    --primary-glow: rgba(79, 70, 229, 0.15);

    /* Secondary - Purple */
    --secondary: #8b5cf6;
    --secondary-dark: #7c3aed;

    /* Semantic colors */
    --success: #10B981;
    --success-light: rgba(16, 185, 129, 0.1);
    --danger: #EF4444;
    --danger-light: rgba(239, 68, 68, 0.1);
    --warning: #F59E0B;
    --warning-light: rgba(245, 158, 11, 0.1);

    /* Warmer stone grays */
    --gray-50: #FAFAF9;
    --gray-100: #F5F5F4;
    --gray-200: #E7E5E4;
    --gray-300: #D6D3D1;
    --gray-400: #A8A29E;
    --gray-500: #78716C;
    --gray-600: #57534E;
    --gray-700: #44403C;
    --gray-800: #292524;
    --gray-900: #1C1917;

    /* Theme colors */
    --bg-primary: #FAFAF9;
    --bg-secondary: #FFFFFF;
    --bg-card: #FFFFFF;
    --text-primary: #1C1917;
    --text-secondary: #78716C;
    --text-muted: #A8A29E;
    --border-color: #E7E5E4;
    --border-subtle: #F5F5F4;
    --shadow-color: rgba(28, 25, 23, 0.06);

    /* Accent colors */
    --accent-primary: #4F46E5;
    --accent-secondary: #4338CA;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.04);
    --shadow-md: 0 4px 12px rgba(28, 25, 23, 0.06);
    --shadow-lg: 0 8px 24px rgba(28, 25, 23, 0.08);
    --shadow-glow: 0 0 0 3px var(--primary-glow);

    /* Border radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    /* Typography - DM Sans + JetBrains Mono */
    --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Monaco, Consolas, monospace;
}

/* Dark Theme */
[data-theme="dark"] {
    --gray-50: #1C1917;
    --gray-100: #292524;
    --gray-200: #44403C;
    --gray-300: #57534E;
    --gray-400: #78716C;
    --gray-500: #A8A29E;
    --gray-600: #D6D3D1;
    --gray-700: #E7E5E4;
    --gray-800: #F5F5F4;
    --gray-900: #FAFAF9;

    --bg-primary: #0C0A09;
    --bg-secondary: #1C1917;
    --bg-card: #1C1917;
    --text-primary: #FAFAF9;
    --text-secondary: #A8A29E;
    --text-muted: #78716C;
    --border-color: #292524;
    --border-subtle: #1C1917;
    --shadow-color: rgba(0, 0, 0, 0.3);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Accent Colors */
[data-accent="indigo"] { --primary: #4F46E5; --primary-dark: #4338CA; --accent-primary: #4F46E5; --accent-secondary: #4338CA; --primary-light: rgba(79, 70, 229, 0.1); }
[data-accent="blue"] { --primary: #2563eb; --primary-dark: #1d4ed8; --accent-primary: #2563eb; --accent-secondary: #1d4ed8; --primary-light: rgba(37, 99, 235, 0.1); }
[data-accent="purple"] { --primary: #7c3aed; --primary-dark: #6d28d9; --accent-primary: #7c3aed; --accent-secondary: #6d28d9; --primary-light: rgba(124, 58, 237, 0.1); }
[data-accent="pink"] { --primary: #ec4899; --primary-dark: #db2777; --accent-primary: #ec4899; --accent-secondary: #db2777; --primary-light: rgba(236, 72, 153, 0.1); }
[data-accent="red"] { --primary: #ef4444; --primary-dark: #dc2626; --accent-primary: #ef4444; --accent-secondary: #dc2626; --primary-light: rgba(239, 68, 68, 0.1); }
[data-accent="orange"] { --primary: #f97316; --primary-dark: #ea580c; --accent-primary: #f97316; --accent-secondary: #ea580c; --primary-light: rgba(249, 115, 22, 0.1); }
[data-accent="amber"] { --primary: #f59e0b; --primary-dark: #d97706; --accent-primary: #f59e0b; --accent-secondary: #d97706; --primary-light: rgba(245, 158, 11, 0.1); }
[data-accent="yellow"] { --primary: #eab308; --primary-dark: #ca8a04; --accent-primary: #eab308; --accent-secondary: #ca8a04; --primary-light: rgba(234, 179, 8, 0.1); }
[data-accent="green"] { --primary: #10B981; --primary-dark: #059669; --accent-primary: #10B981; --accent-secondary: #059669; --primary-light: rgba(16, 185, 129, 0.1); }
[data-accent="teal"] { --primary: #14b8a6; --primary-dark: #0d9488; --accent-primary: #14b8a6; --accent-secondary: #0d9488; --primary-light: rgba(20, 184, 166, 0.1); }
[data-accent="cyan"] { --primary: #06b6d4; --primary-dark: #0891b2; --accent-primary: #06b6d4; --accent-secondary: #0891b2; --primary-light: rgba(6, 182, 212, 0.1); }
[data-accent="gray"] { --primary: #78716C; --primary-dark: #57534E; --accent-primary: #78716C; --accent-secondary: #57534E; --primary-light: rgba(120, 113, 108, 0.1); }

/**
 * Base Styles - Body, typography, and global resets
 */

/* Cross-document view transitions — Chrome 126+, Safari 18+.
   Pairs with the Speculation Rules prerender in prefetch.js: when the
   next page is already prerendered, the commit fades in instead of
   hard-cutting. No effect in unsupported browsers. */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 160ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dev Environment Banner */
.dev-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #000;
    text-align: center;
    padding: 4px 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    z-index: 10000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Base Body */
html {
    font-size: 14px;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    min-height: 100vh;
    padding-bottom: 80px; /* Space for mobile nav */
}

/* Adjust body padding when dev banner is present (desktop only) */
@media (min-width: 768px) {
    body:has(.dev-banner) {
        padding-top: 24px;
    }
}

@media (min-width: 768px) {
    body:has(.dev-banner) {
        padding-top: 88px; /* 24px banner + 64px header */
    }
}

@media (min-width: 768px) {
    body {
        padding-bottom: 0;
        padding-top: 64px; /* Space for desktop header */
    }
}

/* Prevent zoom on iOS inputs */
input, select, textarea {
    font-size: 16px !important;
}

/* Remove tap highlight */
button, .btn, .nav-item, .bill-card, a {
    -webkit-tap-highlight-color: transparent;
}

/* Prevent text selection on interactive elements */
.nav-item, .bill-card, .btn, .header, .mobile-nav {
    -webkit-user-select: none;
    user-select: none;
}

/* ============================================
   Mobile Web Styling
   ============================================ */

/* Safe Area Insets - for notches and home indicators */
.page-container {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
}

@media (min-width: 768px) {
    .page-container {
        padding-left: max(2rem, env(safe-area-inset-left));
        padding-right: max(2rem, env(safe-area-inset-right));
    }
}

/* Prevent horizontal overflow */
html, body {
    overflow-x: hidden;
    width: 100%;
}

body {
    -webkit-text-size-adjust: 100%;
}

/* Prevent long-press context menu on images */
img {
    -webkit-touch-callout: none;
}

/* Smooth scrolling for scrollable areas */
.scrollable,
.bills-list,
.savings-list,
.debts-list,
.main-content {
    -webkit-overflow-scrolling: touch;
}

/* ============================================
   Touch Targets - Minimum 44px
   ============================================ */

/* Buttons */
button, .btn {
    min-height: 44px;
    min-width: 44px;
}

/* Small buttons maintain minimum touch area */
.btn-sm {
    min-height: 36px;
}

/* Icon buttons */
.btn-icon {
    min-width: 44px;
    min-height: 44px;
}

/* List items / clickable cards */
.bill-card,
.savings-card,
.debt-card,
.dropdown-item,
.list-item {
    min-height: 44px;
}

/* Form controls */
.form-select,
.form-control {
    min-height: 44px;
}

/* ============================================
   Touch Feedback States
   ============================================ */

/* Active state for tappable elements */
button:active,
.btn:active,
.bill-card:active,
.savings-card:active,
.debt-card:active,
.nav-item:active,
.nav-link:active,
.dropdown-item:active {
    opacity: 0.7;
    transform: scale(0.98);
    transition: transform 0.1s ease, opacity 0.1s ease;
}

/* View toggle buttons */
.view-toggle-btn:active {
    transform: scale(0.95);
}

/* Prevent transform on disabled elements */
button:disabled:active,
.btn:disabled:active {
    transform: none;
    opacity: 0.5;
}

/* App-only elements are not rendered on the web (this app is web-only;
   the .app-only class is retained for native parity but always hidden here). */
.app-only {
    display: none !important;
}

/* ============================================
   GPU Acceleration for Smooth Animations
   ============================================ */

.bill-card,
.savings-card,
.debt-card,
.modal-backdrop,
.user-dropdown {
    will-change: transform, opacity;
}

/**
 * Layout - Page containers and responsive visibility
 */

.page-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem;
}

@media (min-width: 768px) {
    .page-container {
        padding: 2rem;
    }
}

.main-content {
    margin-bottom: 2rem;
}

/* Page Header - Wrapped title section (desktop only card style) */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 0.75rem); /* iOS: CCRadius.lg = 12pt */
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    /* Break out of page-container max-width — desktop only */
    width: calc(100vw - 4rem);
    margin-left: calc(50% - 50vw + 2rem);
    margin-right: calc(50% - 50vw + 2rem);
}

.page-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.page-header .page-subtitle {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.page-header-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.page-header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Mobile Page Header */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 0.75rem);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.section-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

/* Dashboard-specific header controls */
.dashboard-header-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.grouping-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.grouping-selector label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.grouping-selector .form-select {
    min-width: 150px;
}

/* Mobile header controls */
.mobile-header-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .page-header {
        padding: 1.5rem 2rem;
        margin-bottom: 2rem;
    }

    .page-header h2 {
        font-size: 1.75rem;
    }
}

/* Section Header Right - groups action buttons with profile/notif icons */
.section-header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Desktop/Mobile visibility */
.desktop-only { display: none !important; }
.mobile-only { display: block; }

@media (min-width: 768px) {
    .desktop-only { display: block !important; }
    .desktop-only.page-header { display: flex !important; }
    .mobile-only { display: none !important; }
}

/**
 * Header - Desktop header and user menu
 */

.app-header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: block;
    /* Safe area for notches */
    padding-top: env(safe-area-inset-top);
}

/* Mobile: hide entire header - nav is at bottom, account in More */
@media (max-width: 767px) {
    #app-header {
        display: none;
    }

    .app-header {
        display: none;
    }
}

/* Adjust header position when dev banner is present */
.dev-banner + .app-header {
    top: 24px;
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-brand .logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--text-primary);
}

.logo-icon {
    width: 36px;
    height: 36px;
    background: var(--primary);
    color: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
}

.logo-img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: contain;
}

.logo-text {
    font-weight: 700;
    font-size: 1.25rem;
}

.desktop-nav {
    display: flex;
    gap: 0.5rem;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.2s;
}

.nav-link:hover {
    background: var(--gray-100);
    color: var(--text-primary);
}

.nav-link.active {
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 600;
}

.nav-link .nav-icon {
    width: 20px;
    height: 20px;
    font-size: 1.25rem;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.notification-btn {
    position: relative;
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    border-radius: 0.5rem;
    transition: all 0.2s;
}

.notification-btn:hover {
    background: var(--gray-100);
    color: var(--text-primary);
}

.notification-btn svg {
    width: 24px;
    height: 24px;
}

.notification-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--danger);
    color: white;
    font-size: 0.625rem;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* User Menu Dropdown */
.user-menu {
    position: relative;
}

.user-menu-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    border-radius: 0.5rem;
    transition: all 0.2s;
}

.user-menu-btn:hover {
    background: var(--gray-100);
}

.user-avatar {
    width: 32px;
    height: 32px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
}

.user-name {
    font-weight: 500;
    color: var(--text-primary);
}

.dropdown-arrow {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    transition: transform 0.2s;
}

.user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s;
}

.user-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    text-decoration: none;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s;
}

.dropdown-item:hover {
    background: var(--gray-100);
}

.dropdown-item svg {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
}

.dropdown-item.danger {
    color: var(--danger);
}

.dropdown-item.danger svg {
    color: var(--danger);
}

.dropdown-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 0.5rem 0;
}

/* Locale info in dropdown */
.dropdown-locale-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--gray-50);
    font-size: 0.8125rem;
}

[data-theme="dark"] .dropdown-locale-info {
    background: var(--gray-100);
}

.locale-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.locale-flag {
    font-size: 1rem;
}

.locale-value {
    color: var(--text-primary);
    font-weight: 500;
}

.locale-divider {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

/**
 * Top Nav Bar — page title + circular action button
 * Used across all pages for a consistent header pattern (Dashboard, Bills,
 * Savings, Debts, Reports, More). Mirrors the iOS/Android top-bar pattern:
 * centred title, one circular action on the right.
 */

.mobile-top-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1.5rem 2rem; /* desktop: generous breathing room */
  margin-bottom: 0.5rem;
}

.mobile-top-nav-title {
  grid-column: 2;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
}

/* Circular action button — visible border + shadow so it reads clearly
   against the page background. Matches .month-nav-btn style. */
.mobile-top-nav-btn {
  grid-column: 3;
  justify-self: end;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: var(--bg-card);
  color: var(--primary);
  box-shadow: 0 1px 3px rgba(28, 25, 23, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.15s;
}

.mobile-top-nav-btn:hover {
  background: var(--gray-100);
}

.mobile-top-nav-btn:active {
  transform: scale(0.92);
  background: var(--primary-light);
}

/* Month input used on the Reports page — fits in the same grid-column: 3
   slot as the circular "+" button on other pages. */
.mobile-top-nav-input {
  grid-column: 3;
  justify-self: end;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 0.875rem;
  font-family: inherit;
  box-shadow: 0 1px 3px rgba(28, 25, 23, 0.1);
}

/* Mobile: sticky iOS-style with backdrop blur, smaller button, tighter padding */
@media (max-width: 767px) {
  .mobile-top-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(250, 250, 249, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(231, 229, 228, 0.5);
    padding: 0.75rem 1rem;
    padding-top: max(0.75rem, env(safe-area-inset-top));
    margin-bottom: 0;
  }

  [data-theme="dark"] .mobile-top-nav {
    background: rgba(28, 25, 23, 0.88);
    border-bottom-color: rgba(68, 64, 60, 0.5);
  }

  .mobile-top-nav-title {
    font-size: 1rem;
  }

  .mobile-top-nav-btn {
    width: 32px;
    height: 32px;
  }

  .mobile-top-nav-input {
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
  }
}

/* Desktop/tablet: turn .mobile-top-nav into the same white card used by
   Dashboard's .page-header. Title hugs the left, action sits on the right,
   so every page gets the "[ Title .......... button ]" bar at the top.
   margin-top matches Dashboard's gap: .mobile-top-nav is a sibling of
   .page-container, so it doesn't inherit the page-container's padding-top
   (2rem) that .page-header benefits from on Dashboard. */
@media (min-width: 768px) {
  .mobile-top-nav {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 0.75rem);
    padding: 1.25rem 1.5rem;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    /* Full-bleed match of .page-header width on desktop */
    width: calc(100vw - 4rem);
    margin-left: calc(50% - 50vw + 2rem);
    margin-right: calc(50% - 50vw + 2rem);
  }

  .mobile-top-nav-title {
    grid-column: 1;
    justify-self: start;
    font-weight: 700;
  }
}

/**
 * Mobile Navigation - Bottom navigation bar for mobile
 */

.mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-card);
    display: flex;
    justify-content: space-around;
    padding: 0.5rem 0;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    box-shadow: 0 -1px 3px var(--shadow-color);
    z-index: 50;
}

@media (display-mode: standalone) {
    .mobile-nav {
        padding-bottom: max(1.25rem, calc(env(safe-area-inset-bottom) + 0.75rem));
    }
}

@media (min-width: 768px) {
    .mobile-nav {
        display: none;
    }
}

.mobile-nav .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--gray-500);
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 0.75rem;
    margin: 0.25rem;
}

.mobile-nav .nav-item.active {
    color: var(--primary);
    background: var(--primary-light);
}

.mobile-nav .nav-item .nav-icon {
    width: 24px;
    height: 24px;
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.mobile-nav .nav-item span {
    font-size: 0.75rem;
}

/* Central Add Button */
.mobile-nav .nav-add-btn {
    flex: 0 0 auto;
    padding: 0;
    margin: 0 0.25rem;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}

.mobile-nav .nav-add-btn:active .nav-add-icon {
    transform: scale(0.93);
}

.nav-add-icon {
    width: 44px;
    height: 44px;
    background: var(--primary);
    color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    transition: transform 0.15s ease;
}

/**
 * Buttons - All button styles
 * Softer, more refined design system
 */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    min-height: 44px; /* Touch-friendly minimum */
    border: none;
    border-radius: var(--radius-md, 0.5rem);
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    line-height: 1.5;
    -webkit-tap-highlight-color: transparent;
}

/* Touch feedback for all buttons */
.btn:active:not(:disabled) {
    transform: scale(0.98);
    opacity: 0.9;
}

.btn i {
    font-size: 1rem;
}

/* Primary Button */
.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-primary:active {
    background: var(--primary-dark);
}

/* Secondary Button */
.btn-secondary {
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background: var(--gray-50);
    color: var(--text-primary);
    border-color: var(--gray-300);
}

.btn-secondary:active {
    background: var(--gray-100);
}

/* Success Button - Softer green */
.btn-success {
    background: #059669;
    color: white;
}

.btn-success:hover {
    background: #047857;
}

.btn-success:active {
    background: #10B981;
}

/* Danger Button - Softer red */
.btn-danger {
    background: transparent;
    color: #B91C1C;
    border: 1px solid #FECACA;
}

.btn-danger:hover {
    background: #FEF2F2;
    border-color: #FCA5A5;
}

.btn-danger:active {
    background: #FEE2E2;
}

/* Warning Button - Softer amber */
.btn-warning {
    background: #D97706;
    color: white;
}

.btn-warning:hover {
    background: #B45309;
}

/* Modal footer semantic aliases */
.btn-save {
    background: var(--primary);
    color: white;
}

.btn-save:hover {
    background: var(--primary-dark);
}

.btn-cancel {
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.btn-cancel:hover {
    background: var(--gray-50);
    color: var(--text-primary);
}

/* Ghost/Text Button */
.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    padding: 0.5rem 0.75rem;
}

.btn-ghost:hover {
    background: var(--gray-100);
    color: var(--text-primary);
}

/* Link Button - text only */
.btn-link {
    background: transparent;
    color: var(--text-secondary);
    padding: 0.5rem 0.75rem;
    text-decoration: underline;
    text-underline-offset: 2px;
}

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

/* Outline Variants - Subtle borders */
.btn-outline-primary {
    background: transparent;
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
}

.btn-outline-primary:hover {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

.btn-outline-danger {
    background: transparent;
    color: #B91C1C;
    border: 1px solid #FECACA;
}

.btn-outline-danger:hover {
    background: #FEF2F2;
    border-color: #FCA5A5;
}

/* Size Variants */
.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    border-radius: var(--radius-sm, 0.375rem);
}

.btn-sm i {
    font-size: 1rem;
}

.btn-lg {
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
}

.btn-lg i {
    font-size: 1.25rem;
}

/* Icon-only Button */
.btn-icon {
    padding: 0.625rem;
    min-width: 44px;
    min-height: 44px;
}

.btn-icon.btn-sm {
    padding: 0.375rem;
    min-width: 36px;
    min-height: 36px;
}

/* Full Width */
.btn-block {
    width: 100%;
}

/* Disabled State */
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Button Group */
.btn-group {
    display: flex;
    gap: 0.5rem;
}

.btn-group-sm {
    gap: 0.375rem;
}

/* Modal Footer Buttons */
.modal-footer .btn {
    min-width: 100px;
}

.modal-footer-right {
    display: flex;
    gap: 0.75rem;
    margin-left: auto;
}

/* ============================================
   Mobile Compact Styles
   ============================================ */
@media (max-width: 767px) {
    .btn {
        padding: 0.4375rem 0.875rem;
        min-height: 40px;
        font-size: 0.8125rem;
        border-radius: 0.375rem;
    }

    .btn i {
        font-size: 0.9375rem;
    }

    .btn-sm {
        padding: 0.3125rem 0.625rem;
        min-height: 32px;
        font-size: 0.75rem;
    }

    .btn-icon {
        padding: 0.5rem;
        min-width: 40px;
        min-height: 40px;
    }

    .btn-icon.btn-sm {
        min-width: 32px;
        min-height: 32px;
    }

    .btn-group {
        gap: 0.375rem;
    }

    .modal-footer .btn {
        min-width: 80px;
    }

    .modal-footer-right {
        gap: 0.5rem;
    }
}

/**
 * Cards - Generic card components
 */

.card {
    background: var(--bg-card);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px var(--shadow-color);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.card-title {
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--text-primary);
}

/**
 * Forms - Form inputs, labels, and type toggles
 */

.form-group {
    margin-bottom: 0.75rem;
}

.form-label {
    display: block;
    margin-bottom: 0.375rem;
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--text-primary);
}

.form-input,
.form-select {
    width: 100%;
    padding: 0.5rem 0.625rem;
    min-height: 38px;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    background: var(--bg-card);
    color: var(--text-primary);
    transition: border-color 0.2s;
    /* Font size 16px prevents iOS zoom on focus */
    font-size: 16px;
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

/* Type Toggle Buttons (Personal/Shared) */
.type-toggle {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.type-toggle-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding: 0.4rem 0.5rem;
    min-height: 36px;
    border: 1.5px solid var(--border-color);
    border-radius: 0.375rem;
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.8125rem;
}

.type-toggle-btn:active {
    transform: scale(0.98);
    opacity: 0.8;
}

.type-toggle-btn:hover {
    border-color: var(--gray-400);
    background: var(--gray-50);
}

.type-toggle-btn.active {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary);
}

.type-toggle-btn .type-icon {
    font-size: 1rem;
}

.type-toggle-btn .type-label {
    font-weight: 500;
    font-size: 0.75rem;
}

.type-toggle-btn .type-desc {
    font-size: 0.625rem;
    color: var(--text-secondary);
}

.type-toggle-btn.active .type-desc {
    color: var(--primary);
    opacity: 0.75;
}

/* Hidden select for form submission */
.type-toggle + select {
    display: none;
}

/* Split toggle (3 buttons) - slightly smaller */
.split-toggle .type-toggle-btn {
    padding: 0.375rem 0.375rem;
}

.split-toggle .type-toggle-btn .type-icon {
    font-size: 0.9375rem;
}

.split-toggle .type-toggle-btn .type-label {
    font-size: 0.6875rem;
}

.split-toggle .type-toggle-btn .type-desc {
    font-size: 0.5625rem;
}

/* Compact toggle variant — equal-width buttons, horizontal scroll if needed */
.type-toggle.toggle-compact {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.type-toggle.toggle-compact::-webkit-scrollbar {
    display: none;
}

.type-toggle.toggle-compact .type-toggle-btn {
    flex: unset;
    padding: 0.375rem 0.625rem;
    white-space: nowrap;
}

/* Allow wrapping with equal-width buttons (e.g. full-width category row) */
.type-toggle.toggle-compact.toggle-wrap {
    grid-auto-flow: row;
    grid-auto-columns: unset;
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    overflow-x: visible;
}

.type-toggle.toggle-compact.toggle-wrap .type-toggle-btn {
    flex: unset;
    width: 100%;
}

/* Form Sections - grouped card layout */
.form-section {
    margin-bottom: 0.875rem;
}

.form-section-title {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.375rem;
    padding-left: 0.125rem;
}

.form-section-card {
    background: var(--gray-50);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 0.75rem;
}

.form-section-card .form-group:last-child {
    margin-bottom: 0;
}

/* Icon compact row */
.icon-compact-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.icon-thumbnail {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--gray-100);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 1rem;
}

.icon-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.icon-actions {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

/* Collapsible section */
.form-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.form-section-toggle .toggle-chevron {
    font-size: 0.75rem;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.form-section-toggle.collapsed .toggle-chevron {
    transform: rotate(-90deg);
}

.form-section-collapsible {
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease;
    max-height: 500px;
    opacity: 1;
}

.form-section-collapsible.collapsed {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
}

/* ============================================
   Mobile Compact Styles
   ============================================ */
@media (max-width: 767px) {
    .form-group {
        margin-bottom: 0.625rem;
    }

    .form-label {
        margin-bottom: 0.25rem;
        font-size: 0.75rem;
    }

    .form-input,
    .form-select {
        padding: 0.4375rem 0.5rem;
        min-height: 36px;
        border-radius: 0.375rem;
    }

    .type-toggle {
        gap: 0.25rem;
    }

    .type-toggle-btn {
        padding: 0.3rem 0.4rem;
        min-height: 32px;
        gap: 0.0625rem;
        border-radius: 0.375rem;
        font-size: 0.75rem;
    }

    .type-toggle-btn .type-icon {
        font-size: 0.875rem;
    }

    .type-toggle-btn .type-label {
        font-size: 0.6875rem;
    }

    .type-toggle-btn .type-desc {
        font-size: 0.5625rem;
    }

    .split-toggle .type-toggle-btn {
        padding: 0.25rem 0.3rem;
    }

    .split-toggle .type-toggle-btn .type-icon {
        font-size: 0.8125rem;
    }

    .split-toggle .type-toggle-btn .type-label {
        font-size: 0.625rem;
    }

    .form-section {
        margin-bottom: 0.75rem;
    }

    .form-section-card {
        padding: 0.625rem;
    }
}

/**
 * Modals - Modal dialogs and backdrops
 */

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    /* Safe area padding for modals */
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}

.modal-backdrop.active {
    display: flex;
}

/* Animate in via class added after display:flex is set */
.modal-backdrop.animate-in {
    animation: backdropFadeIn 0.3s ease forwards;
}

@keyframes backdropFadeIn {
    from { background: rgba(0, 0, 0, 0); }
    to { background: rgba(0, 0, 0, 0.5); }
}

/* Desktop: scale + fade from center */
.modal-content {
    background: var(--bg-card);
    border-radius: 0.75rem;
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalScaleIn 0.3s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
}

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

.modal-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title {
    font-size: 1.125rem;
    font-weight: 600;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    line-height: 1;
    /* Ensure minimum touch target */
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}

.modal-close:hover {
    background: var(--gray-100);
}

.modal-close:active {
    transform: scale(0.95);
}

.modal-body {
    padding: 1rem 1.25rem;
}

.modal-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.modal-footer-right {
    display: flex;
    gap: 0.75rem;
}

/**
 * Notifications - Toast notifications and notification panel
 */

/* Toast Container */
#notificationContainer {
    position: fixed;
    top: env(safe-area-inset-top, 0px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 420px;
    padding: 0.5rem 1rem;
    pointer-events: none;
}

@media (min-width: 768px) {
    #notificationContainer {
        top: 80px;
    }
}

/* Toast Notifications */
.notification {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg-card);
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-120%);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    width: 100%;
    border: 1px solid var(--border-color);
    opacity: 0;
    pointer-events: auto;
}

.notification.show {
    transform: translateY(0);
    opacity: 1;
}

.notification-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-icon svg {
    width: 20px;
    height: 20px;
}

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-message {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
}

.notification-close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: background 0.15s, color 0.15s;
    margin-left: 0.25rem;
}

.notification-close:hover {
    background: var(--gray-100);
    color: var(--text-primary);
}

.notification-close svg {
    width: 16px;
    height: 16px;
}

/* Success notification */
.notification.success {
    background: #f0fdf4;
    border-color: #86efac;
}

.notification.success .notification-icon {
    background: #dcfce7;
    color: var(--success);
}

/* Error notification */
.notification.error {
    background: #fef2f2;
    border-color: #fca5a5;
}

.notification.error .notification-icon {
    background: #fee2e2;
    color: var(--danger);
}

/* Warning notification */
.notification.warning {
    background: #fffbeb;
    border-color: #fcd34d;
}

.notification.warning .notification-icon {
    background: #fef3c7;
    color: var(--warning);
}

/* Info notification */
.notification.info {
    background: #eff6ff;
    border-color: #93c5fd;
}

.notification.info .notification-icon {
    background: #dbeafe;
    color: var(--primary);
}

/* Dark mode adjustments for toast */
[data-theme="dark"] .notification {
    background: var(--gray-800);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .notification.success {
    background: #052e16;
    border-color: #166534;
}

[data-theme="dark"] .notification.error {
    background: #450a0a;
    border-color: #991b1b;
}

[data-theme="dark"] .notification.warning {
    background: #451a03;
    border-color: #92400e;
}

[data-theme="dark"] .notification.info {
    background: #1e3a5f;
    border-color: #1d4ed8;
}

[data-theme="dark"] .notification-close:hover {
    background: var(--gray-700);
}

/* Notification Panel (Popout) */
.notification-panel {
    position: fixed;
    top: 64px;
    right: 1rem;
    width: 360px;
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 80px);
    background: var(--bg-card);
    border-radius: 0.75rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.notification-panel.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.notification-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--border);
}

.notification-panel-header h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.notification-panel-header .unread-count {
    background: var(--danger);
    color: white;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
}

.notification-panel-actions {
    display: flex;
    gap: 0.5rem;
}

.panel-action-btn {
    background: none;
    border: none;
    font-size: 0.75rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    transition: background 0.15s, color 0.15s;
}

.panel-action-btn:hover {
    background: var(--gray-100);
    color: var(--text-primary);
}

.panel-action-btn.danger:hover {
    background: var(--danger-bg, rgba(239, 68, 68, 0.1));
    color: var(--danger);
}

.notification-panel-list {
    overflow-y: auto;
    max-height: 400px;
    flex: 1;
}

.notification-panel-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}

.notification-panel-empty svg {
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.notification-panel-empty p {
    margin: 0;
    font-size: 0.875rem;
}

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-item:hover {
    background: var(--gray-50);
}

.notification-item.unread {
    background: var(--primary-bg, rgba(37, 99, 235, 0.05));
}

.notification-item.unread:hover {
    background: var(--primary-bg-hover, rgba(37, 99, 235, 0.08));
}

.notification-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--gray-100);
}

.notification-item-icon svg {
    width: 16px;
    height: 16px;
}

.notification-item-icon.success {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success);
}

.notification-item-icon.error {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger);
}

.notification-item-icon.warning {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

.notification-item-icon.info {
    background: rgba(37, 99, 235, 0.15);
    color: var(--primary);
}

.notification-item-content {
    flex: 1;
    min-width: 0;
}

.notification-item-message {
    margin: 0 0 0.25rem 0;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--text-primary);
}

.notification-item-time {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.notification-item-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
    margin-top: 0.5rem;
}

/* Dark mode adjustments for notification panel */
[data-theme="dark"] .notification-panel {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .notification-item.unread {
    background: rgba(37, 99, 235, 0.1);
}

[data-theme="dark"] .notification-item:hover {
    background: var(--gray-800);
}

/* Clickable notification with action */
.notification-item.has-action {
    cursor: pointer;
}

.notification-item-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-secondary);
    opacity: 0.5;
    transition: opacity 0.2s;
}

.notification-item-arrow svg {
    width: 16px;
    height: 16px;
}

.notification-item.has-action:hover .notification-item-arrow {
    opacity: 1;
    color: var(--primary);
}

[data-theme="dark"] .panel-action-btn:hover {
    background: var(--gray-700);
}

/* Mobile adjustments */
@media (max-width: 767px) {
    .notification-panel {
        right: 0.5rem;
        left: 0.5rem;
        width: auto;
        max-width: none;
    }
}

/**
 * Loading States - Spinners and skeleton loaders
 */

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--gray-200);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary, rgba(255,255,255,0.1)) 50%, var(--bg-secondary) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 0.5rem;
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-card {
    background: var(--bg-card);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--border-color);
}

.skeleton-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.skeleton-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.skeleton-title {
    height: 1rem;
    width: 60%;
}

.skeleton-subtitle {
    height: 0.75rem;
    width: 40%;
}

.skeleton-amount {
    height: 1.25rem;
    width: 80px;
    margin-left: auto;
}

.skeleton-summary-card {
    background: var(--bg-card);
    border-radius: 0.75rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid var(--border-color);
}

.skeleton-summary-icon {
    width: 48px;
    height: 48px;
    border-radius: 0.5rem;
}

.skeleton-summary-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.skeleton-summary-label {
    height: 0.75rem;
    width: 70%;
}

.skeleton-summary-value {
    height: 1.5rem;
    width: 50%;
}

/**
 * Bill Cards - Bill list items and related styles
 * Updated for inline/compact layout with Phosphor icons
 */

/* Bills List Container */
.bills-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Bill Card — iOS: BillCardView.swift
   HStack(spacing: CCSpacing.md = 12pt)
   padding(.horizontal, CCSpacing.lg = 16pt), padding(.vertical, CCSpacing.md = 12pt)
   CCRadius.lg = 12pt, ccShadowSm, 0.5px ccBorder.opacity(0.5)
*/
.bill-card {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem; /* iOS: CCSpacing.md = 12pt */
    padding: 0.75rem 1rem; /* iOS: vertical 12pt, horizontal 16pt */
    background: var(--bg-secondary, var(--bg-card)); /* iOS: Color.ccCard */
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 0.75rem); /* iOS: CCRadius.lg = 12pt */
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    position: relative;
    overflow: hidden;
}

.bill-card:hover {
    background: var(--bg-card);
    border-color: var(--gray-300);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.04));
}

.bill-card:active {
    transform: scale(0.995);
}

/* iOS: Paid state — green gradient bg, green border */
.bill-card.paid {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.06) 0%, rgba(16, 185, 129, 0.02) 100%); /* iOS: ccSuccess.opacity(0.06) → 0.02 */
    border-color: rgba(16, 185, 129, 0.25); /* iOS: ccSuccess.opacity(0.25) */
}

.bill-card.paid .bill-name {
    color: var(--text-secondary);
}

.bill-card.paid .bill-amount-value {
    color: var(--success);
}

/* Remove the old checkmark pseudo-element - using checkbox instead */
.bill-card.paid::before {
    display: none;
}

[data-theme="dark"] .bill-card.paid {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0.04) 100%);
    border-color: rgba(16, 185, 129, 0.35);
}

/* iOS: Checkbox — 24x24 rounded rect, CCRadius.sm = 6pt, 2px ccGray300 border */
/* iOS: frame(width: 24, height: 24) inside 44x44 tap target */
.bill-checkbox {
    width: 24px; /* iOS: frame(width: 24) */
    height: 24px; /* iOS: frame(height: 24) */
    border-radius: 0.375rem; /* iOS: CCRadius.sm = 6pt */
    border: 2px solid var(--gray-300); /* iOS: ccGray300, lineWidth: 2 */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
    color: transparent;
}

.bill-card.paid .bill-checkbox {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

.bill-checkbox i {
    font-size: 0.875rem;
    font-weight: bold;
}

/* Bill icon */
.bill-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm, 0.375rem);
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bill-icon i {
    font-size: 1rem;
    color: var(--gray-500);
}

/* Bill logo (when available) */
.bill-logo {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm, 0.375rem);
    object-fit: contain;
    flex-shrink: 0;
}

/* iOS: BillIconView(size: 40, cornerRadius: 20) — 40x40 circle */
.bill-icon-circle {
    width: 40px; /* iOS: size: 40 */
    height: 40px; /* iOS: size: 40 */
    border-radius: 50%; /* iOS: cornerRadius: 20 = circle */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bill-icon-circle i {
    font-size: 1.125rem;
}

.bill-icon-circle .bill-logo {
    width: 24px;
    height: 24px;
    border-radius: 0;
}

/* Bill content - stacked name + category */
.bill-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

/* iOS: .ccBody = 14pt, .fontWeight(.semibold) */
.bill-name {
    font-weight: 600; /* iOS: semibold */
    font-size: 0.875rem; /* iOS: ccBody = 14pt */
    color: var(--text-primary); /* iOS: ccTextPrimary */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* iOS: .ccCaption = 12pt, ccTextMuted */
.bill-category-label {
    font-size: 0.75rem; /* iOS: ccCaption = 12pt */
    color: var(--text-secondary); /* iOS: ccTextMuted */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bill-card.paid .bill-name {
    color: var(--text-secondary);
}

/* Bill metadata - inline */
.bill-metadata {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.8125rem;
    color: var(--text-muted, var(--text-secondary));
}

.bill-meta-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.bill-meta-item i {
    font-size: 0.875rem;
}

/* Bill amount - right aligned */
.bill-amount {
    text-align: right;
    flex-shrink: 0;
    min-width: 80px;
}

/* iOS: .mono(14, weight: .medium) — on mobile; desktop keeps 1rem/600 */
.bill-amount-value {
    font-family: var(--font-mono); /* iOS: JetBrains Mono */
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary); /* iOS: ccTextPrimary */
}

.bill-card.paid .bill-amount-value {
    color: var(--success);
}

.bill-amount-share {
    font-size: 0.6875rem;
    color: var(--text-muted, var(--text-secondary));
}

/* ============================================
   Split Bar — Household View
   ============================================ */
.bill-split-bar {
    width: 100%;
    padding-top: 0.5rem;
    margin-top: 0.25rem;
}

.split-bar-track {
    display: flex;
    height: 4px;
    border-radius: 2px;
    overflow: hidden;
    background: var(--gray-200);
}

.split-bar-user {
    height: 100%;
    background: var(--accent-primary, #6366f1);
    border-radius: 2px 0 0 2px;
    min-width: 2px;
}

.split-bar-partner {
    height: 100%;
    background: var(--secondary, #ec4899);
    border-radius: 0 2px 2px 0;
    min-width: 2px;
}

.split-bar-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.25rem;
    font-size: 0.6875rem;
    color: var(--text-secondary);
}

.split-label-user {
    color: var(--accent-primary, #6366f1);
    font-weight: 500;
}

.split-label-partner {
    color: var(--secondary, #ec4899);
    font-weight: 500;
}

/* Dark mode */
[data-theme="dark"] .split-bar-track {
    background: var(--gray-700);
}

/* ============================================
   View Mode Toggle — iOS: ViewModeToggle.swift
   Picker(.segmented) — system segmented control
   Gray bg pill, white active segment with shadow
   ============================================ */
.view-mode-toggle {
    display: inline-flex;
    background: var(--gray-100); /* iOS: system segmented gray bg */
    border-radius: 0.5rem; /* iOS: CCRadius.md = 8pt */
    padding: 2px;
    gap: 0;
}

.view-mode-btn {
    padding: 0.375rem 0.75rem;
    border: none;
    border-radius: 0.375rem; /* iOS: CCRadius.sm = 6pt inner segment */
    background: transparent;
    font-size: 0.8125rem; /* iOS: ~13pt system segmented */
    font-weight: 500; /* iOS: medium */
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.view-mode-btn.active {
    background: var(--bg-card); /* iOS: white active segment */
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); /* iOS: system shadow */
}

[data-theme="dark"] .view-mode-toggle {
    background: #292524;
}

[data-theme="dark"] .view-mode-btn.active {
    background: #44403C;
    color: #FAFAF9;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Responsive bill cards */
@media (max-width: 767px) {
    .bill-metadata {
        display: none;
    }

    .bill-content {
        gap: 0.5rem;
    }

    .bill-name {
        min-width: 80px;
    }
}

/* Override amount difference indicator */
.amount-diff {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
}

.amount-diff.amount-increase {
    color: var(--danger);
    background: rgba(239, 68, 68, 0.1);
}

.amount-diff.amount-decrease {
    color: var(--success);
    background: rgba(34, 197, 94, 0.1);
}

/* Bill with override styling */
.bill-card.has-override {
    border-left: 3px solid var(--warning, #f59e0b);
}

/* Edited badge */
.type-badge.edited {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning, #f59e0b);
}

/* Skipped badge */
.type-badge.skipped {
    background: rgba(107, 114, 128, 0.15);
    color: var(--gray-500, #6b7280);
}

/* Skipped bill card styling */
.bill-card.skipped {
    opacity: 0.6;
    background: var(--gray-50, #f9fafb);
    border-style: dashed;
}

.bill-card.skipped .bill-name {
    color: var(--text-secondary);
}

.bill-card.skipped .bill-amount {
    color: var(--text-secondary);
}

[data-theme="dark"] .bill-card.skipped {
    background: var(--bg-secondary);
}

.bill-badges {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.type-badge {
    font-size: 0.625rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-weight: 500;
    text-transform: uppercase;
}

.type-badge.partner {
    background: var(--secondary);
    color: white;
}

.type-badge.oneoff {
    background: var(--warning);
    color: white;
}

/* Bill Actions - Overlay on card */
.bill-actions-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: rgba(0, 0, 0, 0.7);
    border-radius: inherit;
    z-index: 10;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.bill-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    background: transparent;
    color: white;
}

.bill-action-btn i {
    font-size: 1.25rem;
}

.bill-action-btn:active {
    transform: scale(0.9);
    background: rgba(255, 255, 255, 0.15);
}

.bill-action-btn.btn-success {
    color: #6ee7b7;
}

.bill-action-btn.btn-secondary {
    color: #d1d5db;
}

.bill-action-btn.btn-primary {
    color: #a5b4fc;
}

.bill-action-btn.btn-danger {
    color: #fca5a5;
}

/* Dark theme */
[data-theme="dark"] .bill-action-btn {
    background: var(--bg-secondary);
}

[data-theme="dark"] .bill-action-btn.btn-success {
    background: rgba(16, 185, 129, 0.1);
}

[data-theme="dark"] .bill-action-btn.btn-danger {
    background: rgba(239, 68, 68, 0.1);
}

[data-theme="dark"] .bill-action-btn.btn-primary {
    background: rgba(99, 102, 241, 0.1);
}

/* ============================================
   Filter Bar - Shared across pages
   ============================================ */

.filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 0.5rem);
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    gap: 1rem;
}

.filter-bar-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-bar-left label {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.filter-bar-left .form-select {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    min-width: 130px;
}

.filter-bar-right {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Mobile filter bar */
@media (max-width: 767px) {
    .filter-bar {
        padding: 0.5rem 0.75rem;
    }

    .filter-bar-left label {
        display: none;
    }

    .filter-bar-left .form-select {
        min-width: 110px;
    }
}

/* ============================================
   Grouping Styles - Shared across pages
   ============================================ */

/* Generic group container */
.bill-group,
.savings-group,
.debt-group {
    margin-bottom: 1.5rem;
    width: 100%;
}

/* Group headers */
.bill-group-header,
.savings-group-header,
.debt-group-header {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

/* Group items container */
.bill-group-items,
.savings-group-items,
.debt-group-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Grouped list container */
.bills-list.is-grouped,
.savings-list.is-grouped,
.debts-list.is-grouped {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ============================================
   View Toggle Buttons
   ============================================ */

.view-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 0.375rem);
    background: var(--bg-card);
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.15s ease;
}

.view-toggle-btn:hover {
    background: var(--gray-100);
    color: var(--text-primary);
}

.view-toggle-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

[data-theme="dark"] .view-toggle-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.view-toggle-btn i {
    font-size: 1rem;
}

/* ============================================
   View Modes - Shared across pages
   ============================================ */

/* List View (default) - full width single column */
.bills-list.view-list,
.savings-list.view-list,
.debts-list.view-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Grid View - 2 columns side by side */
.bills-list.view-grid,
.savings-list.view-grid,
.debts-list.view-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

/* Tile View - 4 columns that fill the width */
.bills-list.view-tile,
.savings-list.view-tile,
.debts-list.view-tile {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

/* Grouped view modes */
.bills-list.view-grid.is-grouped,
.savings-list.view-grid.is-grouped,
.debts-list.view-grid.is-grouped {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.bills-list.view-grid.is-grouped .bill-group-items,
.savings-list.view-grid.is-grouped .savings-group-items,
.debts-list.view-grid.is-grouped .debt-group-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

/* Grouped tile view - groups flow horizontally */
.bills-list.view-tile.is-grouped,
.savings-list.view-tile.is-grouped,
.debts-list.view-tile.is-grouped {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-start;
}

/* Multi-item groups (2+) get their own row */
.bills-list.view-tile.is-grouped .bill-group,
.savings-list.view-tile.is-grouped .savings-group,
.debts-list.view-tile.is-grouped .debt-group {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    margin-bottom: 0;
}

/* Single-item groups can share rows */
.bills-list.view-tile.is-grouped .bill-group[data-item-count="1"],
.savings-list.view-tile.is-grouped .savings-group[data-item-count="1"],
.debts-list.view-tile.is-grouped .debt-group[data-item-count="1"] {
    flex: 0 0 auto;
    width: auto;
}

.bills-list.view-tile.is-grouped .bill-group-header,
.savings-list.view-tile.is-grouped .savings-group-header,
.debts-list.view-tile.is-grouped .debt-group-header {
    border-bottom: none;
    padding-bottom: 0.25rem;
    margin-bottom: 0.5rem;
}

/* Items within a group flow horizontally */
.bills-list.view-tile.is-grouped .bill-group-items,
.savings-list.view-tile.is-grouped .savings-group-items,
.debts-list.view-tile.is-grouped .debt-group-items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Each tile in a group uses fixed width */
.bills-list.view-tile.is-grouped .bill-group-items .bill-card,
.savings-list.view-tile.is-grouped .savings-group-items .savings-card,
.debts-list.view-tile.is-grouped .debt-group-items .debt-card {
    flex: 0 0 275px;
    width: 275px;
}

/* ============================================
   Tile View Card Styles - Vertical layout
   ============================================ */

/* Tile card - clean stacked layout */
.bills-list.view-tile .bill-card,
.savings-list.view-tile .savings-card,
.debts-list.view-tile .debt-card {
    flex-direction: column;
    padding: 1rem;
    text-align: center;
    min-height: 140px;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
}

.bills-list.view-tile .bill-content,
.savings-list.view-tile .savings-header,
.debts-list.view-tile .debt-header {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
}

/* Header: Logo and name centered */
.bills-list.view-tile .bill-header {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

/* Bill name - consistent font */
.bills-list.view-tile .bill-name,
.savings-list.view-tile .savings-name,
.debts-list.view-tile .debt-name {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
    text-align: center;
    width: 100%;
}

/* Badges: Centered */
.bills-list.view-tile .bill-badges,
.savings-list.view-tile .savings-badges,
.debts-list.view-tile .debt-badges {
    justify-content: center;
    width: 100%;
}

/* Metadata: Centered row */
.bills-list.view-tile .bill-metadata {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.5rem;
    width: 100%;
}

/* Amount section */
.bills-list.view-tile .bill-amount-section {
    margin-top: auto;
    text-align: center;
    align-items: center;
    width: 100%;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
}

.bills-list.view-tile .bill-amount-section .amount-label {
    display: block;
    font-size: 0.6875rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.bills-list.view-tile .bill-amount-section .bill-amount {
    font-family: var(--font-mono);
    font-size: 1.125rem;
    font-weight: 700;
}

/* Savings card tile view */
.savings-list.view-tile .savings-card {
    flex-direction: column;
    text-align: center;
}

.savings-list.view-tile .savings-progress {
    width: 100%;
}

.savings-list.view-tile .savings-amounts {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    width: 100%;
}

/* Debt card tile view */
.debts-list.view-tile .debt-card {
    flex-direction: column;
    text-align: center;
}

.debts-list.view-tile .debt-header {
    flex-direction: column;
    align-items: center;
}

.debts-list.view-tile .debt-info {
    text-align: center;
}

.debts-list.view-tile .debt-progress {
    width: 100%;
}

.debts-list.view-tile .debt-footer {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.debts-list.view-tile .debt-details {
    justify-content: center;
    flex-wrap: wrap;
}

/* Mobile: Always show list view */
@media (max-width: 767px) {
    .bills-list.view-grid,
    .bills-list.view-tile,
    .savings-list.view-grid,
    .savings-list.view-tile,
    .debts-list.view-grid,
    .debts-list.view-tile {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    /* Reset tile card styles on mobile */
    .bills-list.view-tile .bill-card,
    .savings-list.view-tile .savings-card,
    .debts-list.view-tile .debt-card {
        flex-direction: row;
        text-align: left;
        min-height: auto;
        padding: 0.75rem 1rem;
    }

    .bills-list.view-tile .bill-header {
        flex-direction: row;
        justify-content: flex-start;
    }

    .bills-list.view-tile .bill-name,
    .savings-list.view-tile .savings-name,
    .debts-list.view-tile .debt-name {
        text-align: left;
    }

    .bills-list.view-tile .bill-badges,
    .savings-list.view-tile .savings-badges,
    .debts-list.view-tile .debt-badges {
        justify-content: flex-start;
    }

    .bills-list.view-tile .bill-metadata {
        justify-content: flex-start;
    }

    .bills-list.view-tile .bill-amount-section {
        border-top: none;
        padding-top: 0;
        text-align: right;
        width: auto;
        margin-top: 0;
    }

    /* Mobile: Grouped containers stack vertically */
    .bills-list.view-tile.is-grouped,
    .savings-list.view-tile.is-grouped,
    .debts-list.view-tile.is-grouped {
        flex-direction: column;
    }

    /* Mobile: Groups take full width */
    .bills-list.view-tile.is-grouped .bill-group,
    .savings-list.view-tile.is-grouped .savings-group,
    .debts-list.view-tile.is-grouped .debt-group {
        width: 100%;
    }

    .bills-list.view-grid.is-grouped .bill-group-items,
    .bills-list.view-tile.is-grouped .bill-group-items,
    .savings-list.view-grid.is-grouped .savings-group-items,
    .savings-list.view-tile.is-grouped .savings-group-items,
    .debts-list.view-grid.is-grouped .debt-group-items,
    .debts-list.view-tile.is-grouped .debt-group-items {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    /* Mobile: Reset fixed tile widths */
    .bills-list.view-tile.is-grouped .bill-group-items .bill-card,
    .savings-list.view-tile.is-grouped .savings-group-items .savings-card,
    .debts-list.view-tile.is-grouped .debt-group-items .debt-card {
        flex: 1 1 auto;
        width: 100%;
    }
}

/**
 * Summary Cards - Dashboard summary statistics
 */

.summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .summary-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1024px) {
    .summary-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.summary-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl, 1rem);
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
}

.summary-card:hover {
    border-color: var(--gray-300);
    box-shadow: var(--shadow-md);
}

.summary-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--card-accent, var(--gray-300));
    opacity: 0;
    transition: opacity 0.2s ease;
}

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

/* Card accent colors - muted earth tones */
.summary-card--income { --card-accent: #78716C; }
.summary-card--bills { --card-accent: #A1887F; }
.summary-card--savings { --card-accent: #81C784; }
.summary-card--leftover { --card-accent: #90A4AE; }
.summary-card--progress { --card-accent: #FFB74D; }

.summary-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.summary-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md, 0.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--icon-bg, var(--gray-100));
    color: var(--icon-color, var(--gray-600));
    flex-shrink: 0;
}

.summary-icon i {
    font-size: 1.25rem;
}

/* Icon colors by card type - softer muted tones */
.summary-card--income .summary-icon { --icon-bg: var(--gray-100); --icon-color: var(--gray-600); }
.summary-card--bills .summary-icon { --icon-bg: rgba(161, 136, 127, 0.1); --icon-color: #8D6E63; }
.summary-card--savings .summary-icon { --icon-bg: rgba(129, 199, 132, 0.1); --icon-color: #66BB6A; }
.summary-card--leftover .summary-icon { --icon-bg: rgba(144, 164, 174, 0.1); --icon-color: #78909C; }
.summary-card--progress .summary-icon { --icon-bg: rgba(255, 183, 77, 0.1); --icon-color: #FFA726; }

.summary-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.summary-details {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.summary-value {
    font-family: var(--font-mono);
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.summary-hint {
    font-size: 0.75rem;
    color: var(--text-muted, var(--text-secondary));
    margin-top: 0.375rem;
}

.summary-hint--positive {
    color: var(--success);
}

@media (min-width: 768px) {
    .summary-value {
        font-size: 1.5rem;
    }
}

/* Mobile Compact Styles */
@media (max-width: 767px) {
    .summary-grid,
    .summary-cards {
        gap: 0.625rem;
        margin-bottom: 1rem;
    }

    .summary-card {
        padding: 0.75rem;
        border-radius: 0.75rem;
    }

    .summary-header {
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .summary-icon {
        width: 32px;
        height: 32px;
        border-radius: 0.375rem;
    }

    .summary-icon i {
        font-size: 1rem;
    }

    .summary-label {
        font-size: 0.625rem;
        letter-spacing: 0.03em;
    }

    .summary-value {
        font-size: 1.125rem;
    }

    .summary-hint {
        font-size: 0.6875rem;
        margin-top: 0.25rem;
    }
}

/* Dashboard-specific summary cards layout */
.summary-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
    /* Break out of page-container max-width */
    width: calc(100vw - 4rem);
    margin-left: calc(50% - 50vw + 2rem);
    margin-right: calc(50% - 50vw + 2rem);
}

@media (min-width: 768px) {
    .summary-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .summary-cards {
        grid-template-columns: repeat(4, 1fr);
    }
}

/**
 * Empty States - Empty state displays and placeholders
 * Aligned to iOS EmptyStateView.swift, PremiumGateView.swift, Spacing.swift, Typography.swift
 */

/* iOS: EmptyStateView — EmptyStateView.swift
   VStack(spacing: CCSpacing.lg) = 16pt — line 29
   .padding(CCSpacing.xl) = 24pt — line 82 */
.empty-state {
    text-align: center;
    padding: 1.5rem; /* iOS: CCSpacing.xl = 24pt — EmptyStateView.swift line 82 */
    color: var(--text-secondary);
}

/* iOS: icon 48x48, .foregroundStyle(.ccTextMuted) — EmptyStateView.swift lines 31-34 */
.empty-state svg,
.empty-state i {
    width: 48px; /* iOS: frame(width: 48) — EmptyStateView.swift line 33 */
    height: 48px; /* iOS: frame(height: 48) — EmptyStateView.swift line 33 */
    font-size: 3rem; /* iOS: 48pt — EmptyStateView.swift line 33 */
    margin-bottom: 1rem; /* iOS: VStack(spacing: CCSpacing.lg) = 16pt — EmptyStateView.swift line 29 */
    opacity: 1; /* iOS: no opacity modifier — EmptyStateView.swift line 34 */
    color: var(--text-muted); /* iOS: .ccTextMuted — EmptyStateView.swift line 34 */
}

/* iOS: .font(.ccHeadline) = DM Sans 20pt SemiBold — Typography.swift line 39
   iOS: .foregroundStyle(.ccTextPrimary) — EmptyStateView.swift line 39 */
.empty-state h3 {
    margin-bottom: 0.5rem; /* iOS: VStack(spacing: CCSpacing.sm) = 8pt — EmptyStateView.swift line 36 */
    color: var(--text-primary); /* iOS: .ccTextPrimary — EmptyStateView.swift line 39 */
}

/* Full Page Empty State
   iOS: EmptyStateView — .padding(CCSpacing.xl) = 24pt
   iOS: .frame(maxWidth: .infinity, maxHeight: .infinity) — EmptyStateView.swift line 83 */
.empty-state-full {
    text-align: center;
    padding: 1.5rem; /* iOS: CCSpacing.xl = 24pt — EmptyStateView.swift line 82 */
    max-width: 500px;
    margin: 2rem auto;
}

/* iOS: icon 48x48, .ccTextMuted — EmptyStateView.swift lines 31-34 */
.empty-state-full .empty-state-icon {
    font-size: 3rem; /* iOS: 48pt — EmptyStateView.swift line 33 */
    margin-bottom: 1rem; /* iOS: VStack(spacing: CCSpacing.lg) = 16pt — EmptyStateView.swift line 29 */
    color: var(--text-muted); /* iOS: .ccTextMuted — EmptyStateView.swift line 34 */
}

.empty-state-full .empty-state-icon i {
    font-size: inherit;
}

/* iOS: .font(.ccHeadline) = DM Sans 20pt SemiBold — Typography.swift line 39
   iOS: .foregroundStyle(.ccTextPrimary) — EmptyStateView.swift line 39 */
.empty-state-full .empty-state-title {
    font-size: 1.25rem; /* iOS: ccHeadline = 20pt — Typography.swift line 39 */
    font-weight: 600; /* iOS: SemiBold — Typography.swift line 39 */
    color: var(--text-primary); /* iOS: .ccTextPrimary — EmptyStateView.swift line 39 */
    margin-bottom: 0.5rem; /* iOS: VStack(spacing: CCSpacing.sm) = 8pt — EmptyStateView.swift line 36 */
}

/* iOS: .font(.ccBody) = DM Sans 14pt Regular — Typography.swift line 45
   iOS: .foregroundStyle(.ccTextSecondary) — EmptyStateView.swift line 45 */
.empty-state-full .empty-state-text {
    font-size: 0.875rem; /* iOS: ccBody = 14pt — Typography.swift line 45 */
    color: var(--text-secondary); /* iOS: .ccTextSecondary — EmptyStateView.swift line 45 */
    margin-bottom: 1rem; /* iOS: VStack(spacing: CCSpacing.lg) = 16pt — EmptyStateView.swift line 29 */
    line-height: 1.5;
}

/* iOS: feature list VStack(alignment: .leading, spacing: CCSpacing.sm) = 8pt
   EmptyStateView.swift line 51
   .padding(.top, CCSpacing.xs) = 4pt — EmptyStateView.swift line 66 */
.empty-state-features {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 1.5rem 0; /* iOS: top CCSpacing.xs = 4pt, bottom before CTA — EmptyStateView.swift line 66 */
    text-align: left;
}

/* iOS: HStack(spacing: CCSpacing.sm) = 8pt — EmptyStateView.swift line 53
   iOS: .font(.ccBody) = 14pt — Typography.swift line 45
   iOS: .foregroundStyle(.ccTextSecondary) — EmptyStateView.swift line 62 */
.empty-state-features li {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* iOS: CCSpacing.sm = 8pt — EmptyStateView.swift line 53 */
    padding: 0.25rem 0; /* iOS: VStack spacing CCSpacing.sm / 2 vertical */
    font-size: 0.875rem; /* iOS: ccBody = 14pt — Typography.swift line 45 */
    color: var(--text-secondary); /* iOS: .ccTextSecondary — EmptyStateView.swift line 62 */
}

/* iOS: Ph.checkCircle.duotone 16x16 .ccSuccess — EmptyStateView.swift lines 54-58 */
.empty-state-features li::before {
    content: '\2713'; /* check mark */
    color: var(--success); /* iOS: .ccSuccess — EmptyStateView.swift line 58 */
    font-weight: bold;
}

/* ============================================
   Premium Gate - Full page upgrade screen
   iOS: PremiumGateView.swift
   iOS: VStack(spacing: CCSpacing.xl) = 24pt — PremiumGateView.swift line 25
   iOS: .background(Color.ccBackground) — PremiumGateView.swift line 96
   ============================================ */
.premium-gate {
  text-align: center;
  padding: 1.5rem; /* iOS: CCSpacing.xl = 24pt (implicit from scroll content) — PremiumGateView.swift */
  max-width: 440px;
  margin: 1.5rem auto; /* iOS: Spacer().frame(height: CCSpacing.xl) = 24pt top — PremiumGateView.swift line 26 */
}

/* iOS: ZStack { Circle().fill(Color.ccPrimary.opacity(0.1)).frame(width: 80, height: 80) }
   PremiumGateView.swift lines 29-35 */
.premium-gate-icon {
  width: 80px; /* iOS: frame(width: 80) — PremiumGateView.swift line 32 */
  height: 80px; /* iOS: frame(height: 80) — PremiumGateView.swift line 32 */
  margin: 0 auto 1.5rem; /* iOS: VStack(spacing: CCSpacing.xl) = 24pt — PremiumGateView.swift line 25 */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light); /* iOS: Color.ccPrimary.opacity(0.1) — PremiumGateView.swift line 31 */
  border-radius: 50%; /* iOS: Circle() — PremiumGateView.swift line 30 */
}

/* iOS: .font(.system(size: 32)) .foregroundStyle(.ccPrimary) — PremiumGateView.swift lines 34-35 */
.premium-gate-icon i {
  font-size: 2rem; /* iOS: 32pt — PremiumGateView.swift line 34 */
  color: var(--primary); /* iOS: .ccPrimary — PremiumGateView.swift line 35 */
  opacity: 1;
}

[data-theme="dark"] .premium-gate-icon i {
  color: var(--primary); /* iOS: same .ccPrimary in dark mode */
}

.premium-gate-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  background: var(--primary-light); /* iOS: ccPrimary.opacity(0.1) — consistent with icon circle */
  color: var(--primary); /* iOS: .ccPrimary */
  border-radius: 1rem;
  font-size: 0.75rem; /* iOS: ccCaption = 12pt — Typography.swift line 48 */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 1rem;
}

[data-theme="dark"] .premium-gate-badge {
  color: var(--primary);
}

.premium-gate-badge i {
  font-size: 0.875rem;
}

/* iOS: .font(.system(size: 24, weight: .bold)) — PremiumGateView.swift line 41
   iOS: .foregroundStyle(.ccTextPrimary) — PremiumGateView.swift line 42 */
.premium-gate-title {
  font-size: 1.5rem; /* iOS: 24pt — PremiumGateView.swift line 41 */
  font-weight: 700; /* iOS: .bold — PremiumGateView.swift line 41 */
  color: var(--text-primary); /* iOS: .ccTextPrimary — PremiumGateView.swift line 42 */
  margin: 0 0 0.5rem; /* iOS: VStack(spacing: CCSpacing.sm) = 8pt — PremiumGateView.swift line 39 */
}

/* iOS: .font(.ccBody) = 14pt Regular — Typography.swift line 45
   iOS: .foregroundStyle(.ccTextSecondary) — PremiumGateView.swift line 46
   iOS: .padding(.horizontal, CCSpacing.lg) = 16pt — PremiumGateView.swift line 48 */
.premium-gate-description {
  font-size: 0.875rem; /* iOS: ccBody = 14pt — Typography.swift line 45 */
  color: var(--text-secondary); /* iOS: .ccTextSecondary — PremiumGateView.swift line 46 */
  line-height: 1.5;
  margin: 0 0 1.5rem; /* iOS: VStack(spacing: CCSpacing.xl) = 24pt before features — PremiumGateView.swift line 25 */
  padding: 0 1rem; /* iOS: .padding(.horizontal, CCSpacing.lg) = 16pt — PremiumGateView.swift line 48 */
}

.premium-gate-retained {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; /* iOS: CCSpacing.sm = 8pt — Spacing.swift line 9 */
  padding: 0.625rem 1rem;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 0.5rem; /* iOS: CCRadius.md = 8pt — Spacing.swift line 24 */
  font-size: 0.8125rem;
  color: #b45309;
  margin-bottom: 1.5rem; /* iOS: CCSpacing.xl = 24pt — Spacing.swift line 15 */
}

[data-theme="dark"] .premium-gate-retained {
  color: #fbbf24;
}

/* iOS: VStack(alignment: .leading, spacing: CCSpacing.md) = 12pt
   PremiumGateView.swift line 52
   .padding(.horizontal, CCSpacing.xl) = 24pt — PremiumGateView.swift line 64 */
.premium-gate-features {
  list-style: none;
  padding: 0 1.5rem; /* iOS: .padding(.horizontal, CCSpacing.xl) = 24pt — PremiumGateView.swift line 64 */
  margin: 0 auto 1.5rem; /* iOS: VStack(spacing: CCSpacing.xl) = 24pt bottom — PremiumGateView.swift line 25 */
  display: inline-block;
  text-align: left;
}

/* iOS: HStack(spacing: CCSpacing.md) = 12pt — PremiumGateView.swift line 54
   iOS: .font(.ccBody) = 14pt — Typography.swift line 45
   iOS: .foregroundStyle(.ccTextPrimary) — PremiumGateView.swift line 60 */
.premium-gate-features li {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* iOS: CCSpacing.md = 12pt — PremiumGateView.swift line 54 */
  padding: 0.375rem 0; /* iOS: VStack(spacing: CCSpacing.md) / 2 = 6pt vertical */
  font-size: 0.875rem; /* iOS: ccBody = 14pt — Typography.swift line 45 */
  color: var(--text-primary); /* iOS: .ccTextPrimary — PremiumGateView.swift line 60 */
}

/* iOS: checkmark.circle.fill 18pt .ccPrimary — PremiumGateView.swift lines 55-57 */
.premium-gate-features li i {
  font-size: 1.125rem; /* iOS: 18pt — PremiumGateView.swift line 56 */
  color: var(--primary); /* iOS: .ccPrimary — PremiumGateView.swift line 57 */
  flex-shrink: 0;
}

.premium-gate-price {
  margin-bottom: 0.375rem;
}

.premium-gate-amount {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
}

.premium-gate-period {
  font-size: 0.875rem; /* iOS: ccBody = 14pt — Typography.swift line 45 */
  color: var(--text-secondary);
}

/* iOS: .font(.ccCaption) = 12pt, .ccTextMuted — PremiumGateView.swift lines 90-91 */
.premium-gate-couple {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-size: 0.75rem; /* iOS: ccCaption = 12pt — Typography.swift line 48 */
  color: var(--text-muted); /* iOS: .ccTextMuted — PremiumGateView.swift line 91 */
  margin: 0 0 1.5rem;
}

.premium-gate-couple i {
  font-size: 1rem;
}

/* iOS: Button — .foregroundStyle(.white), full width, .padding(.vertical, CCSpacing.lg) = 16pt
   .background(Color.ccPrimary), .clipShape(RoundedRectangle(cornerRadius: CCRadius.lg)) = 12pt
   .ccShadowMd() — PremiumGateView.swift lines 80-86
   .padding(.horizontal, CCSpacing.lg) = 16pt — PremiumGateView.swift line 87 */
.premium-gate-btn {
  background: var(--primary) !important; /* iOS: Color.ccPrimary solid — PremiumGateView.swift line 83 */
  color: white !important; /* iOS: .foregroundStyle(.white) — PremiumGateView.swift line 80 */
  padding: 1rem 2.5rem; /* iOS: .padding(.vertical, CCSpacing.lg) = 16pt — PremiumGateView.swift line 82 */
  font-size: 1rem;
  font-weight: 600; /* iOS: .fontWeight(.semibold) — PremiumGateView.swift line 73 */
  border: none;
  border-radius: 0.75rem; /* iOS: CCRadius.lg = 12pt — Spacing.swift line 27 */
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem; /* iOS: HStack(spacing: CCSpacing.sm) = 8pt — PremiumGateView.swift line 71 */
  width: auto;
  box-shadow:
    0 2px 4px rgba(28, 25, 23, 0.06),
    0 1px 2px rgba(28, 25, 23, 0.04); /* iOS: .ccShadowMd() — PremiumGateView.swift line 85, Spacing.swift lines 60-61 */
}

.premium-gate-btn:hover {
  background: var(--primary-dark) !important;
  transform: translateY(-1px);
  box-shadow:
    0 4px 8px rgba(28, 25, 23, 0.08),
    0 2px 4px rgba(28, 25, 23, 0.06); /* iOS: ccShadowLg — Spacing.swift lines 72-73 */
}

.premium-gate-btn i {
  font-size: 1.125rem;
}

@media (max-width: 480px) {
  .premium-gate {
    padding: 1.5rem 1rem; /* iOS: CCSpacing.xl = 24pt vert, CCSpacing.lg = 16pt horiz */
  }

  /* iOS: icon stays 80x80 on all sizes — PremiumGateView.swift line 32 */
  .premium-gate-icon {
    width: 80px; /* iOS: frame(width: 80) — PremiumGateView.swift line 32 */
    height: 80px; /* iOS: frame(height: 80) — PremiumGateView.swift line 32 */
  }

  /* iOS: icon stays 32pt — PremiumGateView.swift line 34 */
  .premium-gate-icon i {
    font-size: 2rem; /* iOS: 32pt — PremiumGateView.swift line 34 */
  }

  /* iOS: 24pt bold on all sizes — PremiumGateView.swift line 41 */
  .premium-gate-title {
    font-size: 1.5rem; /* iOS: 24pt — PremiumGateView.swift line 41 */
  }

  .premium-gate-amount {
    font-size: 1.75rem;
  }
}

/* ============================================
   Limit Reached Button State
   ============================================ */
.btn-limit-reached {
  position: relative;
}

.btn-limit-reached::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.375rem 0.75rem;
  background: var(--gray-900);
  color: white;
  font-size: 0.75rem;
  font-weight: 400;
  border-radius: 0.375rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 10;
}

.btn-limit-reached:hover::after {
  opacity: 1;
}

@media (max-width: 600px) {
  .btn-limit-reached::after {
    white-space: normal;
    width: max-content;
    max-width: 200px;
    text-align: center;
  }
}

/**
 * Upgrade Prompt Modal
 * Shown when users hit free tier limits
 */

/* Modal Container */
.upgrade-prompt-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.upgrade-prompt-modal.active {
  opacity: 1;
  visibility: visible;
}

/* Overlay */
.upgrade-prompt-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Content Card */
.upgrade-prompt-content {
  position: relative;
  background: var(--bg-card);
  border-radius: var(--radius-xl, 1rem);
  max-width: 400px;
  width: 100%;
  padding: 2rem;
  text-align: center;
  box-shadow: var(--shadow-lg);
  transform: scale(0.95) translateY(10px);
  transition: transform 0.2s ease;
}

.upgrade-prompt-modal.active .upgrade-prompt-content {
  transform: scale(1) translateY(0);
}

/* Close Button */
.upgrade-prompt-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  font-size: 1.5rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.upgrade-prompt-close:hover {
  background: var(--gray-100);
  color: var(--text-primary);
}

/* Crown Icon */
.upgrade-prompt-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05));
  border-radius: 50%;
}

.upgrade-prompt-icon i {
  font-size: 2rem;
  color: #7c3aed;
}

[data-theme="dark"] .upgrade-prompt-icon i {
  color: #a78bfa;
}

/* Title */
.upgrade-prompt-title {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
}

/* Message */
.upgrade-prompt-message {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  margin: 0 0 0.75rem;
  line-height: 1.5;
}

/* Feature Label */
.upgrade-prompt-feature {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  background: var(--gray-100);
  border-radius: var(--radius-full, 9999px);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin: 0 0 1.25rem;
}

.upgrade-prompt-feature strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* Price Display */
.upgrade-prompt-price {
  margin-bottom: 0.5rem;
}

.upgrade-prompt-amount {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.upgrade-prompt-period {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-secondary);
}

/* Couple Note */
.upgrade-prompt-couple {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: #22c55e;
  margin: 0 0 1.5rem;
}

.upgrade-prompt-couple i {
  font-size: 1rem;
}

/* Action Buttons */
.upgrade-prompt-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.upgrade-prompt-btn {
  background: linear-gradient(135deg, #7c3aed, #8b5cf6) !important;
  color: white !important;
  padding: 0.875rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-md, 0.5rem);
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.upgrade-prompt-btn:hover {
  background: linear-gradient(135deg, #6d28d9, #7c3aed) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.upgrade-prompt-btn:active {
  transform: translateY(0);
}

.upgrade-prompt-btn i {
  font-size: 1.125rem;
}

.upgrade-prompt-later {
  background: transparent;
  color: var(--text-secondary);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  border: none;
  cursor: pointer;
}

.upgrade-prompt-later:hover {
  color: var(--text-primary);
}

/* ============================================
   Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .upgrade-prompt-modal,
  .upgrade-prompt-content {
    transition: none;
  }

  .upgrade-prompt-btn:hover {
    transform: none;
  }
}

/* ============================================
   Mobile Responsive
   ============================================ */
@media (max-width: 480px) {
  .upgrade-prompt-content {
    padding: 1.5rem;
    margin: 0 0.5rem;
  }

  .upgrade-prompt-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 1rem;
  }

  .upgrade-prompt-icon i {
    font-size: 1.75rem;
  }

  .upgrade-prompt-title {
    font-size: 1.25rem;
  }

  .upgrade-prompt-message {
    font-size: 0.875rem;
  }

  .upgrade-prompt-amount {
    font-size: 1.875rem;
  }

  .upgrade-prompt-btn {
    padding: 0.75rem 1.25rem;
    font-size: 0.9375rem;
  }
}

/**
 * Utilities - Helper classes and animations
 */

/* Text utilities */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-muted { color: var(--text-secondary); }

/* Margin utilities */
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }

/* Display utilities */
.hidden { display: none !important; }

/* Confetti Burst Animation */
.confetti-burst {
  position: fixed;
  width: 10px;
  height: 10px;
  pointer-events: none;
  z-index: 9999;
  animation: confetti-burst 1s ease-out forwards;
}

.confetti-burst[data-shape="circle"] {
  border-radius: 50%;
}

.confetti-burst[data-shape="square"] {
  border-radius: 2px;
}

.confetti-burst[data-shape="triangle"] {
  width: 0;
  height: 0;
  background: transparent !important;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid currentColor;
}

@keyframes confetti-burst {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--tx), var(--ty)) rotate(var(--r)) scale(0);
    opacity: 0;
  }
}

/* ── Suggestion Chips ──────────────────────────────── */
.suggestions-container {
  margin-bottom: 0.625rem;
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--border-color);
}

.suggestions-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.375rem;
}

.suggestion-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: 0.25rem;
}

.suggestion-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.suggestion-chip:hover {
  border-color: var(--gray-400);
  color: var(--text-primary);
}

.suggestion-chip.selected {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
}

.suggestion-chip:active {
  transform: scale(0.97);
}

/**
 * Offline Indicator
 * Banner shown when the app is offline
 */

.offline-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--warning, #f59e0b);
  color: #000;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  z-index: 9999;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  /* Safe area for notches */
  padding-top: calc(0.5rem + env(safe-area-inset-top, 0px));
}

.offline-indicator.visible {
  transform: translateY(0);
  opacity: 1;
}

.offline-icon {
  font-size: 1rem;
}

.offline-text {
  letter-spacing: 0.01em;
}

/* Adjust body content when offline indicator is visible */
body.is-offline .app-header {
  top: calc(2rem + env(safe-area-inset-top, 0px));
}

body.is-offline .page-container {
  padding-top: calc(var(--header-height, 60px) + 2rem + env(safe-area-inset-top, 0px));
}

/* Mobile adjustments */
@media (max-width: 767px) {
  body.is-offline .page-container {
    padding-top: calc(2rem + env(safe-area-inset-top, 0px));
  }
}

/* Dark mode adjustments */
[data-theme="dark"] .offline-indicator {
  background: var(--warning, #d97706);
  color: #fff;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .offline-indicator {
    transition: none;
  }
}

/**
 * Splash Screen - Loading overlay with animated branding
 */

.splash-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #FAFAF9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

[data-theme="dark"] .splash-screen {
    background: #1C1917;
}

.splash-screen.hide,
.splash-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Logo container with bounce-in */
.splash-logo {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    animation: splashBounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    margin-bottom: 1.25rem;
}

@keyframes splashBounceIn {
    0% { opacity: 0; transform: scale(0.3) rotate(-8deg); }
    50% { opacity: 1; transform: scale(1.08) rotate(2deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* App name */
.splash-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #1C1917;
    letter-spacing: -0.02em;
    animation: splashFadeUp 0.5s ease 0.3s both;
}

[data-theme="dark"] .splash-title {
    color: #FAFAF9;
}

@keyframes splashFadeUp {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Rotating slogans */
.splash-slogan {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9375rem;
    color: #78716C;
    margin-top: 0.5rem;
    height: 1.5em;
    overflow: hidden;
    animation: splashFadeUp 0.5s ease 0.5s both;
}

.splash-slogan-text {
    display: block;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Animated dots loader */
.splash-loader {
    display: flex;
    gap: 6px;
    margin-top: 2rem;
    animation: splashFadeUp 0.5s ease 0.7s both;
}

.splash-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00C6FF 0%, #7C3AED 100%);
    animation: splashDotBounce 1.4s ease-in-out infinite;
}

.splash-dot:nth-child(2) {
    animation-delay: 0.16s;
}

.splash-dot:nth-child(3) {
    animation-delay: 0.32s;
}

@keyframes splashDotBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* Coin animation - playful touch */
.splash-coins {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.splash-coin {
    position: absolute;
    font-size: 1.25rem;
    opacity: 0;
    animation: coinFloat 3s ease-in-out infinite;
}

.splash-coin:nth-child(1) { left: 15%; animation-delay: 0.5s; }
.splash-coin:nth-child(2) { left: 75%; animation-delay: 1.2s; }
.splash-coin:nth-child(3) { left: 45%; animation-delay: 2s; }
.splash-coin:nth-child(4) { left: 85%; animation-delay: 0.8s; }
.splash-coin:nth-child(5) { left: 25%; animation-delay: 1.6s; }

@keyframes coinFloat {
    0% { opacity: 0; transform: translateY(100vh) rotate(0deg); }
    20% { opacity: 0.3; }
    80% { opacity: 0.15; }
    100% { opacity: 0; transform: translateY(-20px) rotate(360deg); }
}

/* Budget styles — used on reports page */

/**
 * Forms iOS - iOS-style form components for modals and sheets
 * Uses card-group / row pattern with floating dropdowns, segments, sliders
 */

/* ─── Section Title ─── */
.form-ios .section-title {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1rem 0.375rem 0.375rem;
}

.form-ios .section-title:first-child {
    padding-top: 0.625rem;
}

/* ─── Card Group ─── */
.card-group {
    background: var(--bg-card);
    border-radius: 0.625rem;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(231, 229, 228, 0.7);
}

/* Allow overflow when suggestion dropdown is inside */
.card-group:has(.name-suggestions[style*="display: block"]),
.card-group:has(.name-suggestions:not([style*="display: none"])) {
    overflow: visible;
}

/* ─── Row — the core building block ─── */
.card-group .row {
    display: flex;
    align-items: center;
    min-height: 2.875rem;
    padding: 0 0.875rem;
}

.card-group .row + .row {
    border-top: 1px solid var(--gray-100);
}

/* ─── Stacked Input Row (name, amount) ─── */
.row-input {
    flex-direction: column;
    align-items: stretch;
    padding: 0.5rem 0.875rem;
}

.row-input input {
    border: none !important;
    background: none !important;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    outline: none;
    padding: 0.3125rem 0 !important;
    width: 100%;
    text-align: left !important;
    box-shadow: none !important;
    min-height: unset !important;
}

.row-input input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

.row-input .currency-line {
    display: flex !important;
    align-items: center;
    gap: 0.25rem;
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100% !important;
}

.row-input .currency-line .symbol {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 500;
}

.row-input .currency-line input {
    font-family: var(--font-mono);
    font-weight: 600;
}

/* Hide number spinners */
.card-group input[type="number"]::-webkit-inner-spin-button,
.card-group input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.card-group input[type="number"] {
    -moz-appearance: textfield;
}

/* Nuclear override — form-input base styles add padding/centering */
.card-group .row-input input,
.card-group .row-input .currency-line input,
.card-group .row-input input[data-currency-input] {
    text-align: left !important;
    padding: 0.3125rem 0 !important;
    min-height: unset !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* ─── Inline Row (label : value) ─── */
.row-inline {
    justify-content: space-between;
    gap: 1rem;
}

.row-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
    flex-shrink: 0;
}

.row-value {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--primary);
    text-align: right;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.row-value select {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--primary);
    text-align: right;
    cursor: pointer;
    outline: none;
    padding-right: 0.125rem;
}

.row-value .chevron {
    font-size: 0.5rem;
    color: var(--text-muted);
    line-height: 1;
}

/* ─── Dropdown Trigger ─── */
.dd-trigger {
    cursor: pointer;
    transition: background 0.1s;
}

.dd-trigger:active {
    background: var(--gray-100);
}

.dd-value {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.dd-caret {
    font-size: 0.5rem;
    color: var(--text-muted);
    transition: transform 0.2s;
}

.dd-trigger.open .dd-caret {
    transform: rotate(180deg);
}

/* ─── Floating Dropdown Panel ─── */
.dd-panel {
    display: none;
    position: fixed;
    z-index: 100;
    background: var(--bg-card);
    border-radius: 0.75rem;
    padding: 0.375rem;
    min-width: 180px;
    max-height: 260px;
    overflow-y: auto;
    box-shadow:
        0 12px 40px rgba(28, 25, 23, 0.15),
        0 4px 12px rgba(28, 25, 23, 0.06),
        0 0 0 1px rgba(231, 229, 228, 0.5);
    animation: ddIn 0.18s cubic-bezier(0.32, 0.72, 0, 1);
}

.dd-panel.open {
    display: block;
}

@keyframes ddIn {
    from { opacity: 0; transform: translateY(-4px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.dd-panel::-webkit-scrollbar { width: 0; }

.dd-panel-title {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding: 0.375rem 0.5rem 0.25rem;
}

.dd-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: none;
    background: none;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: 0.375rem;
    transition: background 0.1s;
    text-align: left;
}

.dd-option:hover {
    background: var(--gray-100);
}

.dd-option.active {
    color: var(--primary);
    font-weight: 600;
    background: var(--primary-light);
}

.dd-option.active::after {
    content: '\2713';
    font-size: 0.75rem;
    color: var(--primary);
    font-weight: 700;
}

/* ─── Dropdown Overlay (click outside to close) ─── */
.dd-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99;
}

.dd-overlay.open {
    display: block;
}

/* ─── Chevron Row (icon + label + arrow) ─── */
.row-chevron {
    gap: 0.75rem;
    cursor: pointer;
    transition: background 0.12s;
    padding: 0.625rem 0.875rem;
}

.row-chevron:active {
    background: var(--gray-100);
}

.chevron-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    flex-shrink: 0;
}

.chevron-label {
    flex: 1;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-weight: 400;
}

.chevron-arrow {
    color: var(--gray-300);
    font-size: 0.75rem;
}

/* ─── Segment Control ─── */
.segment {
    display: flex;
    background: var(--gray-100);
    border-radius: 0.5rem;
    padding: 0.1875rem;
    margin: 0 0.875rem;
}

.segment-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 0.4375rem 0;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.32, 0.72, 0, 1);
    position: relative;
    min-height: unset !important;
    min-width: unset !important;
}

.segment-btn.active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 1px 4px rgba(79, 70, 229, 0.25);
}

.segment-btn svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* ─── Inline segment inside a card ─── */
.row-segment {
    padding: 0.5rem 0.875rem;
}

.row-segment .segment {
    margin: 0;
    width: 100%;
}

/* ─── Split Slider Card ─── */
.split-slider-card {
    padding: 0.75rem 0.875rem;
}

.split-slider-labels {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.625rem;
}

.split-slider-person {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
}

.split-slider-person.partner {
    text-align: right;
}

.split-slider-name {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.split-slider-pct {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.split-slider-person.you .split-slider-pct {
    color: var(--primary);
}

/* Range input styling */
.split-slider-track-wrap {
    padding: 0.125rem 0;
}

.split-slider-input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right, var(--primary) 70%, var(--gray-200) 70%);
    outline: none;
    cursor: pointer;
}

.split-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2.5px solid var(--primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    cursor: grab;
    transition: box-shadow 0.15s;
}

.split-slider-input::-webkit-slider-thumb:active {
    cursor: grabbing;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}

.split-slider-input::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2.5px solid var(--primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    cursor: grab;
}

/* ─── Notes ─── */
.notes-area {
    margin-top: 0.25rem;
}

.notes-area textarea {
    width: 100%;
    background: var(--bg-card);
    border: none;
    border-radius: 0.625rem;
    padding: 0.625rem 0.875rem;
    font-family: inherit;
    font-size: 0.8125rem;
    color: var(--text-primary);
    resize: vertical;
    min-height: 2.75rem;
    outline: none;
    box-shadow: 0 0 0 1px rgba(231, 229, 228, 0.7);
    transition: box-shadow 0.15s;
}

.notes-area textarea:focus {
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

.notes-area textarea::placeholder {
    color: var(--text-muted);
}

/* ─── Form Body ─── */
.form-body {
    padding: 0.25rem 0.875rem 1.25rem;
}

/* ─── Modal Nav override ─── */
.modal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    position: sticky;
    top: 0;
    background: rgba(250, 250, 249, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 2;
    border-bottom: 1px solid rgba(231, 229, 228, 0.6);
}

.modal-nav-btn {
    background: var(--gray-100);
    border: none;
    border-radius: 2rem;
    padding: 0.4375rem 0.875rem;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s;
}

.modal-nav-btn:hover {
    background: var(--gray-200);
}

.modal-nav-btn.primary {
    background: none;
    color: var(--primary);
    font-weight: 600;
}

.modal-nav-btn.primary:hover {
    background: var(--primary-light);
}

.modal-nav-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* ─── Modal Footer — delete-only row ─── */
.modal-foot {
    display: flex;
    padding: 0.25rem 1rem 0.75rem;
    border-top: 1px solid var(--gray-100);
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}

.modal-foot .modal-nav-btn {
    color: var(--danger);
    background: none;
    font-weight: 500;
}

.modal-foot .modal-nav-btn:hover {
    background: var(--danger-light);
}

/* ─── Responsive: bottom sheet on mobile ─── */
@media (max-width: 480px) {
    .backdrop {
        align-items: flex-end;
        padding: 0;
    }

    .modal {
        max-width: 100%;
        border-radius: 1rem 1rem 0 0;
        max-height: 94vh;
        animation: sheetUp 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    }

    @keyframes sheetUp {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
}

/* ─── Typeahead Suggestions (shared across bills, dashboard, settings) ─── */
.name-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    box-shadow: 0 12px 40px rgba(28, 25, 23, 0.15), 0 4px 12px rgba(28, 25, 23, 0.08);
    z-index: 10000;
    max-height: 280px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    margin-top: 0.25rem;
    padding: 0.25rem;
}

.name-suggestions::-webkit-scrollbar { width: 4px; }
.name-suggestions::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 2px; }

.suggestion-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.625rem;
    cursor: pointer;
    transition: background 0.1s;
    border-radius: 0.375rem;
}

.suggestion-item:hover { background: var(--gray-50); }

.suggestion-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: contain;
    flex-shrink: 0;
}

.suggestion-icon-placeholder {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--gray-100);
    flex-shrink: 0;
}

.suggestion-icon-fallback {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.suggestion-name {
    font-size: 0.875rem;
    color: var(--text-primary);
}

/* Allow card-group overflow when suggestions are visible */
.card-group:has(.name-suggestions[style*="display: block"]) { overflow: visible; }
.form-group:has(.name-suggestions[style*="display: block"]) { overflow: visible; }

/* ─── Dark Mode ─── */
[data-theme="dark"] .card-group {
    box-shadow: 0 0 0 1px rgba(68, 64, 60, 0.7);
}

[data-theme="dark"] .modal-nav {
    background: rgba(28, 25, 23, 0.88);
    border-bottom-color: rgba(68, 64, 60, 0.6);
}

[data-theme="dark"] .dd-panel {
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(68, 64, 60, 0.5);
}

[data-theme="dark"] .notes-area textarea {
    box-shadow: 0 0 0 1px rgba(68, 64, 60, 0.7);
}

[data-theme="dark"] .name-suggestions {
    border-color: var(--border-color);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2);
}

/**
 * Animation Optimizations & Accessibility
 * Phase 4.2 - Performance optimizations for animations
 */

/* ========================================
   GPU-Accelerated Animation Hints
   Use sparingly on elements with frequent animations
   ======================================== */

/* Elements that frequently animate */
.bill-card,
.savings-card,
.debt-card,
.modal-content,
.notification-toast,
.push-notification-toast,
.pull-to-refresh-indicator {
  will-change: transform;
}

/* Progress bars that animate width */
.progress-fill,
.split-slider-fill,
.contribution-fill {
  will-change: width;
}

/* Elements with opacity transitions */
.modal-backdrop,
.biometric-lock-screen,
.loading-overlay {
  will-change: opacity;
}

/* ========================================
   Prefers Reduced Motion
   Respects user accessibility preferences
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  /* Disable all animations */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Keep essential visual feedback but make it instant */
  .btn,
  .card,
  .bill-card,
  .savings-card,
  .debt-card {
    transition: none !important;
  }

  /* Disable decorative animations completely */
  .confetti,
  .celebration-animation,
  [class*="bounce"],
  [class*="pulse"],
  [class*="spin"] {
    animation: none !important;
  }

  /* Progress bars - show final state immediately */
  .progress-fill,
  .contribution-fill {
    transition: none !important;
  }

  /* Keep modal visibility transitions functional but fast */
  .modal-backdrop {
    transition: opacity 0.01ms !important;
  }

  /* Pull-to-refresh - disable spinning */
  .pull-to-refresh-indicator::before {
    animation: none !important;
  }

  /* Disable swipe gesture animations */
  .bill-card.swiping-left,
  .bill-card.swiping-right {
    transition: none !important;
  }
}

/* ========================================
   Optimized Keyframe Animations
   Using transform/opacity only (GPU accelerated)
   ======================================== */

/* Smooth fade in - GPU accelerated */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Smooth fade out - GPU accelerated */
@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* Scale in - for modals and cards */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Slide in from bottom - for mobile sheets */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slide in from right - for side panels */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Gentle pulse - for attention */
@keyframes gentlePulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.02);
    opacity: 0.9;
  }
}

/* ========================================
   Performance Classes
   Apply these classes for optimized animations
   ======================================== */

/* Apply hardware acceleration */
.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Smooth scrolling container */
.smooth-scroll {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

@media (prefers-reduced-motion: reduce) {
  .smooth-scroll {
    scroll-behavior: auto;
  }
}

/* Animate on appear - use with JS intersection observer */
.animate-on-appear {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.animate-on-appear.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .animate-on-appear {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/**
 * Mobile Responsive Styles
 *
 * Breakpoint: max-width 767px
 * Goal: clean responsive layout for small screens — no native-app mimicry
 */

@media (max-width: 767px) {

  /* ===========================
     VISIBILITY TOGGLES
     =========================== */
  .desktop-only,
  .page-header.desktop-only {
    display: none;
  }

  .mobile-only {
    display: block;
  }


  /* ===========================
     BASE LAYOUT
     =========================== */
  .page-container {
    padding: 0 1rem 5rem;
  }

  #mainContent {
    padding: 0;
  }


  /* ===========================
     PAGE HEADER & SECTION HEADER
     =========================== */
  .page-header,
  .section-header {
    padding: 0.75rem 1rem;
    margin: 0;
    width: auto;
  }

  .page-header h2 {
    display: none;
  }

  .section-header h2 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
  }

  .section-header-right {
    margin-left: auto;
  }

  /* Hide button text in section headers, keep icon */
  .section-header .btn .btn-text {
    display: none;
  }

  .page-header-left {
    display: none;
  }

  .page-header-center {
    display: flex;
    justify-content: center;
  }

  .page-header .btn-text {
    display: none;
  }


  /* ===========================
     MONTH NAVIGATOR
     =========================== */
  .page-header .month-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  #currentMonthTitle {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 120px;
    text-align: center;
    flex: 1;
  }


  /* ===========================
     SUMMARY CARDS
     =========================== */
  .summary-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    padding: 0;
    margin: 0 0 1rem;
    width: 100%;
  }

  .summary-hint {
    display: none;
  }


  /* ===========================
     BILLS SECTION
     =========================== */
  .bills-section {
    padding: 0;
    margin: 0;
  }

  /* Hide desktop view toggle */
  .bills-toolbar,
  .view-toggle {
    display: none;
  }

  /* Always show list layout on mobile */
  .bills-list,
  .bills-list.view-grid,
  .bills-list.view-tile {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  /* Reset tile/grid card overrides */
  .bills-list.view-tile .bill-card,
  .bills-list.view-grid .bill-card,
  .bills-list.view-tile.is-grouped .bill-group-items .bill-card,
  .bills-list.view-grid.is-grouped .bill-group-items .bill-card {
    flex-direction: row;
    width: 100%;
  }

  .bills-list.is-grouped,
  .bills-list.view-tile.is-grouped,
  .bills-list.view-grid.is-grouped {
    flex-direction: column;
  }

  .bills-list.view-tile.is-grouped .bill-group,
  .bills-list.view-grid.is-grouped .bill-group {
    width: 100%;
  }

  .bill-badges {
    display: none;
  }

  .amount-label {
    display: none;
  }

  /* Bill groups */
  .bill-group {
    margin-bottom: 0.75rem;
  }

  .bill-group-items {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .bill-group-header {
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.25rem 0;
    margin: 0 0 0.5rem;
  }

  /* Bills toolbar card (paid counter) */
  .bills-toolbar-card {
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    padding: 0.75rem;
  }

  .bills-toolbar-card .desktop-only,
  .bills-toolbar-card .bills-toolbar-controls {
    display: none;
  }

  .bills-toolbar-card .bills-status-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .bills-toolbar-card .bills-status-bar {
    width: 100%;
    min-width: unset;
    flex: none;
  }


  /* ===========================
     SPLIT BAR
     =========================== */
  .bill-split-bar {
    flex-basis: 100%;
    padding-top: 0.375rem;
    margin-top: 0.125rem;
  }

  .split-bar-labels {
    font-size: 0.625rem;
  }


  /* ===========================
     FILTER BAR
     =========================== */
  .filter-bar {
    display: none;
  }


  /* ===========================
     INFO BOX
     =========================== */
  .info-box {
    margin: 0 0 0.75rem;
    padding: 0.75rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
  }


  /* ===========================
     SAVINGS PAGE
     =========================== */
  .savings-list {
    padding: 0.75rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }


  /* ===========================
     DEBTS PAGE
     =========================== */
  .debts-content {
    padding: 0;
  }

  .debt-summary.summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
  }

  .debts-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .view-tabs {
    margin: 0 0 1rem;
  }

  .strategy-cards {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }


  /* ===========================
     REPORTS PAGE
     =========================== */
  .reports-content {
    padding: 0;
  }

  .report-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    overflow-x: auto;
  }

  .report-tabs::-webkit-scrollbar {
    display: none;
  }

  .report-tab {
    white-space: nowrap;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.875rem;
  }


  /* ===========================
     SETTINGS PAGE
     =========================== */
  .settings-layout {
    flex-direction: column;
    gap: 0;
    padding: 0;
  }

  .settings-content {
    padding: 0;
  }


  /* ===========================
     MODALS — centered dialogs (not bottom sheets)
     =========================== */
  .modal-backdrop {
    padding: 1rem;
    align-items: center;
  }

  .modal-content {
    margin: 0 auto;
    max-height: 90vh;
    width: 100%;
    max-width: 100%;
    border-radius: 0.75rem;
  }

  .modal-header {
    padding: 0.75rem 1rem;
  }

  .modal-title {
    font-size: 1rem;
  }

  .modal-body {
    padding: 0.75rem 1rem;
  }

  .modal-body .form-group {
    margin-bottom: 0.5rem;
  }

  .modal-body .form-group label {
    margin-bottom: 0.125rem;
    font-size: 0.75rem;
  }

  /* Keep 16px on inputs to prevent iOS zoom */
  .modal-body .form-input,
  .modal-body .form-select,
  .modal-body select,
  .modal-body input,
  .modal-body textarea {
    font-size: 16px !important;
  }

  .modal-body .form-row {
    gap: 0.5rem;
  }

  .modal-footer {
    padding: 0.75rem 1rem;
  }


  /* ===========================
     FORMS
     =========================== */
  .form-row {
    grid-template-columns: 1fr;
  }

  .type-toggle {
    flex-direction: column;
    gap: 0.5rem;
  }

  .type-toggle-btn {
    width: 100%;
    border-radius: 0.75rem;
  }


  /* ===========================
     EMPTY STATES
     =========================== */
  .empty-state,
  .empty-state-full {
    padding: 1.5rem;
    text-align: center;
    margin: 0.5rem 0;
  }


  /* ===========================
     BOTTOM NAVIGATION
     =========================== */
  .mobile-nav {
    background: var(--bg-card);
    box-shadow: 0 -1px 0 var(--border-color);
  }

  /* Nav context menu (long-press) */
  .nav-context-menu {
    display: none;
    flex-direction: column;
    position: fixed;
    bottom: 80px;
    left: 0.75rem;
    right: 0.75rem;
    background: var(--bg-card);
    border-radius: 0.75rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    z-index: 200;
    padding: 0.25rem;
  }

  .nav-context-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: 0.5rem;
  }

  .nav-context-item:active {
    background: var(--gray-100);
  }

  .nav-context-item i {
    font-size: 1.25rem;
    color: var(--text-secondary);
  }


  /* ===========================
     SKELETON CARDS
     =========================== */
  .skeleton-card {
    background: var(--bg-card);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 0.5rem;
  }


  /* ===========================
     VIEW MODE TOGGLE (segmented)
     =========================== */
  .view-mode-toggle {
    display: flex;
    background: var(--gray-100);
    border-radius: 0.5rem;
    padding: 2px;
    gap: 0;
  }

  .view-mode-btn {
    flex: 1;
    text-align: center;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border: none;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--text-secondary);
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s ease;
  }

  .view-mode-btn.active {
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }


  /* ===========================
     DARK MODE ADJUSTMENTS
     =========================== */
  [data-theme="dark"] .mobile-nav {
    background: var(--bg-card);
    box-shadow: 0 -1px 0 var(--border-color);
  }

  [data-theme="dark"] .nav-context-menu {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  }

  [data-theme="dark"] .settings-nav-item {
    background: var(--bg-card);
  }

  [data-theme="dark"] .settings-nav-item.active {
    background: var(--primary);
    color: white;
  }
}


/* ===========================
   TABLET BREAKPOINT (768–1023px)
   =========================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .summary-cards {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .bills-list.view-tile {
    grid-template-columns: repeat(3, 1fr);
  }

  .settings-layout {
    flex-direction: row;
    gap: 1.5rem;
  }

  .settings-nav {
    width: 180px;
    flex-direction: column;
  }

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

/**
 * Material You overrides for Android
 * Only applies when data-platform="android" is set on <html>
 * Loaded AFTER all other styles so it can override defaults
 */

/* Typography — prefer system Roboto on Android (DM Sans still loads as primary) */
:root[data-platform="android"] {
  --font-sans: 'DM Sans', 'Roboto', -apple-system, sans-serif;
}
[data-platform="android"] body {
  font-family: var(--font-sans);
}

/* Larger border radius — Material 3 uses more rounded shapes */
:root[data-platform="android"] {
  --radius-sm: 0.5rem;   /* 8px vs 6px */
  --radius-md: 0.75rem;  /* 12px vs 8px */
  --radius-lg: 1rem;     /* 16px vs 12px */
  --radius-xl: 1.5rem;   /* 24px vs 16px */
}

/* Bottom nav — Material 3 style with indicator pill */
[data-platform="android"] .mobile-nav {
  border-top: none;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.08);
}
[data-platform="android"] .mobile-nav .nav-item.active {
  background: var(--primary-light);
  border-radius: 1rem;
  padding: 0.25rem 1rem;
}
[data-platform="android"] .mobile-nav .nav-item.active .nav-icon {
  color: var(--primary);
}

/* Buttons — Material 3 filled tonal style */
[data-platform="android"] .btn {
  border-radius: 1.25rem; /* 20px — Material fully rounded buttons */
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
}
[data-platform="android"] .btn-primary {
  border-radius: 1.25rem;
}

/* FAB — Material 3 FAB shape */
[data-platform="android"] .mobile-fab,
[data-platform="android"] .fab-btn,
[data-platform="android"] .nav-add-icon {
  border-radius: 1rem; /* Material 3 FAB is less round than circle */
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

/* Cards — Material 3 elevated surface */
[data-platform="android"] .summary-card,
[data-platform="android"] .bill-card,
[data-platform="android"] .bank-account-card,
[data-platform="android"] .savings-card,
[data-platform="android"] .debt-card,
[data-platform="android"] .report-card,
[data-platform="android"] .transfer-summary-card {
  border-radius: 1rem;
}

/* Modals — Material 3 bottom sheet top radius */
@media (max-width: 767px) {
  [data-platform="android"] .modal-content {
    border-radius: 1.75rem 1.75rem 0 0;
  }
}

/* Segment control — Material 3 segmented buttons */
[data-platform="android"] .segment {
  border-radius: 1.25rem;
  border: 1px solid var(--border-color);
  background: transparent;
}
[data-platform="android"] .segment-btn {
  border-radius: 1.25rem;
}
[data-platform="android"] .segment-btn.active {
  background: var(--primary);
  color: white;
}

/* Form inputs — Material 3 outlined style */
[data-platform="android"] .card-group {
  border-radius: 1rem;
}

/* View mode toggle — Material 3 style */
[data-platform="android"] .view-mode-toggle {
  border-radius: 1.25rem;
}
[data-platform="android"] .view-mode-btn {
  border-radius: 1.25rem;
}

/* Toast/snackbar — Material 3 snackbar style */
[data-platform="android"] .notification {
  border-radius: 0.5rem;
  margin: 0 1rem;
}

/* Page header */
[data-platform="android"] .page-header {
  border-radius: 1rem;
}

/* Checkbox/toggle — Material 3 switch */
[data-platform="android"] .toggle-switch {
  border-radius: 1rem;
}

/* Empty states — match card radius */
[data-platform="android"] .empty-state,
[data-platform="android"] .empty-state-full {
  border-radius: 1rem;
}

/* Info box — slightly rounder */
[data-platform="android"] .info-box {
  border-radius: 1rem;
}

/* Bills toolbar card */
[data-platform="android"] .bills-toolbar-card {
  border-radius: 1rem;
}