/* =========================================================
   ASAKA CASH — Claymorphism Dashboard
   styles.css
   ========================================================= */

:root{
  --bg-a:#eef2fa; --bg-b:#f9eef8; --bg-c:#e8f7f4;
  --ink:#3b3856;
  --ink-2:#5b5878;
  --ink-3:#78768f;
  --lav:#a99cf5; --lav-d:#7f6ee0;
  --mint:#6fd3c0; --mint-d:#33ab97;
  --peach:#ffb59e; --peach-d:#f08a6a;
  --sun:#ffd97d; --sun-d:#e5ab2b;
  --rose:#ffb3d1; --rose-d:#e87aab;
  --sky:#a8cdff; --sky-d:#6b9fe8;
  --in:#2fae95; --out:#ef8067;
  --r-xl:30px; --r-lg:22px; --r-md:16px; --r-sm:11px;

  /* --- permukaan clay: sengaja lebih gelap dari background agar batas terlihat --- */
  --surf-1:#eef1f8;      /* sisi terang */
  --surf-2:#d9deec;      /* sisi gelap  */
  --surf-soft-1:#f1f4fa;
  --surf-soft-2:#e1e6f1;
  --surf-in-1:#dee3ef;   /* input / area cekung */
  --surf-in-2:#edf0f8;
  --line:rgba(148,163,188,.34);

  --sd:
    12px 12px 26px rgba(146,161,186,.5),
    -10px -10px 24px rgba(255,255,255,.95),
    inset 2px 2px 5px rgba(255,255,255,.9),
    inset -3px -3px 8px rgba(146,161,186,.28);
  --sd-sm:
    7px 7px 17px rgba(146,161,186,.46),
    -6px -6px 16px rgba(255,255,255,.92),
    inset 1px 1px 3px rgba(255,255,255,.9),
    inset -2px -2px 5px rgba(146,161,186,.26);
  --sd-in:
    inset 6px 6px 13px rgba(146,161,186,.4),
    inset -6px -6px 13px rgba(255,255,255,.95);

  --clay:linear-gradient(145deg,var(--surf-1),var(--surf-2));
  --clay-2:linear-gradient(145deg,#eff2f9,var(--surf-2));
  --clay-soft:linear-gradient(145deg,var(--surf-soft-1),var(--surf-soft-2));
  --clay-in-g:linear-gradient(145deg,var(--surf-in-1),var(--surf-in-2));

  /* --- permukaan turunan --- */
  --surf-nav:linear-gradient(160deg,#edf0f8,#dbe0ed);      /* sidebar & nav bawah */
  --surf-ctl:linear-gradient(145deg,#edf0f8,#dde2ee);      /* tombol ikon, chip, ghost */
  --surf-hover:linear-gradient(145deg,#eff2f9,#dde2ee);    /* hover menu */
  --surf-modal:linear-gradient(155deg,#eff2f9,#dadeec);    /* modal & layar kunci */
  --surf-track:linear-gradient(145deg,#dce1ee,#ecf0f7);    /* rel progress */
  --surf-cell:linear-gradient(145deg,#eaeef6,#dbe0ec);     /* sel matriks */
  --surf-rowhi:linear-gradient(145deg,#fbfcff,#edf1fa);    /* hover baris tabel */

  --bg-page:
    radial-gradient(1200px 700px at 6% -6%, #e6e2ff 0%, transparent 55%),
    radial-gradient(900px 600px at 96% 6%, #ffe8f3 0%, transparent 50%),
    radial-gradient(1000px 700px at 50% 106%, #dff5ef 0%, transparent 55%),
    linear-gradient(160deg,#eef2fa 0%,#f9eef8 45%,#e8f7f4 100%);
  --scrim:rgba(59,56,86,.34);
  --scroll:rgba(163,177,198,.4);
  --scroll-h:rgba(163,177,198,.65);
  --shadow-up:0 -6px 24px rgba(163,177,198,.34);
}

/* =========================================================
   MODE GELAP — dark grey claymorphism
   ========================================================= */
html[data-theme="dark"]{
  color-scheme:dark;
  --ink:#e9ebf3;
  --ink-2:#b8bdd0;
  --ink-3:#9ba1b6;
  --line:rgba(255,255,255,.1);

  --lav:#b3a7fb; --lav-d:#b3a7fb;
  --mint:#7fe0cb; --mint-d:#5fd8bf;
  --peach:#ffb59e; --peach-d:#ff9b82;
  --sun:#ffd97d; --sun-d:#ffd15c;
  --rose:#ffb3d1; --rose-d:#ff9ec7;
  --sky:#a8cdff; --sky-d:#9dc2ff;
  --in:#4ed3b4; --out:#ff9b82;

  --surf-1:#343946;
  --surf-2:#23262e;
  --surf-soft-1:#2d313b;
  --surf-soft-2:#22252c;
  --surf-in-1:#1b1e24;
  --surf-in-2:#2b2f38;

  --sd:
    12px 12px 26px rgba(0,0,0,.6),
    -8px -8px 20px rgba(255,255,255,.045),
    inset 2px 2px 5px rgba(255,255,255,.055),
    inset -3px -3px 8px rgba(0,0,0,.5);
  --sd-sm:
    7px 7px 17px rgba(0,0,0,.55),
    -5px -5px 14px rgba(255,255,255,.04),
    inset 1px 1px 3px rgba(255,255,255,.055),
    inset -2px -2px 5px rgba(0,0,0,.45);
  --sd-in:
    inset 6px 6px 13px rgba(0,0,0,.62),
    inset -6px -6px 13px rgba(255,255,255,.05);

  --clay:linear-gradient(145deg,var(--surf-1),var(--surf-2));
  --clay-2:linear-gradient(145deg,#363b47,#23262e);
  --clay-soft:linear-gradient(145deg,var(--surf-soft-1),var(--surf-soft-2));
  --clay-in-g:linear-gradient(145deg,var(--surf-in-1),var(--surf-in-2));

  --surf-nav:linear-gradient(160deg,#2b2f38,#1f2229);
  --surf-ctl:linear-gradient(145deg,#363b46,#262a32);
  --surf-hover:linear-gradient(145deg,#3b404c,#2a2e37);
  --surf-modal:linear-gradient(155deg,#353a47,#23262e);
  --surf-track:linear-gradient(145deg,#1b1e24,#2a2e37);
  --surf-cell:linear-gradient(145deg,#343945,#262a32);
  --surf-rowhi:linear-gradient(145deg,#3c414e,#2c303a);

  --bg-page:
    radial-gradient(1200px 700px at 6% -6%, #2c2d42 0%, transparent 55%),
    radial-gradient(900px 600px at 96% 6%, #352a37 0%, transparent 50%),
    radial-gradient(1000px 700px at 50% 106%, #1d3034 0%, transparent 55%),
    linear-gradient(160deg,#22252c 0%,#242330 45%,#1e2528 100%);
  --scrim:rgba(0,0,0,.62);
  --scroll:rgba(255,255,255,.16);
  --scroll-h:rgba(255,255,255,.3);
  --shadow-up:0 -6px 26px rgba(0,0,0,.62);
}

/* label berwarna pastel perlu versi gelap agar tetap terbaca */
html[data-theme="dark"] .p-in{background:linear-gradient(145deg,#1f4038,#17322c);color:#6fe0c4}
html[data-theme="dark"] .p-out{background:linear-gradient(145deg,#402a23,#331f1a);color:#ffab94}
html[data-theme="dark"] .p-lav{background:linear-gradient(145deg,#302b52,#262243);color:#b8adfc}
html[data-theme="dark"] .p-sun{background:linear-gradient(145deg,#3e3421,#332a1a);color:#ffd97d}
html[data-theme="dark"] .p-gray{background:linear-gradient(145deg,#31353f,#262a32);color:#a7acc0}

html[data-theme="dark"] .note{background:linear-gradient(145deg,#3b3220,#2d2718);color:#ffd97d}
html[data-theme="dark"] .note.blue{background:linear-gradient(145deg,#1e2b40,#17222f);color:#a8cdff}
html[data-theme="dark"] .note.green{background:linear-gradient(145deg,#1a3630,#142b26);color:#7fe0cb}
html[data-theme="dark"] .note.red{background:linear-gradient(145deg,#3b231d,#2d1b16);color:#ffab94}

/* kartu berwarna: buang kilau putih, ganti bayangan gelap murni */
html[data-theme="dark"] .stat-c{box-shadow:8px 8px 20px rgba(0,0,0,.55),
  inset 1px 1px 3px rgba(255,255,255,.16), inset -2px -2px 7px rgba(0,0,0,.3)}

/* tombol ikon: hilangkan seluruh shadow putih di mode gelap */
html[data-theme="dark"] .icon-btn,
html[data-theme="dark"] .close-x,
html[data-theme="dark"] .cell-btn{box-shadow:3px 3px 9px rgba(0,0,0,.5), -1px -1px 3px rgba(255,255,255,.02)}
html[data-theme="dark"] .theme-btn{box-shadow:5px 5px 13px rgba(0,0,0,.5), -1px -1px 3px rgba(255,255,255,.02)}
html[data-theme="dark"] .icon-btn:active,
html[data-theme="dark"] .close-x:active,
html[data-theme="dark"] .theme-btn:active,
html[data-theme="dark"] .cell-btn:active{box-shadow:var(--sd-in)}
html[data-theme="dark"] .stat-c .ic{box-shadow:0 3px 9px rgba(0,0,0,.32)}

/* hilangkan sisa glow putih pada seluruh kontrol & elemen berwarna */
html[data-theme="dark"] .btn,
html[data-theme="dark"] .btn.ghost,
html[data-theme="dark"] .mode-chip,
html[data-theme="dark"] .cat-chip,
html[data-theme="dark"] .pill,
html[data-theme="dark"] .avatar,
html[data-theme="dark"] .lrow,
html[data-theme="dark"] .lrow .lic,
html[data-theme="dark"] .stat .ic,
html[data-theme="dark"] .pbar-ic,
html[data-theme="dark"] .brand .logo,
html[data-theme="dark"] .lock .lg,
html[data-theme="dark"] .bn-items a:hover,
html[data-theme="dark"] .bn-items a.on,
html[data-theme="dark"] .seg button.on,
html[data-theme="dark"] .lrow .lic{
  box-shadow:5px 5px 14px rgba(0,0,0,.52), -1px -1px 3px rgba(255,255,255,.025),
    inset 1px 1px 3px rgba(255,255,255,.07);
}
html[data-theme="dark"] .btn:active,
html[data-theme="dark"] .seg button.on:active,
html[data-theme="dark"] .bn-items a.on:active{box-shadow:var(--sd-in)}
html[data-theme="dark"] .modal{box-shadow:16px 16px 46px rgba(0,0,0,.66), -8px -8px 26px rgba(255,255,255,.03)}
html[data-theme="dark"] .toast{box-shadow:8px 8px 24px rgba(0,0,0,.6), -4px -4px 14px rgba(255,255,255,.03)}

/* dropdown bawaan browser ikut tema gelap (daftar pilihan dirender OS) */
html[data-theme="dark"] select.inp{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23b8bdd0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html[data-theme="dark"] select.inp option,
html[data-theme="dark"] select.inp optgroup{
  background:#2b2f38;color:#e9ebf3;
}
html[data-theme="dark"] select.inp option:checked{
  background:#5a4bc4;color:#ffffff;
}
html[data-theme="dark"] select.inp option:disabled{color:#7a8098}

html[data-theme="dark"] .cat-chip button{color:var(--ink-3)}
html[data-theme="dark"] .toast{color:var(--ink)}
html[data-theme="dark"] .toast.ok{color:#7fe0cb}
html[data-theme="dark"] .toast.err{color:#ffab94}
html[data-theme="dark"] .toast.warn{color:#ffd97d}
html[data-theme="dark"] .lock .err{color:#ffab94}
html[data-theme="dark"] .modal-head p{color:var(--ink-3)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
/* color-scheme memberi tahu browser cara mewarnai kontrol bawaan
   (daftar dropdown, pemilih tanggal, scrollbar) sesuai tema aktif */
:root{color-scheme:light}
body{
  font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink);
  background:var(--bg-page);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
  overflow-x:hidden;
  transition:background .3s ease, color .3s ease;
}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:99px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--scroll-h);background-clip:content-box}

/* ---------- primitives ---------- */
.clay{background:var(--clay);border-radius:var(--r-xl);box-shadow:var(--sd)}
.clay-sm{background:var(--clay-2);border-radius:var(--r-lg);box-shadow:var(--sd-sm)}
.clay-in{background:var(--clay-in-g);border-radius:var(--r-md);box-shadow:var(--sd-in)}
.hidden{display:none !important}

.btn{
  border:none;cursor:pointer;font-family:'Nunito';font-weight:800;font-size:13.5px;
  padding:12px 22px;border-radius:var(--r-md);color:#fff;
  background:linear-gradient(145deg,#b3a7fb,#7f6ee0);
  box-shadow:6px 6px 14px rgba(163,177,198,.5), -5px -5px 13px rgba(255,255,255,.9),
    inset 1px 1px 3px rgba(255,255,255,.5);
  transition:transform .12s ease, box-shadow .12s ease, filter .15s;
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  white-space:nowrap;
}
.btn:hover{filter:brightness(1.04)}
.btn:active{transform:translateY(2px);
  box-shadow:inset 5px 5px 12px rgba(90,70,190,.42), inset -3px -3px 10px rgba(255,255,255,.35)}
.btn.mint{background:linear-gradient(145deg,#7fdccb,#3cb39e);
  box-shadow:6px 6px 14px rgba(163,177,198,.5), -5px -5px 13px rgba(255,255,255,.9), inset 1px 1px 3px rgba(255,255,255,.5)}
.btn.peach{background:linear-gradient(145deg,#ffc0ac,#ef8a68);
  box-shadow:6px 6px 14px rgba(163,177,198,.5), -5px -5px 13px rgba(255,255,255,.9), inset 1px 1px 3px rgba(255,255,255,.5)}
.btn.ghost{
  background:var(--surf-ctl);color:var(--ink-2);
  box-shadow:5px 5px 12px rgba(163,177,198,.35), -4px -4px 11px rgba(255,255,255,.9)
}
.btn.sm{padding:8px 14px;font-size:12.5px;border-radius:12px}
.btn.block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn svg{width:16px;height:16px;display:block;flex:0 0 auto}

.field{display:block;margin-bottom:14px}
.field>span{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.inp,select.inp,textarea.inp{
  width:100%;padding:13px 17px;border:none;border-radius:var(--r-md);
  font-family:'Nunito';font-size:14px;color:var(--ink);font-weight:600;
  background:var(--clay-in-g);box-shadow:var(--sd-in);
  outline:none;transition:box-shadow .15s;
}
.inp:focus{box-shadow:var(--sd-in),0 0 0 3px rgba(169,156,245,.35)}
.inp::placeholder{color:var(--ink-3);font-weight:400}
select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235b5878' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:40px;cursor:pointer}
/* daftar pilihan dropdown: warnai eksplisit supaya terbaca di kedua tema */
select.inp option,select.inp optgroup{background:#ffffff;color:#1d1930;font-weight:600}
select.inp option:disabled{color:#9a97b3}
textarea.inp{resize:vertical;min-height:74px;font-weight:400}
.inp-money{position:relative}
.inp-money .pre{position:absolute;left:17px;top:50%;transform:translateY(-50%);
  font-weight:800;color:var(--ink-3);font-size:14px;pointer-events:none}
.inp-money .inp{padding-left:42px;font-weight:800;letter-spacing:.02em}

/* segmented */
.seg{display:flex;gap:8px;padding:6px;border-radius:var(--r-md);
  background:var(--clay-in-g);box-shadow:var(--sd-in)}
.seg button{flex:1;border:none;cursor:pointer;font-family:'Nunito';font-weight:800;font-size:13px;
  padding:11px;border-radius:11px;background:transparent;color:var(--ink-3);transition:all .15s;
  display:inline-flex;align-items:center;justify-content:center;gap:7px}
.seg button svg{width:15px;height:15px;display:block;flex:0 0 auto}
.seg button.on{color:#fff;background:linear-gradient(145deg,#b3a7fb,#7f6ee0);
  box-shadow:4px 4px 10px rgba(140,120,220,.4), -3px -3px 9px rgba(255,255,255,.85)}
.seg button.on.in{background:linear-gradient(145deg,#7fdccb,#3cb39e);
  box-shadow:4px 4px 10px rgba(60,179,158,.4), -3px -3px 9px rgba(255,255,255,.85)}
.seg button.on.out{background:linear-gradient(145deg,#ffc0ac,#ef8a68);
  box-shadow:4px 4px 10px rgba(239,138,104,.4), -3px -3px 9px rgba(255,255,255,.85)}

/* pills */
.pill-cat{background:var(--surf-ctl)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 13px;border-radius:999px;
  font-size:11.5px;font-weight:800;white-space:nowrap;
  box-shadow:3px 3px 8px rgba(163,177,198,.32), -2px -2px 7px rgba(255,255,255,.9)}
.p-in{background:linear-gradient(145deg,#d5f5ed,#b3ebdc);color:#0f6b5b}
.p-out{background:linear-gradient(145deg,#ffe2da,#ffcabb);color:#a8412c}
.p-lav{background:linear-gradient(145deg,#e6e0ff,#d3c9fb);color:#4f3fbd}
.p-sun{background:linear-gradient(145deg,#fff0cc,#ffe2a0);color:#8a5d05}
.p-gray{background:linear-gradient(145deg,#eff1f6,#e0e3ec);color:#6d6a8a}

/* ---------- app shell ---------- */
.app{min-height:100vh}
.main{padding:26px 30px 122px;min-width:0;max-width:1320px;margin:0 auto}

/* ---------- menu navigasi (selalu di bawah) ---------- */
.bottomnav{
  position:fixed;bottom:0;left:0;right:0;z-index:90;
  display:flex;align-items:center;gap:16px;
  padding:10px 22px calc(10px + env(safe-area-inset-bottom));
  background:var(--surf-nav);
  box-shadow:var(--shadow-up);
}
.bn-items{display:flex;align-items:center;gap:8px;flex:1;justify-content:center}
.bn-items a{
  display:flex;align-items:center;gap:9px;padding:10px 16px;border-radius:14px;
  text-decoration:none;color:var(--ink-2);font-weight:800;font-size:13.5px;
  cursor:pointer;transition:all .15s;white-space:nowrap;
}
.bn-items a .ni{display:grid;place-items:center;flex:0 0 auto}
.bn-items a .ni svg{width:19px;height:19px;display:block}
.bn-items a:hover{background:var(--surf-hover);
  box-shadow:4px 4px 11px rgba(163,177,198,.3), -3px -3px 10px rgba(255,255,255,.85)}
.bn-items a.on{color:#fff;background:linear-gradient(145deg,#b3a7fb,#7f6ee0);
  box-shadow:6px 6px 14px rgba(140,120,220,.4), -4px -4px 12px rgba(255,255,255,.8)}

@media (max-width:1180px){
  .bn-items a{padding:10px 14px;font-size:13px}
}
@media (max-width:980px){
  .bn-items a{gap:7px;padding:9px 12px;font-size:12.5px}
  .bn-items a .ni svg{width:18px;height:18px}
}
.topbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.topbar .title{flex:1;min-width:180px}
.topbar h2{font-family:'Baloo 2';font-size:26px;font-weight:800;letter-spacing:-.3px;line-height:1.2}
.topbar .sub{font-size:13px;color:var(--ink-3);font-weight:600}
.topbar .tools{display:flex;align-items:center;gap:11px;flex-wrap:wrap}

.theme-btn{
  width:42px;height:42px;border:none;border-radius:14px;cursor:pointer;flex:0 0 auto;
  display:grid;place-items:center;color:var(--ink-2);background:var(--surf-ctl);
  box-shadow:var(--sd-sm);transition:transform .12s ease, color .15s ease;
}
.theme-btn:hover{color:var(--lav-d)}
.theme-btn:active{transform:translateY(2px);box-shadow:var(--sd-in)}
.theme-btn svg{width:19px;height:19px;display:block}

.mode-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
  font-size:12px;font-weight:800;background:var(--surf-ctl);
  box-shadow:var(--sd-sm);cursor:pointer;color:var(--ink-2)}
.mode-chip i{width:9px;height:9px;border-radius:50%;display:block}
.mode-chip.live i{background:#33ab97;box-shadow:0 0 0 4px rgba(51,171,151,.22)}
.mode-chip.local i{background:#e5ab2b;box-shadow:0 0 0 4px rgba(229,171,43,.22)}
.mode-chip.err i{background:#ef8067;box-shadow:0 0 0 4px rgba(239,128,103,.22)}

/* ---------- grid + cards ---------- */
.grid{display:grid;gap:18px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g-2-1{grid-template-columns:1.5fr 1fr}
.mb{margin-bottom:18px}
.mt{margin-top:18px}

.card{padding:22px 24px;border-radius:var(--r-lg);background:var(--clay-2);box-shadow:var(--sd-sm)}
.card.pad-lg{padding:26px 28px}
.card h3{font-family:'Baloo 2';font-size:16px;font-weight:700;margin-bottom:4px}
.card .hint{font-size:12.5px;color:var(--ink-3);margin-bottom:16px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.card-head h3{margin:0}

.stat{padding:22px 22px;border-radius:var(--r-lg);background:var(--clay-2);box-shadow:var(--sd-sm);
  position:relative;overflow:hidden}
.stat .ic{position:absolute;right:16px;top:16px;width:40px;height:40px;border-radius:13px;
  display:grid;place-items:center;font-size:17px;
  box-shadow:4px 4px 11px rgba(163,177,198,.38), -3px -3px 10px rgba(255,255,255,.9)}
.stat .lb{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.stat .vl{font-family:'Baloo 2';font-size:28px;font-weight:800;margin:9px 0 3px;line-height:1.08;
  letter-spacing:-.5px}
.stat .fn{font-size:12px;color:var(--ink-3);font-weight:600}
.stat .ic svg{width:20px;height:20px;display:block}

/* --- kartu statistik berwarna (teks gelap agar kontras) --- */
.stat-c{color:#1d1930}
.stat-c .lb,.stat-c .fn{color:rgba(29,25,48,.68)}
.stat-c .vl{color:#1d1930}
.stat-c .ic{box-shadow:0 3px 9px rgba(20,16,40,.18)}
.stat-c.tone-lav{background:linear-gradient(145deg,#8d7de6,#6f5ed4)}
.stat-c.tone-mint{background:linear-gradient(145deg,#3fbfa6,#25a08a)}
.stat-c.tone-peach{background:linear-gradient(145deg,#f28e74,#e06b4d)}
.stat-c.tone-sun{background:linear-gradient(145deg,#f0bd4e,#dfa41f)}
.stat-c.tone-lav .ic{background:rgba(255,255,255,.88);color:#6a59cf}
.stat-c.tone-mint .ic{background:rgba(255,255,255,.88);color:#158a74}
.stat-c.tone-peach .ic{background:rgba(255,255,255,.88);color:#d55f3f}
.stat-c.tone-sun .ic{background:rgba(255,255,255,.88);color:#a5750d}
.v-in{color:var(--in)} .v-out{color:var(--out)} .v-lav{color:var(--lav-d)} .v-mint{color:var(--mint-d)}
.v-sun{color:var(--sun-d)} .v-rose{color:var(--rose-d)}

/* ---------- table ---------- */
.tbl-scroll{overflow-x:auto;border-radius:var(--r-lg);padding:6px}
table.tbl{width:100%;border-collapse:separate;border-spacing:0 5px;font-size:13.3px;min-width:600px}
table.tbl th{
  text-align:left;padding:11px 14px;font-size:10.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
}
table.tbl td{padding:12px 14px;background:var(--clay-soft);color:var(--ink-2);
  vertical-align:middle}
table.tbl tbody tr td:first-child{border-radius:12px 0 0 12px}
table.tbl tbody tr td:last-child{border-radius:0 12px 12px 0}
table.tbl tbody tr:hover td{background:var(--surf-rowhi)}
table.tbl td b{color:var(--ink);font-weight:800}
table.tbl td.num{text-align:right;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
table.tbl td.act{text-align:right;white-space:nowrap}
.mono{font-family:ui-monospace,'Cascadia Code',Consolas,monospace;font-size:12px}
.empty{padding:38px 20px;text-align:center;color:var(--ink-3);font-size:13.5px;font-weight:600}
.empty .big{display:block;margin-bottom:12px;opacity:.42;line-height:0}
.empty .big svg{width:34px;height:34px;display:block;margin:0 auto}

.icon-btn{
  width:32px;height:32px;border:none;border-radius:11px;cursor:pointer;font-size:13px;
  display:inline-grid;place-items:center;margin-left:5px;
  background:var(--surf-ctl);color:var(--ink-2);
  box-shadow:3px 3px 8px rgba(163,177,198,.35), -2px -2px 7px rgba(255,255,255,.9);
  transition:transform .1s;
}
.icon-btn:hover{color:var(--lav-d)}
.icon-btn:active{transform:translateY(1px);box-shadow:var(--sd-in)}
.icon-btn.danger:hover{color:var(--out)}
.icon-btn svg{width:15px;height:15px;display:block}

/* ---------- chart ---------- */
.chart-box{position:relative;height:262px;width:100%}
.chart-box.tall{height:300px}
.chart-box.sm{height:210px}
.chart-fallback{display:grid;place-items:center;height:100%;color:var(--ink-3);font-size:13px;
  text-align:center;padding:20px}

/* ---------- progress rows ---------- */
.prow{display:flex;align-items:center;gap:13px;padding:11px 0}
.prow+.prow{border-top:1px solid var(--line)}
.avatar{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto;
  font-family:'Baloo 2';font-weight:800;font-size:15px;color:#fff;
  box-shadow:4px 4px 10px rgba(163,177,198,.42), -3px -3px 9px rgba(255,255,255,.9)}
.avatar svg,.lic svg{width:66%;height:66%;display:block}
.prow .who{flex:1;min-width:0}
.prow .who .nm{font-weight:800;font-size:13.8px;color:var(--ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.prow .who .sb{font-size:11.5px;color:var(--ink-3);font-weight:600}
.bar-track{height:9px;border-radius:99px;background:var(--surf-track);
  box-shadow:var(--sd-in);overflow:hidden;margin-top:6px}
.bar-fill{height:100%;border-radius:99px;transition:width .5s cubic-bezier(.34,1.3,.64,1)}
.bf-in{background:linear-gradient(90deg,#8fe0d0,#33ab97)}
.bf-warn{background:linear-gradient(90deg,#ffd97d,#e5ab2b)}
.bf-out{background:linear-gradient(90deg,#ffb59e,#ef8067)}

/* ---------- bilah periode berjalan ---------- */
.pbar{display:flex;align-items:center;gap:15px;padding:16px 22px;border-radius:var(--r-lg);
  background:var(--clay-2);box-shadow:var(--sd-sm)}
.pbar-ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(145deg,#d5ccfb,#b3a7fb);color:#4f3fbd;
  box-shadow:4px 4px 11px rgba(163,177,198,.42), -3px -3px 10px rgba(255,255,255,.9)}
.pbar-ic svg{width:21px;height:21px;display:block}
.pbar-t{flex:1;min-width:0}
.pbar-n{font-family:'Baloo 2';font-size:16px;font-weight:700;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;line-height:1.3}
.pbar-s{font-size:12.2px;color:var(--ink-3);font-weight:600;margin-top:3px}
.badge-live{font-size:9.5px;font-weight:800;letter-spacing:.09em;padding:3px 10px;border-radius:99px;
  background:linear-gradient(145deg,#d5f5ed,#b3ebdc);color:#0f6b5b}
html[data-theme="dark"] .badge-live{background:linear-gradient(145deg,#1f4038,#17322c);color:#6fe0c4}

/* ---------- ledger rows ---------- */
.lrow{display:flex;align-items:center;gap:13px;padding:12px 15px;border-radius:var(--r-md);
  background:var(--clay-soft);margin-bottom:8px;
  box-shadow:3px 3px 9px rgba(163,177,198,.26), -2px -2px 8px rgba(255,255,255,.85)}
.lrow .lic{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;
  font-size:15px;box-shadow:3px 3px 8px rgba(163,177,198,.32), -2px -2px 7px rgba(255,255,255,.9)}
.lrow .lic svg{width:18px;height:18px;display:block}
.lrow .info{flex:1;min-width:0}
.lrow .info .t1{font-weight:800;font-size:13.4px;color:var(--ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.lrow .info .t2{font-size:11px;color:var(--ink-3);font-weight:600}
.lrow .amt{font-weight:800;font-size:13.6px;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- matrix ---------- */
table.matrix{width:100%;border-collapse:separate;border-spacing:0 6px;font-size:12.8px;min-width:520px}
table.matrix th{text-align:center;padding:9px 8px;font-size:10.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
table.matrix th:first-child{text-align:left}
table.matrix td{background:var(--clay-soft);padding:10px 8px;text-align:center}
table.matrix tbody tr td:first-child{border-radius:12px 0 0 12px;text-align:left;font-weight:800;color:var(--ink)}
table.matrix tbody tr td:last-child{border-radius:0 12px 12px 0}
.cell-btn{border:none;cursor:pointer;font-family:'Nunito';font-weight:800;font-size:11px;
  padding:6px 12px;border-radius:9px;transition:all .13s;white-space:nowrap;
  background:var(--surf-cell);color:var(--ink-3);
  box-shadow:2px 2px 6px rgba(146,161,186,.34), -2px -2px 6px rgba(255,255,255,.85)}
.cell-btn.lunas{background:linear-gradient(145deg,#7fdccb,#3cb39e);color:#fff;
  box-shadow:3px 3px 9px rgba(60,179,158,.4), -2px -2px 7px rgba(255,255,255,.8)}
.cell-btn.kurang{background:linear-gradient(145deg,#fff0cc,#ffe2a0);color:#8a5d05}
.cell-btn:active{transform:translateY(1px)}

/* ---------- modal ---------- */
.overlay{position:fixed;inset:0;background:var(--scrim);backdrop-filter:blur(5px);
  display:grid;place-items:center;padding:22px;z-index:120;animation:fade .18s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{width:100%;max-width:520px;max-height:90vh;overflow-y:auto;padding:28px 30px;
  border-radius:var(--r-xl);background:var(--surf-modal);
  box-shadow:16px 16px 44px rgba(120,130,160,.4), -10px -10px 30px rgba(255,255,255,.9);
  animation:pop .24s cubic-bezier(.34,1.35,.64,1)}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:20px}
.modal-head h3{font-family:'Baloo 2';font-size:21px;font-weight:800}
.modal-head p{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.modal-foot{display:flex;gap:11px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap}
.close-x{width:36px;height:36px;border:none;border-radius:12px;cursor:pointer;
  background:var(--surf-ctl);color:var(--ink-2);flex:0 0 auto;
  display:grid;place-items:center;
  box-shadow:4px 4px 10px rgba(163,177,198,.35), -3px -3px 9px rgba(255,255,255,.9)}
.close-x svg{width:16px;height:16px;display:block}

/* ---------- toast ---------- */
#toastRoot{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:200;
  display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none}
.toast{padding:14px 24px;border-radius:var(--r-md);font-size:13.5px;font-weight:800;
  background:var(--surf-ctl);color:var(--ink);
  box-shadow:8px 8px 22px rgba(120,130,160,.4), -6px -6px 18px rgba(255,255,255,.9);
  animation:slideUp .25s cubic-bezier(.34,1.35,.64,1);max-width:88vw;text-align:center}
@keyframes slideUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.toast.ok{color:#0f6b5b}
.toast.err{color:#a8412c}
.toast.warn{color:#8a5d05}

/* ---------- lock screen ---------- */
.lock{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:22px;
  background:var(--bg-page)}
.lock .box{width:100%;max-width:370px;padding:38px 34px;border-radius:var(--r-xl);text-align:center;
  background:var(--surf-modal);
  box-shadow:16px 16px 44px rgba(120,130,160,.38), -10px -10px 30px rgba(255,255,255,.9)}
.lock .lg{width:64px;height:64px;border-radius:22px;margin:0 auto 18px;display:grid;place-items:center;
  font-family:'Baloo 2';font-weight:800;font-size:26px;color:#fff;
  background:linear-gradient(145deg,#b3a7fb,#7f6ee0);
  box-shadow:7px 7px 18px rgba(163,177,198,.5), -5px -5px 15px rgba(255,255,255,.9)}
.lock h2{font-family:'Baloo 2';font-size:22px;font-weight:800;margin-bottom:5px}
.lock p{font-size:13px;color:var(--ink-3);margin-bottom:22px}
.pin-inp{text-align:center;letter-spacing:.6em;font-size:22px;font-weight:800;padding:15px}
.lock .err{color:#a8412c;font-size:12.5px;font-weight:800;margin-top:11px;min-height:18px}

/* ---------- misc ---------- */
.note{padding:16px 20px;border-radius:var(--r-md);font-size:13.2px;font-weight:600;
  background:linear-gradient(145deg,#fff6e8,#ffeccd);color:#7d5405;box-shadow:var(--sd-sm)}
.note.blue{background:linear-gradient(145deg,#eaf2ff,#dae7fd);color:#2f5fa8}
.note.green{background:linear-gradient(145deg,#e8f9f4,#d5f1e9);color:#0f6b5b}
.note.red{background:linear-gradient(145deg,#ffeee9,#ffdcd2);color:#a8412c}
.note b{font-weight:800}

.row{display:flex;gap:11px;flex-wrap:wrap;align-items:center}
.row.end{justify-content:flex-end}
.grow{flex:1;min-width:140px}
.divider{height:1px;background:var(--line);margin:20px 0;border:0}
.filters{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:end}

.cat-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  font-size:12.5px;font-weight:800;background:var(--surf-ctl);
  color:var(--ink-2);box-shadow:var(--sd-sm);margin:0 8px 8px 0}
.cat-chip .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.cat-chip button{border:none;background:transparent;cursor:pointer;color:var(--ink-3);
  display:grid;place-items:center;padding:0 0 0 3px}
.cat-chip button svg{width:13px;height:13px;display:block}
.cat-chip button:hover{color:var(--out)}

.kv{display:flex;justify-content:space-between;gap:14px;padding:11px 0;font-size:13.4px;
  border-bottom:1px solid var(--line)}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--ink-3);font-weight:700}
.kv .v{font-weight:800;color:var(--ink);text-align:right}

.badge-new{font-size:10px;padding:2px 8px;border-radius:99px;font-weight:800;
  background:linear-gradient(145deg,#d5f5ed,#b3ebdc);color:#0f6b5b;margin-left:6px}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g-2-1{grid-template-columns:1fr}
}
@media (max-width:820px){
  .main{padding:18px 16px 104px}
  .g3,.g2{grid-template-columns:1fr}
  .topbar h2{font-size:21px}
  .topbar{padding-right:0}
  .bottomnav{gap:0;padding:8px 6px calc(8px + env(safe-area-inset-bottom));
    justify-content:space-around}
  .bn-items{justify-content:space-around;gap:0;width:100%}
  .bn-items a{flex-direction:column;gap:3px;padding:7px 8px;min-width:56px;
    font-size:10px;text-align:center}
  .bn-items a .ni svg{width:22px;height:22px}
  .modal{padding:24px 20px}
  .chart-box{height:230px}
}
@media (max-width:520px){
  .g4{grid-template-columns:1fr}
  .stat .vl{font-size:24px}
}