/* ============================================================
   CUKUPIN — tema "Midnight": dark, gradasi violet→cyan, glass
   ============================================================ */
:root {
  color-scheme: dark;
  --bg: #0b0d14;
  --bg-glow-1: rgba(124, 92, 255, 0.14);
  --bg-glow-2: rgba(34, 211, 238, 0.10);
  --card: rgba(255, 255, 255, 0.045);
  --card-solid: #151926;
  --card-shadow: none;
  --line: rgba(255, 255, 255, 0.09);
  --ink: #eef0f8;
  --muted: #8b93a8;
  --violet: #7c5cff;
  --cyan: #22d3ee;
  --grad: linear-gradient(120deg, #7c5cff 0%, #22d3ee 100%);
  --grad-soft: linear-gradient(120deg, rgba(124, 92, 255, 0.18), rgba(34, 211, 238, 0.14));
  --on-grad: #0b0d14;
  --green: #34d399;
  --green-dark: #6ee7c5;
  --green-soft: rgba(52, 211, 153, 0.14);
  --red: #fb7185;
  --red-soft: rgba(251, 113, 133, 0.14);
  --amber-soft: rgba(250, 204, 21, 0.14);
  --amber: #fbbf24;
  --link: #22d3ee;
  --input-bg: rgba(0, 0, 0, 0.28);
  --seg-bg: rgba(0, 0, 0, 0.3);
  --icon-bg: rgba(0, 0, 0, 0.3);
  --hover: rgba(255, 255, 255, 0.08);
  --nav-bg: rgba(21, 25, 38, 0.88);
  --nav-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  --badge-off-bg: rgba(255, 255, 255, 0.07);
  --backdrop: rgba(4, 5, 10, 0.7);
  --radius: 22px;
  --radius-sm: 14px;
  --nav-h: 66px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* ===== Tema terang (dipilih dari Pengaturan → Tampilan) ===== */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f4fa;
  --bg-glow-1: rgba(124, 92, 255, 0.10);
  --bg-glow-2: rgba(14, 165, 201, 0.08);
  --card: #ffffff;
  --card-solid: #ffffff;
  --card-shadow: 0 2px 14px rgba(23, 26, 43, 0.06);
  --line: rgba(23, 26, 43, 0.10);
  --ink: #171a2b;
  --muted: #5d6478;
  --violet: #6d4aff;
  --cyan: #0ea5c9;
  --grad: linear-gradient(120deg, #6d4aff 0%, #0ea5c9 100%);
  --grad-soft: linear-gradient(120deg, rgba(109, 74, 255, 0.10), rgba(14, 165, 201, 0.08));
  --on-grad: #ffffff;
  --green: #0d9165;
  --green-dark: #086b4b;
  --green-soft: rgba(13, 145, 101, 0.12);
  --red: #e11d48;
  --red-soft: rgba(225, 29, 72, 0.10);
  --amber-soft: rgba(217, 119, 6, 0.12);
  --amber: #b45309;
  --link: #0e7490;
  --input-bg: #f6f7fb;
  --seg-bg: rgba(23, 26, 43, 0.06);
  --icon-bg: rgba(23, 26, 43, 0.06);
  --hover: rgba(23, 26, 43, 0.05);
  --nav-bg: rgba(255, 255, 255, 0.92);
  --nav-shadow: 0 12px 40px rgba(23, 26, 43, 0.18);
  --badge-off-bg: rgba(23, 26, 43, 0.08);
  --backdrop: rgba(23, 26, 43, 0.35);
  --shadow: 0 10px 30px rgba(23, 26, 43, 0.10);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%;
  background: var(--bg);
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--ink);
  min-height: 100vh;   /* fallback: iOS < 15.4 & Samsung Internet < 19 belum paham dvh */
  min-height: 100dvh;
  /* Di browser biasa inset atas = 0 karena bar URL sudah menutupi status bar.
     Baru terisi kalau halaman benar-benar menggambar sampai ke tepi layar —
     yaitu di APK dan di PWA yang dipasang ke layar utama. */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 30px);
  -webkit-tap-highlight-color: transparent;  /* kotak abu-abu saat tap di Android */
  overscroll-behavior-y: none;               /* tarik-ke-refresh tak sengaja */
}
/* Cahaya latar dipindah ke lapisan fixed sendiri. Sebelumnya pakai
   background-attachment: fixed yang di iOS Safari bikin latar loncat-loncat
   saat scroll dan berat waktu keyboard muncul. */
body::before {
  content: ''; position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(52% 38% at 18% -6%, var(--bg-glow-1), transparent 70%),
    radial-gradient(48% 34% at 92% 4%, var(--bg-glow-2), transparent 70%);
}
/* Hilangkan jeda tap ~300ms & double-tap-zoom di elemen yang memang untuk ditekan */
button, a, label, summary, .chip, .cat-btn, .member-card,
.txn, .rrow, .list-item, .nav-item, .icon-btn {
  touch-action: manipulation;
}
[x-cloak] { display: none !important; }
::selection { background: rgba(124, 92, 255, 0.4); }

.container { max-width: 640px; margin: 0 auto; padding: 18px 16px; }
@media (min-width: 900px) { .container { max-width: 760px; } }

/* ===== Header ===== */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 2px 20px;
  /* Jurnal punya 5 kontrol di kanan; di layar 360-390px jumlahnya lebih lebar
     dari layarnya dan dulu bikin SELURUH halaman bisa digeser ke samping,
     ikon paling kanan kepotong. Dibungkus ke baris kedua kalau tidak muat. */
  flex-wrap: wrap; gap: 8px 10px;
}
/* Warna solid sebagai dasar; gradasi cuma dipasang kalau browsernya sanggup —
   kalau tidak, "Cukupin Pro." jadi transparan alias tidak kelihatan sama sekali. */
.brand { font-size: 1.4rem; font-weight: 700; color: var(--violet); }
.brand .dot { color: var(--cyan); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand {
    background: var(--grad); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
  .brand .dot { -webkit-text-fill-color: var(--cyan); color: var(--cyan); }
}
.topbar-left { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* Sapaan menggantikan pill "Mencatat sebagai" — atribusi tetap jelas, tapi ringan */
.topbar .greet { font-size: 0.92rem; font-weight: 600; color: var(--ink); }

/* Stempel waktu satu baris penuh di bawah header. Tanggal yang utama;
   jam sengaja lebih kecil & redup — informasi pendukung, bukan headline. */
.stamp {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px;
  margin: -8px 2px 16px;
}
.stamp .date { color: var(--muted); font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.stamp .sep { color: var(--muted); font-size: 0.72rem; opacity: 0.55; }
/* Jam berdetak tiap detik: tabular-nums biar lebarnya tidak goyang tiap angka ganti */
.stamp .clock {
  color: var(--muted); font-size: 0.72rem; font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum';
}

.pov-note {
  text-align: center; color: var(--muted); font-size: 0.76rem;
  margin-top: 10px; line-height: 1.5;
}
.pov-note b { color: var(--ink); }

/* ===== Aturan tipografi =====
   Bobot dibatasi tiga tingkat saja: 400 teks biasa, 600 penekanan (nama,
   label, tombol), 700 angka dan judul. Tidak ada 800/900 — di layar ponsel
   bedanya dengan 700 nyaris tidak kelihatan, yang terasa cuma tebalnya.
   Label kartu TIDAK lagi huruf besar semua dengan jarak huruf lebar: itu
   bikin tiap label minta diperhatikan padahal isinya yang penting, dan
   kata Indonesia yang panjang ("PENGELUARAN") jadi dua kali lebih makan
   tempat. Jarak huruf negatif juga dibuang — dipakai untuk mengesankan
   judul majalah, bukan untuk keterbacaan. */

/* ===== Cards (glass) ===== */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--card-shadow);
  margin-bottom: 16px;
}
.card h2 {
  font-size: 0.85rem; color: var(--muted); margin-bottom: 14px; font-weight: 600;
}

/* Ringkasan bulan: satu kartu gradasi besar, 3 kolom */
.stat-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0;
  background: var(--grad-soft); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 6px; margin-bottom: 16px;
  position: relative; overflow: hidden;
}
.stat-row::before {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  background: radial-gradient(60% 120% at 50% -30%, rgba(255, 255, 255, 0.08), transparent 70%);
}
.stat { text-align: center; padding: 0 6px; position: relative; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat .label {
  font-size: 0.74rem; color: var(--muted); margin-bottom: 6px; font-weight: 500;
}
.stat .value { font-weight: 700; font-size: clamp(0.78rem, 3.4vw, 1.05rem); white-space: nowrap; }
.stat .value.income { color: var(--green); }
.stat .value.expense { color: var(--red); }

/* ===== Buttons & inputs ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; border-radius: 16px; padding: 14px 20px;
  font-size: 1rem; font-weight: 600; cursor: pointer;
  background: var(--grad); color: var(--on-grad); width: 100%;
  box-shadow: 0 6px 22px rgba(124, 92, 255, 0.35);
  transition: transform 0.12s, box-shadow 0.12s, opacity 0.12s;
}
.btn:active { transform: scale(0.97); box-shadow: 0 3px 12px rgba(124, 92, 255, 0.3); }
.btn:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
.btn.secondary {
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); box-shadow: none;
}
.btn.danger { background: var(--red-soft); color: var(--red); box-shadow: none; }
/* Tombol simpan saat kategorinya belum dipilih: sengaja TIDAK dimatikan, tapi
   diturunkan jadi ajakan. Tombol mati cuma bilang "tidak bisa"; yang ini bilang
   apa yang kurang dan sekali tap langsung mengantar ke tempatnya. */
.btn.ask { background: var(--card); color: var(--ink); border: 1px dashed var(--line); box-shadow: none; }
.btn.small { width: auto; padding: 9px 16px; font-size: 0.85rem; border-radius: 12px; }

input[type="text"], input[type="number"], input[type="date"], input[type="password"],
input[type="tel"], input[type="email"], input[type="search"], select, textarea {
  width: 100%; padding: 13px 15px; border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  /* 1rem = 16px. Di bawah 16px, iOS Safari otomatis zoom saat field difokus. */
  font-size: 1rem;
  background: var(--input-bg); color: var(--ink);
  font-family: inherit;
  /* Tanpa ini iOS Safari memaksa bayangan dalam + sudut membulat versinya sendiri */
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
/* appearance:none menghapus panah select bawaan, jadi digambar ulang di sini */
select {
  padding-right: 38px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238b93a8' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 11px;
}
/* iOS menaruh isi input tanggal di tengah dan tingginya mengempis */
input[type="date"] { display: block; min-height: 48px; text-align: left; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.5; }
/* type="search" bawaan WebKit masih menyisakan tombol silang + dekorasi sendiri
   walau appearance sudah dimatikan; ini yang bikin kotaknya kelihatan beda sendiri */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; display: none; }
/* Placeholder di sebagian Android/Samsung defaultnya terlalu redup */
::placeholder { color: var(--muted); opacity: 1; }
/* Tombol naik-turun input angka: makan tempat dan susah ditekan di layar sentuh */
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Tahan-lama di tombol memunculkan menu "Salin/Bagikan" di iOS — tidak perlu di sini */
button, .cat-btn, .chip, .nav-item, .icon-btn { -webkit-touch-callout: none; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.22);
}
label.field {
  display: block; font-size: 0.82rem; font-weight: 600;
  color: var(--muted); margin: 14px 0 6px;
}

/* ===== Pemilih emoji (kategori & akun) ===== */
.emoji-field { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; }
.emoji-current {
  width: 48px; height: 48px; border-radius: 15px; background: var(--grad-soft);
  border: 1.5px solid var(--violet); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
}
.emoji-hint { color: var(--muted); font-size: 0.8rem; line-height: 1.4; }
.emoji-picker {
  max-height: 188px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--input-bg); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 11px;
}
.emoji-group + .emoji-group { margin-top: 12px; }
.emoji-group-label {
  font-size: 0.78rem; font-weight: 600; color: var(--muted); margin-bottom: 7px;
}
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 7px; }
.emoji-btn {
  height: 42px; padding: 0; font-size: 1.3rem; font-family: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--icon-bg); color: var(--ink);
  border: 1.5px solid transparent; border-radius: 13px;
  transition: transform 0.1s, border-color 0.1s, background 0.1s;
}
.emoji-btn:active { transform: scale(0.88); }
.emoji-btn.active { border-color: var(--violet); background: var(--grad-soft); }

/* ===== Segmented toggle ===== */
.segment {
  display: flex; background: var(--seg-bg); border: 1px solid var(--line);
  border-radius: 16px; padding: 4px; margin-bottom: 16px;
}
.segment button {
  flex: 1; border: none; background: transparent; padding: 11px;
  border-radius: 12px; font-size: 0.92rem; font-weight: 600; color: var(--muted); cursor: pointer;
  font-family: inherit; transition: color 0.15s;
}
.segment button.active { background: var(--grad); color: var(--on-grad); }
.segment.green button.active { background: var(--grad); }

/* ===== Chips ===== */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* Varian "tab": satu baris yang digeser ke samping. Dipakai di deretan tab
   Pengaturan & filter anggota Laporan — dibungkus jadi 3 baris ragged bikin
   header kelihatan berantakan dan tingginya lompat-lompat tiap ganti bahasa.
   Barisnya sengaja dibuat mepet ke tepi layar (margin negatif = padding
   container) supaya chip terakhir kepotong tepi — itu isyarat "masih ada
   lagi, geser". */
.chips.tabs {
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
  margin-inline: -16px; padding-inline: 16px; padding-block: 2px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.chips.tabs::-webkit-scrollbar { display: none; }
/* nowrap: tanpa ini label ikut pecah dua baris ("👥" di atas "Members") */
.chips.tabs .chip { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }
.chip {
  border: 1px solid var(--line); background: var(--card); border-radius: 12px;
  padding: 9px 15px; font-size: 0.88rem; font-weight: 700; cursor: pointer; color: var(--muted);
  font-family: inherit; transition: all 0.12s;
}
.chip.active {
  border-color: transparent; background: var(--grad); color: var(--on-grad);
  box-shadow: 0 4px 16px rgba(34, 211, 238, 0.25);
}

/* ===== Category grid ===== */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cat-item {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  border: 1px solid var(--line); background: var(--card); cursor: pointer;
  padding: 12px 4px 10px; border-radius: var(--radius-sm); font-family: inherit;
  transition: all 0.12s;
}
.cat-item .icon {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  font-size: 1.45rem; background: var(--icon-bg); border: none; border-radius: 14px;
}
.cat-item.active {
  border-color: transparent; background: var(--grad-soft);
  box-shadow: inset 0 0 0 1.5px var(--violet), 0 4px 18px rgba(124, 92, 255, 0.25);
}
.cat-item.active .icon { background: rgba(124, 92, 255, 0.25); }
.cat-item .name { font-size: 0.68rem; font-weight: 700; color: var(--muted); }
.cat-item.active .name { color: var(--ink); }

/* ===== Transaction list ===== */
.day-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 22px 6px 10px; font-size: 0.82rem; font-weight: 600; color: var(--muted);
}
.txn {
  display: flex; align-items: center; gap: 13px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 15px; margin-bottom: 9px; cursor: pointer;
  box-shadow: var(--card-shadow);
  transition: background 0.12s;
}
.txn:active { background: var(--hover); }
.txn .icon {
  font-size: 1.35rem; width: 42px; height: 42px; display: flex; align-items: center;
  justify-content: center; background: var(--icon-bg); border-radius: 13px; flex-shrink: 0;
}
.txn .info { flex: 1; min-width: 0; }
.txn .info .title { font-weight: 700; font-size: 0.94rem; display: flex; align-items: center; gap: 6px; }
.txn .info .sub { font-size: 0.76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.txn .amount { font-weight: 700; font-size: 0.94rem; white-space: nowrap; }
.txn .amount.expense { color: var(--red); }
.txn .amount.income { color: var(--green); }
.txn .amount.transfer { color: var(--cyan); }
/* Mode pilih di Jurnal: kotak centang di kiri + kartu yang kepilih disorot */
.txn .pick { font-size: 1.2rem; width: 20px; text-align: center; color: var(--muted); flex-shrink: 0; }
.txn.picked { border-color: var(--violet); background: var(--hover); }
.txn.picked .pick { color: var(--violet); }

/* Bar pilihan Jurnal: melayang tepat di atas nav bawah */
.selbar {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 40;
  bottom: calc(var(--nav-h) + 24px + env(safe-area-inset-bottom, 0px));
  width: min(560px, calc(100vw - 32px));
  display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px;
  background: var(--nav-bg); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--nav-shadow); backdrop-filter: blur(14px);
}
.selbar .grow { flex: 1; min-width: 0; }
.selbar .t { font-weight: 700; font-size: 0.88rem; }
.selbar .s { font-size: 0.8rem; color: var(--muted); }

/* ===== Account cards (gradasi neon) ===== */
.acct {
  border-radius: var(--radius); padding: 20px; color: #fff; margin-bottom: 13px;
  display: flex; justify-content: space-between; align-items: center;
  position: relative; overflow: hidden; border: 1px solid var(--line);
}
.acct::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  background: radial-gradient(80% 140% at 85% -20%, rgba(255, 255, 255, 0.18), transparent 60%);
}
.acct .name { font-weight: 600; font-size: 1.05rem; }
.acct .sub { font-size: 0.78rem; opacity: 0.75; margin-top: 3px; }
.acct .bal { font-weight: 700; font-size: 1.3rem; }
.acct.c0 { background: linear-gradient(130deg, #4c1d95, #7c5cff); }
.acct.c1 { background: linear-gradient(130deg, #155e75, #22d3ee); }
.acct.c2 { background: linear-gradient(130deg, #065f46, #34d399); }
.acct.c3 { background: linear-gradient(130deg, #9d174d, #fb7185); }
.acct.c4 { background: linear-gradient(130deg, #92400e, #fbbf24); }
.acct.c5 { background: linear-gradient(130deg, #1e3a8a, #60a5fa); }

/* ===== Rutin: komitmen tetap bulanan ===== */
.topbar-right {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  /* Kalau ikut turun ke baris kedua, isinya tetap rapat ke kanan */
  flex-wrap: wrap; justify-content: flex-end; margin-left: auto;
}
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex-shrink: 0;
  border: 1px solid var(--line); background: var(--card); border-radius: 50%;
  font-size: 1.05rem; line-height: 1; cursor: pointer; text-decoration: none;
  color: var(--ink); font-family: inherit;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: background 0.12s, transform 0.12s;
}
.icon-btn:active { transform: scale(0.93); background: var(--hover); }
.icon-btn:disabled { opacity: 0.4; }

/* Strip ringkas di Beranda menuju halaman Rutin */
.strip {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 15px; margin-bottom: 16px; color: var(--ink);
  box-shadow: var(--card-shadow); transition: background 0.12s;
}
.strip:active { background: var(--hover); }
.strip .ico {
  font-size: 1.15rem; width: 38px; height: 38px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-soft); border-radius: 12px;
}
.strip .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.strip .t { font-weight: 600; font-size: 0.92rem; }
.strip .s { font-size: 0.76rem; color: var(--muted); }
.strip .go { color: var(--muted); font-size: 1.3rem; font-weight: 700; flex-shrink: 0; }
/* Strip yang minta dibetulkan, bukan sekadar mengabari: dibedakan lewat garis
   tepi merah, bukan latar penuh — beranda bisa menampilkan beberapa strip
   sekaligus dan satu blok merah pekat bikin sisanya tidak kebaca. */
.strip.alert { border-color: var(--red); }
.strip.alert .ico { background: var(--red-soft); }
.strip.alert .t { color: var(--red); }

/* Progres pencatatan */
.prog-card { padding: 15px 18px; }
.prog-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.82rem; font-weight: 700; margin-bottom: 9px;
}
.prog { height: 7px; border-radius: 999px; background: var(--seg-bg); overflow: hidden; }
.prog-bar { height: 100%; border-radius: 999px; background: var(--grad); transition: width 0.3s; }
.hint { font-size: 0.78rem; margin-top: 8px; }

/* Baris jadwal: kalender kecil + info + nominal */
.rrow {
  display: flex; align-items: center; gap: 13px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 15px 11px 11px; margin-bottom: 9px; cursor: pointer;
  box-shadow: var(--card-shadow); transition: background 0.12s;
}
.rrow:active { background: var(--hover); }
.rrow .datechip {
  width: 46px; flex-shrink: 0; text-align: center; padding: 6px 0;
  background: var(--icon-bg); border-radius: 13px; line-height: 1.15;
}
.rrow .datechip b { display: block; font-size: 1.1rem; font-weight: 700; }
.rrow .datechip span {
  display: block; font-size: 0.68rem; font-weight: 500; color: var(--muted);
}
.rrow .datechip.empty { font-size: 1rem; color: var(--muted); padding: 13px 0; }
.rrow .info { flex: 1; min-width: 0; }
.rrow .info .title { font-weight: 700; font-size: 0.94rem; display: flex; align-items: center; gap: 6px; }
.rrow .info .sub {
  font-size: 0.75rem; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rrow .amount { font-weight: 700; font-size: 0.94rem; white-space: nowrap; }
.rrow .amount.expense { color: var(--red); }
.rrow .amount.income { color: var(--green); }
.rrow.posted .datechip { background: var(--grad-soft); }
.rrow.skipped, .rrow.dim { opacity: 0.5; }
.badge.ok { background: var(--grad-soft); color: var(--green); }

/* Bagian lanjutan di sheet (tanggal mulai/berakhir) — jarang dipakai, disembunyikan */
.more { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.more summary {
  cursor: pointer; font-size: 0.82rem; font-weight: 600; color: var(--muted);
  list-style: none;
}
.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: '▸ '; }
.more[open] summary::before { content: '▾ '; }

/* ===== Bottom nav: pil melayang ===== */
.bottom-nav {
  position: fixed; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  left: 50%; transform: translateX(-50%); z-index: 50;
  width: min(calc(100% - 24px), 480px);
  background: var(--nav-bg);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--line); border-radius: 24px;
  display: flex; justify-content: space-around; align-items: center;
  height: var(--nav-h);
  box-shadow: var(--nav-shadow);
}
.bottom-nav a {
  /* flex:1 supaya lima menu selalu bagi rata: label bahasa Inggris ("Recurring")
     lebih panjang dari bahasa Indonesia dan dengan padding tetap dulu melebihi
     lebar nav di layar 360-375px. */
  display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; align-items: center; gap: 3px;
  text-decoration: none; color: var(--muted); font-size: 0.68rem; font-weight: 600;
  padding: 8px 4px; border-radius: 16px; transition: color 0.15s;
  white-space: nowrap;
}
.bottom-nav a.active { color: var(--ink); }
.bottom-nav a.active .ico {
  background: var(--grad); border-radius: 12px;
  box-shadow: 0 4px 14px rgba(124, 92, 255, 0.45);
}
.bottom-nav a .ico {
  font-size: 1.25rem; line-height: 1; padding: 5px 9px; border-radius: 12px;
  transition: all 0.15s;
}

/* ===== Login ===== */
.login-wrap { max-width: 400px; margin: 7vh auto 0; margin-top: 7dvh; padding: 24px; text-align: center; }
.member-grid { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 26px 0; }
.member-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 28px; cursor: pointer; font-family: inherit; color: var(--ink);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: all 0.15s;
}
.member-card.active {
  border-color: transparent; background: var(--grad-soft);
  box-shadow: inset 0 0 0 1.5px var(--violet), 0 8px 30px rgba(124, 92, 255, 0.3);
}
.member-card .avatar {
  width: 64px; height: 64px; border-radius: 20px; background: var(--grad);
  display: flex; align-items: center; justify-content: center; font-size: 1.9rem;
  box-shadow: 0 6px 20px rgba(124, 92, 255, 0.4);
}
.member-card .nm { font-weight: 600; }
.pin-dots { display: flex; gap: 13px; justify-content: center; margin: 20px 0; }
.pin-dot { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--muted); transition: all 0.1s; }
.pin-dot.filled { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 10px rgba(34, 211, 238, 0.6); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 280px; margin: 0 auto; }
.pin-pad button {
  padding: 17px; font-size: 1.3rem; font-weight: 600; border: 1px solid var(--line);
  background: var(--card); border-radius: 16px; cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: inherit; color: var(--ink);
  transition: all 0.1s;
}
.pin-pad button:active { background: var(--grad-soft); transform: scale(0.95); }

/* ===== Modal / sheet ===== */
.sheet-backdrop {
  /* top/right/bottom/left ditulis eksplisit: `inset` baru ada di Safari 14.1 —
     kalau tidak dipahami, backdrop-nya mengempis dan sheet tidak kelihatan. */
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  background: var(--backdrop); z-index: 90;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; align-items: flex-end; justify-content: center;
  overscroll-behavior: contain;
}
.sheet {
  background: var(--card-solid); width: 100%; max-width: 640px;
  border: 1px solid var(--line); border-bottom: none;
  border-radius: 26px 26px 0 0; padding: 22px 18px calc(22px + env(safe-area-inset-bottom, 0px));
  max-height: 88vh; max-height: 88dvh;
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
@media (min-width: 700px) {
  .sheet-backdrop { align-items: center; }
  .sheet { border-radius: 26px; border-bottom: 1px solid var(--line); }
}
.sheet h3 { margin-bottom: 16px; font-size: 1.12rem; font-weight: 700; }

/* ===== Toast ===== */
.toast {
  position: fixed; bottom: calc(var(--nav-h) + 32px + env(safe-area-inset-bottom, 0px));
  left: 50%; transform: translateX(-50%);
  background: var(--nav-bg); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--ink); border-radius: 16px; padding: 12px 20px;
  font-size: 0.9rem; font-weight: 600; z-index: 100; display: flex; gap: 14px; align-items: center;
  white-space: nowrap; box-shadow: var(--nav-shadow);
}
.toast button { background: none; border: none; color: var(--link); font-weight: 700; cursor: pointer; font-size: 0.9rem; font-family: inherit; }

/* ===== Misc ===== */
.empty { text-align: center; color: var(--muted); padding: 34px 10px; font-size: 0.92rem; }
.empty a { color: var(--link); }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; }
.muted { color: var(--muted); }
.list-item {
  display: flex; align-items: center; gap: 10px; padding: 13px 4px;
  border-bottom: 1px solid var(--line);
}
.list-item:last-child { border-bottom: none; }
.list-item .grow { flex: 1; min-width: 0; }
.list-item.link-row { flex-wrap: wrap; }
.list-item.link-row .grow { min-width: 110px; }
.link-row .acts { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.badge {
  font-size: 0.72rem; font-weight: 600; padding: 3px 9px; border-radius: 8px;
  background: var(--grad-soft); color: var(--link);
}
.badge.off { background: var(--badge-off-bg); color: var(--muted); }
.badge.warn { background: var(--red-soft); color: var(--red); }
/* Penanda "wajib dipilih" di judul kartu, dan kedipan kartunya saat tombol
   simpan mengantar ke sini. Kedipannya dibatasi 3 kali lalu berhenti: yang
   berkedip terus malah jadi latar dan tidak lagi dibaca. */
h2 .req {
  margin-left: 8px; font-size: 0.72rem; font-weight: 600; padding: 3px 8px; border-radius: 8px;
  background: var(--red-soft); color: var(--red); vertical-align: middle;
}
.card.flash { animation: cardFlash 0.6s ease-in-out 3; }
@keyframes cardFlash {
  0%, 100% { border-color: var(--line); }
  50% { border-color: var(--red); }
}
@media (prefers-reduced-motion: reduce) {
  .card.flash { animation: none; border-color: var(--red); }
}

/* Tombol catat: satu (+) melayang, sejajar tepi kanan nav bawah. */
.fab {
  position: fixed; z-index: 60;
  bottom: calc(var(--nav-h) + 22px + env(safe-area-inset-bottom, 0px));
  right: max(14px, calc(50% - 240px));
  width: 58px; height: 58px; border-radius: 50%;
  border: none; background: var(--grad); color: var(--on-grad);
  font-size: 2rem; font-weight: 300; line-height: 1; font-family: inherit;
  cursor: pointer; box-shadow: 0 8px 24px rgba(124, 92, 255, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding-bottom: 4px; transition: transform 0.12s;
}
.fab:active { transform: scale(0.92); }

/* Kartu di dalam sheet cuma pembagi ruang, bukan kartu lagi: latar sheet
   sudah solid, jadi kartu di atas kartu bikin dua lapis bingkai yang tidak
   menambah apa-apa. */
.sheet .card {
  background: transparent; box-shadow: none; border: none; padding: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none; margin-bottom: 18px;
}
/* Kedipannya di sini pakai latar, bukan garis tepi — kartunya sudah tidak
   punya garis tepi, jadi yang berkedip harus sesuatu yang memang ada. */
.sheet .card.flash { animation: cardFlashSoft 0.6s ease-in-out 3; border-radius: 14px; }
@keyframes cardFlashSoft {
  0%, 100% { background: transparent; }
  50% { background: var(--red-soft); }
}
@media (prefers-reduced-motion: reduce) {
  .sheet .card.flash { animation: none; background: var(--red-soft); }
}
/* Ditulis `input.amount-display`, bukan `.amount-display` saja: selektor
   `input[type="text"]` di atas lebih spesifik, jadi versi lama kalah dan
   nominalnya ikut ke-render 16px berbingkai, bukan angka besar polos. */
input.amount-display {
  font-size: 2.3rem; font-weight: 700; text-align: center; width: 100%;
  border: none; background: transparent; color: var(--ink); font-family: inherit;
  padding: 6px 0;
}
input.amount-display:focus { outline: none; box-shadow: none; }
.link-code {
  font-size: 2rem; font-weight: 700; letter-spacing: 0.3em; text-align: center; margin: 12px 0;
  color: var(--violet);
  -webkit-user-select: all; user-select: all;  /* biar gampang disalin dari HP */
}
canvas { max-width: 100%; }
.chart-box { position: relative; height: 240px; }
a { color: var(--link); }

/* ===== Tabungan (halaman Saldo) ===== */
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 20px 0 10px;
}
.saving-card { margin-bottom: 12px; }
.progress {
  height: 8px; border-radius: 99px; background: var(--badge-off-bg);
  overflow: hidden; margin-top: 10px;
}
.progress-fill {
  height: 100%; border-radius: 99px; background: var(--grad);
  transition: width 0.4s ease;
}
.progress-fill.over { background: var(--red); }
.progress-fill.warn { background: var(--amber); }

/* ===== Sorotan hari ini ===== */
/* Angkanya sengaja sebesar ini: beranda dibuka sambil jalan, dan satu angka
   yang bisa dibaca sekilas lebih berguna daripada lima angka yang harus
   didekatkan ke mata dulu. */
.today-card { padding: 16px 16px 14px; }
.today-head { font-size: 0.78rem; color: var(--muted); font-weight: 600; }
.today-amount {
  font-size: 2rem; font-weight: 700; line-height: 1.15; margin-top: 2px;
}
.today-amount.warn { color: var(--amber); }
.today-amount.over { color: var(--red); }
.today-sub {
  display: flex; justify-content: space-between; gap: 10px;
  margin-top: 7px; font-size: 0.78rem; color: var(--muted);
}
.today-sub .delta { font-weight: 700; color: var(--green); white-space: nowrap; }
.today-sub .delta.warn { color: var(--amber); }
.today-sub .delta.over { color: var(--red); }
.today-in { margin-top: 8px; font-size: 0.8rem; font-weight: 600; color: var(--green); }

/* ===== Grafik tujuh hari ===== */
/* align-items: flex-end supaya batang tumbuh dari bawah; tingginya tetap 96px
   walau semua hari nol, biar kartunya tidak mengkerut dan melompat tiap kali
   ada catatan baru masuk. */
.week-card { padding: 14px 16px 12px; }
.week-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; font-size: 0.78rem; color: var(--muted); font-weight: 600;
}
.week-head .total { font-size: 0.9rem; font-weight: 700; color: var(--ink); }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 96px; margin-top: 12px; }
.bar-col { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.bar {
  width: 100%; min-height: 0; border-radius: 7px 7px 3px 3px;
  background: var(--grad-soft); border: 1px solid var(--line);
  transition: height 0.4s ease;
}
/* Hari ini disorot penuh. Tanpa ini, mencari "hari ini" di antara tujuh batang
   seragam harus dihitung mundur pakai jari. */
.bar.now { background: var(--grad); border-color: transparent; }
.bar-labels { display: flex; gap: 6px; margin-top: 6px; }
.bar-labels span {
  flex: 1; text-align: center; font-size: 0.68rem; color: var(--muted);
  text-transform: capitalize;
}
.bar-labels span.now { color: var(--ink); font-weight: 700; }
.week-avg { margin-top: 8px; font-size: 0.76rem; color: var(--muted); }
.week-none { margin: 12px 0 2px; font-size: 0.85rem; color: var(--muted); }

/* Strip bernuansa: dipakai buat angka yang cuma perlu dilihat, bukan diurus.
   Beda dari .strip.alert yang bergaris merah karena minta dibetulkan. */
.strip.tinted { background: var(--grad-soft); }
.strip .val { font-weight: 700; font-size: 1rem; white-space: nowrap; }
.strip .val.neg { color: var(--red); }

/* Baris anggaran di rincian Laporan */
.budget-line { margin-top: 2px; }
.budget-line .progress { margin-top: 6px; margin-bottom: 4px; }
.budget-line .muted { font-size: 0.78em; }
.budget-line .budget-over { color: var(--red); font-weight: 700; }

/* "Siapa pakai berapa" — baris anggota yang bisa dibuka di Laporan.
   Garis pemisah dipindah ke pembungkus supaya bar porsi ikut di atas garis. */
.who-wrap { border-bottom: 1px solid var(--line); }
.who-wrap:last-child { border-bottom: none; }
.who-row { cursor: pointer; border-bottom: none; }
.who-row .caret { color: var(--muted); font-size: 1.1rem; font-weight: 700; flex-shrink: 0; }
.who-bar { cursor: pointer; padding: 0 0 12px 34px; }
.who-bar .progress { margin-top: 0; margin-bottom: 5px; }
.who-bar .muted { font-size: 0.78rem; }
/* Bar jatah pribadi duduk tepat di bawah bar porsi — jaraknya dirapatkan
   supaya kebaca sebagai dua ukuran atas orang yang sama, bukan dua baris
   yang tak berhubungan. */
.who-allow { padding-top: 0; margin-top: -4px; }
.who-detail { padding: 2px 0 14px 34px; }
.who-line {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 5px 0; font-size: 0.88rem;
}
.who-line span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pencarian jurnal */
/* Kolom cari: ikon kaca pembesar digambar sebagai background (pola yang sama
   dengan panah select di atas), tombol bersihkan ditaruh DI DALAM kotak supaya
   lebar kotaknya tidak melompat begitu user mulai mengetik. */
.search-bar { position: relative; margin-bottom: 12px; }
.search-bar input[type="search"] {
  margin: 0; padding-left: 44px; padding-right: 44px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%238b93a8' stroke-width='1.6' stroke-linecap='round' d='M7 1.8a5.2 5.2 0 1 0 0 10.4A5.2 5.2 0 0 0 7 1.8zm3.9 8.9 3.3 3.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 15px center; background-size: 17px;
}
.search-bar .clear {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; font-size: 0.95rem;
}
.search-bar .clear:active { transform: translateY(-50%) scale(0.9); }

/* Widget tabungan di Beranda */
a.savings-mini { display: block; text-decoration: none; color: inherit; }
.savings-mini .head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.savings-mini .head h2 { margin: 0; }
.savings-mini .total { font-weight: 700; }
.savings-mini .mini-row { margin-bottom: 10px; }
.savings-mini .mini-row .line { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.savings-mini .mini-row .val { font-weight: 600; white-space: nowrap; }
.savings-mini .see-more { text-align: right; font-size: 0.85em; color: var(--muted, #888); margin-top: 2px; }
.savings-mini .mini-group { margin-bottom: 10px; }
.savings-mini .group-label { font-size: 0.84em; font-weight: 600; color: var(--muted, #888); margin-bottom: 6px; }
.savings-mini .none { font-size: 0.85em; color: var(--muted, #888); font-style: italic; margin-bottom: 4px; }

/* Elemen yang cuma masuk akal di browser — disembunyikan saat halaman dibuka
   dari dalam APK Android (kelas is-app dipasang oleh public/js/native.js) */
.is-app .only-web { display: none !important; }

/* Ikon aplikasi di halaman publik (masuk, daftar, landing) */
.brand-logo { display: block; margin: 0 auto 14px; border-radius: 20px; box-shadow: 0 10px 30px rgba(124, 92, 255, 0.28); }

/* ===== Daftar langkah bernomor (halaman pasang APK + landing) ===== */
/* Label kartu warnanya redup karena isinya yang penting; di halaman
   penjelasan judulnya kalimat utuh yang memang harus dibaca duluan. */
.card h2.plain { font-size: 1rem; color: var(--ink); margin-bottom: 10px; }
.guide .card p { font-size: 0.9rem; line-height: 1.55; }

.steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 16px; }
.steps li {
  counter-increment: step; position: relative;
  padding: 0 0 18px 46px;
  font-size: 0.9rem; line-height: 1.55;
}
/* Garis penyambung antar nomor; dipotong di langkah terakhir supaya tidak
   menggantung di bawah butir penutup. */
.steps li::after {
  content: ''; position: absolute; left: 15px; top: 34px; bottom: 4px;
  width: 2px; background: var(--line);
}
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::after { display: none; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad); color: var(--on-grad);
  font-weight: 700; font-size: 0.85rem;
}
.steps b { display: block; margin-bottom: 3px; font-size: 0.95rem; }
.steps span { color: var(--muted); }

/* ===== Landing page (halaman / untuk pengunjung yang belum login) ===== */
/* Semuanya diawali .lp supaya tidak ada satu pun aturan di sini yang bocor ke
   halaman aplikasi — landing ini satu-satunya halaman yang lebarnya bukan 640px. */
.lp { max-width: 720px; margin: 0 auto; padding: 0 16px 40px; }
/* Layar lega: kolomnya dilebarkan supaya isinya tidak jadi pita kurus di
   tengah layar kosong, tapi tetap dibatasi — teks yang barisnya kepanjangan
   justru lebih capek dibaca. Lebarnya naik bertahap dan HARUS sama dengan
   .lp-top-in di bawah, kalau tidak logo di bar tidak sejajar dengan isi. */
@media (min-width: 900px) { .lp { max-width: 860px; } }
@media (min-width: 1024px) { .lp { max-width: 1000px; padding-bottom: 56px; } }

/* Bar-nya selebar layar (elemennya memang di luar .lp), isinya yang dikurung.
   Dulu bar ini ikut selebar konten, jadi di layar lebar dia jadi pita
   mengambang di tengah dan di HP garisnya berhenti persis di logo. */
.lp-top {
  position: sticky; top: 0; z-index: 20;
  margin-bottom: 14px; background: var(--bg);
  /* Batas bawah baru muncul setelah digulir? Terlalu ribet untuk halaman ini;
     garis tipis permanen sudah cukup memisahkan dari isi. */
  border-bottom: 1px solid var(--line);
}
.lp-top-in {
  max-width: 720px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 22px;
}
@media (min-width: 900px) { .lp-top-in { max-width: 860px; } }
@media (min-width: 1024px) { .lp-top-in { max-width: 1000px; } }
.lp-top-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.lp-top-brand img { border-radius: 8px; }
.lp-top-brand .brand { font-size: 1.05rem; }
.lp-top-act { display: flex; align-items: center; gap: 8px; }
.lp-lang {
  background: none; border: 1px solid var(--line); color: var(--muted);
  border-radius: 10px; padding: 7px 10px; font-size: 0.78rem; font-weight: 600;
}
.lp-top .btn.small { width: auto; text-decoration: none; }

/* Layar sempit: tombol dirapatkan supaya tiga elemen tetap muat satu baris
   tanpa harus menempel ke tepi. */
@media (max-width: 380px) {
  .lp-top-in { padding: 14px 18px; }
  .lp-top .btn.small { padding: 9px 14px; }
}

/* --- Bagian pertama: sapaan + tiruan aplikasi --- */
.lp-hero { text-align: center; padding: 30px 0 6px; }
/* Nama panjang produk. Ditaruh di atas tagline dan dibuat kecil: yang
   membuat orang berhenti membaca itu kalimatnya, nama cuma perlu ada. */
.lp-kicker { font-size: 0.8rem; font-weight: 600; color: var(--muted); margin: 0 0 8px; }
.lp-h1 {
  font-size: 1.72rem; line-height: 1.22; font-weight: 700;
  margin: 4px 0 0;
}
.lp-sub {
  color: var(--muted); font-size: 0.95rem; line-height: 1.6;
  margin: 12px auto 0; max-width: 30em;
}
/* Dua tombol berdampingan di layar lega, bertumpuk di HP sempit */
.lp-cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; }
.lp-cta .btn { width: auto; flex: 1 1 220px; text-align: center; text-decoration: none; }
.lp-free { color: var(--muted); font-size: 0.78rem; text-align: center; margin-top: 12px; }

/* --- Tiruan tampilan aplikasi (bukan tangkapan layar) --- */
.lp-mock { margin: 26px 0 34px; perspective: 900px; }

/* Mulai muat berdampingan sekitar 900px: teks di kiri, tiruan aplikasi di
   kanan. Di bawah itu tetap bertumpuk dan rata tengah seperti di HP. */
@media (min-width: 900px) {
  .lp-fold {
    display: grid; grid-template-columns: 1.05fr 0.95fr;
    align-items: center; gap: 44px; margin-top: 18px;
  }
  .lp-hero { text-align: left; padding: 20px 0; }
  .lp-hero .brand-logo { margin-left: 0; }
  .lp-h1 { font-size: 2.1rem; }
  .lp-sub { margin-left: 0; font-size: 1rem; }
  /* Rata kiri HANYA di bagian sapaan. Ajakan penutup di bawah halaman
     rata tengah, jadi tombolnya jangan ikut ditarik ke kiri. */
  .lp-hero .lp-cta { justify-content: flex-start; }
  .lp-hero .lp-free { text-align: left; }
  /* Tombol berhenti melar: di kolom selebar 1000px, dua tombol yang
     saling mendorong jadi selebar setengah layar. */
  .lp-cta .btn { flex: 0 1 auto; padding-left: 26px; padding-right: 26px; }
  .lp-mock { margin: 0; }
  .mock-card { max-width: 380px; margin-right: 0; }
}
@media (min-width: 1100px) { .lp-h1 { font-size: 2.5rem; } }
.mock-card {
  background: var(--card-solid); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.28);
  max-width: 340px; margin: 0 auto;
}
.mock-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mock-head b { font-size: 0.95rem; }
.mock-pill { width: 46px; height: 8px; border-radius: 99px; background: var(--grad); opacity: 0.7; }
.mock-sum { display: flex; gap: 8px; margin-bottom: 14px; }
.mock-sum div { flex: 1; background: var(--hover); border-radius: var(--radius-sm); padding: 9px 10px; }
.mock-sum span { display: block; color: var(--muted); font-size: 0.7rem; }
.mock-sum b { font-size: 0.82rem; }
.mock-rows { display: flex; flex-direction: column; gap: 12px; }
.mock-row { display: flex; align-items: center; gap: 10px; }
.mock-ic {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--hover); font-size: 0.95rem;
}
.mock-txt { flex: 1; min-width: 0; }
.mock-txt b { display: block; font-size: 0.82rem; }
.mock-txt span { color: var(--muted); font-size: 0.7rem; }
.mock-row em { font-style: normal; font-weight: 700; font-size: 0.82rem; white-space: nowrap; }
.mock-row .pos, .mock-sum .pos { color: var(--green); }
.mock-row .neg, .mock-sum .neg { color: var(--red); }

/* --- Bagian-bagian isi --- */
.lp-sec { margin: 34px 0; }
@media (min-width: 900px) { .lp-sec { margin: 48px 0; } }
.lp-sec > h2 {
  font-size: 1.18rem; font-weight: 700; margin: 0 0 14px;
}
/* Baris teks dijaga tetap pendek walau kolomnya melebar. */
.lp-lead { font-size: 0.92rem; line-height: 1.65; color: var(--muted); margin: 0; max-width: 62ch; }

.lp-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .lp-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .lp-grid { grid-template-columns: repeat(3, 1fr); } }
.lp-feat {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 14px;
}
.lp-feat b { display: block; font-size: 0.9rem; margin-bottom: 5px; }
.lp-feat span { color: var(--muted); font-size: 0.84rem; line-height: 1.55; }

/* Jawaban FAQ disembunyikan sampai diketuk: pengunjung yang cuma mau daftar
   tidak perlu menggulir melewati empat paragraf. */
.lp-faq {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; margin-bottom: 8px; background: var(--card);
}
.lp-faq summary {
  font-weight: 700; font-size: 0.9rem; list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: '+'; color: var(--muted); font-weight: 700; }
.lp-faq[open] summary::after { content: '−'; }
.lp-faq p { margin: 10px 0 0; color: var(--muted); font-size: 0.87rem; line-height: 1.6; }

.lp-final {
  text-align: center; margin: 40px 0 0; padding: 28px 18px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--grad-soft);
}
.lp-final h2 { font-size: 1.25rem; font-weight: 700; margin: 0 0 10px; }
.lp-final .lp-lead { max-width: 32em; margin: 0 auto; }
.lp-apk {
  display: inline-block; margin-top: 18px; color: var(--link);
  font-size: 0.88rem; font-weight: 600; text-decoration: none;
}

.lp-foot {
  margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line);
  text-align: center;
}
.lp-foot .brand { font-size: 0.95rem; display: block; margin-bottom: 4px; }
.lp-foot span { color: var(--muted); font-size: 0.78rem; }

/* ===== Dokumen hukum (/syarat & /privasi) =====
   Dibaca sambil berpikir, bukan sambil scroll cepat: baris dibuat lebih renggang
   dan lebar teks lebih sempit dari halaman lain supaya matanya tidak capek. */
.legal { max-width: 640px; }
.legal-head { margin: 26px 0 8px; }
.legal-head h1 { font-size: 1.5rem; margin: 0 0 8px; }
.legal-meta { color: var(--muted); font-size: 0.76rem; margin: 12px 0 0; }
.legal-meta a { color: var(--muted); }

.legal-toc {
  margin: 22px 0 8px; padding: 14px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
}
.legal-toc ol { margin: 0; padding-left: 20px; }
.legal-toc li { margin: 5px 0; font-size: 0.86rem; }
.legal-toc a { color: var(--ink); text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; }

.legal-sec { margin: 30px 0; scroll-margin-top: 16px; }
.legal-sec > h2 {
  font-size: 1.02rem; margin: 0 0 10px;
  display: flex; align-items: center; gap: 9px;
}
.legal-num {
  flex: none; width: 22px; height: 22px; border-radius: 7px;
  background: var(--line); color: var(--muted);
  font-size: 0.72rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.legal-sec p { font-size: 0.9rem; line-height: 1.7; color: var(--muted); margin: 0 0 11px; }
.legal-sec p:last-child { margin-bottom: 0; }
.legal-sec a { color: var(--link); }
.legal-list { margin: 0 0 11px; padding-left: 20px; }
.legal-list li { font-size: 0.9rem; line-height: 1.7; color: var(--muted); margin: 0 0 7px; }

.lp-foot .btn.small { width: auto; text-decoration: none; display: inline-block; }

/* ===== Centang persetujuan (daftar / setup) ===== */
.consent-box { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.consent {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: .86rem; line-height: 1.45; cursor: pointer;
}
.consent input[type="checkbox"] {
  width: 20px; height: 20px; flex: none; margin: 1px 0 0; accent-color: var(--link);
}
.consent a { color: var(--link); }
.consent-hint {
  display: block; margin-top: 4px;
  color: var(--muted); font-size: .78rem; line-height: 1.4;
}
.lp-foot-legal { display: block; margin-top: 10px; }
.lp-foot-legal a { color: var(--link); }

/* --- Mulai dari nol: kartu & konfirmasi --- */
/* Dibingkai merah tipis supaya jelas ini bukan tombol biasa, tapi tidak
   berteriak — kartunya duduk paling bawah di tab Sampah. */
.danger-zone { border: 1px solid var(--red-soft); }
.danger-zone h2 { color: var(--red); }
.warn-note {
  background: var(--red-soft); color: var(--red);
  padding: 10px 12px; border-radius: var(--radius-sm);
  font-size: .82rem; line-height: 1.45; margin-bottom: 4px;
}
.clr-list { margin: 4px 0 10px; padding-left: 20px; font-size: .86rem; line-height: 1.7; }
.clr-list li { color: var(--red); }
.clr-list.keep li { color: var(--muted); }
.clr-list b { color: inherit; }

/* --- Panel operator --- */
/* Cuma dipakai halaman /admin. Sengaja dibikin seadanya: ini alat kerja satu
   orang, bukan halaman yang perlu tampil manis. */
.adm-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px) { .adm-stats { grid-template-columns: repeat(3, 1fr); } }
.adm-stat {
  background: var(--input-bg); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 2px;
}
.adm-stat .n { font-size: 1.35rem; font-weight: 700; color: var(--ink); }
.adm-stat .l { font-size: .74rem; color: var(--muted); line-height: 1.3; }
.adm-member { border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 10px; }
.adm-member:last-child { border-bottom: none; margin-bottom: 0; }
.adm-actions { background: var(--input-bg); border-radius: 12px; padding: 12px 14px; margin-top: 6px; }
.adm-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-btns .btn.small { flex: 1 1 auto; }
.adm-link {
  margin-top: 12px; padding: 10px 12px; border-radius: 10px;
  background: var(--bg); border: 1px dashed var(--line); font-size: .76rem;
}

/* Halaman lupa PIN / verifikasi memakai .login-wrap yang sudah ada; yang perlu
   ditambah cuma jarak tombol di dalam kartunya. */
.login-wrap .card .btn + .btn { margin-top: 10px; }