/* Bahasa visual NaikTerus.
   Bagian 1 = aturan dasar + Heritage Ledger (tema default, TANPA scope).
   Bagian 2 = blok [data-theme="..."] buat tema lain. Nilai warna/font/radius datang dari
   themes.py lewat <style id="theme-vars"> di <head>; yang di sini cuma KERAJINAN CSS-nya
   (bayangan, tekstur, motif) -- itu memang nggak muat jadi data.

   HARAM DISENTUH pas nge-restyle (nggak punya CSS sendiri / dibaca app.js, matinya senyap):
   .pad, [data-d], #back, #amt, #amtview, #preview, #goalimpact, #amtdesktop, .cats[data-kind],
   [data-nw], [data-grow], [data-countup], .hide-scrollbar, .touch-only, .mouse-only,
   .flash.bye, .shake, .cf, #rekor, summary::-webkit-details-marker.
   Pernah kejadian: class .pad kebuang -> seluruh numpad mati, NOL error di console. */

/* cegah kedip putih di tema gelap selagi Tailwind CDN (418KB) masih diunduh */
html { background: rgb(var(--background)); }
body {
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
}
.material-symbols-outlined {
  font-variation-settings: 'FILL' var(--icon-fill, 0), 'wght' var(--icon-wght, 400),
                           'GRAD' var(--icon-grad, 0), 'opsz' 24;
  user-select: none;
}
/* dipakai nav aktif & FAB. Dulu inline style="" di markup -- dan inline MENANG atas CSS,
   jadi ikonnya nggak akan pernah ikut tema selama masih inline. */
.icon-fill { font-variation-settings: 'FILL' 1, 'wght' var(--icon-wght, 400), 'opsz' 24; }
.icon-bold { font-variation-settings: 'FILL' var(--icon-fill, 0), 'wght' 600, 'opsz' 24; }

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
[data-grow] { transition: width 1s cubic-bezier(.2, .8, .2, 1); }
summary::-webkit-details-marker { display: none; }

/* plugin forms nge-set border fokus ke blue-600 dgn spesifisitas (0,2,0) -- `html` di depan
   bikin (0,2,1) supaya menang tanpa harus ngedit 14 template. App ini nggak punya warna biru. */
html [type="text"]:focus, html [type="password"]:focus, html [type="number"]:focus,
html [type="date"]:focus, html [type="file"]:focus, html [type="email"]:focus,
html textarea:focus, html select:focus { border-color: rgb(var(--primary)); }

/* Numpad cuma buat perangkat sentuh (hp/tab); PC (ada mouse presisi) pakai input ketik biasa.
   Dicek lewat pointer/hover, bukan lebar layar -- tablet landscape bisa selebar laptop kecil. */
.mouse-only { display: none; }
@media (hover: hover) and (pointer: fine) {
  .touch-only { display: none !important; }
  .mouse-only { display: flex; }
}

/* --- bahasa visual buku kas antik (Heritage Ledger = default, tanpa scope) --- */
.vintage-border { border: var(--edge-w, 1px) solid var(--edge-color, rgb(var(--on-surface))); }
.vintage-shadow { box-shadow: var(--shadow-hard, 4px 4px 0 0 rgb(var(--primary) / .2)); }
.paper {
  background: var(--card-bg, rgb(var(--surface)));
  border: 1px solid var(--card-border-color, rgb(var(--outline-variant)));
  border-radius: var(--card-radius, 0);
  box-shadow: var(--shadow-card, 4px 4px 0 0 rgb(var(--primary) / .1));
}
/* label "tab map" yang nempel di pojok kartu */
.folder-tab {
  position: absolute; top: -13px; left: 20px; z-index: 10;
  background: var(--tab-bg, rgb(var(--secondary-container)));
  color: var(--tab-fg, rgb(var(--on-secondary-container)));
  border: var(--tab-border, 1px solid rgb(var(--on-surface)));
  border-radius: var(--tab-radius, 0);
  transform: var(--tab-transform, none);
  padding: 2px 10px; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
/* tombol aksi utama di tengah bottom bar — bayangan keras, bukan glow */
.fab-catat {
  border: var(--fab-ring-w, 4px) solid var(--fab-ring, rgb(var(--background)));
  box-shadow: var(--shadow-fab, 3px 3px 0 0 rgb(var(--primary) / .35));
}
.fab-catat:active { box-shadow: var(--shadow-fab-active, 1px 1px 0 0 rgb(var(--primary) / .35)); }

/* tombol angka ala mesin tik */
.typewriter-key {
  box-shadow: var(--key-shadow,
              inset 0 2px 4px rgba(255, 255, 255, .8), 0 4px 6px rgba(0, 0, 0, .1),
              0 1px 2px rgba(0, 0, 0, .2));
  transition: all .1s ease;
}
.typewriter-key:active {
  box-shadow: var(--key-shadow-active, inset 0 1px 2px rgba(0, 0, 0, .3));
  transform: translateY(2px);
}
.recessed-display { box-shadow: var(--recess-shadow, inset 0 2px 8px rgba(0, 0, 0, .05)); }

/* grafik net worth yang bisa diraba (home). Semua warna lewat token -> otomatis
   ikut 8 tema tanpa satu pun override per tema. */
#nwplot { cursor: crosshair; }
.nwaxis {
  position: absolute; right: 2px; transform: translateY(-50%);
  font-size: 10px; line-height: 1; padding: 1px 4px; pointer-events: none;
  color: rgb(var(--on-surface-variant));
  background: rgb(var(--surface) / .75);   /* biar garis putus2nya nggak nyoret angka */
}
.nwdot {
  position: absolute; width: 10px; height: 10px; border-radius: 9999px;
  background: rgb(var(--primary));
  border: 2px solid var(--fab-ring, rgb(var(--background)));
  transform: translate(-50%, -50%); pointer-events: none;
}
#nwlast { width: 8px; height: 8px; }   /* titik "kamu di sini" di ujung garis */
#nwguide {
  position: absolute; top: 0; bottom: 0; width: 1px; transform: translateX(-50%);
  background: rgb(var(--outline)); pointer-events: none;
}
#nwtip {
  position: absolute; top: -6px; transform: translate(-50%, -100%);
  white-space: nowrap; padding: 4px 9px; font-size: 12px; font-weight: 600;
  z-index: 10; pointer-events: none;
  background: var(--card-bg, rgb(var(--surface)));
  color: rgb(var(--on-surface));
  border: 1px solid var(--card-border-color, rgb(var(--outline-variant)));
  border-radius: var(--card-radius, 0);
  box-shadow: var(--shadow-card, 4px 4px 0 0 rgb(var(--primary) / .1));
}

/* flash toast */
.flash {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  background: var(--toast-bg, rgb(var(--primary)));
  color: var(--toast-fg, rgb(var(--on-primary)));
  font-weight: 700; padding: 10px 18px; z-index: 60;
  border: var(--edge-w, 1px) solid var(--edge-color, rgb(var(--on-surface)));
  border-radius: var(--card-radius, 0);
  box-shadow: var(--shadow-toast, 4px 4px 0 0 rgb(var(--primary) / .25));
  transition: opacity .4s, transform .4s; white-space: nowrap;
}
.flash.bye { opacity: 0; transform: translate(-50%, -20px); }

/* quick-add: goyang kalau simpan Rp 0 */
.shake { animation: shake .4s; }
@keyframes shake {
  25% { transform: translateX(calc(-1 * var(--shake-amp, 8px))); }
  75% { transform: translateX(var(--shake-amp, 8px)); }
}

/* rekor all-time-high — stempel */
.rekorpop {
  position: fixed; top: 70px; left: 50%; transform: translateX(-50%);
  background: var(--stamp-bg, rgb(var(--surface)));
  color: var(--stamp-fg, rgb(var(--primary)));
  border: var(--stamp-border, 2px solid rgb(var(--primary)));
  border-radius: var(--card-radius, 0);
  padding: 12px 20px; font-size: .95rem; z-index: 70;
  box-shadow: var(--shadow-stamp, 4px 4px 0 0 rgb(var(--primary) / .3));
  animation: pop .5s cubic-bezier(.2, 1.4, .4, 1); white-space: nowrap;
}
@keyframes pop { from { transform: translate(-50%, -30px) scale(.8); opacity: 0; } }
.cf {
  position: fixed; top: -12px;
  width: var(--cf-w, 8px); height: var(--cf-h, 14px); border-radius: var(--cf-radius, 0);
  z-index: 65; animation: fall linear forwards; pointer-events: none;
}
@keyframes fall { to { transform: translateY(105vh) rotate(560deg); } }

@media (prefers-reduced-motion: reduce) {
  .rekorpop, .shake, [data-grow], .typewriter-key { animation: none; transition: none; }
  .cf { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   BAGIAN 2 — PERLAKUAN ELEMEN PER TEMA
   Warna/font/radius-nya udah datang dari <style id="theme-vars">; di sini
   cuma yang nggak muat jadi data: tekstur, bayangan, motif, penyesuaian
   tipografi. Semua di-scope [data-theme="..."] -> spesifisitas (0,2,0),
   menang atas utility Tailwind (0,1,0) tanpa !important.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── NEON ───────────────────────────
   Kamar gelap, SATU strip LED. Anggaran cahaya dijaga keras: yang boleh
   punya halo cuma 3 -- nominal, tombol catat, garis grafik. Sisanya boleh
   berwarna tapi tanpa bloom, kalau nggak layarnya berkabut & angka susah
   dibaca. Garis 1px berwarna = bahasa rangka, bukan cahaya. */
/* card-bg / card-radius / shadow-card / tab-* hidup di themes.py, bukan di sini --
   kartu preview di halaman Pengaturan baca var yang sama, jadi kalau nilainya
   ditulis dobel di CSS, preview-nya bakal bohong. */
[data-theme="neon"] { --edge-color: rgb(5 9 11 / .9); }
[data-theme="neon"] body {
  background-color: rgb(var(--background));
}
/* satu sumber cahaya dari ATAS (strip di balik meja), bukan glow per elemen */
[data-theme="neon"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 42% at 50% -6%, rgb(var(--primary) / .085), transparent 62%);
}
[data-theme="neon"] ::selection { background: rgb(var(--primary) / .3); color: rgb(var(--background)); }
[data-theme="neon"] input::placeholder,
[data-theme="neon"] textarea::placeholder { color: rgb(var(--outline)); }
[data-theme="neon"] select option { background: rgb(var(--surface-container)); color: rgb(var(--on-surface)); }
[data-theme="neon"] input:-webkit-autofill {
  -webkit-text-fill-color: rgb(var(--on-surface));
  box-shadow: inset 0 0 0 1000px rgb(var(--surface-container-low));
}
[data-theme="neon"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.65); }

/* kartu = pelat gelap DATAR + rangka kelihatan. Sengaja tanpa gradient supaya
   warna yang dihitung di cek kontras memang warna yang beneran ada di layar. */
[data-theme="neon"] input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not(.bg-transparent),
[data-theme="neon"] select, [data-theme="neon"] textarea {
  background-color: rgb(var(--background));
  border-color: rgb(var(--outline-variant));
}
/* tepi tombol: garis rambut. Dipakai di 8 tempat -- kalau tiap tombol
   bercahaya, anggaran cahayanya bubar. */
[data-theme="neon"] .vintage-border { border-radius: 3px; box-shadow: 0 0 0 1px rgb(var(--primary) / .32); }
[data-theme="neon"] .vintage-shadow {
  box-shadow: 0 0 0 1px rgb(var(--primary) / .5), 0 3px 0 rgb(0 0 0 / .8),
              0 14px 26px -18px rgb(0 0 0 / .95);
}
/* label kartu: pelat amber datar, NOL glow -- yang ini ada di dalam {% for %}
   di goals.html, jadi glow-nya bakal dikali jumlah goal. */
[data-theme="neon"] .folder-tab {
  top: -11px; left: 16px; padding: 3px 10px;
  border: 1px solid currentColor; border-radius: 2px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; box-shadow: none;
}
/* HALO 1/3 — satu-satunya benda yang bernapas */
[data-theme="neon"] .fab-catat {
  border-color: rgb(var(--background));
  animation: neon-breathe 3.4s ease-in-out infinite;
}
[data-theme="neon"] .fab-catat:active {
  animation: none;
  box-shadow: 0 0 0 1px rgb(var(--primary) / .85), 0 0 14px -6px rgb(var(--primary) / .9);
}
@keyframes neon-breathe {
  0%, 100% { box-shadow: 0 0 0 1px rgb(var(--primary) / .5), 0 0 18px -6px rgb(var(--primary) / .55), 0 0 40px -14px rgb(var(--primary) / .3); }
  50%      { box-shadow: 0 0 0 1px rgb(var(--primary) / .75), 0 0 30px -4px rgb(var(--primary) / .8), 0 0 66px -10px rgb(var(--primary) / .48); }
}
/* keycap gelap, digit NETRAL: markup ngasih text-primary, dan 12 tombol lime
   = ladang cahaya yang menandingi layar nominal. Lime cuma muncul saat ditekan. */
[data-theme="neon"] .typewriter-key {
  background: linear-gradient(180deg, #1b262c 0%, rgb(var(--surface-container)) 100%);
  border: 1px solid #2f4048; color: rgb(var(--on-surface));
  font-family: var(--font-mono); font-weight: 700;
  box-shadow: inset 0 1px 0 rgb(var(--on-surface) / .1), 0 3px 0 #060c0f,
              0 6px 14px -8px rgb(0 0 0 / .95);
  transition: transform .08s ease, box-shadow .08s ease, color .08s ease;
}
[data-theme="neon"] .typewriter-key:active {
  transform: translateY(3px); color: rgb(var(--primary));
  box-shadow: inset 0 2px 7px rgb(0 0 0 / .85), 0 0 0 1px rgb(var(--primary) / .55);
}
[data-theme="neon"] #back.typewriter-key { color: rgb(var(--secondary-container)); }
/* layar nominal: sumur matte paling hitam, dengan strip LED beneran (garis
   lime 2px) di dasarnya. Scanline CRT sengaja DIBUANG -- itu metafora
   terminal, dan versi awalnya butuh overflow:hidden yang malah motong angka. */
[data-theme="neon"] .recessed-display {
  background: #020406; border: 1px solid rgb(var(--outline-variant)); border-radius: 3px;
  padding-left: 14px; padding-right: 14px;
  box-shadow: inset 0 3px 14px rgb(0 0 0 / .9), inset 0 -2px 0 0 rgb(var(--primary));
}
/* HALO 2/3. clamp() bukan hiasan: JetBrains Mono ~0.6em/karakter, dan nominal
   12 digit (batas app.js) bakal lewat lebar sumur di HP 375px kalau dipatok. */
[data-theme="neon"] #amtview {
  display: block; width: 100%; text-align: right; white-space: nowrap;
  font-size: clamp(19px, 6.6vw, 32px); line-height: 1.18; letter-spacing: -.045em;
  text-shadow: 0 0 18px rgb(var(--primary) / .4);
}
[data-theme="neon"] #preview, [data-theme="neon"] #goalimpact { letter-spacing: 0; }
[data-theme="neon"] [data-countup] { text-shadow: 0 0 18px rgb(var(--primary) / .38); }  /* HALO 3/3 */
/* angka headline di grid 2 kolom cuma punya ~124px */
[data-theme="neon"] .grid.grid-cols-2 .text-headline-lg-mobile {
  font-size: clamp(16px, 4.4vw, 22px); line-height: 1.25; letter-spacing: -.04em;
}
/* label 11px BOLEH renggang, ANGKA tidak: budget & goals pakai kombinasi ini
   buat nominal, dan tracking .1em bikin grouping ribuan ilang. */
[data-theme="neon"] .font-data-mono.text-label-sm:not(.uppercase) {
  font-size: 12px; line-height: 18px; letter-spacing: 0;
}
[data-theme="neon"] .flash {
  background: rgb(var(--surface-container)); color: rgb(var(--on-surface));
  border: 1px solid rgb(var(--outline-variant)); border-left: 3px solid rgb(var(--primary));
  border-radius: 3px; font-family: var(--font-body); font-size: 14px; font-weight: 500;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .9), 0 16px 34px -18px #000;
}
/* kedip DIBUANG: "neon berkedip" itu refleks pertama tema bernama Neon, dan di
   app duit bikin angka rekor sempat ilang pas lagi dibaca. */
[data-theme="neon"] .rekorpop {
  background: rgb(var(--surface-container-low)); color: rgb(var(--on-surface));
  border: 1px solid rgb(var(--outline-variant)); border-top: 2px solid rgb(var(--secondary-container));
  border-radius: 3px; font-family: var(--font-mono); font-weight: 500; font-size: .85rem;
  box-shadow: 0 -8px 26px -16px rgb(var(--secondary-container) / .95), 0 18px 40px -22px #000;
  animation: neon-rise .45s cubic-bezier(.2, 1.2, .35, 1);
}
[data-theme="neon"] .rekorpop b { color: rgb(var(--secondary-container)); font-weight: 700; }
@keyframes neon-rise { from { transform: translate(-50%, -22px); opacity: 0; } }
[data-theme="neon"] .cf { width: 2px; height: 20px; border-radius: 2px; filter: drop-shadow(0 0 5px rgb(var(--on-surface) / .4)); }
[data-theme="neon"] [data-grow] { box-shadow: inset 0 0 0 1px rgb(var(--on-surface) / .12); }
/* status "mepet": pelat container sengaja gelap, jadi bar-nya dipaksa amber
   solid + arsir diagonal. Arsir = isyarat NON-WARNA, jadi ok/mepet/lewat
   tetap kebaca sama mata yang susah bedain lime dari amber. */
[data-theme="neon"] [data-grow].bg-secondary-container {
  background-color: rgb(var(--secondary-container));
  background-image: repeating-linear-gradient(-45deg, rgb(10 8 0 / .42) 0 4px, transparent 4px 8px);
}
[data-theme="neon"] svg polyline { filter: drop-shadow(0 0 5px rgb(var(--primary) / .55)); }
[data-theme="neon"] svg polygon { fill-opacity: .12; }
/* dua bar melayang: satu-satunya kaca buram di app */
[data-theme="neon"] header, [data-theme="neon"] nav.fixed {
  background-color: rgb(6 11 13 / .92); border-color: rgb(var(--outline-variant));
}
@supports (backdrop-filter: blur(10px)) {
  [data-theme="neon"] header, [data-theme="neon"] nav.fixed { backdrop-filter: blur(14px) saturate(115%); }
}
/* status "terpilih" dibawa garis rambut + isi ikon, BUKAN pelat menyala --
   biar nggak ada chip yang lebih terang dari FAB. */
[data-theme="neon"] nav.fixed a.bg-primary-container { box-shadow: inset 0 0 0 1px rgb(var(--primary)); }
[data-theme="neon"] input.peer:checked ~ span { border-color: currentColor; }
/* nggak ada font tema ini yang punya italic asli -> browser bikin oblique
   sintetis, dan di huruf mono hasilnya kayak render error. */
[data-theme="neon"] .italic { font-style: normal; }
[data-theme="neon"] p.italic.font-headline-md {
  border-left: 2px solid rgb(var(--primary)); padding-left: 14px; color: rgb(var(--on-surface));
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="neon"] .fab-catat {
    animation: none;
    box-shadow: 0 0 0 1px rgb(var(--primary) / .7), 0 0 26px -5px rgb(var(--primary) / .65);
  }
  [data-theme="neon"] .rekorpop { animation: none; }
  [data-theme="neon"] .typewriter-key { transition: none; }
}

/* ─────────────────────────── DIARY ───────────────────────────
   Buku harian di bawah SATU lampu meja, jam 22:40. Yang membedakan dari
   Heritage BUKAN hue-nya (dua-duanya kertas hangat) tapi MODEL CAHAYA:
   Heritage nggak punya sumber cahaya sama sekali -- satu krem rata, dan
   .paper warnanya PERSIS sama dengan background. Di sini terang di ATAS
   dan meredup ke BAWAH: halaman = kertas ternaungi, kartu = lembar yang
   kena lampu (lebih TERANG dari halaman), bottom nav = paling jauh dari
   lampu. Efek sampingnya bagus: semua data duduk di permukaan paling
   terang di seluruh app.
   Tulisan tangan DIKUNCI ke "suara manusia" doang -- nggak pernah masuk
   lewat token, jadi nol digit yang dirender pakai handwriting. */
[data-theme="diary"] {
  --dy-edge: #e0cfb5;
  --dy-lamp: 255, 226, 170;
  --dy-hand: "Mali", "Segoe Script", cursive;
}
/* kolam cahaya + garis margin merah + garis buku tulis.
   attachment SCROLL, bukan fixed: kalau fixed, garisnya diam sementara kartu
   lewat di atasnya -- itu overlay layar, bukan kertas, dan bikin jank di iOS.
   Garis margin ditaruh di HALAMAN (x=12px, di dalam padding 20px) bukan di
   tiap kartu, jadi nggak pernah kepotong dan nggak nyesekin teks. */
[data-theme="diary"] body {
  background-color: rgb(var(--background));
  background-image:
    radial-gradient(120% 72% at 50% 0%, rgba(var(--dy-lamp), .55) 0%,
      rgba(var(--dy-lamp), .22) 40%, rgba(var(--dy-lamp), 0) 72%),
    linear-gradient(to right, transparent 0 12px, rgba(180, 70, 95, .38) 12px 13px, transparent 13px),
    repeating-linear-gradient(to bottom, transparent 0 27px, rgba(45, 40, 70, .075) 27px 28px);
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: 100% 100dvh, 100% 100%, 100% 28px;
  background-attachment: scroll;
}
/* header duduk tepat di bawah bohlam. Nilai ini hasil blend lampu di atas
   halaman -- kalau alpha lampu diubah, angka ini WAJIB ikut diubah. */
[data-theme="diary"] header { background-color: #fae4bd; }
[data-theme="diary"] nav.fixed { box-shadow: 0 -12px 22px -20px rgba(74, 48, 20, .8); }

/* SUARA MANUSIA = satu-satunya tempat tulisan tangan hidup. Bukan judul
   seksi, bukan label UI, bukan satu digit pun. */
[data-theme="diary"] .font-headline-md.text-body-lg {
  font-family: var(--dy-hand); font-size: 21px; line-height: 30px; font-weight: 600;
  font-style: normal;   /* markup-nya ber-class italic; handwriting + oblique
                           sintetis = miring dua kali, bikin mata capek */
  letter-spacing: 0;
}
[data-theme="diary"] .font-headline-md.text-headline-md { font-weight: 700; letter-spacing: -.005em; }
[data-theme="diary"] .text-headline-lg-mobile { font-weight: 700; letter-spacing: -.015em; }
[data-theme="diary"] .text-data-mono { font-weight: 500; letter-spacing: .015em; }
[data-theme="diary"] .text-label-sm { font-weight: 700; letter-spacing: .09em; }
/* Karla angkanya proporsional; count-up 700ms di home bikin lebar digit
   berubah tiap frame kalau nggak dikunci tabular. */
[data-theme="diary"] .text-headline-lg-mobile, [data-theme="diary"] .text-data-mono,
[data-theme="diary"] [data-countup], [data-theme="diary"] #amtview,
[data-theme="diary"] #amtdesktop, [data-theme="diary"] #preview { font-variant-numeric: tabular-nums; }

/* kartu = LEMBAR yang kena lampu: lebih terang dari halaman. Bayangannya
   tiga lapis (lembar kedua nyempil + tepi + bayangan lembut), bukan bayangan
   keras 4px offset ala Heritage. */
/* pemisah baris = ALUR BEKAS PULPEN: 1px tinta + 1px sorotan terang tepat di
   bawahnya. Versi awalnya dashed, tapi di layar 20 baris itu cuma bikin ramai. */
[data-theme="diary"] .divide-y > :not([hidden]) ~ :not([hidden]) {
  border-top-style: solid; box-shadow: inset 0 1px 0 rgb(var(--surface-container-lowest) / .95);
}
/* kotak yang digambar pulpen: sudut asimetris dua sumbu */
[data-theme="diary"] .vintage-border {
  border-width: 1.5px; border-radius: 13px 7px 14px 6px / 7px 14px 6px 13px;
}
[data-theme="diary"] .vintage-shadow {
  box-shadow: 2px 3px 0 -1px rgb(var(--on-surface) / .3), 0 10px 18px -10px rgba(74, 48, 20, .55);
}
/* SELOTIP WASHI SENGAJA DIBUANG -- washi + sticky note + kertas kotak
   sekaligus itu isi empat halaman pertama Pinterest "bullet journal".
   Labelnya bukan benda yang ditempel, tapi tulisan yang DIGORES di lembar
   itu sendiri, lengkap dengan garis bawah pulpen yang tintanya putus. */
[data-theme="diary"] .folder-tab {
  top: 4px; left: 17px; padding: 0 2px 3px; border: 0;
  font-family: var(--dy-hand); font-size: 18px; font-weight: 700; line-height: 20px;
  letter-spacing: 0; text-transform: none;
  transform: rotate(-1.2deg); transform-origin: left bottom;
  background-image: repeating-linear-gradient(90deg, #22357a 0 17px, transparent 17px 19px,
    #22357a 19px 44px, transparent 44px 45px, #22357a 45px 58px, transparent 58px 61px);
  background-size: 100% 1.5px; background-position: 0 100%; background-repeat: repeat-x;
  box-shadow: none;
}
[data-theme="diary"] .fab-catat {
  box-shadow: 0 0 0 3px rgb(var(--on-surface) / .07), 0 10px 20px -8px rgb(var(--primary) / .6),
              inset 0 2px 0 rgba(var(--dy-lamp), .45);
  transition: box-shadow .15s ease, transform .15s ease;
}
[data-theme="diary"] .fab-catat:active {
  box-shadow: 0 0 0 3px rgb(var(--on-surface) / .07), 0 3px 8px -6px rgb(var(--primary) / .65),
              inset 0 2px 0 rgba(var(--dy-lamp), .45);
}
/* numpad: tombol kertas tebal, bukan tuts mesin tik */
[data-theme="diary"] .typewriter-key {
  border-color: var(--dy-edge); border-radius: 16px 12px 17px 11px / 12px 17px 11px 16px;
  box-shadow: 0 3px 0 0 rgb(var(--on-surface) / .12), 0 7px 12px -8px rgba(74, 48, 20, .45);
  transition: transform .12s ease, box-shadow .12s ease;
}
[data-theme="diary"] .typewriter-key:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 0 transparent, 0 2px 5px -4px rgba(74, 48, 20, .45);
}
/* SABUK PENGAMAN: digit numpad dikunci ke mono di (0,4,0). Markup-nya pakai
   class judul, jadi apa pun yang terjadi ke token judul, digit nggak ikut. */
[data-theme="diary"] .typewriter-key.font-headline-md.text-headline-md,
[data-theme="diary"] .typewriter-key.font-headline-md.text-body-lg {
  font-family: var(--font-mono); font-size: 23px; line-height: 1; font-weight: 500;
  letter-spacing: .01em; font-variant-numeric: tabular-nums;
}
/* KERTAS KOTAK DIBUANG: grid di belakang angka bikin batang digit tabrakan
   sama garis vertikal. Solusinya bukan nge-mask grid, tapi menghapus seluruh
   kotaknya -- lalu ANGKANYA yang dapat garis tulis sendiri. Karena #amtview
   anak flex items-end, lebar garisnya persis selebar nominalnya dan memanjang
   tiap digit ditambah. Itu yang beneran terjadi kalau nulis di atas garis. */
[data-theme="diary"] .recessed-display {
  background-color: transparent; border: 0; border-radius: 0; box-shadow: none;
}
[data-theme="diary"] #amtview {
  border-bottom: 1.5px solid rgb(var(--primary)); padding-bottom: 2px; letter-spacing: -.01em;
}
[data-theme="diary"] .flash {
  background: rgb(var(--surface-container-lowest)); color: #22357a; border: 0;
  border-radius: 4px 11px 4px 11px; font-family: var(--dy-hand);
  font-size: 19px; font-weight: 700; line-height: 1.25; padding: 9px 20px 10px;
  transform: translateX(-50%) rotate(-1.2deg);
  box-shadow: 0 12px 22px -12px rgba(74, 48, 20, .6), 0 1px 0 rgb(var(--on-surface) / .1);
}
[data-theme="diary"] .flash.bye { transform: translate(-50%, -20px) rotate(-1.2deg); }
/* rekor: kalimat yang kamu kotakin DUA KALI karena kegirangan -- garis kedua
   meleset 3px kayak tangan yang nggak sabar. */
[data-theme="diary"] .rekorpop {
  background: rgb(var(--surface-container-lowest)); color: rgb(var(--on-surface));
  border: 1.5px solid rgb(var(--on-surface));
  border-radius: 15px 8px 16px 7px / 8px 16px 7px 15px;
  font-family: var(--dy-hand); font-size: 21px; font-weight: 700; line-height: 1.3;
  padding: 14px 22px 12px; transform: translateX(-50%) rotate(-1.6deg);
  box-shadow: 3px 4px 0 -1px rgb(var(--on-surface) / .32), 0 18px 30px -16px rgba(74, 48, 20, .55);
  animation: dy-pop .5s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes dy-pop { from { transform: translate(-50%, -26px) rotate(-1.6deg) scale(.88); opacity: 0; } }
[data-theme="diary"] .cf { width: 6px; height: 10px; border-radius: 1px 3px 1px 3px; }
[data-theme="diary"] ::selection { background: #ffd98a; color: #3d2a00; }
@media (prefers-reduced-motion: reduce) {
  [data-theme="diary"] .rekorpop { animation: none; transform: translateX(-50%) rotate(-1.6deg); }
  [data-theme="diary"] .typewriter-key, [data-theme="diary"] .fab-catat { transition: none; }
  [data-theme="diary"] .typewriter-key:active { transform: none; }
  [data-theme="diary"] .flash.bye { transform: translateX(-50%) rotate(-1.2deg); }
}

/* ─────────────────────────── GIRLY ───────────────────────────
   Buku tulis & stabilo. Prinsip inti: PINK ITU KERTASNYA, BUKAN TINTANYA.
   Semua permukaan blush rose, tapi NOL angka ditulis pakai pink -- tinta
   dibagi tiga: plum gelap (teks), jade (naik/untung), vermilion (turun/rugi).
   Jade dipilih, bukan pink tua, demi keselamatan baca: kalau primary ikut
   keluarga pink, naik/turun/dekorasi berdempetan di rentang merah-magenta
   dan user bisa salah baca untung jadi rugi. */
[data-theme="girly"] {
  --g-line: rgb(var(--outline-variant));
  --g-shelf: #f2b7ce;          /* bayangan padat "lembar kedua" */
  --g-hl-rose: #ffd6e6;        /* sapuan stabilo pink */
  --g-hl-jade: #bfe8da;
  --g-jade-deep: #0a4b3e;
  --g-jade-soft: #cdebe0;
  --g-loss-wash: #ffe0db;
}
/* set ikon jadi Rounded (font-nya di-load lewat <link> tema). Nama class-nya
   tetap .material-symbols-outlined, jadi yang ditukar cuma keluarganya. */
[data-theme="girly"] .material-symbols-outlined {
  font-family: "Material Symbols Rounded", "Material Symbols Outlined";
}
/* MATIKAN SUARA KAPITAL -- ini perubahan yang paling mengubah wajah app.
   Heritage nulis hampir setiap label sebagai HURUF BESAR + SPASI LEBAR; itu
   bahasa arsip, katalog, dan RAPOR. Tema ini harus terasa nyambut, bukan
   menilai. Spesifisitas (0,2,0) menang atas utility, jadi NOL edit template.
   Bonus: teks 12px kapital ber-tracking lebar itu bentuk teks kecil yang
   paling lambat dipindai, jadi ini sekalian naikin keterbacaan. */
[data-theme="girly"] .uppercase, [data-theme="girly"] .font-label-sm,
[data-theme="girly"] .text-label-sm { text-transform: none; letter-spacing: .005em; }
[data-theme="girly"] .uppercase { font-weight: 600; }
[data-theme="girly"] .font-data-mono, [data-theme="girly"] .font-headline-lg,
[data-theme="girly"] [data-countup], [data-theme="girly"] #amtview,
[data-theme="girly"] #amtdesktop {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1; letter-spacing: .005em;
}
/* kelembutan dari radius BERTINGKAT, bukan dari pil semua: kontrol 8px,
   kartu 12px, numpad 16px. Cuma avatar & FAB yang bulat penuh -- kalau semua
   jadi pil, hierarki "mana aksi utama" ilang. */
[data-theme="girly"] button:not([class*="rounded"]),
[data-theme="girly"] summary:not([class*="rounded"]),
[data-theme="girly"] input:not([type="radio"]):not([type="checkbox"]),
[data-theme="girly"] select, [data-theme="girly"] textarea,
[data-theme="girly"] label > .peer + span { border-radius: 8px; }
[data-theme="girly"] input, [data-theme="girly"] select,
[data-theme="girly"] textarea { border-color: var(--g-line); }
/* plugin forms mewarisi abu-abu #6b7280 yang BUKAN token tema & gagal 4.5:1 */
[data-theme="girly"] input::placeholder,
[data-theme="girly"] textarea::placeholder { color: rgb(var(--outline)); opacity: 1; }
/* target sentuh >=48px (chip "Sumber Dana" aslinya ~40px) */
[data-theme="girly"] label > .peer + span {
  min-height: 48px; display: flex; align-items: center; justify-content: center;
}
/* satu cincin fokus, bukan dua: focus:ring-1 plugin forms itu box-shadow */
[data-theme="girly"] :focus-visible {
  outline: 3px solid rgb(var(--primary)); outline-offset: 2px; box-shadow: none;
}
/* garis margin rose di gutter kiri kartu (warna/bayangan/radius dari token) */
[data-theme="girly"] .paper {
  background-image: linear-gradient(90deg,
    transparent 0 13px, #e06a94 13px 14.5px, transparent 14.5px);
}
/* pita header di DALAM kartu itu div opaque full-width yang bakal MOTONG
   garis margin -> dibikin transparan. Di buku tulis, judul nggak punya
   banner, dia punya garis bawah. Selector `>` sengaja, biar badge streak &
   file-input di settings nggak ikut kena. */
[data-theme="girly"] .paper > .bg-surface-container { background-color: transparent; }
[data-theme="girly"] .vintage-border { border-width: 1.5px; border-color: rgb(var(--tertiary)); border-radius: 8px; }
[data-theme="girly"] .vintage-shadow {
  box-shadow: 0 3px 0 0 var(--g-shelf), 0 10px 20px -14px rgba(122, 40, 78, .45);
}
[data-theme="girly"] .vintage-shadow:active { box-shadow: 0 1px 0 0 var(--g-shelf); }
/* tab map -> SAPUAN STABILO. Gradient-nya berhenti sebelum tinggi penuh =
   jejak spidol, bukan kotak isi. Dipindah MASUK ke dalam kartu (semua
   pemakainya udah punya pt-7/pt-8), bukan menggantung di tepi atas. */
[data-theme="girly"] .folder-tab {
  top: 7px; left: 22px; padding: 1px 7px 2px;
  /* gradient berhenti sebelum tinggi penuh = jejak spidol, bukan kotak isi */
  background: linear-gradient(180deg, transparent 0 34%, var(--tab-bg) 34% 94%, transparent 94%);
  border: 0; border-radius: 0;
  font-size: 12px; font-weight: 600; letter-spacing: .005em; text-transform: none;
  transform: rotate(-1deg); box-shadow: none;
}
/* FAB = segel jade di kertas pink. Sengaja BUKAN pink: sakura ketemu matcha. */
[data-theme="girly"] .fab-catat {
  box-shadow: 0 0 0 4px var(--g-hl-rose), 0 6px 0 0 var(--g-jade-deep),
              0 14px 20px -12px rgba(10, 75, 62, .55);
}
[data-theme="girly"] .fab-catat:active {
  box-shadow: 0 0 0 4px var(--g-hl-rose), 0 2px 0 0 var(--g-jade-deep),
              0 8px 14px -12px rgba(10, 75, 62, .55);
}
/* numpad: squircle 16px. Muka tombol vs latar .pad cuma 1.27:1, jadi
   BORDER-lah yang menanggung WCAG 1.4.11 -> wajib pakai token, bukan pastel. */
[data-theme="girly"] .typewriter-key {
  font-family: var(--font-mono); font-weight: 700;
  background: #fffdfe; border: 1.5px solid var(--g-line); border-radius: 16px;
  box-shadow: 0 3px 0 0 var(--g-shelf); transition: transform .08s ease, box-shadow .08s ease;
}
[data-theme="girly"] .typewriter-key.bg-surface-dim { background: #eed2df; }
[data-theme="girly"] .typewriter-key:active { transform: translateY(3px); box-shadow: 0 0 0 0 transparent; }
[data-theme="girly"] .pad { border-radius: 12px; border-color: var(--g-line); }
[data-theme="girly"] .recessed-display {
  background: #fffdfe; border: 1.5px dashed var(--g-line); border-radius: 12px;
  box-shadow: inset 0 0 0 4px rgba(255, 234, 241, .85);
}
[data-theme="girly"] .flash {
  background: rgb(var(--surface-container-lowest)); color: var(--g-jade-deep);
  border: 1.5px solid rgb(var(--primary)); border-radius: 999px; padding: 12px 22px;
  box-shadow: 0 3px 0 0 var(--g-jade-soft), 0 12px 22px -16px rgba(10, 75, 62, .55);
}
/* rekor distabilo hijau. Momen manis dibatasi ke SATU tempat -- kalau
   ditabur di mana-mana, angkanya yang kalah. */
[data-theme="girly"] .rekorpop {
  background: rgb(var(--surface-container-lowest)); color: var(--g-jade-deep);
  border: 2px solid rgb(var(--primary)); border-radius: 12px; padding: 14px 24px;
  box-shadow: 0 4px 0 0 var(--g-jade-soft), 0 16px 28px -18px rgba(10, 75, 62, .55);
  animation: girlypop .55s cubic-bezier(.2, 1.5, .4, 1);
}
[data-theme="girly"] .rekorpop b {
  color: var(--g-jade-deep);
  background: linear-gradient(180deg, transparent 0 40%, var(--g-hl-jade) 40% 94%, transparent 94%);
}
@keyframes girlypop { from { transform: translate(-50%, -26px) scale(.86); opacity: 0; } }
[data-theme="girly"] .cf { width: 4px; height: 16px; border-radius: 2px; }
[data-theme="girly"] [data-grow] { border-radius: 999px; box-shadow: inset 0 1px 0 0 rgb(255 255 255 / .5); }
[data-theme="girly"] .overflow-hidden:has(> [data-grow]) { border-radius: 999px; border-color: var(--g-line); }
/* bar "mepet" dulu apricot di atas track pink = 1.04:1, praktis nggak
   kelihatan -- bar 100% dan bar 10% kelihatan sama. Sekarang strip diagonal
   amber: lolos 3:1 DAN jadi isyarat non-warna. */
[data-theme="girly"] [data-grow].bg-secondary-container {
  background-color: #8c4e00;
  background-image: repeating-linear-gradient(45deg, #8c4e00 0 5px, #b56200 5px 10px);
}
/* RUGI DISTABILO, BUKAN DITERIAKI.
   Hati-hati: di codebase ini .text-error berarti PENGELUARAN, bukan rugi --
   home.html ngasih text-error ke SETIAP baris pengeluaran. Kalau stabilo
   dipasang ke semua .text-error, layar utama jadi 8-12 kapsul coral beruntun
   = nol salience. Jadi sapuannya cuma kena angka RINGKASAN (.font-data-mono),
   dan dimatikan lagi di dalam <li> (baris ledger & breakdown).
   Pakai box-shadow spread, BUKAN padding: nol dampak layout, jadi digit rugi
   & untung tetap sejajar dan tabular-nums nggak rusak. */
[data-theme="girly"] .font-data-mono.text-error {
  color: rgb(var(--error)); background: var(--g-loss-wash);
  box-shadow: 0 0 0 4px var(--g-loss-wash); border-radius: 3px;
}
[data-theme="girly"] li .font-data-mono.text-error { background: none; box-shadow: none; }
[data-theme="girly"] span.bg-error { border-radius: 999px; }
[data-theme="girly"] nav.fixed {
  border-top-color: var(--g-line); box-shadow: 0 -8px 20px -16px rgba(122, 40, 78, .5);
}
[data-theme="girly"] header { border-bottom-color: var(--g-line); }
@media (prefers-reduced-motion: reduce) {
  [data-theme="girly"] .rekorpop { animation: none; }
  [data-theme="girly"] .cf { display: none; }
  [data-theme="girly"] .typewriter-key, [data-theme="girly"] [data-grow] { transition: none; }
  [data-theme="girly"] .typewriter-key:active { transform: none; }
  [data-theme="girly"] .shake { animation: none; outline: 2px solid rgb(var(--error)); outline-offset: 3px; }
}

/* ─────────────────────────── KORAN ───────────────────────────
   Monokrom cetak: koran / buku besar cetakan. Semuanya hitam-putih-abu
   KECUALI satu hue yang justru jadi konsepnya: rugi = TINTA MERAH
   (istilah "in the red" memang lahir dari pembukuan; untung = tinta hitam,
   "in the black"). Cetak itu DATAR: nol bayangan, kedalaman dibawa garis --
   double rule (garis ganda tebal-tipis khas koran), bukan drop shadow. */
[data-theme="koran"] { --edge-w: 1.5px; }
[data-theme="koran"] .paper { border-top: 3px double rgb(var(--on-surface)); }
[data-theme="koran"] .vintage-border { border-width: 1.5px; }
[data-theme="koran"] .vintage-shadow { box-shadow: 2px 2px 0 0 rgb(var(--on-surface)); }
/* label rubrik ("EKONOMI"): pelat tinta hitam, tracking lebar */
[data-theme="koran"] .folder-tab {
  top: -11px; padding: 2px 10px; border: 0;
  font-size: 10px; letter-spacing: .16em; box-shadow: none;
}
[data-theme="koran"] .fab-catat {
  border-color: rgb(var(--background));
  box-shadow: 3px 3px 0 0 rgb(var(--on-surface));
}
[data-theme="koran"] .fab-catat:active { box-shadow: 1px 1px 0 0 rgb(var(--on-surface)); }
/* tuts = huruf timah letterpress: putih, rangka tebal, turun pas ditekan */
[data-theme="koran"] .typewriter-key {
  background: rgb(var(--surface-container-lowest));
  border: 1.5px solid rgb(var(--on-surface)); color: rgb(var(--on-surface));
  box-shadow: 0 3px 0 0 rgb(var(--on-surface));
  transition: transform .08s ease, box-shadow .08s ease;
}
[data-theme="koran"] .typewriter-key:active {
  transform: translateY(3px); box-shadow: 0 0 0 0 rgb(var(--on-surface));
}
[data-theme="koran"] .recessed-display {
  background: rgb(var(--surface-container-lowest));
  border: 1.5px solid rgb(var(--on-surface)); box-shadow: none;
}
/* nominal duduk di atas garis "jumlah akhir" ganda ala kolom total */
[data-theme="koran"] #amtview { border-bottom: 3px double rgb(var(--on-surface)); padding-bottom: 2px; }
[data-theme="koran"] .flash { border-width: 1.5px; letter-spacing: .04em; }
[data-theme="koran"] .rekorpop { border: 3px double rgb(var(--on-surface)); letter-spacing: .02em; }
[data-theme="koran"] .cf { width: 7px; height: 11px; }
/* "mepet" = arsir putih di atas abu -- pola, bukan warna, karena warnanya cuma satu */
[data-theme="koran"] [data-grow].bg-secondary-container {
  background-image: repeating-linear-gradient(-45deg, rgb(255 255 255 / .45) 0 3px, transparent 3px 6px);
}
[data-theme="koran"] header { border-bottom: 2px solid rgb(var(--on-surface)); }
[data-theme="koran"] nav.fixed { border-top: 2px solid rgb(var(--on-surface)); }
[data-theme="koran"] ::selection { background: rgb(var(--on-surface)); color: rgb(var(--surface-container-lowest)); }
[data-theme="koran"] svg polygon { fill-opacity: .07; }
/* pemisah baris ledger: titik-titik kolom angka cetakan lama */
[data-theme="koran"] .divide-y > :not([hidden]) ~ :not([hidden]) { border-top-style: dotted; }

/* ─────────────────────────── SULTAN ───────────────────────────
   Dark ke-2 tapi KEBALIKAN Neon: di sana cahaya berhembus (halo, breathing FAB),
   di sini mewah = MENAHAN DIRI. Nol glow, nol animasi napas -- emas dipakai
   sebagai FOIL: garis rambut 1px di tepi benda, bukan cahaya yang menyebar.
   Yang boleh emas solid cuma benda yang memang dipegang: FAB & angka. */
[data-theme="sultan"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 40% at 50% -8%, rgb(227 184 78 / .06), transparent 60%);
}
[data-theme="sultan"] ::selection { background: rgb(227 184 78 / .35); }
[data-theme="sultan"] input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not(.bg-transparent),
[data-theme="sultan"] select, [data-theme="sultan"] textarea {
  background-color: rgb(var(--surface-container-lowest));
  border-color: rgb(var(--outline-variant));
}
[data-theme="sultan"] input::placeholder,
[data-theme="sultan"] textarea::placeholder { color: rgb(var(--outline)); }
[data-theme="sultan"] select option { background: rgb(var(--surface-container)); color: rgb(var(--on-surface)); }
[data-theme="sultan"] input:-webkit-autofill {
  -webkit-text-fill-color: rgb(var(--on-surface));
  box-shadow: inset 0 0 0 1000px rgb(var(--surface-container-low));
}
[data-theme="sultan"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.6); }
/* foil kiss: garis emas 1px di bibir atas tiap kartu (shadow-card inset dari token
   udah bawa ini; gradient nambah kilau halus di 18px pertama) */
[data-theme="sultan"] .paper {
  background-image: linear-gradient(to bottom, rgb(227 184 78 / .05), transparent 18px);
}
/* label kartu: medali kecil -- pil gelap ber-rim emas, huruf serif renggang */
[data-theme="sultan"] .folder-tab {
  top: -11px; padding: 3px 12px;
  border: 1px solid rgb(227 184 78 / .45); border-radius: 999px;
  font-family: var(--font-headline); font-size: 10px; font-weight: 600;
  letter-spacing: .18em; box-shadow: none;
}
[data-theme="sultan"] .vintage-border { border-color: rgb(227 184 78 / .55); }
[data-theme="sultan"] .vintage-shadow {
  box-shadow: 0 3px 0 rgb(0 0 0 / .7), 0 14px 26px -18px rgb(0 0 0 / .95);
}
[data-theme="sultan"] .fab-catat {
  border-color: rgb(var(--background));
  box-shadow: 0 10px 26px -10px rgb(227 184 78 / .5), 0 4px 10px -6px rgb(0 0 0 / .8);
}
[data-theme="sultan"] .fab-catat:active { box-shadow: 0 4px 12px -8px rgb(227 184 78 / .6); }
[data-theme="sultan"] .typewriter-key {
  background: linear-gradient(180deg, rgb(var(--surface-container-high)), rgb(var(--surface-container-low)));
  border: 1px solid rgb(var(--outline-variant)); color: rgb(var(--on-surface));
  box-shadow: 0 3px 0 rgb(0 0 0 / .7), inset 0 1px 0 rgb(236 229 216 / .06);
  transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease;
}
[data-theme="sultan"] .typewriter-key:active {
  transform: translateY(2px); border-color: rgb(227 184 78 / .7);
  box-shadow: inset 0 2px 6px rgb(0 0 0 / .7);
}
[data-theme="sultan"] .recessed-display {
  background: rgb(var(--surface-container-lowest));
  border: 1px solid rgb(var(--outline-variant));
  box-shadow: inset 0 3px 12px rgb(0 0 0 / .7), inset 0 -1px 0 rgb(227 184 78 / .5);
}
/* Fraunces belum tentu tabular -- kunci angka penting biar count-up nggak goyang */
[data-theme="sultan"] [data-countup], [data-theme="sultan"] #amtview { font-variant-numeric: tabular-nums; }
[data-theme="sultan"] .flash { border: 1px solid rgb(227 184 78 / .5); border-radius: 10px; }
/* rekor = plakat: rim emas dobel lewat ring shadow, TANPA glow */
[data-theme="sultan"] .rekorpop {
  background: rgb(var(--surface-container)); color: rgb(var(--primary));
  border: 1px solid rgb(227 184 78 / .8); border-radius: 10px;
  box-shadow: 0 0 0 4px rgb(21 19 14), 0 0 0 5px rgb(227 184 78 / .35),
              0 18px 40px -20px rgb(0 0 0 / .9);
}
[data-theme="sultan"] .cf { width: 5px; height: 12px; border-radius: 2px; }
[data-theme="sultan"] [data-grow] { box-shadow: inset 0 0 0 1px rgb(236 229 216 / .08); }
/* "mepet": tembaga bergaris -- beda hue DAN beda pola dari emas */
[data-theme="sultan"] [data-grow].bg-secondary-container {
  background-color: rgb(var(--secondary));
  background-image: repeating-linear-gradient(-45deg, rgb(0 0 0 / .3) 0 4px, transparent 4px 8px);
}
[data-theme="sultan"] header, [data-theme="sultan"] nav.fixed {
  background-color: rgb(13 11 8 / .9); border-color: rgb(var(--outline-variant));
}
@supports (backdrop-filter: blur(10px)) {
  [data-theme="sultan"] header, [data-theme="sultan"] nav.fixed { backdrop-filter: blur(14px) saturate(110%); }
}
[data-theme="sultan"] nav.fixed a.bg-primary-container { box-shadow: inset 0 0 0 1px rgb(227 184 78 / .5); }
[data-theme="sultan"] input.peer:checked ~ span { border-color: rgb(var(--primary)); }

/* ─────────────────────────── MATCHA ───────────────────────────
   Sage muji-style: kalem, netral-gender, bentuk kerikil. Pembeda dari Girly
   (yang juga lembut): nol dekorasi -- nggak ada garis margin, nggak ada sapuan
   stabilo. Kelembutan datang dari bentuk membulat asimetris-halus, bayangan
   sehalus bulu, dan ikon tipis 300. Tenang ITU signature-nya. */
[data-theme="matcha"] .folder-tab {
  top: -12px; padding: 3px 12px; border: 0; border-radius: 999px;
  font-size: 10px; letter-spacing: .1em;
  box-shadow: 0 2px 6px -2px rgb(27 32 26 / .25);
}
[data-theme="matcha"] .vintage-border { border-color: rgb(var(--primary)); border-radius: 12px; }
[data-theme="matcha"] .vintage-shadow { box-shadow: 0 6px 16px -10px rgb(27 32 26 / .45); }
[data-theme="matcha"] .vintage-shadow:active { box-shadow: 0 2px 8px -6px rgb(27 32 26 / .45); }
[data-theme="matcha"] .fab-catat {
  border-color: rgb(var(--background));
  box-shadow: 0 8px 20px -10px rgb(47 94 53 / .6);
}
[data-theme="matcha"] .fab-catat:active { box-shadow: 0 3px 10px -8px rgb(47 94 53 / .6); }
/* tuts = batu pipih halus */
[data-theme="matcha"] .typewriter-key {
  background: rgb(var(--surface-container-lowest));
  border-color: rgb(var(--outline-variant)); border-radius: 22px;
  box-shadow: 0 2px 6px -2px rgb(27 32 26 / .15);
  transition: transform .1s ease, box-shadow .1s ease;
}
[data-theme="matcha"] .typewriter-key:active {
  transform: translateY(2px) scale(.98);
  box-shadow: 0 1px 2px -1px rgb(27 32 26 / .2);
}
[data-theme="matcha"] .recessed-display {
  background: rgb(var(--surface-container-low));
  border: 1px solid #cdd6c2; border-radius: 14px;
  box-shadow: inset 0 1px 4px rgb(27 32 26 / .06);
}
[data-theme="matcha"] .flash {
  background: rgb(var(--surface-container-lowest)); color: rgb(var(--primary));
  border: 1px solid #cdd6c2; border-radius: 999px;
  box-shadow: 0 10px 24px -16px rgb(27 32 26 / .5);
}
[data-theme="matcha"] .rekorpop {
  background: rgb(var(--surface-container-lowest)); color: rgb(var(--primary));
  border: 1.5px solid rgb(var(--primary)); border-radius: 18px;
  box-shadow: 0 14px 30px -18px rgb(27 32 26 / .5);
}
/* konfeti = kelopak */
[data-theme="matcha"] .cf { width: 7px; height: 12px; border-radius: 3px 6px 3px 6px; }
[data-theme="matcha"] [data-grow] { border-radius: 999px; }
[data-theme="matcha"] .overflow-hidden:has(> [data-grow]) { border-radius: 999px; }
[data-theme="matcha"] [data-grow].bg-secondary-container {
  background-color: rgb(var(--secondary));
  background-image: repeating-linear-gradient(45deg, rgb(255 255 255 / .22) 0 4px, transparent 4px 8px);
}
/* Zen Maru nggak jamin tabular -- angka hero & nominal pindah ke mono
   (M PLUS 1 Code, sama-sama membulat) biar count-up nggak bergoyang */
[data-theme="matcha"] [data-countup], [data-theme="matcha"] #amtview { font-family: var(--font-mono); }
[data-theme="matcha"] .italic { font-style: normal; }  /* Zen nggak punya italic asli */
[data-theme="matcha"] header { border-bottom-color: #cdd6c2; }
[data-theme="matcha"] nav.fixed { border-top-color: #cdd6c2; }
[data-theme="matcha"] ::selection { background: rgb(var(--primary-fixed)); color: rgb(var(--on-primary-container)); }

/* ─────────────────────────── PIKSEL ───────────────────────────
   Retro game TERANG (beda dari Neon yang gelap): shell konsol abu-biru,
   tombol biru arcade, koin emas. Nyambung langsung ke mekanik dopamin app:
   bar budget = HP bar tersegmentasi, rekor = LEVEL UP, konfeti = sprite 8x8.
   Rangka 2px + bayangan offset keras = bahasa sprite. Ikon set Sharp. */
[data-theme="piksel"] .material-symbols-outlined {
  font-family: "Material Symbols Sharp", "Material Symbols Outlined";
}
[data-theme="piksel"] .paper { border-width: 2px; }
[data-theme="piksel"] .vintage-border { border: 2px solid rgb(var(--on-surface)); border-radius: 4px; }
[data-theme="piksel"] .vintage-shadow { box-shadow: 3px 3px 0 0 rgb(var(--on-surface)); }
/* label = plat stage biru, huruf pixel */
[data-theme="piksel"] .folder-tab {
  top: -12px; padding: 1px 8px;
  border: 2px solid rgb(var(--on-surface)); border-radius: 0;
  font-family: var(--font-headline); font-size: 11px; letter-spacing: .08em;
  box-shadow: 2px 2px 0 0 rgb(var(--on-surface));
}
/* FAB = tombol konsol: squircle, "turun" beneran pas ditekan */
[data-theme="piksel"] .fab-catat {
  border-radius: 14px; border: 3px solid rgb(var(--background));
  box-shadow: 0 5px 0 0 rgb(var(--on-surface));
}
[data-theme="piksel"] .fab-catat:active {
  transform: translateY(3px); box-shadow: 0 2px 0 0 rgb(var(--on-surface));
}
[data-theme="piksel"] .typewriter-key {
  border-radius: 10px; border: 2px solid rgb(var(--on-surface));
  background: rgb(var(--surface-container-lowest)); color: rgb(var(--on-surface));
  font-family: var(--font-mono); font-weight: 700;
  box-shadow: 0 4px 0 0 rgb(var(--on-surface));
  transition: transform .06s ease, box-shadow .06s ease;
}
[data-theme="piksel"] .typewriter-key:active {
  transform: translateY(4px); box-shadow: 0 0 0 0 rgb(var(--on-surface));
}
[data-theme="piksel"] #back.typewriter-key { color: rgb(var(--error)); }
/* layar nominal = LCD game: satu-satunya permukaan gelap di tema terang ini */
[data-theme="piksel"] .recessed-display {
  background: #10131a; border: 2px solid rgb(var(--on-surface)); border-radius: 4px;
  box-shadow: inset 0 0 0 2px #2a3040, inset 0 4px 10px rgb(0 0 0 / .6);
}
[data-theme="piksel"] #amtview { color: #7ef2a0; text-shadow: 0 0 6px rgb(126 242 160 / .35); }
[data-theme="piksel"] #preview { color: #9fb0c8; }
[data-theme="piksel"] #goalimpact { color: #ffd54a; }
/* toast & rekor = kotak dialog RPG */
[data-theme="piksel"] .flash {
  border: 2px solid rgb(var(--on-surface)); border-radius: 6px;
  box-shadow: 3px 3px 0 0 rgb(var(--on-surface)); font-weight: 700;
}
[data-theme="piksel"] .rekorpop {
  background: rgb(var(--surface-container-lowest)); color: rgb(var(--on-surface));
  border: 2px solid rgb(var(--on-surface)); border-radius: 6px;
  font-family: var(--font-headline);
  box-shadow: 4px 4px 0 0 rgb(var(--secondary-container)), 6px 6px 0 0 rgb(var(--on-surface));
}
/* konfeti = sprite 8x8 */
[data-theme="piksel"] .cf { width: 8px; height: 8px; border-radius: 0; }
/* SEMUA bar progress = HP bar tersegmentasi (mask bolong tiap 8px) */
[data-theme="piksel"] [data-grow] {
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 10px);
  mask-image: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 10px);
}
/* "mepet": koin -- emas gelap-terang selang-seling di dalam segmen */
[data-theme="piksel"] [data-grow].bg-secondary-container {
  background-color: rgb(var(--secondary));
  background-image: repeating-linear-gradient(90deg, rgb(255 213 74 / .55) 0 4px, transparent 4px 8px);
}
/* sapaan maskot JANGAN pakai font pixel -- paragraf panjang Pixelify capek dibaca */
[data-theme="piksel"] p.italic.font-headline-md { font-family: var(--font-body); font-weight: 600; }
[data-theme="piksel"] .italic { font-style: normal; }
[data-theme="piksel"] header { border-bottom: 2px solid rgb(var(--on-surface)); }
[data-theme="piksel"] nav.fixed { border-top: 2px solid rgb(var(--on-surface)); }
[data-theme="piksel"] nav.fixed a.bg-primary-container {
  border-radius: 8px; box-shadow: inset 0 0 0 2px rgb(var(--primary));
}
[data-theme="piksel"] ::selection { background: rgb(var(--primary)); color: rgb(var(--on-primary)); }

@media (prefers-reduced-motion: reduce) {
  [data-theme="koran"] .typewriter-key, [data-theme="sultan"] .typewriter-key,
  [data-theme="matcha"] .typewriter-key, [data-theme="piksel"] .typewriter-key,
  [data-theme="piksel"] .fab-catat { transition: none; }
  [data-theme="koran"] .typewriter-key:active, [data-theme="matcha"] .typewriter-key:active,
  [data-theme="piksel"] .typewriter-key:active, [data-theme="piksel"] .fab-catat:active { transform: none; }
}
