/* ============================================================
   ExpenseTrack Dashboard — Design Tokens
   ============================================================ */
:root{
  --navy:#10162b;
  --navy-2:#161d38;
  --navy-3:#1c2444;
  --sidebar-text:#8b93b3;
  --sidebar-text-active:#ffffff;
  --accent:#3b6df0;
  --accent-2:#2f5ce0;

  --bg:#f4f6fb;
  --surface:#ffffff;
  --surface-2:#f8f9fd;
  --border:#e7eaf3;
  --text:#161b33;
  --text-dim:#767e9c;
  --text-faint:#a3aac4;

  --green:#1fa971;
  --green-bg:#e8f8f1;
  --blue:#3b6df0;
  --blue-bg:#eaf0fe;
  --red:#e0483f;
  --red-bg:#fdecea;
  --purple:#8b5cf6;
  --purple-bg:#f1ebfe;
  --amber:#e2a13b;
  --amber-bg:#fdf3e3;

  --radius:16px;
  --radius-sm:10px;
  --shadow: 0 1px 2px rgba(16,22,43,.04), 0 8px 24px -12px rgba(16,22,43,.08);
  --shadow-lg: 0 12px 32px -8px rgba(16,22,43,.16);
  --font-display:'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}

body.dark{
  --navy:#070d07;
  --navy-2:#0c150c;
  --navy-3:#111f10;
  --sidebar-text:#8fa38a;
  --sidebar-text-active:#0d1408;
  --accent:#d4a72c;
  --accent-2:#b8901f;

  --bg:#060a06;
  --surface:#0d140d;
  --surface-2:#0a100a;
  --border:#1e2b1c;
  --text:#eef5ea;
  --text-dim:#93a68e;
  --text-faint:#5c6d58;
  --green:#3ddc84;
  --green-bg:rgba(61,220,132,.14);
  --blue:#4fb8e0;
  --blue-bg:rgba(79,184,224,.14);
  --red:#f0564a;
  --red-bg:rgba(240,86,74,.14);
  --purple:#d4a72c;
  --purple-bg:rgba(212,167,44,.14);
  --amber:#d4a72c;
  --amber-bg:rgba(212,167,44,.16);
  --shadow-lg: 0 12px 36px -8px rgba(212,167,44,.14), 0 4px 16px -6px rgba(0,0,0,.5);
}
body.dark .brand-mark{ color:#0d1408; background:linear-gradient(150deg,var(--accent),#f0d878) !important; }
body.dark .btn-primary{ color:#0d1408; background:linear-gradient(150deg,var(--accent),#e8bd4a); }
body.dark .btn-primary:hover{ background:linear-gradient(150deg,var(--accent-2),var(--accent)); }
body.dark .nav-item.active{ background:linear-gradient(90deg,var(--accent),#e8bd4a); color:#0d1408; box-shadow:0 6px 18px -4px rgba(212,167,44,.5); }
body.dark .nav-item.active svg{ color:#0d1408; }
body.dark .avatar{ background:linear-gradient(150deg,var(--accent),#e8bd4a); color:#0d1408; }
body.dark .stat-card-v2.purple{ border-left-color:var(--accent); }
body.dark .card-link{ color:var(--accent); }
body.dark .quick-icon{ box-shadow:0 0 0 1px rgba(212,167,44,.08) inset; }

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  transition:background .2s ease, color .2s ease;
}
button, input, select, textarea{ font-family:inherit; color:inherit; }
::selection{ background:var(--accent); color:#fff; }
a{ color:inherit; }

/* ---------------- Layout shell ---------------- */
.shell{ display:flex; min-height:100vh; }

/* ---------------- Sidebar ---------------- */
.sidebar{
  width:250px; flex-shrink:0;
  background:var(--navy);
  color:var(--sidebar-text);
  display:flex; flex-direction:column;
  padding:22px 16px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.brand{
  display:flex; align-items:center; gap:10px;
  padding:6px 8px 26px;
}
.brand-mark{
  width:34px; height:34px; border-radius:10px;
  background:linear-gradient(150deg,var(--accent),#5ee6c8);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:14px; color:#0b1020;
  flex-shrink:0;
}
.brand-name{ font-family:var(--font-display); font-weight:700; font-size:16px; color:#fff; letter-spacing:-.01em; }

.nav-group{ display:flex; flex-direction:column; gap:2px; flex:1; }
.nav-item{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:10px;
  font-size:14px; font-weight:500; cursor:pointer;
  color:var(--sidebar-text);
  transition:background .12s ease, color .12s ease;
  user-select:none;
}
.nav-item svg{ width:18px; height:18px; flex-shrink:0; opacity:.85; }
.nav-item:hover{ background:rgba(255,255,255,.06); color:#fff; }
.nav-item.active{
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#fff;
  box-shadow:0 6px 16px -4px rgba(59,109,240,.55);
}
.nav-item.active svg{ opacity:1; }

.sidebar-footer{ padding-top:14px; margin-top:14px; border-top:1px solid rgba(255,255,255,.08); }
.theme-toggle-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.05);
  font-size:13px; color:var(--sidebar-text);
}
.switch{ position:relative; width:38px; height:21px; flex-shrink:0; }
.switch input{ opacity:0; width:0; height:0; }
.switch .track{
  position:absolute; inset:0; background:rgba(255,255,255,.18); border-radius:99px; cursor:pointer; transition:.15s;
}
.switch .track::before{
  content:""; position:absolute; width:15px; height:15px; left:3px; top:3px;
  background:#fff; border-radius:50%; transition:.15s;
}
.switch input:checked + .track{ background:var(--accent); }
.switch input:checked + .track::before{ transform:translateX(17px); }

.logout-row{
  margin-top:8px; display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px; cursor:pointer;
  color:#e58e88; font-size:13.5px; font-weight:500;
}
.logout-row:hover{ background:rgba(224,72,63,.12); }

/* ---------------- Main ---------------- */
.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:22px 32px; flex-wrap:wrap;
}
.page-heading h1{
  font-family:var(--font-display); font-size:24px; font-weight:700; letter-spacing:-.01em;
}
.page-heading p{ color:var(--text-dim); font-size:13.5px; margin-top:3px; }

.topbar-right{ display:flex; align-items:center; gap:14px; }
.icon-btn{
  width:38px; height:38px; border-radius:11px; background:var(--surface);
  border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  cursor:pointer; position:relative; box-shadow:var(--shadow);
}
.icon-btn svg{ width:17px; height:17px; }
.badge-dot{
  position:absolute; top:-4px; right:-4px; background:var(--red); color:#fff;
  font-size:10px; font-weight:700; min-width:16px; height:16px; border-radius:99px;
  display:flex; align-items:center; justify-content:center; padding:0 3px;
  border:2px solid var(--bg);
}
.avatar{
  width:38px; height:38px; border-radius:11px; background:linear-gradient(150deg,var(--accent),#7b9bff);
  color:#fff; font-family:var(--font-display); font-weight:700; font-size:13px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.range-pill{
  display:flex; align-items:center; gap:8px; padding:9px 14px;
  border:1px solid var(--border); border-radius:11px; background:var(--surface);
  font-size:13px; color:var(--text-dim); cursor:pointer; box-shadow:var(--shadow);
}
.range-pill svg{ width:15px; height:15px; }

.content{ padding:4px 32px 48px; flex:1; }
.view{ display:none; }
.view.active{ display:block; animation:fadeIn .18s ease; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }

/* ---------------- Cards / grid ---------------- */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:22px;
}
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:20px; }
.stat-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px 22px; box-shadow:var(--shadow);
}
.stat-top{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.stat-icon{ width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:17px; }
.stat-icon.green{ background:var(--green-bg); color:var(--green); }
.stat-icon.blue{ background:var(--blue-bg); color:var(--blue); }
.stat-icon.red{ background:var(--red-bg); color:var(--red); }
.stat-icon.purple{ background:var(--purple-bg); color:var(--purple); }
.stat-label{ font-size:13px; color:var(--text-dim); font-weight:600; }
.stat-value{ font-family:var(--font-display); font-size:25px; font-weight:700; letter-spacing:-.01em; margin-bottom:6px; }
.stat-delta{ font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:4px; }
.stat-delta.up{ color:var(--green); }
.stat-delta.down{ color:var(--red); }
.stat-delta span.muted{ color:var(--text-faint); font-weight:500; }

.dash-grid{ display:grid; grid-template-columns:2fr 1fr; gap:20px; margin-bottom:20px; align-items:start; }
.charts-row{ display:grid; grid-template-columns:1fr 1.3fr; gap:18px; margin-bottom:18px; }
@media (max-width:1180px){ .dash-grid{ grid-template-columns:1fr; } .charts-row{ grid-template-columns:1fr; } .stat-grid{ grid-template-columns:repeat(2,1fr);} }

.card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.card-title{ font-family:var(--font-display); font-weight:700; font-size:15.5px; }
.card-link{ font-size:12.5px; font-weight:600; color:var(--accent); cursor:pointer; }
.pill-select{
  font-size:12.5px; border:1px solid var(--border); background:var(--surface-2);
  padding:6px 10px; border-radius:8px; color:var(--text-dim); cursor:pointer;
}

.donut-wrap{ display:flex; align-items:center; gap:22px; }
.donut-canvas-box{ position:relative; width:170px; height:170px; flex-shrink:0; }
.donut-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.donut-center .amt{ font-family:var(--font-display); font-weight:700; font-size:18px; }
.donut-center .lbl{ font-size:11px; color:var(--text-dim); }
.legend-list{ flex:1; display:flex; flex-direction:column; gap:11px; min-width:0; }
.legend-row{ display:flex; align-items:center; gap:9px; font-size:12.8px; }
.legend-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.legend-name{ flex:1; color:var(--text); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.legend-amt{ color:var(--text-dim); font-family:var(--font-mono); }
.legend-pct{ color:var(--text-faint); width:32px; text-align:right; }

.chart-box{ height:230px; position:relative; }

.budget-row{ margin-bottom:16px; }
.budget-row:last-child{ margin-bottom:0; }
.budget-top{ display:flex; justify-content:space-between; font-size:12.8px; margin-bottom:7px; }
.budget-top .name{ font-weight:600; }
.budget-top .amt{ color:var(--text-dim); font-family:var(--font-mono); font-size:11.8px; }
.bar-track{ height:7px; background:var(--surface-2); border-radius:99px; overflow:hidden; border:1px solid var(--border); }
.bar-fill{ height:100%; border-radius:99px; background:linear-gradient(90deg,var(--accent),#6b93ff); transition:width .4s ease; }
.bar-fill.over{ background:linear-gradient(90deg,var(--red),#ff8078); }
.budget-pct{ font-size:11px; color:var(--text-faint); margin-top:4px; text-align:right; }

.tx-mini-row{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); }
.tx-mini-row:last-child{ border-bottom:none; padding-bottom:0; }
.tx-mini-icon{ width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.tx-mini-info{ flex:1; min-width:0; }
.tx-mini-info .n{ font-size:13.3px; font-weight:600; }
.tx-mini-info .s{ font-size:11.8px; color:var(--text-dim); }
.tx-mini-amt{ font-family:var(--font-mono); font-size:13px; font-weight:700; text-align:right; white-space:nowrap; }
.tx-mini-amt.income{ color:var(--green); }
.tx-mini-amt.expense{ color:var(--red); }
.tx-mini-date{ font-size:10.5px; color:var(--text-faint); text-align:right; margin-top:2px; }

.quick-row{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-bottom:20px; }
@media (max-width:1180px){ .quick-row{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .quick-row{ grid-template-columns:repeat(2,1fr); } }
.quick-card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:16px; display:flex; align-items:center; gap:12px; cursor:pointer;
  box-shadow:var(--shadow); transition:transform .12s ease, box-shadow .12s ease;
}
.quick-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.quick-icon{ width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.quick-title{ font-size:13px; font-weight:700; }
.quick-sub{ font-size:11px; color:var(--text-dim); }

.bottom-row{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; }
@media (max-width:1180px){ .bottom-row{ grid-template-columns:1fr; } }
.bottom-card{ display:flex; align-items:center; gap:14px; }
.bottom-icon{ width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; }
.bottom-title{ font-size:12px; color:var(--text-dim); font-weight:600; }
.bottom-main{ font-family:var(--font-display); font-weight:700; font-size:14.5px; margin-top:2px; }
.bottom-progress{ flex:1; }
.bottom-arrow{ margin-left:auto; color:var(--text-faint); }

/* ---------------- Generic list/table page ---------------- */
.toolbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.tab-pills{ display:flex; gap:8px; background:var(--surface-2); border:1px solid var(--border); padding:4px; border-radius:11px; }
.tab-pill{ padding:7px 14px; border-radius:8px; font-size:12.8px; font-weight:600; color:var(--text-dim); cursor:pointer; }
.tab-pill.active{ background:var(--surface); color:var(--text); box-shadow:var(--shadow); }
.search-box{ display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:9px 12px; min-width:220px; }
.search-box input{ border:none; outline:none; background:none; font-size:13px; width:100%; }
.search-box svg{ width:15px; height:15px; color:var(--text-faint); flex-shrink:0; }
.btn{
  display:inline-flex; align-items:center; gap:7px; padding:10px 16px; border-radius:10px;
  font-size:13px; font-weight:700; cursor:pointer; border:1px solid transparent; white-space:nowrap;
}
.btn-primary{ background:var(--accent); color:#fff; box-shadow:0 6px 16px -4px rgba(59,109,240,.5); }
.btn-primary:hover{ background:var(--accent-2); }
.btn-ghost{ background:var(--surface); border-color:var(--border); color:var(--text); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn-danger-ghost{ background:transparent; border:none; color:var(--text-faint); }
.btn-danger-ghost:hover{ color:var(--red); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }

.list-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.list-row{
  display:flex; align-items:center; gap:14px; padding:15px 22px; border-bottom:1px solid var(--border);
}
.list-row:last-child{ border-bottom:none; }
.list-icon{ width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.list-info{ flex:1; min-width:0; }
.list-info .n{ font-size:14px; font-weight:600; }
.list-info .s{ font-size:12px; color:var(--text-dim); margin-top:1px; }
.list-amt{ font-family:var(--font-mono); font-weight:700; font-size:14px; white-space:nowrap; }
.list-amt.income{ color:var(--green); }
.list-amt.expense{ color:var(--red); }
.list-actions{ display:flex; gap:4px; }
.icon-mini-btn{ width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-faint); background:transparent; border:none; }
.icon-mini-btn:hover{ background:var(--surface-2); color:var(--text); }
.icon-mini-btn.danger:hover{ color:var(--red); }

.empty{
  text-align:center; padding:54px 20px; color:var(--text-dim); font-size:13.5px;
}
.empty .big{ font-size:34px; margin-bottom:10px; }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media (max-width:1000px){ .grid-3{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:680px){ .grid-3,.grid-2{ grid-template-columns:1fr; } }

/* Goal / wallet / receipt cards */
.tile-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); }
.tile-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.tile-icon{ width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.tile-name{ font-weight:700; font-size:14.5px; }
.tile-sub{ font-size:11.5px; color:var(--text-dim); }
.tile-menu{ margin-left:auto; display:flex; gap:2px; }

.receipt-thumb{ border-radius:13px; overflow:hidden; border:1px solid var(--border); cursor:pointer; background:var(--surface-2); }
.receipt-thumb img{ width:100%; height:130px; object-fit:cover; display:block; }
.receipt-thumb .rt-body{ padding:10px 12px; }
.receipt-thumb .rt-cat{ font-size:12.5px; font-weight:700; }
.receipt-thumb .rt-date{ font-size:11px; color:var(--text-dim); }

/* ---------------- Modal ---------------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(10,14,30,.55); backdrop-filter:blur(2px);
  display:none; align-items:center; justify-content:center; z-index:100; padding:20px;
}
.modal-overlay.active{ display:flex; }
.modal{
  background:var(--surface); border-radius:18px; width:100%; max-width:440px;
  max-height:88vh; overflow-y:auto; box-shadow:0 30px 60px -12px rgba(0,0,0,.35);
}
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--border); }
.modal-title{ font-family:var(--font-display); font-weight:700; font-size:16px; }
.modal-close{ width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text-dim); }
.modal-close:hover{ background:var(--surface-2); }
.modal-body{ padding:20px 22px; }
.modal-foot{ padding:16px 22px 22px; }

.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12px; font-weight:600; color:var(--text-dim); margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%; background:var(--surface-2); border:1px solid var(--border); border-radius:9px;
  padding:10px 12px; font-size:13.8px; outline:none;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--accent); }
.seg{ display:flex; gap:8px; }
.seg-btn{
  flex:1; padding:10px; text-align:center; border-radius:9px; border:1px solid var(--border);
  background:var(--surface-2); font-size:12.8px; font-weight:600; color:var(--text-dim); cursor:pointer;
}
.seg-btn.active[data-v="income"]{ background:var(--green-bg); border-color:var(--green); color:var(--green); }
.seg-btn.active[data-v="expense"]{ background:var(--red-bg); border-color:var(--red); color:var(--red); }
.form-msg{ font-size:12.5px; margin-top:8px; min-height:16px; }
.form-msg.error{ color:var(--red); }
.form-msg.ok{ color:var(--green); }
.emoji-grid{ display:flex; flex-wrap:wrap; gap:7px; }
.emoji-opt{
  width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); background:var(--surface-2); cursor:pointer; font-size:16px;
}
.emoji-opt.active{ border-color:var(--accent); background:var(--blue-bg); }
.file-drop{
  border:1.5px dashed var(--border); border-radius:12px; padding:14px; display:flex; align-items:center; gap:12px;
  cursor:pointer; background:var(--surface-2);
}
.file-drop img{ width:44px; height:44px; border-radius:8px; object-fit:cover; }
.file-drop .txt{ font-size:12.5px; color:var(--text-dim); }

/* ---------------- Toast ---------------- */
#toast-stack{ position:fixed; bottom:22px; right:22px; display:flex; flex-direction:column; gap:10px; z-index:200; }
.toast{
  background:var(--navy); color:#fff; padding:12px 16px; border-radius:11px; font-size:13px;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.4); display:flex; align-items:center; gap:10px;
  animation:toastIn .18s ease;
}
.toast.error{ background:#5c1e1e; }
.toast.ok{ background:#173d2c; }
@keyframes toastIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }

/* ---------------- Auth screen ---------------- */
.auth-shell{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:var(--navy); padding:20px;
}
.auth-card{
  width:100%; max-width:400px; background:var(--surface); border-radius:20px; padding:34px 30px;
  box-shadow:0 30px 60px -15px rgba(0,0,0,.5);
}
.auth-brand{ display:flex; align-items:center; gap:10px; margin-bottom:26px; }
.auth-tabs{ display:flex; gap:8px; margin-bottom:20px; background:var(--surface-2); padding:4px; border-radius:11px; }
.auth-tab{ flex:1; text-align:center; padding:9px; border-radius:8px; font-size:13px; font-weight:600; color:var(--text-dim); cursor:pointer; }
.auth-tab.active{ background:var(--surface); color:var(--text); box-shadow:var(--shadow); }
.auth-submit{
  width:100%; margin-top:4px; background:var(--accent); color:#fff; border:none; border-radius:10px;
  padding:12px; font-weight:700; font-size:13.8px; cursor:pointer;
}
.auth-submit:hover{ background:var(--accent-2); }
.auth-h{ font-family:var(--font-display); font-size:20px; font-weight:700; margin-bottom:4px; }
.auth-p{ font-size:12.8px; color:var(--text-dim); margin-bottom:22px; }

/* Loading */
.loader{ display:flex; align-items:center; justify-content:center; padding:40px; color:var(--text-dim); font-size:13px; }

/* Mobile sidebar toggle */
.mobile-topbar{ display:none; }
@media (max-width:900px){
  .sidebar{ position:fixed; z-index:90; transform:translateX(-100%); transition:transform .2s ease; }
  .sidebar.open{ transform:translateX(0); }
  .mobile-topbar{
    display:flex; align-items:center; gap:12px; padding:16px 20px; background:var(--navy); color:#fff; position:sticky; top:0; z-index:80;
  }
  .content{ padding:4px 16px 40px; }
  .topbar{ padding:16px; }
  .stat-grid{ grid-template-columns:1fr 1fr; }
}

/* ============================================================
   Premium Dashboard v2 — sidebar panels, sparklines, AI assistant
   ============================================================ */
body.dark{
  --glow-blue: rgba(212,167,44,.35);
  --glow-purple: rgba(61,220,132,.28);
}

.dashboard-shell{ display:grid; grid-template-columns: 1fr 320px; gap:20px; align-items:start; }
@media (max-width:1180px){ .dashboard-shell{ grid-template-columns:1fr; } }
.side-col{ display:flex; flex-direction:column; gap:18px; position:sticky; top:8px; }
@media (max-width:1180px){ .side-col{ position:static; } }

/* ---------------- Stat cards v2 (sparkline + 3D tilt) ---------------- */
.stat-grid-v2{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:20px; }
@media (max-width:900px){ .stat-grid-v2{ grid-template-columns:repeat(2,1fr); } }
.stat-card-v2{
  background:var(--surface); border:1px solid var(--border); border-left:3px solid transparent;
  border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow);
  transition:transform .12s ease, box-shadow .12s ease; transform-style:preserve-3d; will-change:transform;
  position:relative; overflow:hidden;
}
.stat-card-v2:hover{ box-shadow:var(--shadow-lg); }
.stat-card-v2.green{ border-left-color:var(--green); }
.stat-card-v2.blue{ border-left-color:var(--blue); }
.stat-card-v2.red{ border-left-color:var(--red); }
.stat-card-v2.purple{ border-left-color:var(--purple); }
.stat-card-v2 .stat-top{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.stat-card-v2 .stat-value{ margin-bottom:4px; }
.stat-card-v2 .spark-box{ height:34px; margin-top:8px; opacity:.9; }

/* ---------------- AI Assistant panel ---------------- */
.ai-panel{
  background:linear-gradient(165deg, var(--navy) 0%, var(--navy-3) 100%);
  border-radius:var(--radius); padding:20px; color:#fff; box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,.06);
}
.ai-panel-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.ai-avatar{
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(150deg,var(--accent),#3ddc84); display:flex; align-items:center; justify-content:center; font-size:16px;
}
.ai-panel-title{ font-family:var(--font-display); font-weight:700; font-size:14px; flex:1; }
.ai-beta-badge{
  font-size:9.5px; font-weight:800; letter-spacing:.04em; padding:2px 7px; border-radius:99px;
  background:rgba(212,167,44,.22); color:#f0d878; border:1px solid rgba(212,167,44,.4);
}
.ai-message-box{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:12px;
  padding:12px 14px; font-size:12.8px; line-height:1.55; color:#d7dbf0; min-height:70px;
  margin-bottom:12px; white-space:pre-line;
}
.ai-message-box .placeholder{ color:#8890b3; }
.ai-quick-row{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; }
.ai-quick-btn{
  font-size:11.3px; font-weight:600; padding:7px 11px; border-radius:99px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); color:#d7dbf0; cursor:pointer;
}
.ai-quick-btn:hover{ background:rgba(255,255,255,.14); }
.ai-ask-row{ display:flex; gap:8px; }
.ai-ask-input{
  flex:1; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:10px;
  padding:10px 12px; font-size:12.5px; color:#fff; outline:none;
}
.ai-ask-input::placeholder{ color:#7d84a8; }
.ai-ask-input:focus{ border-color:var(--accent); }
.ai-ask-btn{
  width:38px; height:38px; border-radius:10px; background:var(--accent); border:none; color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
}
.ai-ask-btn:hover{ background:var(--accent-2); }
.ai-ask-btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ---------------- Financial Health Score ---------------- */
.health-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); }
.health-gauge-row{ display:flex; align-items:center; gap:16px; margin-bottom:14px; }
.health-gauge-box{ position:relative; width:84px; height:84px; flex-shrink:0; }
.health-gauge-box svg{ transform:rotate(-90deg); }
.health-gauge-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.health-gauge-center .num{ font-family:var(--font-display); font-weight:800; font-size:20px; line-height:1; }
.health-gauge-center .of100{ font-size:9px; color:var(--text-faint); }
.health-gauge-label{ font-size:12.5px; font-weight:700; }
.health-gauge-tag{ font-size:11px; margin-top:2px; }
.health-sub-list{ display:flex; flex-direction:column; gap:9px; }
.health-sub-row{ display:flex; align-items:center; gap:8px; font-size:12px; }
.health-sub-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.health-sub-name{ flex:1; color:var(--text-dim); }
.health-sub-val{ font-weight:700; font-family:var(--font-mono); font-size:11.5px; }

/* ---------------- Top Categories panel ---------------- */
.topcats-row{ display:flex; align-items:center; gap:10px; margin-bottom:13px; }
.topcats-row:last-child{ margin-bottom:0; }
.topcats-icon{ width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
.topcats-info{ flex:1; min-width:0; }
.topcats-name{ font-size:12px; font-weight:600; margin-bottom:4px; }
.topcats-bar-track{ height:5px; background:var(--surface-2); border-radius:99px; overflow:hidden; }
.topcats-bar-fill{ height:100%; border-radius:99px; }
.topcats-amt{ font-size:11px; color:var(--text-dim); font-family:var(--font-mono); white-space:nowrap; }

/* ---------------- Cashflow panel ---------------- */
.cashflow-stats{ display:flex; gap:18px; margin-bottom:14px; flex-wrap:wrap; }
.cashflow-stat .lbl{ font-size:10.5px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.04em; }
.cashflow-stat .val{ font-family:var(--font-display); font-weight:700; font-size:15px; margin-top:2px; }
.cashflow-stat.income .val{ color:var(--green); }
.cashflow-stat.expense .val{ color:var(--red); }
.cashflow-chart-box{ height:150px; position:relative; }

/* ---------------- Receipts mini panel ---------------- */
.receipts-mini-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.receipt-mini-thumb{ border-radius:10px; overflow:hidden; border:1px solid var(--border); cursor:pointer; aspect-ratio:1; background:var(--surface-2); }
.receipt-mini-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.receipt-upload-tile{
  border-radius:10px; border:1.5px dashed var(--border); aspect-ratio:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px; cursor:pointer; color:var(--text-faint); font-size:10.5px; font-weight:600;
}
.receipt-upload-tile:hover{ border-color:var(--accent); color:var(--accent); }

/* ---------------- Monthly prediction ---------------- */
.prediction-value{ font-family:var(--font-display); font-weight:800; font-size:22px; margin:6px 0 2px; }
.prediction-sub{ font-size:11.5px; color:var(--text-dim); margin-bottom:10px; }
.prediction-spark-box{ height:60px; }

/* ---------------- Quick add mini panel ---------------- */
.quickadd-mini-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.quickadd-mini-btn{
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 4px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--border); cursor:pointer; font-size:10.5px; font-weight:600; color:var(--text-dim);
}
.quickadd-mini-btn:hover{ border-color:var(--accent); color:var(--accent); }
.quickadd-mini-icon{ width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:14px; }

/* ---------------- misc ---------------- */
.badge-new{
  font-size:9px; font-weight:800; letter-spacing:.03em; padding:2px 6px; border-radius:99px;
  background:linear-gradient(90deg,var(--accent),#8b5cf6); color:#fff; margin-left:auto;
}
.panel-title-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.mini-list-row{ display:flex; align-items:center; gap:11px; padding:9px 0; border-bottom:1px solid var(--border); }
.mini-list-row:last-child{ border-bottom:none; padding-bottom:0; }
.mini-list-icon{ width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; overflow:hidden; }
.mini-list-icon img{ width:100%; height:100%; object-fit:cover; }
.mini-list-info{ flex:1; min-width:0; }
.mini-list-info .n{ font-size:12.3px; font-weight:600; }
.mini-list-info .s{ font-size:10.8px; color:var(--text-dim); }
.mini-list-right{ text-align:right; font-size:11.5px; font-weight:700; white-space:nowrap; }

/* ============================================================
   Phase 1 additions — premium 3D polish, PDF/CSV/date-range UI
   ============================================================ */

/* Ambient glow orbs behind the dashboard (dark mode only, decorative) */
body.dark .bg-orb{
  position:fixed; border-radius:50%; filter:blur(90px); opacity:.16; pointer-events:none; z-index:0;
  animation:orbFloat 18s ease-in-out infinite;
}
.bg-orb.orb-1{ width:420px; height:420px; background:var(--accent); top:-120px; left:-100px; }
.bg-orb.orb-2{ width:380px; height:380px; background:#3ddc84; bottom:-140px; right:-100px; animation-delay:-6s; }
.bg-orb.orb-3{ width:300px; height:300px; background:#e8bd4a; top:40%; right:20%; animation-delay:-11s; }
body:not(.dark) .bg-orb{ display:none; }
@keyframes orbFloat{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(30px,-24px) scale(1.08); }
}
.content{ position:relative; z-index:1; }

/* Card entrance animation */
@keyframes cardIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
.view.active .card, .view.active .stat-card-v2, .view.active .ai-panel, .view.active .health-card,
.view.active .list-card, .view.active .tile-card, .view.active .quick-card{
  animation:cardIn .35s ease both;
}
.stat-grid-v2 .stat-card-v2:nth-child(1){ animation-delay:.02s; }
.stat-grid-v2 .stat-card-v2:nth-child(2){ animation-delay:.06s; }
.stat-grid-v2 .stat-card-v2:nth-child(3){ animation-delay:.1s; }
.stat-grid-v2 .stat-card-v2:nth-child(4){ animation-delay:.14s; }

/* AI panel subtle glow pulse border */
body.dark .ai-panel{
  position:relative;
}
body.dark .ai-panel::before{
  content:""; position:absolute; inset:-1px; border-radius:var(--radius); padding:1px;
  background:linear-gradient(120deg, rgba(59,109,240,.5), rgba(139,92,246,.5), rgba(59,109,240,.5));
  background-size:200% 200%; -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; animation:borderGlow 6s ease infinite; pointer-events:none;
}
@keyframes borderGlow{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }

/* Deeper hover depth for tile/quick cards */
.quick-card, .tile-card{ transition:transform .15s ease, box-shadow .15s ease; }
.quick-card:hover{ transform:translateY(-3px) scale(1.01); }

/* ---------------- Date range picker (Reports/Analytics) ---------------- */
.daterange-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.daterange-row input[type="date"]{
  background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:8px 10px; font-size:12.5px;
}
.daterange-row .btn{ padding:8px 14px; }

/* ---------------- CSV Import ---------------- */
.import-summary{ font-size:12.5px; color:var(--text-dim); margin-top:10px; }
.import-row-preview{ font-family:var(--font-mono); font-size:11px; padding:6px 0; border-bottom:1px solid var(--border); }
.import-row-preview:last-child{ border-bottom:none; }
.import-row-preview.bad{ color:var(--red); }

/* Toast for silent auto-actions */
.toast.info{ background:#1c2b4a; }

/* ============================================================
   Wealth theme extras — achievement banner, sidebar widgets, glow charts
   ============================================================ */
body.dark canvas{ filter: drop-shadow(0 0 5px rgba(212,167,44,.18)); }
body.dark #trend-chart, body.dark #cashflow-chart{ filter: drop-shadow(0 0 6px rgba(61,220,132,.12)); }

/* ---------------- Achievement banner ---------------- */
.achievement-banner{
  display:flex; align-items:center; gap:16px; margin-top:20px; padding:18px 22px; border-radius:var(--radius);
  background:linear-gradient(100deg, rgba(212,167,44,.14), rgba(61,220,132,.08));
  border:1px solid rgba(212,167,44,.3); position:relative; overflow:hidden;
}
body:not(.dark) .achievement-banner{
  background:linear-gradient(100deg, rgba(226,161,59,.12), rgba(31,169,113,.08)); border-color:rgba(226,161,59,.3);
}
.achievement-icon{ font-size:26px; flex-shrink:0; }
.achievement-text{ flex:1; min-width:0; }
.achievement-title{ font-family:var(--font-display); font-weight:700; font-size:14.5px; }
.achievement-sub{ font-size:12px; color:var(--text-dim); margin-top:2px; }
.achievement-btn{
  flex-shrink:0; font-size:12px; font-weight:700; padding:9px 16px; border-radius:10px; cursor:pointer;
  background:var(--accent); color:#0d1408; white-space:nowrap;
}
body:not(.dark) .achievement-btn{ color:#fff; }

/* ---------------- Sidebar: Go Premium + Monthly Summary ---------------- */
.sidebar-widget{ margin-top:14px; padding:14px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); }
.premium-widget .pw-icon{ font-size:18px; margin-bottom:6px; }
.premium-widget .pw-title{ color:#fff; font-weight:700; font-size:12.8px; }
.premium-widget .pw-sub{ color:var(--sidebar-text); font-size:11px; margin:4px 0 10px; line-height:1.5; }
.premium-widget .pw-btn{
  display:block; text-align:center; padding:9px; border-radius:9px; font-size:12px; font-weight:700; cursor:pointer;
  background:linear-gradient(90deg,var(--accent),#e8bd4a); color:#0d1408;
}
.summary-widget .sw-title{ color:#fff; font-weight:700; font-size:12px; }
.summary-widget .sw-date{ color:var(--sidebar-text); font-size:10.5px; margin-bottom:8px; }
.summary-widget-row{ display:flex; align-items:center; gap:10px; }
.summary-widget-text{ font-size:11px; color:var(--sidebar-text); line-height:1.5; flex:1; }
.summary-widget-pct{
  width:46px; height:46px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:800; color:#0d1408;
  background:conic-gradient(var(--accent) calc(var(--pct,50)*1%), rgba(255,255,255,.08) 0);
}
.summary-widget-pct span{ background:var(--navy); width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; }

/* ---------------- Health score stars ---------------- */
.health-stars{ display:flex; gap:3px; margin-top:8px; }
.health-stars .star{ font-size:13px; color:var(--border); }
.health-stars .star.filled{ color:var(--accent); }