/* Variables for Light Theme */
    :root {
      --bg: #F2F4F7;
      --surface: #FFFFFF;
      --primary: #4F46E5; /* Indigo */
      --primary-soft: #E0E7FF;
      --success: #10B981; /* Emerald */
      --success-soft: #D1FAE5;
      --danger: #F43F5E; /* Rose */
      --danger-soft: #FFE4E6;
      --warning: #F59E0B; /* Amber */
      --warning-soft: #FEF3C7;
      --text-main: #0F172A;
      --text-muted: #64748B;
      --border-color: #E2E8F0;
      --nav-bg: rgba(255, 255, 255, 0.95);
      
      --radius-sm: 12px;
      --radius-md: 20px;
      --radius-lg: 32px;
      --shadow: 0 10px 40px -10px rgba(0,0,0,0.08);
      --font: 'Plus Jakarta Sans', sans-serif;
    }

    /* Variables for Dark Theme */
    [data-theme="dark"] {
      --bg: #0F172A;
      --surface: #1E293B;
      --primary: #6366F1;
      --primary-soft: rgba(99, 102, 241, 0.2);
      --success: #34D399;
      --success-soft: rgba(52, 211, 153, 0.2);
      --danger: #FB7185;
      --danger-soft: rgba(251, 113, 133, 0.2);
      --warning: #FBBF24;
      --warning-soft: rgba(251, 191, 36, 0.2);
      --text-main: #F8FAFC;
      --text-muted: #94A3B8;
      --border-color: #334155;
      --nav-bg: rgba(30, 41, 59, 0.95);
      --shadow: 0 10px 40px -10px rgba(0,0,0,0.5);
    }

    * { margin: 0; padding: 0; box-sizing: border-box; font-family: var(--font); -webkit-tap-highlight-color: transparent; }
    
    body { background-color: var(--bg); display: flex; justify-content: center; color: var(--text-main); transition: background 0.3s, color 0.3s; margin: 0; height: 100vh; overflow: hidden; }

    /* Dashboard Layout */
    .app-container {
      width: 100%; max-width: 1200px; background-color: var(--bg); height: 100vh;
      display: flex; flex-direction: row; box-shadow: var(--shadow);
      transition: background-color 0.3s; overflow: hidden;
    }

    /* Sidebar */
    .sidebar {
      width: 260px; background: var(--surface); border-right: 1px solid var(--border-color);
      display: flex; flex-direction: column; padding: 24px; transition: background 0.3s, border-color 0.3s;
      z-index: 100;
    }
    .sidebar-brand {
      font-size: 1.4rem; font-weight: 800; color: var(--primary); margin-bottom: 40px;
      display: flex; align-items: center; gap: 12px;
    }
    .btn-sidebar-add {
      width: 100%; padding: 16px; background: var(--primary); color: white;
      border: none; border-radius: var(--radius-md); font-size: 1rem; font-weight: 800;
      margin-bottom: 30px; cursor: pointer; box-shadow: 0 10px 20px rgba(79, 70, 229, 0.3);
      display: flex; align-items: center; justify-content: center; gap: 10px; transition: 0.3s;
    }
    .btn-sidebar-add:hover { transform: translateY(-2px); box-shadow: 0 15px 25px rgba(79, 70, 229, 0.4); }
    
    .nav-item {
      display: flex; align-items: center; gap: 15px; padding: 15px 20px;
      color: var(--text-muted); font-weight: 700; border-radius: var(--radius-md);
      cursor: pointer; transition: 0.3s; margin-bottom: 8px; font-size: 0.95rem; width: 100%;
    }
    .nav-item i { font-size: 1.2rem; width: 24px; text-align: center; }
    .nav-item:hover { background: var(--bg); }
    .nav-item.active { background: var(--primary); color: white; box-shadow: 0 10px 20px rgba(79,70,229,0.3); }
    [data-theme="dark"] .nav-item.active { box-shadow: 0 10px 20px rgba(99,102,241,0.2); }

    /* Main Content Area */
    .main-content {
      flex: 1; overflow-y: auto; position: relative; background: var(--bg);
      transition: background 0.3s; padding-bottom: 40px;
    }
    .content-wrapper {
      max-width: 800px; margin: 0 auto; padding: 0 24px;
    }

    @media (max-width: 768px) {
      .sidebar { width: 80px; padding: 24px 10px; align-items: center; }
      .sidebar-brand span { display: none; }
      .sidebar-brand i { font-size: 2rem; margin: 0; }
      .nav-item { padding: 15px; justify-content: center; }
      .nav-item span { display: none; }
      .nav-item i { margin: 0; }
      .btn-sidebar-add { width: 50px; height: 50px; border-radius: 50%; padding: 0; margin-bottom: 30px;}
      .btn-sidebar-add span { display: none; }
      .content-wrapper { padding: 0; }
    }

    /* Header */
    .header {
      padding: 24px 24px 10px 24px; display: flex; justify-content: space-between; align-items: center;
      position: sticky; top: 0; background: var(--nav-bg); backdrop-filter: blur(10px); z-index: 50;
      transition: background 0.3s;
    }
    .user-greeting p { color: var(--text-muted); font-size: 0.85rem; font-weight: 500; }
    .user-greeting h1 { color: var(--text-main); font-size: 1.4rem; font-weight: 800; letter-spacing: -0.5px; }
    .profile-pic { width: 45px; height: 45px; background: var(--primary-soft); color: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 700; }

    /* Views */
    .view { display: none; padding: 15px 24px; animation: fadeIn 0.3s ease; }
    .view.active { display: block; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

    /* Bento Cards */
    .bento-card { background: var(--surface); border-radius: var(--radius-md); padding: 20px; box-shadow: var(--shadow); margin-bottom: 16px; transition: background 0.3s; }
    
    /* Balance Card */
    .balance-card {
      background: linear-gradient(135deg, #1E293B, #0F172A); color: white;
      border-radius: var(--radius-lg); padding: 24px; position: relative; overflow: hidden; margin-bottom: 16px;
    }
    [data-theme="dark"] .balance-card { background: linear-gradient(135deg, var(--primary), #4338CA); }
    .balance-card::after {
      content: ''; position: absolute; width: 150px; height: 150px; background: var(--primary);
      border-radius: 50%; top: -50px; right: -50px; filter: blur(50px); opacity: 0.5;
    }
    .balance-label { font-size: 0.85rem; color: #cbd5e1; font-weight: 500; margin-bottom: 5px; }
    .balance-amount { font-size: 2.2rem; font-weight: 800; letter-spacing: -1px; margin-bottom: 20px; }
    .balance-stats { display: flex; gap: 15px; }
    .stat-pill { background: rgba(255,255,255,0.1); padding: 10px 15px; border-radius: var(--radius-sm); flex: 1; backdrop-filter: blur(5px); }
    .stat-pill span { display: block; font-size: 0.75rem; color: #e2e8f0; margin-bottom: 3px; }
    .stat-pill strong { font-size: 0.95rem; }
    .text-green { color: #34D399; }
    .text-red { color: #FB7185; }

    .section-title { font-size: 1.1rem; font-weight: 700; color: var(--text-main); margin: 24px 0 12px 0; display: flex; justify-content: space-between; align-items: center; }

    /* Transactions */
    .tx-item {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px; background: var(--surface); border-radius: var(--radius-md); margin-bottom: 12px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.03); transition: background 0.3s;
    }
    .tx-icon { width: 48px; height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-right: 15px; }
    .icon-income { background: var(--success-soft); color: var(--success); }
    .icon-expense { background: var(--danger-soft); color: var(--danger); }
    .icon-transfer { background: var(--warning-soft); color: var(--warning); }
    .icon-debt { background: var(--primary-soft); color: var(--primary); }
    
    .tx-details { flex: 1; }
    .tx-title { font-weight: 700; color: var(--text-main); font-size: 0.95rem; margin-bottom: 4px; }
    .tx-sub { font-size: 0.75rem; color: var(--text-muted); font-weight: 500; }
    .tx-amount { font-weight: 800; font-size: 1rem; text-align: right; }

    /* Budget */
    .budget-item { margin-bottom: 20px; }
    .budget-header { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.9rem; font-weight: 700; color: var(--text-main); }
    .budget-sub { font-size: 0.75rem; color: var(--text-muted); font-weight: 500; }
    .progress-bg { width: 100%; height: 12px; background: var(--border-color); border-radius: 10px; overflow: hidden; }
    .progress-bar { height: 100%; border-radius: 10px; transition: width 0.5s ease; }
    
    /* Wallet */
    .wallet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
    .wallet-card { background: var(--surface); padding: 20px; border-radius: var(--radius-md); box-shadow: var(--shadow); position: relative; transition: background 0.3s; }
    .wallet-name { font-size: 0.9rem; font-weight: 700; color: var(--text-muted); margin-bottom: 10px; display: flex; align-items: center; gap: 8px;}
    .wallet-bal { font-size: 1.2rem; font-weight: 800; color: var(--text-main); }
    .btn-edit-wallet { position: absolute; top: 15px; right: 15px; background: none; border: none; color: var(--text-muted); cursor: pointer; }

    /* Modals & Forms */
    .modal-overlay {
      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px);
      z-index: 200; display: none; align-items: center; justify-content: center;
      padding: 20px;
    }
    .modal-content {
      background: var(--surface); width: 100%; max-width: 480px;
      border-radius: var(--radius-lg); padding: 30px 24px 30px 24px;
      animation: popIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      transition: background 0.3s;
      max-height: 90vh; overflow-y: auto;
    }
    /* V10.0 — auth OTP must sit above the full-screen login overlay (z-index 500). */
    #modal-auth-otp, #modal-password-recovery { z-index: 760; }
    #modal-auth-otp .modal-content, #modal-password-recovery .modal-content { box-shadow: 0 30px 80px -28px rgba(0,0,0,.65); }
    .auth-pending-otp {
      display:none; margin:10px auto 0; width:100%; max-width:500px; text-align:center;
    }
    .auth-pending-otp.show { display:block; }
    .auth-pending-otp button {
      width:100%; border:1px solid rgba(255,255,255,.42); background:rgba(255,255,255,.14); color:#fff;
      border-radius:14px; padding:11px 14px; font-weight:800; cursor:pointer; backdrop-filter:blur(10px);
      transition:transform .16s ease, background .16s ease;
    }
    .auth-pending-otp button:hover { background:rgba(255,255,255,.20); }
    .auth-pending-otp button:active { transform:scale(.985); }
    .auth-pending-otp small { display:block; margin-top:6px; color:rgba(255,255,255,.82); font-size:.68rem; line-height:1.45; }
    @keyframes popIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
    
    .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
    .modal-header h2 { font-size: 1.2rem; font-weight: 800; color: var(--text-main); }
    .close-btn { background: var(--border-color); border: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-weight: bold; color: var(--text-muted); }

    .form-group { margin-bottom: 16px; }
    .form-label { display: block; font-size: 0.8rem; font-weight: 700; color: var(--text-muted); margin-bottom: 8px; }
    .form-control {
      width: 100%; padding: 16px; background: var(--bg); border: 2px solid transparent;
      border-radius: var(--radius-sm); font-size: 1rem; font-weight: 600; color: var(--text-main);
      transition: border 0.3s, background 0.3s, color 0.3s;
    }
    .form-control:focus { border-color: var(--primary); outline: none; }
    
    .type-selector { display: flex; gap: 10px; margin-bottom: 20px; overflow-x: auto; padding-bottom: 5px; }
    .type-btn {
      padding: 12px 20px; background: var(--bg); border: 2px solid transparent; border-radius: var(--radius-sm);
      font-weight: 700; font-size: 0.85rem; color: var(--text-muted); cursor: pointer; white-space: nowrap;
      transition: background 0.3s, color 0.3s;
    }
    .type-btn.active { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
       .btn-submit {
      width: 100%; padding: 18px; background: var(--primary); color: white;
      border: none; border-radius: var(--radius-md); font-size: 1rem; font-weight: 800;
      margin-top: 10px; cursor: pointer; box-shadow: 0 10px 20px rgba(79, 70, 229, 0.3);
      transition: 0.3s;
    }
    .btn-submit:hover { transform: translateY(-2px); box-shadow: 0 15px 25px rgba(79, 70, 229, 0.4); }

    /* Toggle Switch */
    .switch { position: relative; display: inline-block; width: 50px; height: 28px; }
    .switch input { opacity: 0; width: 0; height: 0; }
    .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e1; transition: .4s; border-radius: 34px; }
    .slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
    input:checked + .slider { background-color: var(--primary); }
    input:checked + .slider:before { transform: translateX(22px); }
    [data-theme="dark"] .slider { background-color: #475569; }
    [data-theme="dark"] input:checked + .slider { background-color: var(--primary); }
    
    /* AI Eval Card */
    .ai-history-card { background: var(--bg); padding: 15px; border-radius: var(--radius-md); margin-bottom: 10px; cursor: pointer; transition: 0.3s;}
    .ai-history-card:hover { transform: scale(1.02); background: var(--primary-soft); }


    /* ===== 2026 RESPONSIVE, CUSTOM THEME, LOGIN & AI CHAT UPDATE ===== */
    html, body {
      width: 100%;
      min-height: 100%;
      overscroll-behavior: none;
      overflow-x: hidden;
    }
    body {
      height: 100dvh;
      min-height: 100dvh;
      background-image: var(--wallpaper-image, none);
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
    }
    button, input, select, textarea { font: inherit; }
    img, canvas, svg { max-width: 100%; }
    .app-container { max-width: none; height: 100dvh; min-height: 100dvh; }
    .main-content {
      min-width: 0;
      overscroll-behavior-y: contain;
      overscroll-behavior-x: none;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
      overflow-x: hidden;
    }
    .content-wrapper, .view, .bento-card, .tx-item { min-width: 0; max-width: 100%; }
    .tx-details { min-width: 0; }
    .tx-title, .tx-sub, .wallet-name, .budget-header span { overflow-wrap: anywhere; }
    .tx-amount { flex: 0 0 auto; max-width: 44%; overflow-wrap: anywhere; }
    .chart-wrap { position: relative; min-height: 260px; }
    .chart-breakdown { display: grid; gap: 8px; margin-top: 16px; }
    .chart-row {
      display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center;
      background: var(--bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 11px 12px;
    }
    .chart-row-main { min-width: 0; }
    .chart-row-name { font-size: .84rem; font-weight: 800; overflow-wrap: anywhere; }
    .chart-row-meta { color: var(--text-muted); font-size: .72rem; margin-top: 3px; }
    .chart-row-amount { font-weight: 800; font-size: .86rem; text-align: right; }
    .chart-row-alert { color: var(--danger); font-weight: 800; }

    .mobile-fab { display: none; }
    .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .color-field { display: grid; grid-template-columns: 1fr 46px; gap: 10px; align-items: center; }
    .color-field input[type="color"] { width: 46px; height: 42px; padding: 2px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; }
    .wallpaper-preview {
      min-height: 90px; border: 1px dashed var(--border-color); border-radius: 14px; background: var(--bg);
      background-size: cover; background-position: center; display: grid; place-items: center; color: var(--text-muted);
      padding: 12px; text-align: center; font-size: .8rem;
    }
    .inline-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .btn-secondary {
      border: 1px solid var(--border-color); background: var(--surface); color: var(--text-main);
      padding: 11px 14px; border-radius: 12px; font-weight: 800; cursor: pointer;
    }

    .ai-shell { display: grid; grid-template-rows: auto minmax(320px, 1fr) auto; gap: 12px; }
    .ai-shell, .ai-status, .ai-quick-prompts, .ai-form { min-width: 0; max-width: 100%; }
    .ai-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .ai-status > div { min-width: 0; }
    .ai-status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--warning); display: inline-block; margin-right: 6px; }
    .ai-status-dot.online { background: var(--success); }
    .ai-chat-log {
      height: min(55vh, 520px); overflow-y: auto; overscroll-behavior: contain; padding: 14px;
      background: var(--bg); border: 1px solid var(--border-color); border-radius: var(--radius-md);
    }
    .ai-message { display: flex; margin-bottom: 12px; }
    .ai-message.user { justify-content: flex-end; }
    .ai-bubble {
      max-width: min(88%, 680px); padding: 12px 14px; border-radius: 16px; white-space: pre-wrap;
      overflow-wrap: anywhere; line-height: 1.55; font-size: .9rem;
    }
    .ai-message.user .ai-bubble { background: var(--primary); color: white; border-bottom-right-radius: 5px; }
    .ai-message.assistant .ai-bubble { background: var(--surface); color: var(--text-main); border: 1px solid var(--border-color); border-bottom-left-radius: 5px; }
    .ai-quick-prompts { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
    .ai-quick-prompts::-webkit-scrollbar { display: none; }
    .ai-chip { white-space: nowrap; border: 1px solid var(--border-color); background: var(--surface); color: var(--primary); padding: 9px 12px; border-radius: 999px; font-size: .78rem; font-weight: 800; cursor: pointer; }
    .ai-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
    .ai-form textarea { min-width: 0; width: 100%; min-height: 54px; max-height: 150px; resize: vertical; }
    .ai-send { width: 54px; height: 54px; border: 0; border-radius: 16px; color: white; background: var(--primary); cursor: pointer; }

    .login-overlay { z-index: 500; background: rgba(15, 23, 42, .78); }
    .login-card { max-width: 420px; text-align: center; }
    .login-logo { width: 72px; height: 72px; display: grid; place-items: center; margin: 0 auto 16px; border-radius: 24px; background: var(--primary-soft); color: var(--primary); font-size: 2rem; }
    .profile-pic { cursor: pointer; user-select: none; }
    .privacy-note { color: var(--text-muted); font-size: .72rem; line-height: 1.5; margin-top: 10px; }

    @media (max-width: 900px) {
      .sidebar { width: 86px; padding-inline: 12px; }
      .sidebar-brand span, .nav-item span, .btn-sidebar-add span { display: none; }
      .sidebar-brand, .nav-item, .btn-sidebar-add { justify-content: center; }
      .btn-sidebar-add { width: 54px; height: 54px; padding: 0; border-radius: 18px; align-self: center; }
    }

    @media (max-width: 640px) {
      body { display: block; }
      .app-container { display: block; box-shadow: none; }
      .sidebar {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%; height: calc(70px + env(safe-area-inset-bottom));
        padding: 7px 4px calc(7px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--border-color);
        display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: center; z-index: 150; background: var(--nav-bg);
        backdrop-filter: blur(14px);
      }
      .sidebar-brand { display: none; }
      .btn-sidebar-add { display:flex; order:4; width:46px; height:46px; padding:0; margin:0 auto; border-radius:14px; box-shadow:none; }
      .nav-item[data-target="home"] { order:1; }
      .nav-item[data-target="budget"] { order:2; }
      .nav-item[data-target="plan"] { order:3; }
      .nav-item[data-target="history"] { order:5; }
      .nav-item[data-target="wallet"] { order:6; }
      .nav-item[data-target="setting"] { order:7; }
      .nav-item { width: 100%; height: 54px; padding: 7px 2px; margin: 0; border-radius: 14px; justify-content: center; gap: 0; }
      .nav-item i { font-size: 1.08rem; width: auto; }
      .nav-item.active { box-shadow: none; }
      .main-content { height: 100dvh; padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
      .content-wrapper { width: 100%; padding: 0; }
      .header { padding: calc(16px + env(safe-area-inset-top)) 16px 10px; }
      .view { padding: 12px 14px 24px; }
      .balance-card { padding: 20px; border-radius: 24px; }
      .balance-amount { font-size: clamp(1.65rem, 8vw, 2.2rem); overflow-wrap: anywhere; }
      .balance-stats { gap: 8px; }
      .stat-pill { padding: 9px; min-width: 0; }
      .stat-pill strong { display: block; overflow-wrap: anywhere; font-size: .82rem; }
      .wallet-grid, .settings-grid { grid-template-columns: 1fr; }
      .tx-item { padding: 12px; align-items: flex-start; }
      .tx-icon { width: 42px; height: 42px; margin-right: 10px; border-radius: 13px; flex: 0 0 auto; }
      .tx-amount { max-width: 40%; font-size: .86rem; }
      .type-selector { margin-inline: -2px; }
      .modal-overlay { padding: 10px; align-items: flex-end; }
      .modal-content { max-width: none; border-radius: 24px 24px 0 0; padding: 22px 16px calc(22px + env(safe-area-inset-bottom)); max-height: 92dvh; }
      .login-overlay { align-items: center; padding: 16px; }
      .login-overlay .modal-content { border-radius: 26px; padding: 28px 20px; }
      .mobile-fab {
        display: none; place-items: center; position: fixed; right: 16px; bottom: calc(82px + env(safe-area-inset-bottom));
        width: 56px; height: 56px; border-radius: 18px; border: 0; background: var(--primary); color: white;
        box-shadow: 0 12px 28px rgba(0,0,0,.25); z-index: 140; font-size: 1.2rem;
      }
      #view-history > div[style*="display:flex"] { flex-wrap: wrap; }
      #view-history .form-group { min-width: 180px; }
      .chart-wrap { min-height: 230px; }
      .ai-status { align-items:flex-start; flex-direction:column; }
      .ai-chat-log { height: 52dvh; padding: 10px; }
      .ai-bubble { max-width: 92%; }
    }

    @media (max-width: 360px) {
      .header { padding-inline: 12px; }
      .view { padding-inline: 10px; }
      .profile-pic { width: 40px; height: 40px; }
      .user-greeting h1 { font-size: 1.15rem; }
      .sidebar { grid-template-columns: repeat(7, minmax(0, 1fr)); }
      .tx-amount { max-width: 36%; font-size: .8rem; }
    }

  

    /* ===== UI UX REVISION 2026 ===== */
    :root {
      --app-bg: radial-gradient(circle at top left, rgba(99,102,241,.18), transparent 32%), radial-gradient(circle at top right, rgba(14,165,233,.15), transparent 28%), linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.96));
      --card-shadow: 0 20px 45px -28px rgba(15, 23, 42, 0.36);
    }
    [data-theme="dark"] {
      --app-bg: radial-gradient(circle at top left, rgba(99,102,241,.25), transparent 32%), radial-gradient(circle at top right, rgba(6,182,212,.18), transparent 28%), linear-gradient(180deg, rgba(2,8,23,.84), rgba(2,8,23,.97));
      --card-shadow: 0 20px 45px -24px rgba(0, 0, 0, 0.65);
    }
    body {
      background: var(--app-bg), var(--bg);
      color: var(--text-main);
    }
    .app-container {
      width: min(100%, 1520px);
      background: transparent;
      box-shadow: none;
      padding: 12px;
      gap: 14px;
    }
    .sidebar {
      width: 228px;
      flex: 0 0 228px;
      border-radius: 28px;
      background: color-mix(in srgb, var(--surface) 88%, transparent);
      backdrop-filter: blur(18px);
      box-shadow: var(--card-shadow);
      border: 1px solid color-mix(in srgb, var(--border-color) 78%, white 22%);
      gap: 8px;
    }
    .sidebar-brand {
      margin-bottom: 24px;
      padding: 8px 6px 0;
      font-size: 1.28rem;
      letter-spacing: -.03em;
    }
    .btn-sidebar-add {
      margin-bottom: 18px;
      border-radius: 18px;
      height: 56px;
      box-shadow: 0 18px 30px -18px rgba(79, 70, 229, .8);
    }
    .nav-item {
      border-radius: 18px;
      min-height: 52px;
      margin-bottom: 0;
      font-size: .92rem;
    }
    .nav-item:hover {
      background: color-mix(in srgb, var(--primary-soft) 60%, transparent);
      color: var(--text-main);
    }
    .main-content {
      border-radius: 32px;
      background: color-mix(in srgb, var(--surface) 84%, transparent);
      border: 1px solid color-mix(in srgb, var(--border-color) 78%, white 22%);
      box-shadow: var(--card-shadow);
      overflow-x: hidden;
    }
    .content-wrapper {
      max-width: 1080px;
      padding: 0 26px 36px;
    }
    .header {
      padding: 26px 26px 14px;
      background: color-mix(in srgb, var(--surface) 92%, transparent);
      border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    }
    .user-greeting p { font-size: .92rem; }
    .user-greeting h1 { font-size: clamp(1.4rem, 2vw, 2rem); }
    .view { padding: 18px 0 10px; }
    .section-title {
      margin: 28px 0 14px;
      font-size: 1.02rem;
      letter-spacing: -.01em;
    }
    .bento-card, .tx-item, .wallet-card {
      border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
      box-shadow: var(--card-shadow);
    }
    .bento-card {
      padding: 22px;
      border-radius: 24px;
      background: color-mix(in srgb, var(--surface) 95%, transparent);
    }
    .balance-card {
      border-radius: 28px;
      box-shadow: var(--card-shadow);
      padding: 26px;
      background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 58%, #0F172A 42%), #0B1120 82%);
    }
    .balance-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 50%);
      pointer-events: none;
    }
    .balance-stats { gap: 10px; }
    .stat-pill {
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 18px;
      padding: 12px 14px;
    }
    .overview-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 18px;
    }
    .mini-stat-card {
      background: color-mix(in srgb, var(--surface) 96%, transparent);
      border: 1px solid color-mix(in srgb, var(--border-color) 74%, transparent);
      border-radius: 20px;
      padding: 16px;
      box-shadow: var(--card-shadow);
      min-width: 0;
    }
    .mini-stat-label {
      display: block;
      font-size: .76rem;
      color: var(--text-muted);
      margin-bottom: 8px;
      line-height: 1.45;
    }
    .mini-stat-value {
      display: block;
      font-size: 1rem;
      font-weight: 800;
      letter-spacing: -.02em;
      overflow-wrap: anywhere;
    }
    .chart-wrap { min-height: 300px; }
    .chart-breakdown { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .chart-row {
      border-radius: 16px;
      padding: 12px 14px;
      background: color-mix(in srgb, var(--bg) 60%, var(--surface) 40%);
    }
    .tx-item {
      border-radius: 20px;
      padding: 15px 16px;
      background: color-mix(in srgb, var(--surface) 96%, transparent);
    }
    .wallet-grid, .settings-grid {
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
    .wallet-card { border-radius: 22px; }
    .ai-shell {
      gap: 14px;
      grid-template-rows: auto minmax(370px, 1fr) auto;
      min-height: 0;
    }
    .ai-status { display: block; }
    #ai-connection { display: none !important; }
    .ai-quick-prompts {
      display: flex;
      flex-wrap: wrap;
      overflow: visible;
      gap: 10px;
      margin-top: 18px !important;
    }
    .ai-chip {
      white-space: normal;
      text-align: left;
      border-radius: 999px;
      line-height: 1.35;
      padding: 10px 14px;
      background: color-mix(in srgb, var(--primary-soft) 36%, var(--surface) 64%);
    }
    .ai-chat-log {
      min-height: 360px;
      height: min(60vh, 620px);
      background: color-mix(in srgb, var(--bg) 84%, var(--surface) 16%);
      border-radius: 22px;
      padding: 16px;
    }
    .ai-message { width: 100%; }
    .ai-bubble {
      max-width: min(100%, 760px);
      border-radius: 18px;
      line-height: 1.68;
      font-size: .92rem;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .ai-form { grid-template-columns: minmax(0,1fr) 58px; align-items: end; }
    .ai-form textarea {
      min-height: 58px;
      border-radius: 18px;
      padding-top: 15px;
    }
    .ai-send {
      width: 58px;
      height: 58px;
      border-radius: 18px;
      box-shadow: 0 18px 30px -20px rgba(79, 70, 229, .85);
    }
    .privacy-note {
      max-width: 100%;
      line-height: 1.55;
    }
    .btn-secondary { border-radius: 14px; }
    .mobile-fab { display: none !important; }

    @media (max-width: 960px) {
      .app-container { padding: 10px; gap: 10px; }
      .sidebar {
        width: 86px;
        flex-basis: 86px;
        padding: 16px 10px;
      }
      .sidebar-brand span, .nav-item span, .btn-sidebar-add span { display: none !important; }
      .sidebar-brand, .nav-item, .btn-sidebar-add { justify-content: center; }
      .btn-sidebar-add {
        width: 54px;
        height: 54px;
        padding: 0;
        border-radius: 18px;
        align-self: center;
      }
      .nav-item { padding-inline: 8px; }
      .content-wrapper { padding: 0 18px 24px; }
      .chart-breakdown { grid-template-columns: 1fr; }
      .overview-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 640px) {
      body { display: flex !important; }
      .app-container {
        display: flex !important;
        height: 100dvh;
        min-height: 100dvh;
        padding: 8px;
      }
      .sidebar {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 78px !important;
        min-width: 78px;
        height: auto !important;
        padding: 14px 8px !important;
        border-top: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        gap: 8px;
      }
      .sidebar-brand {
        display: grid !important;
        place-items: center;
        margin-bottom: 14px;
      }
      .sidebar-brand span { display: none !important; }
      .btn-sidebar-add {
        display: grid !important;
        place-items: center;
        width: 50px !important;
        height: 50px !important;
        margin: 0 auto 10px !important;
      }
      .nav-item {
        width: 100% !important;
        height: 48px !important;
        padding: 10px 6px !important;
        margin: 0 !important;
        border-radius: 16px !important;
        gap: 0 !important;
      }
      .nav-item i { width: auto !important; font-size: 1.05rem; }
      .main-content {
        min-width: 0;
        height: auto !important;
        padding-bottom: 0 !important;
      }
      .header {
        padding: calc(16px + env(safe-area-inset-top)) 16px 12px;
        border-radius: 24px 24px 0 0;
      }
      .content-wrapper { padding: 0 14px 22px; }
      .view { padding: 14px 0 8px; }
      .balance-card, .bento-card, .wallet-card, .tx-item { border-radius: 20px; }
      .balance-card { padding: 20px; }
      .balance-amount { font-size: clamp(1.55rem, 7vw, 2rem); }
      .balance-stats { flex-direction: column; }
      .wallet-grid, .settings-grid, .overview-grid, .chart-breakdown { grid-template-columns: 1fr; }
      .tx-item {
        gap: 10px;
        align-items: flex-start;
      }
      .tx-amount { max-width: 42%; text-align: right; }
      .form-control { padding: 14px; }
      .modal-overlay { align-items: flex-end; padding: 8px; }
      .modal-content {
        border-radius: 22px 22px 0 0;
        padding: 20px 14px calc(20px + env(safe-area-inset-bottom));
      }
      .ai-shell { grid-template-rows: auto minmax(320px, 1fr) auto; }
      .ai-chat-log {
        height: min(54vh, 540px);
        min-height: 300px;
        padding: 12px;
      }
      .ai-bubble { max-width: 100%; font-size: .88rem; }
      .ai-form { grid-template-columns: 1fr; }
      .ai-send { width: 100%; }
      .privacy-note { font-size: .7rem; }
      #view-history > div[style*="display:flex"] { flex-wrap: wrap; }
      #view-history .form-group { min-width: 100%; }
    }
    @media (max-width: 380px) {
      .sidebar { width: 62px !important; min-width: 62px !important; }
      .content-wrapper { padding: 0 10px 18px; }
      .tx-amount { max-width: 38%; font-size: .8rem; }
      .user-greeting h1 { font-size: 1.2rem; }
      .user-greeting p { font-size: .82rem; }
    }



    /* ===== FLOATING AI + INTERACTIVE EFFECTS ===== */
    .header, .balance-card, .bento-card, .wallet-card, .tx-item, .nav-item, .profile-pic, .btn-submit, .btn-secondary, .ai-float-btn, .ai-widget-card {
      transition: transform .28s ease, box-shadow .28s ease, background-color .28s ease, border-color .28s ease, opacity .28s ease;
    }
    .balance-card {
      animation: floatSoft 5.2s ease-in-out infinite;
    }
    .bento-card:hover, .wallet-card:hover, .tx-item:hover {
      transform: translateY(-4px);
      box-shadow: 0 24px 50px -28px rgba(15,23,42,.45);
    }
    .nav-item:hover i, .profile-pic:hover {
      transform: scale(1.08);
    }
    .btn-submit:hover, .btn-secondary:hover, .ai-send:hover {
      transform: translateY(-2px) scale(1.01);
    }
    .ai-float-btn {
      position: fixed;
      right: max(16px, env(safe-area-inset-right));
      bottom: max(18px, env(safe-area-inset-bottom));
      width: 62px;
      height: 62px;
      border: none;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--primary), #8B5CF6 70%);
      color: #fff;
      display: grid;
      place-items: center;
      font-size: 1.28rem;
      box-shadow: 0 22px 44px -18px rgba(79,70,229,.72);
      z-index: 240;
      cursor: pointer;
      overflow: hidden;
      isolation: isolate;
      animation: pulseGlow 2.4s ease-in-out infinite;
    }
    .ai-float-ring {
      position: absolute;
      inset: 6px;
      border: 1px solid rgba(255,255,255,.24);
      border-radius: inherit;
      z-index: -1;
    }
    .ai-widget {
      position: fixed;
      right: max(16px, env(safe-area-inset-right));
      bottom: calc(max(18px, env(safe-area-inset-bottom)) + 76px);
      width: min(390px, calc(100vw - 24px));
      z-index: 239;
      opacity: 0;
      pointer-events: none;
      transform: translateY(18px) scale(.96);
    }
    .ai-widget.open {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }
    .ai-widget-open .ai-float-btn { transform: rotate(7deg) scale(.94); animation-play-state: paused; }
    .ai-widget-open .ai-float-btn i { transform: scale(1.08); }
    .ai-widget-card {
      background: color-mix(in srgb, var(--surface) 94%, transparent);
      border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
      border-radius: 26px;
      backdrop-filter: blur(18px);
      box-shadow: 0 28px 64px -34px rgba(15,23,42,.62);
      padding: 16px;
      display: grid;
      gap: 12px;
      max-height: min(78dvh, 720px);
    }
    .ai-widget-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }
    .ai-widget-header h3 {
      margin: 0 0 4px;
      font-size: 1rem;
      letter-spacing: -.02em;
    }
    .ai-widget-header p {
      margin: 0;
      color: var(--text-muted);
      font-size: .76rem;
      line-height: 1.5;
    }
    .ai-widget-close {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      border: 1px solid var(--border-color);
      background: var(--surface);
      color: var(--text-main);
      cursor: pointer;
      flex: 0 0 auto;
    }
    .ai-widget-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }
    @keyframes floatSoft {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-5px); }
    }
    @keyframes pulseGlow {
      0%, 100% { box-shadow: 0 22px 44px -18px rgba(79,70,229,.72); }
      50% { box-shadow: 0 22px 54px -10px rgba(79,70,229,.88); }
    }
    @media (max-width: 640px) {
      .ai-float-btn {
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        width: 58px;
        height: 58px;
      }
      .ai-widget {
        right: 12px;
        left: 12px;
        width: auto;
        bottom: calc(78px + env(safe-area-inset-bottom));
      }
      .ai-widget-open .ai-float-btn { transform: rotate(7deg) scale(.94); animation-play-state: paused; }
    .ai-widget-open .ai-float-btn i { transform: scale(1.08); }
    .ai-widget-card {
        border-radius: 22px;
        padding: 14px;
        max-height: min(72dvh, 640px);
      }
      .ai-chat-log {
        height: min(40dvh, 420px) !important;
        min-height: 250px !important;
      }
      .ai-widget-footer {
        align-items: stretch;
      }
      .ai-widget-footer .btn-secondary {
        width: 100%;
      }
    }



    /* ===== THEME COLOR WHEEL + INTERACTIVE UX V3 ===== */
    .theme-studio-card { overflow: hidden; position: relative; }
    .theme-studio-card::after {
      content: '';
      position: absolute;
      width: 180px;
      height: 180px;
      border-radius: 50%;
      right: -80px;
      top: -95px;
      background: var(--primary-soft);
      filter: blur(12px);
      pointer-events: none;
      opacity: .8;
    }
    .theme-studio-heading {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 14px;
      position: relative;
      z-index: 1;
    }
    .theme-live-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 10px;
      border: 1px solid var(--border-color);
      border-radius: 999px;
      font-size: .7rem;
      font-weight: 800;
      color: var(--text-muted);
      white-space: nowrap;
      background: color-mix(in srgb, var(--surface) 88%, transparent);
    }
    .theme-live-badge span {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--success);
      box-shadow: 0 0 0 4px var(--success-soft);
    }
    .theme-live-badge.saving span { background: var(--warning); box-shadow: 0 0 0 4px var(--warning-soft); }
    .theme-target-tabs {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 8px;
      margin: 18px 0;
      padding: 5px;
      border-radius: 16px;
      background: color-mix(in srgb, var(--bg) 70%, var(--surface) 30%);
      border: 1px solid var(--border-color);
    }
    .theme-target {
      border: 0;
      background: transparent;
      color: var(--text-muted);
      border-radius: 12px;
      min-height: 44px;
      padding: 8px 10px;
      font-weight: 800;
      font-size: .78rem;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 7px;
      transition: .22s ease;
    }
    .theme-target.active {
      background: var(--surface);
      color: var(--text-main);
      box-shadow: 0 8px 22px -16px rgba(15,23,42,.7);
      transform: translateY(-1px);
    }
    .theme-target-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: 2px solid color-mix(in srgb, var(--surface) 70%, transparent);
      box-shadow: 0 0 0 1px var(--border-color);
      flex: 0 0 auto;
    }
    .color-wheel-layout {
      display: grid;
      grid-template-columns: minmax(190px, 300px) minmax(190px, 1fr);
      gap: 22px;
      align-items: center;
      position: relative;
      z-index: 1;
    }
    .color-wheel-shell {
      position: relative;
      width: min(100%, 300px);
      aspect-ratio: 1;
      margin: 0 auto;
      border-radius: 50%;
      filter: drop-shadow(0 18px 28px rgba(15,23,42,.22));
      touch-action: none;
    }
    #theme-color-wheel {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      cursor: crosshair;
    }
    .color-wheel-cursor {
      position: absolute;
      width: 20px;
      height: 20px;
      border: 3px solid white;
      border-radius: 50%;
      box-shadow: 0 0 0 2px rgba(15,23,42,.55), 0 5px 12px rgba(0,0,0,.28);
      pointer-events: none;
      transform: translate(-50%,-50%);
      left: 50%;
      top: 50%;
    }
    .color-wheel-controls { min-width: 0; }
    .selected-color-preview {
      min-height: 92px;
      border-radius: 20px;
      padding: 16px;
      margin-bottom: 16px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      border: 1px solid rgba(255,255,255,.24);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 16px 30px -24px rgba(15,23,42,.7);
      transition: background .18s ease, color .18s ease, transform .18s ease;
    }
    .selected-color-preview.flash { transform: scale(1.015); }
    .selected-color-preview span { font-size: .72rem; opacity: .75; }
    .selected-color-preview strong { font-size: 1.2rem; letter-spacing: -.02em; margin-top: 3px; }
    .brightness-slider {
      width: 100%;
      height: 12px;
      appearance: none;
      border-radius: 999px;
      outline: none;
      margin: 2px 0 16px;
      cursor: pointer;
    }
    .brightness-slider::-webkit-slider-thumb {
      appearance: none;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: white;
      border: 3px solid var(--primary);
      box-shadow: 0 6px 14px rgba(15,23,42,.24);
    }
    .color-hex-input { text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
    .theme-preset-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 8px;
      margin-top: 12px;
    }
    .theme-preset {
      aspect-ratio: 1;
      min-width: 30px;
      border-radius: 11px;
      border: 2px solid color-mix(in srgb, var(--surface) 76%, transparent);
      background: var(--preset);
      box-shadow: 0 0 0 1px var(--border-color);
      cursor: pointer;
      transition: transform .18s ease, box-shadow .18s ease;
    }
    .theme-preset:hover, .theme-preset:active { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 18px -12px rgba(15,23,42,.6); }

    .view.active > * { animation: revealCard .46s cubic-bezier(.2,.8,.2,1) both; }
    .view.active > *:nth-child(2) { animation-delay: .05s; }
    .view.active > *:nth-child(3) { animation-delay: .1s; }
    .view.active > *:nth-child(4) { animation-delay: .15s; }
    .ripple-host { position: relative; overflow: hidden; }
    .ui-ripple {
      position: absolute;
      border-radius: 50%;
      transform: translate(-50%,-50%) scale(0);
      background: rgba(255,255,255,.28);
      pointer-events: none;
      animation: rippleBurst .6s ease-out forwards;
    }
    .tx-item:active, .wallet-card:active, .bento-card:active { transform: scale(.988); }
    .nav-item:active, button:active { transform: scale(.96); }
    .profile-pic { animation: profileBreath 4s ease-in-out infinite; }
    .app-toast {
      position: fixed;
      left: 50%;
      bottom: max(22px, env(safe-area-inset-bottom));
      transform: translate(-50%, 24px);
      padding: 12px 16px;
      border-radius: 14px;
      background: color-mix(in srgb, var(--surface) 94%, transparent);
      color: var(--text-main);
      border: 1px solid var(--border-color);
      box-shadow: 0 18px 42px -22px rgba(15,23,42,.62);
      backdrop-filter: blur(14px);
      opacity: 0;
      pointer-events: none;
      z-index: 500;
      font-size: .82rem;
      font-weight: 800;
      transition: .28s ease;
      max-width: calc(100vw - 32px);
      text-align: center;
    }
    .app-toast.show { opacity: 1; transform: translate(-50%, 0); }
    @keyframes revealCard { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
    @keyframes rippleBurst { to { transform: translate(-50%,-50%) scale(1); opacity: 0; } }
    @keyframes profileBreath { 0%,100% { box-shadow: 0 0 0 0 var(--primary-soft); } 50% { box-shadow: 0 0 0 9px transparent; } }

    @media (max-width: 640px) {
      .theme-studio-heading { align-items: flex-start; flex-direction: column; }
      .theme-live-badge { align-self: flex-start; }
      .content-wrapper { padding-bottom: 110px !important; }
      .sidebar { width: 68px !important; min-width: 68px !important; }
      .color-wheel-layout { grid-template-columns: 1fr; gap: 16px; }
      .color-wheel-shell { width: min(100%, 260px); }
      .theme-target { font-size: .72rem; padding-inline: 5px; }
      .selected-color-preview { min-height: 78px; }
      .app-toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
    }



    /* ===== AI WIDGET MOBILE POSITION FIX V4 ===== */
    .ai-float-btn {
      top: auto !important;
      right: 18px !important;
      bottom: 18px !important;
      bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
      left: auto !important;
      position: fixed !important;
      z-index: 10002 !important;
    }
    .ai-widget {
      position: fixed !important;
      top: auto !important;
      right: 18px !important;
      bottom: 94px !important;
      bottom: calc(94px + env(safe-area-inset-bottom, 0px)) !important;
      left: auto !important;
      width: min(400px, calc(100vw - 36px)) !important;
      z-index: 10001 !important;
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
      transform: translate3d(0, 18px, 0) scale(.97);
      transition: opacity .24s ease, transform .24s ease, visibility .24s ease;
      isolation: isolate;
    }
    .ai-widget.open {
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
      transform: translate3d(0, 0, 0) scale(1);
    }
    .ai-widget-backdrop {
      display: none;
      border: 0;
      padding: 0;
      margin: 0;
      background: transparent;
    }
    .ai-widget-card {
      position: relative;
      z-index: 2;
      width: 100%;
      max-height: min(76dvh, 700px);
      overflow: hidden;
      grid-template-rows: auto auto minmax(190px, 1fr) auto auto;
    }
    .ai-widget .ai-chat-log {
      min-height: 190px !important;
      height: min(42dvh, 430px) !important;
      max-height: 430px;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }
    .ai-widget .ai-form textarea {
      resize: none;
      max-height: 110px;
    }
    body.ai-widget-open {
      overscroll-behavior: none;
    }

    @media (max-width: 640px) {
      .ai-float-btn {
        right: 14px !important;
        bottom: 14px !important;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
        width: 58px !important;
        height: 58px !important;
      }
      .ai-widget {
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        padding: 10px !important;
        padding-top: max(10px, env(safe-area-inset-top, 0px)) !important;
        padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        transform: none !important;
        background: transparent;
      }
      .ai-widget-backdrop {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        background: rgba(2, 6, 23, .58);
        backdrop-filter: blur(5px);
        opacity: 0;
        transition: opacity .24s ease;
        z-index: 1;
      }
      .ai-widget.open .ai-widget-backdrop { opacity: 1; }
      .ai-widget-card {
        width: 100% !important;
        max-width: 520px;
        max-height: min(84dvh, 720px) !important;
        border-radius: 26px 26px 20px 20px !important;
        padding: 14px !important;
        transform: translate3d(0, 34px, 0) scale(.985);
        opacity: 0;
        transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .24s ease;
        box-shadow: 0 28px 80px -24px rgba(0,0,0,.8) !important;
      }
      .ai-widget.open .ai-widget-card {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 1;
      }
      .ai-widget .ai-chat-log {
        height: min(42dvh, 390px) !important;
        min-height: 220px !important;
        max-height: 390px !important;
      }
      .ai-widget .ai-form {
        grid-template-columns: minmax(0, 1fr) 54px !important;
        gap: 8px !important;
      }
      .ai-widget .ai-send {
        width: 54px !important;
        height: 54px !important;
      }
      .ai-widget-footer {
        display: grid !important;
        grid-template-columns: 1fr auto;
        align-items: center !important;
      }
      .ai-widget-footer .btn-secondary { width: auto !important; }
      body.ai-widget-open .app-container {
        pointer-events: none;
        user-select: none;
      }
    }

    @media (max-width: 380px) {
      .ai-widget { padding: 7px !important; }
      .ai-widget-card { padding: 12px !important; border-radius: 22px 22px 16px 16px !important; }
      .ai-widget-header h3 { font-size: .92rem; }
      .ai-widget-header p { font-size: .7rem; }
      .ai-widget .ai-chat-log { min-height: 200px !important; height: 38dvh !important; }
      .ai-widget-footer { grid-template-columns: 1fr !important; }
      .ai-widget-footer .btn-secondary { width: 100% !important; }
    }



    /* ===== BUDGET ROLLOVER V6 ===== */
    #budget-list { display:grid; gap:12px; }
    #budget-list .budget-item { margin-bottom:0; cursor:pointer; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
    #budget-list .budget-item:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--primary) 32%,var(--border-color)); box-shadow:0 14px 30px -24px rgba(15,23,42,.45); }
    @media (max-width:640px) {
      #budget-list .budget-item { padding:13px !important; }
      #budget-list .budget-item > div[style*="grid-template-columns"] { gap:6px !important; }
    }

    /* ===== SUPABASE AUTH & CLOUD SYNC ===== */
    .header-actions {
      display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0;
    }
    .cloud-sync-status {
      display: inline-flex; align-items: center; gap: 7px; min-height: 34px;
      padding: 8px 11px; border-radius: 999px; border: 1px solid var(--border-color);
      background: color-mix(in srgb, var(--surface) 88%, transparent);
      color: var(--text-muted); font-size: .72rem; font-weight: 800; white-space: nowrap;
    }
    .cloud-sync-status i.sync-spin { animation: cloudSpin 1s linear infinite; }
    @keyframes cloudSpin { to { transform: rotate(360deg); } }
    .auth-tabs {
      display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px;
      border: 1px solid var(--border-color); background: var(--bg); border-radius: 16px; margin-bottom: 18px;
    }
    .auth-tab {
      border: 0; border-radius: 12px; padding: 11px; background: transparent;
      color: var(--text-muted); font-weight: 800; cursor: pointer;
    }
    .auth-tab.active { background: var(--surface); color: var(--primary); box-shadow: 0 8px 20px -16px rgba(15,23,42,.7); }
    .auth-message {
      min-height: 20px; margin-top: 12px; font-size: .77rem; line-height: 1.5;
      color: var(--text-muted); text-align: left; overflow-wrap: anywhere;
    }
    .auth-config-warning {
      display: none; text-align: left; padding: 12px; margin-bottom: 14px; border-radius: 14px;
      color: var(--danger); background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
      font-size: .76rem; line-height: 1.55;
    }
    .account-cloud-row {
      display: flex; justify-content: space-between; align-items: center; gap: 12px;
      padding: 12px 0; border-bottom: 1px solid var(--border-color);
    }
    .account-cloud-row:last-child { border-bottom: 0; }
    .account-cloud-value { color: var(--text-muted); font-size: .78rem; text-align: right; overflow-wrap: anywhere; }
    .auth-secondary-link {
      border: 0; background: none; color: var(--primary); font-weight: 800; cursor: pointer;
      padding: 8px 0; font-size: .78rem;
    }
    .migration-note {
      background: var(--primary-soft); color: var(--text-main); padding: 11px 12px;
      border-radius: 13px; font-size: .74rem; line-height: 1.55; margin-bottom: 14px; text-align: left;
    }
    @media (max-width: 640px) {
      .header-actions { gap: 8px; }
      .cloud-sync-status { padding: 8px; }
      .cloud-sync-status span { display: none; }
    }


    /* ===== PROFILE MENU & LOGOUT ===== */
    .profile-menu-wrap {
      position: relative;
      flex: 0 0 auto;
    }
    .profile-pic {
      border: 0;
      cursor: pointer;
    }
    .profile-pic[aria-expanded="true"] {
      outline: 3px solid var(--primary-soft);
      transform: scale(1.04);
    }
    .profile-menu-panel {
      position: absolute;
      top: calc(100% + 12px);
      right: 0;
      width: min(280px, calc(100vw - 28px));
      padding: 10px;
      border-radius: 18px;
      background: color-mix(in srgb, var(--surface) 96%, transparent);
      border: 1px solid var(--border-color);
      box-shadow: 0 22px 55px -28px rgba(15, 23, 42, .72);
      backdrop-filter: blur(18px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(-8px) scale(.97);
      transform-origin: top right;
      transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
      z-index: 400;
    }
    .profile-menu-panel.open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }
    .profile-menu-identity {
      padding: 10px 11px 12px;
      border-bottom: 1px solid var(--border-color);
      margin-bottom: 7px;
    }
    .profile-menu-identity strong {
      display: block;
      color: var(--text-main);
      font-size: .86rem;
      overflow-wrap: anywhere;
    }
    .profile-menu-identity span {
      display: block;
      color: var(--text-muted);
      font-size: .72rem;
      margin-top: 4px;
      overflow-wrap: anywhere;
    }
    .profile-menu-action {
      width: 100%;
      min-height: 44px;
      border: 0;
      border-radius: 12px;
      padding: 10px 11px;
      display: flex;
      align-items: center;
      gap: 10px;
      background: transparent;
      color: var(--text-main);
      font-weight: 800;
      font-size: .8rem;
      text-align: left;
      cursor: pointer;
    }
    .profile-menu-action:hover {
      background: var(--bg);
    }
    .profile-menu-action.danger {
      color: var(--danger);
    }
    .logout-summary {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr);
      gap: 14px;
      align-items: center;
      padding: 14px;
      margin-bottom: 16px;
      border-radius: 16px;
      background: var(--danger-soft);
      border: 1px solid color-mix(in srgb, var(--danger) 38%, transparent);
    }
    .logout-summary-icon {
      width: 48px;
      height: 48px;
      border-radius: 15px;
      display: grid;
      place-items: center;
      color: var(--danger);
      background: color-mix(in srgb, var(--surface) 72%, transparent);
      font-size: 1.1rem;
    }
    .logout-summary strong {
      display: block;
      color: var(--text-main);
      font-size: .88rem;
    }
    .logout-summary p {
      color: var(--text-muted);
      font-size: .75rem;
      line-height: 1.55;
      margin-top: 3px;
    }
    .logout-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .logout-confirm-btn {
      border: 0;
      border-radius: 14px;
      padding: 13px 14px;
      background: var(--danger);
      color: #fff;
      font-weight: 800;
      cursor: pointer;
    }
    .logout-confirm-btn:disabled {
      opacity: .6;
      cursor: wait;
    }
    @media (max-width: 640px) {
      .profile-menu-panel.profile-menu-mobile {
        position: fixed !important;
        width: min(290px, calc(100vw - 24px));
        max-width: calc(100vw - 24px);
        right: 12px;
        left: auto;
        z-index: 20050 !important;
        transform-origin: top right;
      }
      .logout-actions {
        grid-template-columns: 1fr;
      }
    }



    /* ===== FINANCIAL PLANNER V5: PAYDAY, BILLS, SAFE SPEND, FORECAST, CALENDAR, GOALS & INSIGHTS ===== */
    .planning-hero-grid,
    .insight-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-bottom: 18px;
    }
    .planning-metric-card {
      position: relative;
      overflow: hidden;
      min-height: 190px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .planning-metric-card::after {
      content: '';
      position: absolute;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      right: -70px;
      top: -70px;
      background: var(--primary-soft);
      filter: blur(4px);
      pointer-events: none;
    }
    .planning-card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      position: relative;
      z-index: 1;
    }
    .planning-card-icon {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: var(--primary-soft);
      color: var(--primary);
      flex: 0 0 auto;
    }
    .planning-card-label {
      display: block;
      color: var(--text-muted);
      font-size: .75rem;
      font-weight: 800;
      margin-bottom: 7px;
    }
    .planning-card-value {
      display: block;
      color: var(--text-main);
      font-size: clamp(1.45rem, 3vw, 2rem);
      line-height: 1.15;
      letter-spacing: -.04em;
      overflow-wrap: anywhere;
    }
    .planning-card-detail {
      color: var(--text-muted);
      font-size: .76rem;
      line-height: 1.65;
      margin-top: 14px;
      position: relative;
      z-index: 1;
    }
    .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      padding: 7px 10px;
      font-size: .68rem;
      font-weight: 800;
      white-space: nowrap;
    }
    .status-pill.success { color: var(--success); background: var(--success-soft); }
    .status-pill.warning { color: var(--warning); background: var(--warning-soft); }
    .status-pill.danger { color: var(--danger); background: var(--danger-soft); }
    .status-pill.neutral { color: var(--text-muted); background: var(--bg); }

    .planner-section-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 14px;
    }
    .planner-section-head h4 { margin: 0 0 5px; }
    .planner-section-head p { margin: 0; color: var(--text-muted); font-size: .76rem; line-height: 1.55; }
    .planner-form-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      align-items: end;
    }
    .planner-action-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 14px;
    }
    .planner-primary-btn,
    .planner-icon-btn {
      border: 0;
      cursor: pointer;
      font-weight: 800;
    }
    .planner-primary-btn {
      min-height: 42px;
      border-radius: 13px;
      padding: 11px 15px;
      background: var(--primary);
      color: #fff;
    }
    .planner-icon-btn {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      background: var(--bg);
      color: var(--text-main);
      border: 1px solid var(--border-color);
    }
    .planner-icon-btn.danger { color: var(--danger); }

    .bill-list,
    .goal-list {
      display: grid;
      gap: 10px;
    }
    .bill-item,
    .goal-item {
      border: 1px solid var(--border-color);
      background: color-mix(in srgb, var(--surface) 95%, transparent);
      border-radius: 18px;
      padding: 14px;
    }
    .bill-main,
    .goal-main {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }
    .bill-title,
    .goal-title {
      font-size: .9rem;
      font-weight: 800;
      color: var(--text-main);
      overflow-wrap: anywhere;
    }
    .bill-meta,
    .goal-meta {
      color: var(--text-muted);
      font-size: .72rem;
      line-height: 1.55;
      margin-top: 4px;
    }
    .bill-amount,
    .goal-amount {
      font-size: .88rem;
      font-weight: 800;
      text-align: right;
      white-space: nowrap;
    }
    .bill-actions,
    .goal-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 7px;
      margin-top: 12px;
    }
    .mini-action {
      min-height: 34px;
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px solid var(--border-color);
      background: var(--surface);
      color: var(--text-main);
      font-size: .7rem;
      font-weight: 800;
      cursor: pointer;
    }
    .mini-action.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
    .mini-action.success { color: var(--success); }
    .mini-action.danger { color: var(--danger); }
    .mini-action:disabled { opacity: .55; cursor: not-allowed; }

    .goal-progress {
      height: 10px;
      border-radius: 999px;
      background: var(--border-color);
      overflow: hidden;
      margin-top: 12px;
    }
    .goal-progress > span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--primary), #8B5CF6);
      transition: width .35s ease;
    }
    .goal-history {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px dashed var(--border-color);
      display: grid;
      gap: 6px;
    }
    .goal-history-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      color: var(--text-muted);
      font-size: .68rem;
    }

    .calendar-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }
    .calendar-title {
      font-weight: 800;
      text-align: center;
      color: var(--text-main);
    }
    .finance-calendar {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 6px;
    }
    .calendar-weekday {
      padding: 7px 2px;
      color: var(--text-muted);
      font-size: .65rem;
      font-weight: 800;
      text-align: center;
    }
    .calendar-day {
      min-height: 88px;
      border: 1px solid var(--border-color);
      border-radius: 13px;
      padding: 8px;
      background: var(--surface);
      min-width: 0;
    }
    .calendar-day.muted { opacity: .38; }
    .calendar-day.today { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
    .calendar-day-number {
      font-size: .7rem;
      font-weight: 800;
      margin-bottom: 6px;
    }
    .calendar-event {
      display: block;
      width: 100%;
      padding: 3px 5px;
      border-radius: 6px;
      margin-bottom: 3px;
      font-size: .57rem;
      font-weight: 700;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .calendar-event.income { background: var(--success-soft); color: var(--success); }
    .calendar-event.expense { background: var(--danger-soft); color: var(--danger); }
    .calendar-event.bill { background: var(--warning-soft); color: var(--warning); }
    .calendar-event.payday { background: var(--primary-soft); color: var(--primary); }
    .calendar-event.goal { background: color-mix(in srgb, var(--primary-soft) 72%, var(--surface)); color: var(--primary); }
    .calendar-agenda {
      display: grid;
      gap: 8px;
      margin-top: 14px;
    }
    .agenda-row {
      display: grid;
      grid-template-columns: 92px minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      padding: 10px 12px;
      border-radius: 13px;
      background: var(--bg);
      border: 1px solid var(--border-color);
      font-size: .73rem;
    }
    .agenda-date { color: var(--text-muted); font-weight: 700; }
    .agenda-label { font-weight: 800; overflow-wrap: anywhere; }
    .agenda-amount { font-weight: 800; text-align: right; }

    .recap-list,
    .comparison-list {
      display: grid;
      gap: 9px;
      margin-top: 13px;
    }
    .recap-row,
    .comparison-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 10px 11px;
      border-radius: 12px;
      background: var(--bg);
      font-size: .73rem;
    }
    .recap-row strong,
    .comparison-row strong { font-size: .76rem; text-align: right; }
    .comparison-columns {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 12px;
    }
    .comparison-month {
      border: 1px solid var(--border-color);
      border-radius: 14px;
      padding: 12px;
      background: var(--surface);
    }
    .comparison-month span { display: block; color: var(--text-muted); font-size: .68rem; }
    .comparison-month strong { display: block; margin-top: 5px; font-size: .9rem; }

    .empty-planner-state {
      padding: 20px 12px;
      text-align: center;
      color: var(--text-muted);
      font-size: .76rem;
      line-height: 1.6;
    }

    @media (max-width: 900px) {
      .planning-hero-grid,
      .insight-grid,
      .planner-form-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 640px) {
      .nav-item[data-target="plan"] { order: 3; }
      .planning-hero-grid,
      .insight-grid { grid-template-columns: 1fr; }
      .planner-section-head { flex-direction: column; }
      .planner-section-head .planner-primary-btn { width: 100%; }
      .calendar-day { min-height: 68px; padding: 5px; border-radius: 10px; }
      .calendar-event { font-size: .5rem; padding: 2px 3px; }
      .calendar-weekday { font-size: .56rem; }
      .agenda-row { grid-template-columns: 76px minmax(0, 1fr); }
      .agenda-amount { grid-column: 2; text-align: left; }
      .bill-main, .goal-main { flex-direction: column; }
      .bill-amount, .goal-amount { text-align: left; }
      .bill-actions, .goal-actions { justify-content: flex-start; }
    }



    /* ===== LOGIN / SIGN UP SINGLE-CARD UI — KITA TABUNG BLUE ===== */
    .login-overlay {
      z-index: 500;
      display: none;
      align-items: center;
      justify-content: center;
      overflow-y: auto;
      padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
      background:
        radial-gradient(circle at 12% 16%, rgba(255,255,255,.30), transparent 25%),
        radial-gradient(circle at 88% 82%, rgba(255,255,255,.18), transparent 28%),
        linear-gradient(145deg, #075da4 0%, #0876c7 48%, #0a67ad 100%);
    }
    .login-overlay::before,
    .login-overlay::after {
      content: '';
      position: fixed;
      border-radius: 999px;
      pointer-events: none;
      filter: blur(3px);
      opacity: .42;
    }
    .login-overlay::before {
      width: 320px;
      height: 320px;
      left: -130px;
      bottom: -130px;
      background: rgba(255,255,255,.22);
    }
    .login-overlay::after {
      width: 260px;
      height: 260px;
      right: -95px;
      top: -95px;
      background: rgba(181,225,255,.32);
    }
    .login-auth-shell {
      position: relative;
      z-index: 1;
      width: min(100%, 500px);
      margin: auto;
    }
    .login-auth-brand {
      text-align: center;
      color: #fff;
      margin-bottom: 18px;
      text-shadow: 0 8px 24px rgba(0,51,93,.26);
    }
    .login-auth-brand h1 {
      margin: 0;
      font-size: clamp(1.75rem, 5vw, 2.35rem);
      line-height: 1.08;
      font-weight: 800;
      letter-spacing: -.04em;
    }
    .login-auth-brand p {
      margin: 8px auto 0;
      max-width: 460px;
      color: rgba(255,255,255,.88);
      font-size: .86rem;
      line-height: 1.6;
    }
    .auth-global-notices {
      width: 100%;
      margin: 0 auto 12px;
    }
    .login-overlay .auth-config-warning,
    .login-overlay .migration-note {
      border: 1px solid rgba(255,255,255,.32);
      background: rgba(0,51,93,.24);
      color: #fff;
      backdrop-filter: blur(12px);
      box-shadow: 0 16px 36px -26px rgba(0,34,67,.75);
    }
    .login-overlay .migration-note {
      margin: 0;
      text-align: center;
      border-radius: 14px;
      padding: 10px 13px;
    }
    .login-overlay .auth-config-warning {
      margin-bottom: 9px;
    }
    .auth-mobile-tabs {
      display: grid;
      width: 100%;
      margin: 0 auto 10px;
      padding: 5px;
      grid-template-columns: 1fr 1fr;
      gap: 5px;
      border-radius: 16px;
      background: rgba(0,51,93,.24);
      border: 1px solid rgba(255,255,255,.28);
      backdrop-filter: blur(12px);
    }
    .auth-mobile-tabs .auth-tab {
      min-height: 44px;
      border: 0;
      border-radius: 12px;
      color: rgba(255,255,255,.82);
      background: transparent;
      box-shadow: none;
      font-size: .84rem;
      font-weight: 800;
      cursor: pointer;
    }
    .auth-mobile-tabs .auth-tab.active {
      color: #086db8;
      background: #fff;
      box-shadow: 0 12px 24px -18px rgba(0,34,67,.8);
    }
    .auth-card-grid {
      display: block;
      width: 100%;
    }
    .auth-panel {
      display: none;
      width: 100%;
      min-width: 0;
      padding: clamp(24px, 5vw, 34px);
      border-radius: 28px;
      background: rgba(255,255,255,.97);
      color: #15324a;
      border: 1px solid rgba(255,255,255,.92);
      box-shadow: 0 30px 72px -34px rgba(0,31,61,.72);
      backdrop-filter: blur(18px);
    }
    .auth-panel.active {
      display: block;
      animation: authPanelIn .30s cubic-bezier(.2,.8,.2,1) both;
    }
    .auth-panel-header {
      text-align: center;
      margin-bottom: 24px;
    }
    .auth-brand-mark {
      width: 112px;
      height: 112px;
      display: grid;
      place-items: center;
      margin: 0 auto 14px;
      padding: 9px;
      border-radius: 28px;
      background: #fff;
      border: 1px solid #d8ebf9;
      box-shadow: 0 18px 34px -22px rgba(4,102,174,.72);
    }
    .auth-brand-mark img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 18px;
      background: #fff;
    }
    .auth-panel-header h2 {
      margin: 0;
      color: #075f9f;
      font-size: clamp(1.6rem, 5vw, 2rem);
      line-height: 1.2;
      font-weight: 800;
      letter-spacing: -.035em;
    }
    .auth-panel-header p {
      margin: 8px 0 0;
      color: #6b8194;
      font-size: .82rem;
      line-height: 1.55;
    }
    .auth-field {
      margin-bottom: 15px;
      text-align: left;
    }
    .auth-field-topline {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 8px;
    }
    .auth-field label {
      color: #29475f;
      font-size: .78rem;
      font-weight: 800;
    }
    .auth-field-wrap {
      position: relative;
    }
    .auth-field-icon {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: #4c91c4;
      font-size: 1rem;
      pointer-events: none;
    }
    .auth-field .form-control {
      min-height: 54px;
      padding: 14px 46px 14px 45px;
      color: #15324a;
      background: #f6fbff;
      border: 1px solid #d7e9f6;
      border-radius: 14px;
      box-shadow: 0 8px 20px -16px rgba(6,105,177,.42);
      font-size: .9rem;
      font-weight: 600;
    }
    .auth-field .form-control::placeholder {
      color: #91a7b8;
      font-weight: 500;
    }
    .auth-field .form-control:focus {
      outline: none;
      border-color: #0877c9;
      background: #fff;
      box-shadow: 0 0 0 4px rgba(8,119,201,.12), 0 10px 24px -16px rgba(6,105,177,.58);
    }
    .auth-password-toggle {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      border: 0;
      border-radius: 10px;
      background: transparent;
      color: #4c91c4;
      cursor: pointer;
    }
    .auth-password-toggle:hover {
      background: #e9f5fd;
      color: #075f9f;
    }
    .auth-forgot-inline {
      border: 0;
      background: none;
      color: #0877c9;
      font-size: .72rem;
      font-weight: 800;
      cursor: pointer;
      padding: 0;
    }
    .auth-primary-btn {
      width: 100%;
      min-height: 54px;
      border: 0;
      border-radius: 14px;
      color: #fff;
      background: linear-gradient(90deg, #075f9f 0%, #0877c9 52%, #0b8ed9 100%);
      box-shadow: 0 18px 30px -18px rgba(5,103,174,.82);
      font-size: .98rem;
      font-weight: 800;
      cursor: pointer;
      transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
    }
    .auth-primary-btn:hover {
      transform: translateY(-2px);
      filter: saturate(1.06);
      box-shadow: 0 22px 34px -17px rgba(5,103,174,.9);
    }
    .auth-panel-footer {
      margin-top: 18px;
      text-align: center;
      color: #718596;
      font-size: .76rem;
      line-height: 1.55;
    }
    .auth-panel-footer button {
      border: 0;
      background: none;
      color: #0877c9;
      font-weight: 800;
      cursor: pointer;
      padding: 0;
    }
    .login-overlay .auth-message {
      min-height: 22px;
      margin: 13px auto 0;
      padding: 0 10px;
      color: #fff;
      text-align: center;
      font-size: .8rem;
      font-weight: 700;
      text-shadow: 0 3px 12px rgba(0,44,82,.38);
    }
    .auth-security-note {
      margin: 10px auto 0;
      color: rgba(255,255,255,.82);
      text-align: center;
      font-size: .7rem;
      line-height: 1.55;
    }
    @keyframes authPanelIn {
      from { opacity: 0; transform: translateY(12px) scale(.985); }
      to { opacity: 1; transform: none; }
    }
    @media (max-width: 560px) {
      .login-overlay {
        align-items: flex-start;
        padding: max(14px, env(safe-area-inset-top)) 12px max(18px, env(safe-area-inset-bottom));
      }
      .login-auth-shell {
        width: min(100%, 460px);
      }
      .login-auth-brand {
        margin: 12px 0 13px;
      }
      .login-auth-brand h1 {
        font-size: 1.75rem;
      }
      .login-auth-brand p {
        font-size: .78rem;
      }
      .auth-panel {
        padding: 23px 17px;
        border-radius: 24px;
      }
      .auth-brand-mark {
        width: 96px;
        height: 96px;
        border-radius: 24px;
      }
      .auth-panel-header {
        margin-bottom: 21px;
      }
    }



    /* ===== AUTH LANDING: FIXED VIEWPORT, NO PAGE SCROLL ===== */
    .login-overlay {
      width: 100vw !important;
      height: 100dvh !important;
      min-height: 100dvh !important;
      max-height: 100dvh !important;
      overflow: hidden !important;
      overscroll-behavior: none !important;
      align-items: center !important;
      justify-content: center !important;
      padding: clamp(7px, 1.4vh, 14px) 12px !important;
    }
    .login-auth-shell {
      width: min(100%, 500px) !important;
      max-height: calc(100dvh - clamp(14px, 2.8vh, 28px)) !important;
      margin: 0 auto !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      min-height: 0 !important;
    }
    .login-auth-brand {
      flex: 0 0 auto;
      margin: 0 0 clamp(7px, 1.4vh, 12px) !important;
    }
    .login-auth-brand h1 {
      font-size: clamp(1.35rem, 3.4vh, 1.9rem) !important;
      line-height: 1.05 !important;
    }
    .login-auth-brand p {
      max-width: 430px !important;
      margin-top: clamp(3px, .7vh, 6px) !important;
      font-size: clamp(.68rem, 1.55vh, .78rem) !important;
      line-height: 1.38 !important;
    }
    .auth-card-grid {
      flex: 0 1 auto;
      min-height: 0;
    }
    .auth-panel {
      padding: clamp(15px, 2.6vh, 23px) clamp(15px, 3vw, 24px) !important;
      border-radius: clamp(20px, 3.4vh, 26px) !important;
    }
    .auth-panel-header {
      margin-bottom: clamp(12px, 2vh, 17px) !important;
    }
    .auth-brand-mark {
      width: clamp(62px, 11vh, 84px) !important;
      height: clamp(62px, 11vh, 84px) !important;
      margin-bottom: clamp(7px, 1.2vh, 11px) !important;
      padding: 7px !important;
      border-radius: clamp(18px, 3vh, 23px) !important;
    }
    .auth-brand-mark img {
      border-radius: 14px !important;
    }
    .auth-panel-header h2 {
      font-size: clamp(1.35rem, 3.3vh, 1.72rem) !important;
      line-height: 1.12 !important;
    }
    .auth-panel-header p {
      max-width: 390px;
      margin: clamp(4px, .8vh, 7px) auto 0 !important;
      font-size: clamp(.69rem, 1.55vh, .78rem) !important;
      line-height: 1.4 !important;
    }
    .auth-field {
      margin-bottom: clamp(8px, 1.45vh, 12px) !important;
    }
    .auth-field-topline {
      margin-bottom: clamp(4px, .75vh, 6px) !important;
    }
    .auth-field label,
    .auth-forgot-inline {
      font-size: clamp(.67rem, 1.42vh, .75rem) !important;
    }
    .auth-field .form-control {
      min-height: clamp(43px, 6.6vh, 50px) !important;
      height: clamp(43px, 6.6vh, 50px) !important;
      padding-top: 9px !important;
      padding-bottom: 9px !important;
      font-size: clamp(.78rem, 1.7vh, .88rem) !important;
    }
    .auth-primary-btn {
      min-height: clamp(44px, 6.6vh, 50px) !important;
      height: clamp(44px, 6.6vh, 50px) !important;
      font-size: clamp(.84rem, 1.8vh, .95rem) !important;
    }
    .auth-panel-footer {
      margin-top: clamp(9px, 1.5vh, 13px) !important;
      font-size: clamp(.67rem, 1.45vh, .74rem) !important;
      line-height: 1.35 !important;
    }
    .login-overlay .auth-message {
      min-height: 0 !important;
      margin: clamp(5px, .9vh, 8px) auto 0 !important;
      font-size: clamp(.67rem, 1.45vh, .76rem) !important;
      line-height: 1.35 !important;
    }
    .login-overlay .auth-message:empty {
      display: none !important;
    }
    .auth-security-note {
      display: none !important;
    }
    .login-overlay .auth-config-warning {
      flex: 0 0 auto;
      margin: 0 0 8px !important;
      padding: 8px 11px !important;
      font-size: .68rem !important;
      line-height: 1.35 !important;
    }

    @media (max-width: 560px) {
      .login-overlay {
        align-items: center !important;
        padding: max(6px, env(safe-area-inset-top)) 9px max(6px, env(safe-area-inset-bottom)) !important;
      }
      .login-auth-shell {
        width: min(100%, 430px) !important;
        max-height: calc(100dvh - max(12px, env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
      }
      .login-auth-brand {
        margin-top: 0 !important;
      }
      .auth-panel {
        padding-left: clamp(14px, 4vw, 19px) !important;
        padding-right: clamp(14px, 4vw, 19px) !important;
      }
    }

    @media (max-height: 650px) {
      .login-auth-brand p,
      .auth-panel-header p {
        display: none !important;
      }
      .login-auth-brand {
        margin-bottom: 6px !important;
      }
      .auth-panel-header {
        margin-bottom: 9px !important;
      }
      .auth-brand-mark {
        width: 56px !important;
        height: 56px !important;
        margin-bottom: 5px !important;
        border-radius: 16px !important;
      }
      .auth-panel {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
      }
      .auth-field {
        margin-bottom: 7px !important;
      }
      .auth-panel-footer {
        margin-top: 7px !important;
      }
    }



    /* ===== INTERACTIVE UI V3: RESPONSIVE TYPE, SEARCH, ADAPTIVE THEME, TOAST, CAROUSEL ===== */
    :root {
      --type-2xs: clamp(.66rem, .63rem + .14vw, .74rem);
      --type-xs: clamp(.72rem, .68rem + .18vw, .82rem);
      --type-sm: clamp(.8rem, .75rem + .22vw, .92rem);
      --type-base: clamp(.88rem, .82rem + .28vw, 1rem);
      --type-md: clamp(1rem, .92rem + .42vw, 1.2rem);
      --type-lg: clamp(1.18rem, 1.02rem + .7vw, 1.55rem);
      --type-xl: clamp(1.45rem, 1.16rem + 1.25vw, 2.15rem);
      --type-2xl: clamp(1.9rem, 1.45rem + 2vw, 3rem);
    }
    body { font-size: var(--type-base); }
    .user-greeting p, .tx-sub, .budget-sub, .privacy-note, .planning-card-detail, .planner-section-head p { font-size: var(--type-xs) !important; }
    .form-label, .planning-card-label, .mini-stat-label, .account-cloud-value { font-size: var(--type-xs) !important; }
    .user-greeting h1 { font-size: var(--type-lg) !important; line-height: 1.15; }
    .section-title { font-size: var(--type-md) !important; }
    .balance-amount { font-size: var(--type-2xl) !important; line-height: 1.08; }
    .planning-card-value { font-size: var(--type-xl) !important; }
    .mini-stat-value, .wallet-bal { font-size: var(--type-md) !important; }
    .tx-title, .tx-amount, .bill-title, .goal-title { font-size: var(--type-sm) !important; }
    .form-control, .btn-submit, .btn-secondary, .planner-primary-btn { font-size: var(--type-sm); }

    /* Search trigger */
    .global-search-trigger {
      min-height: 38px; border: 1px solid var(--border-color); border-radius: 999px;
      background: color-mix(in srgb, var(--surface) 90%, transparent); color: var(--text-muted);
      display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px;
      cursor: pointer; font-weight: 800; font-size: var(--type-xs); white-space: nowrap;
      backdrop-filter: blur(12px); box-shadow: 0 10px 24px -20px rgba(15,23,42,.6);
    }
    .global-search-trigger:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 38%, var(--border-color)); }
    .global-search-trigger kbd {
      font: inherit; font-size: .64rem; padding: 2px 6px; border-radius: 7px;
      color: var(--text-muted); background: var(--bg); border: 1px solid var(--border-color);
    }
    .global-search-overlay { z-index: 470; align-items: flex-start; padding-top: clamp(54px, 9vh, 100px); }
    .global-search-panel {
      width: min(680px, calc(100vw - 28px)); max-height: min(76dvh, 720px); overflow: hidden;
      background: color-mix(in srgb, var(--surface) 97%, transparent); border: 1px solid var(--border-color);
      border-radius: 24px; box-shadow: 0 34px 90px -36px rgba(2,6,23,.68); backdrop-filter: blur(20px);
      display: grid; grid-template-rows: auto minmax(0,1fr); animation: searchPop .22s cubic-bezier(.2,.8,.2,1);
    }
    .global-search-bar { display: grid; grid-template-columns: 42px minmax(0,1fr) 36px; align-items: center; gap: 6px; padding: 13px; border-bottom: 1px solid var(--border-color); }
    .global-search-bar > i { color: var(--primary); text-align: center; }
    .global-search-input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text-main); font-size: var(--type-base); font-weight: 700; padding: 8px 2px; }
    .global-search-close { width: 34px; height: 34px; border: 0; border-radius: 11px; background: var(--bg); color: var(--text-muted); cursor: pointer; }
    .global-search-results { overflow-y: auto; padding: 10px; overscroll-behavior: contain; }
    .search-section-label { padding: 8px 10px 6px; color: var(--text-muted); font-size: var(--type-2xs); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
    .global-search-result {
      width: 100%; border: 0; background: transparent; color: var(--text-main); text-align: left;
      display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 11px; align-items: center;
      padding: 11px 10px; border-radius: 15px; cursor: pointer;
    }
    .global-search-result:hover, .global-search-result.active { background: var(--primary-soft); }
    .search-result-icon { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); }
    .search-result-main { min-width: 0; }
    .search-result-title { display:block; font-size: var(--type-sm); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .search-result-sub { display:block; margin-top: 3px; color: var(--text-muted); font-size: var(--type-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .search-result-type { color: var(--text-muted); font-size: var(--type-2xs); font-weight: 800; }
    .search-empty { text-align:center; padding: 34px 18px; color: var(--text-muted); font-size: var(--type-sm); }
    @keyframes searchPop { from { opacity:0; transform: translateY(-10px) scale(.98); } to { opacity:1; transform:none; } }

    /* Adaptive theme */
    .adaptive-theme-status { display:block; color:var(--text-muted); font-size:var(--type-2xs); margin-top:3px; font-weight:600; }
    #theme-toggle:disabled + .slider { opacity:.52; cursor:not-allowed; }

    /* Modern toast stack */
    .app-toast { display:none !important; }
    .toast-stack {
      position: fixed; top: max(18px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right));
      width: min(390px, calc(100vw - 28px)); display: grid; gap: 10px; z-index: 12000; pointer-events: none;
    }
    .modern-toast {
      --toast-accent: var(--success); pointer-events: auto; position: relative; overflow: hidden;
      display: grid; grid-template-columns: 38px minmax(0,1fr) 30px; align-items: center; gap: 10px;
      background: color-mix(in srgb, var(--surface) 96%, transparent); color: var(--text-main);
      border: 1px solid color-mix(in srgb, var(--toast-accent) 32%, var(--border-color));
      border-radius: 17px; padding: 11px 10px 11px 12px; backdrop-filter: blur(18px);
      box-shadow: 0 24px 60px -30px rgba(2,6,23,.7); transform: translateX(22px); opacity: 0;
      transition: opacity .24s ease, transform .24s cubic-bezier(.2,.8,.2,1);
    }
    .modern-toast.show { opacity:1; transform:none; }
    .modern-toast.error { --toast-accent: var(--danger); }
    .modern-toast-icon { width:36px; height:36px; border-radius:12px; display:grid; place-items:center; background: color-mix(in srgb, var(--toast-accent) 14%, transparent); color:var(--toast-accent); }
    .modern-toast-copy { min-width:0; }
    .modern-toast-title { display:block; font-size:var(--type-xs); font-weight:800; margin-bottom:2px; }
    .modern-toast-message { display:block; color:var(--text-muted); font-size:var(--type-xs); line-height:1.45; overflow-wrap:anywhere; }
    .modern-toast-close { width:30px; height:30px; border:0; border-radius:10px; background:transparent; color:var(--text-muted); cursor:pointer; }
    .modern-toast-progress { position:absolute; left:0; bottom:0; height:3px; width:100%; background:var(--toast-accent); transform-origin:left; animation: toastProgress var(--toast-duration, 3200ms) linear forwards; }
    .modern-toast.leaving { opacity:0; transform:translateX(18px) scale(.98); }
    @keyframes toastProgress { to { transform: scaleX(0); } }

    /* Weekly recap carousel */
    .weekly-carousel { position:relative; min-width:0; }
    .weekly-carousel-track {
      display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
      scrollbar-width:none; overscroll-behavior-x:contain; border-radius:18px;
    }
    .weekly-carousel-track::-webkit-scrollbar { display:none; }
    .weekly-slide {
      flex:0 0 100%; scroll-snap-align:start; min-height:168px; padding:18px;
      border:1px solid var(--border-color); border-radius:18px;
      background: linear-gradient(145deg, color-mix(in srgb, var(--primary-soft) 62%, var(--surface) 38%), var(--surface));
      display:flex; flex-direction:column; justify-content:space-between; gap:15px;
    }
    .weekly-slide + .weekly-slide { margin-left:10px; }
    .weekly-slide-eyebrow { color:var(--text-muted); font-size:var(--type-2xs); font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
    .weekly-slide-value { display:block; font-size:var(--type-xl); line-height:1.08; font-weight:800; letter-spacing:-.04em; color:var(--text-main); margin-top:8px; overflow-wrap:anywhere; }
    .weekly-slide-detail { color:var(--text-muted); font-size:var(--type-xs); line-height:1.55; }
    .weekly-carousel-footer { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:11px; }
    .weekly-carousel-dots { display:flex; align-items:center; gap:6px; }
    .weekly-dot { width:7px; height:7px; padding:0; border:0; border-radius:999px; background:var(--border-color); cursor:pointer; transition:.2s ease; }
    .weekly-dot.active { width:22px; background:var(--primary); }
    .weekly-carousel-controls { display:flex; gap:6px; }
    .weekly-carousel-btn { width:34px; height:34px; border:1px solid var(--border-color); border-radius:11px; background:var(--surface); color:var(--text-main); cursor:pointer; }

    /* Micro interactions */
    button, .nav-item, .bento-card, .mini-stat-card, .planning-metric-card, .wallet-card, .tx-item, .bill-item, .goal-item, .global-search-result {
      -webkit-tap-highlight-color: transparent;
    }
    button:focus-visible, .nav-item:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .global-search-result:focus-visible {
      outline: 3px solid color-mix(in srgb, var(--primary) 35%, transparent); outline-offset: 2px;
    }
    @media (hover:hover) and (pointer:fine) {
      .mini-stat-card:hover, .planning-metric-card:hover, .bill-item:hover, .goal-item:hover { transform: translateY(-3px); box-shadow: 0 24px 46px -30px rgba(15,23,42,.48); }
      .planner-primary-btn:hover, .global-search-trigger:hover, .weekly-carousel-btn:hover { transform: translateY(-2px); }
    }
    .micro-pop { animation: microPop .3s cubic-bezier(.2,.8,.2,1); }
    @keyframes microPop { 0%{transform:scale(.96)} 65%{transform:scale(1.025)} 100%{transform:scale(1)} }

    @media (max-width: 640px) {
      .global-search-trigger span, .global-search-trigger kbd { display:none; }
      .global-search-trigger { width:40px; height:40px; min-height:40px; padding:0; justify-content:center; }
      .global-search-overlay { align-items:flex-start !important; padding: max(10px, env(safe-area-inset-top)) 8px 8px !important; }
      .global-search-panel { width:100%; max-height:86dvh; border-radius:22px; }
      .toast-stack { top:auto; right:14px; left:14px; bottom:calc(84px + env(safe-area-inset-bottom)); width:auto; }
      .modern-toast { grid-template-columns:36px minmax(0,1fr) 28px; }
      .weekly-slide { min-height:154px; padding:16px; }
    }
    @media (max-width: 380px) {
      :root { --type-base: .86rem; --type-md: 1rem; }
      .weekly-slide { min-height:146px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .modern-toast-progress { animation:none !important; }
      .weekly-carousel-track { scroll-behavior:auto; }
    }



    /* ===== DASHBOARD SIMPLE V4 ===== */
    .dashboard-balance-card {
      padding: clamp(18px, 2.2vw, 22px) !important;
      margin-bottom: 14px !important;
      border-radius: 24px !important;
      min-height: 0;
      animation: none !important;
    }
    .dashboard-balance-head {
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      position:relative; z-index:2;
    }
    .dashboard-balance-card .balance-label {
      margin:0; font-size:var(--type-xs) !important; font-weight:700; color:rgba(226,232,240,.82);
    }
    .balance-visibility-toggle {
      width:36px; height:36px; border:1px solid rgba(255,255,255,.14); border-radius:12px;
      background:rgba(255,255,255,.08); color:#fff; display:grid; place-items:center; cursor:pointer;
      flex:0 0 auto; position:relative; z-index:3; box-shadow:none;
    }
    .balance-visibility-toggle:hover { background:rgba(255,255,255,.14); transform:translateY(-1px); }
    .dashboard-balance-amount {
      margin:8px 0 16px !important;
      font-size:clamp(1.65rem, 4vw, 2.15rem) !important;
      line-height:1.08; letter-spacing:-.04em !important;
      position:relative; z-index:2;
    }
    .dashboard-cashflow-row { gap:8px !important; position:relative; z-index:2; }
    .dashboard-stat-pill {
      min-width:0; padding:10px 12px !important; border-radius:14px !important;
      background:rgba(255,255,255,.075) !important;
    }
    .dashboard-stat-pill span { font-size:var(--type-2xs) !important; margin-bottom:3px !important; }
    .dashboard-stat-pill strong { font-size:var(--type-xs) !important; overflow-wrap:anywhere; }

    .dashboard-summary-card {
      padding:18px !important; margin-bottom:16px !important; border-radius:22px !important;
      box-shadow:var(--card-shadow); overflow:hidden;
    }
    .dashboard-summary-title {
      display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:4px;
      font-size:var(--type-sm); font-weight:800; color:var(--text-main);
    }
    .dashboard-summary-link {
      border:0; background:transparent; color:var(--primary); padding:6px 2px; font-size:var(--type-xs);
      font-weight:800; cursor:pointer; display:inline-flex; align-items:center; gap:5px;
    }
    .dashboard-summary-row {
      display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:12px; align-items:center; padding:14px 0;
    }
    .dashboard-summary-icon {
      width:40px; height:40px; border-radius:13px; display:grid; place-items:center;
      color:var(--primary); background:var(--primary-soft); flex:0 0 auto;
    }
    .dashboard-summary-copy { min-width:0; }
    .dashboard-summary-copy .planning-card-label { margin-bottom:4px !important; }
    .dashboard-summary-value {
      display:block; color:var(--text-main); font-size:clamp(1.05rem, 2.2vw, 1.3rem); line-height:1.2;
      font-weight:800; letter-spacing:-.025em; overflow-wrap:anywhere;
    }
    .dashboard-summary-detail {
      margin:5px 0 0; color:var(--text-muted); font-size:var(--type-2xs); line-height:1.45;
      display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    }
    .dashboard-summary-divider { height:1px; background:var(--border-color); opacity:.8; }
    .dashboard-summary-row .status-pill { justify-self:end; max-width:120px; text-align:center; }

    /* The old count cards are intentionally removed from Home. Counts remain available in Wallet/Budget views. */
    #view-home .overview-grid { display:none !important; }

    /* Reduce visual density on the Home screen without removing core insight blocks. */
    #view-home > .insight-grid { margin-top:0; }
    #view-home .section-title { margin-top:22px; }

    @media (max-width:640px) {
      .dashboard-balance-card { padding:16px !important; border-radius:20px !important; }
      .dashboard-balance-amount { font-size:clamp(1.5rem, 8vw, 1.9rem) !important; margin-bottom:13px !important; }
      .balance-visibility-toggle { width:34px; height:34px; border-radius:11px; }
      .dashboard-summary-card { padding:14px !important; border-radius:19px !important; }
      .dashboard-summary-row { grid-template-columns:36px minmax(0,1fr); gap:10px; padding:12px 0; align-items:start; }
      .dashboard-summary-icon { width:36px; height:36px; border-radius:12px; }
      .dashboard-summary-row .status-pill { grid-column:2; justify-self:start; margin-top:2px; max-width:100%; }
      .dashboard-summary-detail { -webkit-line-clamp:1; }
      #view-home .insight-grid { gap:12px; }
    }


    /* ===== SMART CATEGORY + COMPACT PWA SETTING V7 ===== */
    .smart-category-box {
      margin-top: 9px; padding: 10px 12px; border-radius: 13px;
      background: color-mix(in srgb, var(--primary-soft) 46%, var(--surface) 54%);
      border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border-color));
      display: none; align-items: center; gap: 9px; color: var(--text-muted);
      font-size: .73rem; line-height: 1.45;
    }
    .smart-category-box.show { display: flex; }
    .smart-category-box i { color: var(--primary); flex: 0 0 auto; }
    .smart-category-box strong { color: var(--text-main); }
    .smart-category-note { display:block; color:var(--text-muted); font-size:.68rem; line-height:1.45; margin-top:6px; }
    .smart-category-badge {
      display:inline-flex; align-items:center; gap:5px; padding:3px 7px; border-radius:999px;
      background:var(--primary-soft); color:var(--primary); font-size:.64rem; font-weight:800;
      vertical-align:middle; margin-right:4px;
    }
    .pwa-mini-card {
      margin: 4px 0 8px; padding: 12px 14px; border: 1px solid var(--border-color);
      border-radius: 16px; background: color-mix(in srgb, var(--surface) 94%, transparent);
    }
    .pwa-mini-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .pwa-mini-row + .pwa-mini-row { border-top:1px solid var(--border-color); margin-top:10px; padding-top:10px; }
    .pwa-mini-info { min-width:0; display:flex; align-items:center; gap:10px; }
    .pwa-mini-icon {
      width:32px; height:32px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto;
      background:var(--primary-soft); color:var(--primary); font-size:.84rem;
    }
    .pwa-mini-title { font-size:.76rem; font-weight:800; color:var(--text-main); }
    .pwa-mini-sub { display:block; margin-top:2px; color:var(--text-muted); font-size:.64rem; line-height:1.4; }
    .pwa-mini-btn {
      flex:0 0 auto; min-height:32px; padding:7px 10px; border-radius:10px; border:1px solid var(--border-color);
      background:var(--surface); color:var(--primary); font-size:.68rem; font-weight:800; cursor:pointer;
    }
    .pwa-mini-btn:disabled { opacity:.55; cursor:default; }
    @media (max-width: 420px) {
      .pwa-mini-row { align-items:flex-start; }
      .pwa-mini-btn { padding-inline:9px; }
    }


    /* =========================================================
       KITA TABUNG V8 — Calm Finance Dashboard
       Inspired by modern mobile finance UI while retaining sidebar.
       ========================================================= */
    .sidebar {
      width: 218px;
      padding: 22px 16px;
      border-right: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
      box-shadow: none;
    }
    .sidebar-brand {
      margin: 2px 8px 30px;
      gap: 10px;
      font-size: 1.08rem;
      letter-spacing: -.03em;
    }
    .sidebar-brand-logo {
      width: 40px;
      height: 40px;
      border-radius: 13px;
      display: grid;
      place-items: center;
      overflow: hidden;
      flex: 0 0 auto;
      background: #fff;
      box-shadow: 0 10px 24px rgba(8,116,190,.18);
    }
    .sidebar-brand-logo img {
      width: 100%;
      height: 100%;
      max-width: 100%;
      object-fit: contain;
      object-position: center;
      padding: 4px;
      transform: none;
      clip-path: none;
      user-select: none;
      pointer-events: none;
    }
    .btn-sidebar-add {
      min-height: 48px;
      padding: 0 15px;
      margin: 0 4px 24px;
      border-radius: 15px;
      box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 20%, transparent);
      font-size: .86rem;
    }
    .nav-item {
      padding: 12px 14px;
      margin-bottom: 5px;
      border-radius: 14px;
      gap: 12px;
      font-size: .86rem;
    }
    .nav-item i { font-size: 1.02rem; width: 23px; }
    .nav-item.active {
      color: var(--primary);
      background: color-mix(in srgb, var(--primary-soft) 74%, var(--surface) 26%);
      box-shadow: none;
    }
    [data-theme="dark"] .nav-item.active {
      color: #c7d2fe;
      background: color-mix(in srgb, var(--primary-soft) 80%, var(--surface) 20%);
      box-shadow: none;
    }

    .content-wrapper { max-width: 880px; padding: 0 28px; }
    .header {
      padding: 22px 0 10px;
      background: color-mix(in srgb, var(--bg) 86%, transparent);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }
    .user-greeting p { font-size: .72rem !important; font-weight: 700; letter-spacing: .01em; }
    .user-greeting h1 { font-size: clamp(1.05rem, 2vw, 1.28rem) !important; letter-spacing: -.035em; }
    #view-home { padding: 12px 0 34px; }

    .home-dashboard-shell { display: grid; gap: 22px; }
    .home-section { min-width: 0; }
    .home-section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: 0 2px 10px;
    }
    .home-section-title {
      font-size: .92rem;
      line-height: 1.25;
      font-weight: 800;
      letter-spacing: -.025em;
      color: var(--text-main);
    }
    .home-section-link {
      border: 0;
      background: transparent;
      color: var(--text-muted);
      font-size: .7rem;
      font-weight: 800;
      cursor: pointer;
      padding: 5px 0;
    }
    .home-section-link:hover { color: var(--primary); }

    /* Main balance card */
    .home-balance-card {
      position: relative;
      overflow: hidden;
      min-height: 190px;
      padding: 22px;
      border-radius: 24px;
      color: #13152b;
      background:
        radial-gradient(circle at 86% 18%, rgba(255,255,255,.56), transparent 28%),
        linear-gradient(135deg, #eef1ff 0%, #d9d4ff 48%, #bbb3ff 100%);
      border: 1px solid rgba(91,86,196,.08);
      box-shadow: 0 18px 46px rgba(75,66,175,.11);
    }
    [data-theme="dark"] .home-balance-card {
      color: #f8fafc;
      background:
        radial-gradient(circle at 86% 18%, rgba(255,255,255,.10), transparent 30%),
        linear-gradient(135deg, #24294c 0%, #31306c 50%, #49429a 100%);
      border-color: rgba(255,255,255,.07);
      box-shadow: 0 18px 48px rgba(0,0,0,.23);
    }
    .home-balance-top { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; position:relative; z-index:2; }
    .home-balance-label { display:block; font-size:.72rem; font-weight:700; opacity:.63; margin-bottom:8px; }
    .home-balance-amount {
      font-size: clamp(1.75rem, 5vw, 2.25rem) !important;
      line-height:1;
      font-weight:800;
      letter-spacing:-.055em;
      color: inherit;
      margin:0 !important;
    }
    .home-balance-actions { display:flex; gap:8px; }
    .home-circle-action {
      width:36px; height:36px; border:0; border-radius:50%;
      display:grid; place-items:center; cursor:pointer;
      background:rgba(255,255,255,.76); color:#48426f;
      box-shadow:0 7px 18px rgba(60,54,130,.08);
      transition:transform .18s ease, background .18s ease;
    }
    .home-circle-action:hover { transform:translateY(-1px); background:#fff; }
    .home-circle-action:active { transform:scale(.94); }
    [data-theme="dark"] .home-circle-action { background:rgba(255,255,255,.11); color:#fff; }
    .home-circle-action.primary { color:#fff; background:#5b55e7; }
    [data-theme="dark"] .home-circle-action.primary { background:#706bff; }

    .home-balance-metrics {
      position:relative; z-index:2;
      display:grid; grid-template-columns:1.15fr .85fr;
      gap:10px; margin-top:24px;
    }
    .home-balance-metric {
      min-width:0;
      padding:11px 12px;
      border-radius:15px;
      background:rgba(255,255,255,.42);
      border:1px solid rgba(255,255,255,.28);
    }
    [data-theme="dark"] .home-balance-metric { background:rgba(7,10,35,.20); border-color:rgba(255,255,255,.07); }
    .home-balance-metric span { display:block; font-size:.62rem; font-weight:700; opacity:.62; margin-bottom:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .home-balance-metric strong { display:block; font-size:.84rem; font-weight:800; letter-spacing:-.025em; overflow-wrap:anywhere; }
    .home-safe-line { display:flex; align-items:center; gap:6px; margin-top:5px; font-size:.59rem; font-weight:700; opacity:.68; }
    .home-safe-dot { width:6px; height:6px; border-radius:50%; background:#16a34a; flex:0 0 auto; }
    #view-home .home-safe-line .status-pill { padding:0; background:transparent; border:0; color:inherit; font-size:inherit; font-weight:inherit; line-height:inherit; }
    #view-home .home-safe-line .status-pill.danger { color:#b91c1c; }
    #view-home .home-safe-line .status-pill.warning { color:#92400e; }
    #view-home .home-safe-line .status-pill.success { color:#166534; }
    [data-theme="dark"] #view-home .home-safe-line .status-pill.danger { color:#fda4af; }
    [data-theme="dark"] #view-home .home-safe-line .status-pill.warning { color:#fcd34d; }
    [data-theme="dark"] #view-home .home-safe-line .status-pill.success { color:#86efac; }

    /* Horizontal upcoming bills */
    .home-bill-strip {
      display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x proximity;
      scrollbar-width:none; padding:1px 2px 4px;
      overscroll-behavior-x:contain;
    }
    .home-bill-strip::-webkit-scrollbar { display:none; }
    .home-bill-card {
      flex:0 0 178px; scroll-snap-align:start;
      min-height:128px; padding:15px;
      border-radius:19px;
      border:1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
      background:var(--surface);
      cursor:pointer;
      transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    .home-bill-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb, var(--primary) 24%, var(--border-color)); box-shadow:0 12px 26px rgba(15,23,42,.05); }
    .home-bill-card:active { transform:scale(.985); }
    .home-bill-icon { width:35px; height:35px; border-radius:12px; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary); margin-bottom:13px; }
    .home-bill-name { font-size:.78rem; line-height:1.25; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .home-bill-amount { display:block; margin-top:5px; font-size:.72rem; font-weight:800; color:var(--text-main); }
    .home-bill-due { display:block; margin-top:4px; font-size:.61rem; font-weight:700; color:var(--text-muted); }
    .home-bill-due.urgent { color:var(--danger); }
    .home-bill-empty {
      width:100%; padding:15px 16px; border-radius:18px;
      background:color-mix(in srgb, var(--surface) 86%, var(--primary-soft) 14%);
      color:var(--text-muted); font-size:.72rem; line-height:1.5;
      border:1px dashed color-mix(in srgb, var(--primary) 20%, var(--border-color));
    }

    .home-overview-grid { display:grid; grid-template-columns:minmax(0,1.13fr) minmax(230px,.87fr); gap:14px; align-items:stretch; }
    .home-panel {
      margin:0 !important; padding:17px !important; border-radius:21px !important;
      border:1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
      background:var(--surface); box-shadow:none !important;
    }
    .home-panel-kicker { display:block; font-size:.61rem; text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted); font-weight:800; margin-bottom:5px; }
    .home-panel-title { font-size:.9rem; line-height:1.25; font-weight:800; letter-spacing:-.025em; }

    .home-cashflow-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:8px; }
    .home-cashflow-pills { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
    .home-cashflow-pill { padding:6px 8px; border-radius:10px; background:var(--bg); font-size:.59rem; font-weight:800; color:var(--text-muted); white-space:nowrap; }
    .home-cashflow-pill.income strong { color:var(--success); }
    .home-cashflow-pill.expense strong { color:var(--danger); }
    .home-chart-layout { display:grid; grid-template-columns:180px minmax(0,1fr); gap:12px; align-items:center; }
    #view-home .chart-wrap { min-height:180px; height:180px; }
    #view-home .chart-breakdown { margin-top:0; gap:6px; grid-template-columns:1fr; }
    #view-home .chart-row { padding:8px 0; border-bottom:1px solid color-mix(in srgb, var(--border-color) 64%, transparent); border-radius:0; background:transparent; }
    #view-home .chart-row:last-child { border-bottom:0; }
    #view-home .chart-row-meta { font-size:.56rem; }
    #view-home .chart-row-name { font-size:.67rem; }
    #view-home .chart-row-amount { font-size:.67rem; }

    .home-goal-card { display:flex; flex-direction:column; min-height:100%; }
    .home-goal-empty { margin:auto 0; color:var(--text-muted); font-size:.7rem; line-height:1.55; }
    .home-goal-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
    .home-goal-emoji { width:42px; height:42px; border-radius:14px; display:grid; place-items:center; background:color-mix(in srgb, var(--primary-soft) 72%, var(--surface) 28%); font-size:1.15rem; }
    .home-goal-percent { font-size:.78rem; font-weight:800; color:var(--primary); }
    .home-goal-name { display:block; margin-top:18px; font-size:.9rem; font-weight:800; letter-spacing:-.025em; }
    .home-goal-numbers { display:flex; justify-content:space-between; gap:8px; margin-top:6px; font-size:.62rem; color:var(--text-muted); font-weight:700; }
    .home-goal-progress { height:9px; margin-top:13px; border-radius:999px; background:var(--bg); overflow:hidden; }
    .home-goal-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, #4f46e5, #8b5cf6); }
    .home-goal-actions { display:flex; gap:7px; margin-top:auto; padding-top:16px; }
    .home-goal-btn { flex:1; min-height:34px; border:0; border-radius:11px; cursor:pointer; font-size:.65rem; font-weight:800; background:var(--primary-soft); color:var(--primary); }
    .home-goal-btn.primary { background:var(--primary); color:#fff; }

    /* Recent transactions as a clean list, not stacked cards */
    #home-tx-list {
      border:1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
      border-radius:21px; background:var(--surface); overflow:hidden;
    }
    #home-tx-list .tx-item {
      margin:0; padding:13px 15px; border-radius:0; box-shadow:none;
      border-bottom:1px solid color-mix(in srgb, var(--border-color) 66%, transparent);
      background:transparent;
    }
    #home-tx-list .tx-item:last-child { border-bottom:0; }
    #home-tx-list .tx-item:hover { background:color-mix(in srgb, var(--primary-soft) 18%, transparent); }
    #home-tx-list .tx-icon { width:38px; height:38px; border-radius:13px; margin-right:11px; font-size:.92rem; }
    #home-tx-list .tx-title { font-size:.74rem; }
    #home-tx-list .tx-sub { font-size:.58rem !important; margin-top:3px; }
    #home-tx-list .tx-amount { font-size:.72rem; font-weight:800; }

    .home-weekly-panel { padding:0 !important; border:0 !important; background:transparent !important; }
    #view-home .weekly-slide { min-height:154px; border-radius:20px; padding:17px; box-shadow:none; }
    #view-home .weekly-carousel-controls { display:none; }
    #view-home .weekly-carousel-footer { margin-top:9px; justify-content:center; }

    .home-comparison-panel .comparison-columns { gap:8px; }
    .home-comparison-panel .comparison-month { padding:12px; border-radius:14px; }
    .home-comparison-panel .comparison-list { margin-top:8px; }
    .home-comparison-panel .comparison-row { padding:9px 1px; font-size:.66rem; }

    @media (max-width: 900px) {
      .sidebar { width: 190px; }
      .home-overview-grid { grid-template-columns:1fr; }
      .home-goal-card { min-height:210px; }
    }
    @media (max-width: 768px) {
      .sidebar { width:64px; min-width:64px; padding:18px 7px; align-items:center; }
      .sidebar-brand { margin:2px 0 24px; }
      .sidebar-brand span { display:none; }
      .sidebar-brand-logo { width:42px; height:42px; border-radius:14px; }
      .sidebar-brand-logo img { width:100%; height:100%; max-width:100%; padding:4px; transform:none; clip-path:none; }
      .btn-sidebar-add { width:42px; height:42px; min-height:42px; border-radius:14px; padding:0; margin:0 0 21px; }
      .btn-sidebar-add span { display:none; }
      .nav-item { width:44px; height:44px; padding:0; justify-content:center; border-radius:14px; margin-bottom:5px; }
      .nav-item span { display:none; }
      .nav-item i { width:auto; margin:0; font-size:1rem; }
      .content-wrapper { padding:0 14px; }
      .header { padding:16px 0 9px; }
      #view-home { padding-top:8px; }
      .home-dashboard-shell { gap:19px; }
      .home-balance-card { min-height:178px; padding:18px; border-radius:22px; }
      .home-balance-amount { font-size:clamp(1.55rem, 8vw, 1.95rem) !important; }
      .home-balance-metrics { margin-top:20px; gap:7px; }
      .home-balance-metric { padding:10px; border-radius:13px; }
      .home-balance-metric strong { font-size:.76rem; }
      .home-bill-card { flex-basis:156px; min-height:118px; padding:13px; }
      .home-chart-layout { grid-template-columns:1fr; }
      #view-home .chart-wrap { min-height:205px; height:205px; }
      #view-home .chart-breakdown { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 10px; }
      .home-cashflow-head { align-items:center; }
      .home-cashflow-pills { max-width:57%; }
      .home-panel { padding:15px !important; border-radius:19px !important; }
      #home-tx-list { border-radius:19px; }
      #home-tx-list .tx-item { padding:12px; }
      #home-tx-list .tx-amount { max-width:34%; text-align:right; overflow-wrap:anywhere; }
      .global-search-trigger span, .global-search-trigger kbd { display:none !important; }
      .global-search-trigger { width:38px; height:38px; min-width:38px; padding:0 !important; border-radius:50% !important; justify-content:center; }
      #cloud-sync-status span { display:none; }
      #cloud-sync-status { width:38px; height:38px; padding:0; justify-content:center; border-radius:50%; }
      .profile-pic { width:38px; height:38px; font-size:.95rem; }
    }
    @media (max-width: 420px) {
      .content-wrapper { padding:0 11px; }
      .home-balance-card { padding:16px; }
      .home-circle-action { width:34px; height:34px; }
      .home-balance-metrics { grid-template-columns:1fr 1fr; }
      .home-safe-line { display:none; }
      .home-bill-card { flex-basis:148px; }
      .home-cashflow-pills { flex-direction:column; align-items:flex-end; max-width:none; }
      #view-home .chart-breakdown { grid-template-columns:1fr; }
      .home-goal-numbers { flex-direction:column; }
    }



/* ================= RECEIPT SCANNER V9 ================= */
.receipt-scan-box {
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 92%, var(--primary) 8%);
}
.receipt-scan-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.receipt-scan-title { display:flex; align-items:center; gap:10px; min-width:0; }
.receipt-scan-icon { width:36px; height:36px; border-radius:12px; display:grid; place-items:center; flex:0 0 auto; background:color-mix(in srgb, var(--primary) 16%, transparent); color:var(--primary); }
.receipt-scan-title strong { display:block; font-size:.82rem; color:var(--text-main); }
.receipt-scan-title span { display:block; margin-top:2px; color:var(--text-muted); font-size:.66rem; line-height:1.4; }
.receipt-scan-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.receipt-scan-btn { border:1px solid var(--border-color); border-radius:12px; min-height:42px; padding:9px 11px; background:var(--surface); color:var(--text-main); font-weight:800; font-size:.72rem; cursor:pointer; transition:transform .16s ease, border-color .16s ease, background .16s ease; }
.receipt-scan-btn:hover { border-color:color-mix(in srgb, var(--primary) 48%, var(--border-color)); background:color-mix(in srgb, var(--surface) 92%, var(--primary) 8%); }
.receipt-scan-btn:active { transform:scale(.975); }
.receipt-scan-btn i { color:var(--primary); margin-right:6px; }
.receipt-scan-btn:disabled { opacity:.55; cursor:not-allowed; }
.receipt-scan-panel { display:none; margin-top:12px; border-top:1px solid var(--border-color); padding-top:12px; }
.receipt-scan-panel.show { display:block; }
.receipt-scan-preview { width:100%; max-height:220px; object-fit:contain; border-radius:14px; background:#0B1220; border:1px solid var(--border-color); }
.receipt-scan-loading { display:flex; align-items:center; gap:10px; padding:12px 2px 2px; color:var(--text-muted); font-size:.72rem; }
.receipt-scan-loading i { color:var(--primary); }
.receipt-scan-result { display:none; margin-top:10px; }
.receipt-scan-result.show { display:block; }
.receipt-result-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.receipt-result-item { padding:10px; border-radius:12px; background:color-mix(in srgb, var(--bg-main) 76%, transparent); min-width:0; }
.receipt-result-item.full { grid-column:1 / -1; }
.receipt-result-item span { display:block; color:var(--text-muted); font-size:.61rem; margin-bottom:3px; }
.receipt-result-item strong { display:block; color:var(--text-main); font-size:.75rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.receipt-confidence { display:inline-flex; align-items:center; gap:6px; margin-top:10px; border-radius:999px; padding:6px 9px; font-size:.64rem; font-weight:800; }
.receipt-confidence.good { color:var(--success); background:color-mix(in srgb, var(--success) 13%, transparent); }
.receipt-confidence.warn { color:#E6A700; background:color-mix(in srgb, #E6A700 13%, transparent); }
.receipt-confidence.bad { color:var(--danger); background:color-mix(in srgb, var(--danger) 13%, transparent); }
.receipt-scan-note { margin:9px 0 0; font-size:.64rem; color:var(--text-muted); line-height:1.5; }
.receipt-duplicate-warning { display:none; margin-top:10px; padding:10px 11px; border-radius:12px; border:1px solid color-mix(in srgb, #E6A700 48%, transparent); background:color-mix(in srgb, #E6A700 10%, transparent); color:var(--text-main); font-size:.67rem; line-height:1.45; }
.receipt-duplicate-warning.show { display:block; }
.receipt-duplicate-warning button { margin-top:8px; border:0; border-radius:9px; padding:7px 9px; background:#E6A700; color:#111827; font-size:.64rem; font-weight:900; cursor:pointer; }
.receipt-source-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 6px; margin-right:5px; border-radius:999px; background:color-mix(in srgb, var(--primary) 12%, transparent); color:var(--primary); font-size:.56rem; font-weight:800; vertical-align:1px; }
.receipt-scan-error { display:none; margin-top:10px; color:var(--danger); font-size:.68rem; line-height:1.5; }
.receipt-scan-error.show { display:block; }
@media (max-width:640px) {
  .receipt-scan-box { padding:12px; border-radius:16px; }
  .receipt-scan-actions { grid-template-columns:1fr 1fr; }
  .receipt-scan-btn { min-height:44px; font-size:.69rem; }
  .receipt-result-grid { grid-template-columns:1fr 1fr; }
  .receipt-scan-preview { max-height:190px; }
}



    /* V10 — Safety & Privacy */
    .safety-privacy-card { display:grid; gap:0; }
    .safety-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; }
    .safety-row + .safety-row { border-top:1px solid var(--border-color); }
    .safety-row-main { display:flex; align-items:flex-start; gap:11px; min-width:0; }
    .safety-icon { width:34px; height:34px; border-radius:11px; display:grid; place-items:center; flex:0 0 auto; background:var(--primary-soft); color:var(--primary); }
    .safety-title { font-weight:800; color:var(--text-main); font-size:.82rem; }
    .safety-sub { color:var(--text-muted); font-size:.7rem; line-height:1.5; margin-top:3px; }
    .safety-select { width:min(210px,48vw); padding:9px 10px; font-size:.74rem; }
    .backup-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
    .backup-actions .btn-secondary { width:100%; margin:0; }
    .backup-status { margin-top:10px; color:var(--text-muted); font-size:.68rem; line-height:1.45; }
    .restore-summary { display:grid; gap:9px; margin:14px 0 18px; }
    .restore-summary-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid var(--border-color); border-radius:12px; background:var(--bg); font-size:.76rem; }
    .restore-summary-row strong { color:var(--text-main); }
    .restore-warning { padding:12px 13px; border-radius:13px; background:var(--warning-soft); color:color-mix(in srgb,var(--warning) 72%, var(--text-main)); font-size:.72rem; line-height:1.55; border:1px solid color-mix(in srgb,var(--warning) 34%, transparent); }
    .modern-toast.has-action { grid-template-columns:38px minmax(0,1fr) auto 30px; }
    .modern-toast-action { border:0; background:transparent; color:var(--primary); font-weight:900; font-size:.72rem; padding:8px 7px; border-radius:10px; cursor:pointer; white-space:nowrap; }
    .modern-toast-action:hover { background:var(--primary-soft); }
    .privacy-on-indicator { display:inline-flex; align-items:center; gap:5px; margin-left:7px; padding:3px 7px; border-radius:999px; background:rgba(255,255,255,.16); font-size:.58rem; font-weight:800; vertical-align:middle; }
    @media (max-width: 520px) {
      .safety-row { align-items:flex-start; }
      .safety-row.control-row { flex-direction:column; }
      .safety-row.control-row .safety-select { width:100%; }
      .backup-actions { grid-template-columns:1fr; }
      .modern-toast.has-action { grid-template-columns:34px minmax(0,1fr) auto; }
      .modern-toast.has-action .modern-toast-close { display:none; }
    }

    /* ===== V11 PRODUCT FOUNDATION: accessibility + mobile consistency ===== */
    .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
    :where(button,a,input,select,textarea,[tabindex]):focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 32%,transparent);outline-offset:3px}
    button.nav-item{border:0;background:transparent;text-align:left}
    button.nav-item.active{background:var(--primary)}
    .modal-content{max-height:min(90dvh,860px);overflow-y:auto;overscroll-behavior:contain}
    .modal-overlay{padding:env(safe-area-inset-top,0) 10px env(safe-area-inset-bottom,0)}
    .main-content{padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}
    .btn-sidebar-add,.nav-item,.close-btn,.mini-action,.home-circle-action,.pwa-mini-btn{min-height:44px}
    .close-btn,.home-circle-action{min-width:44px}
    .onboarding-card{border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border-color));background:linear-gradient(135deg,color-mix(in srgb,var(--primary-soft) 70%,var(--surface)),var(--surface));border-radius:22px;padding:18px;margin-bottom:18px}
    .onboarding-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}.onboarding-head h2{font-size:1rem;margin:0 0 4px}.onboarding-head p{font-size:.72rem;color:var(--text-muted);margin:0;line-height:1.5}.onboarding-dismiss{border:0;background:transparent;color:var(--text-muted);width:44px;height:44px;border-radius:12px;cursor:pointer}.onboarding-progress{height:7px;background:var(--bg);border-radius:999px;overflow:hidden;margin-bottom:13px}.onboarding-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),#8b5cf6);border-radius:inherit;transition:width .3s ease}.onboarding-steps{display:grid;gap:8px}.onboarding-step{display:flex;align-items:center;gap:10px;padding:10px 11px;border:1px solid var(--border-color);border-radius:14px;background:color-mix(in srgb,var(--surface) 92%,transparent)}.onboarding-step.done{opacity:.72}.onboarding-check{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;background:var(--bg);color:var(--text-muted);flex:0 0 auto;font-size:.68rem}.onboarding-step.done .onboarding-check{background:var(--success-soft);color:var(--success)}.onboarding-copy{min-width:0;flex:1}.onboarding-copy strong{display:block;font-size:.75rem}.onboarding-copy span{display:block;font-size:.63rem;color:var(--text-muted);margin-top:2px}.onboarding-action{border:0;background:var(--primary-soft);color:var(--primary);font-weight:800;font-size:.65rem;border-radius:10px;padding:8px 10px;cursor:pointer;white-space:nowrap}.onboarding-complete{padding:11px 12px;border-radius:13px;background:var(--success-soft);color:var(--success);font-size:.72rem;font-weight:800}.empty-action-state{padding:26px 18px;text-align:center;border:1px dashed var(--border-color);border-radius:16px;background:color-mix(in srgb,var(--surface) 88%,var(--bg));color:var(--text-muted)}.empty-action-state strong{display:block;color:var(--text-main);font-size:.86rem;margin-bottom:5px}.empty-action-state p{font-size:.7rem;line-height:1.5;margin:0 auto 12px;max-width:420px}.empty-action-state button{min-height:42px;border:0;border-radius:11px;background:var(--primary);color:#fff;padding:0 14px;font-weight:800;cursor:pointer}.legal-links-card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.legal-links-card a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px;border:1px solid var(--border-color);border-radius:12px;text-decoration:none;color:var(--text-main);font-size:.72rem;font-weight:800;background:var(--bg)}.a11y-status{position:fixed;left:-9999px;width:1px;height:1px;overflow:hidden}
    @media(max-width:520px){.onboarding-step{align-items:flex-start}.onboarding-action{align-self:center}.legal-links-card{grid-template-columns:1fr}.modal-content{max-height:calc(100dvh - 18px)}}
    @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
/* V15.21 — KitaTabung brand refresh */
.sidebar-brand{width:100%;margin:0 0 28px;padding:0 2px;justify-content:flex-start;overflow:visible}
.sidebar-brand-logo{width:174px;height:54px;border-radius:0;background:transparent;box-shadow:none;overflow:visible;display:block}
.sidebar-brand-logo .dashboard-brand-logo{width:100%;height:100%;object-fit:contain;object-position:left center;padding:0;border-radius:0;background:transparent;user-select:none;pointer-events:none}
.dashboard-brand-dark,.dashboard-brand-mobile{display:none!important}
html[data-theme="dark"] .dashboard-brand-light{display:none!important}
html[data-theme="dark"] .dashboard-brand-dark{display:block!important}
@media(max-width:900px) and (min-width:769px){.sidebar-brand-logo{width:154px;height:48px}}
@media(max-width:768px){
  .sidebar-brand{width:auto;margin:2px 0 24px;padding:0;justify-content:center}
  .sidebar-brand-logo{width:42px;height:42px;border-radius:13px;overflow:hidden;background:#f3f4f6;box-shadow:0 8px 22px rgba(15,23,42,.12)}
  .sidebar-brand-logo .dashboard-brand-light,.sidebar-brand-logo .dashboard-brand-dark{display:none!important}
  .sidebar-brand-logo .dashboard-brand-mobile{display:block!important;width:100%;height:100%;object-fit:cover;object-position:center;padding:0}
}


/* V15.22 — Mobile sidebar logo refresh */
@media (max-width:768px){
  .sidebar-brand{
    width:auto;
    margin:0 0 22px;
    padding:0;
    justify-content:center;
    overflow:visible;
  }

  .sidebar-brand-logo{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    overflow:visible;
    border-radius:0;
    background:transparent !important;
    box-shadow:none !important;
  }

  .sidebar-brand-logo .dashboard-brand-light,
  .sidebar-brand-logo .dashboard-brand-dark{
    display:none !important;
  }

  .sidebar-brand-logo .dashboard-brand-mobile{
    display:block !important;
    width:100%;
    height:100%;
    max-width:none;
    object-fit:contain;
    object-position:center;
    padding:0;
    margin:0;
    border-radius:0;
    background:transparent;
    transform:scale(1.22);
    transform-origin:center;
    filter:none;
    opacity:1;
    transition:filter .28s ease, opacity .28s ease, transform .28s ease;
    user-select:none;
    pointer-events:none;
  }

  html[data-theme="dark"] .sidebar-brand-logo .dashboard-brand-mobile{
    filter:brightness(0) invert(1);
  }

  html[data-theme="light"] .sidebar-brand-logo .dashboard-brand-mobile{
    filter:none;
  }
}

@media (max-width:420px){
  .sidebar-brand-logo{
    width:46px;
    height:46px;
  }
  .sidebar-brand-logo .dashboard-brand-mobile{
    transform:scale(1.20);
  }
}


/* V15.23 — Mobile logo single-source fix
   Prevents the desktop dark/light wordmark from appearing together with the
   mobile icon. Only .dashboard-brand-mobile may render <= 768px. */
@media (max-width:768px){
  html[data-theme="light"] .sidebar-brand-logo .dashboard-brand-light,
  html[data-theme="light"] .sidebar-brand-logo .dashboard-brand-dark,
  html[data-theme="dark"] .sidebar-brand-logo .dashboard-brand-light,
  html[data-theme="dark"] .sidebar-brand-logo .dashboard-brand-dark,
  html:not([data-theme]) .sidebar-brand-logo .dashboard-brand-light,
  html:not([data-theme]) .sidebar-brand-logo .dashboard-brand-dark{
    display:none !important;
  }

  html[data-theme="light"] .sidebar-brand-logo .dashboard-brand-mobile,
  html[data-theme="dark"] .sidebar-brand-logo .dashboard-brand-mobile,
  html:not([data-theme]) .sidebar-brand-logo .dashboard-brand-mobile{
    display:block !important;
  }
}