/* ============================================================
   style.css — Sổ Thu Chi
   ============================================================ */
   *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

   :root{
     --bg:#0f1117;
     --surface:#161b27;
     --surface2:#1c2333;
     --border:#252d3d;
     --border2:#2d384f;
     --text:#e8ecf4;
     --text2:#8896b0;
     --text3:#4d5e78;
     --thu:#34d399;
     --thu-bg:rgba(52,211,153,.1);
     --chi:#f87171;
     --chi-bg:rgba(248,113,113,.1);
     --blue:#60a5fa;
     --blue-bg:rgba(96,165,250,.1);
     --orange:#fb923c;
     --accent:#6366f1;
     --accent2:#818cf8;
     --sh:0 1px 3px rgba(0,0,0,.3);
     --sh2:0 8px 32px rgba(0,0,0,.4);
   }
   
   body{
     font-family:'DM Sans','Instrument Serif',sans-serif;
     background:var(--bg);color:var(--text);
     height:100vh;overflow:hidden;display:flex;
     font-size:14px;
   }
   
   /* ══════════════════════════════════════
      SPLASH
   ══════════════════════════════════════ */
   #splash{
     position:fixed;inset:0;z-index:600;
     background:var(--bg);
     display:flex;align-items:center;justify-content:center;
     transition:opacity .5s ease;
   }
   #splash.out{opacity:0;pointer-events:none}
   
   .splash-inner{
     text-align:center;display:flex;flex-direction:column;
     align-items:center;gap:16px;
   }
   .splash-logo{
     width:72px;height:72px;border-radius:20px;
     background:linear-gradient(135deg,var(--accent),#4f46e5);
     display:flex;align-items:center;justify-content:center;
     box-shadow:0 0 40px rgba(99,102,241,.4);
     animation:pulse 2s ease-in-out infinite;
   }
   @keyframes pulse{
     0%,100%{transform:scale(1);box-shadow:0 0 40px rgba(99,102,241,.4)}
     50%{transform:scale(.94);box-shadow:0 0 20px rgba(99,102,241,.2)}
   }
   .splash-name{font-size:26px;font-weight:800;letter-spacing:-.5px}
   .splash-track{
     width:120px;height:2px;background:var(--border);
     border-radius:2px;overflow:hidden;margin-top:8px;
   }
   .splash-bar{
     height:100%;width:0;
     background:linear-gradient(90deg,var(--accent),var(--accent2));
     border-radius:2px;animation:loadbar 1.4s ease forwards;
   }
   @keyframes loadbar{0%{width:0}70%{width:85%}100%{width:100%}}
   
   /* ══════════════════════════════════════
      AUTH
   ══════════════════════════════════════ */
   #auth{
     position:fixed;inset:0;z-index:500;
     display:none;align-items:center;justify-content:center;
   }
   #auth.on{display:flex}
   
   .auth-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
   .auth-blob{
     position:absolute;border-radius:50%;filter:blur(80px);opacity:.25;
   }
   .auth-blob.b1{
     width:500px;height:500px;
     background:radial-gradient(circle,var(--accent),transparent);
     top:-150px;left:-150px;
   }
   .auth-blob.b2{
     width:400px;height:400px;
     background:radial-gradient(circle,#4f46e5,transparent);
     bottom:-100px;right:-100px;
   }
   
   .auth-box{
     position:relative;z-index:1;
     width:420px;background:var(--surface);
     border:1px solid var(--border);border-radius:24px;
     padding:36px;animation:slideUp .4s cubic-bezier(.22,1,.36,1) both;
   }
   @keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
   
   .auth-header{text-align:center;margin-bottom:28px}
   .auth-ico{
     width:52px;height:52px;border-radius:16px;margin:0 auto 14px;
     background:linear-gradient(135deg,var(--accent),#4f46e5);
     display:flex;align-items:center;justify-content:center;
     box-shadow:0 4px 20px rgba(99,102,241,.35);
   }
   .auth-title{font-size:22px;font-weight:800;letter-spacing:-.5px;margin-bottom:6px}
   .auth-sub{font-size:13px;color:var(--text3)}
   
   /* Auth tabs */
   .auth-tabs{
     display:flex;gap:4px;background:var(--bg);
     border-radius:12px;padding:4px;margin-bottom:24px;
   }
   .atab{
     flex:1;padding:9px;border:none;border-radius:9px;
     font-size:13px;font-weight:600;cursor:pointer;
     background:transparent;color:var(--text3);
     font-family:inherit;transition:.2s;
   }
   .atab.active{background:var(--surface2);color:var(--text);box-shadow:var(--sh)}
   
   /* Auth forms */
   .aform{display:none}
   .aform.active{display:block;animation:fadeSlide .25s ease both}
   @keyframes fadeSlide{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
   
   .afield{margin-bottom:16px}
   .afield label{
     display:block;font-size:11px;font-weight:700;
     text-transform:uppercase;letter-spacing:.8px;
     color:var(--text3);margin-bottom:8px;
   }
   .afield input{
     width:100%;background:var(--bg);border:1.5px solid var(--border2);
     border-radius:11px;padding:12px 14px;
     font-size:14px;font-weight:500;color:var(--text);
     font-family:inherit;outline:none;transition:.15s;
   }
   .afield input::placeholder{color:var(--text3);font-weight:400}
   .afield input:focus{border-color:var(--accent);background:var(--surface2);box-shadow:0 0 0 3px rgba(99,102,241,.15)}
   
   .aerr{
     font-size:12.5px;color:var(--chi);background:var(--chi-bg);
     border:1px solid rgba(248,113,113,.2);border-radius:9px;
     padding:10px 14px;margin-bottom:14px;display:none;
   }
   .aerr:not(:empty){display:block}
   
   .abtn{
     width:100%;padding:14px;border:none;border-radius:11px;
     background:linear-gradient(135deg,var(--accent),#4f46e5);
     color:#fff;font-size:14px;font-weight:700;
     font-family:inherit;cursor:pointer;
     transition:.2s;letter-spacing:-.1px;margin-top:4px;
   }
   .abtn:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 8px 24px rgba(99,102,241,.3)}
   .abtn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
   
   .aswitch{font-size:12.5px;color:var(--text3);text-align:center;margin-top:16px}
   .aswitch span{color:var(--accent2);cursor:pointer;font-weight:600}
   .aswitch span:hover{color:var(--text)}
   
   /* ══════════════════════════════════════
      APP LAYOUT
   ══════════════════════════════════════ */
   #app{display:none;width:100%;height:100vh;overflow:hidden}
   #app.on{display:flex}
   
   /* ══════════════════════════════════════
      SIDEBAR
   ══════════════════════════════════════ */
   .sidebar{
     width:228px;background:var(--surface);
     border-right:1px solid var(--border);
     display:flex;flex-direction:column;
     flex-shrink:0;height:100vh;
   }
   
   .sb-brand{
     padding:22px 18px;border-bottom:1px solid var(--border);
     display:flex;align-items:center;gap:10px;
     font-size:15px;font-weight:800;letter-spacing:-.4px;
   }
   .sb-brand-ico{
     width:30px;height:30px;border-radius:9px;
     background:linear-gradient(135deg,var(--accent),#4f46e5);
     display:flex;align-items:center;justify-content:center;flex-shrink:0;
   }
   
   .sb-nav{flex:1;padding:14px 10px;overflow-y:auto}
   
   .snav-section{
     font-size:9.5px;font-weight:700;letter-spacing:1.2px;
     text-transform:uppercase;color:var(--text3);
     padding:14px 10px 6px;
   }
   .snav-item{
     display:flex;align-items:center;gap:10px;
     padding:9px 12px;border-radius:10px;
     font-size:13px;font-weight:500;color:var(--text2);
     cursor:pointer;transition:.15s;margin-bottom:2px;
     position:relative;
   }
   .snav-item svg{width:16px;height:16px;flex-shrink:0}
   .snav-item:hover{background:var(--surface2);color:var(--text)}
   .snav-item.active{background:rgba(99,102,241,.12);color:var(--accent2);font-weight:600}
   .snav-item.active svg{color:var(--accent)}
   
   .snav-badge{
     margin-left:auto;background:var(--chi);color:#fff;
     font-size:10px;font-weight:700;padding:2px 6px;border-radius:20px;
   }
   
   /* Sidebar user area */
   .sb-user-area{
     padding:14px 10px;border-top:1px solid var(--border);
     display:flex;align-items:center;gap:8px;
   }
   .sb-user{
     display:flex;align-items:center;gap:10px;flex:1;
     cursor:pointer;padding:8px 10px;border-radius:10px;
     transition:.15s;min-width:0;
   }
   .sb-user:hover{background:var(--surface2)}
   .sb-av{
     width:32px;height:32px;border-radius:10px;flex-shrink:0;
     background:linear-gradient(135deg,var(--accent),var(--blue));
     display:flex;align-items:center;justify-content:center;
     font-size:13px;font-weight:800;color:#fff;
   }
   .sb-user-info{min-width:0}
   .sb-uname{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
   .sb-uemail{font-size:10.5px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
   
   .sb-logout{
     flex-shrink:0;width:32px;height:32px;border-radius:9px;
     background:transparent;border:1px solid var(--border2);
     color:var(--text3);cursor:pointer;
     display:flex;align-items:center;justify-content:center;
     transition:.15s;
   }
   .sb-logout:hover{background:var(--chi-bg);border-color:var(--chi);color:var(--chi)}
   
   /* ══════════════════════════════════════
      MAIN + TOPBAR
   ══════════════════════════════════════ */
   .main{flex:1;display:flex;flex-direction:column;overflow:hidden}
   
   .topbar{
     padding:14px 24px;border-bottom:1px solid var(--border);
     display:flex;align-items:center;justify-content:space-between;
     background:var(--surface);flex-shrink:0;
   }
   .topbar-title{font-size:16px;font-weight:700;letter-spacing:-.3px}
   .topbar-actions{display:flex;align-items:center;gap:10px}
   
   .add-btn{
     display:flex;align-items:center;gap:7px;
     padding:9px 16px;border:none;border-radius:10px;
     background:linear-gradient(135deg,var(--accent),#4f46e5);
     color:#fff;font-size:13px;font-weight:600;
     font-family:inherit;cursor:pointer;transition:.2s;
   }
   .add-btn:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 6px 20px rgba(99,102,241,.3)}
   
   /* ══════════════════════════════════════
      PAGES
   ══════════════════════════════════════ */
   .page{display:none;flex:1;padding:22px 24px;overflow-y:auto}
   .page.active{display:block}
   
   /* ── KPI ROW (Dashboard) ── */
   .kpi-row{
     display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;
     gap:14px;margin-bottom:20px;
   }
   .kpi-card{
     background:var(--surface);border:1px solid var(--border);
     border-radius:16px;padding:20px;
   }
   .kpi-card.kpi-net{
     border-color:rgba(99,102,241,.25);
     background:linear-gradient(135deg,var(--surface) 0%,rgba(99,102,241,.07) 100%);
   }
   .kpi-card.kpi-thu{border-color:rgba(52,211,153,.2)}
   .kpi-card.kpi-chi{border-color:rgba(248,113,113,.2)}
   .kpi-card.kpi-month{border-color:rgba(251,146,60,.2)}
   
   .kpi-top{display:flex;align-items:center;gap:8px;margin-bottom:10px}
   .kpi-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
   .thu-dot{background:var(--thu)}
   .chi-dot{background:var(--chi)}
   .month-dot{background:var(--orange)}
   
   .kpi-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text3);margin-bottom:10px}
   .kpi-val{font-size:22px;font-weight:800;letter-spacing:-.5px;margin-bottom:4px}
   .kpi-net .kpi-val{color:var(--accent2)}
   .kpi-thu .kpi-val{color:var(--thu)}
   .kpi-chi .kpi-val{color:var(--chi)}
   .kpi-month .kpi-val{color:var(--orange)}
   .kpi-sub{font-size:11.5px;color:var(--text3)}
   
   /* ── CHARTS ROW ── */
   .charts-row{display:grid;grid-template-columns:1fr 280px;gap:16px;margin-bottom:20px}
   
   .card{
     background:var(--surface);border:1px solid var(--border);
     border-radius:16px;overflow:hidden;margin-bottom:20px;
   }
   .card-head{
     display:flex;align-items:flex-start;justify-content:space-between;
     padding:16px 20px;border-bottom:1px solid var(--border);
   }
   .card-title{font-size:14px;font-weight:700;letter-spacing:-.2px;margin-bottom:3px}
   .card-sub{font-size:12px;color:var(--text3)}
   
   .chart-wrap{height:200px;padding:14px 16px 8px}
   
   /* Legend */
   .legend-row{display:flex;gap:10px;align-items:center;margin-top:4px}
   .leg{
     display:flex;align-items:center;gap:5px;
     font-size:11.5px;font-weight:600;color:var(--text2);
   }
   .leg::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%}
   .thu-leg::before{background:var(--thu)}
   .chi-leg::before{background:var(--chi)}
   
   /* Donut card */
   .donut-card{display:flex;flex-direction:column}
   .donut-wrap{display:flex;justify-content:center;padding:16px 16px 8px}
   .donut-labels{padding:0 20px 16px;display:flex;flex-direction:column;gap:8px}
   .dl-row{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text2)}
   .dl-row span:last-of-type{flex:1}
   .dl-row b{font-size:12px;font-weight:700;color:var(--text)}
   .dl-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
   
   /* See all btn */
   .see-all{
     background:var(--surface2);border:1px solid var(--border2);
     color:var(--text2);padding:7px 14px;border-radius:8px;
     font-size:12px;font-weight:600;font-family:inherit;
     cursor:pointer;transition:.15s;white-space:nowrap;
   }
   .see-all:hover{color:var(--text);border-color:var(--accent)}
   
   /* ── ENTRY LIST (recent / ledger) ── */
   .entry-item{
     display:flex;align-items:center;gap:14px;
     padding:13px 20px;border-bottom:1px solid var(--border);transition:.12s;
   }
   .entry-item:last-child{border-bottom:none}
   .entry-item:hover{background:var(--surface2)}
   
   .entry-ico{
     width:38px;height:38px;border-radius:11px;
     display:flex;align-items:center;justify-content:center;
     font-size:16px;flex-shrink:0;
   }
   .entry-ico.thu-ico{background:var(--thu-bg);color:var(--thu)}
   .entry-ico.chi-ico{background:var(--chi-bg);color:var(--chi)}
   
   .entry-info{flex:1;min-width:0}
   .entry-title{font-size:13px;font-weight:600;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
   .entry-meta{font-size:11.5px;color:var(--text3)}
   .entry-right{text-align:right;flex-shrink:0}
   .entry-amount{font-size:14px;font-weight:700}
   .entry-amount.thu{color:var(--thu)}
   .entry-amount.chi{color:var(--chi)}
   .entry-date{font-size:11px;color:var(--text3);margin-top:2px}
   
   /* Actions (edit/delete) */
   .entry-actions{display:flex;gap:6px;margin-left:8px}
   .entry-act-btn{
     width:28px;height:28px;border-radius:7px;border:1px solid var(--border2);
     background:transparent;color:var(--text3);cursor:pointer;
     display:flex;align-items:center;justify-content:center;transition:.15s;
   }
   .entry-act-btn:hover.edit{color:var(--blue);border-color:var(--blue);background:var(--blue-bg)}
   .entry-act-btn:hover.del{color:var(--chi);border-color:var(--chi);background:var(--chi-bg)}
   
   .empty{padding:40px;text-align:center;color:var(--text3);font-size:13px}
   
   /* ── STATS PAGE ── */
   .stats-top{display:grid;grid-template-columns:auto 1fr;gap:14px;margin-bottom:20px;align-items:stretch}
   
   .stat-net-card{
     background:linear-gradient(135deg,var(--accent),#4f46e5);
     border-radius:16px;padding:24px 28px;min-width:240px;
   }
   .sn-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:rgba(255,255,255,.65);margin-bottom:10px}
   .sn-val{font-size:28px;font-weight:900;letter-spacing:-1px;color:#fff;margin-bottom:4px}
   .sn-sub{font-size:12px;color:rgba(255,255,255,.5)}
   
   .stat-minis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
   .stat-mini{
     background:var(--surface);border:1px solid var(--border);
     border-radius:14px;padding:18px;
   }
   .stat-mini.thu-mini{border-color:rgba(52,211,153,.2);background:linear-gradient(135deg,var(--surface),rgba(52,211,153,.05))}
   .stat-mini.chi-mini{border-color:rgba(248,113,113,.2);background:linear-gradient(135deg,var(--surface),rgba(248,113,113,.05))}
   .stat-mini.neutral-mini{border-color:rgba(96,165,250,.2);background:linear-gradient(135deg,var(--surface),rgba(96,165,250,.05))}
   .sm-label{font-size:11.5px;color:var(--text3);margin-bottom:8px;font-weight:600}
   .sm-val{font-size:18px;font-weight:800}
   .thu-mini .sm-val{color:var(--thu)}
   .chi-mini .sm-val{color:var(--chi)}
   .neutral-mini .sm-val{color:var(--blue)}
   
   .stats-cats-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
   
   /* Category bar items */
   .cat-item{padding:12px 20px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:6px}
   .cat-item:last-child{border-bottom:none}
   .cat-top{display:flex;justify-content:space-between;font-size:13px}
   .cat-name{font-weight:600}
   .cat-amt{font-weight:700}
   .cat-bar-track{height:4px;background:var(--border);border-radius:4px;overflow:hidden}
   .cat-bar-fill{height:100%;border-radius:4px;background:var(--accent)}
   .cat-bar-fill.thu-bar{background:var(--thu)}
   .cat-bar-fill.chi-bar{background:var(--chi)}
   
   /* Summary table */
   .table-wrap{overflow-x:auto}
   .sum-table{width:100%;border-collapse:collapse}
   .sum-table th{
     padding:11px 20px;font-size:11px;font-weight:700;text-transform:uppercase;
     letter-spacing:.7px;color:var(--text3);text-align:left;
     border-bottom:1px solid var(--border);background:var(--bg);
   }
   .sum-table td{
     padding:13px 20px;font-size:13px;border-bottom:1px solid var(--border);
   }
   .sum-table tr:last-child td{border-bottom:none}
   .sum-table tr:hover td{background:var(--surface2)}
   .sum-table .pos{color:var(--thu);font-weight:700}
   .sum-table .neg{color:var(--chi);font-weight:700}
   
   /* ── LEDGER PAGE ── */
   .ledger-toolbar{
     display:flex;align-items:center;justify-content:space-between;
     gap:12px;margin-bottom:14px;flex-wrap:wrap;
   }
   .filter-pills{display:flex;gap:6px}
   .fpill{
     padding:7px 16px;border-radius:20px;font-size:12.5px;font-weight:600;
     cursor:pointer;border:1.5px solid var(--border2);
     background:transparent;color:var(--text3);
     font-family:inherit;transition:.15s;
   }
   .fpill.active{background:var(--accent);border-color:var(--accent);color:#fff}
   .fpill:hover:not(.active){border-color:var(--accent2);color:var(--accent2)}
   
   .ledger-tools{display:flex;gap:8px;align-items:center}
   .search-input{
     background:var(--surface);border:1px solid var(--border2);
     border-radius:9px;padding:8px 12px;font-size:13px;
     color:var(--text);font-family:inherit;outline:none;width:180px;transition:.15s;
   }
   .search-input:focus{border-color:var(--accent);background:var(--surface2)}
   .search-input::placeholder{color:var(--text3)}
   
   .month-select{
     background:var(--surface);border:1px solid var(--border2);
     border-radius:9px;padding:8px 12px;font-size:13px;
     color:var(--text);font-family:inherit;outline:none;cursor:pointer;transition:.15s;
   }
   .month-select:focus{border-color:var(--accent)}
   
   .ledger-summary-bar{
     display:flex;gap:20px;margin-bottom:14px;
     font-size:13px;color:var(--text3);
   }
   .ledger-summary-bar b{color:var(--text);font-weight:700}
   
   /* ── SETTINGS PAGE ── */
   .settings-layout{max-width:520px}
   .settings-body{padding:20px}
   .sfield{margin-bottom:16px}
   .sfield label{
     display:block;font-size:11px;font-weight:700;
     text-transform:uppercase;letter-spacing:.8px;
     color:var(--text3);margin-bottom:8px;
   }
   .sfield input{
     width:100%;background:var(--bg);border:1.5px solid var(--border2);
     border-radius:11px;padding:11px 14px;
     font-size:14px;font-weight:500;color:var(--text);
     font-family:inherit;outline:none;transition:.15s;
   }
   .sfield input:focus{border-color:var(--accent);background:var(--surface2);box-shadow:0 0 0 3px rgba(99,102,241,.15)}
   .sfield input:disabled{opacity:.5;cursor:not-allowed}
   
   .save-btn{
     padding:12px 24px;border:none;border-radius:11px;
     background:linear-gradient(135deg,var(--accent),#4f46e5);
     color:#fff;font-size:13.5px;font-weight:700;
     font-family:inherit;cursor:pointer;transition:.2s;
   }
   .save-btn:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 6px 20px rgba(99,102,241,.3)}
   
   /* ══════════════════════════════════════
      MODAL
   ══════════════════════════════════════ */
   .modal-overlay{
     position:fixed;inset:0;z-index:800;
     background:rgba(0,0,0,.6);backdrop-filter:blur(4px);
     display:none;align-items:center;justify-content:center;
   }
   .modal-overlay.on{display:flex}
   
   .modal{
     background:var(--surface);border:1px solid var(--border);
     border-radius:20px;width:480px;max-width:calc(100vw - 32px);
     animation:slideUp .3s cubic-bezier(.22,1,.36,1) both;
     max-height:90vh;overflow-y:auto;
   }
   
   .modal-head{
     display:flex;align-items:center;justify-content:space-between;
     padding:20px 22px;border-bottom:1px solid var(--border);
   }
   .modal-title{font-size:16px;font-weight:700;letter-spacing:-.3px}
   .modal-close{
     width:30px;height:30px;border-radius:8px;border:none;
     background:var(--surface2);color:var(--text2);cursor:pointer;
     font-size:14px;display:flex;align-items:center;justify-content:center;
     transition:.15s;
   }
   .modal-close:hover{background:var(--chi-bg);color:var(--chi)}
   
   /* Type switch */
   .modal-type-switch{
     display:flex;gap:0;padding:16px 22px 0;
   }
   .mtype-btn{
     flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
     padding:10px;border:1.5px solid var(--border2);
     background:transparent;color:var(--text3);
     font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;
     transition:.15s;
   }
   .mtype-btn:first-child{border-radius:10px 0 0 10px}
   .mtype-btn:last-child{border-radius:0 10px 10px 0;border-left:none}
   .mtype-btn.active#mtype-thu{
     background:var(--thu-bg);border-color:var(--thu);color:var(--thu);
   }
   .mtype-btn.active#mtype-chi{
     background:var(--chi-bg);border-color:var(--chi);color:var(--chi);
   }
   
   /* Modal body */
   .modal-body{padding:20px 22px;display:flex;flex-direction:column;gap:0}
   
   .mfield{margin-bottom:16px}
   .mfield label{
     display:block;font-size:11px;font-weight:700;
     text-transform:uppercase;letter-spacing:.8px;
     color:var(--text3);margin-bottom:8px;
   }
   .mfield input,.mfield select{
     width:100%;background:var(--bg);border:1.5px solid var(--border2);
     border-radius:11px;padding:11px 14px;
     font-size:14px;font-weight:500;color:var(--text);
     font-family:inherit;outline:none;transition:.15s;
   }
   .mfield input:focus,.mfield select:focus{
     border-color:var(--accent);background:var(--surface2);
     box-shadow:0 0 0 3px rgba(99,102,241,.15);
   }
   .mfield input::placeholder{color:var(--text3);font-weight:400}
   
   .amount-inp{font-size:22px;font-weight:800;letter-spacing:-.5px}
   .amount-preview{font-size:12px;color:var(--text3);margin-top:6px;min-height:16px}
   
   .mfield-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
   
   .req{color:var(--chi);margin-left:2px}
   
   /* Modal footer */
   .modal-foot{
     display:flex;gap:10px;justify-content:flex-end;
     padding:16px 22px;border-top:1px solid var(--border);
   }
   .modal-cancel{
     padding:10px 20px;border-radius:10px;border:1px solid var(--border2);
     background:transparent;color:var(--text2);font-size:13.5px;font-weight:600;
     font-family:inherit;cursor:pointer;transition:.15s;
   }
   .modal-cancel:hover{background:var(--surface2);color:var(--text)}
   .modal-save{
     padding:10px 24px;border-radius:10px;border:none;
     background:linear-gradient(135deg,var(--accent),#4f46e5);
     color:#fff;font-size:13.5px;font-weight:700;
     font-family:inherit;cursor:pointer;transition:.2s;
   }
   .modal-save:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 6px 20px rgba(99,102,241,.3)}
   
   /* ══════════════════════════════════════
      TOAST
   ══════════════════════════════════════ */
   .toast{
     position:fixed;bottom:24px;right:24px;
     background:var(--surface2);color:var(--text);
     border:1px solid var(--border2);border-radius:12px;
     padding:13px 18px;font-size:13.5px;font-weight:600;
     display:none;z-index:999;
     box-shadow:0 12px 40px rgba(0,0,0,.5);
     max-width:340px;animation:toastIn .25s ease;
   }
   .toast.on{display:block}
   .toast.success{background:var(--thu-bg);border-color:rgba(52,211,153,.3);color:var(--thu)}
   .toast.error{background:var(--chi-bg);border-color:rgba(248,113,113,.3);color:var(--chi)}
   @keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
   
   /* ══════════════════════════════════════
      SPINNER
   ══════════════════════════════════════ */
   .spinner{
     display:inline-block;width:13px;height:13px;
     border:2px solid rgba(255,255,255,.3);border-top-color:#fff;
     border-radius:50%;animation:spin .7s linear infinite;
     vertical-align:middle;margin-right:6px;
   }
   @keyframes spin{to{transform:rotate(360deg)}}
   
   /* ══════════════════════════════════════
      SCROLLBAR
   ══════════════════════════════════════ */
   ::-webkit-scrollbar{width:4px;height:4px}
   ::-webkit-scrollbar-track{background:transparent}
   ::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}
   ::-webkit-scrollbar-thumb:hover{background:var(--text3)}
/* ══════════════════════════════════════
   MISSING / FIXED CLASSES
══════════════════════════════════════ */

/* col- color helpers for table */
.col-thu{color:var(--thu);font-weight:700}
.col-chi{color:var(--chi);font-weight:700}

/* thu-text / chi-text text helpers */
.thu-text{color:var(--thu)}
.chi-text{color:var(--chi)}

/* ledger summary bar extras */
.lsb-item{font-size:13px}
.lsb-sep{color:var(--text3)}
.lsb-count{margin-left:auto;font-size:12px;color:var(--text3);background:var(--surface2);
  padding:3px 10px;border-radius:20px;border:1px solid var(--border)}

/* date group separator in ledger */
.date-group{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 20px 6px;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  color:var(--text3);border-top:1px solid var(--border);
}
.date-group:first-child{border-top:none}
.dg-label{}
.dg-stats{display:flex;gap:8px;font-size:11.5px;font-weight:600}
.dg-sep{color:var(--text3)}

/* recent-list / ledger-list inside .card uses entry-item which already has border-bottom */
#recent-list .entry-item:last-child,
#ledger-list .entry-item:last-child{border-bottom:none}

/* Fix entry-act-btn hover specificity */
.entry-act-btn:hover{background:var(--surface2)}
.entry-act-btn.edit:hover{color:var(--blue);border-color:var(--blue);background:var(--blue-bg)}
.entry-act-btn.del:hover{color:var(--chi);border-color:var(--chi);background:var(--chi-bg)}

/* Ensure .card in charts-row doesn't double margin */
.charts-row .card{margin-bottom:0}

/* stats-cats-row cards no bottom margin inside grid */
.stats-cats-row .card{margin-bottom:0}

/* cat-item styling (used by renderCatList) */
.cat-item{padding:12px 20px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:6px}
.cat-item:last-child{border-bottom:none}
.cat-top{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.cat-name{font-weight:600;color:var(--text)}
.cat-amt{font-weight:700;font-size:13px}
.cat-bar-track{height:5px;background:var(--border);border-radius:4px;overflow:hidden}
.cat-bar-fill{height:100%;border-radius:4px;transition:width .4s ease}

/* month select dark style fix */
.month-select option{background:var(--surface2);color:var(--text)}

/* ── Responsive tweaks ── */
@media(max-width:900px){
  .kpi-row{grid-template-columns:1fr 1fr}
  .charts-row{grid-template-columns:1fr}
  .stats-top{grid-template-columns:1fr}
  .stats-cats-row{grid-template-columns:1fr}
  .stat-minis{grid-template-columns:1fr 1fr 1fr}
}
@media(max-width:640px){
  .sidebar{display:none}
  .kpi-row{grid-template-columns:1fr}
  .mfield-row{grid-template-columns:1fr}
  .stat-minis{grid-template-columns:1fr 1fr}
}