:root {
  --bg: #fff7f5;
  --card: #ffffff;
  --primary: #e0698a;
  --primary-dark: #c14b6c;
  --ink: #2e2130;
  --muted: #7a6b73;
  --border: #f0dfe2;
  --locked-bg: #f6f1f2;
  /* item (final): dipakai untuk state aktif tab Trimester di modul risiko —
     sebelumnya tab itu pakai var(--pink) yang TIDAK PERNAH didefinisikan di
     sini, jadi tombol aktif tidak kelihatan warnanya sama sekali (bug laten).
     Warna diambil dari nuansa ungu tua yang sama dengan gradient navbar
     bawah (#2e2130 -> #4a3350 -> #6b3a55) supaya konsisten dengan sistem
     warna app. */
  --purple: #6b3a55;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  /* item 7 (lalu dinaikkan sedikit lagi per item 5 ronde ini, 15.5px -> 16px),
     lalu final round: 16px -> 17px per permintaan klien ("agak lebih besar,
     tidak terlalu besar juga, tidak terlalu kecil") — base sedikit lebih
     besar biar lebih nyaman dibaca — kebanyakan teks di app ini pakai ukuran
     eksplisit kecil (12.5–14.5px), jadi base body ini jadi acuan untuk
     elemen yang tidak override sendiri. */
  font-size: 17px;
  /* item 10: jaring pengaman global — apa pun yang overflow horizontal
     (elemen fixed-width yang lebih lebar dari viewport, dll) dipotong di
     sini alih-alih membuat seluruh halaman bisa digeser ke samping.
     Tidak ada elemen di app ini yang sengaja butuh scroll horizontal
     (semua tabel/grid pakai layout responsif), jadi ini aman. */
  overflow-x: hidden;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 24px 20px 110px; }
.hero {
  text-align: center;
  /* item 6: jarak atas dikurangi lagi (sebelumnya 22px) supaya headline
     makin dekat ke bagian atas layar, tidak ada jarak kosong berlebih. */
  padding: 10px 16px 20px;
  margin: 0 -20px;
  background: linear-gradient(160deg, #fff7f5 0%, #fdeef3 55%, #fbe3ec 100%);
}
.hero h1 { font-size: 26px; margin: 12px 0 8px; line-height: 1.3; }
.hero p { color: var(--muted); font-size: 15px; margin: 0 auto; max-width: 480px; }
.badge {
  display: inline-block;
  background: #fde7ee;
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
}
.stack {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 20px;
  margin: 24px 0;
}
.stack-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 14px;
}
.stack-item:last-of-type { border-bottom: none; }
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 12px;
}
.price-old { text-decoration: line-through; color: var(--muted); font-size: 14px; }
.price-new { font-size: 28px; font-weight: 800; color: var(--primary-dark); }
.btn {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  margin-top: 8px;
}
.btn:hover { background: var(--primary-dark); }
.btn.secondary { background: #fff; color: var(--primary-dark); border: 1px solid var(--primary); }
#g_id_signin_wrap { display: flex; justify-content: center; margin: 20px 0; }
.module-list { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.module {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
}
.module.locked { background: var(--locked-bg); }
.module .icon { font-size: 24px; }
.module h4 { margin: 0 0 4px; font-size: 17.5px; }
.module p { margin: 0; font-size: 14.5px; color: var(--muted); }
.lock-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary-dark);
  background: #fde7ee;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: auto;
  white-space: nowrap;
}
/* item 11: latar gradient ungu premium yang sama dengan navbar bawah,
   supaya chrome atas & bawah aplikasi terasa satu sistem yang konsisten,
   bukan atas polos/putih + bawah premium gelap. Teks/ikon disesuaikan ke
   warna terang supaya tetap kontras jelas di atas latar gelap ini. */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  margin: 0 -20px 16px;
  background: linear-gradient(165deg, #2e2130 0%, #4a3350 55%, #6b3a55 100%);
  color: #fff;
}
.topbar .user { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.85); }
.topbar img { width: 28px; height: 28px; border-radius: 50%; }
.topbar a, .topbar .back-link { color: rgba(255,255,255,.85); }
.content-body { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 20px; margin-top: 16px; line-height: 1.65; }
.content-body h3 { color: var(--primary-dark); font-size: 16px; }
.locked-wall {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  margin-top: 16px;
  text-align: center;
}
.locked-wall .icon { font-size: 40px; }
.back-link { font-size: 13px; color: var(--muted); text-decoration: none; }
.note { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 16px; }
.disclaimer { font-size: 11.5px; color: var(--muted); background: #fbeff2; border-radius: 10px; padding: 10px 14px; margin-top: 16px; }

.trust-bar { display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin-top:18px; padding:16px 14px; border-radius:16px; background:linear-gradient(150deg, #fdf1f5 0%, #f7dde8 100%); }
.trust-bar div { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); font-weight:600; }
.trust-bar span { font-size:15px; }

.card { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px 20px; }

.stack-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; }
.stack-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px; display:flex; gap:10px; align-items:flex-start; }
.stack-card .stack-icon { font-size:20px; }
.stack-card div { display:flex; flex-direction:column; gap:4px; }
.stack-card strong { font-size:12.5px; line-height:1.35; }
.stack-card span { font-size:12px; color:var(--primary-dark); font-weight:700; }
@media (max-width:480px) { .stack-grid { grid-template-columns:1fr; } }

/* Landscape/pil (lebar, bukan kotak) supaya tidak menutupi banyak layar
   secara vertikal — ikon & label sejajar horizontal. */
.fab {
  position: fixed;
  bottom: calc(72px + env(safe-area-inset-bottom));
  z-index: 50;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  max-width: 150px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 8px 18px -6px rgba(224,105,138,.55);
  cursor: pointer;
  text-align: center;
  border: none;
}
.fab span { font-size: 10.5px; font-weight: 700; line-height: 1.15; text-align: left; }
.fab-left { left: 16px; background: #2e2130; box-shadow: 0 8px 18px -6px rgba(46,33,48,.5); }
.fab-right { right: 16px; }
.fab-close {
  position: absolute; top: -6px; right: -6px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; color: #2e2130; border: 1px solid var(--border);
  font-size: 11px; line-height: 1; display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.fab-wrap { position: fixed; bottom: calc(72px + env(safe-area-inset-bottom)); left: 16px; z-index: 50; }
@media (min-width: 760px) {
  .fab-left, .fab-wrap { left: calc(50% - 360px - 20px); }
  .fab-right { right: calc(50% - 360px - 20px); }
}
.pwa-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: flex; align-items: flex-end; justify-content: center; z-index: 100;
}
.pwa-modal-box { background: #fff; border-radius: 16px 16px 0 0; padding: 20px; width: 100%; max-width: 480px; }
@media (min-width: 540px) {
  .pwa-modal { align-items: center; }
  .pwa-modal-box { border-radius: 16px; }
}

/* --- Konten modul: bikin terasa lebih "aplikasi", bukan dokumen polos --- */
.content-body { line-height: 1.75; }
.content-body h3 {
  display: inline-block;
  color: var(--primary-dark);
  background: #fde7ee;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 14px;
  margin: 22px 0 10px;
}
.content-body h3:first-child { margin-top: 0; }
.content-body p { margin: 0 0 14px; font-size: 16px; }
.content-body h4 { font-size: 14px; color: var(--ink); margin: 16px 0 8px; }
.content-body strong { color: var(--primary-dark); }

.hero-banner { width: 100%; border-radius: 18px; display: block; margin-top: 16px; object-fit: cover; max-height: 180px; }
.module-banner { width: 100%; height: 90px; object-fit: cover; border-radius: 14px 14px 0 0; display: block; opacity: .9; }
/* Di layar lebar (tablet/laptop/desktop), jangan crop banner ke kotak
   tetap — biarkan mengikuti rasio asli gambarnya. */
@media (min-width: 768px) {
  .module-banner { height: auto; width: 100%; max-width: 100%; margin: 0; }
}

/* --- Section "buka semua modul" — background beda & lebih menarik --- */
.unlock-section {
  margin-top: 20px;
  background: linear-gradient(150deg, #2e2130 0%, #4a3350 55%, #7a3d5c 100%);
  border-radius: 20px;
  padding: 22px 20px;
  color: #fff;
}
.unlock-section h2 { color: #fff; margin: 0 0 4px; }
.unlock-section .stack-card { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); }
.unlock-section .stack-card strong { color: #fff; }
.unlock-section .stack-card span { color: #f5c4d4; }
.unlock-section .stack { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.unlock-section .price-old { color: rgba(255,255,255,.6); }
.unlock-section .price-new { color: #ffd9e6; }

/* --- Header floating (sticky, ringkas) --- */
/* item 11: gradient ungu premium yang sama dengan navbar bawah/.topbar,
   supaya chrome atas & bawah senada — teks disesuaikan ke putih/terang. */
.topbar-floating {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  margin: 0 -20px 14px;
  background: linear-gradient(165deg, #2e2130 0%, #4a3350 55%, #6b3a55 100%);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.topbar-floating strong { font-size: 13.5px; }
.topbar-floating .back-link { flex-shrink:0; color: rgba(255,255,255,.85); }
/* item 5: judul modul terlihat jelas di header atas tiap halaman modul,
   dipotong dengan ellipsis kalau judulnya panjang supaya tidak overflow. */
.topbar-floating .topbar-module-title { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right; color:#fff; }
.greet-prompt { flex: 1; }

/* --- Progress harian: water & mood tracker --- */
.water-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.water-glass { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 15px; background: #fff; }
.water-glass.filled { background: #cfe8fb; border-color: #8fc2ea; }
.mood-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.mood-btn { border: 1px solid var(--border); background: #fff; border-radius: 12px; padding: 10px 12px; font-size: 20px; cursor: pointer; }
.mood-btn.active { background: var(--primary); border-color: var(--primary); }
.nf-mood-btn { border: 1px solid var(--border); background: #fff; }
.nf-mood-btn.active { background: var(--primary); border: 2px solid var(--primary-dark); box-shadow: 0 0 0 2px #fde7ee; }

/* --- Toggle minggu/bulan & pilihan sejenis: tandai jelas yang aktif --- */
.food-period-btn.active, .toggle-btn.active {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}

/* --- "Kesulitan biaya?" helper --- */
.budget-help-toggle {
  background: none; border: none; color: var(--primary-dark); font-size: 12px;
  font-weight: 700; text-decoration: underline; cursor: pointer; padding: 4px 0; margin-top: 6px;
}
.budget-help-box { background: #fff7f5; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-top: 8px; font-size: 12.5px; line-height: 1.6; }

/* --- Grafik progress harian: bar chart sederhana --- */
.progress-chart { display: flex; align-items: flex-end; gap: 6px; height: 90px; margin: 14px 0 6px; }
.progress-chart .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.progress-chart .bar { width: 100%; max-width: 22px; background: var(--primary); border-radius: 5px 5px 0 0; min-height: 3px; }
.progress-chart .bar-label { font-size: 9px; color: var(--muted); margin-top: 4px; }

.module-link { color: var(--primary-dark); font-weight: 700; text-decoration: underline; }

.unlock-section .budget-help-toggle { color:#ffd9e6; }
.unlock-section .budget-help-box { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); color:#fff; }

/* --- Landing page: beberapa section dikasih background premium/elegan,
   biar tidak semua putih polos --- */
.card-premium-dark {
  background: linear-gradient(150deg, #2e2130 0%, #4a3350 55%, #7a3d5c 100%);
  border-color: transparent;
  color: #fff;
}
.card-premium-tint {
  background: linear-gradient(150deg, #fff7f5 0%, #fbe9ef 60%, #f7dde8 100%);
  border-color: #f0d4de;
}

/* --- Section checklist di dalam modul: background lembut & elegan,
   supaya terasa beda dari teks biasa dan lebih premium --- */
.checklist-block {
  background: linear-gradient(150deg, #fffaf6 0%, #fdf1f5 100%);
  border: 1px solid #f3dee6;
  border-radius: 14px;
  padding: 14px 16px 6px;
}

/* --- Progress bunda/ayah: tombol level & pilihan sejenis --- */
.promo-badge { display:inline-block; background:#ffd9e6; color:#8a1f45; font-weight:800; font-size:13px; padding:7px 16px; border-radius:999px; letter-spacing:.3px; }
.pill-btn { border:1px solid var(--border); background:#fff; border-radius:999px; padding:8px 14px; font-size:12.5px; cursor:pointer; }
.pill-btn.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.achievement-badge { display:inline-flex; align-items:center; gap:6px; background:#fff7f5; border:1px solid var(--border); border-radius:999px; padding:6px 12px; font-size:12px; font-weight:600; margin:0 6px 6px 0; }

/* --- Greeting header di atas dashboard (bukan lagi overlay/sticky di atas
   banner — flow dokumen biasa, ditaruh sebelum <img class="hero-banner">) --- */
.greeting-card { padding:14px 16px; margin-bottom:14px; }
.greet-prompt { flex: 1; }

/* --- Badge kecil "Akses Terbuka" pengganti tombol beli setelah user unlocked --- */
.badge-unlocked { display:inline-flex; align-items:center; gap:6px; background:#eafaf1; color:#1f7a4c; border:1px solid #bfe8d2; font-weight:700; font-size:13px; padding:8px 18px; border-radius:999px; }

/* --- Landing page: "kecemasan wajar" (pain) dipasangkan dengan modul yang
   menjawabnya (gain) --- */
.pain-gain-list { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.pain-gain-row { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:12px 14px; }
.pain-gain-row .pg-pain { display:block; font-size:13.5px; line-height:1.5; color:#fff; }
.pain-gain-row .pg-gain { display:block; font-size:12.5px; line-height:1.5; color:#ffd9e6; margin-top:6px; }
.pain-gain-row .pg-gain strong { color:#fff; }

/* --- Progress harian: kartu senam hamil dengan toggle sketsa gerakan --- */
.exercise-card { border-bottom:1px dashed var(--border); padding-bottom:12px; margin-bottom:12px; }
.exercise-card:last-of-type { border-bottom:none; }
.exercise-desc { margin:0 0 8px !important; }
.exercise-toggle-btn { background:#fde7ee; color:var(--primary-dark); border:none; border-radius:999px; padding:7px 14px; font-size:12.5px; font-weight:700; cursor:pointer; }
.exercise-sketch { background:#fff7f5; border:1px solid var(--border); border-radius:12px; padding:10px 14px 14px; margin-top:10px; text-align:center; }
.exercise-caption { margin:8px 0 0 !important; font-size:12.5px !important; color:var(--muted); text-align:left; }
/* item 13: tiap gerakan sekarang dipecah jadi beberapa langkah berurutan
   (bukan 1 sketsa statis), disusun sebaris supaya arah gerakan jelas. */
.exercise-step-row { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; align-items:flex-start; }
.exercise-step { flex:1 1 90px; min-width:78px; max-width:120px; }
.exercise-step svg { width:100%; height:auto; display:block; }
.exercise-step-label { font-size:10px; font-weight:700; color:var(--primary-dark); margin:2px 0 0; }

/* --- Skrining Mandiri: kartu jenis skrining, progress bar, badge hasil --- */
.screening-card-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:480px) { .screening-card-grid { grid-template-columns:1fr; } }
.screening-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px; display:flex; flex-direction:column; position:relative; }
.screening-card-icon { font-size:26px; margin-bottom:6px; }
.screening-card h4 { margin:0 0 4px; font-size:14px; }
.screening-card p { margin:0 0 10px; font-size:12.5px; color:var(--muted); flex:1; }
.screening-card-time { font-size:11px; color:var(--primary-dark); font-weight:700; margin-bottom:10px; }
.screening-card .btn { margin-top:0; padding:10px; font-size:13px; }
.screening-card-highlight { border-color:var(--primary); box-shadow:0 6px 18px -10px rgba(224,105,138,.5); }
.screening-card-tag { position:absolute; top:-9px; right:12px; background:var(--primary); color:#fff; font-size:10.5px; font-weight:800; padding:3px 10px; border-radius:999px; }

/* --- "Catat Pengeluaran Aktual" (modul budget): grid pos/estimasi/aktual —
   min-width:0 di tiap sel WAJIB supaya input tidak overflow keluar kolomnya
   sendiri di layar sempit (375px). --- */
.estvsakt-row { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr); gap:6px; min-width:0; }
.estvsakt-row > * { min-width:0; }

/* --- Modul "Cara Menjaga Kehamilan Tetap Sehat": kartu per-pemeriksaan
   dengan label/value hierarchy (micro-label kecil-huruf-kapital di atas
   jawaban) supaya tidak jadi paragraf yang lari-lari --- */
.pemeriksaan-card .pm-label { margin:0; font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.pemeriksaan-card .pm-value { margin:2px 0 0; font-size:13px; line-height:1.5; color:var(--ink); }
.pemeriksaan-card .pm-title { font-size:14.5px; font-weight:700; color:var(--primary-dark); }
.pemeriksaan-card .pm-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; }
.pemeriksaan-card .pm-status-row { display:grid; grid-template-columns:1fr 1.4fr; gap:10px; margin-top:10px; align-items:start; }
@media (max-width:420px) {
  .pemeriksaan-card .pm-grid, .pemeriksaan-card .pm-status-row { grid-template-columns:1fr; }
}

.progress-bar-track { background:#f0dfe2; border-radius:999px; height:8px; overflow:hidden; }
.progress-bar-fill { background:var(--primary); height:100%; transition:width .25s ease; }

/* --- item 3: Progress Harian/Ayah — kunci "hari ini sudah disimpan" (murni
   visual, autosave per-field tetap jalan seperti biasa) --- */
#ph-daily-entry-wrap.daily-locked, #ayah-daily-entry-wrap.daily-locked {
  pointer-events: none;
  opacity: .55;
  filter: grayscale(.3);
}

.screening-answer-row { display:flex; flex-direction:column; gap:8px; }
.screening-answer-btn { margin-top:0; }

.result-badge-good { display:inline-block; background:#eafaf1; color:#1f7a4c; border:1px solid #bfe8d2; font-weight:700; border-radius:999px; padding:4px 12px; font-size:11.5px; }
.result-badge-warn { display:inline-block; background:#fff6e0; color:#8a6a10; border:1px solid #f0e0a8; font-weight:700; border-radius:999px; padding:4px 12px; font-size:11.5px; }
.result-badge-urgent { display:inline-block; background:#fdeaea; color:#a12a2a; border:1px solid #f3c6c6; font-weight:700; border-radius:999px; padding:4px 12px; font-size:11.5px; }

/* --- Landing page (hookScreen) redesign: pain cards, step list, journey
   arrows, benefit grid, FAQ accordion, sticky CTA --- */
/* --- Landing page: daftar pertanyaan "pain" — list rapi & mudah dipindai
   di mobile, bukan paragraf panjang bertumpuk --- */
.pain-question-list { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.pain-question-list li { display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.45; background:#fff7f5; border-radius:10px; padding:9px 12px; }
.pain-question-list .pq-icon { font-size:15px; flex-shrink:0; line-height:1.45; }

.pain-card-grid { display:grid; grid-template-columns:1fr; gap:10px; margin-top:12px; }
@media (min-width:560px) { .pain-card-grid { grid-template-columns:1fr 1fr 1fr; } }
.pain-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px 16px; }
.pain-card strong { display:block; font-size:13.5px; margin-bottom:6px; color:var(--primary-dark); }
.pain-card p { margin:0; font-size:12.5px; color:var(--muted); line-height:1.5; }

.steps-list { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.step-row { display:flex; gap:12px; align-items:flex-start; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px 16px; }
.step-num { flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--primary); color:#fff; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; }
.step-row strong { display:block; font-size:13.5px; margin-bottom:3px; }
.step-row p { margin:0; font-size:12.5px; color:var(--muted); line-height:1.5; }

.journey-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:12px; justify-content:center; padding:14px 10px; border-radius:16px; background:linear-gradient(150deg, #fff7f5 0%, #fbe9ef 100%); }
.journey-step { background:var(--card); border:1px solid var(--border); border-radius:999px; padding:8px 14px; font-size:12px; font-weight:700; color:var(--primary-dark); white-space:nowrap; }
.journey-arrow { color:var(--muted); font-size:13px; }

.benefit-grid { display:grid; grid-template-columns:1fr; gap:10px; margin-top:10px; }
@media (min-width:560px) { .benefit-grid { grid-template-columns:1fr 1fr; } }
.benefit-item { display:flex; gap:10px; align-items:flex-start; }
.benefit-item span { font-size:20px; flex-shrink:0; }
.benefit-item strong { display:block; font-size:13px; margin-bottom:2px; }
.benefit-item p { margin:0; font-size:12px; color:var(--muted); line-height:1.4; }

.faq-list { display:flex; flex-direction:column; gap:8px; }
.faq-item { background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.faq-q { width:100%; text-align:left; background:none; border:none; padding:14px 16px; font-size:13.5px; font-weight:700; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:10px; color:var(--ink); }
.faq-caret { color:var(--primary-dark); font-size:16px; transition:transform .15s ease; flex-shrink:0; }
.faq-q.open .faq-caret { transform:rotate(45deg); }
.faq-a { padding:0 16px 14px; font-size:13px; color:var(--muted); line-height:1.6; }

.sticky-cta {
  position:fixed; left:50%; transform:translateX(-50%); bottom:calc(78px + env(safe-area-inset-bottom));
  z-index:55; background:var(--primary); color:#fff; font-weight:700; font-size:13.5px;
  padding:12px 22px; border-radius:999px; text-decoration:none; box-shadow:0 8px 18px -6px rgba(224,105,138,.55);
}

/* --- Dashboard: grid modul dengan badge GRATIS/PREMIUM --- */
.module-link-block { flex:1; display:flex; gap:14px; align-items:flex-start; text-decoration:none; color:inherit; min-width:0; }
.module-badge-col { display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex-shrink:0; }
.module-badge { font-size:10px; font-weight:800; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.module-badge.free { background:#eafaf1; color:#1f7a4c; }
.module-badge.locked { background:#fde7ee; color:var(--primary-dark); }
.module-upgrade-link { font-size:10.5px; font-weight:700; color:var(--primary-dark); text-decoration:underline; white-space:nowrap; }

/* --- Dashboard: "Yang Paling Relevan Untukmu" --- */
.relevant-modules-row { display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width:560px) { .relevant-modules-row { grid-template-columns:1fr 1fr; } }
.relevant-card { display:flex; gap:10px; align-items:flex-start; background:var(--card); border:1px solid var(--primary); border-radius:14px; padding:12px 14px; text-decoration:none; color:inherit; box-shadow:0 6px 18px -12px rgba(224,105,138,.5); }
.relevant-card .icon { font-size:20px; }
.relevant-card h4 { margin:0 0 3px; font-size:13px; }
.relevant-card p { margin:0; font-size:11.5px; color:var(--muted); line-height:1.4; }

/* --- Navbar bawah (baru): ditempel di semua halaman ber-login, stack di
   atas fab lama supaya tidak tumpang tindih di layar kecil (375px) --- */
/* item 13: gradient gelap premium (senada palet card-premium-dark) dengan
   sedikit depth, bukan putih polos — teks/ikon disesuaikan supaya tetap
   kontras jelas di atas latar gelap ini. */
.bottom-navbar {
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; align-items:stretch; gap:2px;
  background:linear-gradient(165deg, #2e2130 0%, #4a3350 55%, #6b3a55 100%);
  border-top:1px solid rgba(255,255,255,.08);
  box-shadow:0 -8px 22px -8px rgba(46,33,48,.45);
  padding:6px 6px calc(6px + env(safe-area-inset-bottom));
}
@media (min-width:760px) {
  .bottom-navbar { max-width:720px; left:50%; transform:translateX(-50%); border-radius:16px 16px 0 0; }
}
.bottom-navbar .bn-seg {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; padding:6px 2px; border-radius:12px; text-decoration:none; color:#fff;
  background:none; border:none; font-family:inherit; cursor:pointer; min-width:0;
}
.bottom-navbar .bn-seg .bn-icon { font-size:16px; line-height:1; }
.bottom-navbar .bn-seg .bn-label { font-size:9.5px; font-weight:700; color:rgba(255,255,255,.78); line-height:1.2; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.bottom-navbar .bn-seg.bn-done .bn-icon { filter:none; }
/* item 3: state aktif jelas beda dari resting — background + warna teks
   berubah, bukan cuma opacity tipis. */
.bottom-navbar .bn-seg.active { background:rgba(255,255,255,.16); }
.bottom-navbar .bn-seg.active .bn-label { color:#fff; }

.bottom-navbar-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:65; }
.bottom-navbar-menu {
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:#fff; border-radius:18px 18px 0 0; padding:16px 16px calc(16px + env(safe-area-inset-bottom));
  box-shadow:0 -10px 30px -10px rgba(0,0,0,.3); max-height:70vh; overflow-y:auto;
}
@media (min-width:760px) { .bottom-navbar-menu { max-width:720px; left:50%; transform:translateX(-50%); } }
.bn-menu-link { display:flex; align-items:center; gap:10px; padding:11px 4px; text-decoration:none; color:var(--ink); font-size:13.5px; border-bottom:1px dashed var(--border); }
.bn-menu-link:last-child { border-bottom:none; }
/* item 9: modul yang sedang dibuka ditandai jelas di daftar menu hamburger,
   pakai gradient ungu premium yang sama seperti navbar bawah/card premium. */
.bn-menu-link-active {
  background: linear-gradient(120deg, #2e2130 0%, #4a3350 55%, #6b3a55 100%);
  color: #fff;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  border-bottom-color: transparent;
  font-weight: 700;
}

/* item 12: ikon "Check-in Hari Ini" dibesarkan sedikit dibanding ikon
   segmen navbar lain, supaya lebih jelas dilihat sekilas — HANYA segmen
   ini, bukan semua .bn-icon secara global. */
.bottom-navbar .bn-seg .bn-icon-lg { font-size: 20px; }