:root{
  --brand:#2563eb;
  --brand-dark:#1d4ed8;
  --income:#16a34a;
  --income-bg:#dcfce7;
  --expense:#dc2626;
  --expense-bg:#fee2e2;
  --bg:#f4f6fb;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --frame-width:430px;
  --nav-height:64px;
}

/* ===== Dark Mode ===== */
/* --brand & --brand-dark SENGAJA TIDAK di-override di sini — biarkan
   tetap ikut warna tema yang diatur Admin (dari :root inline style),
   supaya ganti tema warna juga berlaku saat mode gelap aktif. */
html[data-theme="dark"]{
  --income:#22c55e;
  --income-bg:rgba(34,197,94,.15);
  --expense:#f87171;
  --expense-bg:rgba(248,113,113,.15);
  --bg:#0f1420;
  --card:#1a2130;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --border:#2b3245;
}
html[data-theme="dark"] body{background:#0b0e16;}
/* Override kelas utilitas Tailwind yang dipakai langsung di markup agar ikut gelap */
html[data-theme="dark"] .bg-white{background-color:var(--card) !important;}
html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] .text-gray-700{color:#e5e7eb !important;}
html[data-theme="dark"] .text-gray-500,
html[data-theme="dark"] .text-gray-400{color:#9ca3af !important;}
html[data-theme="dark"] .text-gray-300{color:#4b5563 !important;}
html[data-theme="dark"] .border-gray-100,
html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .divide-gray-100 > *{border-color:var(--border) !important;}
html[data-theme="dark"] .text-green-600,
html[data-theme="dark"] .text-green-700{color:#4ade80 !important;}
html[data-theme="dark"] .text-red-600,
html[data-theme="dark"] .text-red-500,
html[data-theme="dark"] .text-red-700{color:#f87171 !important;}
html[data-theme="dark"] .text-blue-600{color:var(--brand) !important;}
html[data-theme="dark"] .text-amber-600{color:#fbbf24 !important;}
html[data-theme="dark"] .text-indigo-600{color:#818cf8 !important;}
html[data-theme="dark"] .bg-green-50{background-color:rgba(34,197,94,.12) !important;}
html[data-theme="dark"] .bg-red-50{background-color:rgba(248,113,113,.12) !important;}
html[data-theme="dark"] .bg-amber-50{background-color:rgba(251,191,36,.12) !important;}
html[data-theme="dark"] .bg-indigo-50{background-color:rgba(129,140,248,.12) !important;}
html[data-theme="dark"] .bg-blue-100{background-color:color-mix(in srgb, var(--brand) 25%, var(--card)) !important;}
html[data-theme="dark"] .bg-gray-100{background-color:var(--border) !important;}
html[data-theme="dark"] .bg-gray-50{background-color:var(--card) !important;}
html[data-theme="dark"] .border-green-200{border-color:rgba(34,197,94,.3) !important;}
html[data-theme="dark"] .border-red-200{border-color:rgba(248,113,113,.3) !important;}
html[data-theme="dark"] img{opacity:.92;}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{height:100%;}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:#e9ecf3;
  color:var(--text);
  -webkit-tap-highlight-color:transparent;
  min-height:100%;
  min-height:100dvh;
  overscroll-behavior-y:none;
}

/* Bingkai ala aplikasi mobile, tetap sempit walau dibuka di desktop */
.app-frame{
  max-width:var(--frame-width);
  min-height:100vh;
  min-height:100dvh;
  margin:0 auto;
  background:var(--bg);
  position:relative;
  box-shadow:0 0 40px rgba(0,0,0,.12);
  display:flex;
  flex-direction:column;
}
@media (min-width:480px){
  body{background:#dfe3ee;}
  .app-frame{min-height:100vh;min-height:100dvh;}
}
@media (display-mode: standalone){
  .app-frame{box-shadow:none;}
}

.app-topbar{
  position:sticky; top:0; z-index:20;
  background:var(--brand);
  color:#fff;
  padding:16px 20px;
  padding-top:calc(16px + env(safe-area-inset-top));
  font-weight:700;
  font-size:17px;
  box-shadow:0 2px 8px color-mix(in srgb, var(--brand) 25%, transparent);
  flex-shrink:0;
}

.app-content{
  padding:16px 16px calc(var(--nav-height) + 28px);
  flex:1;
}

/* ===== Bottom Navigation ===== */
.bottom-nav{
  position:fixed;
  bottom:0; left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:var(--frame-width);
  height:var(--nav-height);
  background:var(--card);
  border-top:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-around;
  z-index:30;
  padding-bottom:env(safe-area-inset-bottom);
}
.nav-item{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px;
  text-decoration:none;
  color:var(--muted);
  font-size:11px;
  font-weight:500;
  flex:1;
  padding:6px 0;
}
.nav-item.active{color:var(--brand);}
.nav-icon{width:22px;height:22px;}
.nav-fab{
  width:52px;height:52px;
  margin-top:-26px;
  border-radius:999px;
  background:linear-gradient(145deg,var(--brand),var(--brand-dark));
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px color-mix(in srgb, var(--brand) 45%, transparent);
  text-decoration:none;
  flex-shrink:0;
}
.nav-fab svg{width:26px;height:26px;}

/* ===== Cards / components ===== */
.card{
  background:var(--card);
  border-radius:16px;
  padding:16px;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  border:1px solid var(--border);
}
.balance-card{
  background:linear-gradient(135deg,var(--brand),#4f46e5);
  color:#fff;
  border-radius:20px;
  padding:22px 20px;
  box-shadow:0 8px 20px color-mix(in srgb, var(--brand) 35%, transparent);
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:6px;
  padding:12px 16px;
  border-radius:12px;
  font-weight:600;
  font-size:14px;
  border:none;
  cursor:pointer;
  text-decoration:none;
  width:100%;
}
.btn-primary{background:var(--brand);color:#fff;}
.btn-primary:active{background:var(--brand-dark);}
.btn-outline{background:#fff;color:var(--brand);border:1.5px solid var(--brand);}
.btn-danger{background:var(--expense);color:#fff;}
.btn-ghost{background:var(--border);color:var(--text);}

#dark-mode-toggle.on{background:var(--brand);}
#dark-mode-knob.on{transform:translateX(20px);}

.tag-income{background:var(--income-bg);color:var(--income);font-weight:700;}
.tag-expense{background:var(--expense-bg);color:var(--expense);font-weight:700;}
.tag{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;}

.input-field{
  width:100%;
  padding:11px 14px;
  border:1.5px solid var(--border);
  border-radius:10px;
  font-size:14px;
  background:var(--card);
  color:var(--text);
}
.input-field:focus{outline:none;border-color:var(--brand);}
label.form-label{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px;display:block;}

.tx-row{
  display:flex;align-items:center;gap:12px;
  padding:12px 0;
  border-bottom:1px solid var(--border);
}
.tx-row:last-child{border-bottom:none;}
.tx-icon{
  width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:18px;
}

.modal-overlay{
  position:fixed;inset:0;background:rgba(17,24,39,.5);
  display:flex;align-items:flex-end;justify-content:center;
  z-index:50;
}
.modal-overlay.hidden{display:none;}
.modal-sheet{
  background:var(--card);width:100%;max-width:var(--frame-width);
  border-radius:20px 20px 0 0;
  padding:20px;
  max-height:88vh;overflow-y:auto;
  animation:slideUp .2s ease-out;
}
@keyframes slideUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}

.fade-in{animation:fadeIn .25s ease-out;}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

.mic-btn{
  width:46px;height:46px;border-radius:999px;
  background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;
  border:none;cursor:pointer;flex-shrink:0;
}
.mic-btn.recording{background:var(--expense);animation:pulse 1s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(220,38,38,.5)}70%{box-shadow:0 0 0 12px rgba(220,38,38,0)}100%{box-shadow:0 0 0 0 rgba(220,38,38,0)}}

/* ===== Ikut Tema Warna Aktif (bukan biru statis) untuk aksen utama ===== */
/* Tailwind CDN menghasilkan warna biru tetap untuk kelas ini; kita override
   supaya mengikuti warna tema yang diatur Admin. Browser lama yang belum
   mendukung color-mix() otomatis kembali ke biru bawaan Tailwind (aman). */
.text-blue-600{color:var(--brand) !important;}
.bg-blue-600{background-color:var(--brand) !important;}
.border-blue-600{border-color:var(--brand) !important;}
.bg-blue-100{background-color:color-mix(in srgb, var(--brand) 15%, white) !important;}
.bg-blue-50{background-color:color-mix(in srgb, var(--brand) 8%, white) !important;}

.login-wrap{
  min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:24px;
  padding-top:calc(24px + env(safe-area-inset-top));
  padding-bottom:calc(24px + env(safe-area-inset-bottom));
}

.empty-state{text-align:center;color:var(--muted);padding:32px 16px;font-size:14px;}

.alert-card{border-color:var(--expense);background:var(--expense-bg);}

.ai-card{background:linear-gradient(135deg,#eef2ff,#f5f3ff);border-color:#e0e7ff;}
html[data-theme="dark"] .ai-card{background:linear-gradient(135deg, color-mix(in srgb, var(--brand) 12%, var(--card)), color-mix(in srgb, var(--brand) 6%, var(--card)));border-color:var(--border);}

/* ===== Baris tombol aksi (Edit / Hapus / dll) — dibuat konsisten sejajar ===== */
.row-actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.inline-form{
  display:inline-flex;
  align-items:center;
  margin:0;
  padding:0;
}
.link-btn{
  background:none;
  border:none;
  padding:0;
  margin:0;
  font-family:inherit;
  font-size:12px;
  font-weight:600;
  line-height:1;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:4px;
  -webkit-appearance:none;
  appearance:none;
}
.link-btn:active{opacity:.7;}
.link-btn.blue{color:var(--brand);}
.link-btn.red{color:var(--expense);}
.link-btn.gray{color:var(--muted);}

.icon-choice{background:var(--card);cursor:pointer;transition:transform .1s;}
.icon-choice:active{transform:scale(.92);}
.icon-choice-active{border-color:var(--brand) !important;background:color-mix(in srgb, var(--brand) 12%, var(--card)) !important;}