/* ==========================================================================
   Dompet Keluarga — gaya "fintech bersih"
   Latar terang lembut, kartu besar membulat, angka tebal, satu warna aksen,
   navigasi pil mengambang. Mode gelap otomatis mengikuti perangkat.
   ========================================================================== */

:root {
  --bg: #f4f5f8;
  --card: #ffffff;
  --card-2: #f1f2f6;          /* isian, tile, tombol sekunder */
  --text: #0c111d;
  --muted: #667085;
  --line: #e8eaef;
  --primary: #0e7c86;
  --primary-soft: #e2f4f5;
  --on-primary: #ffffff;
  --masuk: #079455;
  --keluar: #d63c2f;
  --waspada: #e8590c;         /* peringatan; amber #f5a524 khusus aksen merek & perayaan */
  --transfer: #2e6bdc;
  --hero-1: #062a2e;
  --hero-2: #0b4f55;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .05);
  --shadow-up: 0 10px 30px rgba(16, 24, 40, .14);
  --radius: 22px;
  --radius-sm: 14px;
  --nav-h: 68px;
  /* Grafik: seri kategorikal (divalidasi untuk buta warna di atas --card) & status anggaran */
  --seri-1: #2a78d6;
  --seri-2: #eb6834;
  --status-warning: #fab219;
  --status-critical: #d03b3b;
  color-scheme: light;
}
/* Mode gelap: otomatis ikut perangkat, kecuali dipilih manual di ⚙️ (atribut data-theme di <html>).
   Isi dua blok di bawah harus sama. */
:root[data-theme="dark"] {
  --bg: #0b0c10;
  --card: #15171d;
  --card-2: #1d2028;
  --text: #f2f4f7;
  --muted: #98a2b3;
  --line: #252833;
  --primary: #4cc9d1;
  --primary-soft: #0f2e31;
  --on-primary: #04211f;
  --masuk: #3ccb8b;
  --keluar: #ff8a7a;
  --waspada: #ff9a5c;
  --transfer: #6ea2ff;
  --hero-1: #082b2e;
  --hero-2: #0e4c52;
  --shadow: none;
  --shadow-up: 0 10px 30px rgba(0, 0, 0, .5);
  --seri-1: #3987e5;
  --seri-2: #d95926;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0c10;
    --card: #15171d;
    --card-2: #1d2028;
    --text: #f2f4f7;
    --muted: #98a2b3;
    --line: #252833;
    --primary: #4cc9d1;
    --primary-soft: #0f2e31;
    --on-primary: #04211f;
    --masuk: #3ccb8b;
    --keluar: #ff8a7a;
    --waspada: #ff9a5c;
    --transfer: #6ea2ff;
    --hero-1: #082b2e;
    --hero-2: #0e4c52;
    --shadow: none;
    --shadow-up: 0 10px 30px rgba(0, 0, 0, .5);
    --seri-1: #3987e5;
    --seri-2: #d95926;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); overscroll-behavior-y: contain; }
body {
  font: 15px/1.45 "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  max-width: 520px;
  margin: 0 auto;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
h1, h2, h3 { margin: 0; letter-spacing: -.01em; }
.besar, .nominal, .nilai, .tile b, .ringkas b, .input-jumlah input { font-variant-numeric: tabular-nums; }
svg.ik { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Ruang bawah untuk navigasi mengambang, supaya isi terakhir tidak tertutup. */
#view { padding: 14px 16px calc(var(--nav-h) + 40px + env(safe-area-inset-bottom)); }

/* ---------- Header ---------- */
.kepala { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 18px; }
.kepala h1 { font-size: 24px; font-weight: 800; }
.kepala small { display: block; color: var(--muted); font-size: 13px; }
.kepala-kanan { display: flex; align-items: center; gap: 8px; flex: none; }
.kepala-kembali { justify-content: flex-start; }
.sapa { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.sapa > div { min-width: 0; }
.sapa h1 { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--primary), #f5a524); color: #fff; font-weight: 800; font-size: 16px;
}
/* Avatar: foto sendiri atau gambar bawaan (emoji di atas warna) */
.avatar-tombol { display: block; border-radius: 50%; }
.avatar-tombol:active .avatar { transform: scale(.94); }
.avatar-foto { overflow: hidden; background: var(--card-2); }
.avatar-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-emoji, .grid-avatar button { background: linear-gradient(135deg, var(--av), color-mix(in srgb, var(--av) 55%, #000)); font-size: 29px; line-height: 1; }
.avatar.besar { width: 76px; height: 76px; font-size: 30px; }
.avatar-emoji.besar { font-size: 54px; }
.avatar.mini { display: inline-grid; width: 22px; height: 22px; font-size: 11px; vertical-align: -6px; }
.avatar-emoji.mini { font-size: 16px; }
.ikon-bulat .avatar { width: 100%; height: 100%; }
.avatar-pratinjau { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.avatar-pratinjau b { font-size: 17px; }
.avatar-pratinjau small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.tombol-unggah-avatar { cursor: pointer; text-align: center; }
.grid-avatar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.grid-avatar button { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; container-type: inline-size; transition: transform .12s; }
/* Ukuran emoji mengikuti lebar lingkarannya sendiri, jadi pas di HP maupun laptop. */
.grid-avatar button span { font-size: 28px; font-size: 56cqi; line-height: 1; }
.grid-avatar button:active { transform: scale(.92); }
.label-avatar { margin-top: 16px; }
.grid-avatar + .label-avatar { margin-top: 18px; }
.grid-avatar button.aktif { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--primary); }
.judul-bagian { font-size: 17px; font-weight: 800; margin: 24px 2px 10px; display: flex; justify-content: space-between; align-items: center; }
.judul-bagian button { font-size: 13px; font-weight: 700; color: var(--primary); }
.pemilih-bulan { display: flex; align-items: center; gap: 2px; background: var(--card); border-radius: 999px; padding: 3px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.pemilih-bulan span { font-size: 13px; font-weight: 700; min-width: 96px; text-align: center; }
.pemilih-bulan button { width: 30px; height: 30px; border-radius: 50%; font-size: 18px; color: var(--muted); display: grid; place-items: center; }
.pemilih-bulan button:active { background: var(--card-2); }
.tombol-ikon { width: 40px; height: 40px; border-radius: 50%; background: var(--card); border: 1px solid var(--line); display: grid; place-items: center; font-size: 17px; color: var(--text); box-shadow: var(--shadow); flex: none; }

/* ---------- Kartu ---------- */
.kartu { background: var(--card); border-radius: var(--radius); padding: 18px; margin-bottom: 14px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.kartu h3 { font-size: 15px; font-weight: 800; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kartu h3 button { color: var(--primary); font-size: 13px; font-weight: 700; }
.pemisah { border-top: 1px solid var(--line); margin: 8px 0; }

/* Kartu saldo: gaya kartu bank gelap dengan cahaya aksen */
.kartu-saldo {
  position: relative; overflow: hidden; isolation: isolate; color: #fff; border: 0; padding: 22px 20px 18px;
  background:
    radial-gradient(90% 75% at 100% 0%, rgba(45, 212, 191, .38), transparent 62%),
    radial-gradient(70% 60% at 0% 100%, rgba(245, 165, 36, .22), transparent 65%),
    linear-gradient(150deg, var(--hero-1) 10%, var(--hero-2));
  box-shadow: 0 14px 34px rgba(6, 42, 46, .28), inset 0 1px 0 rgba(255, 255, 255, .14);
}
/* Dekorasi: garis kontur melingkar dari pojok kanan atas yang memudar + dua bidang kaca miring. */
.kartu-saldo::before, .kartu-saldo::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.kartu-saldo::before {
  background: repeating-radial-gradient(circle at 100% 0%, transparent 0 22px, rgba(255, 255, 255, .085) 22px 23.5px);
  -webkit-mask-image: radial-gradient(circle at 100% 0%, #000 10%, transparent 62%); mask-image: radial-gradient(circle at 100% 0%, #000 10%, transparent 62%);
}
.kartu-saldo::after {
  background:
    linear-gradient(112deg, transparent 58%, rgba(255, 255, 255, .055) 58% 71%, transparent 71%),
    linear-gradient(112deg, transparent 74%, rgba(255, 255, 255, .035) 74% 79%, transparent 79%);
}
.kartu-saldo small { opacity: .72; font-size: 13px; }
.kartu-saldo .besar { font-size: 34px; font-weight: 800; margin: 2px 0 16px; letter-spacing: -.02em; }
.ringkas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: relative; z-index: 1; }
.ringkas > div { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; padding: 10px 12px; min-width: 0; }
.ringkas .panah-bulat { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 15px; font-weight: 800; }
.ringkas .panah-bulat.masuk { background: rgba(60, 203, 139, .2); color: #6ee7b0; }
.ringkas .panah-bulat.keluar { background: rgba(251, 117, 147, .2); color: #fda4b8; }
.ringkas > div > span:last-child { min-width: 0; }
.ringkas small { display: block; font-size: 11px; }
.ringkas b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selisih { margin-top: 12px; font-size: 13px; opacity: .85; position: relative; z-index: 1; }
.tautan-putih { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-align: left; background: rgba(255, 255, 255, .1); border-radius: 999px; padding: 6px 12px; opacity: 1; }

/* ---------- Aksi cepat ---------- */
/* Baris pintasan: 5 tampil (lebar 1/5 area geser), sisanya digeser ke samping tanpa scrollbar; tombol Atur tetap di ujung. */
.aksi-cepat { display: grid; grid-template-columns: 5fr 1fr; gap: 4px; margin: 4px 0 18px; align-items: start; }
.aksi-cepat-geser { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none; padding: 4px 0 10px; margin: -4px 0 -10px; touch-action: pan-x pan-y; }
.aksi-cepat-geser::-webkit-scrollbar { display: none; }
.aksi-cepat-geser button { flex: 0 0 20%; scroll-snap-align: start; }
.aksi-cepat button { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; min-width: 0; text-align: center; line-height: 1.2; font-weight: 600; color: var(--text); }
.aksi-cepat .kotak { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--primary); }
.aksi-cepat button:active .kotak { transform: scale(.94); }

/* ---------- Bento ---------- */
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.bento > button { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bento small { color: var(--muted); font-size: 12px; font-weight: 600; display: flex; justify-content: space-between; }
.bento b { font-size: 20px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bento .ket { font-size: 12px; color: var(--muted); }
.bento .meter { margin-top: 2px; }

/* ---------- Bar kategori & meter ---------- */
.bar-item { display: grid; grid-template-columns: 36px 1fr auto; gap: 5px 12px; align-items: center; padding: 8px 0; }
.bar-item .ikon { grid-row: span 2; width: 36px; height: 36px; border-radius: 12px; background: var(--card-2); display: grid; place-items: center; font-size: 18px; }
.bar-item .nama { font-size: 14px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-item .nilai { font-size: 14px; font-weight: 700; text-align: right; white-space: nowrap; }
.bar-item .nilai small { font-weight: 500; color: var(--muted); font-size: 12px; }
.bar-item .ket { grid-column: 2 / 4; font-size: 12px; color: var(--muted); }
.bar { grid-column: 2 / 4; height: 6px; background: var(--card-2); border-radius: 99px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--primary); border-radius: 99px; }
.meter { display: block; grid-column: 2 / 4; height: 8px; background: var(--card-2); border-radius: 99px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--primary); border-radius: 99px; }
.meter.hampir i { background: var(--status-warning); }
.meter.lewat i { background: var(--status-critical); }
.baris .isi .meter { margin: 7px 0 5px; }

/* ---------- Daftar transaksi ---------- */
.trx { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 0; border-bottom: 1px solid var(--line); }
.trx:last-child { border-bottom: 0; }
/* Transaksi kini dibungkus .trx-geser: garis pemisah ikut pembungkusnya. */
.trx-geser > .trx { border-bottom: 1px solid var(--line); }
.trx-geser:last-child > .trx { border-bottom: 0; }
.ikon-bulat { width: 44px; height: 44px; border-radius: 15px; background: var(--card-2); display: grid; place-items: center; font-size: 21px; flex: none; }
.trx-isi { flex: 1; min-width: 0; }
.trx-isi b { display: block; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trx-isi small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nominal { font-weight: 800; font-size: 14px; white-space: nowrap; }
.nominal.masuk { color: var(--masuk); }
.nominal.keluar { color: var(--text); }
.nominal.transfer { color: var(--transfer); }
.nominal.minus { color: var(--keluar); }
.grup-tanggal { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); font-weight: 700; margin: 20px 4px 8px; }
.grup-tanggal:first-child { margin-top: 0; }
.kosong { text-align: center; color: var(--muted); padding: 26px 12px; font-size: 14px; }
.kosong span { font-size: 38px; display: block; margin-bottom: 8px; }

/* ---------- Filter ---------- */
.cari { width: 100%; padding: 13px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); margin-bottom: 12px; outline: none; box-shadow: var(--shadow); }
.cari:focus { border-color: var(--primary); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { padding: 8px 15px; min-height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: 13px; font-weight: 600; white-space: nowrap; }
.chip small { font-weight: 500; color: inherit; opacity: .75; }
.chip.aktif { background: var(--text); color: var(--bg); border-color: var(--text); }

/* ---------- Baris daftar (dompet, pengaturan) ---------- */
.baris { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.baris-menu { gap: 8px; padding: 8px 0; }
.baris-menu .isi { flex: 1; }
.baris-menu .ikon-bulat svg.ik { width: 20px; height: 20px; }
.baris-menu .tombol-ikon { width: 36px; height: 36px; box-shadow: none; }
.baris-menu .tombol-ikon:disabled { opacity: .3; }
.baris:last-child { border-bottom: 0; }
.baris .isi { flex: 1; min-width: 0; }
.baris .isi b { font-weight: 700; }
.baris .isi small { display: block; color: var(--muted); font-size: 12px; }
.baris .panah { color: var(--muted); font-size: 20px; }
.baris-input .field { flex: none; width: 128px; padding: 9px 12px; text-align: right; }
.tombol-tambah { width: 100%; padding: 14px; border-radius: 16px; border: 1.5px dashed var(--line); color: var(--primary); font-weight: 700; margin-top: 2px; background: transparent; }

/* ---------- Tabungan ---------- */
.ringkas-tabungan { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ringkas-tabungan small { display: block; color: var(--muted); font-size: 12px; }
.ringkas-tabungan b { font-size: 26px; font-weight: 800; }

/* ---------- Laporan ---------- */
.kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.kpi .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 14px; min-width: 0; box-shadow: var(--shadow); }
.tile small { display: block; color: var(--muted); font-size: 12px; font-weight: 600; }
.tile b { display: block; font-size: 17px; font-weight: 800; margin-top: 4px; overflow-wrap: anywhere; }
.tile span { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.legenda { display: flex; gap: 14px; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.sw.seri-1 { background: var(--seri-1); }
.sw.seri-2 { background: var(--seri-2); }
.grafik { display: block; width: 100%; height: auto; }
.grafik .grid { stroke: var(--line); stroke-width: 1; }
.grafik .dasar { stroke: var(--muted); stroke-width: 1; opacity: .5; }
.grafik .sumbu { fill: var(--muted); font-size: 10px; font-family: inherit; }
.grafik .sumbu.aktif { fill: var(--text); font-weight: 800; }
.grafik .seri-1 { fill: var(--seri-1); }
.grafik .seri-2 { fill: var(--seri-2); }
.grafik .pilih { fill: var(--primary-soft); }
.grafik .hit { fill: transparent; cursor: pointer; }
.grafik .garis { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: gambar-garis .9s cubic-bezier(.4, 0, .2, 1) .1s forwards; }
.grafik .garis.seri-1 { stroke: var(--seri-1); }
.grafik .garis.seri-2 { stroke: var(--seri-2); }
.grafik .area { stroke: none; opacity: 0; animation: muncul-area .6s ease-out .6s forwards; }
.grafik .area.seri-1 { fill: var(--seri-1); }
.grafik .area.seri-2 { fill: var(--seri-2); }
.grafik .titik { stroke: var(--card); stroke-width: 1.5; opacity: 0; animation: muncul-titik .3s ease-out forwards; transform-box: fill-box; transform-origin: center; }
/* Batang tumbuh dari garis dasar (selisih negatif tumbuh ke bawah dari garis nol) */
.grafik .tumbuh { transform-box: fill-box; transform-origin: 50% 100%; animation: tumbuh .6s cubic-bezier(.2, .8, .2, 1) both; }
.grafik .defisit.tumbuh { transform-origin: 50% 0; }
/* Carousel Laporan: animasi hanya di slide yang sedang dilihat (.main), diputar ulang setiap kali didatangi.
   Slide lain menunggu di keadaan awal (tersembunyi); .diam = langsung tampil penuh tanpa animasi. */
.slide-grafik:not(.main) .grafik * { animation: none !important; }
.slide-grafik:not(.main):not(.diam) .tumbuh { transform: scaleY(0); }
.slide-grafik.diam .garis { stroke-dashoffset: 0; }
.slide-grafik.diam .area { opacity: .1; }
.slide-grafik.diam .titik { opacity: 1; }
@keyframes tumbuh { from { transform: scaleY(0); } }
@keyframes gambar-garis { to { stroke-dashoffset: 0; } }
@keyframes muncul-area { to { opacity: .1; } }
@keyframes muncul-titik { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
.grafik .surplus, .sw.surplus { fill: var(--masuk); background: var(--masuk); }
.grafik .defisit, .sw.defisit { fill: var(--keluar); background: var(--keluar); }
/* Grafik bulanan Laporan: geser ke samping untuk ganti jenis */
.geser-grafik { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0 -2px; }
.geser-grafik::-webkit-scrollbar { display: none; }
.slide-grafik { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; padding: 0 2px; }
.titik-grafik { display: flex; justify-content: center; gap: 4px; margin: 6px 0 2px; }
.titik-grafik button { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 700; color: var(--muted); }
.titik-grafik button span { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: width .2s, background .2s; }
.titik-grafik button.aktif { color: var(--text); }
.titik-grafik button.aktif span { width: 18px; border-radius: 99px; background: var(--primary); }
.detail-bulan { font-size: 13px; margin: 10px 0 0; }
.detail-bulan small { color: var(--muted); font-size: 12px; }
.tabel-data summary { font-size: 13px; font-weight: 700; color: var(--primary); cursor: pointer; margin-top: 12px; }
.tabel-data table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; font-variant-numeric: tabular-nums; }
.tabel-data th, .tabel-data td { padding: 6px 2px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tabel-data th:first-child, .tabel-data td:first-child { text-align: left; }
.banding { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.banding .ikon { font-size: 18px; width: 36px; height: 36px; border-radius: 12px; background: var(--card-2); display: grid; place-items: center; flex: none; }
.banding .isi { flex: 1; min-width: 0; }
.banding .isi b { font-weight: 700; }
.banding .isi small { display: block; color: var(--muted); font-size: 12px; }
.banding > span:last-child { text-align: right; white-space: nowrap; font-weight: 700; }
.banding .naik { color: var(--keluar); }
.banding .turun { color: var(--masuk); }

/* ---------- Navigasi bawah: pil mengambang ---------- */
.bottomnav {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 10;
  bottom: calc(12px + env(safe-area-inset-bottom));
  width: calc(100% - 24px); max-width: 496px; height: var(--nav-h);
  /* Tiga halaman yang digeser kiri/kanan, ＋ tetap di tengah:
     [Beranda · Riwayat · ＋ · Dompet · Laporan] ⇄ [Catatan · Sholat · ＋ · Tantangan · Cek beli] ⇄ [Anggaran · Tagihan · ＋ · Zakat · Pengaturan] */
  display: block; padding: 0;
  background: color-mix(in srgb, var(--card) 86%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow-up);
}
.bottomnav button { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; min-width: 0; font-weight: 600; color: var(--muted); height: 100%; justify-content: center; }
/* Tab aktif: pil lembut di belakang ikon (lebih jelas dari sekadar ganti warna) */
.bottomnav button:not(.fab) svg.ik { box-sizing: content-box; padding: 4px 16px; border-radius: 99px; transition: background .2s; }
.bottomnav button.aktif { color: var(--primary); font-weight: 700; }
.bottomnav button.aktif svg.ik { background: var(--primary-soft); }
/* Tombol catat di tengah navigasi, sedikit menonjol ke atas supaya jadi aksi utama */
.nav-geser {
  display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; border-radius: inherit;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
}
.nav-geser::-webkit-scrollbar { display: none; }
.nav-hal {
  flex: 0 0 100%; box-sizing: border-box; height: 100%; padding: 0 4px; scroll-snap-align: start; scroll-snap-stop: always;
  display: grid; grid-template-columns: 1fr 1fr 70px 1fr 1fr; align-items: center;
}
/* Tombol catat: tidak ikut tergeser, bulat di tengah bar (tidak menonjol keluar); gradasi + cincin lembut
   supaya tetap jadi aksi utama tanpa terlihat menempel. */
.bottomnav .fab {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
  height: 50px; width: 50px; border-radius: 50%;
  background: linear-gradient(150deg, color-mix(in srgb, var(--primary) 78%, #fff), var(--primary) 65%);
  color: var(--on-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 13%, transparent),
    0 6px 14px color-mix(in srgb, var(--primary) 32%, transparent), inset 0 1px 0 rgba(255, 255, 255, .28);
  transition: transform .15s;
}
.bottomnav .fab svg.ik { width: 24px; height: 24px; stroke-width: 2.6; }
.bottomnav .fab:active { transform: translate(-50%, -50%) scale(.92); }

/* ---------- Bottom sheet ---------- */
.sheet { position: fixed; inset: 0; z-index: 20; }
.sheet-bg { position: absolute; inset: 0; background: rgba(8, 10, 18, .5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: pudar .2s; }
.sheet-panel {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 100%; max-width: 520px; max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--card); border-radius: 28px 28px 0 0;
  padding: 6px 18px calc(22px + env(safe-area-inset-bottom));
  animation: naik .28s cubic-bezier(.2, .8, .2, 1);
}
/* Digeser ke bawah untuk menutup (lihat "Geser lembar ke bawah" di app.js). */
.sheet-panel.ditarik { transition: none; }
.sheet-panel.lepas { transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.grabber { width: 40px; height: 5px; border-radius: 99px; background: var(--line); margin: 4px auto 2px; }
.grabber, .sheet-head { touch-action: none; }
/* Tombol utama form selalu terlihat di bawah lembar, tidak perlu menggulir (juga saat keyboard terbuka). */
.sheet-panel .aksi-form:last-child {
  position: sticky; bottom: calc(-22px - env(safe-area-inset-bottom)); z-index: 2;
  margin: 8px -18px calc(-22px - env(safe-area-inset-bottom));
  padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
  background: var(--card); border-top: 1px solid var(--line);
}
.sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 0 14px; position: sticky; top: -6px; background: var(--card); z-index: 1; }
.sheet-head h2 { font-size: 19px; font-weight: 800; }
.sheet-head .tombol-ikon { box-shadow: none; background: var(--card-2); border: 0; width: 38px; height: 38px; font-size: 14px; position: relative; }
/* Area sentuh tombol tutup diperluas sampai ±46px tanpa membesarkan tampilannya. */
.sheet-head .tombol-ikon::after { content: ''; position: absolute; inset: -4px; }
@keyframes naik { from { transform: translate(-50%, 100%); } }
@keyframes pudar { from { opacity: 0; } }

/* ---------- Form ---------- */
.segmen { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--card-2); border-radius: 16px; padding: 4px; margin-bottom: 18px; }
.segmen button { padding: 10px 4px; border-radius: 12px; font-size: 14px; font-weight: 700; color: var(--muted); }
.segmen button.aktif { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }
.segmen.segmen-kecil { flex: none; margin: 0; border-radius: 999px; padding: 3px; }
.segmen.segmen-kecil button { padding: 7px 14px; border-radius: 999px; font-size: 13px; }

.input-jumlah { display: flex; align-items: baseline; gap: 8px; background: var(--card-2); border-radius: 20px; padding: 14px 18px; margin-bottom: 18px; border: 2px solid transparent; }
.input-jumlah:focus-within { border-color: var(--primary); }
.input-jumlah span { font-size: 20px; font-weight: 700; color: var(--muted); }
.input-jumlah input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 34px; font-weight: 800; letter-spacing: -.02em; }

.label { display: block; font-size: 13px; font-weight: 700; color: var(--muted); margin: 0 0 8px; }
.grup-form { margin-bottom: 18px; }
.field { width: 100%; padding: 13px 15px; border-radius: 14px; border: 1.5px solid transparent; background: var(--card-2); outline: none; }
/* iPhone memperbesar layar saat isian < 16px diketuk; zoom tidak lagi diblokir, jadi isian dibuat 16px di iOS. */
@supports (-webkit-touch-callout: none) { .field, .salin .field, .cari { font-size: 16px; } }
.field:focus { border-color: var(--primary); background: var(--card); }

/* Isian tanggal di form: ‹ [tanggal] › + nama hari di bawahnya */
.input-tanggal { display: flex; align-items: stretch; gap: 8px; }
.input-tanggal .field { flex: 1; min-width: 0; text-align: center; }
.geser-tanggal { flex: none; width: 48px; border-radius: 14px; background: var(--card-2); font-size: 24px; font-weight: 600; color: var(--text); display: grid; place-items: center; }
.geser-tanggal:active { background: var(--primary-soft); }
.hari-tanggal { margin: 6px 0 0; font-size: 12.5px; font-weight: 600; color: var(--muted); text-align: center; }
.hari-tanggal:empty { display: none; }

.grid-pilih { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.pilihan { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 11px 4px; border-radius: 16px; border: 1.5px solid transparent; background: var(--card-2); font-size: 12px; font-weight: 600; text-align: center; line-height: 1.2; }
.pilihan span { font-size: 22px; }
.pilihan.aktif { border-color: var(--primary); background: var(--primary-soft); color: var(--text); }

.grid-ikon { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; margin-top: 8px; }
.grid-ikon button { height: 42px; border-radius: 12px; font-size: 20px; border: 1.5px solid transparent; background: var(--card-2); }
.grid-ikon button.aktif { border-color: var(--primary); background: var(--primary-soft); }

.aksi-form { display: flex; gap: 10px; margin-top: 8px; }
.btn { flex: 1; padding: 15px; border-radius: 16px; font-weight: 800; font-size: 15px; }
.btn-utama { background: var(--primary); color: var(--on-primary); box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 30%, transparent); }
.btn-utama:disabled { opacity: .6; }
.btn-hapus { flex: 0 0 auto; padding: 15px 18px; color: var(--keluar); background: var(--card-2); }
.info-kecil { font-size: 12px; color: var(--muted); margin-top: 12px; text-align: center; }
.panduan ol { padding-left: 20px; margin: 8px 0 0; }
.panduan li { margin-bottom: 6px; }
.panduan a { color: var(--primary); font-weight: 700; }
.mulai { padding-top: 14px; padding-bottom: 4px; }
.mulai h3 { margin-bottom: 2px; }
.mulai .baris:last-child { border-bottom: 0; }
.mulai .baris.selesai .isi b { color: var(--muted); text-decoration: line-through; }
.salin { display: flex; gap: 8px; }
.salin .field { flex: 1; min-width: 0; font-size: 13px; }

/* ---------- Loading & toast ---------- */
.memuat-awal { display: grid; place-items: center; gap: 10px; padding-top: 35vh; color: var(--muted); }
.loading { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(8, 10, 18, .18); }
.spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--primary); animation: putar .8s linear infinite; }
@keyframes putar { to { transform: rotate(360deg); } }
/* Sesi login habis: kartu di atas tampilan, form di belakangnya tetap utuh. */
/* Mode samar: nominal disamarkan (blur) di semua halaman; form tetap jelas supaya bisa mengetik. */
body.samar #view :is(.besar, .nominal, .ringkas b, .selisih b, .tile b, .bento b, .bar-item .nilai, .bar-item .ket,
  .grup-tanggal span:last-child, .ringkas-cari b, .aman b, .detail-bulan, .tabel-data td, .banding small, .banding span:last-child, .grafik .sumbu) {
  filter: blur(7px); user-select: none;
}
/* Layar kunci (PIN / sidik jari) */
/* Isi di bagian bawah layar supaya papan PIN terjangkau jempol saat dipakai satu tangan. */
.kunci { position: fixed; inset: 0; z-index: 60; display: grid; place-items: end center; overflow-y: auto;
  padding: 24px 16px max(28px, calc(env(safe-area-inset-bottom) + 20px)); background: var(--bg); }
.kunci-isi { width: 100%; max-width: 320px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.kunci-isi .logo { width: 72px; height: 72px; border-radius: 24px; display: grid; place-items: center; font-size: 34px; background: var(--card-2); }
.kunci-isi b { font-size: 18px; font-weight: 800; }
.titik-pin { display: flex; gap: 12px; margin: 4px 0 10px; }
.titik-pin i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--muted); }
.titik-pin i.isi { background: var(--text); border-color: var(--text); }
.titik-pin.salah { animation: goyang .35s; }
.titik-pin.salah i { border-color: var(--keluar); }
@keyframes goyang { 25% { transform: translateX(-8px); } 50% { transform: translateX(8px); } 75% { transform: translateX(-4px); } }
.papan-pin { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; }
.papan-pin button { height: 64px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.papan-pin button:active { background: var(--card-2); }
.sesi { position: fixed; inset: 0; z-index: 35; display: grid; place-items: center; padding: 16px; background: rgba(8, 10, 18, .45); }
.sesi-kartu {
  width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 10px; text-align: center;
  background: var(--card); border-radius: var(--radius); padding: 22px 18px 14px; box-shadow: var(--shadow-up); animation: muncul .25s cubic-bezier(.2, .8, .2, 1);
}
.sesi-kartu b { font-size: 17px; font-weight: 800; }
.sesi-kartu p { margin: 0 0 6px; font-size: 14px; color: var(--muted); }
.sesi-kartu .btn { flex: none; }
.tanya { z-index: 70; } /* di atas lembar, layar kunci, dan kartu sesi */
.tanya .sesi-kartu p { color: var(--text); text-align: left; }
.btn-bahaya { color: #fff; background: var(--keluar); }
.tombol-teks { padding: 10px; min-height: 44px; font-size: 14px; font-weight: 700; color: var(--primary); text-decoration: none; }
.setup-intro { margin: -6px 0 14px; color: var(--muted); font-size: 14px; }
/* Baris status di atas halaman: offline / transaksi tertunda */
.status-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px;
  margin: 0 0 10px; padding: 10px 14px; border-radius: 14px; font-size: 13px; font-weight: 600;
  background: var(--primary-soft); color: var(--text);
}
.status-bar.gagal { background: color-mix(in srgb, #c4183c 14%, var(--card)); }
.status-bar.demo { background: color-mix(in srgb, #f5a524 16%, var(--card)); }
.status-bar.demo .isi-status button { padding: 6px 12px; border-radius: 999px; background: var(--primary); color: #fff; }
.status-bar button { font-size: 13px; font-weight: 800; color: var(--primary); }
.status-bar:has(.isi-status) { flex-wrap: nowrap; align-items: flex-start; }
.status-bar .isi-status { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.status-bar .status-gilir { flex: none; margin: -2px -4px 0 0; padding: 3px 9px; border-radius: 99px; font-size: 12px; font-weight: 800; color: var(--muted);
  background: color-mix(in srgb, var(--text) 7%, transparent); font-feature-settings: "tnum" 1; }
.status-bar .aksi-status { display: flex; gap: 16px; margin-left: auto; }
.status-bar button.tunda { color: var(--muted); font-weight: 700; }
/* ---------- Antrian struk (dibaca di latar belakang) ---------- */
.antrian {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 15;
  bottom: calc(var(--nav-h) + 22px + env(safe-area-inset-bottom));
  width: calc(100% - 24px); max-width: 496px; display: flex; flex-direction: column; gap: 8px;
}
.antrian-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 9px;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-up);
  animation: muncul .25s cubic-bezier(.2, .8, .2, 1);
}
.antrian-item.siap { border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); }
.antrian-item img, .antrian-ikon { width: 42px; height: 42px; border-radius: 12px; object-fit: cover; flex: none; background: var(--card-2); display: grid; place-items: center; font-size: 20px; }
.antrian-item .isi { flex: 1; min-width: 0; }
.antrian-item b { display: block; font-size: 14px; font-weight: 700; }
.antrian-item small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.antrian-tutup { width: 40px; height: 40px; margin: -6px -4px -6px -6px; border-radius: 50%; color: var(--muted); flex: none; }
.btn.kecil { flex: none; padding: 9px 14px; font-size: 13px; border-radius: 12px; box-shadow: none; }
.spinner.kecil { width: 22px; height: 22px; border-width: 2.5px; flex: none; margin: 0 6px; }
body.ada-antrian #view { padding-bottom: calc(var(--nav-h) + 120px + env(safe-area-inset-bottom)); }
.struk-proses { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin: 0 0 16px; border-radius: 16px; background: var(--primary-soft); }
/* Beberapa buku keuangan */
.chip-buku { display: inline-block; margin-top: 4px; padding: 3px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: 12px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tombol-buku { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; text-align: left; }
.tombol-buku b, .tombol-buku small { display: block; }
.tombol-buku small { font-size: 12px; color: var(--muted); }
.tombol-buku:disabled { cursor: default; opacity: 1; }
/* Daftar buku: tiap buku dengan ringkasan anggota & tombol undang */
.kartu-buku { border: 1px solid var(--line); border-radius: 18px; padding: 0 12px; margin-bottom: 10px; }
.kartu-buku.aktif { border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); background: color-mix(in srgb, var(--primary-soft) 40%, var(--card)); }
.kartu-buku .baris { border-bottom: 1px dashed var(--line); }
.anggota-buku { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 0; text-align: left; }
.ringkas-anggota { flex: 1; min-width: 0; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.undang-buku { flex: none; font-size: 13px; font-weight: 800; color: var(--primary); padding: 6px 10px; border-radius: 99px; background: var(--primary-soft); }
/* Lampiran foto struk */
.lampiran { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: -4px 0 14px; border-radius: 16px; background: var(--card-2); }
.lampiran img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; flex: none; }
.lampiran .isi { flex: 1; min-width: 0; }
.lampiran b { display: block; font-size: 14px; }
.lampiran small { display: block; font-size: 12px; color: var(--muted); }
.lampiran-buka { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer; }
.lampiran-buka b { color: var(--primary); }

/* Foto struk layar penuh. */
.lihat-foto { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px;
  padding-top: calc(16px + env(safe-area-inset-top)); padding-bottom: calc(16px + env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, .92); animation: muncul-panel .2s ease-out; }
.lihat-foto[hidden] { display: none; }
.muat-foto { color: #fff; font-weight: 700; font-size: 15px; animation: kedip 1.2s ease-in-out infinite; }
@keyframes kedip { 50% { opacity: .45; } }
.lihat-foto img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.lihat-foto.ada-unduh { grid-template-rows: minmax(0, 1fr) auto; gap: 16px; }
.unduh-foto { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; min-height: 48px; border: 0; border-radius: 999px;
  background: #fff; color: #111; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.unduh-foto .ik { width: 20px; height: 20px; }
/* QRIS di layar Versi penuh: ketuk untuk memperbesar. */
.tombol-qris { display: inline-block; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 12px; }
.tombol-qris[hidden] { display: none; }
.tombol-qris img { display: block; width: 220px; max-width: 100%; border-radius: 12px; background: #fff; padding: 8px; }
.tutup-foto { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 12px; width: 44px; height: 44px; border: 0;
  border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; font-size: 20px; cursor: pointer; }
/* Kekayaan bersih */
.kekayaan { font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 8px; font-variant-numeric: tabular-nums; }
.kekayaan.minus { color: var(--keluar); }
body.samar #view .kekayaan, body.samar #view .baris-rincian span:last-child { filter: blur(7px); }
/* Anggaran amplop */
.amplop { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; }
.amplop input { margin: 0; }
/* Form anggaran: nama kategori di baris 1, saran & centang Amplop di baris 2, jadi semua baris sama tinggi. */
.isi-anggaran { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.isi-anggaran > b { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opsi-anggaran { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 26px; }
.opsi-anggaran .amplop { margin-top: 0; }
.opsi-anggaran .saran-anggaran { margin: 0; }
/* Riwayat: filter & ringkasan hasil */
.ringkas-cari { margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; background: var(--primary-soft); font-size: 13px; font-weight: 600; }
.ringkas-cari b { font-variant-numeric: tabular-nums; }
.dua-kolom { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dua-kolom .grup-form { min-width: 0; }
select.field, select.field:focus { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
/* Input cepat */
.ketik-cepat { margin: 0 0 10px; }
.ketik-cepat .field { background: var(--primary-soft); }
.chip small { color: var(--muted); font-weight: 600; margin-left: 2px; }
.chip.aktif small { color: inherit; opacity: .8; }
/* Sisa aman per hari & periode gajian */
.kartu-saldo .aman { margin-top: 12px; position: relative; z-index: 1; font-size: 13px; font-weight: 600; }
.baris-rincian { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.baris-rincian b { font-variant-numeric: tabular-nums; }
.grid-tanggal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.grid-tanggal button { padding: 10px 0; border-radius: 12px; background: var(--card-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.grid-tanggal button.aktif { background: var(--primary); color: var(--on-primary); }
.pemilih-bulan span { white-space: nowrap; }
/* Beranda: pemilih periode ringkas di pojok kanan atas; tombol mata di sebelah total saldo */
.pemilih-bulan.mini { padding: 2px; }
.pemilih-bulan.mini span { min-width: 0; padding: 0 2px; font-size: 12.5px; }
.pemilih-bulan.mini button { width: 32px; height: 32px; position: relative; }
.pemilih-bulan.mini button::after { content: ''; position: absolute; inset: -6px -2px; } /* area sentuh ±44px */
.baris-saldo { display: flex; align-items: center; gap: 10px; margin: 2px 0 16px; }
.baris-saldo .besar { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Mata tampil/sembunyi: ikon garis polos (gaya navigasi bawah), area sentuh tetap 44px. */
.tombol-mata { position: relative; z-index: 1; flex: none; display: grid; place-items: center; padding: 0; color: #fff; opacity: .8; background: none; border: 0; }
.tombol-mata .ik { width: 24px; height: 24px; }
.tombol-mata::after { content: ''; position: absolute; inset: -10px; }
.tombol-mata:active { opacity: 1; transform: scale(.92); }
/* Baris atas kartu saldo: label + buku keuangan aktif. */
.atas-saldo { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.atas-saldo small { flex: none; }
.chip-buku-saldo { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 60%; padding: 5px 8px 5px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .18); color: #fff; font-size: 12px; font-weight: 700; }
.chip-buku-saldo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-buku-saldo .ik { width: 14px; height: 14px; flex: none; }
.chip-buku-saldo .panah-buku { width: 13px; height: 13px; opacity: .75; }
.chip-buku-saldo:active { background: rgba(255, 255, 255, .24); }
/* Tagihan rutin */
.info-rutin { display: flex; gap: 8px; padding: 12px 14px; margin: 0 0 16px; border-radius: 16px; background: var(--primary-soft); font-size: 14px; }
.info-rutin button { display: block; margin-top: 6px; font-size: 13px; font-weight: 800; color: var(--primary); }
.isi small.terlambat { color: var(--keluar); font-weight: 700; }
.struk-proses b { display: block; font-size: 14px; }
.galat-simpan { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 14px; border-radius: 14px; text-align: left; }
.detik { font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.peringatan-kembar { text-align: left; margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: var(--card-2); color: var(--text); }
.struk-proses small { display: block; font-size: 12px; color: var(--muted); }
@keyframes muncul { from { opacity: 0; transform: translateY(12px); } }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 40;
  top: calc(14px + env(safe-area-inset-top)); width: max-content;
  background: var(--text); color: var(--bg); padding: 12px 18px; border-radius: 16px; font-size: 14px; font-weight: 600;
  max-width: calc(100% - 32px); box-shadow: var(--shadow-up); animation: pudar .2s;
}
.toast.error { background: #c4183c; color: #fff; }
.toast.ada-tombol { display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 18px; }
.toast button { background: none; border: 0; color: inherit; font: inherit; font-weight: 800; text-decoration: underline; padding: 6px 10px; cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- Layar masuk ---------- */
.sambut { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 12px; padding: 24px 8px; position: relative; }
.sambut::before {
  content: ""; position: absolute; inset: -14px -16px auto; height: 60vh; z-index: -1;
  background: radial-gradient(60% 50% at 50% 30%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 70%);
}
.sambut .logo { width: 92px; height: 92px; filter: drop-shadow(0 12px 22px rgba(6, 42, 46, .25)); margin-bottom: 6px; }
.sambut h1 { margin: 0; font-size: 28px; font-weight: 800; }
.sambut p { margin: 0; color: var(--muted); max-width: 340px; }
.sambut .btn { flex: 0 0 auto; width: 100%; max-width: 330px; margin-top: 10px; }
.sambut .pilih-bahasa-masuk { margin-top: 6px; }
/* Layar masuk: tagline + tiga keunggulan + tombol coba yang menonjol */
.sambut .tagline-masuk { margin-top: -4px; color: var(--primary); font-size: 16.5px; font-weight: 700; }
.keunggulan { list-style: none; margin: 8px 0 2px; padding: 0; width: 100%; max-width: 330px; display: grid; gap: 10px; text-align: left; }
.keunggulan li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.keunggulan .ik-bulat { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.keunggulan .ik-bulat svg.ik { width: 20px; height: 20px; stroke-width: 2.1; }
/* ⚙️ → Fitur AI: daftar fitur yang memakai Gemini + statusnya (Aktif / Mati / Terbatas) */
.fitur-ai { list-style: none; margin: 0 0 16px; padding: 4px 14px; border-radius: 18px; background: var(--card-2); }
.fitur-ai li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.fitur-ai li:last-child { border-bottom: 0; }
.fitur-ai .ik-bulat { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--card); color: var(--primary); }
.fitur-ai .ik-bulat svg.ik { width: 19px; height: 19px; stroke-width: 2.1; }
.fitur-ai .isi { flex: 1; min-width: 0; }
.fitur-ai .isi b { display: block; font-size: 14px; font-weight: 700; }
.fitur-ai .isi small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.status-ai { flex: none; align-self: flex-start; margin-top: 2px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; font-style: normal; white-space: nowrap; }
.status-ai.aktif { color: var(--masuk); background: color-mix(in srgb, var(--masuk) 14%, transparent); }
.status-ai.mati { color: var(--keluar); background: color-mix(in srgb, var(--keluar) 12%, transparent); }
.status-ai.terbatas { color: var(--waspada); background: color-mix(in srgb, var(--waspada) 14%, transparent); }
.kotak-wajib-ai { margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5;
  background: color-mix(in srgb, var(--waspada) 11%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--waspada) 35%, transparent); }
.btn.btn-coba { background: var(--primary-soft); color: var(--primary); font-weight: 800; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 45%, transparent); }

/* ---------- Aplikasi terpasang ---------- */
/* Saklar nyala/mati (mis. Sembunyikan nominal); seluruh baris tetap bisa diketuk */
.saklar { position: relative; flex: none; width: 46px; height: 28px; border-radius: 99px; background: var(--line); transition: background .2s; }
.saklar::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .3); transition: transform .2s; }
.saklar.nyala { background: var(--primary); }
.saklar.nyala::after { transform: translateX(18px); }
.catatan-versi { text-align: center; color: var(--muted); font-size: 12.5px; margin: 18px 0 8px; }
.panduan .btn { width: 100%; margin-top: 4px; }

/* ---------- Tarik ke bawah untuk memperbarui ---------- */
.tarik {
  position: fixed; top: env(safe-area-inset-top); left: 50%; z-index: 30;
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--card); box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
  transform: translate(-50%, -50px); opacity: 0; pointer-events: none;
}
.tarik .spinner { animation: none; opacity: .45; }
.tarik.siap .spinner { opacity: 1; }
.tarik.memuat { transition: transform .2s; }
.tarik.memuat .spinner { animation: putar .8s linear infinite; }

/* Setelan HP "kurangi gerakan / hapus animasi": animasi & transisi dimatikan. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Mencatat dengan suara (tombol mikrofon di kotak ketik cepat) */
.ketik-cepat { position: relative; }
.ketik-cepat.ada-suara .field { padding-right: 54px; }
.tombol-suara { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; color: var(--muted); }
.tombol-suara .ik { width: 22px; height: 22px; }
/* Mic menyala: tombol merah dengan riak melebar, kotak ketik bergaris merah, dan panel gelombang di bawahnya. */
.tombol-suara.dengar { background: var(--keluar); color: #fff; box-shadow: 0 0 0 0 color-mix(in srgb, var(--keluar) 55%, transparent); animation: riak-mic 1.3s ease-out infinite; }
@keyframes riak-mic { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--keluar) 55%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
.ketik-cepat.sedang-dengar .field { border-color: var(--keluar); background: var(--card); }
.panel-suara { margin: -2px 0 12px; padding: 12px 10px 12px 14px; border-radius: 16px;
  background: color-mix(in srgb, var(--keluar) 10%, var(--card)); border: 1.5px solid color-mix(in srgb, var(--keluar) 35%, transparent);
  animation: muncul-panel .25s ease-out; }
@keyframes muncul-panel { from { opacity: 0; transform: translateY(-6px); } }
.gelombang-suara { flex: none; display: flex; align-items: center; gap: 3px; height: 30px; }
.gelombang-suara i { width: 4px; height: 6px; border-radius: 3px; background: var(--keluar); transition: height .2s; }
.panel-suara[data-tahap="siap"] .gelombang-suara i { opacity: .35; animation: kedip-kompas 1s ease-in-out infinite; }
.panel-suara[data-tahap="dengar"] .gelombang-suara i { animation: gelombang 1.4s ease-in-out infinite; }
.panel-suara[data-tahap="bicara"] .gelombang-suara i { animation: gelombang .6s ease-in-out infinite; }
.gelombang-suara i:nth-child(2) { animation-delay: -.15s !important; } .gelombang-suara i:nth-child(3) { animation-delay: -.3s !important; }
.gelombang-suara i:nth-child(4) { animation-delay: -.45s !important; } .gelombang-suara i:nth-child(5) { animation-delay: -.6s !important; }
.gelombang-suara i:nth-child(6) { animation-delay: -.75s !important; } .gelombang-suara i:nth-child(7) { animation-delay: -.9s !important; }
@keyframes gelombang { 0%, 100% { height: 6px; } 50% { height: 26px; } }
.panel-suara[data-tahap="dengar"] .gelombang-suara i { --t: 14px; }
/* Meter suara aktif (app-interaksi.js → mulaiMeterSuara): tinggi batang diatur dari level mikrofon, bukan animasi. */
.gelombang-suara.hidup i { animation: none !important; opacity: 1 !important; transition: height .08s linear; }
.teks-suara { flex: 1; min-width: 0; }
.teks-suara b { display: block; font-size: 13.5px; font-weight: 800; color: var(--keluar); }
.teks-suara span { display: block; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.panel-suara[data-tahap="bicara"] .teks-suara span { color: var(--text); font-weight: 600; }
.panel-suara .tombol-teks { flex: none; min-height: 36px; padding: 6px 10px; color: var(--keluar); }

/* Field yang terisi otomatis: menyala & sedikit membesar, bergantian dari atas (--tunda). */
.terisi-otomatis { position: relative; animation: sorot-terisi 1.1s cubic-bezier(.3, 1.4, .5, 1) var(--tunda, 0ms) both; }
@keyframes sorot-terisi {
  0% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 0%, transparent); }
  25% { transform: scale(1.05); box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 35%, transparent); }
  60% { transform: scale(1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
}
.input-jumlah.terisi-otomatis { border-color: var(--primary); }
.input-jumlah.terisi-otomatis input { animation: kilau-angka 1.1s ease-out var(--tunda, 0ms) both; }
@keyframes kilau-angka { 0%, 40% { color: var(--primary); } 100% { color: inherit; } }
#f-catatan.terisi-otomatis { border-color: var(--primary); }
@media (prefers-reduced-motion: reduce) {
  .terisi-otomatis, .input-jumlah.terisi-otomatis input, .tombol-suara.dengar, .gelombang-suara i, .panel-suara { animation: none !important; }
  .gelombang-suara i { height: 14px; }
}
@keyframes denyut { 50% { opacity: .65; } }

/* Kartu "Cek undangan" (layar awal & Buku Keuangan) */
.kartu-undangan { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; margin: 0 0 14px; border-radius: 18px; background: var(--primary-soft); color: var(--text); }
.kartu-undangan .isi { flex: 1; min-width: 0; }
.kartu-undangan b { display: block; font-weight: 800; }
.kartu-undangan small { display: block; font-size: 12.5px; color: var(--muted); }
.kartu-undangan:disabled { opacity: .6; }
.slot-hapus:empty { display: none; }

/* ---------- Kalender catatan (ala Google Calendar, tampilan bulan) ---------- */
.kal-kepala { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.kal-kepala b { flex: 1; font-size: 17px; font-weight: 800; text-align: center; }
.kal-kepala .tombol-ikon { box-shadow: none; width: 38px; height: 38px; font-size: 20px; }
.kal-kepala .chip { min-height: 36px; }
/* Kedua kalender (Catatan & Riwayat) memakai baris nama hari ini dan kotak hari terpisah ber-sudut bulat. */
.kal-hari { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin-bottom: 6px; }
.kal-hari span { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.kal-hari span:last-child { color: var(--keluar); }
.kal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; touch-action: pan-y; }
.kal-sel {
  position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px; min-width: 0;
  aspect-ratio: 1 / 1.05; overflow: hidden; padding: 4px 2px; border-radius: 12px; text-align: left; background: var(--card-2);
}
.kal-sel.luar { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.kal-sel.luar .kal-angka { opacity: .45; }
.kal-angka { flex: none; align-self: center; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kal-sel.hari-ini .kal-angka { background: var(--primary); color: var(--on-primary); }
.kal-sel.pilih { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--primary); z-index: 1; }
/* Label catatan di kotak: judul catatan pertama (dipotong per kata); jumlah catatan lainnya "+n" di pojok kanan atas. */
.kal-isi { display: flex; align-items: flex-start; gap: 1px; min-width: 0; width: 100%; }
.kal-sel .kal-isi i {
  flex: 1; min-width: 0; font-style: normal; font-size: 9px; font-weight: 700; line-height: 1.2; padding: 1px 2px; border-radius: 4px;
  overflow: hidden; word-break: break-word; max-height: calc(9px * 1.2 + 2px); /* satu baris: kata yang tidak muat turun & tersembunyi */
  background: color-mix(in srgb, var(--w, var(--primary)) 18%, transparent); color: color-mix(in srgb, var(--w, var(--primary)) 75%, var(--text));
}
.kal-sel .kal-isi i.tagihan { --w: var(--muted); }
.kal-lagi { position: absolute; top: 3px; right: 3px; font-size: 8.5px; font-weight: 800; line-height: 1; color: var(--muted); }
.kal-judul-hari { font-size: 15px; font-weight: 800; margin: 16px 0 8px; }
.kal-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 12px 12px 12px 14px; margin-bottom: 8px; border-radius: 14px; background: var(--card-2); border-left: 4px solid var(--w, var(--primary)); }
.kal-item.tagihan { --w: var(--muted); }
.kal-item .isi { flex: 1; min-width: 0; }
.kal-item b { display: block; font-weight: 700; }
.kal-item small { display: block; font-size: 12.5px; color: var(--muted); white-space: pre-line; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kal-item small.kal-meta { display: block; -webkit-line-clamp: unset; margin-top: 2px; font-size: 11.5px; font-weight: 600; }
.pilih-warna { display: flex; gap: 12px; }
.pilih-warna button { width: 34px; height: 34px; border-radius: 50%; background: var(--w); position: relative; }
.pilih-warna button::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; }
.pilih-warna button.aktif { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--w); }
textarea.field { resize: vertical; min-height: 84px; line-height: 1.45; }

/* ---------- Overlay pengingat ---------- */
.ingat { z-index: 50; } /* di atas lembar & antrian, di bawah layar kunci dan dialog konfirmasi */
.ingat-kartu { text-align: left; border-top: 6px solid var(--w, var(--primary)); padding-top: 18px; }
.ingat-label { font-size: 12px; font-weight: 800; color: var(--w, var(--primary)); letter-spacing: .02em; }
.ingat-kartu #ingat-judul { font-size: 21px; line-height: 1.25; }
.ingat-isi { white-space: pre-line; color: var(--text) !important; font-size: 15px !important; max-height: 40vh; overflow-y: auto; }
.ingat-oleh { font-size: 12px; color: var(--muted); }
.ingat-kartu .btn { margin-top: 6px; }
.ingat-aksi { display: flex; justify-content: space-between; gap: 6px; }

/* ---------- Jadwal sholat & kiblat ---------- */
.sholat-kepala { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sholat-kepala small { display: block; font-size: 12px; color: var(--muted); }
.sholat-kepala b { display: block; font-weight: 800; }
.sholat-berikut { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-radius: 18px; color: #fff; margin-bottom: 10px; background: linear-gradient(140deg, var(--hero-1), var(--hero-2)); }
.sholat-berikut small { display: block; font-size: 12px; opacity: .75; }
.sholat-berikut b { display: block; font-size: 20px; font-weight: 800; }
.sholat-berikut span { font-size: 13px; font-weight: 700; opacity: .9; white-space: nowrap; }
.jadwal-sholat { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.jadwal-sholat div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 2px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); min-width: 0; }
.jadwal-sholat span { font-size: 11px; font-weight: 600; color: var(--muted); }
.jadwal-sholat b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.jadwal-sholat .berikut { background: var(--primary-soft); border-color: var(--primary); }
.jadwal-sholat .berikut span, .jadwal-sholat .berikut b { color: var(--primary); }
.sholat-pelengkap { margin: 6px 0 0; font-size: 11.5px; color: var(--muted); text-align: center; line-height: 1.4; }
.sholat-pelengkap b { color: var(--text); font-variant-numeric: tabular-nums; }

/* Halaman sholat pas satu layar: kepala & jadwal tetap, kompas mengisi sisa tinggi (min. 150px, lalu baru scroll). */
#view:has(.hal-sholat) { padding-bottom: 0; }
.hal-sholat {
  display: flex; flex-direction: column; box-sizing: border-box;
  height: calc(100dvh - 14px); min-height: 560px;
  padding-bottom: calc(var(--nav-h) + 20px + env(safe-area-inset-bottom));
}
.hal-sholat .kepala { margin-bottom: 10px; }
.hal-sholat .kepala h1 { font-size: 20px; }
.area-kompas { flex: 1; min-height: 150px; display: flex; align-items: center; justify-content: center; padding: 14px 0 6px; }
/* Kompas kiblat: piringan berputar (--hp = arah HP), huruf & 🕋 tetap tegak, busur = sisa putaran, --warna ikut status. */
.kompas { position: relative; height: 100%; max-height: 290px; aspect-ratio: 1; max-width: 100%; --warna: var(--primary); --hp: 0deg; }
.kompas.dekat { --warna: #f59e0b; }
.kompas.pas { --warna: var(--masuk); }
.kompas-piringan {
  position: absolute; inset: 0; border-radius: 50%; transform: rotate(calc(-1 * var(--hp)));
  background: radial-gradient(circle, var(--card) 0 62%, var(--card-2) 63% 100%);
  border: 1px solid var(--line); box-shadow: var(--shadow); transition: box-shadow .35s, border-color .35s;
}
.kompas-skala { position: absolute; inset: 3%; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from -.4deg, color-mix(in srgb, var(--muted) 50%, transparent) 0 .8deg, transparent .8deg 6deg);
  -webkit-mask: radial-gradient(closest-side, transparent 90%, #000 91%); mask: radial-gradient(closest-side, transparent 90%, #000 91%); }
.kompas-skala::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(from -.9deg, var(--muted) 0 1.8deg, transparent 1.8deg 30deg);
  -webkit-mask: radial-gradient(closest-side, transparent 82%, #000 83%); mask: radial-gradient(closest-side, transparent 82%, #000 83%); }
.kompas-sudut { position: absolute; inset: 0; transform: rotate(var(--a)); pointer-events: none; }
.mata-angin { position: absolute; left: 50%; top: 21%; transform: translate(-50%, -50%) rotate(calc(var(--hp) - var(--a)));
  font-weight: 800; font-size: 15px; color: var(--muted); }
.mata-angin.u { color: var(--keluar); }
.garis-kiblat { position: absolute; left: 50%; top: 15%; bottom: 50%; width: 3px; margin-left: -1.5px; border-radius: 3px;
  background: linear-gradient(var(--warna), transparent 85%); transition: background .35s; }
.ikon-kabah { position: absolute; left: 50%; top: 9%; width: 34px; height: 34px; display: grid; place-items: center;
  transform: translate(-50%, -50%) rotate(calc(var(--hp) - var(--a))); font-size: 18px; border-radius: 50%;
  background: var(--card); border: 2px solid var(--warna); box-shadow: 0 4px 12px rgba(0, 0, 0, .18); transition: border-color .35s; }
.kompas-busur { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from var(--busur-mulai, 0deg), var(--warna) 0 var(--busur, 0deg), transparent 0);
  -webkit-mask: radial-gradient(closest-side, transparent 95%, #000 96%); mask: radial-gradient(closest-side, transparent 95%, #000 96%); }
.kompas:not(.hidup) .kompas-busur { display: none; }
.penanda-atas { position: absolute; left: 50%; top: -11px; width: 0; height: 0; transform: translateX(-50%); z-index: 1;
  border: 9px solid transparent; border-top: 14px solid var(--text); border-bottom: 0; transition: border-color .35s; }
.kompas.hidup .penanda-atas { border-top-color: var(--warna); }
.kompas-tengah {
  position: absolute; left: 50%; top: 50%; width: 40%; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-radius: 50%;
  background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 6px 18px rgba(0, 0, 0, .1); transition: background .35s, color .35s;
}
.kompas-tengah b { font-size: 22px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kompas-tengah small { font-size: 10.5px; font-weight: 700; color: var(--muted); line-height: 1.2; padding: 0 4px; }
.kompas.pas .kompas-tengah { background: var(--masuk); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--masuk) 30%, transparent); }
.kompas.pas .kompas-tengah small { color: #fff; }
.kompas-tengah .cek { font-size: 28px; animation: muncul-cek .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes muncul-cek { from { transform: scale(.3); opacity: 0; } }
.kompas.pas .kompas-piringan { border-color: var(--masuk); box-shadow: 0 0 0 3px var(--masuk), 0 0 34px color-mix(in srgb, var(--masuk) 45%, transparent); }
.kompas-riak { position: absolute; inset: 0; pointer-events: none; }
.kompas-riak i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--masuk); opacity: 0; }
.kompas.pas .kompas-riak i { animation: riak-kompas 1.8s ease-out infinite; }
.kompas.pas .kompas-riak i:nth-child(2) { animation-delay: .9s; }
@keyframes riak-kompas { from { transform: scale(1); opacity: .55; } to { transform: scale(1.16); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .kompas.pas .kompas-riak i, .kompas-tengah .cek { animation: none; } }
.teks-kiblat { text-align: center; margin: 0 0 8px; font-size: 14px; }
.area-kompas { position: relative; }
.tombol-kompas {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; max-width: calc(100% - 24px);
  padding: 12px 18px; border-radius: 999px; font-weight: 800; font-size: 14px; white-space: nowrap;
  background: var(--primary); color: #fff; box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 40%, transparent);
}
.tombol-kompas[hidden] { display: none; }
.area-kompas:has(.tombol-kompas:not([hidden])) .kompas { opacity: .6; }
.tombol-kompas.menunggu { background: var(--card); color: var(--muted); box-shadow: var(--shadow); animation: kedip-kompas 1.2s ease-in-out infinite; }
.tombol-kompas.tidak-ada { background: var(--card); color: var(--keluar); box-shadow: var(--shadow); white-space: normal; text-align: center; }
@keyframes kedip-kompas { 50% { opacity: .55; } }


/* Halaman penuh Catatan & Sholat */
.halaman-kalender { padding: 14px 12px; }
.halaman-sholat { padding: 16px; }

/* ---------- Form catatan halaman penuh ---------- */
body.tanpa-nav .bottomnav { display: none; }
body.tanpa-nav #view { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.kepala-form-catatan { position: sticky; top: 0; z-index: 3; margin: -14px -16px 8px; padding: 14px 16px 10px;
  background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.kepala-form-catatan h1 { flex: 1; min-width: 0; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-kecil { flex: none; width: auto; padding: 9px 18px; min-height: 40px; font-size: 14px; border-radius: 14px; }
.form-catatan { }
.judul-catatan { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit;
  font-size: 24px; font-weight: 800; padding: 4px 0 8px; }
.judul-catatan::placeholder, .isi-catatan::placeholder { color: var(--muted); opacity: .7; }
.opsi-catatan { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 12px; }
.opsi-catatan::-webkit-scrollbar { display: none; }
.opsi-catatan > * { flex: none; }
.chip-opsi { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 6px 9px; min-height: 32px;
  border-radius: 999px; background: var(--card-2); color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.chip-opsi { border: 1.5px solid var(--line); }
.chip-opsi.nyala { background: var(--primary); border-color: var(--primary); color: var(--on-primary); box-shadow: 0 3px 10px color-mix(in srgb, var(--primary) 35%, transparent); }
.chip-opsi input, .chip-opsi select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; font-size: 16px; }
.chip-opsi input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.titik-warna { width: 16px; height: 16px; margin: 0 2px; border-radius: 50%; background: var(--w); box-shadow: 0 0 0 2px color-mix(in srgb, var(--w) 30%, transparent); transition: background .2s; }
/* Saklar Teks / Daftar tugas: penanda berwarna bergeser ke pilihan aktif. */
.saklar-jenis { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; margin: 4px 0 16px;
  border-radius: 999px; background: var(--card-2); border: 1px solid var(--line); }
.saklar-jenis::before { content: ''; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px;
  background: var(--primary); box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 35%, transparent);
  transition: transform .32s cubic-bezier(.3, 1.3, .5, 1); }
.saklar-jenis[data-jenis="tugas"]::before { transform: translateX(100%); }
.saklar-jenis button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 40px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--muted); transition: color .25s; }
.saklar-jenis button.aktif { color: var(--on-primary); }
.saklar-jenis .ik { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .saklar-jenis::before { transition: none; } }
.isi-catatan { display: block; width: 100%; min-height: 180px; border: 0; outline: 0; resize: none; background: transparent;
  color: var(--text); font: inherit; font-size: 16px; line-height: 1.6; padding: 4px 0; overflow: hidden; }
.kaki-form-catatan { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px;
  padding-top: 10px; border-top: 1px solid var(--line); }
.kaki-form-catatan small { color: var(--muted); font-size: 12px; }
.tombol-teks.bahaya { color: var(--keluar); }

/* ---------- Daftar tugas ---------- */
.kotak-centang { flex: none; width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--muted); position: relative;
  transition: background .15s, border-color .15s; }
.kotak-centang::after { content: ''; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff;
  border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: transform .18s cubic-bezier(.3, 1.6, .5, 1); }
.selesai > .kotak-centang, .selesai .kotak-centang { background: var(--w, var(--primary)); border-color: var(--w, var(--primary)); }
.selesai > .kotak-centang::after, .selesai .kotak-centang::after { transform: rotate(45deg) scale(1); }
.baris-tugas { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); transition: border-color .2s; }
.baris-tugas > .kotak-centang { margin: 0 2px; }
.baris-tugas input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 14px 4px; font: inherit; font-size: 16px; color: var(--text); box-shadow: none; border-radius: 0; }
.baris-tugas input::placeholder { color: var(--muted); opacity: .7; }
.baris-tugas.selesai input { text-decoration: line-through; color: var(--muted); }
.tombol-hapus-tugas { flex: none; width: 36px; height: 36px; border-radius: 10px; color: var(--muted); font-size: 14px; opacity: .6; }
.tombol-tambah-tugas { display: block; padding: 12px 0; color: var(--primary); font-weight: 700; font-size: 14px; }

.kal-tugas { display: block; padding: 0; }
.kal-tugas-kepala { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 12px 12px 8px 14px; }
.progres-tugas { height: 4px; margin: 0 12px 4px 14px; border-radius: 4px; background: var(--line); overflow: hidden; }
.progres-tugas i { display: block; height: 100%; background: var(--w, var(--primary)); border-radius: 4px; transition: width .3s; }
.daftar-centang { display: flex; flex-direction: column; padding: 2px 8px 8px 10px; }
.centang { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; padding: 7px 4px; border-radius: 10px; font-size: 14px; color: var(--text); }
.centang .kotak-centang { width: 20px; height: 20px; margin-top: 1px; }
.centang .kotak-centang::after { left: 5px; top: 1px; }
.centang.selesai > span:last-child { text-decoration: line-through; color: var(--muted); }
.centang:active { background: color-mix(in srgb, var(--w, var(--primary)) 10%, transparent); }
.centang-lagi { padding: 2px 4px 0 34px; font-size: 12px; color: var(--muted); }
.kal-tugas.tuntas .kal-tugas-kepala b { text-decoration: line-through; color: var(--muted); }
.ingat-isi .daftar-centang { padding: 0; }
/* Form catatan: judul, isi & item tugas tanpa kotak fokus (kursor sudah cukup), chip tanggal/ulang tetap pakai cincin di chip. */
.form-catatan .judul-catatan:focus-visible, .form-catatan .isi-catatan:focus-visible, .baris-tugas input:focus-visible,
.chip-opsi input:focus-visible, .chip-opsi select:focus-visible { outline: none; }
.chip-opsi:focus-within { box-shadow: 0 0 0 2px var(--primary); }
/* Chip tanggal catatan + tombol ✕ menempel jadi satu pil. */
.grup-tanggal-catatan { display: inline-flex; align-items: stretch; }
.grup-tanggal-catatan .chip-opsi:has(+ .chip-hapus-tanggal) { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-width: 0; }
.chip-hapus-tanggal { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; padding: 6px 10px; color: var(--muted); font-weight: 800; }
.baris-tugas:focus-within { border-bottom-color: var(--w, var(--primary)); }
/* Bilah bawah form catatan: opsi + Hapus/Simpan, menempel di bawah layar (naik di atas keyboard). */
body.tanpa-nav #view:has(.bilah-catatan) { padding-bottom: calc(165px + env(safe-area-inset-bottom)); }
.bilah-catatan {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 5; width: 100%; max-width: 520px;
  padding: 10px 16px max(22px, calc(12px + env(safe-area-inset-bottom)));
  background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
}
.bilah-catatan .opsi-catatan { margin-bottom: 10px; }
.aksi-catatan { display: flex; gap: 10px; }
.aksi-catatan .btn { padding: 13px; }
.aksi-catatan .btn-hapus-catatan { padding: 13px 16px; }
.oleh-catatan { margin: 16px 0 0; font-size: 12px; color: var(--muted); }

/* Kartu ringkasan hasil suara: cek dulu, lalu Simpan / Koreksi / Ulangi. */
.ringkas-suara { z-index: 60; align-items: end; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
@media (min-height: 700px) { .ringkas-suara { align-items: center; } }
.kartu-ringkas { max-width: 400px; text-align: left; gap: 12px; padding: 20px 18px 10px; }
.label-ringkas { font-size: 12px; font-weight: 800; color: var(--primary); text-transform: uppercase; letter-spacing: .04em; }
.kutipan-suara { margin: -4px 0 0 !important; font-size: 13.5px !important; font-style: italic; color: var(--muted); }
.nominal-ringkas { font-size: 32px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; animation: muncul-cek .4s cubic-bezier(.3, 1.5, .5, 1); }
.nominal-ringkas small { display: block; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: 0; }
.nominal-ringkas.keluar { color: var(--keluar); }
.nominal-ringkas.masuk { color: var(--masuk); }
.nominal-ringkas.belum { color: var(--muted); }
.daftar-ringkas { display: flex; flex-direction: column; border-radius: 16px; background: var(--card-2); padding: 4px 12px; }
.baris-ringkas { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); animation: muncul-panel .3s ease-out both; }
.baris-ringkas:nth-child(2) { animation-delay: .06s; } .baris-ringkas:nth-child(3) { animation-delay: .12s; } .baris-ringkas:nth-child(4) { animation-delay: .18s; }
.baris-ringkas:last-child { border-bottom: 0; }
.ikon-ringkas { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: var(--card); font-size: 18px; }
.baris-ringkas .isi { flex: 1; min-width: 0; }
.baris-ringkas small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.baris-ringkas b { display: block; font-size: 15px !important; font-weight: 700 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.baris-ringkas.belum b { color: var(--keluar); }
.peringatan-ringkas { margin: 0 !important; padding: 9px 12px; border-radius: 12px; font-size: 13px !important; font-weight: 600;
  color: var(--keluar) !important; background: color-mix(in srgb, var(--keluar) 10%, transparent); }
.aksi-ringkas { display: flex; gap: 10px; margin-top: 2px; }
.aksi-ringkas .btn { flex: 1 !important; padding: 14px; }
.aksi-ringkas .btn-utama { flex: 1.4 !important; }
.kartu-ringkas > .tombol-teks { align-self: center; }
/* Kartu konfirmasi foto struk: nominal + gambar kecil struknya, pilihan total kalau hasil baca berbeda. */
.kepala-ringkas-struk { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.thumb-ringkas { flex: none; width: 56px; height: 56px; padding: 0; overflow: hidden; border-radius: 12px; border: 1px solid var(--line);
  background: none; cursor: zoom-in; }
.thumb-ringkas img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pilih-total-ringkas small { display: block; font-size: 12px; font-weight: 700; color: var(--keluar); margin-bottom: 6px; }
.pilih-total-ringkas .chips { margin: 0; }
.status-ringkas { margin: -4px 0 0 !important; font-size: 13px !important; color: var(--muted); }
.kartu-ringkas .tombol-pecah { margin: 0; }
.struk-proses .tahap-struk { font-weight: 700; color: var(--primary); }

/* Panel suara: baris status + daftar contoh kalimat (disembunyikan saat sudah bicara). */
.kepala-panel-suara { display: flex; align-items: center; gap: 12px; }
.contoh-suara { margin-top: 10px; padding-top: 10px; border-top: 1px dashed color-mix(in srgb, var(--keluar) 30%, transparent); }
.panel-suara[data-tahap="bicara"] .contoh-suara { display: none; }
.contoh-suara > small { display: block; font-size: 11.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; }
.contoh-suara > small i { font-style: normal; font-weight: 600; text-transform: none; letter-spacing: 0; }
.contoh-suara ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 38vh; overflow-y: auto; }
.contoh-suara li button { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.contoh-suara li button:active { border-color: var(--keluar); }
.contoh-suara li span { display: block; font-size: 14px; font-weight: 700; color: var(--text); }
.contoh-suara li em { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.contoh-suara p { margin: 8px 2px 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
.contoh-suara p b { color: var(--text); }

/* ---------- Ilustrasi ikon kategori & dompet (ilustrasi.js) ---------- */
.ilus { display: inline-block; width: 1.3em; height: 1.3em; vertical-align: -.3em; flex: none; }
.ilus-ubin { fill: color-mix(in srgb, var(--c) 16%, var(--card)); }
:root[data-theme="dark"] .ilus-ubin { fill: color-mix(in srgb, var(--c) 30%, var(--card)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ilus-ubin { fill: color-mix(in srgb, var(--c) 30%, var(--card)); } }
.ikon-bulat:has(> .ilus), .bar-item .ikon:has(> .ilus), .ikon-ringkas:has(> .ilus) { background: none; }
.ikon-bulat > .ilus, .bar-item .ikon > .ilus, .ikon-ringkas > .ilus { width: 100%; height: 100%; vertical-align: 0; }
.pilihan span .ilus { width: 34px; height: 34px; vertical-align: 0; }
.grid-ikon button .ilus { width: 32px; height: 32px; vertical-align: middle; }
.chip .ilus { width: 1.45em; height: 1.45em; vertical-align: -.4em; }
/* Baris pengaturan dengan dropdown di kanan (mis. Tema). */
.baris-pilih { cursor: pointer; }
.pilih-kecil { position: relative; flex: none; }
.pilih-kecil select { appearance: none; -webkit-appearance: none; border: 1.5px solid var(--line); background: var(--card-2); color: var(--text);
  font: inherit; font-size: 14px; font-weight: 700; padding: 8px 32px 8px 14px; border-radius: 999px; cursor: pointer; outline: none; }
.pilih-kecil select:focus-visible { border-color: var(--primary); }
.pilih-kecil::after { content: ''; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -6px;
  border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); pointer-events: none; }

/* ---------- Laporan: sorotan, donat, pola belanja ---------- */
.sorotan { display: flex; flex-direction: column; gap: 8px; }
.butir-sorotan { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--card-2); }
/* Dicampur ke putih kartu (bukan abu-abu --card-2) supaya hijau/merahnya segar, tidak kusam */
.butir-sorotan.baik { background: linear-gradient(135deg, color-mix(in srgb, var(--masuk) 15%, var(--card)), color-mix(in srgb, var(--masuk) 6%, var(--card))); }
.butir-sorotan.buruk { background: linear-gradient(135deg, color-mix(in srgb, var(--keluar) 13%, var(--card)), color-mix(in srgb, var(--keluar) 5%, var(--card))); }
.ikon-sorotan { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: var(--card); font-size: 18px; }
.butir-sorotan.baik .isi b { color: color-mix(in srgb, var(--masuk) 80%, var(--text)); }
.butir-sorotan.buruk .isi b { color: color-mix(in srgb, var(--keluar) 80%, var(--text)); }
.ikon-sorotan > .ilus { width: 100%; height: 100%; vertical-align: 0; }
.ikon-sorotan:has(> .ilus) { background: none; }
/* Ikon garis Sorotan: teal untuk butir biasa, hijau/merah mengikuti status butir */
.ikon-sorotan > svg.ik { width: 20px; height: 20px; stroke-width: 2.1; color: var(--primary); }
.butir-sorotan.baik .ikon-sorotan > svg.ik { color: var(--masuk); }
.butir-sorotan.buruk .ikon-sorotan > svg.ik { color: var(--keluar); }
.butir-sorotan .isi { min-width: 0; }
.butir-sorotan b { display: block; font-size: 14px; font-weight: 800; }
.butir-sorotan small { display: block; font-size: 12px; color: var(--muted); }

.donat { display: flex; align-items: center; gap: 16px; margin: 4px 0 14px; }
.donat svg { flex: none; width: 128px; height: 128px; }
.alas-donat { fill: none; stroke: var(--card-2); stroke-width: 14; }
.busur-donat { fill: none; stroke-width: 14; animation: muncul-busur .7s cubic-bezier(.3, .8, .3, 1) both; }
@keyframes muncul-busur { from { stroke-dasharray: 0 999; } }
.donat-label { font-size: 10px; font-weight: 600; fill: var(--muted); }
.donat-nilai { font-size: 15px; font-weight: 800; fill: var(--text); }
.legenda-donat { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.legenda-donat li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.legenda-donat i { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.legenda-donat span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legenda-donat b { font-variant-numeric: tabular-nums; }

.kal-panas { --panas: #f5a524; } /* skala pola belanja: amber (aksen logo), bukan warna pengeluaran */
.kepala-panas, .grid-panas { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.kepala-panas span { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); padding-bottom: 4px; }
.sel-panas { aspect-ratio: 1; min-width: 0; padding: 0; border-radius: 9px; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: var(--muted); background: var(--card-2); }
.sel-panas.kosong { background: none; }
.sel-panas.t1 { background: color-mix(in srgb, var(--panas) 22%, var(--card-2)); color: var(--text); }
.sel-panas.t2 { background: color-mix(in srgb, var(--panas) 45%, var(--card-2)); color: var(--text); }
.sel-panas.t3 { background: color-mix(in srgb, var(--panas) 70%, var(--card-2)); color: #3a2600; }
.sel-panas.t4 { background: var(--panas); color: #3a2600; }
.sel-panas.nanti { opacity: .35; }
.sel-panas.hari-ini { box-shadow: 0 0 0 2px var(--primary); }
.skala-panas { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 8px; }
.skala-panas small { font-size: 11px; color: var(--muted); margin: 0 4px; }
.skala-panas i { width: 14px; height: 14px; border-radius: 4px; background: var(--card-2); }
.skala-panas i.t1 { background: color-mix(in srgb, #f5a524 22%, var(--card-2)); }
.skala-panas i.t2 { background: color-mix(in srgb, #f5a524 45%, var(--card-2)); }
.skala-panas i.t3 { background: color-mix(in srgb, #f5a524 70%, var(--card-2)); }
.skala-panas i.t4 { background: #f5a524; }
.sub-laporan { margin: 18px 0 10px; font-size: 13.5px; font-weight: 800; }
.pola-pekan { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-items: end; }
.pola-pekan div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.nilai-pekan { font-size: 10px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.batang-pekan { width: 100%; max-width: 30px; height: 70px; display: flex; align-items: flex-end; border-radius: 8px; background: var(--card-2); overflow: hidden; }
.batang-pekan i { display: block; width: 100%; border-radius: 8px; background: color-mix(in srgb, var(--primary) 55%, var(--card-2)); animation: tumbuh .6s cubic-bezier(.2, .8, .2, 1) both; transform-origin: 50% 100%; }
.pola-pekan .puncak i { background: var(--primary); }
.pola-pekan .puncak .nilai-pekan { color: var(--primary); }
.pola-pekan small { font-size: 11px; font-weight: 700; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .busur-donat, .batang-pekan i { animation: none; } }

/* Panah ‹ › sebagai ikon SVG (karakter teks duduk di garis dasar font, jadi tidak pas di tengah). */
.panah { display: inline-grid; place-items: center; flex: none; }
.panah svg.ik { width: 18px; height: 18px; color: var(--muted); }
.panah-kecil { display: inline-grid; place-items: center; vertical-align: middle; }
.panah-kecil svg.ik { width: 13px; height: 13px; }
.pemilih-bulan button svg.ik { width: 18px; height: 18px; }
.kal-kepala .tombol-ikon svg.ik, .geser-tanggal svg.ik { width: 20px; height: 20px; }

/* ---------- Dikte suara di form catatan ---------- */
.tombol-dikte { flex: none; width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center;
  background: var(--card-2); color: var(--text); border: 1.5px solid var(--line); }
.tombol-dikte .ik { width: 22px; height: 22px; }
.tombol-dikte.dengar { background: var(--keluar); border-color: var(--keluar); color: #fff; animation: riak-mic 1.3s ease-out infinite; }
.pratinjau-dikte { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 8px 6px 8px 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--keluar) 10%, var(--card)); border: 1.5px solid color-mix(in srgb, var(--keluar) 35%, transparent);
  animation: muncul-panel .2s ease-out; }
.pratinjau-dikte[hidden] { display: none; }
.teks-dikte { flex: 1; min-width: 0; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.teks-dikte b { color: var(--keluar); }
.pratinjau-dikte[data-tahap="bicara"] .teks-dikte { color: var(--text); font-weight: 600; }
.pratinjau-dikte .tombol-teks { flex: none; min-height: 34px; padding: 4px 10px; color: var(--keluar); }
.gelombang-suara.kecil { height: 22px; }
.gelombang-suara.kecil i { width: 3px; }
.pratinjau-dikte .gelombang-suara i { animation: gelombang 1.4s ease-in-out infinite; }
.pratinjau-dikte[data-tahap="bicara"] .gelombang-suara i { animation-duration: .6s; }
.pratinjau-dikte[data-tahap="siap"] .gelombang-suara i { opacity: .35; animation: kedip-kompas 1s ease-in-out infinite; }

/* Kartu ringkasan suara: sedang dipahami AI */
.kartu-ringkas.memahami { gap: 14px; }
.bilah-memahami { height: 6px; border-radius: 6px; background: var(--card-2); overflow: hidden; position: relative; }
.bilah-memahami i { position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: 6px; background: var(--primary); animation: memahami 1.1s ease-in-out infinite; }
@keyframes memahami { 0% { left: -40%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .tombol-dikte.dengar, .bilah-memahami i { animation: none; } }

/* ---------- Geser transaksi (kiri hapus, kanan catat lagi) ---------- */
.trx-geser { position: relative; overflow: hidden; --dx: 0px; touch-action: pan-y; }
.trx-geser > .trx { position: relative; z-index: 1; background: var(--card); transform: translateX(var(--dx)); transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.trx-geser.digeser > .trx { transition: none; }
.latar-geser { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 18px;
  font-size: 13px; font-weight: 800; color: #fff; opacity: 0; transition: opacity .15s; }
.trx-geser.digeser .latar-geser { opacity: 1; }
.trx-geser[data-arah="hapus"] .latar-geser { background: var(--keluar); justify-content: flex-end; }
.trx-geser[data-arah="ulang"] .latar-geser { background: var(--primary); color: var(--on-primary); justify-content: flex-start; }
.trx-geser[data-arah="hapus"] .ulang, .trx-geser[data-arah="ulang"] .hapus { display: none; }
.latar-geser span { transition: transform .15s; }
.trx-geser.lewat .latar-geser span { transform: scale(1.15); }
.trx-geser.terhapus { animation: hapus-trx .3s ease-in forwards; }
@keyframes hapus-trx { to { opacity: 0; max-height: 0; transform: translateX(-30%); } }

/* ---------- Kilas balik bulanan ---------- */
.kilas { position: fixed; inset: 0; z-index: 80; color: #fff; overflow: hidden;
  background: #0b0c10; animation: muncul-panel .3s ease-out; }
.kilas[hidden] { display: none; }
.kilas-bar { position: absolute; top: calc(12px + env(safe-area-inset-top)); left: 14px; right: 14px; z-index: 3; display: flex; gap: 4px; }
.kilas-bar i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.kilas-bar i b { display: block; height: 100%; width: 0; background: #fff; }
.kilas-bar i.lewat b { width: 100%; }
.kilas-bar i.jalan b { animation: jalan-kilas 5s linear forwards; }
.kilas-bar i.jalan:last-child b { animation-duration: .4s; }
@keyframes jalan-kilas { to { width: 100%; } }
.kilas-x { position: absolute; top: calc(24px + env(safe-area-inset-top)); right: 12px; z-index: 4; width: 40px; height: 40px; border-radius: 50%;
  color: #fff; font-size: 18px; background: rgba(255, 255, 255, .12); }
.kilas-panggung { position: absolute; inset: 0; }
.kilas-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 80px 26px 60px;
  opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .35s, transform .45s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.kilas-slide.aktif { opacity: 1; transform: none; z-index: 3; } /* ketukan tembus ke zona maju/mundur di bawahnya */
/* Latar semua slide tetap warna tema (teal); yang berganti per suasana hanya dekorasinya: dua bola cahaya (--k-1, --k-2)
   yang bergerak pelan, titik kilau, dan konfeti untuk hasil bagus. */
.kilas-slide { --k-1: #f5a524; --k-2: #5fb48e;
  background: radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .6) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 82% 12%, rgba(255, 255, 255, .35) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 90% 40%, rgba(255, 255, 255, .35) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 8% 62%, rgba(255, 255, 255, .6) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 70% 78%, rgba(255, 255, 255, .35) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 30% 88%, rgba(255, 255, 255, .35) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 55% 8%, rgba(255, 255, 255, .6) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 94% 86%, rgba(255, 255, 255, .35) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 22% 40%, rgba(255, 255, 255, .35) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 62% 52%, rgba(255, 255, 255, .6) 0 1.5px, transparent 2.5px),
    radial-gradient(130% 90% at 50% 110%, rgba(0, 0, 0, .5), transparent 60%), linear-gradient(165deg, #0e7c86, #073b40 60%, #062a2e); }
.kilas-slide::before, .kilas-slide::after { content: ''; position: absolute; z-index: 0; width: 70vmax; height: 70vmax; border-radius: 50%;
  filter: blur(70px); opacity: .3; pointer-events: none; }
.kilas-slide::before { background: var(--k-1); top: -30vmax; left: -22vmax; animation: bola-kilas 14s ease-in-out infinite alternate; }
.kilas-slide::after { background: var(--k-2); bottom: -34vmax; right: -26vmax; animation: bola-kilas 17s ease-in-out infinite alternate-reverse; }
@keyframes bola-kilas { 50% { transform: translate(8vmax, 6vmax) scale(1.12); } to { transform: translate(-4vmax, 10vmax) scale(.95); } }
.kilas-slide[data-suasana="total"] { --k-1: #fb923c; --k-2: #f43f5e; }
.kilas-slide[data-suasana="top"] { --k-1: #38bdf8; --k-2: #a78bfa; }
.kilas-slide[data-suasana="julukan"] { --k-1: #e879f9; --k-2: #fbbf24; }
.kilas-slide[data-suasana="naik"] { --k-1: #f97316; --k-2: #ef4444; }
.kilas-slide[data-suasana="hemat"], .kilas-slide[data-suasana="rapor-a"] { --k-1: #4ade80; --k-2: #fde047; }
.kilas-slide[data-suasana="sama"], .kilas-slide[data-suasana="rapor-b"] { --k-1: #67e8f9; --k-2: #5fb48e; }
.kilas-slide[data-suasana="rapor-c"] { --k-1: #fbbf24; --k-2: #fb923c; }
.kilas-slide[data-suasana="rapor-d"] { --k-1: #f87171; --k-2: #c084fc; }
.kilas-slide[data-suasana="rapor-netral"] { --k-1: #94a3b8; --k-2: #60a5fa; }
.kilas-slide[data-suasana="naik"] .kilas-angka.keluar { color: #fed7aa; }
.kilas-slide[data-suasana="total"] .kilas-angka.keluar { color: #fff; text-shadow: 0 4px 24px rgba(251, 146, 60, .6); }
/* Dekorasi SVG bertema (lihat dekorKilas di app-interaksi.js). Animasi hanya jalan di slide yang sedang tampil. */
.kilas-dekor { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.kilas-dekor .d1 { fill: var(--k-1); } .kilas-dekor .d2 { fill: var(--k-2); }
.kilas-dekor .dw { fill: #fff; } .kilas-dekor .redup { opacity: .35; }
.kilas-dekor .d-uang { fill: #5fb48e; } .kilas-dekor .d-garis { fill: none; stroke: #2f7f5f; stroke-opacity: .6; stroke-width: 3; }
.kilas-dekor .d-tengah { fill: #2f7f5f; fill-opacity: .55; }
.kilas-dekor .d-garis-gelap { fill: none; stroke: rgba(0, 0, 0, .18); stroke-width: 2; } .kilas-dekor .tebal { stroke-width: 4; stroke-linecap: round; stroke: rgba(0, 0, 0, .35); }
.kilas-dekor .d-tengah-gelap { fill: rgba(0, 0, 0, .35); }
.kilas-dekor .d-rp { font: 800 11px "Plus Jakarta Sans", system-ui, sans-serif; fill: rgba(0, 0, 0, .32); }
.kilas-dekor .d-cincin { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 10; } .kilas-dekor .d-cincin.tipis { stroke-width: 3; stroke: rgba(255, 255, 255, .12); }
.kilas-dekor .d-batang { fill: none; stroke: #2f7f5f; stroke-width: 5; stroke-linecap: round; }
.kilas-dekor .d-batang-latar { fill: rgba(255, 255, 255, .09); } .kilas-dekor .sorot { opacity: .75; }
.kilas-slide[data-suasana="total"] .ag.jatuh { opacity: .55; }
.kilas-dekor .d-garis-naik { fill: none; stroke: var(--k-1); stroke-width: 12; stroke-linejoin: round; stroke-linecap: round; opacity: .85;
  stroke-dasharray: 700; stroke-dashoffset: 0; }
.kilas-dekor .d-gelombang { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 6; stroke-linecap: round; }
.kilas-dekor .ag, .kilas-dekor .batang-tumbuh { transform-box: fill-box; transform-origin: center; }
.kilas-dekor .batang-tumbuh { transform-origin: bottom; }
.kilas-slide.aktif .ag.melayang { animation: dekor-melayang 4.5s ease-in-out infinite alternate; }
.kilas-slide.aktif .ag.putar { animation: dekor-putar 40s linear infinite; }
.kilas-slide.aktif .ag.jatuh { animation: dekor-jatuh 7s linear infinite; }
.kilas-slide.aktif .ag.kerlip { animation: dekor-kerlip 2.6s ease-in-out infinite; }
.kilas-slide.aktif .ag.goyang { transform-origin: bottom; animation: dekor-goyang 3.5s ease-in-out infinite alternate; }
.kilas-slide.aktif .batang-tumbuh { animation: dekor-tumbuh .9s cubic-bezier(.2, .9, .3, 1.2) backwards; }
.kilas-slide.aktif .d-garis-naik { animation: dekor-gambar 1.4s ease-out backwards; }
.kilas-slide.aktif .d-gelombang { animation: dekor-ombak 3s ease-in-out infinite alternate; }
@keyframes dekor-melayang { to { transform: translateY(-14px) rotate(4deg); } }
@keyframes dekor-putar { to { transform: rotate(360deg); } }
@keyframes dekor-jatuh { from { transform: translateY(0) rotate(0); } to { transform: translateY(1000px) rotate(200deg); } }
@keyframes dekor-kerlip { 0%, 100% { opacity: .25; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes dekor-goyang { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes dekor-tumbuh { from { transform: scaleY(0); } }
@keyframes dekor-gambar { from { stroke-dashoffset: 700; } }
@keyframes dekor-ombak { to { transform: translateX(-30px); } }
/* Sinar berputar di belakang nilai rapor, julukan, dan ilustrasi kategori terbesar. */
.kilas .nilai-rapor, .kilas-slide[data-suasana="julukan"] .kilas-emoji, .kilas-ilus { position: relative; }
.kilas .nilai-rapor::before, .kilas-slide[data-suasana="julukan"] .kilas-emoji::before, .kilas-ilus::before {
  content: ''; position: absolute; z-index: -1; inset: -110px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .13) 0 7deg, transparent 7deg 20deg);
  -webkit-mask: radial-gradient(closest-side, #000 35%, transparent); mask: radial-gradient(closest-side, #000 35%, transparent);
  animation: dekor-putar 50s linear infinite; }
.kilas-slide[data-suasana="rapor-a"] .nilai-rapor::before { background: repeating-conic-gradient(from 0deg, rgba(253, 224, 71, .28) 0 7deg, transparent 7deg 20deg); }
.kilas-slide[data-suasana="julukan"] .kilas-emoji::before { inset: -60px; }
.kilas-ilus::before { inset: -50px; }
.kilas-slide[data-suasana="julukan"] .kilas-emoji { width: max-content; margin-left: auto; margin-right: auto; }
/* Konfeti untuk slide hemat & nilai A: jatuh terus selama slide tampil. */
.kilas-konfeti { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.kilas-konfeti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; background: #fde047; opacity: 0; }
.kilas-slide.aktif .kilas-konfeti i { animation: konfeti-kilas 3.2s linear infinite; }
.kilas-konfeti i:nth-child(3n) { background: #f472b6; } .kilas-konfeti i:nth-child(3n+1) { background: #fff; } .kilas-konfeti i:nth-child(4n) { background: #4ade80; width: 6px; height: 6px; border-radius: 50%; }
.kilas-konfeti i:nth-child(1) { left: 6%; animation-delay: 0s; } .kilas-konfeti i:nth-child(2) { left: 14%; animation-delay: 1.1s; }
.kilas-konfeti i:nth-child(3) { left: 22%; animation-delay: .5s; } .kilas-konfeti i:nth-child(4) { left: 30%; animation-delay: 2s; }
.kilas-konfeti i:nth-child(5) { left: 38%; animation-delay: .2s; } .kilas-konfeti i:nth-child(6) { left: 46%; animation-delay: 1.6s; }
.kilas-konfeti i:nth-child(7) { left: 54%; animation-delay: .8s; } .kilas-konfeti i:nth-child(8) { left: 62%; animation-delay: 2.4s; }
.kilas-konfeti i:nth-child(9) { left: 70%; animation-delay: .4s; } .kilas-konfeti i:nth-child(10) { left: 78%; animation-delay: 1.3s; }
.kilas-konfeti i:nth-child(11) { left: 86%; animation-delay: 2.7s; } .kilas-konfeti i:nth-child(12) { left: 94%; animation-delay: .9s; }
.kilas-konfeti i:nth-child(13) { left: 10%; animation-delay: 2.2s; } .kilas-konfeti i:nth-child(14) { left: 66%; animation-delay: 1.9s; }
@keyframes konfeti-kilas { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: .9; transform: translateY(105vh) translateX(30px) rotate(540deg); } }
.kilas-slide.aktif .kilas-aksi { pointer-events: auto; }
.kilas-isi { width: 100%; max-width: 420px; position: relative; z-index: 3; }
.kilas-isi.tengah { text-align: center; }
.kilas-isi small { display: block; font-size: 14px; font-weight: 700; opacity: .7; text-transform: uppercase; letter-spacing: .06em; }
.kilas-isi h2 { margin: 8px 0 6px; font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.kilas-isi p { margin: 10px 0 0; font-size: 16px; line-height: 1.5; opacity: .9; }
.kilas-emoji { display: block; font-size: 64px; margin-bottom: 12px; animation: muncul-cek .6s cubic-bezier(.3, 1.5, .5, 1); }
.kilas-angka { margin: 10px 0 18px; font-size: 46px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kilas-angka.keluar { color: #ffb4a8; } .kilas-angka.masuk { color: #86efac; }
.kilas-baris { display: flex; justify-content: space-between; gap: 10px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 15px; }
.kilas-baris span { opacity: .85; }
.kilas-ilus { width: 110px; height: 110px; margin: 14px 0 4px; animation: muncul-cek .6s cubic-bezier(.3, 1.5, .5, 1); }
.kilas-ilus .ilus { width: 100%; height: 100%; }
.kilas-ilus .ilus-ubin { fill: rgba(255, 255, 255, .14); }
.kilas-aksi { display: flex; gap: 10px; margin-top: 26px; position: relative; z-index: 5; }
.kilas-aksi .btn { flex: 1; }
.kilas-aksi .btn-hapus { background: rgba(255, 255, 255, .14); color: #fff; }
.kilas-zona { position: absolute; top: 70px; bottom: 0; z-index: 2; width: 35%; background: none; }
.kilas-zona.kiri { left: 0; } .kilas-zona.kanan { right: 0; width: 65%; }
.kepala-kartu { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.kepala-kartu h3 { margin: 0; }
.chip-kilas { flex: none; font-size: 12px; padding: 6px 12px; min-height: 32px; }
@media (prefers-reduced-motion: reduce) { .kilas-slide, .kilas-emoji, .kilas-ilus, .kilas-slide::before, .kilas-slide::after, .kilas-dekor *, .kilas .nilai-rapor::before, .kilas-emoji::before, .kilas-ilus::before { transition: none; animation: none !important; } .kilas-konfeti { display: none; } .kilas-bar i.jalan b { animation: none; width: 100%; } }

/* Kartu suara berisi beberapa transaksi */
.daftar-banyak { display: flex; flex-direction: column; border-radius: 16px; background: var(--card-2); padding: 2px 6px 2px 10px; max-height: 46vh; overflow-y: auto; }
.baris-banyak { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); animation: muncul-panel .3s ease-out both; }
.baris-banyak:last-child { border-bottom: 0; }
.baris-banyak .isi { flex: 1; min-width: 0; }
.baris-banyak .isi b { display: block; font-size: 14px !important; font-weight: 700 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.baris-banyak .isi small { display: block; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.baris-banyak.belum .isi small { color: var(--keluar); }
.baris-banyak .nominal { flex: none; font-size: 14px !important; }
.buang-banyak { flex: none; width: 30px; height: 30px; border-radius: 50%; color: var(--muted); font-size: 13px; }
.buang-banyak:active { background: var(--card); }
.total-banyak { display: flex; justify-content: space-between; padding: 0 4px; font-size: 14px; }
.total-banyak b { font-variant-numeric: tabular-nums; }
/* Kartu ringkasan tidak boleh melebar karena teks panjang (grid item default min-width: auto). */
.ringkas-suara { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.kartu-ringkas, .daftar-banyak, .daftar-ringkas { min-width: 0; width: 100%; }

/* Saran transaksi rutin di Beranda */
.kartu-saran { display: flex; gap: 12px; align-items: flex-start; background: color-mix(in srgb, var(--primary) 8%, var(--card)); border-color: color-mix(in srgb, var(--primary) 25%, var(--line)); }
.kartu-saran .isi { flex: 1; min-width: 0; }
.kartu-saran small { display: block; font-size: 12px; font-weight: 800; color: var(--primary); }
.kartu-saran b { display: block; font-size: 15px; margin: 2px 0; }
.kartu-saran .isi > span { display: block; font-size: 13px; color: var(--muted); line-height: 1.45; }
.aksi-saran { display: flex; gap: 8px; margin-top: 10px; }
.aksi-saran .chip { min-height: 34px; padding: 6px 14px; font-size: 13px; }

/* Tombol pecah struk per kategori */
.tombol-pecah { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; margin-top: 10px; padding: 12px 14px; border-radius: 16px;
  background: color-mix(in srgb, var(--primary) 10%, var(--card-2)); border: 1.5px dashed color-mix(in srgb, var(--primary) 45%, transparent); }
.ikon-pecah { font-size: 22px; }
.tombol-pecah .isi { flex: 1; min-width: 0; }
.tombol-pecah b { display: block; font-size: 14px; color: var(--primary); }
.tombol-pecah small { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Kerangka memuat (skeleton) ---------- */
.kerangka i { display: block; background: var(--card-2); border-radius: 12px; position: relative; overflow: hidden; }
.kerangka i::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--card) 70%, transparent), transparent); animation: kilau-kerangka 1.3s ease-in-out infinite; }
@keyframes kilau-kerangka { to { transform: translateX(100%); } }
.k-kepala { display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; }
.k-kepala > div { flex: 1; display: grid; gap: 6px; }
.k-bulat { width: 44px; height: 44px; border-radius: 50% !important; flex: none; }
.k-bulat.kecil { width: 40px; height: 40px; }
.k-garis { height: 12px; width: 70%; }
.k-garis.tebal { height: 18px; }
.k-pil { width: 120px; height: 38px; border-radius: 999px !important; }
.k-kartu { height: 190px; border-radius: 26px !important; margin-bottom: 16px; }
.k-pintasan { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 16px; }
.k-pintasan i { aspect-ratio: 1; border-radius: 16px; }
.k-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.k-bento i { height: 104px; border-radius: 20px; }
.k-daftar { display: grid; gap: 14px; }
.k-daftar > div { display: flex; align-items: center; gap: 12px; }
.k-daftar .k-garis { flex: 1; }
/* Garis tipis berjalan di atas layar saat data terakhir sedang diperbarui */
.bilah-segar { position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: 3px; overflow: hidden; background: color-mix(in srgb, var(--primary) 18%, transparent); }
.bilah-segar i { position: absolute; top: 0; bottom: 0; width: 35%; background: var(--primary); border-radius: 3px; animation: memahami 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .kerangka i::after, .bilah-segar i { animation: none; } }

/* ---------- Aktivitas keluarga ---------- */
.kartu-aktivitas { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; color: var(--text); }
.kartu-aktivitas .isi { flex: 1; min-width: 0; }
.kartu-aktivitas b { display: block; font-size: 14.5px; }
.kartu-aktivitas small { display: block; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kartu-aktivitas small.lagi { color: var(--primary); font-weight: 700; }
.daftar-aktivitas { display: flex; flex-direction: column; }
.baris-aktivitas { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.baris-aktivitas:last-child { border-bottom: 0; }
.ikon-aksi { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: var(--card-2); font-size: 16px; }
.baris-aktivitas.hapus .ikon-aksi { background: color-mix(in srgb, var(--keluar) 14%, var(--card-2)); }
.baris-aktivitas.ubah .ikon-aksi { background: color-mix(in srgb, #f59e0b 16%, var(--card-2)); }
.baris-aktivitas .isi { flex: 1; min-width: 0; }
.baris-aktivitas .isi small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.baris-aktivitas .waktu { flex: none; font-size: 11.5px; color: var(--muted); white-space: nowrap; }

/* ---------- Ukuran tampilan (Lainnya → Ukuran tampilan) ---------- */
html[data-ukuran="besar"] body { zoom: 1.12; }
html[data-ukuran="sangat"] body { zoom: 1.25; }
/* Halaman sholat yang pas satu layar: tinggi dibagi zoom supaya tetap muat */
html[data-ukuran="besar"] .hal-sholat { height: calc((100dvh - 14px) / 1.12); }
html[data-ukuran="sangat"] .hal-sholat { height: calc((100dvh - 14px) / 1.25); }

/* ---------- Log update (Apa yang baru) ---------- */
.daftar-log { display: flex; flex-direction: column; gap: 8px; }
.tanggal-log { margin: 10px 2px 2px; font-size: 12.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.item-log { position: relative; padding: 12px 14px; border-radius: 16px; background: var(--card-2); }
.item-log.ini { background: color-mix(in srgb, var(--primary) 10%, var(--card-2)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--primary) 40%, transparent); }
.versi-log { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--card); font-size: 11.5px; font-weight: 800; color: var(--primary); }
.lencana-log { position: absolute; top: 12px; right: 12px; font-size: 11px; font-weight: 800; color: var(--primary); }
.item-log ul { margin: 8px 0 0; padding-left: 18px; }
.item-log li { font-size: 13.5px; line-height: 1.5; margin-bottom: 3px; }

/* Catat sekali ketuk (Beranda) */
.sekali-ketuk { margin: -2px 0 14px; }
.sekali-ketuk > small { display: block; margin: 0 2px 6px; font-size: 12px; font-weight: 800; color: var(--muted); }
.sekali-ketuk .chips { margin-bottom: 0; }
.chip-ketuk { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: transform .15s; }
.chip-ketuk .ilus { width: 1.6em; height: 1.6em; }
.chip-ketuk b { color: var(--primary); font-weight: 800; }
.chip-ketuk:active { transform: scale(.95); }
.chip-ketuk.mengirim { opacity: .55; }
/* Saran anggaran */
.saran-anggaran { display: table; white-space: nowrap; margin: 3px 0 2px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 800;
  color: var(--primary); background: var(--primary-soft); }
.saran-anggaran small { font-weight: 600; color: var(--muted); }

/* Pencarian global */
.tombol-cari { width: 38px; height: 38px; box-shadow: none; }
.tombol-cari .ik { width: 19px; height: 19px; }
.kotak-cari-global { margin-bottom: 12px; }
.tgl-cari { display: block; margin: 8px 0 -6px; font-size: 11px; font-weight: 700; color: var(--muted); }
/* Petunjuk sekali lihat */
.petunjuk { position: fixed; z-index: 90; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 14px;
  background: var(--text); color: var(--bg); font-size: 13px; line-height: 1.4; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); animation: muncul-panel .25s ease-out; }
.petunjuk::before { content: ''; position: absolute; left: var(--panah); width: 12px; height: 12px; margin-left: -6px; background: var(--text); transform: rotate(45deg); }
.petunjuk.bawah::before { top: -5px; } .petunjuk.atas::before { bottom: -5px; }
.petunjuk span { flex: 1; position: relative; }
.petunjuk button { flex: none; position: relative; padding: 6px 10px; border-radius: 10px; font-size: 12px; font-weight: 800; color: var(--bg); background: color-mix(in srgb, var(--bg) 18%, transparent); }
.trx-geser.contoh-geser > .trx { animation: contoh-geser 2.4s ease-in-out; }
.trx-geser.contoh-geser .latar-geser { opacity: 1; animation: contoh-latar 2.4s steps(1) both; }
@keyframes contoh-geser { 0%, 100% { transform: none; } 20%, 35% { transform: translateX(-80px); } 55% { transform: none; } 70%, 85% { transform: translateX(80px); } }
@keyframes contoh-latar { 0% { background: var(--keluar); justify-content: flex-end; } 50% { background: var(--primary); justify-content: flex-start; } }
.trx-geser.contoh-geser .ulang, .trx-geser.contoh-geser .hapus { display: inline; }
/* Tabungan: perkiraan & konfeti */
.perkiraan-tabungan { margin: 0 0 16px; padding: 10px 12px; border-radius: 14px; background: var(--primary-soft); font-size: 13px; line-height: 1.5; }
.perkiraan-tabungan.telat { background: color-mix(in srgb, var(--waspada) 11%, var(--card-2)); }
.konfeti { position: fixed; inset: 0; z-index: 95; pointer-events: none; overflow: hidden; }
.konfeti i { position: absolute; top: -40px; left: var(--x); font-style: normal; font-size: 24px; animation: jatuh-konfeti 2.6s ease-in var(--t) forwards; }
@keyframes jatuh-konfeti { to { transform: translateY(110vh) rotate(var(--r)); opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .konfeti, .trx-geser.contoh-geser > .trx { display: none; animation: none; } }

/* ---------- Transaksi mirip (dobel) ---------- */
.peringatan-mirip { display: flex; gap: 12px; align-items: flex-start; padding: 12px; margin: 4px 0 12px; border-radius: 16px;
  background: color-mix(in srgb, var(--waspada) 11%, var(--card)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--waspada) 40%, transparent);
  animation: goyang-mirip .4s ease; }
.peringatan-mirip .ikon-bulat { width: 40px; height: 40px; }
.peringatan-mirip .isi { flex: 1; min-width: 0; }
.peringatan-mirip b { display: block; font-size: 14px; }
.peringatan-mirip small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.peringatan-mirip small b { display: inline; font-size: inherit; color: var(--text); }
@keyframes goyang-mirip { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* ---------- Detail transaksi ---------- */
.detail-kepala { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 4px 0 14px; }
.ikon-bulat.besar { width: 64px; height: 64px; border-radius: 22px; font-size: 30px; margin-bottom: 6px; }
.detail-judul { font-size: 15px; font-weight: 700; color: var(--muted); }
.detail-nominal { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.detail-nominal.keluar { color: var(--keluar); }
.detail-nominal.masuk { color: var(--masuk); }
.detail-catatan { margin: 6px 0 0; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.label-trx { color: var(--primary); font-weight: 800; }
.detail-foto { display: grid; place-items: center; width: 100%; min-height: 120px; max-height: 260px; margin: 0 0 14px; padding: 0; border-radius: 18px;
  overflow: hidden; background: var(--card-2); }
.detail-foto img { width: 100%; max-height: 260px; object-fit: cover; display: block; }
.muat-foto-kecil { font-size: 13px; font-weight: 700; color: var(--muted); padding: 20px; animation: kedip 1.2s ease-in-out infinite; }
.kartu-detail { background: var(--card-2); border-radius: 18px; padding: 4px 14px; margin-bottom: 14px; }
.baris-detail { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.baris-detail:last-child { border-bottom: 0; }
.baris-detail span { color: var(--muted); flex: none; }
.baris-detail b { text-align: right; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.judul-kecil { margin: 14px 2px 8px; font-size: 12.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.aksi-detail { display: flex; gap: 8px; margin-top: 16px; }
.aksi-detail .btn { padding: 14px 10px; }
.btn-kedua { background: var(--card-2); color: var(--text); }

/* ---------- Klip lampiran di daftar transaksi ---------- */
.klip-trx { display: inline-grid; place-items: center; min-width: 26px; height: 22px; margin: -3px 5px -3px 0; padding: 0 4px; border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 14%, var(--card-2)); font-size: 12px; vertical-align: middle; cursor: pointer; }
.klip-trx:active { transform: scale(.92); }

/* ---------- Pilih banyak ---------- */
.trx, .trx-geser { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.centang-pilih { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 900;
  border: 2px solid color-mix(in srgb, var(--muted) 60%, transparent); color: var(--on-primary); transition: all .15s; }
.trx-geser.dipilih > .trx { background: color-mix(in srgb, var(--primary) 9%, var(--card)); }
.trx-geser.dipilih .centang-pilih { background: var(--primary); border-color: var(--primary); animation: pop-centang .2s ease; }
@keyframes pop-centang { 50% { transform: scale(1.2); } }
.bar-pilih { position: fixed; left: 50%; transform: translateX(-50%); z-index: 25; width: calc(100% - 24px); max-width: 496px;
  bottom: calc(var(--nav-h) + 22px + env(safe-area-inset-bottom)); padding: 10px 12px 12px; border-radius: 22px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-up); animation: muncul-bar .25s cubic-bezier(.2, .8, .2, 1); }
@keyframes muncul-bar { from { opacity: 0; transform: translate(-50%, 14px); } }
.atas-pilih { display: flex; align-items: center; gap: 10px; }
.atas-pilih .tombol-ikon { width: 34px; height: 34px; box-shadow: none; }
.atas-pilih .isi { flex: 1; min-width: 0; }
.atas-pilih b { display: block; font-size: 15px; }
.atas-pilih small { display: block; font-size: 12px; color: var(--muted); }
.tombol-pilih { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.tombol-pilih button { padding: 11px 6px; border-radius: 14px; background: var(--card-2); font-weight: 800; font-size: 13.5px; }
.tombol-pilih button.hapus { color: var(--keluar); }
.tombol-pilih button:disabled { opacity: .45; }
body.mode-pilih #view { padding-bottom: calc(var(--nav-h) + 150px + env(safe-area-inset-bottom)); }
body.mode-pilih .antrian { display: none; }

/* ---------- Label (#acara) ---------- */
.chip-label { margin-top: 8px; flex-wrap: wrap; }
.chip-label .chip { padding: 6px 12px; font-size: 13px; color: var(--primary); }
.chip-label .chip-label-baru { color: var(--muted); border-style: dashed; }
.daftar-label { display: flex; flex-direction: column; gap: 8px; }
.item-label { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border-radius: 16px; background: var(--card-2); }
.item-label .isi { flex: 1; min-width: 0; }
.item-label b { display: block; font-size: 15px; color: var(--primary); }
.item-label small { display: block; font-size: 12px; color: var(--muted); }
.item-label .nominal { font-weight: 800; }
.meter-label { margin-top: 6px; }
.meter-label .bar { height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--muted) 20%, transparent); overflow: hidden; }
.meter-label .bar i { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.meter-label.hampir .bar i { background: var(--waspada); }
.meter-label.lewat .bar i { background: var(--keluar); }
.meter-label small { margin-top: 4px; }

/* ---------- Kalender Riwayat ---------- */
.tombol-ikon.aktif { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.kalender-riwayat { padding: 12px; }
.hari-kal { position: relative; aspect-ratio: 1 / 1.05; min-width: 0; border-radius: 12px; padding: 4px 2px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px; background: var(--card-2); font-weight: 700; font-size: 13.5px; }
.hari-kal small { font-size: 9.5px; font-weight: 800; line-height: 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Sama dengan skala Pola belanja harian (.sel-panas): amber, aksen logo */
.hari-kal.t1, .kal-legenda .t1 { background: color-mix(in srgb, #f5a524 22%, var(--card-2)); }
.hari-kal.t2, .kal-legenda .t2 { background: color-mix(in srgb, #f5a524 45%, var(--card-2)); }
.hari-kal.t3, .kal-legenda .t3 { background: color-mix(in srgb, #f5a524 70%, var(--card-2)); color: #3a2600; }
.hari-kal.t4, .kal-legenda .t4 { background: #f5a524; color: #3a2600; }
.hari-kal.nanti { opacity: .45; }
.hari-kal.ini { box-shadow: inset 0 0 0 2px var(--primary); }
.hari-kal.pilih { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--primary); transform: scale(1.04); z-index: 1; }
.titik-masuk { width: 5px; height: 5px; border-radius: 50%; background: var(--masuk); }
.kal-legenda { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 10px; font-size: 11px; color: var(--muted); font-weight: 700; }
.kal-legenda i { width: 14px; height: 14px; border-radius: 4px; }
.kal-legenda span { margin: 0 4px; }

/* ---------- Banding periode lalu (Beranda) ---------- */
.baris-banding { margin-top: 8px; padding: 9px 12px; border-radius: 14px; font-size: 12.5px; line-height: 1.4;
  background: color-mix(in srgb, var(--text) 6%, transparent); }
.baris-banding.hemat b { color: var(--masuk); }
.baris-banding.boros b { color: var(--keluar); }

/* ---------- Progres unggah foto ---------- */
.bar-unggah { display: block; height: 4px; margin-top: 5px; border-radius: 99px; background: color-mix(in srgb, var(--muted) 20%, transparent); overflow: hidden; }
.bar-unggah i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--primary); transition: width .3s ease; }

/* ---------- Tur singkat ---------- */
.tur { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px;
  background: color-mix(in srgb, #000 55%, transparent); backdrop-filter: blur(4px); animation: muncul .25s ease; }
.tur[hidden] { display: none; }
.kartu-tur { width: 100%; max-width: 380px; padding: 28px 22px 18px; border-radius: 28px; background: var(--card); text-align: center; box-shadow: var(--shadow-up);
  animation: masuk-tur .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes masuk-tur { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.ilus-tur { width: 96px; height: 96px; margin: 0 auto 14px; border-radius: 32px; display: grid; place-items: center; font-size: 48px;
  background: color-mix(in srgb, var(--primary) 14%, var(--card-2)); animation: ayun-tur 2.4s ease-in-out infinite; }
@keyframes ayun-tur { 50% { transform: translateY(-6px) rotate(-4deg); } }
.kartu-tur h2 { margin: 0 0 8px; font-size: 20px; }
.kartu-tur p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.titik-tur { display: flex; justify-content: center; gap: 6px; margin: 18px 0 14px; }
.titik-tur i { width: 7px; height: 7px; border-radius: 99px; background: color-mix(in srgb, var(--muted) 35%, transparent); transition: all .2s; }
.titik-tur i.aktif { width: 22px; background: var(--primary); }
.aksi-tur { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.aksi-tur .btn { flex: 0 0 auto; padding: 13px 26px; }
@media (prefers-reduced-motion: reduce) { .ilus-tur, .peringatan-mirip, .kartu-tur { animation: none; } }

/* ---------- Kartu konfirmasi: isian bisa dilengkapi ---------- */
.kartu-ringkas { max-height: calc(100dvh - 32px - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
.kartu-ringkas.diam, .kartu-ringkas.diam .baris-ringkas, .kartu-ringkas.diam .nominal-ringkas { animation: none; }
button.nominal-ringkas { display: block; width: 100%; text-align: left; padding: 0; background: none; color: inherit; }
button.nominal-ringkas.keluar { color: var(--keluar); } button.nominal-ringkas.masuk { color: var(--masuk); } button.nominal-ringkas.belum { color: var(--muted); }
.nominal-struk { flex: 1; min-width: 0; }
.isi-jumlah-ringkas { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: var(--card-2);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 45%, transparent); }
.isi-jumlah-ringkas span { font-weight: 800; color: var(--muted); }
.isi-jumlah-ringkas input { flex: 1; min-width: 0; border: 0; background: none; font-size: 20px; font-weight: 800; color: var(--text); outline: none; }
.baris-ringkas.bisa-ubah { width: 100%; text-align: left; color: inherit; background: none; }
.ubah-ringkas { flex: none; font-size: 12.5px; font-weight: 800; color: var(--primary); }
.baris-ringkas.belum .ubah-ringkas { color: var(--keluar); }
.pilih-ringkas { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 12px; border-bottom: 1px solid var(--line); max-height: 220px; overflow-y: auto; }
.pilih-ringkas .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; font-size: 13px; }
.ilus-chip { width: 24px; height: 24px; display: grid; place-items: center; font-size: 15px; }
.ilus-chip svg, .ilus-chip img { width: 24px; height: 24px; }
.pilih-ringkas .field { width: 100%; }
.pilih-label { width: 100%; margin-top: 2px; padding: 6px 28px 6px 0; border: 0; background: transparent; font: inherit; font-size: 15px; font-weight: 700; color: var(--text);
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.pilih-label option { color: #111; }
.label-baru-ringkas { align-items: center; flex-wrap: nowrap; }
.label-baru-ringkas > span { font-weight: 800; color: var(--primary); font-size: 17px; }
.label-baru-ringkas .field { flex: 1; min-width: 0; }

/* ---------- Penyempurnaan UX (nav Dompet, Beranda ringkas, form pendek, Pengaturan, Tips) ---------- */
/* Kartu saldo: Pemasukan/Pengeluaran bisa diketuk untuk rincian periode */
button.ringkas { width: 100%; text-align: left; }
button.ringkas:active > div { background: rgba(255, 255, 255, .15); }
.ringkas > div { position: relative; }
.lencana-banding { position: absolute; top: -8px; right: 10px; display: inline-block; padding: 0 6px; border-radius: 99px; font-size: 10.5px; font-weight: 800; line-height: 16px; opacity: 1; }
.lencana-banding.hemat { background: #14523d; color: #86efc0; border: 1px solid #2f7d5f; }
.lencana-banding.boros { background: #5a2219; color: #ffb4a8; border: 1px solid #8a3a2c; }
.kartu-saldo .tautan-putih, .kartu-saldo > .selisih { margin-top: 12px; }
.kartu-saldo .tautan-putih { display: block; border-radius: 14px; line-height: 1.4; }

/* Pintasan: tombol Atur lebih pudar daripada pintasan */
.aksi-cepat .atur-pintasan { color: var(--muted); }
.aksi-cepat .atur-pintasan .kotak { color: var(--muted); background: transparent; border-style: dashed; box-shadow: none; }
.ikon-pintasan { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--card); color: var(--primary); }
.ikon-pintasan .urutan { position: absolute; top: -5px; right: -7px; min-width: 18px; height: 18px; border-radius: 99px; background: var(--primary); color: #fff; font-style: normal; font-size: 11px; font-weight: 800; display: grid; place-items: center; }

/* Form catat */
.chips-struk { margin: -2px 0 14px; }
.chips-struk .chip { min-height: 36px; padding: 6px 13px; }
.chips-tanggal { margin-bottom: 8px; }
.tanggal-lain { margin-top: 2px; }
.tombol-opsi-lain { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left; padding: 12px 14px; margin: 0 0 14px; border-radius: 14px; border: 1.5px dashed var(--line); color: var(--primary); font-weight: 700; }
.tombol-opsi-lain small { color: var(--muted); font-weight: 500; font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tombol-opsi-lain.buka { border: 0; padding: 4px 0 10px; margin: 0; }
.tombol-opsi-lain:disabled { cursor: default; color: var(--text); }
.opsi-lain { border-top: 1px solid var(--line); padding-top: 8px; margin-bottom: 6px; }

/* Pemilih ikon dompet berkelompok */
.sub-ikon { display: block; margin: 12px 0 -2px; font-size: 12px; font-weight: 700; color: var(--muted); }
.sub-ikon:first-child { margin-top: 2px; }

/* Pengaturan → Akun */
.kartu-akun { padding: 4px 16px 14px; }
.kartu-akun .baris { border-bottom: 0; }
.btn-keluar { width: 100%; flex: none; color: var(--keluar); background: color-mix(in srgb, var(--keluar) 10%, var(--card)); border: 1px solid color-mix(in srgb, var(--keluar) 30%, transparent); }
.kartu-akun .info-kecil { margin: 8px 0 0; }

/* Tips & trik */
.daftar-tips { display: flex; flex-direction: column; }
.tip { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.tip:last-child { border-bottom: 0; }
.tip .isi { flex: 1; min-width: 0; }
.tip .isi p { margin: 3px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.tip .tombol-teks { min-height: 36px; padding: 6px 0; }

/* Cari fitur & kartu sesi */
.baris-fitur { padding: 9px 0; }
.sesi-ikon { font-size: 30px; line-height: 1; }

/* Kalender Riwayat: seret transaksi ke hari lain */
.hantu-seret { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-radius: 16px; background: var(--card); border: 1.5px solid var(--primary); box-shadow: 0 16px 36px rgba(0, 0, 0, .35); opacity: .97; will-change: transform; }
.hantu-seret .trx-isi { flex: 1; min-width: 0; }
.hantu-seret .tujuan-seret { position: absolute; left: 14px; top: -14px; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 800;
  background: var(--card-2); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.hantu-seret.ada-tujuan .tujuan-seret { background: var(--primary); color: #fff; border-color: var(--primary); }
.trx-geser.diseret { opacity: .35; }
body.sedang-seret { user-select: none; -webkit-user-select: none; }
body.sedang-seret .hari-kal { transition: transform .12s, box-shadow .12s; }
.hari-kal.tujuan { transform: scale(1.12); box-shadow: inset 0 0 0 2.5px var(--primary), 0 6px 16px rgba(0, 0, 0, .25); z-index: 2; }
.daftar-hari-kal .trx-geser { -webkit-touch-callout: none; }
.trx-geser.diseret .latar-geser { visibility: hidden; }
.hantu-seret { padding: 8px 12px; gap: 10px; }
.hantu-seret .ikon-bulat { width: 36px; height: 36px; }
.hantu-seret .trx-isi small { display: none; }

/* Bar aksi pilih banyak: warna gelap seperti kartu saldo supaya kontras dengan kartu transaksi di belakangnya */
.bar-pilih { color: #fff; border: 1px solid rgba(255, 255, 255, .14);
  background: radial-gradient(120% 120% at 100% 0%, rgba(45, 212, 191, .4), transparent 60%), linear-gradient(140deg, var(--hero-1), var(--hero-2));
  box-shadow: 0 18px 40px rgba(15, 12, 45, .45), 0 2px 8px rgba(15, 12, 45, .25); }
.atas-pilih small { color: rgba(255, 255, 255, .72); }
.atas-pilih .tombol-ikon { background: rgba(255, 255, 255, .14); border: 0; color: #fff; }
.atas-pilih .tombol-teks { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.tombol-pilih button { background: rgba(255, 255, 255, .13); color: #fff; border: 1px solid rgba(255, 255, 255, .1); }
.tombol-pilih button:active { background: rgba(255, 255, 255, .22); }
.tombol-pilih button.hapus { background: var(--keluar); border-color: transparent; color: #fff; }
/* Lapisan pudar di bawah layar: daftar yang bergulir di belakang bar tidak bertabrakan dengannya */
body.mode-pilih::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; pointer-events: none;
  height: calc(var(--nav-h) + 190px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) 45%, transparent); }

/* ---------- Laporan: periode rincian, kategori bisa diketuk, anggaran vs realisasi, AI, cetak ---------- */
.pemilih-periode-lap { display: flex; align-items: center; gap: 8px; margin: 22px 0 12px; padding: 6px; border-radius: 18px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.pemilih-periode-lap span { flex: 1; min-width: 0; text-align: center; }
.pemilih-periode-lap small { display: block; font-size: 11px; font-weight: 600; color: var(--muted); }
.pemilih-periode-lap b { display: block; font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pemilih-periode-lap button { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--text); background: var(--card-2); }
.pemilih-periode-lap button:disabled { opacity: .35; }
.bar-item.bisa-ketuk { width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 12px; }
.bar-item.bisa-ketuk:active { background: var(--card-2); }
.pemisah-chip { flex: none; width: 1px; margin: 6px 2px; background: var(--line); }
.grafik .garis-batas { stroke: var(--text); stroke-width: 1.2; stroke-dasharray: 4 3; opacity: .55; }
.banding > span:last-child small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }

.daftar-anggaran-lap { display: flex; flex-direction: column; }
.baris-anggaran-lap { display: grid; grid-template-columns: 36px 1fr auto; gap: 4px 12px; align-items: center; width: 100%; padding: 10px 0;
  border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.baris-anggaran-lap:last-child { border-bottom: 0; }
.baris-anggaran-lap .ikon { grid-row: span 2; width: 36px; height: 36px; border-radius: 12px; background: var(--card-2); display: grid; place-items: center; font-size: 18px; }
.baris-anggaran-lap .ikon:has(> .ilus) { background: none; }
.baris-anggaran-lap .isi { min-width: 0; }
.baris-anggaran-lap .isi b { display: block; font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.baris-anggaran-lap .isi small { display: block; font-size: 12px; color: var(--muted); }
.baris-anggaran-lap .nilai { font-size: 13px; font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.baris-anggaran-lap .nilai small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); }
.strip-anggaran { grid-column: 2 / 4; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; }
.strip-anggaran i, .legenda-anggaran i { display: block; height: 10px; border-radius: 3px; background: var(--card-2); }
.strip-anggaran i.aman, .legenda-anggaran i.aman { background: color-mix(in srgb, var(--masuk) 70%, var(--card)); }
.strip-anggaran i.hampir, .legenda-anggaran i.hampir { background: var(--status-warning); }
.strip-anggaran i.lewat, .legenda-anggaran i.lewat { background: var(--keluar); }
.strip-anggaran i.nanti { background: none; border: 1px dashed var(--line); }
.strip-anggaran i.dipilih { outline: 2px solid var(--text); outline-offset: 1px; }
.legenda-anggaran { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 11px; color: var(--muted); }
.legenda-anggaran i { width: 14px; flex: none; }
.legenda-anggaran small { margin-right: 6px; }

.ringkas-ai { margin: 0 0 10px; padding: 12px 14px; border-radius: 14px; background: var(--primary-soft); }
.ringkas-ai p { margin: 0; font-size: 14px; line-height: 1.55; }
.ringkas-ai small { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 11px; color: var(--muted); }
.ringkas-ai .tombol-teks { min-height: 32px; padding: 4px 0; font-size: 12px; }
body.samar #view .ringkas-ai p, body.samar #view .baris-anggaran-lap .nilai, body.samar #view .butir-sorotan b { filter: blur(6px); }

.aksi-laporan { display: grid; gap: 10px; margin: 18px 0 8px; }
.aksi-laporan .tombol-tambah { margin: 0; }
.judul-cetak { display: none; }

@media print {
  @page { margin: 14mm; }
  :root { --bg: #fff; --card: #fff; --card-2: #f1f2f6; --text: #0c111d; --muted: #555; --line: #ddd; --shadow: none; }
  html, body { background: #fff !important; color: #000; }
  body * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  #nav, .fab, #sheet, #toast, .loading, .aksi-laporan, .pemilih-bulan button, .pemilih-periode-lap button, .titik-grafik, .chip-kilas,
  #view .tombol-tambah, #view [data-aksi="buka-label"], #view [data-aksi="atur-anggaran"], .ringkas-ai .tombol-teks, .kerangka { display: none !important; }
  #view { padding: 0 !important; max-width: none !important; }
  .judul-cetak { display: block; margin: 0 0 10px; font-size: 12px; color: #555; }
  .kartu, .tile, .pemilih-periode-lap { box-shadow: none !important; break-inside: avoid; }
  .geser-grafik { overflow: visible !important; display: block !important; }
  .slide-grafik:not(:first-child) { display: none !important; }
  .grafik * { animation: none !important; }
  .grafik .tumbuh { transform: none !important; }
  .grafik .garis { stroke-dashoffset: 0 !important; }
  .grafik .area { opacity: .1 !important; }
  .grafik .titik { opacity: 1 !important; }
  body.samar #view * { filter: none !important; }
}

/* ==========================================================================
   Fitur anak muda & pasangan baru (muda.js)
   ========================================================================== */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Tipografi angka: "Rp" kecil, angka tebal & rapat ---------- */
.besar, .kd-saldo, .kekayaan { font-feature-settings: "tnum" 1, "lnum" 1; }
.kartu-saldo .besar { font-size: 36px; letter-spacing: -.035em; line-height: 1.05; }
.mata-uang { font-size: .5em; font-weight: 700; letter-spacing: 0; margin-right: .18em; opacity: .7; vertical-align: .62em; }

/* ---------- Mikro-animasi ---------- */
/* Lembar bawah menutup dengan meluncur turun (salinan tampilan, lihat tutupSheet di muda.js). */
.sheet-hantu { pointer-events: none; z-index: 21; }
.sheet-hantu .sheet-bg { animation: pudar-keluar .24s ease-in forwards; }
.sheet-hantu .sheet-panel { animation: turun .24s cubic-bezier(.4, 0, .9, .6) forwards; }
@keyframes turun { from { transform: translate(-50%, 0); } to { transform: translate(-50%, 100%); } }
@keyframes pudar-keluar { to { opacity: 0; } }
/* Umpan balik tekan */
:is(.insight, .kartu-dompet, .chip-streak, .bento > button, .kartu-tantangan-beranda, .hari-streak) { transition: transform .15s cubic-bezier(.2, .8, .2, 1); }
:is(.insight, .kartu-dompet, .chip-streak, .bento > button, .kartu-tantangan-beranda, .hari-streak:not(:disabled)):active { transform: scale(.97); }

/* ---------- Maskot Dompi ---------- */
.maskot { width: 100%; height: 100%; display: block; overflow: visible; }
.maskot-badan { transform-box: fill-box; transform-origin: 50% 100%; animation: napas-maskot 3.2s ease-in-out infinite; }
.maskot-senang .maskot-badan, .maskot-bangga .maskot-badan { animation: lompat-maskot 2.4s ease-in-out infinite; }
.maskot-cemas .maskot-badan { animation: gelisah-maskot 1.6s ease-in-out infinite; }
@keyframes napas-maskot { 50% { transform: scale(1.02, .98); } }
@keyframes lompat-maskot { 0%, 60%, 100% { transform: none; } 70% { transform: translateY(-3px) scale(.98, 1.03); } 80% { transform: translateY(0) scale(1.03, .97); } }
@keyframes gelisah-maskot { 25% { transform: rotate(-2deg); } 75% { transform: rotate(2deg); } }
.kosong .kosong-maskot { position: relative; display: block; width: 76px; height: 76px; margin: 0 auto 10px; font-size: 14px; }
.kosong-maskot i { position: absolute; right: -6px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-size: 16px; background: var(--card); box-shadow: var(--shadow); border: 1px solid var(--line); }
.kosong-maskot i.garis { color: var(--primary); }
.kosong-maskot i.garis svg.ik { width: 16px; height: 16px; stroke-width: 2.2; }
/* Latar maskot: lingkaran krem-amber lembut (warna ubin logo) + cincin teal tipis, supaya keadaan kosong terasa bermerek. */
.kosong .kosong-maskot { isolation: isolate; }
.kosong .kosong-maskot::before { content: ""; position: absolute; inset: -10px; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, #f5a524 18%, transparent) 0 58%, transparent 60%);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--primary) 18%, transparent); }

/* ---------- Splash logo (index.html #splash) ---------- */
.splash { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px;
  background: var(--bg); text-align: center; transition: opacity .3s ease, visibility .3s; }
.splash.tutup { opacity: 0; visibility: hidden; }
/* Aplikasi terpasang: Android sudah menampilkan splash bawaan (ikon diam), jadi splash animasi tidak dipakai
   supaya tidak ada dua splash berturut-turut. Disembunyikan lewat CSS agar tidak sempat tergambar. */
@media (display-mode: standalone), (display-mode: fullscreen) { .splash { display: none; } }
.splash svg { width: 112px; height: 112px; margin-bottom: 8px; overflow: hidden;
  filter: drop-shadow(0 12px 20px rgba(14, 124, 134, .25)); }
.splash b { font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: var(--text); animation: sp-muncul .4s .3s both; }
.splash small { font-size: 13.5px; color: var(--muted); animation: sp-muncul .4s .42s both; }
.sp-uang1, .sp-uang2 { animation: sp-uang .55s cubic-bezier(.25, .8, .25, 1) both; }
.sp-uang1 { animation-delay: .18s; }
.sp-uang2 { animation-delay: .3s; }
.sp-dompet { transform-box: fill-box; transform-origin: 50% 100%; animation: sp-dompet .5s .08s cubic-bezier(.2, .9, .3, 1.25) both; }
.sp-kait { transform-box: fill-box; transform-origin: center; animation: sp-kait .35s .55s cubic-bezier(.2, .9, .3, 1.5) both; }
@keyframes sp-uang { from { transform: translateY(-150px); opacity: 0; } 60% { opacity: 1; } }
@keyframes sp-dompet { from { transform: translateY(40px) scale(.7); opacity: 0; } }
@keyframes sp-kait { from { transform: scale(0); } }
@keyframes sp-muncul { from { transform: translateY(6px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .splash *, .splash { animation: none !important; transition: none; } }

/* ---------- Undangan anggota (layar masuk) ---------- */
.kartu-undangan { display: flex; gap: 12px; align-items: center; text-align: left; margin: 4px 0 14px; padding: 14px; border-radius: 18px;
  background: var(--primary-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 22%, transparent); }
.kartu-undangan b { display: block; font-size: 15px; line-height: 1.35; color: var(--text); }
.kartu-undangan small { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.avatar-undangan { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; font-weight: 800;
  color: #fff; background: linear-gradient(135deg, var(--primary), #f5a524); box-shadow: 0 0 0 3px var(--card); }
.btn.btn-wa { width: 100%; margin-top: 10px; background: #25d366; color: #073b1c; font-weight: 800; }

/* ---------- Ajakan keluarga lain (lembar bagikan) ---------- */
.kotak-ajak { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; padding: 14px; border-radius: 16px; font-size: 13.5px; line-height: 1.45;
  background: color-mix(in srgb, #f5a524 12%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #f5a524 30%, transparent); }
.kotak-ajak .btn { width: 100%; }

/* ---------- Nilai Rapor Keuangan Keluarga (slide terakhir) ---------- */
.nilai-rapor { display: grid; place-items: center; width: 112px; height: 112px; margin: 10px auto 6px; border-radius: 50%;
  font-size: 64px; font-weight: 800; line-height: 1; color: #0e7c86; background: #fff; box-shadow: 0 0 0 8px rgba(255, 255, 255, .18), 0 14px 30px rgba(0, 0, 0, .2); }
.nilai-rapor.d { color: #d63c2f; }
.nilai-rapor.netral { color: #667085; }

/* ---------- Insight Beranda ---------- */
.insight { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; margin: -6px 0 14px; padding: 10px 12px 10px 10px;
  border-radius: 20px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); animation: muncul .4s cubic-bezier(.2, .8, .2, 1); }
.insight-maskot { width: 46px; height: 46px; flex: none; display: block; }
.insight-teks { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.35; }
.insight .panah { color: var(--muted); display: grid; }
.insight .panah .ik { width: 18px; height: 18px; }
.insight-bangga, .insight-senang { background: color-mix(in srgb, var(--masuk) 9%, var(--card)); border-color: color-mix(in srgb, var(--masuk) 25%, var(--line)); }
.insight-cemas { background: color-mix(in srgb, var(--waspada) 9%, var(--card)); border-color: color-mix(in srgb, var(--waspada) 28%, var(--line)); }
.insight-sedih { background: color-mix(in srgb, var(--keluar) 9%, var(--card)); border-color: color-mix(in srgb, var(--keluar) 28%, var(--line)); }
body.samar #view .insight-teks { filter: blur(6px); user-select: none; }

/* ---------- Streak ---------- */
.chip-streak { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 5px 10px 5px 8px; min-height: 32px; border-radius: 999px;
  font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: #c2410c;
  background: color-mix(in srgb, #f97316 14%, var(--card)); border: 1px solid color-mix(in srgb, #f97316 35%, transparent); }
:root[data-theme="dark"] .chip-streak { color: #fdba74; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip-streak { color: #fdba74; } }
.chip-streak.redup { filter: grayscale(.85); opacity: .75; }
.streak-besar { display: flex; align-items: center; gap: 14px; padding: 6px 2px 14px; }
.streak-besar .api { font-size: 52px; line-height: 1; filter: grayscale(.9); opacity: .6; }
.streak-besar .api.nyala { filter: none; opacity: 1; display: inline-block; animation: nyala-api 1.8s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes nyala-api { 50% { transform: scale(1.06) rotate(-2deg); } }
.streak-besar b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.streak-besar small { color: var(--muted); font-size: 13px; }
.tujuh-hari { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.hari-streak { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; }
.hari-streak i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 18px;
  background: var(--card-2); border: 1.5px dashed var(--line); }
.hari-streak.ada i { background: color-mix(in srgb, #f97316 16%, var(--card)); border: 1.5px solid color-mix(in srgb, #f97316 45%, transparent); }
.hari-streak.kini i { box-shadow: 0 0 0 2px var(--primary); }
.hari-streak small { font-size: 11px; color: var(--muted); font-weight: 600; }
.hari-streak:disabled { cursor: default; opacity: 1; }
.kartu-tantangan { padding: 14px; border-radius: 18px; background: var(--card-2); margin-bottom: 10px; }
.kt-atas { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.kt-ikon { font-size: 24px; line-height: 1; flex: none; }
/* Lingkaran kemajuan: conic-gradient sebesar --p persen, ikon di tengah */
.kt-cincin { flex: none; position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--primary) calc(var(--p) * 1%), color-mix(in srgb, var(--muted) 22%, transparent) 0); }
.kt-cincin::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--card); }
.kt-cincin .kt-ikon { position: relative; font-size: 22px; }
.kt-judul { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kt-judul b { font-size: 15px; line-height: 1.3; }
.kt-judul small { font-size: 12.5px; font-weight: 700; color: var(--primary); }
.kt-menu { flex: none; position: relative; align-self: flex-start; }
.kt-menu summary { list-style: none; cursor: pointer; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 99px;
  font-size: 20px; font-weight: 800; line-height: 1; color: var(--muted); }
.kt-menu summary::-webkit-details-marker { display: none; }
.kt-menu[open] summary { background: var(--card); }
.kt-menu-isi { position: absolute; right: 0; top: 38px; z-index: 3; min-width: 130px; display: flex; flex-direction: column; padding: 6px;
  border-radius: 14px; background: var(--card); box-shadow: 0 10px 26px rgba(0, 0, 0, .18), 0 0 0 1px var(--line); }
.kt-menu-isi button { text-align: left; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--text); }
.kt-menu-isi button:hover, .kt-menu-isi button:focus-visible { background: var(--card-2); }
.kt-menu-isi button.bahaya { color: var(--status-critical); }
.kt-ket { display: block; margin-top: 8px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
/* Titik kemajuan per hari / minggu */
.kt-titik { display: flex; flex-wrap: wrap; gap: 5px; }
.kt-titik i { width: 14px; height: 14px; border-radius: 50%; background: color-mix(in srgb, var(--muted) 20%, transparent); }
.kt-titik.besar i { width: 26px; height: 26px; border-radius: 9px; }
.kt-titik.sedang { gap: 4px; }
.kt-titik.sedang i { width: 15px; height: 15px; border-radius: 5px; }
.kt-titik.kecil { gap: 3px; }
.kt-titik.kecil i { width: 9px; height: 9px; border-radius: 3px; }
.kt-titik i.isi { background: var(--primary); }
.kt-titik i.gagal { background: var(--status-critical); }
.kt-titik i.telat { background: color-mix(in srgb, var(--waspada) 70%, transparent); }
.kt-titik i.kini { background: transparent; box-shadow: inset 0 0 0 2px var(--primary); }
.ide-label { margin: 4px 0 8px; }
.ide-tantangan { margin-bottom: 12px; }
.pilih-tantangan { border-radius: 16px; border: 1.5px dashed var(--line); padding: 2px 12px; }
.halaman-kebiasaan .kartu-tantangan:last-child { margin-bottom: 0; }
.grid-lencana { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lencana { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 16px; background: var(--card-2); text-align: center; }
.lencana span { font-size: 26px; line-height: 1; filter: grayscale(1); opacity: .5; }
.lencana b { font-size: 11px; font-weight: 700; color: var(--muted); line-height: 1.2; }
.lencana.dapat { background: color-mix(in srgb, #facc15 16%, var(--card)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #eab308 40%, transparent); }
.lencana.dapat span { filter: none; opacity: 1; }
.lencana.dapat b { color: var(--text); }
button.lencana { width: 100%; color: inherit; transition: transform .15s; }
button.lencana:active { transform: scale(.95); }
.kt-setor { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.kt-setor .btn { flex: 1 1 auto; }
.riwayat-tantangan { align-items: center; }
.riwayat-tantangan > span { min-width: 0; }
.riwayat-tantangan small { display: block; font-size: 12px; color: var(--muted); }
.riwayat-tantangan .tombol-teks { flex: none; font-size: 13px; }
.kartu-tantangan-beranda { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; }
.kartu-tantangan-beranda .isi { flex: 1; min-width: 0; }
.kartu-tantangan-beranda .isi small { display: block; font-size: 12px; color: var(--muted); }
.kartu-tantangan-beranda .isi b { display: block; font-size: 15px; margin: 1px 0 6px; }
.kartu-tantangan-beranda .meter { margin-bottom: 4px; }
.kartu-tantangan-beranda .panah { color: var(--muted); }

/* ---------- Tawaran gaya bahasa santai ---------- */
.kartu-gaya { display: flex; gap: 12px; align-items: flex-start; }
.kartu-gaya .insight-maskot { width: 52px; height: 52px; }
.kartu-gaya b { display: block; font-size: 15px; }
.kartu-gaya small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.aksi-gaya { display: flex; align-items: center; gap: 6px; margin-top: 10px; }

/* ---------- Cek sebelum beli ---------- */
.cb-tunggu { display: flex; align-items: center; gap: 12px; padding: 4px 2px 8px; color: var(--muted); font-size: 14px; }
.cb-tunggu .maskot { width: 48px; height: 48px; flex: none; }
.riwayat-cb { background: var(--card-2); border-radius: 16px; padding: 0 14px; }
.riwayat-cb .baris { padding: 11px 0; }
.riwayat-cb .isi b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.riwayat-cb .nominal { flex: none; font-size: 14px; }
.ikon-vonis { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; background: var(--card); }
.riwayat-cb + .tombol-teks { display: block; margin: 8px auto 0; font-size: 13px; color: var(--muted); }
.cb-vonis { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; margin-bottom: 10px; animation: muncul .3s cubic-bezier(.2, .8, .2, 1); }
.cb-maskot { width: 58px; height: 58px; flex: none; }
.cb-vonis b { display: block; font-size: 18px; font-weight: 800; }
.cb-vonis small { display: block; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-vonis > div { min-width: 0; }
.cb-aman { background: color-mix(in srgb, var(--masuk) 12%, var(--card)); }
.cb-irit { background: color-mix(in srgb, var(--waspada) 11%, var(--card)); }
.cb-jangan { background: color-mix(in srgb, var(--keluar) 12%, var(--card)); }
.cb-alasan { list-style: none; margin: 0 0 10px; padding: 0; }
.cb-alasan li { padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 1.45; }
.cb-alasan li:last-child { border-bottom: 0; }
body.samar .cb-alasan, body.samar .cb-vonis small { filter: blur(6px); }

/* ---------- Story ---------- */
.pratinjau-story { width: min(62%, 240px); aspect-ratio: 9 / 16; margin: 4px auto 0; border-radius: 22px; overflow: hidden; background: var(--card-2);
  box-shadow: var(--shadow-up); }
.pratinjau-story[aria-busy="true"] { background: linear-gradient(110deg, var(--card-2) 30%, var(--line) 50%, var(--card-2) 70%) 0 0 / 300% 100%; animation: kilau-story 1.2s linear infinite; }
@keyframes kilau-story { to { background-position: -150% 0; } }
.pratinjau-story img { width: 100%; height: 100%; display: block; }
/* Pratinjau gambar sebelum dibagikan (ringkasan 4:5, kilas balik 9:16): tinggi dibatasi supaya muat di layar */
.pratinjau-bagikan { width: fit-content; max-width: 78%; margin: 4px auto 14px; border-radius: 20px; overflow: hidden; background: var(--card-2); box-shadow: 0 12px 30px rgba(6, 42, 46, .22); }
.pratinjau-bagikan img { display: block; width: auto; max-width: 100%; height: auto; max-height: 58vh; }
/* ---------- Kartu dompet bergaya kartu fisik ---------- */
.ket-geser { font-size: 12px; font-weight: 600; color: var(--muted); }
.deret-kartu { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 4px 16px 14px;
  scroll-padding: 0 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.deret-kartu::-webkit-scrollbar { display: none; }
.kartu-dompet { position: relative; flex: 0 0 min(80%, 340px); aspect-ratio: 1.586; scroll-snap-align: start; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between; padding: 18px 20px; border-radius: 22px; text-align: left; color: var(--fg, #fff);
  background:
    radial-gradient(130% 120% at 100% 0%, rgba(255, 255, 255, .28), transparent 50%),
    linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 58%, #000));
  box-shadow: 0 12px 26px color-mix(in srgb, var(--c) 35%, transparent), inset 0 0 0 1px rgba(255, 255, 255, .12); }
.deret-kartu .kartu-dompet:only-child { flex-basis: 100%; }
.kartu-dompet::before, .kartu-dompet::after { content: ""; position: absolute; border-radius: 50%; z-index: -1; pointer-events: none; }
.kartu-dompet::before { width: 220px; height: 220px; right: -70px; bottom: -110px; border: 28px solid rgba(255, 255, 255, .07); }
.kartu-dompet::after { width: 120px; height: 120px; left: -40px; top: -60px; background: rgba(255, 255, 255, .06); }
.kd-atas { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kd-merek { font-size: 22px; font-weight: 800; letter-spacing: -.01em; line-height: 1; }
.kd-ilus { width: 40px; height: 40px; display: block; }
.kd-ilus .ilus { width: 100%; height: 100%; }
.kd-ilus .ilus-ubin { fill: rgba(255, 255, 255, .22); }
.kd-nirkontak { display: flex; align-items: center; gap: 2px; opacity: .7; }
.kd-nirkontak i { width: 5px; height: 12px; border: 2px solid currentColor; border-left: 0; border-radius: 0 10px 10px 0; }
.kd-nirkontak i:nth-child(2) { height: 17px; }
.kd-nirkontak i:nth-child(3) { height: 22px; }
.kd-chip { width: 42px; height: 32px; border-radius: 7px; background: linear-gradient(135deg, #fde68a, #d4a017 55%, #fbbf24);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); position: relative; }
.kd-chip::after { content: ""; position: absolute; inset: 7px 9px; border: 1.5px solid rgba(120, 80, 0, .35); border-radius: 4px; }
.kd-bawah { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kd-nama { font-size: 13px; font-weight: 700; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-saldo { font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: inherit !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-saldo.minus::after { content: " ⚠️"; font-size: .6em; }
/* Dompet bertumpuk: strip ringkas (semua saldo terlihat), ketuk → kartu penuh. */
.tumpuk-dompet { display: flex; flex-direction: column; gap: 8px; }
.kd-item { position: relative; }
/* Strip = tepi kartu fisik: ornamen sama dengan kartu penuh (lingkaran samar, kilap), tepi atas terang. */
.kd-strip { position: relative; isolation: isolate; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 10px 16px; border-radius: 18px; text-align: left;
  color: var(--fg, #fff); overflow: hidden; max-height: 80px;
  background:
    linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .13) 48%, transparent 60%),
    radial-gradient(120% 180% at 0% 0%, rgba(255, 255, 255, .24), transparent 50%),
    linear-gradient(135deg, color-mix(in srgb, var(--c) 92%, #fff), color-mix(in srgb, var(--c) 55%, #000));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--c) 28%, transparent), inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(0, 0, 0, .18), inset 0 0 0 1px rgba(255, 255, 255, .1);
  transition: max-height .28s ease, opacity .2s ease, padding .28s ease, min-height .28s ease; }
.kd-strip::before, .kd-strip::after { content: ""; position: absolute; border-radius: 50%; z-index: -1; pointer-events: none; }
.kd-strip::before { width: 150px; height: 150px; right: -34px; top: -78px; border: 20px solid rgba(255, 255, 255, .09); }
.kd-strip::after { width: 90px; height: 90px; right: 64px; bottom: -62px; background: rgba(255, 255, 255, .07); }
.kd-logo { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; overflow: hidden;
  background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 2px 6px rgba(0, 0, 0, .12); }
.kd-logo .kd-ilus { width: 28px; height: 28px; }
.kd-strip .kd-nama { flex: 1; font-size: 14.5px; opacity: .95; text-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.kd-saldo-strip { flex: none; font-size: 16px; font-weight: 800; color: inherit !important; font-feature-settings: "tnum" 1, "lnum" 1; }
.kd-saldo-strip.minus::after { content: " ⚠️"; font-size: .8em; }
.kd-penuh { position: relative; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .32s ease, opacity .25s ease; }
.kd-penuh .kartu-dompet { width: 100%; }
.kd-item.buka .kd-strip { max-height: 0; min-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; pointer-events: none; box-shadow: none; }
.kd-item.buka .kd-penuh { max-height: 440px; opacity: 1; padding: 0 0 22px; margin-bottom: -14px; }
.kd-penuh .kartu-dompet { box-shadow: 0 8px 16px color-mix(in srgb, var(--c) 30%, transparent), inset 0 0 0 1px rgba(255, 255, 255, .12); }
.kd-tutup { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 99px; display: grid; place-items: center;
  background: rgba(0, 0, 0, .22); color: #fff; }
.kd-tutup svg.ik { width: 18px; height: 18px; transform: rotate(-90deg); }
.kd-penuh .kd-nirkontak { margin-right: 44px; }
/* Motif latar per kartu (muda.js → deretKartuDompet memberi pola-0..5 bergiliran). pola-0 = lingkaran di atas.
   Motif lain menutup seluruh kartu dan dipudarkan dengan mask; ::after jadi cahaya lembut di kanan atas. */
.kd-item:not(.pola-0) :is(.kd-strip, .kartu-dompet)::before { inset: 0; width: auto; height: auto; border: 0; border-radius: 0; }
.kd-item:not(.pola-0) :is(.kd-strip, .kartu-dompet)::after { inset: auto; right: -18%; top: -70%; width: 60%; height: auto; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255, 255, 255, .17), transparent 68%); }
/* garis miring */
.pola-1 :is(.kd-strip, .kartu-dompet)::before { background: repeating-linear-gradient(-55deg, rgba(255, 255, 255, .1) 0 2px, transparent 2px 12px);
  -webkit-mask-image: linear-gradient(100deg, transparent 28%, #000 90%); mask-image: linear-gradient(100deg, transparent 28%, #000 90%); }
/* ombak */
.pola-2 :is(.kd-strip, .kartu-dompet)::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='20'%3E%3Cpath d='M0 10c10 0 10-8 20-8s10 8 20 8 10-8 20-8 10 8 20 8' fill='none' stroke='%23fff' stroke-opacity='.17' stroke-width='2'/%3E%3C/svg%3E") 0 100% / 80px 20px;
  -webkit-mask-image: linear-gradient(to top, #000, transparent 85%); mask-image: linear-gradient(to top, #000, transparent 85%); }
/* titik */
.pola-3 :is(.kd-strip, .kartu-dompet)::before { background: radial-gradient(rgba(255, 255, 255, .24) 1.2px, transparent 1.7px) 0 0 / 11px 11px;
  -webkit-mask-image: linear-gradient(125deg, #000, transparent 60%); mask-image: linear-gradient(125deg, #000, transparent 60%); }
/* cincin dari pojok kiri bawah */
.pola-4 :is(.kd-strip, .kartu-dompet)::before { background: repeating-radial-gradient(circle at 0 100%, transparent 0 15px, rgba(255, 255, 255, .1) 15px 17px);
  -webkit-mask-image: radial-gradient(circle at 0 100%, #000 20%, transparent 80%); mask-image: radial-gradient(circle at 0 100%, #000 20%, transparent 80%); }
/* segi (zigzag) */
.pola-5 :is(.kd-strip, .kartu-dompet)::before {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .08) 25%, transparent 25%) -14px 0 / 28px 28px,
    linear-gradient(225deg, rgba(255, 255, 255, .08) 25%, transparent 25%) -14px 0 / 28px 28px,
    linear-gradient(315deg, rgba(255, 255, 255, .08) 25%, transparent 25%) 0 0 / 28px 28px,
    linear-gradient(45deg, rgba(255, 255, 255, .08) 25%, transparent 25%) 0 0 / 28px 28px;
  -webkit-mask-image: linear-gradient(to left, #000, transparent 75%); mask-image: linear-gradient(to left, #000, transparent 75%); }
@media (prefers-reduced-motion: reduce) { .kd-strip, .kd-penuh { transition: none; } }

@media (prefers-reduced-motion: reduce) {
  .maskot-badan, .streak-besar .api.nyala, .insight, .cb-vonis, .pratinjau-story[aria-busy="true"] { animation: none !important; }
  :is(.insight, .kartu-dompet, .chip-streak, .bento > button, .kartu-tantangan-beranda, .hari-streak):active { transform: none; }
}
/* Streak sebagai lencana kecil di pojok avatar, supaya nama tidak terhimpit. */
.avatar-bungkus { position: relative; flex: none; display: block; }
.avatar-bungkus .chip-streak { position: absolute; right: -12px; bottom: -8px; min-height: 22px; padding: 1px 7px 1px 5px; gap: 1px;
  font-size: 11.5px; border: 2px solid var(--bg); background: color-mix(in srgb, #f97316 18%, var(--card)); }
.avatar-bungkus .chip-streak::after { content: ""; position: absolute; inset: -10px; }

/* ---------- Tampilan web (layar ≥ 960px: laptop & komputer) ----------
   Di HP aplikasi selebar 520px dengan navigasi mengambang di bawah. Di layar lebar:
   - navigasi jadi sidebar kiri (logo, tombol Catat transaksi, menu, Pengaturan di bawah);
   - isi halaman memakai lebar layar: Beranda, Dompet, Laporan & Pengaturan dua kolom (CSS columns,
     urutan kartu tetap sama dengan di HP); Riwayat, Catatan & Sholat satu kolom yang lebih lebar;
   - lembar bawah jadi jendela dialog di tengah layar; ada efek hover untuk mouse.
   Halaman aktif ditandai body[data-tab] (render di app.js). Selektor `body:has(> #nav:not([hidden]))` =
   aplikasi sedang terbuka (bukan layar masuk / setup), supaya halaman itu tetap di tengah tanpa sidebar. */
.bottomnav .hanya-lebar, .hanya-lebar { display: none; }
.grup-bagian { display: contents; } /* pembungkus judul bagian + kartunya (kelompokkanBagian di app.js) */

@media (min-width: 960px) {
  :root:not([data-tampilan="hp"]) { --sisi: 248px; }
  :root:not([data-tampilan="hp"]) body { max-width: none; }
  :root:not([data-tampilan="hp"]) body:has(> #nav:not([hidden])) { padding-left: var(--sisi); }

  /* Sidebar */
  :root:not([data-tampilan="hp"]) .bottomnav {
    left: 0; top: 0; bottom: 0; transform: none; width: var(--sisi); max-width: none; height: auto;
    display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 20px 14px 18px;
    border-radius: 0; border: 0; border-right: 1px solid var(--line); box-shadow: none;
    background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; overflow-y: auto;
  }
  :root:not([data-tampilan="hp"]) .bottomnav .hanya-lebar { display: flex; }
  :root:not([data-tampilan="hp"]) .nav-geser, :root:not([data-tampilan="hp"]) .nav-hal { display: contents; }
  :root:not([data-tampilan="hp"]) .nav-celah { display: none; }
  :root:not([data-tampilan="hp"]) .bottomnav .fab .hanya-lebar { display: inline; }
  :root:not([data-tampilan="hp"]) .nav-merek { order: 0; align-items: center; gap: 10px; padding: 0 8px 18px; }
  :root:not([data-tampilan="hp"]) .nav-merek img { width: 36px; height: 36px; }
  :root:not([data-tampilan="hp"]) .nav-merek b { font-size: 15.5px; font-weight: 800; }
  :root:not([data-tampilan="hp"]) .bottomnav button {
    order: 2; flex-direction: row; justify-content: flex-start; gap: 12px; height: 44px; padding: 0 12px;
    border-radius: 12px; font-size: 14.5px; transition: background .15s, color .15s;
  }
  :root:not([data-tampilan="hp"]) .bottomnav button:not(.fab) svg.ik { padding: 0; background: none; }
  :root:not([data-tampilan="hp"]) .bottomnav button.aktif { background: var(--primary-soft); }
  :root:not([data-tampilan="hp"]) .bottomnav button.aktif svg.ik { background: none; }
  :root:not([data-tampilan="hp"]) .bottomnav .fab {
    order: 1; position: static; transform: none; justify-self: auto; justify-content: center; width: 100%; height: 48px; margin: 0 0 16px; border-radius: 14px;
    font-size: 15px; font-weight: 800; color: var(--on-primary); gap: 8px;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, .22);
  }
  :root:not([data-tampilan="hp"]) .bottomnav .fab svg.ik { width: 20px; height: 20px; }
  :root:not([data-tampilan="hp"]) .bottomnav .fab:active { transform: scale(.98); }
  :root:not([data-tampilan="hp"]) .bottomnav .nav-bawah { margin-top: auto; }
  /* Urutan menu bisa diatur sendiri: Pengaturan & Tampilan HP tetap di dasar sidebar. */
  :root:not([data-tampilan="hp"]) .bottomnav :is(.nav-bawah, [data-aksi="tampilan-hp"]) { order: 3; }

  /* Isi halaman */
  :root:not([data-tampilan="hp"]) #view { max-width: 1180px; margin: 0 auto; padding: 28px 40px 64px; }
  :root:not([data-tampilan="hp"]) body[data-tab="riwayat"] #view, :root:not([data-tampilan="hp"]) body[data-tab="catatan-edit"] #view { max-width: 880px; }
  :root:not([data-tampilan="hp"]) body[data-tab="catatan"] #view { max-width: 1000px; }
  :root:not([data-tampilan="hp"]) body[data-tab="sholat"] #view { max-width: 640px; }
  :root:not([data-tampilan="hp"]) body:not(:has(> #nav:not([hidden]))) #view { max-width: 560px; } /* layar masuk & setup: tetap ringkas di tengah */
  :root:not([data-tampilan="hp"]) body.tanpa-nav #view { padding-bottom: 64px; }
  /* Form catatan: sisakan ruang setinggi bilah bawah (opsi + Simpan) supaya baris terakhir bisa digulir ke atasnya. */
  :root:not([data-tampilan="hp"]) body.tanpa-nav #view:has(.bilah-catatan) { padding-bottom: 180px; }

  /* Dua kolom: kartu mengalir atas-ke-bawah di kolom kiri lalu kanan, judul bagian tidak dipisah dari kartunya. */
  :root:not([data-tampilan="hp"]) body:has(> #nav:not([hidden])):is([data-tab="beranda"], [data-tab="dompet"], [data-tab="laporan"], [data-tab="lainnya"]) #view {
    columns: 2; column-gap: 28px;
  }
  :root:not([data-tampilan="hp"]) #view > * { break-inside: avoid; }
  :root:not([data-tampilan="hp"]) .grup-bagian { display: block; break-inside: avoid; padding-bottom: 14px; }
  :root:not([data-tampilan="hp"]) .grup-bagian > .judul-bagian { margin-top: 0; }
  :root:not([data-tampilan="hp"]) #view > :is(.status-bar, .bilah-segar, .kepala, .insight, .pemilih-periode-lap, .aksi-laporan, .catatan-versi) { column-span: all; }
  :root:not([data-tampilan="hp"]) body[data-tab="laporan"] #view > .kpi { column-span: all; }
  :root:not([data-tampilan="hp"]) body[data-tab="dompet"] #view > .kartu-saldo { column-span: all; }
  :root:not([data-tampilan="hp"]) #view > .judul-bagian:first-of-type, :root:not([data-tampilan="hp"]) #view > .kepala + * { margin-top: 0; }
  :root:not([data-tampilan="hp"]) body[data-tab="laporan"] #view > .kpi { grid-template-columns: repeat(5, 1fr); }
  :root:not([data-tampilan="hp"]) body[data-tab="laporan"] #view > .kpi > :last-child:nth-child(odd) { grid-column: auto; }
  :root:not([data-tampilan="hp"]) .kepala h1 { font-size: 26px; }
  /* Pengaturan, Catatan & Sholat sudah ada di sidebar: tombol ← kembali ke Beranda tidak perlu. */
  :root:not([data-tampilan="hp"]) body:is([data-tab="lainnya"], [data-tab="catatan"], [data-tab="sholat"]) #view .kepala-kembali > .tombol-ikon:first-child { display: none; }

  /* Elemen melayang ikut berada di tengah area isi (bukan di tengah seluruh layar). */
  :root:not([data-tampilan="hp"]) body:has(> #nav:not([hidden])) :is(.toast, .antrian, .bar-pilih, .bilah-catatan) { left: calc(50% + var(--sisi) / 2); }
  :root:not([data-tampilan="hp"]) .antrian, :root:not([data-tampilan="hp"]) .bar-pilih { bottom: 24px; }
  :root:not([data-tampilan="hp"]) body.mode-pilih #view, :root:not([data-tampilan="hp"]) body.ada-antrian #view { padding-bottom: 180px; }
  :root:not([data-tampilan="hp"]) .bilah-catatan { max-width: 880px; border-radius: 20px 20px 0 0; }

  /* Lembar bawah → jendela dialog */
  :root:not([data-tampilan="hp"]) .sheet-panel {
    top: 50%; bottom: auto; transform: translate(-50%, -50%); max-width: 580px; max-height: 88vh; max-height: 88dvh;
    border-radius: 24px; padding: 14px 24px 22px; box-shadow: 0 30px 80px rgba(8, 10, 18, .35);
    animation: dialog-masuk .2s cubic-bezier(.2, .8, .2, 1);
  }
  :root:not([data-tampilan="hp"]) .sheet-hantu .sheet-panel { animation: dialog-keluar .16s ease-in forwards; }
  :root:not([data-tampilan="hp"]) .grabber { display: none; }
  :root:not([data-tampilan="hp"]) .sheet-panel .aksi-form:last-child { bottom: -22px; margin: 8px -24px -22px; padding: 12px 24px 16px; border-radius: 0 0 24px 24px; }

  /* Mouse */
  :root:not([data-tampilan="hp"]) .bottomnav button:not(.fab):not(.aktif):hover { background: var(--card-2); color: var(--text); }
  :root:not([data-tampilan="hp"]) .bottomnav .fab:hover { filter: brightness(1.06); }
  :root:not([data-tampilan="hp"]) :is(.trx, .baris):hover { background: color-mix(in srgb, var(--primary) 5%, transparent); }
  :root:not([data-tampilan="hp"]) :is(.trx, .baris) { border-radius: 10px; transition: background .12s; }
  :root:not([data-tampilan="hp"]) :is(.kartu-dompet, .bento > button, .insight, .tombol-tambah):hover { filter: brightness(1.03); }
  :root:not([data-tampilan="hp"]) ::-webkit-scrollbar { width: 10px; height: 10px; }
  :root:not([data-tampilan="hp"]) ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 18%, transparent); border-radius: 99px; border: 2px solid var(--bg); }
}
@keyframes dialog-masuk { from { opacity: 0; transform: translate(-50%, -47%) scale(.98); } }
@keyframes dialog-keluar { to { opacity: 0; transform: translate(-50%, -48%) scale(.98); } }

/* Detail harga emas di form aset */
.kotak-harga-emas { background: var(--card-2); border-radius: 14px; padding: 6px 14px 10px; margin-bottom: 14px; }
.kotak-harga-emas .baris-rincian:last-of-type { border-bottom: 0; }
.kotak-harga-emas small { display: block; color: var(--muted); font-size: 12px; }
.baris-rincian b.masuk { color: var(--masuk); } .baris-rincian b.keluar { color: var(--keluar); }
/* Kalkulator zakat: ikon info di baris nisab, membuka dasar perhitungannya */
.info-nisab { display: inline-grid; place-items: center; width: 24px; height: 24px; margin: -4px 0 -4px 2px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--primary); vertical-align: middle; cursor: pointer; }
.info-nisab svg.ik { width: 17px; height: 17px; }
.info-nisab[aria-expanded="true"] { background: var(--primary-soft); }
.ket-nisab { background: var(--card-2); border-radius: 12px; padding: 4px 12px; margin: 2px 0 8px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.ket-nisab p { margin: 8px 0; }
.ket-nisab .rumus { color: var(--text); font-weight: 700; }
.ket-nisab .sumber-harga:empty { display: none; }
.ket-riwayat-emas { display: block; font-size: 12px; color: var(--muted); }

/* Riwayat harga barang */
.barang-harga { border-bottom: 1px solid var(--line); }
.barang-harga summary { display: flex; align-items: center; gap: 10px; padding: 12px 2px; cursor: pointer; list-style: none; }
.barang-harga summary::-webkit-details-marker { display: none; }
.barang-harga summary .isi { flex: 1; min-width: 0; }
.barang-harga summary .isi b { display: block; overflow-wrap: anywhere; }
.barang-harga summary small, .baris-barang small, .barang-struk small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 400; }
.barang-harga[open] summary { border-bottom: 1px dashed var(--line); }
.barang-harga-isi { padding: 0 2px 10px; }
.barang-harga-isi .baris-rincian:last-child { border-bottom: 0; }
.harga-ubah { flex: none; font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.harga-ubah.naik { color: var(--keluar); background: color-mix(in srgb, var(--keluar) 12%, transparent); }
.harga-ubah.turun { color: var(--masuk); background: color-mix(in srgb, var(--masuk) 12%, transparent); }
.baris-barang { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.baris-barang:last-child { border-bottom: 0; }
.baris-barang b, .barang-struk b { text-align: right; white-space: nowrap; }
.barang-struk { margin-top: 10px; font-size: 14px; }
.barang-struk summary { cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 600; }
body.samar #view .harga-ubah, body.samar .barang-harga b { filter: blur(7px); }

/* ---------- Papan catatan (catatan tanpa tanggal, gaya Google Keep) ---------- */
.mode-catatan { margin-bottom: 14px; }
.jumlah-mode { display: inline-block; min-width: 20px; margin-left: 4px; padding: 1px 6px; border-radius: 999px; font-size: 11px; line-height: 16px;
  background: var(--primary-soft); color: var(--primary); }
.cari-papan { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; margin-bottom: 12px; border-radius: 999px;
  background: var(--card); border: 1.5px solid var(--line); color: var(--muted); }
.cari-papan:focus-within { border-color: var(--primary); }
.cari-papan .ik { width: 19px; height: 19px; }
.cari-papan input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: 15px; color: var(--text); }
.papan-tulis { display: flex; align-items: center; gap: 4px; padding: 5px 5px 5px 18px; margin-bottom: 18px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.papan-tulis-teks { flex: 1; padding: 11px 0; text-align: left; font-size: 15px; font-weight: 600; color: var(--muted); }
.papan-judul { margin: 4px 4px 8px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.kisi-papan { columns: 2; column-gap: 10px; margin-bottom: 14px; }
/* Jumlah kolom mengikuti lebar area Papan (bukan jendela), supaya tetap 2 kolom di Tampilan HP pada PC. */
.halaman-papan { container-type: inline-size; }
@container (min-width: 640px) { .kisi-papan { columns: 3; } }
@container (min-width: 880px) { .kisi-papan { columns: 4; } }
.kartu-papan { display: flex; flex-direction: column; break-inside: avoid; margin-bottom: 10px; border-radius: 16px; overflow: hidden;
  background: color-mix(in srgb, var(--w) 15%, var(--card)); border: 1px solid color-mix(in srgb, var(--w) 32%, var(--line));
  animation: muncul-panel .25s ease-out; }
.kartu-papan[data-warna="polos"] { background: var(--card); border-color: var(--line); }
.kartu-papan.tertunda { opacity: .75; border-style: dashed; }
.kp-buka { display: block; width: 100%; padding: 14px 14px 6px; text-align: left; color: inherit; background: none; }
.kp-judul { display: block; font-size: 15px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.kp-isi { display: block; max-height: 12.5em; overflow: hidden; margin-top: 6px; font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; opacity: .85; }
.kp-isi ul, .kp-isi ol { margin: 2px 0; padding-left: 1.3em; }
.kartu-papan .daftar-centang { padding: 0 6px 0 8px; }
.kartu-papan .centang { padding: 5px 4px; font-size: 13.5px; }
.kp-kaki { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 38px; padding: 0 4px 4px 14px; }
.kp-kaki small { font-size: 11.5px; font-weight: 600; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-tombol { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--muted); }
.kp-tombol:active { background: color-mix(in srgb, var(--w) 20%, transparent); }
.kp-tombol .ik { width: 18px; height: 18px; }
.kp-pin.nyala { color: var(--primary); }
.kp-pin.nyala .ik { fill: currentColor; }
.papan-kosong { padding: 40px 24px; text-align: center; color: var(--muted); }
.papan-kosong span { display: block; font-size: 44px; margin-bottom: 8px; }
.papan-kosong p { margin: 0 auto; max-width: 300px; line-height: 1.5; }
.papan-buka-arsip { display: flex; margin: 4px auto 8px; }
.papan-kepala-arsip { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; font-size: 17px; }
.tautan-papan { margin-top: 12px; }
.btn-arsip-catatan { flex: none; padding-left: 16px; padding-right: 16px; }

/* ---------- Editor format catatan ---------- */
/* Menempel tepat di bawah judul form catatan (.kepala-form-catatan, tinggi 64px & ikut menempel) saat digulir. */
.alat-format { position: sticky; top: 64px; z-index: 2; display: flex; align-items: center; gap: 2px;
  margin: 4px 0 10px; padding: 4px; border-radius: 14px; background: var(--card-2); overflow-x: auto; scrollbar-width: none;
  box-shadow: 0 0 0 8px var(--bg); } /* bingkai warna latar: teks yang tergulir tidak mengintip di celah & sudut */
.alat-format::-webkit-scrollbar { display: none; }
.alat-format button { flex: none; display: grid; place-items: center; width: 40px; height: 38px; border-radius: 10px; color: var(--muted); }
.alat-format button .ik { width: 19px; height: 19px; }
.alat-format button:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.alat-format button.aktif { color: var(--primary); background: var(--primary-soft); }
.pemisah-alat { flex: none; width: 1px; height: 22px; margin: 0 4px; background: var(--line); }
.editor-catatan { min-height: 180px; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; text-align: left; } /* induknya rata tengah */
.kp-isi { text-align: left; }
.bungkus-editor { position: relative; }
.petunjuk-editor { display: none; position: absolute; top: 4px; left: 0; right: 0; font-size: 16px; line-height: 1.6; color: var(--muted); opacity: .7; pointer-events: none; }
.bungkus-editor.kosong .petunjuk-editor { display: block; }
.editor-catatan ul, .editor-catatan ol { margin: 2px 0; padding-left: 1.5em; }
.editor-catatan li { padding-left: 2px; }
.editor-catatan:focus-visible { outline: none; }
/* Ikon arsip (SVG) di Papan & form catatan */
.btn-arsip-catatan, .judul-arsip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.papan-buka-arsip { display: flex; align-items: center; gap: 6px; width: max-content; }
.papan-buka-arsip .ik { width: 17px; height: 17px; }
.btn-arsip-catatan .ik, .judul-arsip .ik { width: 20px; height: 20px; }
.papan-kosong span .ik { width: 48px; height: 48px; stroke-width: 1.5; }
.aksi-catatan .btn-arsip-catatan { flex: none; padding: 13px 14px; }
@media (max-width: 459px) { .label-arsip { display: none; } } /* HP: cukup ikon supaya Hapus & Simpan tetap muat */

/* Pencatatan dikunci (versi penuh dinonaktifkan / kuota gratis habis): tombol + tampil nonaktif,
   tapi tetap bisa diketuk untuk membuka layar Versi penuh (lihat terkunciBayar di app.js). */
body.catat-terkunci .bottomnav .fab { background: color-mix(in srgb, var(--text) 28%, var(--card)); color: var(--card); box-shadow: none; }
body.catat-terkunci .bottomnav .fab::after { content: '🔒'; position: absolute; right: -4px; top: -4px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--card); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); display: grid; place-items: center; font-size: 12px; line-height: 1; }

/* Kartu status aktivasi di layar Beli versi penuh (lihat bukaFormBayar). Warna mengikuti status. */
.status-aktivasi { --sa: var(--primary); margin: 0 0 16px; padding: 14px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--sa) 8%, var(--card)); border: 1px solid color-mix(in srgb, var(--sa) 22%, transparent); }
.status-aktivasi.menunggu { --sa: var(--waspada); }
.status-aktivasi.ditolak, .status-aktivasi.nonaktif { --sa: var(--keluar); }
.sa-kepala { display: flex; align-items: center; gap: 12px; }
.sa-ikon { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--sa) 16%, var(--card)); color: var(--sa); }
.sa-ikon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sa-judul { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sa-judul small { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.sa-judul b { font-size: 15px; line-height: 1.3; color: var(--text); }
.sa-alasan { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--card); border-left: 3px solid var(--sa);
  font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.45; }
.sa-alasan small { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.sa-ket { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.sa-cek { display: none; flex: none; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--card);
  border: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.sa-cek i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--sa) 30%, transparent); border-top-color: var(--sa);
  animation: sa-putar .8s linear infinite; }
.status-aktivasi.memeriksa .sa-cek { display: inline-flex; }
@keyframes sa-putar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sa-cek i { animation-duration: 2.4s; } }