:root { color-scheme: light; }
    .safe-bottom { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
    .safe-top { padding-top: max(0.75rem, env(safe-area-inset-top)); }
    .tap { -webkit-tap-highlight-color: transparent; }

    /* Mobile rendering fixes */
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body { overflow-x: hidden; }

    /* App theme (CSS variables) */
    body {
      --app-bg: #020617;            /* slate-950 */
      --app-text: #e2e8f0;          /* slate-200 */
      --app-muted: #94a3b8;         /* slate-400 */
      --app-muted2: #64748b;        /* slate-500 */
      --app-surface: rgba(255,255,255,.05);
      --app-surface2: rgba(255,255,255,.06);
      --app-border: rgba(255,255,255,.10);
      --app-divider: rgba(255,255,255,.10);
      --app-backdrop: rgba(2,6,23,.78);

      /* Solid surface for sheets/popup (non-transparent) */
      --app-sheet: #0b1224;

      background: var(--app-bg);
      color: var(--app-text);
    }
    body.theme-light {
      --app-bg: #f8fafc;            /* slate-50 */
      --app-text: #0f172a;          /* slate-900 */
      --app-muted: #475569;         /* slate-600 */
      --app-muted2: #64748b;        /* slate-500 */
      --app-surface: rgba(15,23,42,.05);
      --app-surface2: rgba(15,23,42,.06);
      --app-border: rgba(15,23,42,.10);
      --app-divider: rgba(15,23,42,.10);
      --app-backdrop: rgba(248,250,252,.86);

      --app-sheet: #ffffff;
    }
html, body {
    max-width: 100%;
    overflow-x: hidden;
  }
    .app-header { background: var(--app-backdrop); border-bottom: 1px solid var(--app-border); }
    .nav-bar { background: var(--app-backdrop); border-top: 1px solid var(--app-border); backdrop-filter: blur(12px); }
    .app-card { background: var(--app-surface); border: 1px solid var(--app-border); }
    @keyframes bounce-soft {
      0% { transform: scale(1); }
      50% { transform: scale(1.15); }
      100% { transform: scale(1); }
    }
    .animate-bounce-soft { animation: bounce-soft 0.3s ease-out; }

    .sidebar-item.active {
      background: rgba(16, 185, 129, 0.1);
      color: #10b981;
      border-right: 4px solid #10b981;
      border-radius: 12px 0 0 12px;
    }

    @media (min-width: 768px) {
      #appShell {
        max-width: 1200px;
      }
      .sheet-panel {
        max-height: 85vh;
        width: 640px;
        border-radius: 24px !important;
      }
      #sheet.sheet, #budgetSheet.sheet, #advisorSheet.sheet, #menuSheet.sheet, #userSheet.sheet, #accountsSheet.sheet, #accountDetailSheet.sheet, #adminSheet.sheet {
        position: fixed;
        display: flex;
        align-items: center;
        justify-content: center;
        inset: 0;
        transform: translateY(20px);
      }
      #sheet.sheet.open, #budgetSheet.sheet.open, #advisorSheet.sheet.open, #menuSheet.sheet.open, #userSheet.sheet.open, #accountsSheet.sheet.open, #accountDetailSheet.sheet.open, #adminSheet.sheet.open {
        transform: translateY(0);
      }
    }
    
    .budget-progress-bg {
      height: 8px;
      border-radius: 4px;
      background: linear-gradient(to right, #10b981, #f59e0b, #ef4444);
      position: relative;
    }
    .budget-dot {
      width: 14px;
      height: 14px;
      background: white;
      border: 2px solid #1e293b;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      transition: left 0.3s ease;
    }
    .app-chip { background: var(--app-surface2); border: 1px solid var(--app-border); color: var(--app-text); }
    .app-input { background: var(--app-surface2); border: 1px solid var(--app-border); color: var(--app-text); }
    .app-divider { border-color: var(--app-divider); }
    .app-muted { color: var(--app-muted); }
    .app-muted2 { color: var(--app-muted2); }

    /* Opaque surfaces */
    .app-card-opaque {
      background: var(--app-sheet);
      border: 1px solid rgba(255,255,255,.12);
    }
    body.theme-light .app-card-opaque {
      background: var(--app-sheet);
      border: 1px solid rgba(15,23,42,.12);
    }

    ::placeholder { color: color-mix(in srgb, var(--app-muted2) 85%, transparent); }

    /* Bottom sheet animation */
    .sheet-backdrop { opacity: 0; pointer-events: none; transition: opacity .18s ease; }
    .sheet-backdrop.open { opacity: 1; pointer-events: auto; }
    .sheet { transform: translateY(16px); opacity: 0; pointer-events: none; transition: transform .18s ease, opacity .18s ease; }
    .sheet.open { transform: translateY(0); opacity: 1; pointer-events: auto; }

    /* Initial Loading Overlay */
    #loadingOverlay {
      position: fixed; inset: 0; z-index: 100;
      background: var(--app-bg);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      transition: opacity 0.5s ease, visibility 0.5s ease;
    }
    .loading-logo {
      width: 80px; height: 80px;
      background: var(--brand-grad);
      border-radius: 24px;
      display: flex; align-items: center; justify-content: center;
      box-shadow: var(--brand-shadow);
      animation: pulse-logo 2s infinite ease-in-out;
    }
    @keyframes pulse-logo {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.1); opacity: 0.8; }
    }

    /* Sheet layout */
    .sheet-panel { max-height: min(92dvh, 760px); overflow: hidden; display: flex; flex-direction: column; background: var(--app-sheet); }
    .sheet-head {
      position: sticky;
      top: 0;
      z-index: 2;
      background: var(--app-sheet);
      border-bottom: 1px solid var(--app-border);
    }
    .sheet-body { overflow: auto; -webkit-overflow-scrolling: touch; }

    /* Make cards inside sheets readable (solid, non-transparent) */
    .sheet-panel .app-card {
      background: color-mix(in srgb, var(--app-sheet) 92%, var(--app-bg) 8%);
      border: 1px solid var(--app-border);
    }

    /* Skeleton shimmer */
    @keyframes shimmer { 0%{background-position: -200% 0} 100%{background-position: 200% 0} }
    .skeleton { background: linear-gradient(90deg, rgba(148,163,184,.20) 25%, rgba(148,163,184,.35) 37%, rgba(148,163,184,.20) 63%); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
    body.theme-light .skeleton { background: linear-gradient(90deg, rgba(15,23,42,.10) 25%, rgba(15,23,42,.18) 37%, rgba(15,23,42,.10) 63%); }

    input[type="file"] { color: var(--app-text); }

    /* =========================
       Brand theme: Blue → Green
       - Dominant: blue
       - Actions: green / blue-green gradient
       ========================= */
    body {
      --brand-blue: rgba(14,165,233,.95);   /* sky-500 */
      --brand-green: rgba(16,185,129,.92); /* emerald-500 */
      --brand-grad: linear-gradient(135deg, rgba(14,165,233,.95), rgba(16,185,129,.92));
      --brand-blue-soft: rgba(14,165,233,.14);
      --brand-green-soft: rgba(16,185,129,.14);
      --brand-border: rgba(52,211,153,.28);
      --brand-shadow: 0 12px 28px rgba(16,185,129,.22);

      /* subtle background accents */
      background-image:
        radial-gradient(900px circle at 10% -10%, rgba(14,165,233,.18), transparent 55%),
        radial-gradient(900px circle at 110% 0%, rgba(16,185,129,.14), transparent 55%);
      background-attachment: fixed;
    }
    body.theme-light {
      --brand-blue: rgba(14,165,233,.95);
      --brand-green: rgba(16,185,129,.92);
      --brand-grad: linear-gradient(135deg, rgba(14,165,233,.92), rgba(16,185,129,.90));
      --brand-blue-soft: rgba(14,165,233,.12);
      --brand-green-soft: rgba(16,185,129,.12);
      --brand-border: rgba(16,185,129,.25);
      --brand-shadow: 0 10px 22px rgba(16,185,129,.18);

      background-image:
        radial-gradient(900px circle at 10% -10%, rgba(14,165,233,.10), transparent 55%),
        radial-gradient(900px circle at 110% 0%, rgba(16,185,129,.10), transparent 55%);
    }

    .app-header {
      background-image: linear-gradient(135deg, rgba(14,165,233,.10), rgba(16,185,129,.08));
      backdrop-filter: blur(20px);
    }

    #appShell { transition: all 0.3s ease; }

    /* Primary actions: green */
    #fab {
      background: var(--brand-green) !important;
      border: 1px solid rgba(167,243,208,.35) !important;
      box-shadow: var(--brand-shadow) !important;
    }

    #btnAuthSubmit,
    #btnParse,
    #btnSaveManual,
    #btnSaveReceiptAuto,
    #btnSaveBudget,
    #btnSaveGemini,
    #btnSaveUser,
    #btnUpdateTx,
    #btnApplyRange,
    #btnApplyAIBudget,
    #btnGenerateInsights,
    #btnOpenQuick,
    #btnAddAccount,
    #btnAccAddMoney,
    #btnAccAddTx {
      background: var(--brand-green) !important;
      color: white !important;
      border: 1px solid rgba(167,243,208,.35) !important;
    }

    /* Secondary action (transfer/move money) keep blue */
    #btnAccMoveMoney {
      background: rgba(14,165,233,.85) !important;
      color: white !important;
      border: 1px solid rgba(125,211,252,.35) !important;
    }

    /* Reports: blue→green gradient */
    #btnPrintReport {
      background: var(--brand-grad) !important;
      border: 1px solid rgba(125,211,252,.35) !important;
    }

    /* Blue accents */
    #btnPeriodToggle {
      background: var(--brand-blue-soft) !important;
      color: color-mix(in srgb, var(--brand-blue) 88%, white) !important;
      border: 1px solid rgba(56,189,248,.30) !important;
    }
    #userBadge {
      background: rgba(14,165,233,.16) !important;
      color: rgba(125,211,252,.95) !important;
    }
    #appLogo {
      background: linear-gradient(135deg, rgba(14,165,233,.16), rgba(16,185,129,.14)) !important;
      border: 1px solid rgba(56,189,248,.22) !important;
    }

    /* Budget CTA: green tinted */
    #btnEditBudget {
      background: rgba(16,185,129,.15) !important;
      color: rgba(167,243,208,.95) !important;
      border: 1px solid rgba(52,211,153,.25) !important;
    }

    /* Admin branding save stays blue */
    #btnSaveLogo {
      background: var(--brand-blue) !important;
      border: 1px solid rgba(125,211,252,.35) !important;
      color: white !important;
    }

    @media (prefers-reduced-motion: reduce) {
      .sheet-backdrop, .sheet { transition: none; }
      .skeleton { animation: none; }
    }

    /* PWA standalone tweaks */
    @media all and (display-mode: standalone) {
      body { min-height: 100vh; }
    }

    /* Prevent horizontal overflow (common cause of mobile zoom/layout issues) */
    canvas { max-width: 100% !important; }

    /* Tutorial overlay animation */
    @keyframes popIn { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
    #tourBubble { animation: popIn .18s ease; }