/* =============================================
  CSS CUSTOM PROPERTIES — DARK (default)
  ============================================= */

  :root, [data-theme="dark"] {
    --bg:                  #08080e;
    --surface:             rgba(255,255,255,0.04);
    --surface-2:           rgba(255,255,255,0.07);
    --border:              rgba(255,255,255,0.07);
    --border-mid:          rgba(255,255,255,0.14);
    --text-1:              #e2e8f0;
    --text-2:              rgba(226,232,240,0.5);
    --text-3:              rgba(226,232,240,0.28);
    --c-blue:              #60a5fa;
    --c-blue-bg:           rgba(96,165,250,0.1);
    --c-pink:              #f472b6;
    --c-pink-bg:           rgba(244,114,182,0.1);
    --c-indigo:            #a5b4fc;
    --c-indigo-bg:         rgba(99,102,241,0.15);
    --c-indigo-border:     rgba(99,102,241,0.45);
    --c-green:             #34d399;
    --c-delete:            rgba(248,113,113,0.65);
    --c-link:              rgba(165,180,252,0.65);
    --nav-bg:              rgba(8,8,14,0.92);
    --nav-border:          rgba(255,255,255,0.07);
    --input-bg:            rgba(255,255,255,0.05);
    --input-border:        rgba(255,255,255,0.08);
    --input-text:          rgba(226,232,240,0.85);
    --modal-bg:            #0f0f1a;
    --color-scheme:        dark;
    /* Settlement card backgrounds */
    --sett-indigo-bg:      linear-gradient(135deg,#1e1b4b,#2e1065);
    --sett-indigo-glow:    rgba(99,102,241,0.3);
    --sett-pink-bg:        linear-gradient(135deg,#4a044e,#831843);
    --sett-pink-glow:      rgba(244,114,182,0.25);
    --sett-green-bg:       linear-gradient(135deg,#064e3b,#065f46);
    --sett-green-glow:     rgba(16,185,129,0.25);
    --sett-empty-bg:       linear-gradient(135deg,#1e1b2e,#16162a);
    /* Settlement text */
    --sett-indigo-text:    #ffffff;
    --sett-indigo-label:   rgba(255,255,255,0.65);
    --sett-indigo-sub:     rgba(255,255,255,0.35);
    --sett-pink-text:      #ffffff;
    --sett-pink-label:     rgba(255,255,255,0.65);
    --sett-pink-sub:       rgba(255,255,255,0.35);
    --sett-green-text:     #ffffff;
    --sett-green-label:    rgba(255,255,255,0.65);
    --sett-green-sub:      rgba(255,255,255,0.35);
    --sett-empty-text:     rgba(226,232,240,0.4);
    --sett-empty-label:    rgba(226,232,240,0.3);
    --sett-empty-sub:      rgba(226,232,240,0.18);
   }
   
   /* =============================================
     CSS CUSTOM PROPERTIES — LIGHT
     ============================================= */
   
   [data-theme="light"] {
    --bg:                  #f1f5f9;
    --surface:             #ffffff;
    --surface-2:           #f8fafc;
    --border:              #e2e8f0;
    --border-mid:          #cbd5e1;
    --text-1:              #1e293b;
    --text-2:              #64748b;
    --text-3:              #94a3b8;
    --c-blue:              #3b82f6;
    --c-blue-bg:           #eff6ff;
    --c-pink:              #ec4899;
    --c-pink-bg:           #fdf2f8;
    --c-indigo:            #6366f1;
    --c-indigo-bg:         #eef2ff;
    --c-indigo-border:     #6366f1;
    --c-green:             #059669;
    --c-delete:            #dc2626;
    --c-link:              #6366f1;
    --nav-bg:              rgba(255,255,255,0.95);
    --nav-border:          #e2e8f0;
    --input-bg:            #f8fafc;
    --input-border:        #e2e8f0;
    --input-text:          #1e293b;
    --modal-bg:            #ffffff;
    --color-scheme:        light;
    /* Settlement card backgrounds */
    --sett-indigo-bg:      linear-gradient(135deg,#eef2ff,#e0e7ff);
    --sett-indigo-glow:    rgba(99,102,241,0.12);
    --sett-pink-bg:        linear-gradient(135deg,#fdf2f8,#fce7f3);
    --sett-pink-glow:      rgba(236,72,153,0.12);
    --sett-green-bg:       linear-gradient(135deg,#f0fdf4,#dcfce7);
    --sett-green-glow:     rgba(16,185,129,0.12);
    --sett-empty-bg:       linear-gradient(135deg,#f8fafc,#f1f5f9);
    /* Settlement text */
    --sett-indigo-text:    #3730a3;
    --sett-indigo-label:   #6366f1;
    --sett-indigo-sub:     rgba(55,48,163,0.6);
    --sett-pink-text:      #9d174d;
    --sett-pink-label:     #db2777;
    --sett-pink-sub:       rgba(157,23,77,0.6);
    --sett-green-text:     #064e3b;
    --sett-green-label:    #059669;
    --sett-green-sub:      rgba(6,78,59,0.65);
    --sett-empty-text:     #64748b;
    --sett-empty-label:    #94a3b8;
    --sett-empty-sub:      #cbd5e1;
   }
   
   /* =============================================
     BASE
     ============================================= */
   
   * {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
   }
   
   html { background: var(--bg); }
   
   body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text-1);
    overscroll-behavior: none;
    transition: background 0.25s ease, color 0.2s ease;
   }
   
   .app-shell {
    background: var(--bg);
    transition: background 0.25s ease;
   }
   
   /* =============================================
     UTILITY CLASSES  (use these in JS-rendered HTML)
     ============================================= */
   
   .label-sm {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
   }
   
   .c-text-1   { color: var(--text-1); }
   .c-text-2   { color: var(--text-2); }
   .c-text-3   { color: var(--text-3); }
   .c-blue     { color: var(--c-blue); }
   .c-pink     { color: var(--c-pink); }
   .c-indigo   { color: var(--c-indigo); }
   .c-green    { color: var(--c-green); }
   .c-delete   { color: var(--c-delete); }
   .c-link     { color: var(--c-link); }
   .c-surface  { background: var(--surface);   border: 1px solid var(--border); }
   .c-surface-2{ background: var(--surface-2); }
   .c-blue-bg  { background: var(--c-blue-bg); }
   .c-pink-bg  { background: var(--c-pink-bg); }
   .c-icon-bg  { background: var(--surface-2); }
   
   /* =============================================
     LIGHT MODE: OVERRIDE TAILWIND WHITE CLASSES
     ============================================= */
   
   [data-theme="light"] .text-white           { color: var(--text-1) !important; }
   [data-theme="light"] .text-white\/80       { color: rgba(30,41,59,0.85) !important; }
   [data-theme="light"] .text-white\/70       { color: rgba(30,41,59,0.75) !important; }
   [data-theme="light"] .text-white\/60       { color: rgba(30,41,59,0.65) !important; }
   [data-theme="light"] .text-white\/50       { color: rgba(30,41,59,0.55) !important; }
   [data-theme="light"] .text-white\/40       { color: rgba(30,41,59,0.45) !important; }
   [data-theme="light"] .text-white\/30       { color: rgba(30,41,59,0.38) !important; }
   [data-theme="light"] .text-white\/20       { color: rgba(30,41,59,0.25) !important; }
   [data-theme="light"] .text-white\/10       { color: rgba(30,41,59,0.15) !important; }
   [data-theme="light"] .bg-white\/5          { background: rgba(0,0,0,0.025) !important; }
   [data-theme="light"] .border-white\/8      { border-color: rgba(0,0,0,0.09) !important; }
   [data-theme="light"] .border-white\/10     { border-color: rgba(0,0,0,0.11) !important; }
   [data-theme="light"] .h-px.bg-white\/5     { background: var(--border) !important; }
   
   /* Inputs */
   [data-theme="light"] #inp-amount {
    color: var(--text-1) !important;
   }
   [data-theme="light"] #inp-amount::placeholder { color: var(--text-3) !important; }
   [data-theme="light"] #inp-desc,
   [data-theme="light"] #inp-date {
    background: var(--input-bg) !important;
    color: var(--input-text) !important;
    border-color: var(--input-border) !important;
   }
   [data-theme="light"] #inp-desc::placeholder  { color: var(--text-3) !important; }
   [data-theme="light"] #inp-custom-a { color: var(--c-blue) !important; border-color: rgba(59,130,246,0.4) !important; }
   [data-theme="light"] #inp-custom-r { color: var(--c-pink) !important; border-color: rgba(236,72,153,0.4) !important; }
   [data-theme="light"] #custom-total { color: var(--text-2) !important; }
   [data-theme="light"] #custom-split-inputs {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
   }
   
   /* =============================================
     GLASS CARD
     ============================================= */
   
   .glass-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    transition: background 0.25s ease, border-color 0.25s ease;
   }
   
   [data-theme="light"] .glass-card {
    box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
   }
   
   /* =============================================
     AMOUNT CARD
     ============================================= */
   
   .amount-card {
    position: relative;
    overflow: hidden;
   }
   .amount-card::before {
    content: '';
    position: absolute;
    top: -40px; left: -40px;
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(99,102,241,0.1) 0%, transparent 70%);
    pointer-events: none;
   }
   
   /* =============================================
     SETTLEMENT HERO CARD + VARIANTS
     ============================================= */
   
   .settlement-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    transition: all 0.3s ease;
   }
   .settlement-hero::after {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
    pointer-events: none;
   }
   
   .sett-empty  { background: var(--sett-empty-bg)  !important; box-shadow: none !important; }
   .sett-green  { background: var(--sett-green-bg)  !important; box-shadow: 0 0 40px var(--sett-green-glow)  !important; }
   .sett-indigo { background: var(--sett-indigo-bg) !important; box-shadow: 0 0 40px var(--sett-indigo-glow) !important; }
   .sett-pink   { background: var(--sett-pink-bg)   !important; box-shadow: 0 0 40px var(--sett-pink-glow)   !important; }
   
   /* Settlement text — driven by CSS vars, overrides any Tailwind text-white on children */
   .sett-empty  .sett-amount { color: var(--sett-empty-text)   !important; }
   .sett-empty  .sett-label  { color: var(--sett-empty-label)  !important; }
   .sett-empty  .sett-sub    { color: var(--sett-empty-sub)    !important; }
   .sett-indigo .sett-amount { color: var(--sett-indigo-text)  !important; }
   .sett-indigo .sett-label  { color: var(--sett-indigo-label) !important; }
   .sett-indigo .sett-sub    { color: var(--sett-indigo-sub)   !important; }
   .sett-pink   .sett-amount { color: var(--sett-pink-text)    !important; }
   .sett-pink   .sett-label  { color: var(--sett-pink-label)   !important; }
   .sett-pink   .sett-sub    { color: var(--sett-pink-sub)     !important; }
   .sett-green  .sett-amount { color: var(--sett-green-text)   !important; }
   .sett-green  .sett-label  { color: var(--sett-green-label)  !important; }
   .sett-green  .sett-sub    { color: var(--sett-green-sub)    !important; }
   
   /* =============================================
     SCREEN
     ============================================= */
   
   .screen { animation: fadeSlideIn 0.2s ease; }
   
   @keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
   }
   
   /* =============================================
     THEME TOGGLE BUTTON
     ============================================= */
   
   .theme-toggle {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
   }
   .theme-toggle:hover  { background: var(--surface-2); border-color: var(--border-mid); transform: scale(1.06); }
   .theme-toggle:active { transform: scale(0.9); }
   
   /* =============================================
     BOTTOM NAV
     ============================================= */
   
   .bottom-nav {
    background: var(--nav-bg);
    border-top: 1px solid var(--nav-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding-bottom: env(safe-area-inset-bottom, 0);
    transition: background 0.25s ease, border-color 0.25s ease;
   }
   .nav-btn {
    color: var(--text-3);
    transition: color 0.15s, transform 0.12s;
   }
   .nav-btn:active { transform: scale(0.92); }
   .nav-btn.nav-active { color: var(--c-indigo); }
   [data-theme="dark"]  .nav-btn.nav-active .nav-icon { filter: drop-shadow(0 0 5px rgba(99,102,241,0.6)); }
   [data-theme="light"] .nav-btn.nav-active .nav-icon { filter: none; }
   .nav-btn .nav-label { font-size: 10px; letter-spacing: 0.03em; }
   
   /* =============================================
     SUBMIT BUTTON
     ============================================= */
   
   .submit-btn {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: 1px solid rgba(255,255,255,0.12);
    transition: all 0.15s;
   }
   [data-theme="dark"]  .submit-btn { box-shadow: 0 0 32px rgba(99,102,241,0.35), 0 4px 20px rgba(99,102,241,0.2); }
   [data-theme="light"] .submit-btn { box-shadow: 0 4px 16px rgba(99,102,241,0.3), 0 2px 8px rgba(99,102,241,0.15); border-color: transparent; }
   .submit-btn:hover    { filter: brightness(1.08); }
   .submit-btn:active   { transform: scale(0.97); filter: brightness(0.95); }
   .submit-btn:disabled { opacity: 0.3; box-shadow: none; }
   
   /* =============================================
     PAID BY BUTTONS
     ============================================= */
   
   .paidby-btn {
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-3);
    transition: all 0.15s;
   }
   .paidby-active {
    background: var(--c-indigo-bg) !important;
    border-color: var(--c-indigo-border) !important;
    color: var(--c-indigo) !important;
   }
   [data-theme="dark"] .paidby-active { box-shadow: 0 0 16px rgba(99,102,241,0.15); }
   
   /* =============================================
     CATEGORY CHIPS
     ============================================= */
   
   .chip-btn {
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    transition: all 0.15s;
   }
   .chip-btn:active { transform: scale(0.93); }
   .chip-active {
    background: var(--c-indigo-bg) !important;
    border-color: var(--c-indigo-border) !important;
    color: var(--c-indigo) !important;
   }
   [data-theme="dark"] .chip-active { box-shadow: 0 0 12px rgba(99,102,241,0.12); }
   
   /* =============================================
     SPLIT CHIPS
     ============================================= */
   
   .split-btn {
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-2);
    border-radius: 12px;
    padding: 8px 4px;
    text-align: center;
    transition: all 0.15s;
   }
   .split-btn:active { transform: scale(0.93); }
   .split-active {
    background: var(--c-indigo-bg) !important;
    border-color: var(--c-indigo-border) !important;
    color: var(--c-indigo) !important;
   }
   [data-theme="dark"] .split-active { box-shadow: 0 0 12px rgba(99,102,241,0.12); }
   
   /* =============================================
     MONTH TABS
     ============================================= */
   
   .month-tab {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-2);
    white-space: nowrap;
    transition: all 0.15s;
   }
   .month-tab-active {
    background: var(--c-indigo-bg) !important;
    border-color: var(--c-indigo-border) !important;
    color: var(--c-indigo) !important;
    font-weight: 700;
   }
   [data-theme="dark"]  .month-tab-active { box-shadow: 0 0 16px rgba(99,102,241,0.2); }
   [data-theme="light"] .month-tab-active { box-shadow: 0 2px 8px rgba(99,102,241,0.15); }
   
   /* =============================================
     EXPENSE CARD
     ============================================= */
   
   .expense-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    transition: border-color 0.15s, background 0.25s ease;
    touch-action: pan-y;
    user-select: none;
   }
   .expense-card:hover { border-color: var(--border-mid); }
   [data-theme="light"] .expense-card {
    box-shadow: 0 1px 4px rgba(0,0,0,0.05), 0 2px 8px rgba(0,0,0,0.03);
   }
   
   /* =============================================
     CATEGORY GROUP ACCORDION
     ============================================= */
   
   .group-chevron {
    font-size: 10px;
    color: var(--text-3);
    transition: transform 0.2s ease;
   }
   
   /* =============================================
     MODAL
     ============================================= */
   
   .modal-cancel {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-2);
    transition: all 0.15s;
   }
   .modal-cancel:hover { border-color: var(--border-mid); }
   
   .modal-sheet {
    background: var(--modal-bg);
    border: 1px solid var(--border);
    border-bottom: none;
    transition: background 0.25s ease;
   }
   [data-theme="dark"]  .modal-sheet { box-shadow: 0 -20px 60px rgba(0,0,0,0.6); }
   [data-theme="light"] .modal-sheet { box-shadow: 0 -4px 24px rgba(0,0,0,0.1); }
   
   /* =============================================
     INPUTS
     ============================================= */
   
   #inp-date { color-scheme: var(--color-scheme); }
   input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.4; cursor: pointer; }
   
   #inp-amount::-webkit-outer-spin-button,
   #inp-amount::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
   #inp-amount[type=number] { -moz-appearance: textfield; }
   
   /* =============================================
     SCROLLBAR
     ============================================= */
   
   ::-webkit-scrollbar { width: 3px; height: 3px; }
   ::-webkit-scrollbar-track { background: transparent; }
   ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
   
   /* =============================================
     SAFE AREA
     ============================================= */
   
   .screen { padding-top: env(safe-area-inset-top, 0); }