/* Gaya Rutin. Semua angka dari token.css. Aturan tata letak: 03 + Beres 03.
   Versi 2 (22 Sep 2026): kartu, sapaan bergradasi, statistik berwarna —
   dirancang untuk HP dulu, laptop menyesuaikan. */

*, *::before, *::after { box-sizing: border-box; }
/* 0.13.20: tarik-untuk-muat-ulang Chrome dibaca dari html (bukan body); tanpa ini menggulir mentok ke atas memuat ulang app. */
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-isi);
  line-height: 1.5;
  color: var(--ink);
  background: var(--kanvas);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  /* Kata panjang tanpa spasi (tautan, nama berkas) dipatahkan, tidak melebarkan layar. */
  overflow-wrap: break-word;
}
button, input, select, textarea { font: inherit; color: inherit; }
/* 0.13.18: kolom isian ikut tema app, bukan tema HP. Tanpa ini, HP bermode gelap menggambar kolom (dan isian otomatis
   Chrome) berwarna gelap di atas app yang terang, mis. kolom email di layar aktivasi. */
:root[data-tema="terang"] { color-scheme: light; }
:root[data-tema="gelap"] { color-scheme: dark; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--ink); caret-color: var(--ink);
  -webkit-box-shadow: 0 0 0 100px var(--paper) inset; box-shadow: 0 0 0 100px var(--paper) inset; transition: background-color 9999s; }
button { cursor: pointer; background: none; border: 0; padding: 0; touch-action: manipulation; }
a { color: var(--merek-teks); }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
h1, h2, h3, p { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--merek); outline-offset: 2px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lompat-isi { position: absolute; left: -999px; }
.lompat-isi:focus { left: var(--sp-4); top: var(--sp-4); z-index: 99; background: var(--paper); padding: var(--sp-2) var(--sp-4); }

/* --- Kerangka ----------------------------------------------------------- */

.app { min-height: 100dvh; }
.isi {
  max-width: 640px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + var(--sp-4)) var(--sp-4) calc(112px + env(safe-area-inset-bottom));
  outline: none;
}
.sidebar { display: none; }
.pemuat { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--sp-6); text-align: center; color: var(--ink-3); background: var(--kanvas); }
.layar-masuk { animation: muncul 220ms ease-out; }
@keyframes muncul { from { opacity: 0; transform: translateY(6px); } }

/* --- Navigasi bawah: pil mengambang (03 §1) ----------------------------- */

.nav-bawah {
  position: fixed; z-index: 10;
  left: var(--sp-3); right: var(--sp-3); bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
  max-width: 560px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
  padding: var(--sp-1) var(--sp-2);
  background: var(--nav-latar);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--rule);
  border-radius: var(--r-besar);
  box-shadow: var(--bayang-angkat);
}
.nav-btn {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: 56px; justify-content: center;
  font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--tracking-kecil);
  color: var(--ink-3);
}
.nav-btn svg { transition: transform var(--durasi); }
.nav-btn[aria-current="page"] { color: var(--merek-teks); font-weight: 600; }
.nav-btn[aria-current="page"] svg { transform: translateY(-1px); stroke-width: 2.2; }
.nav-btn[aria-current="page"]::after {
  content: ''; position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: var(--r-pil); background: currentColor;
}
.nav-lencana {
  position: absolute; top: 4px; left: calc(50% + 6px);
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pil);
  background: var(--peach-t); color: #fff; font-size: var(--fs-label); line-height: 18px; text-align: center;
}
.nav-tambah {
  justify-self: center; display: grid; place-items: center;
  width: 58px; height: 58px; margin-top: -26px; border-radius: var(--r-pil);
  background: linear-gradient(135deg, #3b7be0, var(--biru-500) 60%, var(--biru-700));
  color: var(--di-merek);
  box-shadow: 0 8px 20px rgba(37, 99, 201, .4), 0 0 0 5px var(--kanvas);
  transition: transform var(--durasi);
}
.nav-tambah svg { width: 28px; height: 28px; stroke-width: 2.4; }
.nav-tambah:active { transform: scale(.94); }

/* --- Kepala layar biasa -------------------------------------------------- */

.kepala { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: var(--sp-2) 0 var(--sp-4); min-height: var(--sentuh); }
.kepala .tbl-ikon:first-child { margin-left: calc(var(--sp-2) * -1); }
.judul { font-size: var(--fs-judul); font-weight: var(--fw-judul); line-height: 1.3; flex: 1; letter-spacing: -0.01em; }
.judul-besar { font-size: var(--fs-hero); font-weight: var(--fw-hero); letter-spacing: -0.02em; }
.sub-judul { font-size: var(--fs-meta); color: var(--ink-3); margin-top: 2px; }
.pengantar { margin: 0 0 var(--sp-4); }

/* --- Hari Ini: kepala, pita minggu, Lingkar Hari (versi 3) -------------- */

.kepala-hari { align-items: flex-end; margin-bottom: var(--sp-3); }
.kepala-hari .sub-judul { margin: 0 0 2px; font-weight: 500; }

.pita-minggu { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: var(--sp-3); }
.pita-hari {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--sp-2) 0 6px; border-radius: 14px; background: var(--paper); border: 1px solid var(--rule);
}
.pita-hari small { font-size: 10px; font-weight: 600; color: var(--ink-3); letter-spacing: .04em; }
.pita-hari b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.pita-hari.nanti { background: transparent; border-color: transparent; }
.pita-hari.nanti b { color: var(--ink-3); font-weight: 500; }
.pita-hari.ini { background: var(--merek); border-color: var(--merek); color: var(--di-merek); box-shadow: 0 6px 14px rgba(37, 99, 201, .28); }
.pita-hari.ini small { color: rgba(255, 255, 255, .8); }
.pita-titik { width: 6px; height: 6px; border-radius: var(--r-pil); }
.pita-titik.penuh { background: var(--merek); }
.pita-titik.cincin { box-shadow: inset 0 0 0 1.5px var(--biru-300); }
.pita-titik.maaf { background: var(--ink-4); width: 4px; height: 4px; margin: 1px; }
.pita-hari.ini .pita-titik { background: rgba(255, 255, 255, .85); }

.lingkar-kartu {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4); border-radius: var(--r-besar);
  background: var(--paper); border: 1px solid var(--rule); box-shadow: var(--bayang-kartu);
}
.lingkar { position: relative; width: 132px; height: 132px; flex-shrink: 0; }
.lingkar svg { width: 100%; height: 100%; transform: rotate(-90deg); stroke-linecap: round; fill: none; }
.lingkar .jejak-luar { stroke: var(--soft); stroke-width: 5; }
.lingkar .waktu { stroke: var(--biru-300); stroke-width: 5; transition: stroke-dashoffset 600ms ease; }
.lingkar .ruas { stroke: var(--soft); stroke-width: 12; stroke-linecap: butt; transition: stroke 300ms; }
.lingkar .ruas.selesai { stroke: var(--merek); }
.lingkar-tengah { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.lingkar-tengah b { font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.lingkar-tengah b small { font-size: 16px; color: var(--ink-3); font-weight: 600; }
.lingkar-tengah span { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.lingkar-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-meta); }
.lingkar-info li { display: flex; align-items: center; gap: var(--sp-2); }
.lingkar-info li > span:nth-child(2) { flex: 1; color: var(--ink-2); }
.lingkar-info b { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lingkar-sisa { margin-top: 4px; padding-top: var(--sp-2); border-top: 1px solid var(--rule); color: var(--ink-3); font-size: 12px; }
.lingkar-sisa svg { width: 14px; height: 14px; }
.titik-warna { width: 8px; height: 8px; border-radius: var(--r-pil); flex-shrink: 0; }
.titik-warna.biru { background: var(--merek); }
.titik-warna.mint { background: var(--mint-isi); }
.titik-warna.peach { background: var(--peach-t); }

/* Ikon garis dalam lingkaran berwarna (pengganti emoji). */
.ikon-bulat { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--r-pil); }
.ikon-bulat svg { width: 17px; height: 17px; stroke-width: 2; }
.ikon-besar { width: 40px; height: 40px; }
.ikon-besar svg { width: 20px; height: 20px; stroke-width: 2.4; }
.ikon-onb { width: 56px; height: 56px; }
.ikon-onb svg { width: 26px; height: 26px; }
.kosong-ikon { margin: 0 auto var(--sp-2); }
.stat-ikon { display: block; margin-bottom: var(--sp-1); }
.stat-ikon svg { width: 22px; height: 22px; stroke-width: 2; }
.side-ikon { display: grid; place-items: center; width: 20px; }
.side-ikon svg { width: 19px; height: 19px; }
.lencana .ikon-bulat { width: 36px; height: 36px; }
.lencana.terkunci .ikon-bulat { opacity: .45; }
.panduan-isi > .ikon-bulat { margin-bottom: var(--sp-1); }
.tbl-kecil svg { width: 15px; height: 15px; }

.w-biru { color: var(--biru-t); }
.w-mint { color: var(--mint-t); }
.w-peach { color: var(--peach-t); }
.w-lilac { color: var(--lilac-t); }
.w-kuning { color: var(--kuning-t); }
.w-pink { color: var(--pink-t); }
.l-biru { background: var(--biru-l); color: var(--biru-t); }
.l-mint { background: var(--mint-l); color: var(--mint-t); }
.l-peach { background: var(--peach-l); color: var(--peach-t); }
.l-lilac { background: var(--lilac-l); color: var(--lilac-t); }
.l-kuning { background: var(--kuning-l); color: var(--kuning-t); }
.l-pink { background: var(--pink-l); color: var(--pink-t); }

/* --- Kartu --------------------------------------------------------------- */

.kartu {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-kartu);
  box-shadow: var(--bayang-kartu);
}
.kartu-kepala { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.kartu-judul { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-kartu); font-weight: var(--fw-kartu); min-width: 0; }
.pil-angka {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: var(--r-pil);
  font-size: var(--fs-meta); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.kartu-sub { font-size: var(--fs-meta); color: var(--ink-3); margin: calc(var(--sp-1) * -1) 0 var(--sp-2); }
.kartu-kecil { opacity: .75; }
.kartu-utama { border-color: color-mix(in srgb, var(--merek) 22%, var(--rule)); background: linear-gradient(180deg, color-mix(in srgb, var(--biru-l) 55%, var(--paper)) 0%, var(--paper) 120px); }
.kartu-berat { background: var(--berat-latar); border-color: var(--rule-kuat); }

.progres { height: 6px; border-radius: var(--r-pil); background: var(--soft); overflow: hidden; margin: var(--sp-1) 0 var(--sp-3); }
.progres > i { display: block; height: 100%; border-radius: inherit; background: var(--mint-isi); transition: width 300ms ease; }
.progres-biru > i { background: var(--merek); }

/* Label kapital untuk bagian tanpa kartu. */
.label {
  font-size: var(--fs-label); font-weight: var(--fw-label);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3);
}
.kepala-bagian { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
.angka { font-size: var(--fs-meta); font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bagian { margin-top: var(--sp-6); }
.bagian > .label { display: block; margin-bottom: var(--sp-2); }
.meta { font-size: var(--fs-meta); color: var(--ink-3); letter-spacing: var(--tracking-kecil); }
.baris-teks .meta { display: block; margin-top: 1px; }
.ikon-meta { display: inline-flex !important; align-items: center; gap: var(--sp-1); }
.ikon-meta svg { width: 13px; height: 13px; }
.kosong-teks { color: var(--ink-3); padding: var(--sp-2) 0; font-size: var(--fs-meta); }
.kosong-besar { text-align: center; padding: var(--sp-4) var(--sp-2); }
.kosong-besar .emoji { font-size: 34px; display: block; margin-bottom: var(--sp-2); }

/* --- Baris daftar ------------------------------------------------------- */

.daftar { display: flex; flex-direction: column; }
.baris { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--sentuh); border-bottom: 1px solid var(--rule); position: relative; }
.baris:last-child { border-bottom: 0; }
.baris-tombol { display: flex; align-items: center; gap: var(--sp-3); flex: 1; min-width: 0; min-height: 52px; padding: var(--sp-2) 0; text-align: left; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.baris-teks { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.coret { text-decoration: line-through; color: var(--ink-3); }
.jam { width: 44px; flex-shrink: 0; font-size: var(--fs-meta); font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.angka-kecil { font-variant-numeric: tabular-nums; white-space: nowrap; }

.bulat {
  display: grid; place-items: center; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: var(--r-pil);
  border: 2px solid var(--ink-4);
  transition: background var(--durasi), border-color var(--durasi), transform var(--durasi);
}
.bulat svg { width: 15px; height: 15px; stroke-width: 3; }
.bulat .angka { font-size: 11px; font-weight: 700; color: var(--merek-teks); line-height: 1; }
.kartu-utama .bulat:not(.bulat-isi) { border-color: var(--biru-300); }
.bulat-isi { background: var(--merek); border-color: var(--merek); color: var(--di-merek); }
.bulat-mint.bulat-isi { background: var(--mint-isi); border-color: var(--mint-isi); }
/* Hanya centang yang baru terjadi yang bergerak (hariini.js tandaiBaru):
   lingkaran mengembang sedikit, lalu coretan centang ditarik dari kiri. */
.bulat-isi.baru { animation: letup 280ms cubic-bezier(.2, .9, .3, 1.3); }
.bulat-isi.baru svg path { stroke-dasharray: 22; stroke-dashoffset: 22; animation: gores 240ms 110ms ease-out forwards; }
@keyframes letup { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes gores { to { stroke-dashoffset: 0; } }

.nomor {
  display: grid; place-items: center; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: var(--r-pil);
  background: var(--merek); color: var(--di-merek); font-size: var(--fs-meta); font-weight: 700;
}
.nomor-selesai { background: var(--soft); color: var(--ink-3); }

.geser { overflow: hidden; }
/* 0.13.5: pan-y = browser hanya boleh menggulir tegak di baris ini, jadi geseran datar tidak direbut gulir lalu
   dibatalkan di tengah jalan (baris terpental balik). Latar padat supaya isi baris menutupi label "Besok →". */
.geser-isi { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-2); background: var(--paper); transition: transform var(--durasi); touch-action: pan-y; }
.geser-isi.seret { transition: none; }
.geser::before {
  content: 'Besok →'; position: absolute; right: var(--sp-2); top: 50%; transform: translateY(-50%);
  font-size: var(--fs-meta); font-weight: 600; color: var(--peach-t); opacity: 0; transition: opacity var(--durasi);
  pointer-events: none; /* label di balik baris tidak boleh menelan ketukan pada ikon di ujung kanan */
}
.geser[data-geser="rutin"]::before { content: 'Libur'; }
.geser:has(.seret)::before { opacity: 1; }

.pilih input { width: 20px; height: 20px; accent-color: var(--merek); flex-shrink: 0; }
.titik-label-warna { width: 8px; height: 8px; border-radius: var(--r-pil); display: inline-block; flex-shrink: 0; }
.chip-label { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--r-pil); font-size: 11px; font-weight: 600; margin-left: 4px; vertical-align: 1px; }
.tanda-bentrok { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: var(--r-pil); font-size: 11px; font-weight: 600; background: var(--kuning-l); color: var(--kuning-t); margin-left: 4px; }

/* --- Hari Ini: prioritas, jadwal (garis waktu), habit (petak) ----------- */

.tbl-fokus {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  min-height: 32px; padding: 0 10px; border-radius: var(--r-pil);
  background: var(--lilac-l); color: var(--lilac-t); font-size: 12px; font-weight: 600; position: relative;
}
.tbl-fokus svg { width: 14px; height: 14px; }
.tbl-fokus::after { content: ''; position: absolute; inset: -6px -2px; }

.berhasil {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 56px;
  font-size: var(--fs-kartu); font-weight: 600; text-align: left;
}

.garis-waktu .baris { border-bottom: 0; }
.garis-waktu .baris-tombol { padding: 6px 0; }
.garis-waktu .baris + .baris::after {
  content: ''; position: absolute; left: 57px; top: -8px; height: 16px; border-left: 2px dotted var(--rule-kuat);
}
.titik-waktu { width: 10px; height: 10px; border-radius: var(--r-pil); flex-shrink: 0; background: var(--biru-300); box-shadow: 0 0 0 3px var(--biru-l); }
.titik-waktu.rutin { background: var(--mint-isi); box-shadow: 0 0 0 3px var(--mint-l); }
.titik-waktu.selesai { background: var(--ink-4); box-shadow: none; }
.baris-sholat { min-height: 28px; gap: var(--sp-3); font-size: 12px; color: var(--ink-3); }
.baris-sholat::before { content: ''; flex: 0 0 0; }
.baris-sholat .garis { flex: 1; border-top: 1px dashed var(--rule-kuat); }
.baris-sholat b { font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.habit-kisi { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.habit-petak {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 56px; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-kecil);
  border: 1.5px solid var(--rule); background: var(--paper); text-align: left;
  transition: background var(--durasi), border-color var(--durasi), transform var(--durasi);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.habit-petak:active { transform: scale(.97); }
.habit-petak .habit-nama { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; line-height: 1.3; overflow-wrap: break-word; }
.habit-api { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; color: var(--peach-t); font-variant-numeric: tabular-nums; }
.habit-api svg { width: 13px; height: 13px; stroke-width: 2.2; }
.habit-petak[aria-pressed="true"] { background: var(--mint-l); border-color: color-mix(in srgb, var(--mint-isi) 45%, transparent); }
.habit-petak[aria-pressed="true"] .habit-nama { color: var(--mint-t); font-weight: 600; }
.habit-kalem { font-size: 12px; font-weight: 600; color: var(--mint-t); text-decoration: none; }

.pita-berat {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap;
  background: var(--berat-latar); border-radius: var(--r-kartu);
  padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-3);
  font-size: var(--fs-meta); color: var(--ink-2);
}
.hari-berat { margin-top: var(--sp-6); text-align: center; font-size: var(--fs-meta); color: var(--ink-3); }

.kartu-opsi { display: flex; align-items: center; gap: var(--sp-3); }
.kartu-opsi .baris-teks b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.kartu-opsi-aksi { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; }

/* --- Tombol ------------------------------------------------------------- */

.tbl {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; padding: 0 var(--sp-6); border-radius: var(--r-pil);
  font-weight: 600; letter-spacing: 0.01em; transition: transform var(--durasi), filter var(--durasi);
  text-decoration: none;
}
.tbl:active { transform: scale(.98); }
.tbl-utama { background: var(--merek); color: var(--di-merek); box-shadow: 0 6px 16px rgba(37, 99, 201, .25); }
.tbl-utama:active { filter: brightness(.92); }
.tbl-utama:disabled { opacity: .6; }
.tbl-garis { border: 1.5px solid var(--rule-kuat); background: var(--paper); color: var(--ink); }
.tbl-lembut { background: var(--merek-latar); color: var(--merek-teks); }
.tbl-bahaya { color: var(--hapus); }
.tbl-penuh { width: 100%; }
.tbl-teks { color: var(--merek-teks); font-weight: 600; min-height: var(--sentuh); padding: 0 var(--sp-1); }
.tbl-ikon { display: grid; place-items: center; width: var(--sentuh); height: var(--sentuh); border-radius: var(--r-pil); color: var(--ink-2); flex-shrink: 0; }
.tbl-ikon:active { background: var(--soft); }
.tbl-kecil {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 36px; padding: 0 var(--sp-3); border-radius: var(--r-pil);
  font-size: var(--fs-meta); font-weight: 600; background: var(--merek-latar); color: var(--merek-teks);
  position: relative; text-decoration: none; white-space: nowrap;
}
.tbl-kecil svg { width: 15px; height: 15px; }
.tbl-kecil::after { content: ''; position: absolute; inset: -4px 0; }
.tbl-kecil-redam { background: var(--soft); color: var(--ink-2); }

/* --- Rencana ------------------------------------------------------------ */

.pilah-kartu { border: 1px solid var(--rule); border-radius: var(--r-kartu); padding: var(--sp-3); margin-top: var(--sp-2); background: var(--kanvas); }
.pilah-kartu .baris-teks { font-weight: 500; }
.pilah { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-top: var(--sp-3); }
.pilah .tbl-kecil { justify-content: center; min-height: 40px; }
.minggu-geser { display: flex; gap: var(--sp-2); overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--sp-4) * -1); padding: var(--sp-1) var(--sp-4) var(--sp-2); scrollbar-width: none; }
.minggu-geser::-webkit-scrollbar { display: none; }
.hari-kartu {
  flex: 0 0 132px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-3); border-radius: var(--r-kartu); background: var(--paper); border: 1px solid var(--rule); min-height: 132px;
  box-shadow: var(--bayang-kartu);
}
.hari-kartu b { font-size: var(--fs-meta); font-weight: 700; }
.hari-kartu .tgl { font-size: 24px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.hari-kartu ul { font-size: 12px; color: var(--ink-2); display: flex; flex-direction: column; gap: 2px; margin-top: var(--sp-1); }
.hari-kartu ul li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hari-kartu.lapang { background: var(--kanvas); }
.lewat { color: var(--peach-t); font-weight: 600; }
.hitung-mundur-baris { display: flex; align-items: center; gap: var(--sp-3); }
.hm-angka { display: grid; place-items: center; min-width: 56px; height: 56px; padding: 0 var(--sp-2); border-radius: var(--r-kartu); font-weight: 700; font-size: 20px; line-height: 1; text-align: center; }
.hm-angka small { display: block; font-size: 10px; font-weight: 600; margin-top: 2px; }

/* --- Rapor -------------------------------------------------------------- */

.tab-kapsul { display: flex; gap: var(--sp-1); padding: var(--sp-1); background: var(--soft); border-radius: var(--r-pil); margin-bottom: var(--sp-4); }
.tab-kapsul button { flex: 1; min-height: 40px; padding: 0 var(--sp-4); border-radius: var(--r-pil); font-size: var(--fs-meta); font-weight: 600; color: var(--ink-2); }
.tab-kapsul button[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .1); }

.kisi-4 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.stat { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-4); border-radius: var(--r-kartu); min-height: 108px; }
.stat .emoji { font-size: 20px; line-height: 1; margin-bottom: var(--sp-1); }
.stat-angka { font-size: var(--fs-hero); font-weight: var(--fw-hero); letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-angka small { font-size: var(--fs-kartu); opacity: .75; font-weight: 600; }
.stat .meta { color: inherit; opacity: .85; }

.titik-7 { display: grid; grid-template-columns: repeat(7, 22px); gap: 4px; flex-shrink: 0; }
.titik-label b { font-size: 10px; color: var(--ink-3); text-align: center; font-weight: 600; }
.titik-7 > * { width: 22px; height: 22px; }
.titik-7 button { position: relative; }
.titik-7 button::after { content: ''; position: absolute; inset: -12px -2px; }
.baris-habit { padding: var(--sp-2) 0; }

.t-penuh, .t-cincin, .t-maaf, .t-kosong { display: block; border-radius: var(--r-pil); }
.titik-7 .t-penuh { background: var(--mint-isi); }
.titik-7 .t-maaf { background: var(--berat-latar); border: 2px solid var(--ink-4); }
.titik-7 .t-kosong { background: transparent; }
.titik-7 .t-hadir { border: 2px solid var(--rule-kuat); }

.kalender { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-2) 0; text-align: center; }
.kalender > b { font-size: 10px; color: var(--ink-3); font-weight: 600; }
.hari-kal { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0; border-radius: var(--r-kecil); }
.hari-kal small { font-size: 12px; color: var(--ink-2); }
.hari-kal.hari-ini { background: var(--biru-l); }
.hari-kal.hari-ini small { color: var(--merek-teks); font-weight: 700; }
.hari-kal i, .legenda i { width: 12px; height: 12px; }
.hari-kal .t-penuh, .legenda .t-penuh { background: var(--merek); }
.hari-kal .t-cincin, .legenda .t-cincin { border: 2px solid var(--biru-300); }
.hari-kal .t-maaf, .legenda .t-maaf { background: var(--ink-4); width: 6px; height: 6px; margin: 3px; }
.hari-kal .t-hadir { border: 1px solid var(--rule-kuat); }
.legenda { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin-top: var(--sp-4); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { display: inline-block; border-radius: var(--r-pil); }

.bulan-kisi { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.bulan-kartu { padding: var(--sp-3); border-radius: var(--r-kartu); background: var(--kanvas); border: 1px solid var(--rule); min-height: 76px; display: flex; flex-direction: column; gap: 2px; }
.bulan-kartu b { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.bulan-kartu span { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.bulan-kartu small { font-size: 11px; color: var(--ink-3); }
.bulan-kartu.kosong span { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.bulan-kartu.ini { border-color: var(--biru-300); }

.pencapaian { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.lencana { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3); border-radius: var(--r-kartu); border: 1px solid var(--rule); background: var(--paper); }
.lencana .emoji { font-size: 26px; line-height: 1; }
.lencana b { font-size: 13px; font-weight: 600; }
.lencana small { font-size: 11px; color: var(--ink-3); line-height: 1.35; }
.lencana.terkunci { background: var(--kanvas); }
.lencana.terkunci .emoji { filter: grayscale(1); opacity: .45; }
.lencana.dapat { background: var(--kuning-l); border-color: transparent; }
.lencana.dapat b { color: var(--kuning-t); }

.jurnal-baris { padding: var(--sp-3) 0; }
.jurnal-emoji { font-size: 22px; width: 36px; text-align: center; flex-shrink: 0; }
.review-isi { font-size: var(--fs-meta); color: var(--ink-2); margin-top: var(--sp-1); display: grid; gap: 2px; }

/* --- Lainnya ------------------------------------------------------------ */

.kartu-menu { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-kartu); overflow: hidden; box-shadow: var(--bayang-kartu); }
/* 0.13.16: Ulangi tur di atas daftar topik Panduan. */
.panduan-tur .baris-teks small { display: block; }
.panduan-label { display: block; margin: var(--sp-5, 20px) 0 var(--sp-2); }
.kartu-menu li + li { border-top: 1px solid var(--rule); }
.baris-menu { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 64px; padding: var(--sp-3) var(--sp-4); text-align: left; text-decoration: none; color: inherit; }
.baris-menu:active { background: var(--soft); }
.baris-menu > svg:last-child { color: var(--ink-4); width: 18px; height: 18px; }
.menu-ikon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-kecil); font-size: 18px; flex-shrink: 0; }
.menu-ikon svg { width: 20px; height: 20px; }
.kaki-versi { margin-top: var(--sp-8); text-align: center; }
.saklar { position: relative; width: 48px; height: 28px; flex-shrink: 0; }
.saklar input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.saklar span { position: absolute; inset: 0; border-radius: var(--r-pil); background: var(--rule-kuat); transition: background var(--durasi); }
.saklar span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: var(--r-pil); background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform var(--durasi); }
.saklar input:checked + span { background: var(--merek); }
.saklar input:checked + span::after { transform: translateX(20px); }
.saklar input:focus-visible + span { outline: 2px solid var(--merek); outline-offset: 2px; }

.kartu-form { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); padding: var(--sp-4); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-kartu); box-shadow: var(--bayang-kartu); }

.panduan-isi { display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--fs-isi); line-height: 1.65; }
.panduan-isi h2 { font-size: var(--fs-kartu); font-weight: 600; margin-top: var(--sp-2); }
.panduan-isi ul { list-style: disc; padding-left: var(--sp-6); }
.panduan-isi ol { list-style: decimal; padding-left: var(--sp-6); }
.panduan-isi li + li { margin-top: var(--sp-1); }
/* 0.13.16: poin bernomor. Nomor di kotak kecil seperti nomor tugas penting, teks pendek di sampingnya. */
.panduan-isi ol.pd-poin { list-style: none; padding: 0; margin: 0; counter-reset: poin; display: grid; gap: var(--sp-2); }
.pd-poin li { counter-increment: poin; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; align-items: start; margin: 0; line-height: 1.5; }
.panduan-isi .pd-poin li + li { margin-top: 0; }
.pd-poin li::before { content: counter(poin); display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 8px;
  background: var(--biru-l); color: var(--biru-t); font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.panduan-isi h2 { font-size: var(--fs-meta); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: var(--sp-2) 0 0; }
.panduan-isi h2:first-child { margin-top: 0; }

/* --- Form --------------------------------------------------------------- */

.form { display: flex; flex-direction: column; gap: var(--sp-3); }
.input {
  width: 100%; min-height: 50px; padding: 0 var(--sp-4);
  font-size: var(--fs-input);
  border: 1.5px solid var(--rule-kuat); border-radius: var(--r-kecil);
  background: var(--paper); color: var(--ink);
  -webkit-appearance: none; appearance: none;
}
select.input { background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: var(--sp-8); }
textarea.input { padding: var(--sp-3) var(--sp-4); min-height: 80px; resize: vertical; line-height: 1.5; }
.input-besar { min-height: 56px; font-size: 18px; font-weight: 500; border-radius: var(--r-kartu); }
/* Judul tugas: satu baris, tumbuh ke bawah kalau panjang (bukan bergeser ke samping). Enter tetap menyimpan. */
textarea.input-tumbuh { min-height: 56px; max-height: 8.6em; padding: 14px var(--sp-4); line-height: 1.35; resize: none; overflow-y: auto; field-sizing: content; }
.input::placeholder { color: var(--ink-4); }
.input:focus { outline: none; border-color: var(--merek); box-shadow: 0 0 0 4px color-mix(in srgb, var(--merek) 18%, transparent); }
.kolom { display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; min-width: 0; }
.dua-kolom { display: flex; gap: var(--sp-3); }
.form-baris { display: flex; gap: var(--sp-2); }
.form-baris .input { flex: 1; }
.lebih summary { cursor: pointer; font-size: var(--fs-meta); color: var(--merek-teks); font-weight: 600; min-height: 40px; display: flex; align-items: center; list-style: none; }
.lebih summary::-webkit-details-marker { display: none; }
.lebih[open] summary { margin-bottom: var(--sp-2); }
.lebih .dua-kolom + .dua-kolom { margin-top: var(--sp-2); }
.kelompok { border: 0; padding: 0; margin: var(--sp-2) 0 0; display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.kelompok legend { margin-bottom: var(--sp-2); padding: 0; }

.chip-baris { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 var(--sp-4); border-radius: var(--r-pil);
  border: 1.5px solid var(--rule-kuat); font-size: var(--fs-meta); font-weight: 500; background: var(--paper);
  transition: background var(--durasi), border-color var(--durasi), color var(--durasi);
}
.chip[aria-checked="true"], .chip[aria-pressed="true"] { background: var(--merek); border-color: var(--merek); color: var(--di-merek); }
.chip:disabled { opacity: .38; cursor: default; }
.chip b { font-weight: 700; font-variant-numeric: tabular-nums; }

/* 0.13.6: pemilih seragam (pilih.js). Jam, durasi, tanggal, dan pilihan pendek memakai chip yang sama,
   bukan kotak bawaan HP, supaya font dan bentuknya senada di seluruh app. */
.lebih-isi { display: flex; flex-direction: column; gap: var(--sp-4); }
.lebih-isi > .kolom { gap: var(--sp-2); }
.pd, .ptg { display: flex; flex-direction: column; gap: var(--sp-2); }
/* 0.13.14: jam = satu tombol (+ × untuk menghapus); panelnya dua slider. */
div.pj { display: flex; align-items: center; gap: 6px; }
.pj-tombol { gap: 6px; }
.pj-tombol svg { width: 16px; height: 16px; flex: none; }
.pj-tombol[aria-pressed="true"] { font-weight: 700; font-variant-numeric: tabular-nums; }
.pj-hapus { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--soft); color: var(--ink-3); }
.pj-hapus svg { width: 15px; height: 15px; }
.pj-hapus[hidden] { display: none; }
.pil-jam .pil-badan { display: grid; gap: var(--sp-3); }
.pj-salah { color: var(--merah-t, #b4233c); }
.pj-lewat { margin: -6px 0 0; text-align: center; font-size: 13px; color: var(--merah-t, #b4233c); }
.pj-geser { display: grid; gap: 8px; }
.pj-geser input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; margin: 10px 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(90deg, var(--merek) 0 var(--isi, 0%), var(--soft) var(--isi, 0%) 100%); }
.pj-geser input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: var(--paper);
  border: 3px solid var(--merek); box-shadow: 0 2px 6px rgb(10 20 50 / .25); }
.pj-geser input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--paper); border: 3px solid var(--merek); }
.pj-geser input[type=range]:focus { outline: none; }
.pj-geser input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--merek) 30%, transparent); }
/* Isian tambahan tugas sebagai baris pendek (judul kiri, isian kanan), bukan formulir bertumpuk. */
.lebih-isi.lr { gap: var(--sp-3); }
/* Lebar kolom judul dan chip dihitung supaya "Besok · Lusa · Tanggal lain…" muat satu baris di HP 360px. */
.lr-baris { display: grid; grid-template-columns: 60px minmax(0, 1fr); align-items: center; column-gap: var(--sp-2); row-gap: var(--sp-2); }
/* Ukuran huruf sama dengan chip Hari ini / Besok di atasnya. */
.lr-baris .chip { min-height: 38px; padding-inline: 10px; }
.lr-baris .chip-baris { gap: 6px; }
.lr-baris .pd-ketik .input { min-height: 38px; }
.lr-baris > .label { margin: 0; }
/* Chip label bisa dua baris: judulnya sejajar baris pertama, bukan di tengah. */
.lr-label > .label { align-self: start; margin-top: 12px; }
.lr-baris > :not(.label) { grid-column: 2; }
.lr-baris .chip-baris { flex-wrap: wrap; }
.lr-baris .label-baru { display: flex; gap: var(--sp-2); }
.lr-baris .label-baru[hidden] { display: none; }
.pd-ketik { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-meta); color: var(--ink-3); }
.pd-ketik .input { width: 84px; min-height: 40px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.pd-ketik .input::-webkit-inner-spin-button, .pd-ketik .input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ptg-lain[aria-pressed="true"] { background: var(--merek); border-color: var(--merek); color: var(--di-merek); }
.ps-pil { position: relative; display: inline-flex; }
.ps-pil input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ps-pil input:checked + .chip { background: var(--merek); border-color: var(--merek); color: var(--di-merek); }
.ps-pil input:focus-visible + .chip { outline: 2px solid var(--merek); outline-offset: 2px; }
.ps-pil input:disabled + .chip { opacity: .4; }

/* 0.13.7: isian.js. Daftar pilihan, kalender, jam, dan angka memakai panel Rutin, bukan kotak bawaan HP.
   Elemen aslinya tetap di form (tak terlihat) supaya nilai dan penangan lama tidak berubah. */
.pil-asli { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; overflow: hidden; }
.pil-pemicu { display: flex; align-items: center; gap: var(--sp-2); text-align: left; cursor: pointer; background-image: none; }
.pil-pemicu .pil-teks { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pil-pemicu .pil-panah { width: 18px; height: 18px; flex-shrink: 0; color: var(--ink-3); }
.pil-pemicu-tanggal > svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--merek-teks); }
.pil-pemicu.pil-kosong .pil-teks { color: var(--ink-4); }
.pil-pemicu:disabled { opacity: .5; cursor: default; }
.nt-pilih.pil-pemicu { display: inline-flex; padding: 0 10px 0 12px; gap: 4px; }
.nt-pilih.pil-pemicu .pil-panah { width: 15px; height: 15px; }
.pil-angka { cursor: pointer; caret-color: transparent; }

.pil-lapis { position: fixed; inset: 0; z-index: 70; }
.pil-tirai { position: absolute; inset: 0; background: var(--tirai); animation: pudar 160ms ease-out; }
.pil-panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 86dvh;
  display: flex; flex-direction: column; background: var(--paper); color: var(--ink);
  border-radius: var(--r-besar) var(--r-besar) 0 0; box-shadow: var(--bayang-1);
  padding-bottom: env(safe-area-inset-bottom); animation: naik 220ms cubic-bezier(.2, .8, .2, 1);
}
.pil-kepala { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2) 0 var(--sp-4); min-height: 52px; }
.pil-kepala h2 { font-size: 16px; font-weight: 700; }
.pil-x { display: grid; place-items: center; width: var(--sentuh); height: var(--sentuh); color: var(--ink-3); border-radius: var(--r-pil); }
.pil-x svg { width: 20px; height: 20px; }
.pil-badan { padding: var(--sp-1) var(--sp-4) var(--sp-4); overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-3); overscroll-behavior: contain; }
.pil-bawah { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.pil-layar { display: block; text-align: center; font-size: 34px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }

.pil-opsi-daftar { display: flex; flex-direction: column; margin: 0 calc(var(--sp-4) * -1); }
.pil-opsi { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 50px; padding: 0 var(--sp-4); text-align: left; font-weight: 500; color: var(--ink); }
.pil-opsi:hover, .pil-opsi:active { background: var(--soft); }
.pil-opsi[aria-selected="true"] { background: var(--merek-latar); color: var(--merek-teks); font-weight: 700; }
.pil-opsi svg { width: 20px; height: 20px; flex-shrink: 0; }
.pil-cari { min-height: 44px; }

.kal-kepala { display: flex; align-items: center; justify-content: space-between; }
.kal-bulan { font-size: 16px; font-weight: 700; }
.kal-geser { display: grid; place-items: center; width: var(--sentuh); height: var(--sentuh); border-radius: var(--r-pil); color: var(--ink-2); }
.kal-geser svg { width: 22px; height: 22px; }
.kal-geser:disabled { opacity: .3; cursor: default; }
.kal-hari, .kal-kisi { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.kal-hari span { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.kal-kisi button { min-height: 42px; border-radius: var(--r-pil); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.kal-kisi button:not(:disabled):hover { background: var(--soft); }
.kal-kisi button[aria-current="date"] { box-shadow: inset 0 0 0 1.5px var(--merek); color: var(--merek-teks); }
.kal-kisi button[aria-pressed="true"] { background: var(--merek); color: var(--di-merek); box-shadow: none; }
.kal-kisi button:disabled { opacity: .3; cursor: default; }

.np-layar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.np-layar .pil-layar { flex: 1; }
.np-layar .np-baru { color: var(--merek-teks); }
.np-layar .np-kosong { color: var(--ink-4, #b7bdc9); }
.pd-ketik .input::placeholder { font-weight: 500; font-size: 14px; color: var(--ink-4, #b7bdc9); }
.np-geser { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r-pil); border: 1.5px solid var(--rule-kuat); font-size: 24px; font-weight: 600; color: var(--ink-2); }
.np-ket { text-align: center; margin-top: calc(var(--sp-2) * -1); }
.np-kisi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.np-kisi button { display: grid; place-items: center; min-height: 54px; border-radius: var(--r-kecil); background: var(--soft); color: var(--ink); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.np-kisi button:active { background: var(--rule-kuat); }
.np-kisi button svg { width: 26px; height: 26px; }
.np-kisi .np-selesai { background: var(--merek); color: var(--di-merek); font-size: 16px; font-weight: 700; }
@media (min-width: 900px) {
  .pil-panel { left: 50%; right: auto; bottom: auto; top: 50%; width: 400px; transform: translate(-50%, -50%); border-radius: var(--r-besar); animation: pudar 140ms ease-out; }
}
@media (prefers-reduced-motion: reduce) { .pil-panel, .pil-tirai { animation: none; } }
.chip-warna { width: 28px; height: 28px; padding: 0; border-radius: var(--r-pil); border: 3px solid transparent; }
.chip-warna[aria-checked="true"] { border-color: var(--ink); background-clip: padding-box; }

.hari-pilih { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-1); }
.hari-pilih label { position: relative; }
.hari-pilih input { position: absolute; opacity: 0; }
.hari-pilih span { display: grid; place-items: center; min-height: 42px; border-radius: var(--r-pil); border: 1.5px solid var(--rule-kuat); font-size: var(--fs-meta); background: var(--paper); }
.hari-pilih input:checked + span { background: var(--merek); border-color: var(--merek); color: var(--di-merek); }
.hari-pilih input:focus-visible + span { outline: 2px solid var(--merek); outline-offset: 2px; }

/* --- Sheet -------------------------------------------------------------- */

.tirai { position: fixed; inset: 0; z-index: 30; background: var(--tirai); animation: pudar 180ms ease-out; }
@keyframes pudar { from { opacity: 0; } }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 31;
  max-height: 92dvh; display: flex; flex-direction: column;
  background: var(--paper); border-radius: var(--r-besar) var(--r-besar) 0 0;
  box-shadow: var(--bayang-1);
  padding-bottom: env(safe-area-inset-bottom);
  overscroll-behavior: contain;
  animation: naik 240ms cubic-bezier(.2, .8, .2, 1);
}
@keyframes naik { from { transform: translateY(40px); opacity: 0; } }
.sheet-gagang { width: 40px; height: 5px; border-radius: var(--r-pil); background: var(--rule-kuat); margin: var(--sp-2) auto 0; }
.sheet-kepala { display: flex; align-items: center; gap: var(--sp-1); padding: 0 var(--sp-2); min-height: 52px; }
.sheet-tutup { display: grid; place-items: center; width: var(--sentuh); height: var(--sentuh); color: var(--ink-3); border-radius: var(--r-pil); }
.sheet-judul { font-size: 17px; font-weight: 700; }
.sheet-badan { padding: var(--sp-2) var(--sp-4) var(--sp-4); overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-3); -webkit-overflow-scrolling: touch; }
.sheet-kaki { padding: var(--sp-3) var(--sp-4) var(--sp-4); border-top: 1px solid var(--rule); }
.kaki-dua { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }
.kaki-dua .tbl { flex: 1; max-width: 240px; }

.aksi-daftar { display: flex; flex-direction: column; margin: 0 calc(var(--sp-4) * -1); }
.aksi-baris { display: flex; align-items: center; gap: var(--sp-3); min-height: 54px; padding: 0 var(--sp-4); text-align: left; text-decoration: none; color: inherit; font-weight: 500; }
.aksi-baris:active { background: var(--soft); }
.aksi-baris .menu-ikon { width: 34px; height: 34px; }

.titik-progres { display: flex; gap: var(--sp-1); justify-content: center; }
.titik-progres span { width: 24px; height: 5px; border-radius: var(--r-pil); background: var(--rule); transition: background var(--durasi), width var(--durasi); }
.titik-progres span.aktif { background: var(--merek); }
.judul-langkah { font-size: 18px; font-weight: 700; margin-top: var(--sp-2); line-height: 1.35; }
.baris-pilihan { justify-content: space-between; padding: var(--sp-2) 0; flex-wrap: wrap; }
.segmen { display: inline-flex; background: var(--soft); border-radius: var(--r-pil); padding: 3px; }
.segmen label { position: relative; display: grid; place-items: center; min-height: 36px; padding: 0 var(--sp-3); border-radius: var(--r-pil); font-size: var(--fs-meta); font-weight: 600; color: var(--ink-2); cursor: pointer; }
.segmen input { position: absolute; opacity: 0; }
.segmen label:has(input:checked) { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
/* 0.13.8 (Tutup hari): pilihan yang aktif diberi warna. Besok = biru, Lepas = merah muda. */
.segmen label:has(input[value="besok"]:checked) { background: var(--biru-l); color: var(--biru-t); }
.segmen label:has(input[value="lepas"]:checked) { background: var(--pink-l); color: var(--pink-t); }
.mood-kisi { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.mood { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--sp-3) var(--sp-1); border: 1.5px solid var(--rule); border-radius: var(--r-kartu); font-size: var(--fs-meta); cursor: pointer; transition: transform var(--durasi); }
.mood span { font-size: 28px; line-height: 1; }
.mood input { position: absolute; opacity: 0; }
.mood:has(input:checked) { border-color: var(--merek); background: var(--merek-latar); transform: scale(1.03); }
.kotak-info { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-kartu); font-size: var(--fs-meta); line-height: 1.55; }

/* --- Toast -------------------------------------------------------------- */

.toast-wadah { position: fixed; left: var(--sp-4); right: var(--sp-4); bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 40; display: flex; flex-direction: column; gap: var(--sp-2); align-items: center; pointer-events: none; }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: var(--sp-3);
  max-width: 480px; width: 100%; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-kartu);
  background: #1f1f1e; color: #f2f2f0; font-size: var(--fs-meta);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .25); animation: naik 200ms ease-out;
}
.toast-isi { flex: 1; }
.toast-aksi { color: #9cc0ff; font-weight: 600; min-height: 36px; padding: 0 var(--sp-1); }

/* --- Onboarding & aktivasi ---------------------------------------------- */

.onb { position: fixed; inset: 0; z-index: 50; isolation: isolate; overflow-x: hidden; display: flex; flex-direction: column; background: var(--kanvas); padding: calc(env(safe-area-inset-top) + var(--sp-4)) var(--sp-4) calc(env(safe-area-inset-bottom) + var(--sp-4)); overflow-y: auto; }
.onb::before { content: ''; position: absolute; top: -120px; right: -120px; width: 320px; height: 320px; border-radius: 50%; border: 28px solid var(--biru-l); z-index: -1; }
.onb-merek { display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; font-size: 18px; color: var(--merek-teks); }
.logo-rutin { width: 30px; height: 30px; overflow: visible; }

/* Bendera berkibar. Kain memutar pelan pada pangkalnya di tiang, tiang diam.
   Dipakai di tempat logo tampil besar (onboarding, aktivasi, Lainnya); di
   header sidebar logonya kecil dan dibiarkan diam supaya tidak jadi kedipan. */
.logo-kain { transform-origin: 18px 19px; }
.logo-rutin--kibar .logo-kain { animation: kibar 3.6s ease-in-out infinite; }
@keyframes kibar {
  0%, 100% { transform: rotate(0deg) scaleX(1); }
  30%      { transform: rotate(-1.6deg) scaleX(0.975); }
  65%      { transform: rotate(1.4deg) scaleX(1.02); }
}
.onb-isi { flex: 1; max-width: 480px; width: 100%; margin: var(--sp-8) auto 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.onb-isi .titik-progres { justify-content: flex-start; margin-bottom: var(--sp-2); }
.onb-emoji { font-size: 44px; line-height: 1; }
.onb-judul { font-size: var(--fs-hero); font-weight: var(--fw-hero); letter-spacing: -0.02em; line-height: 1.2; }
.onb-kaki { max-width: 480px; width: 100%; margin: var(--sp-6) auto 0; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.onb-kaki .tbl { min-width: 140px; }
.onb-kartu { background: var(--paper); border-radius: var(--r-kartu); padding: var(--sp-4); border: 1px solid var(--rule); box-shadow: var(--bayang-kartu); display: flex; flex-direction: column; gap: var(--sp-3); }

/* --- Fokus: layar penuh tanpa navigasi (03 §5) --------------------------- */

.fokus {
  position: fixed; inset: 0; z-index: 45;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(env(safe-area-inset-top) + var(--sp-4)) var(--sp-6) calc(env(safe-area-inset-bottom) + var(--sp-6));
  background: linear-gradient(180deg, var(--lilac-l) 0%, var(--kanvas) 55%);
  animation: pudar 200ms ease-out;
}
.fokus.istirahat { background: linear-gradient(180deg, var(--mint-l) 0%, var(--kanvas) 55%); }
.fokus-atas { width: 100%; max-width: 480px; display: flex; justify-content: space-between; align-items: center; }
.fokus-tugas { margin-top: var(--sp-6); text-align: center; max-width: 480px; }
.fokus-tugas small { display: block; font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--sp-1); }
.fokus-tugas b { font-size: 20px; font-weight: 600; line-height: 1.35; }
.fokus-tengah { flex: 1; display: grid; place-items: center; width: 100%; }
.fokus-cincin { position: relative; width: min(72vw, 300px); aspect-ratio: 1; }
.fokus-cincin svg { width: 100%; height: 100%; transform: rotate(-90deg); stroke-linecap: round; }
.fokus-cincin .jejak { stroke: color-mix(in srgb, var(--lilac-t) 14%, transparent); stroke-width: 10; }
.fokus-cincin .jalan { stroke: var(--lilac-t); stroke-width: 10; transition: stroke-dashoffset 1s linear; }
.fokus.istirahat .fokus-cincin .jalan { stroke: var(--mint-isi); }
.fokus-waktu { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.fokus-waktu b { font-size: var(--fs-timer); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; }
.fokus-waktu small { font-size: var(--fs-meta); color: var(--ink-3); margin-top: var(--sp-2); }
.fokus-pola { display: flex; gap: var(--sp-2); justify-content: center; margin-bottom: var(--sp-4); }
.fokus-bawah { width: 100%; max-width: 480px; display: flex; gap: var(--sp-3); }
.fokus-bawah .tbl { flex: 1; min-height: 56px; }

/* --- Tur: sorotan + gelembung ------------------------------------------- */

.tur { position: fixed; inset: 0; z-index: 60; }
.tur-sorot { position: absolute; border-radius: var(--r-kartu); box-shadow: 0 0 0 9999px rgba(15, 15, 25, .62); transition: all 260ms ease; pointer-events: none; }
.tur-gelembung {
  position: absolute; left: var(--sp-4); right: var(--sp-4); max-width: 420px; margin: 0 auto;
  background: var(--paper); border-radius: var(--r-kartu); padding: var(--sp-4); box-shadow: var(--bayang-angkat);
  display: flex; flex-direction: column; gap: var(--sp-2); transition: top 260ms ease;
}
.tur-gelembung b { font-size: var(--fs-kartu); }
.tur-gelembung .kaki-dua { margin-top: var(--sp-2); }

/* --- Laptop (>900px): sidebar (Beres 03 §7) ----------------------------- */

@media (min-width: 900px) {
  .nav-bawah { display: none; }
  .sidebar {
    display: flex; flex-direction: column; gap: var(--sp-1);
    position: fixed; top: 0; bottom: 0; left: 0; width: 248px;
    padding: var(--sp-6) var(--sp-4); border-right: 1px solid var(--rule); background: var(--paper);
  }
  .sidebar-merek { display: flex; align-items: center; gap: var(--sp-2); font-size: 18px; font-weight: 700; margin: 0 var(--sp-2) var(--sp-6); }
  .sidebar-tambah { margin-bottom: var(--sp-4); }
  .side-btn { display: flex; align-items: center; gap: var(--sp-3); text-align: left; min-height: 44px; padding: 0 var(--sp-4); border-radius: var(--r-kecil); color: var(--ink-2); font-weight: 500; }
  .side-btn svg { width: 20px; height: 20px; }
  .side-btn:hover { background: var(--soft); }
  .side-btn[aria-current="page"] { background: var(--merek-latar); color: var(--merek-teks); font-weight: 600; }
  .sidebar { overflow-y: auto; gap: 2px; scrollbar-width: thin; }
  .side-btn { flex-shrink: 0; min-height: 40px; font-size: 14px; }
  .sidebar-merek { margin-bottom: var(--sp-4); }
  .sidebar-tambah { min-height: 44px; }
  .side-label {
    margin: var(--sp-4) var(--sp-4) var(--sp-1); flex-shrink: 0;
    font-size: var(--fs-label); font-weight: var(--fw-label); letter-spacing: var(--tracking-caps);
    text-transform: uppercase; color: var(--ink-3);
  }
  .side-emoji { width: 20px; text-align: center; font-size: 16px; line-height: 1; }
  /* Sub-halaman dibuka dari sidebar: tombol kembali ke menu Lainnya tidak perlu. */
  .kepala .tbl-ikon[data-sub=""] { display: none; }
  .isi { margin-left: 248px; margin-right: 0; padding: var(--sp-8) var(--sp-8) var(--sp-8); max-width: 820px; }
  .hari-ini-kisi { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0 var(--sp-4); align-items: start; }
  .hari-ini-kisi > .kartu:first-child { grid-column: 1 / -1; }
  .sheet { left: 50%; right: auto; bottom: auto; top: 50%; width: 500px; transform: translate(-50%, -50%); border-radius: var(--r-besar); animation: pudar 160ms ease-out; }
  .sheet-gagang { display: none; }
  .toast-wadah { bottom: var(--sp-6); }
  .baris-tombol:hover .baris-teks { color: var(--merek-teks); }
  .habit-petak:hover { border-color: var(--rule-kuat); }
  .fokus { left: 0; }
  .minggu-geser { margin: 0; padding-left: 0; padding-right: 0; flex-wrap: wrap; }
  .hari-kartu { flex: 1 1 140px; }
}

@media (max-width: 360px) {
  .dua-kolom { flex-direction: column; }
  .lingkar { width: 112px; height: 112px; }
  .lingkar-tengah b { font-size: 26px; }
  .habit-kisi { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Versi 4 (27 Sep 2026): bendera bergerak, tur cerita, Misi pertama, Bukit
   bulan. Disetujui dari artifak "Perjalanan Pemakai Rutin". Warna tetap
   biru modern (bukan krem). Semua gerak ikut "kurangi gerak" (token.css).
   ========================================================================== */

/* --- Kartu sapaan = cover beranda (cover.js, 0.5.0) ---------------------- */
.sapa {
  --px: 0; --py: 0; --scrim: rgba(255, 255, 255, .35);
  position: relative; overflow: hidden; isolation: isolate;
  width: 100%; aspect-ratio: 328 / 190; min-height: 190px; max-height: 260px; margin-bottom: var(--sp-3);
  border-radius: var(--r-besar); background: #9db8d8; color: #16233a;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; cursor: pointer;
}
.sapa-siang { background: #a9d3f2; }
.sapa-sore { background: #c9c3e8; --scrim: rgba(255, 246, 238, .6); }
.sapa-pagi { --scrim: rgba(255, 255, 255, .5); }
.sapa-malam { background: #14224d; color: #f2f6ff; --scrim: rgba(6, 12, 32, .45); }
.sapa-foto { position: absolute; inset: -12px; z-index: 0; transform: translate(calc(var(--px) * -10px), calc(var(--py) * -6px)); }
.sapa-zum { position: absolute; inset: 0; animation: sapa-zum 26s ease-in-out infinite alternate; }
.sapa-zum img { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes sapa-zum { from { transform: scale(1.02) translateX(-1%); } to { transform: scale(1.09) translateX(1.5%); } }
.sapa-ambien { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; transform: translate(calc(var(--px) * -14px), calc(var(--py) * -6px)); }
.cv-awan { position: absolute; height: 26px; border-radius: 999px; background: radial-gradient(ellipse at 50% 60%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 70%); filter: blur(2px); animation: cv-geser linear infinite; }
@keyframes cv-geser { from { transform: translateX(-140px); } to { transform: translateX(520px); } }
.cv-bintang { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; animation: cv-kerlip 3s ease-in-out infinite; }
@keyframes cv-kerlip { 50% { opacity: .15; transform: scale(.6); } }
.cv-sorot { position: absolute; inset: -30% -10%; background: linear-gradient(105deg, transparent 40%, rgba(255, 236, 200, .35) 50%, transparent 60%); animation: cv-sapu 9s ease-in-out infinite; }
@keyframes cv-sapu { 0%, 100% { transform: translateX(-30%); } 50% { transform: translateX(30%); } }
.cv-pendar { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: radial-gradient(ellipse at 50% 100%, rgba(255, 170, 110, .45), transparent 65%); animation: cv-napas 6s ease-in-out infinite; }
@keyframes cv-napas { 50% { opacity: .55; } }
/* Selubung tipis di sisi kiri supaya tulisan selalu terbaca di atas gambar. */
.sapa::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, var(--scrim) 0, transparent 62%); }
.sapa-teks { position: relative; z-index: 3; max-width: 62%; padding: var(--sp-4) var(--sp-4) 0; pointer-events: none; }
.sapa-teks .tbl-kecil { pointer-events: auto; }
.sapa-pagi .sapa-teks, .sapa-sore .sapa-teks { text-shadow: 0 0 12px rgba(255, 255, 255, .55); }
.sapa .sub-judul { margin: 0 0 2px; font-weight: 500; color: inherit; opacity: .8; }
/* nowrap: "10 j 54 m lagi sampai tidur" tetap satu baris di HP 360px (boleh melewati 62%, di atas langit). */
.sapa-sisa { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; opacity: .78; white-space: nowrap; }
.sapa-sisa svg { width: 14px; height: 14px; }
.sapa-tutup { margin-top: var(--sp-3); background: rgba(255, 255, 255, .78); color: #1e4fa8; text-shadow: none; }
.sapa-malam .sapa-tutup { background: rgba(255, 255, 255, .16); color: #fff; }
/* Bukit depan dan bendera ikut bergeser lebih jauh dari gambar (parallax). */
.sapa-depan { position: absolute; inset: 0; z-index: 3; pointer-events: none; transform: translate(calc(var(--px) * -20px), calc(var(--py) * -8px)); }
.sapa-bukit { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; stroke: none; }
.sapa-bendera { position: absolute; left: calc(78.7% - 16px); top: calc(76.8% - 59px); width: 72px; height: 67px; }
.bendera-mini { width: 100%; height: 100%; overflow: visible; stroke: none; }
.cv-riak { position: absolute; z-index: 4; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .9); pointer-events: none; animation: cv-riak 1s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes cv-riak { from { opacity: .9; transform: scale(.4); } to { opacity: 0; transform: scale(9); } }
@media (prefers-reduced-motion: reduce) { .sapa-zum, .cv-awan, .cv-bintang, .cv-sorot, .cv-pendar { animation: none; } .sapa-foto, .sapa-ambien, .sapa-depan { transform: none; } }

/* --- Riak sekali saat centang ketiga dari 3 hal ------------------------- */
.kartu-utama.riak-jalan { position: relative; overflow: hidden; isolation: isolate; }
.kartu-utama.riak-jalan::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px;
  border-radius: 50%; background: radial-gradient(circle, var(--biru-l) 0 38%, transparent 62%);
  opacity: 0; transform: scale(.2); pointer-events: none; z-index: -1;
  animation: riak 1.4s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes riak { 20% { opacity: .9; } 100% { opacity: 0; transform: scale(1.25); } }

/* --- Pembuka "Fajar" ------------------------------------------------------ */
.pembuka { position: fixed; inset: 0; z-index: 90; background: #0A1325; cursor: pointer; transition: opacity 380ms ease; }
.pembuka svg { position: absolute; inset: 0; width: 100%; height: 100%; stroke: none; }
.pembuka.pergi { opacity: 0; pointer-events: none; }
.pembuka-merek { position: absolute; left: 0; right: 0; top: calc(50% + min(25vw, 22.7vh)); text-align: center; opacity: 0; }
.pembuka-merek b { display: block; font-size: 34px; font-weight: 600; letter-spacing: -.025em; line-height: 1.1; }
.pembuka-merek span { font-size: 14px; opacity: .72; }

/* --- Adegan Panduan (dulu tur cerita; adegan.js) -------------------------- */
.pd-adegan { margin: 0 0 var(--sp-3); padding: var(--sp-5) var(--sp-4) var(--sp-4); border-radius: var(--r-kartu); background: linear-gradient(180deg, var(--biru-l) 0%, var(--paper) 85%); border: 1px solid var(--rule); display: grid; justify-items: center; gap: var(--sp-3); text-align: center; }
.pd-panggung { display: grid; justify-items: center; width: 100%; }
.pd-adegan figcaption { font-size: 14.5px; line-height: 1.5; color: var(--ink); font-weight: 500; max-width: 34ch; text-wrap: balance; }

/* 0.13.16: adegan memakai komponen asli Hari Ini (adegan.js), di dalam kartu putih seperti layar app.
   Hanya gambar: tidak bisa diketuk. Waktu tiap gerak diatur lewat --d (ms). */
.adg-app { position: relative; width: 100%; max-width: 340px; padding: var(--sp-1) var(--sp-4) var(--sp-3); text-align: left; background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--r-kartu); box-shadow: var(--bayang-kartu); pointer-events: none; overflow: hidden; }
.adg-app .bagian-hari:first-child { padding-top: var(--sp-3); }
.adg-app .baris:last-child, .adg-app .bagian-hari > .hb-baris:last-child { border-bottom: 0; }
.adg-toast .toast-aksi { min-height: 0; }
.adg-app .baris-tombol { min-height: 48px; }
/* Bulatan centang: kosong dan terisi ditumpuk; yang terisi muncul pada --d. */
.adg-bulat { display: grid; place-items: center; min-width: 44px; min-height: 44px; flex-shrink: 0; }
.adg-bulat > * { grid-area: 1 / 1; }
.adg-isi { transform: scale(0); }
.adg-cek .adg-isi { animation: adg-letup 320ms cubic-bezier(.2, .9, .3, 1.3) both; animation-delay: var(--d); }
@keyframes adg-letup { from { transform: scale(0); } to { transform: scale(1); } }
.adg-coret { text-decoration: line-through; text-decoration-color: transparent; animation: adg-coret 1ms both; animation-delay: calc(var(--d) + 120ms); }
@keyframes adg-coret { to { text-decoration-color: currentColor; color: var(--ink-3); } }
/* Nomor tugas penting 1-2-3 muncul satu per satu. */
.adg-nomor { animation: adg-letup 360ms cubic-bezier(.2, .9, .3, 1.4) both; animation-delay: var(--d); }
.adg-redup { animation: adg-redup 500ms 1.8s both; }
@keyframes adg-redup { to { opacity: .45; } }
/* Dua isi ditumpuk, berganti pada --d (angka 0/3 -> 3/3, judul, api streak 5 -> 6). */
.adg-tukar { display: inline-grid; }
.adg-tukar > * { grid-area: 1 / 1; }
.adg-tukar > :first-child { animation: adg-hilang 200ms both; animation-delay: var(--d); }
.adg-tukar > :last-child { animation: adg-masuk 300ms both; animation-delay: var(--d); }
@keyframes adg-hilang { to { opacity: 0; } }
@keyframes adg-masuk { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.adg-muncul { animation: adg-muncul 400ms both; animation-delay: var(--d); }
@keyframes adg-muncul { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.adg-catatan { margin-top: var(--sp-2); font-size: 12.5px; color: var(--ink-3); text-align: center; }
/* Geser ke kiri: label "Besok →" terlihat, baris pergi, lalu toast. */
.adg-geser { position: relative; animation: adg-tutup 350ms 2.1s both; }
.adg-geser::before { opacity: 1; }
.adg-geser .geser-isi { animation: adg-geser 900ms 700ms cubic-bezier(.5, 0, .2, 1) both; }
@keyframes adg-geser { 60% { transform: translateX(-38%); } 100% { transform: translateX(-110%); } }
@keyframes adg-tutup { to { max-height: 0; min-height: 0; opacity: 0; border-width: 0; } }
.adg-geser { max-height: 80px; }
.adg-jari { position: absolute; right: 70px; top: 104px; width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--merek) 26%, transparent);
  border: 2px solid color-mix(in srgb, var(--merek) 50%, transparent); opacity: 0; animation: adg-jari 1.3s 400ms cubic-bezier(.4, 0, .2, 1) both; }
@keyframes adg-jari { 0% { opacity: 0; transform: scale(1.4); } 20% { opacity: 1; transform: scale(1); } 80% { opacity: 1; transform: translateX(-130px); } 100% { opacity: 0; transform: translateX(-140px); } }
.adg-toast { position: relative; margin-top: var(--sp-2); opacity: 0; animation: adg-muncul 400ms 2.3s both; }
/* Hari berat: dua tugas lain pergi. */
.adg-pergi { max-height: 80px; animation: adg-tutup 450ms both; animation-delay: var(--d); overflow: hidden; }
/* Habit: titik minggu ini terisi; Kamis bolong. */
.adg-minggu { display: flex; justify-content: space-between; gap: 4px; margin-top: var(--sp-2); padding-top: var(--sp-2); }
.adg-minggu span { display: grid; justify-items: center; gap: 4px; font-size: 10.5px; color: var(--ink-3); }
.adg-minggu b { font-weight: 600; }
.adg-minggu i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--peach-l); color: #fff; }
.adg-minggu i svg { width: 13px; height: 13px; stroke-width: 3; opacity: 0; }
.adg-minggu i:not(.bolong) { animation: adg-titik 300ms both; animation-delay: var(--d); }
.adg-minggu i:not(.bolong) svg { animation: adg-nyala 1ms both; animation-delay: calc(var(--d) + 150ms); }
@keyframes adg-nyala { to { opacity: 1; } }
.adg-minggu i.bolong { background: none; border: 1.5px dashed var(--ink-4); opacity: .6; }
@keyframes adg-titik { to { background: #f08c4a; } }
@media (prefers-reduced-motion: reduce) { .pd-adegan * { animation-duration: 1ms !important; animation-delay: 0ms !important; } }

/* --- Misi pertama --------------------------------------------------------- */
.misi { background: linear-gradient(180deg, color-mix(in srgb, var(--mint-l) 70%, var(--paper)) 0%, var(--paper) 140px); border-color: color-mix(in srgb, var(--mint-isi) 25%, var(--rule)); }
.misi-kepala { display: flex; align-items: center; justify-content: space-between; }
.misi-tutup { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-3); margin: -6px -6px 0 0; }
.misi-tutup svg { width: 18px; height: 18px; }
.misi-tahap { display: flex; align-items: center; justify-content: center; gap: 10px; margin: var(--sp-2) 0 var(--sp-3); }
.misi-tahap i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 13px; background: var(--paper); color: var(--ink-3); border: 1.5px solid var(--rule-kuat); transition: background 400ms, color 400ms; }
.misi-tahap i.on { background: var(--merek); color: var(--di-merek); border-color: var(--merek); }
.misi-tahap i.lewat { background: var(--biru-l); color: var(--biru-t); border-color: var(--biru-l); }
.misi-tahap i svg { width: 16px; height: 16px; }
.misi-tahap span { width: 18px; height: 2px; border-radius: 1px; background: var(--rule-kuat); }
.misi-judul { text-align: center; font-size: 19px; font-weight: 700; }
.misi-sub { text-align: center; font-size: var(--fs-meta); color: var(--ink-3); margin: 2px 0 var(--sp-3); }
.misi-daftar { display: flex; flex-direction: column; gap: var(--sp-2); }
.misi-tugas { display: flex; align-items: center; gap: var(--sp-3); padding: 10px 12px; border-radius: 14px; background: var(--paper); border: 1px solid var(--rule); }
.misi-tugas .baris-teks b { display: block; font-size: 14.5px; font-weight: 600; }
.misi-tugas.beres .baris-teks b { color: var(--ink-3); text-decoration: line-through; }
.misi-kunci { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: var(--sp-2); padding: 10px; border: 1.5px dashed var(--rule-kuat); border-radius: 14px; font-size: 12.5px; color: var(--ink-3); }
.misi-kunci svg { width: 16px; height: 16px; }
.misi-hadiah .tbl-penuh { margin-top: var(--sp-2); }
/* --- Bukit bulan (Rapor › Bulan) ------------------------------------------ */
.bukit { padding: 0; overflow: hidden; position: relative; background: linear-gradient(180deg, var(--biru-l) 0%, var(--paper) 90%); }
.bukit svg { display: block; width: 100%; height: auto; stroke: none; }
.bukit-judul { position: absolute; left: var(--sp-4); top: var(--sp-3); }
.bukit-judul b { display: block; font-size: var(--fs-judul); font-weight: 700; }
.bukit-judul span { font-size: var(--fs-meta); color: var(--ink-3); }
.bb-mentari { fill: #ffd9a8; opacity: .8; }
.bb-bukit1 { fill: var(--mint-l); }
.bb-bukit2 { fill: color-mix(in srgb, var(--mint-isi) 45%, var(--mint-l)); }
.bb-jalur { fill: none; stroke: var(--paper); stroke-width: 2; stroke-dasharray: 1.5 5; stroke-linecap: round; opacity: .9; }
.bb-titik { fill: var(--paper); opacity: .8; }
.bb-titik.nanti { opacity: .35; }
.bb-kini { fill: none; stroke: var(--merek); stroke-width: 2; }
.bb-pos rect { fill: var(--paper); stroke: var(--peach-t); stroke-width: 1.5; }
.bb-pos.kena rect { fill: var(--peach-t); }
.bb-pos text { font-family: var(--font); font-size: 9.5px; font-weight: 600; fill: var(--ink-3); stroke: none; }
.bb-pos.kena text { fill: var(--peach-t); }
.bb-bendera rect, .bb-bendera path { fill: url(#bb-g); }
.bb-bendera.berat { opacity: .5; }
.bb-bendera.berat path { fill: #9cb3cf; }
.bb-bendera { animation: bb-tancap 450ms cubic-bezier(.3, .8, .3, 1) both; }
@keyframes bb-tancap { from { opacity: 0; transform: translateY(-14px); } }
/* --- Versi 5: panggung Fokus (Tiang / Layar) ---------------------------- */
.fokus-mode { display: flex; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-3); }
.fokus-panggung { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 0; max-width: 480px; }
.pg { width: 100%; display: grid; place-items: center; min-height: 0; }
.pg svg, .kartu-peta svg { stroke: none; overflow: visible; }
.pg-tiang { width: auto; height: min(40vh, 330px); }
.pg-peta { width: min(100%, 420px); height: auto; display: block; }
.pg-layar .pg-peta { max-height: 36vh; }
.pg-pulau:not(.sudah):not(.tuju) ellipse:nth-child(2) { fill: #b7d0bb; }
.pg-pulau:not(.sudah):not(.tuju) ellipse:nth-child(3) { fill: #c6dcc8; }
.pg-pulau text { font-family: var(--font); font-size: 9px; font-weight: 600; fill: #1B2A41; stroke: #eef6ff; stroke-width: 3px; stroke-linejoin: round; paint-order: stroke; }
.pg-pulau.tuju text { fill: #1e4fa8; }
.fokus-waktu-bawah { display: grid; justify-items: center; text-align: center; }
.fokus-waktu-bawah b { font-size: var(--fs-timer); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; }
.fokus-waktu-bawah small { font-size: var(--fs-meta); color: var(--ink-3); margin-top: var(--sp-1); }
.pg-koleksi { width: 100%; background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; padding: 10px 12px; display: grid; gap: 2px; text-align: left; }
.pg-koleksi .label { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
.pg-deret { display: flex; gap: 6px; align-items: flex-end; min-height: 40px; flex-wrap: wrap; }
.pg-deret svg { width: 20px; height: 40px; stroke: none; }
.pg-deret svg:last-child { animation: bb-tancap 450ms cubic-bezier(.3, .8, .3, 1) both; }
.kartu-peta .pg-peta { width: 100%; margin-top: var(--sp-2); }

/* --- Versi 5: tur keliling di dalam app ---------------------------------- */
.tk { position: fixed; inset: 0; z-index: 60; }
.tk-sorot { position: fixed; border-radius: 18px; box-shadow: 0 0 0 200vmax rgba(10, 16, 32, .58); outline: 2px solid rgba(255, 255, 255, .9); outline-offset: 2px; transition: left 380ms cubic-bezier(.2, .8, .3, 1), top 380ms cubic-bezier(.2, .8, .3, 1), width 380ms cubic-bezier(.2, .8, .3, 1), height 380ms cubic-bezier(.2, .8, .3, 1); pointer-events: none; }
.tk-sorot.ringan { box-shadow: 0 0 0 200vmax rgba(10, 16, 32, .28); }
.tk-sorot.kosong { left: 50% !important; top: 50% !important; width: 0 !important; height: 0 !important; outline: 0; }
.tk-kartu { position: fixed; left: var(--sp-4); right: var(--sp-4); max-width: 420px; margin: 0 auto; background: var(--paper); border-radius: 20px; padding: var(--sp-4); box-shadow: 0 18px 40px -16px rgba(10, 20, 50, .5); animation: muncul 320ms ease-out both; transition: top 380ms cubic-bezier(.2, .8, .3, 1); }
.tk-kepala { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.tk-bendera { width: 26px; height: 24px; flex-shrink: 0; }
.tk-bendera svg { width: 100%; height: 100%; stroke: none; }
.tk-langkah { flex: 1; display: flex; gap: 5px; }
.tk-langkah i { width: 7px; height: 7px; border-radius: 50%; background: var(--rule-kuat); transition: background 300ms, width 300ms; }
.tk-langkah i.lewat { background: var(--biru-300); }
.tk-langkah i.kini { width: 18px; border-radius: 4px; background: var(--merek); }
.tk-lewati { font-size: var(--fs-meta); font-weight: 600; color: var(--ink-3); padding: 6px 4px; }
.tk-judul { display: block; font-size: 17px; font-weight: 700; line-height: 1.35; }
.tk-isi { margin-top: 4px; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.tk-bawah { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.tk-bawah .tbl { flex: 1; min-height: 46px; }
@media (prefers-reduced-motion: reduce) { .tk-sorot, .tk-kartu { transition: none; animation: none; } }

/* --- Versi 5: Level Rutin (level.js) --------------------------------------- */
/* Bendera di kartu sapaan ikut warna bendera level. Gradien bm-t / bm-k dari
   bendera.js; CSS mengalahkan atribut stop-color. */
.sapa-bendera.tier-1 #bm-t stop:nth-child(1), .sapa-bendera.tier-1 #bm-k stop:nth-child(1) { stop-color: #f6d97a; }
.sapa-bendera.tier-1 #bm-t stop:nth-child(2), .sapa-bendera.tier-1 #bm-k stop:nth-child(2) { stop-color: #c98f12; }
.sapa-bendera.tier-2 #bm-t stop:nth-child(1), .sapa-bendera.tier-2 #bm-k stop:nth-child(1) { stop-color: #f2f6fc; }
.sapa-bendera.tier-2 #bm-t stop:nth-child(2), .sapa-bendera.tier-2 #bm-k stop:nth-child(2) { stop-color: #6f84a6; }
.sapa-bendera.tier-3 #bm-t stop:nth-child(1), .sapa-bendera.tier-3 #bm-k stop:nth-child(1) { stop-color: #a4f1ff; }
.sapa-bendera.tier-3 #bm-t stop:nth-child(2), .sapa-bendera.tier-3 #bm-k stop:nth-child(2) { stop-color: #2b8fd6; }

.xp-pop { position: absolute; right: 14px; top: 12px; padding: 3px 10px; border-radius: 999px; background: var(--merek); color: #fff; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; opacity: 0; z-index: 2; }
.xp-pop.jalan { animation: xp-pop 1.1s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes xp-pop { 0% { opacity: 0; transform: translateY(8px) scale(.7); } 18% { opacity: 1; transform: translateY(-2px) scale(1.06); } 70% { opacity: 1; transform: translateY(-14px); } 100% { opacity: 0; transform: translateY(-22px); } }

/* Lencana level menempel di tepi bawah cover seperti stiker (0.5.0). */
.lv-mini { --tier-a: #5b9bf0; --tier-b: #1e4fa8; position: relative; z-index: 4; display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 6px var(--sp-3); width: 100%; margin: -34px 0 var(--sp-3); padding: 0 var(--sp-2) 0 var(--sp-4); background: none; border: 0; text-align: left; }
.lv-mini .lv-lencana { width: 54px; height: 54px; filter: drop-shadow(0 6px 8px rgba(20, 60, 140, .35)); }
.lv-mini .lv-teks { padding-top: 38px; }
.lv-mini .lv-bar { margin-right: var(--sp-2); }
.lv-mini:active { transform: scale(.99); }
/* Lencana level = SVG segi enam dari lambang.js, angkanya ditumpuk di tengah. */
.lv-lencana { position: relative; width: 44px; height: 44px; flex: none; display: block; color: var(--lc-teks, #fff); text-align: center; line-height: 1; }
.lv-lencana svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; stroke: none; }
.lv-lencana small { position: absolute; left: 0; right: 0; top: 15%; font-size: 7.5px; font-weight: 700; letter-spacing: .12em; opacity: .8; }
.lv-lencana b { position: absolute; left: 0; right: 0; top: 28%; font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.lv-besar { width: 60px; height: 60px; }
.lv-besar small { font-size: 8.5px; }
.lv-besar b { font-size: 25px; }
.lc-kilau { transform-box: fill-box; transform-origin: center; animation: lc-kedip 3.4s ease-in-out infinite; }
@keyframes lc-kedip { 0%, 60%, 100% { opacity: .15; transform: scale(.5) rotate(0); } 75% { opacity: 1; transform: scale(1.15) rotate(45deg); } }
@media (prefers-reduced-motion: reduce) { .lc-kilau { animation: none; opacity: .9; } }
.lv-teks { display: grid; gap: 1px; min-width: 0; }
.lv-teks b { font-size: 15px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.lv-teks small { font-size: var(--fs-meta); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lv-bar { position: relative; grid-column: 1 / -1; height: 8px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.lv-bar-tebal { height: 12px; margin-top: var(--sp-3); }
.lv-isi { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--tier-a), var(--tier-b)); transition: width 700ms cubic-bezier(.3, .7, .3, 1); }
.lv-isi::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-120%); animation: lv-kilap 3.2s ease-in-out infinite; }
@keyframes lv-kilap { 55%, 100% { transform: translateX(120%); } }
.lv-mini.naik::before { content: ''; position: absolute; left: 50%; top: 50%; width: 340px; height: 340px; margin: -170px 0 0 -170px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tier-a) 55%, transparent) 0 30%, transparent 62%); opacity: 0; pointer-events: none; animation: lv-sinar 1.1s ease-out 1; }
.lv-mini.naik .lv-lencana { animation: lv-lencana .7s cubic-bezier(.3, 1.6, .4, 1) 1; }
@keyframes lv-sinar { 20% { opacity: .9; } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes lv-lencana { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* Lembar detail */
.lv-detail { --tier-a: #5b9bf0; --tier-b: #1e4fa8; padding: var(--sp-4); border-radius: var(--r-kartu); background: var(--soft); }
.lv-detail .meta { margin-top: var(--sp-2); }
.lv-kepala { display: flex; align-items: center; gap: var(--sp-3); }
.lv-kepala .lv-teks b { font-size: 18px; }
.lv-judul { margin: var(--sp-5) 0 var(--sp-2); }
.lv-bendera-daftar { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.lv-b { position: relative; display: grid; justify-items: center; gap: 2px; padding: var(--sp-2) 4px; border-radius: 14px; border: 1px solid var(--rule); background: var(--paper); font-size: 12px; font-weight: 600; color: var(--ink-3); opacity: .6; }
.lv-b svg { width: 34px; height: 28px; stroke: none; }
.lv-b.kini { opacity: 1; border-color: var(--merek); color: var(--ink); box-shadow: 0 0 0 3px var(--biru-l); }
.lv-b.lewat { opacity: 1; }
.lv-cek { position: absolute; top: 4px; right: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--mint-isi); color: #fff; display: grid; place-items: center; }
.lv-cek svg { width: 9px; height: 9px; stroke-width: 3.4; }
.lv-xp { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: grid; gap: 1px; }
.lv-xp li { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 8px 2px; border-bottom: 1px solid var(--rule); font-size: 14px; }
.lv-xp li:last-child { border-bottom: 0; }
.lv-xp b { color: var(--merek-teks); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lv-tangga { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: grid; gap: 4px; }
.lv-tangga li { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: var(--sp-2); padding: 7px 10px; border-radius: 12px; font-size: 14px; color: var(--ink-3); }
.lv-tangga li span { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lv-tangga li small { font-size: 12px; font-variant-numeric: tabular-nums; }
.lv-tangga li.lewat { color: var(--ink-2); }
.lv-tangga li.kini { background: var(--biru-l); color: var(--merek-teks); font-weight: 700; }

/* Layar perayaan: Level 10, ganti bendera, puncak */
.lv-perayaan { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; text-align: center; overflow: hidden; color: #fff; padding: calc(env(safe-area-inset-top) + 56px) var(--sp-6) calc(env(safe-area-inset-bottom) + var(--sp-6)); background: radial-gradient(circle at 50% 40%, var(--lv-l1) 0, var(--lv-l2) 100%); opacity: 0; transition: opacity 450ms; }
.lv-perayaan.buka { opacity: 1; }
.lv-perayaan.tutup { opacity: 0; transition-duration: 250ms; }
.lv-sinar { position: absolute; left: 50%; top: 40%; width: 1100px; height: 1100px; margin: -550px 0 0 -550px; background: repeating-conic-gradient(from 0deg, var(--lv-sinar) 0 7deg, transparent 7deg 18deg); -webkit-mask-image: radial-gradient(circle, #000 6%, transparent 58%); mask-image: radial-gradient(circle, #000 6%, transparent 58%); animation: lv-putar 26s linear infinite; pointer-events: none; }
@keyframes lv-putar { to { transform: rotate(360deg); } }
.lv-pil { position: relative; padding: 6px 16px; border-radius: 999px; background: linear-gradient(90deg, var(--tier-a), var(--tier-b)); color: #14233a; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; }
.lv-tengah { position: relative; align-self: center; display: grid; justify-items: center; gap: var(--sp-3); max-width: 340px; }
.lv-bendera { width: 150px; height: 150px; filter: drop-shadow(0 10px 24px color-mix(in srgb, var(--tier-a) 55%, transparent)); }
.lv-bendera svg { width: 100%; height: 100%; overflow: visible; stroke: none; }
.lv-tengah h2 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.lv-tengah h2 span { color: var(--tier-a); }
.lv-tengah p { font-size: 14px; line-height: 1.5; opacity: .82; }
.lv-lanjut { position: relative; width: 100%; max-width: 360px; min-height: 52px; border-radius: 16px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); color: #fff; font-size: 15.5px; font-weight: 600; }
.lv-perayaan.buka .lv-bendera { animation: lv-masuk .9s cubic-bezier(.3, 1.3, .4, 1) .15s both; }
.lv-perayaan.buka h2, .lv-perayaan.buka p { animation: muncul .7s ease-out .55s both; }
@keyframes lv-masuk { from { opacity: 0; transform: translateY(24px) scale(.7); } }
.lv-konfeti { position: absolute; top: -14px; width: 8px; height: 14px; border-radius: 2px; opacity: 0; animation: lv-jatuh 2.8s ease-in forwards; pointer-events: none; }
@keyframes lv-jatuh { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(105vh) rotate(560deg); } }
@media (prefers-reduced-motion: reduce) { .lv-isi, .lv-sinar { transition: none; animation: none; } .lv-isi::after { animation: none; } .lv-perayaan { transition: none; } }

/* --- Versi 0.5.0: habit berhitung (hitung.js) ---------------------------- */
.habit-kisi .hk { grid-column: 1 / -1; }
.baris-hitung { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.hk {
  --wl: var(--mint-l); --wf: color-mix(in srgb, var(--mint-isi) 40%, var(--mint-l)); --wi: var(--mint-t); --wt: var(--mint-isi); --wk: color-mix(in srgb, #fff 62%, transparent);
  --ombak: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M0 6C20 0 40 0 60 6S100 12 120 6V12H0Z'/%3E%3C/svg%3E");
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-3);
  min-height: 84px; padding: var(--sp-3) var(--sp-3); border-radius: var(--r-kartu); background: var(--wl); color: var(--wi);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wi) 10%, transparent);
}
.hk-peach { --wl: var(--peach-l); --wf: color-mix(in srgb, #f08c4a 42%, var(--peach-l)); --wi: var(--peach-t); --wt: #cf6420; }
.hk-biru { --wl: var(--biru-l); --wf: color-mix(in srgb, var(--merek) 32%, var(--biru-l)); --wi: var(--biru-t); --wt: var(--merek); }
:root[data-tema="gelap"] .hk, :root[data-theme="dark"] .hk { --wk: color-mix(in srgb, #fff 10%, transparent); --wf: color-mix(in srgb, var(--mint-isi) 34%, var(--mint-l)); }
:root[data-tema="gelap"] .hk-peach { --wf: color-mix(in srgb, #f08c4a 34%, var(--peach-l)); --wt: #e07a35; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) .hk { --wk: color-mix(in srgb, #fff 10%, transparent); --wf: color-mix(in srgb, var(--mint-isi) 34%, var(--mint-l)); }
  :root:not([data-tema="terang"]) .hk-peach { --wf: color-mix(in srgb, #f08c4a 34%, var(--peach-l)); --wt: #e07a35; }
  :root:not([data-tema="terang"]) .hk-biru { --wf: color-mix(in srgb, var(--merek) 40%, var(--biru-l)); }
}
.hk-air { position: absolute; inset: 0; z-index: -1; background: var(--wf); transform: translateY(calc((1 - var(--r, 0)) * (100% + 20px))); transition: transform 2s cubic-bezier(.22, .8, .24, 1); }
.hk.cepat .hk-air { transition-duration: .7s; }
.hk-air::before, .hk-air::after { content: ''; position: absolute; left: 0; top: -11px; width: calc(100% + 120px); height: 12px; background: var(--wf); -webkit-mask: var(--ombak) repeat-x 0 100% / 120px 12px; mask: var(--ombak) repeat-x 0 100% / 120px 12px; animation: hk-ombak 3.4s linear infinite; }
.hk-air::after { top: -16px; opacity: .45; animation-duration: 5.6s; animation-direction: reverse; }
@keyframes hk-ombak { to { transform: translateX(-120px); } }
.hk-ikon { width: 44px; height: 44px; border-radius: 14px; background: var(--wk); display: grid; place-items: center; transition: background .4s, color .4s; }
.hk-ikon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hk-cek { display: none; }
.hk.penuh .hk-ikon { background: var(--wt); color: #fff; animation: hk-kenyal .6s cubic-bezier(.3, 1.5, .4, 1); }
.hk.penuh .hk-ik { display: none; }
.hk.penuh .hk-cek { display: block; }
@keyframes hk-kenyal { 0% { transform: scale(.7); } 60% { transform: scale(1.14); } 100% { transform: none; } }
.hk-isi { min-width: 0; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.hk-angka { display: flex; align-items: baseline; gap: 3px; line-height: 1; }
.hk-angka b { display: inline-block; font-size: 34px; font-weight: 700; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.hk-angka b.naik { animation: hk-naik .55s cubic-bezier(.3, 1.5, .4, 1); }
@keyframes hk-naik { from { transform: translateY(45%) scale(.75); opacity: 0; } to { transform: none; opacity: 1; } }
.hk-angka i { font-style: normal; font-size: 13px; font-weight: 600; opacity: .55; }
/* Blok biasa (bukan flex): nama panjang memakai seluruh lebar, api streak ikut di ujung baris terakhir. */
.hk-nama { display: block; margin-top: 5px; font-size: 13px; font-weight: 500; line-height: 1.3; overflow-wrap: break-word; }
.hk-nama .api { display: inline-flex; vertical-align: middle; margin-left: 6px; }
.hk.penuh .hk-nama { font-weight: 700; }
.hk-tombol { display: flex; gap: 7px; }
.hk-tombol button { width: 40px; height: 40px; border-radius: 13px; background: var(--wk); color: inherit; font-size: 21px; font-weight: 700; display: grid; place-items: center; transition: transform .12s, opacity .2s; }
.hk-tombol .hk-tambah { background: var(--wt); color: #fff; }
.hk-tombol button:active { transform: scale(.9); }
.hk-tombol button:disabled { opacity: .4; }
.hk.penuh .hk-tombol .hk-tambah:disabled { opacity: 1; }
.hk-tombol svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hk-pop { position: absolute; right: 104px; top: calc(50% - 26px); font-size: 17px; font-weight: 800; color: var(--wt); opacity: 0; pointer-events: none; }
.hk-pop.jalan { animation: hk-pop 1s ease-out both; }
@keyframes hk-pop { 0% { opacity: 0; transform: translateY(14px) scale(.8); } 22% { opacity: 1; transform: scale(1.08); } 100% { opacity: 0; transform: translateY(-8px); } }
.hk-titik { position: absolute; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--wt); pointer-events: none; animation: hk-cerat .7s ease-out forwards; }
@keyframes hk-cerat { to { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } }
.hk.penuh::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .5) 50%, transparent 68%); transform: translateX(-110%); animation: hk-kilau 1.3s ease-out .7s 1 both; }
@keyframes hk-kilau { to { transform: translateX(110%); } }
@media (prefers-reduced-motion: reduce) { .hk-air, .hk-air::before, .hk-air::after, .hk.penuh::after { transition: none; animation: none; } }

/* --- Versi 0.5.0: angka flip untuk hitung mundur (flip.js) ---------------- */
.flip-kartu { display: grid; gap: var(--sp-3); }
.flip-kepala { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.flip-kepala b { font-size: 15px; font-weight: 600; }
.flip-kepala span { font-size: var(--fs-meta); color: var(--ink-3); white-space: nowrap; }
.flip-baris { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.flip { display: grid; gap: 4px; justify-items: center; }
.flip-k { position: relative; width: 100%; aspect-ratio: 1 / 1.05; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: linear-gradient(180deg, #5b9bf0 0 50%, #4a8ae0 50% 100%); color: #fff; font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; perspective: 300px; }
.flip-k::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: rgba(10, 30, 80, .35); }
.flip-k span { display: block; }
.flip-k span.balik { animation: flip-balik .45s cubic-bezier(.3, .7, .3, 1); }
@keyframes flip-balik { from { transform: rotateX(-90deg); opacity: 0; } to { transform: none; opacity: 1; } }
.flip small { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.flip-ket { font-size: var(--fs-meta); color: var(--ink-3); }
.flip-hari { display: flex; align-items: center; gap: var(--sp-2); font-size: 22px; font-weight: 700; }
.flip-hari svg { width: 24px; height: 24px; }
.flip-kartu.emas .flip-k { background: linear-gradient(180deg, #f6d97a 0 50%, #e9c25a 50% 100%); color: #3a2a00; }
.flip-kartu.emas .flip-k::after { background: rgba(80, 50, 0, .3); }
.flip-kartu.emas .flip-hari { color: var(--kuning-t); }
.flip-semua { margin-top: var(--sp-1); text-align: center; }
@media (prefers-reduced-motion: reduce) { .flip-k span.balik { animation: none; } }
/* --- Versi 0.6.0: Pendakian hitung mundur (daki.js) ----------------------- */
:root { --gunung-1: #cfe0f7; --gunung-2: #a9c6ee; --emas: #e9b93c; }
:root[data-tema="gelap"] { --gunung-1: #1f2f4a; --gunung-2: #27406a; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="terang"]) { --gunung-1: #1f2f4a; --gunung-2: #27406a; } }
.daki-kartu { position: relative; display: grid; gap: var(--sp-3); overflow: hidden; }
.daki-adegan { position: relative; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, #dcebfc, #f4f8fe); }
:root[data-tema="gelap"] .daki-adegan { background: linear-gradient(180deg, #1b2f52, #172742); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="terang"]) .daki-adegan { background: linear-gradient(180deg, #1b2f52, #172742); } }
.daki-adegan svg { display: block; width: 100%; height: auto; stroke: none; }
.daki-sinar { position: absolute; left: 82%; top: 20%; width: 420px; height: 420px; margin: -210px 0 0 -210px; background: repeating-conic-gradient(from 0deg, rgba(255, 214, 120, .5) 0 7deg, transparent 7deg 18deg); -webkit-mask-image: radial-gradient(circle, #000 4%, transparent 58%); mask-image: radial-gradient(circle, #000 4%, transparent 58%); opacity: 0; transition: opacity .8s; animation: lv-putar 30s linear infinite; pointer-events: none; }
.daki-kartu.puncak .daki-sinar { opacity: .85; }
.daki-gambar { animation: daki-jejak 1.6s cubic-bezier(.3, .7, .3, 1) both; }
@keyframes daki-jejak { from { stroke-dasharray: 0 var(--L); } }
.daki-penanda { animation: daki-muncul .6s ease-out 1.3s both; }
@keyframes daki-muncul { from { opacity: 0; } }
.daki-tahap { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.daki-tahap b { font-size: 14.5px; }
.daki-tahap span { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.daki-bar { height: 8px; border-radius: 999px; background: var(--soft); overflow: hidden; }
.daki-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #5b9bf0, #2563c9); }
.daki-kartu.puncak .daki-bar i { background: linear-gradient(90deg, #f4cf6a, #d99a17); }
.daki-langkah { display: flex; gap: 6px; }
.daki-langkah i { flex: 1; height: 6px; border-radius: 3px; background: var(--soft); transition: background .4s; }
.daki-langkah i.on { background: var(--merek); }
.daki-langkah i.emas { background: var(--emas); }
.daki-pesan { font-size: var(--fs-meta); color: var(--ink-2); }
.daki-kartu.puncak .daki-pesan { color: var(--kuning-t); font-weight: 600; }
.daki-kartu .flip-k { font-size: 22px; aspect-ratio: 1 / .82; }
.daki-kartu.dekat .flip-k { background: linear-gradient(180deg, #f6d97a 0 50%, #e9c25a 50% 100%); color: #3a2a00; }
.daki-kartu.dekat .flip-k::after { background: rgba(80, 50, 0, .3); }
@media (prefers-reduced-motion: reduce) { .daki-sinar, .daki-gambar, .daki-penanda { animation: none; } }

/* --- Versi 0.6.0: Untaian habit (untaian.js) ------------------------------ */
.ut-petunjuk { font-size: 12px; }
.ut-geser { display: flex; gap: var(--sp-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ut-geser::-webkit-scrollbar { display: none; }
.ut-slide { flex: 0 0 100%; scroll-snap-align: center; min-width: 0; }
.ut-kepala { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.ut-kepala b { display: block; font-size: 15px; font-weight: 600; }
.ut-angka { text-align: right; }
.ut-angka strong { display: block; font-size: 32px; font-weight: 700; line-height: 1; color: var(--mint-t); font-variant-numeric: tabular-nums; }
.ut-angka small { font-size: 12px; color: var(--ink-3); }
.ut-svg { display: block; width: 100%; height: auto; margin-top: var(--sp-2); stroke: none; overflow: visible; }
.ut-tali { fill: none; stroke: var(--ink-4); stroke-width: 1.4; }
.ut-jangkar { fill: var(--rule-kuat); }
.pj { transform-box: fill-box; transform-origin: 50% 0; }
.pj-c0 { fill: #2f9e6f; } .pj-c1 { fill: #3fbf8a; } .pj-c2 { fill: #6ed3a8; } .pj-c3 { fill: #2563c9; } .pj-c4 { fill: #5b9bf0; }
.pj-b { fill: none; stroke: var(--ink-4); stroke-width: 1; stroke-dasharray: 2 2; opacity: .7; }
.pj-m { fill: var(--soft); stroke: var(--rule-kuat); stroke-width: 1; }
.pj-n { fill: none; stroke: var(--mint-isi); stroke-width: 1.2; stroke-dasharray: 2 2; }
.pj-ayun { animation: pj-ayun 1.6s cubic-bezier(.3, .6, .3, 1); }
@keyframes pj-ayun { 0% { transform: translateY(-18px) rotate(0); opacity: 0; } 25% { transform: rotate(14deg); opacity: 1; } 45% { transform: rotate(-9deg); } 65% { transform: rotate(5deg); } 82% { transform: rotate(-2deg); } 100% { transform: rotate(0); } }
.ut-pesan { margin-top: var(--sp-2); font-size: var(--fs-meta); color: var(--ink-2); min-height: 40px; }
.ut-rekor { display: flex; justify-content: space-between; margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px dashed var(--rule-kuat); font-size: 12.5px; color: var(--ink-3); }
.ut-rekor b { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .pj-ayun { animation: none; } }
/* --- Versi 0.7.0: ikon duotone, api streak, lencana (lambang.js) ------------ */
.ikon-bulat, .menu-ikon { position: relative; overflow: hidden; }
.ikon-bulat { border-radius: 34%; }
.ikon-bulat svg, .menu-ikon svg { position: relative; z-index: 1; }
.ikon-bulat::before, .menu-ikon::before { content: ''; position: absolute; inset: 0; background: linear-gradient(155deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 62%); pointer-events: none; }
:root[data-tema="gelap"] .ikon-bulat::before, :root[data-tema="gelap"] .menu-ikon::before { background: linear-gradient(155deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 62%); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="terang"]) .ikon-bulat::before, :root:not([data-tema="terang"]) .menu-ikon::before { background: linear-gradient(155deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 62%); } }
.ikon-bulat svg [fill-opacity], .menu-ikon svg [fill-opacity] { fill-opacity: .24; }
.nav-btn[aria-current="page"] svg [fill-opacity], .side-btn[aria-current="page"] svg [fill-opacity] { fill-opacity: .3; }

.api { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 700; color: var(--peach-t); font-variant-numeric: tabular-nums; line-height: 1; }
.api-svg { width: 21px; height: 23px; overflow: visible; stroke: none; }
.api-sedang .api-svg { width: 23px; height: 25px; }
.api-besar .api-svg { width: 26px; height: 28px; filter: drop-shadow(0 0 3px rgba(255, 140, 40, .6)); }
.api-percik .api-svg { width: 29px; height: 31px; filter: drop-shadow(0 0 4px rgba(255, 120, 30, .7)); }
.api-biru { color: var(--biru-t); }
.api-biru .api-svg { width: 29px; height: 31px; filter: drop-shadow(0 0 4px rgba(70, 160, 255, .75)); }
.api-badan { transform-box: fill-box; transform-origin: 50% 100%; animation: api-goyang 1.9s ease-in-out infinite; }
.api-inti { transform-box: fill-box; transform-origin: 50% 100%; animation: api-inti 1.3s ease-in-out infinite; }
@keyframes api-goyang { 0%, 100% { transform: scale(1, 1) skewX(0); } 30% { transform: scale(1.04, .96) skewX(-2.5deg); } 62% { transform: scale(.97, 1.05) skewX(2.5deg); } }
@keyframes api-inti { 0%, 100% { transform: scale(1); } 50% { transform: scale(.88, 1.08); } }
.api-percik-x { fill: #ffe08a; }
/* 0.13.22: dibatasi ke circle. Class wrapper streak 14–29 hari juga "api-percik", jadi dulu seluruh api ikut pudar dan berkedip. */
circle.api-percik { fill: #ffd76a; opacity: 0; animation: api-loncat 2.2s ease-out infinite; }
.api-biru circle.api-percik { fill: #c8f0ff; }
circle.api-percik.p2 { animation-delay: .7s; }
circle.api-percik.p3 { animation-delay: 1.4s; }
@keyframes api-loncat { 0% { opacity: 0; transform: translateY(3px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { .api-badan, .api-inti, circle.api-percik { animation: none; } circle.api-percik { opacity: .8; } }
.lv-b .lv-lencana { width: 38px; height: 38px; }
.lv-b .lv-lencana small, .lv-b .lv-lencana b { display: none; }
.ut-angka { display: flex; align-items: center; gap: 6px; text-align: right; }
.ut-api { display: grid; place-items: center; }
.ut-api .api-svg { width: 30px; height: 32px; }
.ut-num { display: block; }
/* --- Versi 0.8.0: kalender penuh (bulan.js) -------------------------------- */
.hari-kal { background: none; border: 0; cursor: pointer; color: inherit; font: inherit; }
.hari-kal:active { transform: scale(.94); }
.kp-kepala { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.kp-judul { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.kp-ini { text-align: center; margin: var(--sp-2) 0 0; }
.kp-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px 2px; margin-top: var(--sp-3); }
.kp-huruf { text-align: center; font-size: 11px; font-weight: 600; color: var(--ink-3); padding-bottom: 4px; }
.kp-hari { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; min-height: 52px; padding: 6px 0 4px; border-radius: 12px; background: none; border: 0; color: var(--ink); font: inherit; }
.kp-hari b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kp-hari.lampau b { color: var(--ink-2); font-weight: 500; }
.kp-hari:active { background: var(--soft); }
.kp-hari.ini { background: var(--biru-l); }
.kp-hari.ini b { color: var(--merek-teks); font-weight: 700; }
.kd-baris { display: flex; gap: 3px; min-height: 7px; }
.kd { display: inline-block; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; box-sizing: border-box; }
.kd.penuh { background: currentColor; }
.kd-biru { color: var(--merek); } .kd-mint { color: var(--mint-isi); } .kd-lilac { color: #8b6fd6; } .kd-kuning { color: #e0a520; }
.kp-legenda { gap: var(--sp-1) var(--sp-3); font-size: 12px; }
.kp-bantu { text-align: center; margin: var(--sp-2) var(--sp-3) 0; }
.kh-ringkas { font-size: var(--fs-meta); color: var(--ink-2); margin-bottom: var(--sp-2); }
.kh-bagian { margin-top: var(--sp-4); }
.kh-bagian .label { margin-bottom: var(--sp-2); }
.kh-daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.kh-baris { display: flex; align-items: center; gap: var(--sp-3); padding: 8px 2px; border-bottom: 1px solid var(--rule); font-size: 14.5px; }
.kh-baris:last-child { border-bottom: 0; }
.kh-tanda { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--rule-kuat); color: #fff; }
.kh-baris.ya .kh-tanda { background: var(--mint-isi); border-color: var(--mint-isi); }
.kh-tanda svg { width: 14px; height: 14px; stroke-width: 3; }
.kh-tanda.kuning, .kh-tanda.lilac { border: 0; width: 26px; height: 26px; }
.kh-tanda.kuning { background: var(--kuning-l); color: var(--kuning-t); }
.kh-tanda.lilac { background: var(--lilac-l); color: var(--lilac-t); }
.kh-tanda.kuning svg, .kh-tanda.lilac svg { width: 15px; height: 15px; stroke-width: 2; }
.kh-baris.ya .kh-tanda.lilac { background: var(--lilac-l); border: 0; }
.kh-jurnal { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.kh-mood { font-size: 18px; }
/* --- Versi 0.8.0: pasir waktu (daki.js) ------------------------------------- */
.daki-mode { margin: 0; gap: var(--sp-2); }
.daki-mode .chip { min-height: 34px; padding: 0 var(--sp-3); font-size: 13px; }
.pasir-adegan { cursor: pointer; }
.pasir-adegan svg { height: 220px; }
.ps-putar { transform-box: view-box; transform-origin: 150px 90px; }
.ps-putar.balik { animation: ps-balik 1s cubic-bezier(.6, .05, .25, 1); }
@keyframes ps-balik { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.ps-alir { animation: ps-alir .5s linear infinite; }
@keyframes ps-alir { 0%, 100% { opacity: .95; } 50% { opacity: .55; } }
.ps-butir { fill: #f0c24a; opacity: 0; animation: ps-jatuh .9s ease-in infinite; }
.ps-butir.b2 { animation-delay: .3s; } .ps-butir.b3 { animation-delay: .6s; }
@keyframes ps-jatuh { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(1.5px, 42px); } }
.ps-atas { transform-box: fill-box; }
.pasir-adegan.jalan .ps-atas { animation: ps-turun 6s ease-in-out infinite alternate; }
@keyframes ps-turun { to { transform: translateY(1.2px); } }
.pasir-adegan.baru .ps-bawah { animation: ps-tumpuk 1.6s cubic-bezier(.3, .7, .3, 1) both; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes ps-tumpuk { from { transform: scaleY(.2); } }
.pasir-adegan.selesai .daki-sinar { opacity: .85; }
@media (prefers-reduced-motion: reduce) { .ps-alir, .ps-butir, .pasir-adegan .ps-atas, .pasir-adegan .ps-bawah, .ps-putar.balik { animation: none; } .ps-butir { opacity: .8; } }
/* --- Versi 0.8.0: peta Nusantara dan bukit bulan yang hidup ------------------- */
.pg-daun { transform-box: fill-box; transform-origin: 50% 100%; animation: pg-goyang-daun 3.4s ease-in-out infinite; }
@keyframes pg-goyang-daun { 50% { transform: rotate(4deg); } }
.pg-o { animation: pg-hanyut 5s ease-in-out infinite alternate; }
@keyframes pg-hanyut { from { transform: translateX(-3px); opacity: .35; } to { transform: translateX(4px); opacity: .95; } }
.pg-awan ellipse, .bb-awan ellipse { fill: #fff; opacity: .6; }
.pg-awan { animation: pg-lewat 70s linear infinite; }
.pg-awan.a2 { animation-duration: 95s; animation-delay: -45s; }
@keyframes pg-lewat { from { transform: translateX(-100px); } to { transform: translateX(400px); } }
.pg-kilau, .bb-bintang circle { fill: #fff; animation: pg-kedip 3.2s ease-in-out infinite; }
.pg-kilau.k2, .bb-bintang circle:nth-child(2n) { animation-delay: -1s; } .pg-kilau.k3, .bb-bintang circle:nth-child(3n) { animation-delay: -2s; } .pg-kilau.k4 { animation-delay: -.5s; }
@keyframes pg-kedip { 0%, 100% { opacity: .1; } 50% { opacity: .95; } }
.pg-camar, .bb-camar { fill: none; stroke: #1B2A41; stroke-opacity: .5; stroke-width: 1; stroke-linecap: round; animation: pg-terbang 30s linear infinite; }
.pg-camar.c2, .bb-camar.c2 { animation-duration: 38s; animation-delay: -16s; }
@keyframes pg-terbang { 0% { transform: translate(-20px, 60px); } 50% { transform: translate(170px, 42px); } 100% { transform: translate(360px, 64px); } }
.pg-camar.c2 { --dy: 1; }
.pg-denyut { fill: none; stroke: #2563c9; stroke-width: 1.4; transform-box: fill-box; transform-origin: center; animation: pg-denyut 2.2s ease-out infinite; }
@keyframes pg-denyut { 0% { opacity: .85; transform: scale(1); } 100% { opacity: 0; transform: scale(2.3); } }
.pg-busa { fill: #fff; opacity: 0; animation: pg-busa 1.8s ease-out infinite; }
.pg-busa.b2 { animation-delay: .6s; }
@keyframes pg-busa { 0% { opacity: .85; transform: translateX(3px) scaleX(.6); } 100% { opacity: 0; transform: translateX(-8px) scaleX(1.5); } }
.pg-apung { transform-box: fill-box; transform-origin: 50% 100%; animation: pg-apung 3.2s ease-in-out infinite; }
@keyframes pg-apung { 0%, 100% { transform: translateY(0) rotate(-1.4deg); } 50% { transform: translateY(-1.3px) rotate(1.4deg); } }

.bb-bulan, .bb-bintang { display: none; }
.bb-mentari { animation: bb-hangat 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.bb-sinar { fill: #ffd9a8; opacity: .3; animation: bb-sinar 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes bb-hangat { 50% { transform: scale(1.06); } }
@keyframes bb-sinar { 50% { transform: scale(1.25); opacity: .12; } }
.bb-awan { animation: pg-lewat 80s linear infinite; }
.bb-awan.a2 { animation-duration: 110s; animation-delay: -50s; }
.bb-camar { stroke: var(--ink-3); }
.bb-bendera path { transform-box: fill-box; transform-origin: left center; animation: bb-kibar 3.2s ease-in-out infinite; }
.bb-bendera:nth-of-type(3n) path { animation-delay: -1.1s; } .bb-bendera:nth-of-type(3n+1) path { animation-delay: -2.1s; }
@keyframes bb-kibar { 50% { transform: skewY(7deg) scaleX(.93); } }
.bb-kini { transform-box: fill-box; transform-origin: center; animation: bb-denyut 1.9s ease-out infinite; }
@keyframes bb-denyut { 0% { transform: scale(.8); opacity: 1; } 100% { transform: scale(2.1); opacity: 0; } }
.bukit[data-w="sore"] .bb-mentari { fill: #ff9d6b; } .bukit[data-w="sore"] .bb-sinar { fill: #ff9d6b; }
.bukit[data-w="malam"] .bb-mentari, .bukit[data-w="malam"] .bb-sinar, .bukit[data-w="malam"] .bb-camar { display: none; }
.bukit[data-w="malam"] .bb-bulan, .bukit[data-w="malam"] .bb-bintang { display: inline; }
.bukit[data-w="malam"] .bb-awan ellipse { opacity: .12; }
.bukit[data-w="malam"] .bukit-judul b { color: #f2f6ff; } .bukit[data-w="malam"] .bukit-judul span { color: #b9c6e6; }
@media (prefers-reduced-motion: reduce) { .pg-o, .pg-awan, .pg-kilau, .pg-camar, .pg-denyut, .pg-busa, .pg-apung, .bb-mentari, .bb-sinar, .bb-awan, .bb-camar, .bb-bendera path, .bb-kini, .bb-bintang circle { animation: none; } .pg-kilau, .bb-bintang circle { opacity: .7; } .pg-denyut, .pg-busa { opacity: 0; } }
/* --- Versi 0.8.0: tur praktek ------------------------------------------------- */
.tk.tembus { pointer-events: none; }
.tk.tembus .tk-kartu { pointer-events: auto; }
.tk-sorot.bebas { box-shadow: none; outline: 0; }
.tk-hitung { flex: 1; font-size: var(--fs-meta); font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tk-bar { height: 4px; border-radius: 2px; background: var(--soft); overflow: hidden; margin-bottom: var(--sp-3); }
.tk-bar i { display: block; height: 100%; border-radius: 2px; background: var(--merek); transition: width 380ms cubic-bezier(.2, .8, .3, 1); }
.tk-ok { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-bottom: 4px; border-radius: 50%; background: var(--mint-isi); color: #fff; font-size: 15px; font-weight: 700; }
/* Saat lembar (Tambah, Hari) terbuka, kartu tur mengecil supaya tidak menutupi lembarnya. */
.tk-kartu.ringkas .tk-isi, .tk-kartu.ringkas .tk-bar { display: none; }
.tk-kartu.ringkas .tk-ok { display: none; }
.tk-kartu.ringkas .tk-bawah { margin-top: var(--sp-2); }
.tk-kartu.ringkas .tk-bawah .tbl { min-height: 40px; }
.tk-kartu.sukses { animation: tk-sukses .45s cubic-bezier(.3, 1.4, .4, 1); }
@keyframes tk-sukses { from { transform: scale(.97); } }
@media (prefers-reduced-motion: reduce) { /* Saat lembar (Tambah, Hari) terbuka, kartu tur mengecil supaya tidak menutupi lembarnya. */
.tk-kartu.ringkas .tk-isi, .tk-kartu.ringkas .tk-bar { display: none; }
.tk-kartu.ringkas .tk-ok { display: none; }
.tk-kartu.ringkas .tk-bawah { margin-top: var(--sp-2); }
.tk-kartu.ringkas .tk-bawah .tbl { min-height: 40px; }
.tk-kartu.sukses { animation: none; } .tk-bar i { transition: none; } }
/* Bukit 0.8.1: lukisan fal per jam (desain/bukit/ronde-1), sama di semua tema seperti cover.
   Bukit, jalur, tenda, dan pendaki digambar di atasnya; teks diberi halo supaya terbaca di segala latar. */
.bukit { background: #cfe3f5 center bottom / cover no-repeat; }
.bukit[data-w="pagi"] { background-image: url("../img/bukit-pagi.webp"); }
.bukit[data-w="siang"] { background-image: url("../img/bukit-siang.webp"); }
.bukit[data-w="sore"] { background-image: url("../img/bukit-sore.webp"); }
.bukit[data-w="malam"] { background-image: url("../img/bukit-malam.webp"); background-color: #152643; }
.bukit:not([data-w="malam"]) .bukit-judul b { color: #1B2A41; }
.bukit:not([data-w="malam"]) .bukit-judul span { color: #4a5670; }
.bukit .bb-jalur { stroke: #fff; }
.bukit .bb-titik { fill: #fff; }
.bukit .bb-jalur, .bukit .bb-titik { filter: drop-shadow(0 1px 1px rgba(10, 50, 40, .35)); }
.bb-pos text { paint-order: stroke; stroke: rgba(255, 255, 255, .9); stroke-width: 3px; stroke-linejoin: round; fill: #5a6478; }
.bb-pos.kena text { fill: #8a3a12; }
.bukit[data-w="malam"] .bb-pos text { stroke: rgba(8, 18, 38, .8); fill: #d3def5; }
.bukit[data-w="malam"] .bb-pos.kena text { fill: #ffc9a3; }
.bb-benda { fill: #fff; stroke: var(--peach-t); stroke-width: 1.5; stroke-linejoin: round; }
.bb-pintu { fill: var(--peach-t); opacity: .35; }
.bb-salju { fill: #fff; stroke: none; }
.bb-pos.kena .bb-benda { fill: var(--peach-t); }
.bb-pos.kena .bb-pintu { fill: #fff; opacity: .55; }
.bb-pos.kena .bb-salju { fill: #fff; }
.bb-kunang { display: none; }
.bukit[data-w="malam"] .bb-kunang { display: inline; }
.bb-kunang circle { fill: #ffe98a; animation: bb-kunang 4.5s ease-in-out infinite; }
.bb-kunang circle:nth-child(2n) { animation-delay: -1.5s; animation-duration: 5.5s; } .bb-kunang circle:nth-child(3n) { animation-delay: -3s; }
@keyframes bb-kunang { 0%, 100% { opacity: .1; transform: translate(0, 0); } 50% { opacity: 1; transform: translate(4px, -5px); } }
@media (prefers-reduced-motion: reduce) { .bb-kunang circle { animation: none; } .bb-kunang circle { opacity: .7; } }/* Tur 0.8.4: peragaan "ubah / geser" di dalam kartu kalau tidak ada baris sungguhan untuk ditunjuk. */
.tk-contoh { position: relative; pointer-events: none; margin: 2px 0 var(--sp-3); padding: 10px; border-radius: 14px; background: var(--soft); }
.tkc-baris { position: relative; overflow: hidden; border-radius: 10px; background: var(--merek); }
.tkc-besok { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #fff; font-size: var(--fs-meta); font-weight: 700; }
.tkc-isi { position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; background: var(--paper); font-weight: 600; animation: tkc-geser 6s ease-in-out infinite; }
.tkc-cek { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ink-3); flex: none; }
.tkc-jari { position: absolute; left: 60%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: color-mix(in srgb, var(--merek) 35%, transparent); box-shadow: 0 0 0 2px var(--merek); animation: tkc-jari 6s ease-in-out infinite; }
.tkc-menu { position: absolute; right: 18px; top: 50%; margin-top: -17px; z-index: 1; display: flex; gap: 2px; padding: 4px; border-radius: 12px; background: var(--paper); box-shadow: 0 8px 24px rgba(20, 40, 80, .18); font-size: var(--fs-meta); font-weight: 600; opacity: 0; transform: scale(.9); transform-origin: top right; animation: tkc-menu 6s ease-in-out infinite; }
.tkc-menu span { padding: 6px 10px; border-radius: 8px; }
.tkc-menu .tkc-hapus { color: #c2410c; }
/* 0-40%: geser ke kiri lalu kembali; 50-90%: tekan lama, menu muncul. */
@keyframes tkc-geser { 0%, 8% { transform: none; } 20%, 30% { transform: translateX(-74px); } 40%, 100% { transform: none; } }
@keyframes tkc-jari { 0%, 6% { opacity: 0; transform: none; } 9% { opacity: 1; transform: none; } 20%, 30% { opacity: 1; transform: translateX(-74px); } 36%, 46% { opacity: 0; transform: none; } 50% { opacity: 1; transform: scale(1); } 62% { opacity: 1; transform: scale(1.35); } 70%, 100% { opacity: 0; transform: scale(1.35); } }
@keyframes tkc-menu { 0%, 62% { opacity: 0; transform: scale(.9); } 68%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.9); } }
@media (prefers-reduced-motion: reduce) { .tkc-isi, .tkc-jari, .tkc-menu { animation: none; } .tkc-menu { opacity: 1; transform: none; } .tkc-jari { opacity: 0; } }

/* ==========================================================================
   app-coba (29 Sep 2026): Hari Ini lebih lega. Identitas tetap (sampul, level,
   api, ikon), yang dikurangi hanya kerumunan kotak.
   ========================================================================== */
:root { --emas: #e9a515; --emas-tua: #b87a00; --emas-l: #fff4d6; --emas-t: #7a4f00; --emas-garis: #f3d27a; }
:root[data-tema="gelap"] { --emas: #f0b93a; --emas-tua: #c98f12; --emas-l: #2e2610; --emas-t: #f0cf6a; --emas-garis: #6b5316; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="terang"]) { --emas: #f0b93a; --emas-tua: #c98f12; --emas-l: #2e2610; --emas-t: #f0cf6a; --emas-garis: #6b5316; } }

/* Misi: jalur emas di bawah strip level (bahasa game, bukan daftar centang). */
.misi-jalur { margin-top: var(--sp-3); border-radius: 16px; background: var(--emas-l); border: 1.5px solid var(--emas-garis); overflow: hidden; }
.mj-baris { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 12px; text-align: left; color: var(--emas-t); }
.mj-pita { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 7px; border-radius: 6px 12px 12px 6px; background: var(--emas); color: #3a2600; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; }
.mj-pita svg { width: 12px; height: 12px; fill: currentColor; stroke: none; }
.mj-teks { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mj-pips { display: flex; gap: 3px; }
.mj-pips i { width: 7px; height: 7px; border-radius: 50%; background: var(--emas-garis); }
.mj-pips i.ok { background: var(--emas); }
.mj-koin { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 800; }
.koin-svg { width: 16px; height: 16px; stroke: none; }
.mj-panah { flex: none; font-weight: 700; transition: transform var(--durasi); }
.misi-jalur[data-buka="1"] .mj-panah { transform: rotate(90deg); }
.misi-jalur.siap .mj-pita { animation: mj-loncat 1.6s ease-in-out infinite; }
@keyframes mj-loncat { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-3px); } }
.mj-isi { padding: 2px 12px 10px; }
.mj-jalur { width: 100%; height: 64px; display: block; stroke: none; }
.mj-rute { fill: none; stroke: var(--emas-garis); stroke-width: 3; stroke-dasharray: 2 6; stroke-linecap: round; }
.mj-node { fill: var(--paper); stroke: var(--emas-garis); stroke-width: 2.5; }
.mj-node.ok { fill: var(--emas); stroke: var(--emas); }
.mj-node.kini { stroke: var(--emas); stroke-width: 3; }
.mj-denyut { fill: none; stroke: var(--emas); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: mj-denyut 1.6s ease-out infinite; }
@keyframes mj-denyut { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
.mj-jalur text { font: 700 10px var(--font); fill: var(--emas-t); stroke: none; }
.mj-cek { fill: none; stroke: #3a2600; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mj-langkah { display: flex; align-items: center; gap: 10px; background: var(--paper); border-radius: 12px; padding: 10px 12px; }
.mj-langkah small { display: block; font-size: 10.5px; color: var(--emas-t); font-weight: 700; letter-spacing: .04em; }
.mj-langkah b { display: block; font-size: 14px; }
.tbl-emas { flex: none; border-radius: var(--r-pil); background: var(--emas); color: #3a2600; font-weight: 700; padding: 8px 16px; min-height: 38px; box-shadow: 0 3px 0 var(--emas-tua); }
.tbl-emas:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--emas-tua); }

/* Pita minggu tanpa kotak; hari ini cukup lingkaran. */
.pita-minggu { margin-top: var(--sp-3); }
.pita-hari, .pita-hari.nanti { background: none; border-color: transparent; padding: 4px 0; }
.pita-hari.ini { background: none; border-color: transparent; box-shadow: none; color: var(--ink); }
.pita-hari.ini small { color: var(--merek-teks); }
.pita-hari.ini b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--merek); color: var(--di-merek); }
.pita-hari.ini .pita-titik { background: var(--merek); }

/* Satu permukaan untuk 3 hal, Habit, Jadwal. */
.permukaan { margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-4) var(--sp-3); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-kartu); box-shadow: var(--bayang-kartu); }
.hari-ini-kisi.permukaan { display: block; }
.bagian-hari { padding-top: var(--sp-3); }
.bagian-hari + .bagian-hari { margin-top: var(--sp-2); border-top: 1px solid var(--rule); }
.bagian-hari.kartu-berat { background: none; }
.bagian-kepala { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: 2px; }
.angka-abu { font-size: 12px; font-weight: 600; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.bagian-hari.utama .bulat:not(.bulat-isi) { border-color: var(--biru-300); }
/* Pil "Fokus" jadi ikon jam kecil. */
.tbl-fokus { width: 36px; min-height: 36px; padding: 0; justify-content: center; background: none; color: var(--ink-3); border-radius: 50%; }
.tbl-fokus svg { width: 19px; height: 19px; }
.tbl-fokus:hover { background: var(--lilac-l); color: var(--lilac-t); }
/* Habit: daftar satu kolom (nama tidak terpotong), warna mint saat beres tetap. */
.permukaan .habit-kisi { grid-template-columns: 1fr; gap: 0; }
.permukaan .habit-petak { border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; min-height: 48px; padding: 6px 0; gap: var(--sp-3); background: none; }
.permukaan .habit-petak:last-child { border-bottom: 0; }
.permukaan .habit-petak[aria-pressed="true"] { background: none; }
.permukaan .habit-kisi .hk { margin: var(--sp-2) 0; }

/* Kolom tulis menggantikan tombol +. Isi diberi ruang supaya tidak tertutup. */
.isi { padding-bottom: calc(176px + env(safe-area-inset-bottom)); }
.nav-bawah { grid-template-columns: repeat(4, 1fr); }
.tulis-bar {
  position: fixed; z-index: 11; left: var(--sp-3); right: var(--sp-3); max-width: 560px; margin: 0 auto;
  bottom: calc(var(--sp-3) + 72px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: var(--sp-2); height: 50px; padding: 0 6px 0 18px;
  border-radius: var(--r-pil); background: var(--paper); border: 1px solid var(--rule-kuat); box-shadow: var(--bayang-angkat);
  color: var(--ink-3); font-size: 15px; text-align: left;
}
.tulis-bar span { flex: 1; }
.tulis-bar b { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--merek); color: var(--di-merek); }
.tulis-bar b svg { width: 20px; height: 20px; stroke-width: 2.4; }
@media (min-width: 900px) { .tulis-bar { display: none; } .isi { padding-bottom: var(--sp-8); } }
@media (prefers-reduced-motion: reduce) { .misi-jalur.siap .mj-pita, .mj-denyut { animation: none; } }
/* ==========================================================================
   app-coba tahap 2: Rencana jadi agenda (kalender kecil + agenda per tanggal).
   ========================================================================== */
.rencana-agenda .kepala { margin-bottom: var(--sp-2); }
.rk-kolom { display: flex; flex-direction: column; gap: var(--sp-4); }
.rk-kiri { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }

/* Kalender kecil: seminggu di HP, bisa dibuka sebulan. */
.rk-kal { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-kartu); box-shadow: var(--bayang-kartu); padding: var(--sp-3) var(--sp-3) var(--sp-1); }
.rk-kal-kepala { display: flex; align-items: center; gap: 2px; padding-left: var(--sp-1); }
.rk-bulan { flex: 1; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.rk-kini { font-size: var(--fs-meta); margin-right: var(--sp-1); }
.rk-kal .tbl-ikon { width: 36px; height: 36px; min-height: 36px; }
.rk-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; margin-top: var(--sp-2); }
.rk-hari { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 48px; padding: 4px 0; border-radius: 12px; color: var(--ink); }
.rk-hari b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rk-hari.lampau b { color: var(--ink-3); font-weight: 500; }
.rk-hari.luar { opacity: .45; }
.rk-hari.ini b { color: var(--merek-teks); box-shadow: inset 0 0 0 1.5px var(--merek); }
.rk-hari.pilih b { background: var(--merek); color: var(--di-merek); box-shadow: none; }
.rk-hari:hover b { background: var(--soft); }
.rk-hari.pilih:hover b { background: var(--merek); }
.rk-buka { display: flex; align-items: center; gap: 6px; margin: 2px auto 0; min-height: 36px; padding: 0 var(--sp-3); font-size: 12.5px; font-weight: 600; color: var(--merek-teks); }

/* Kotak Masuk ringkas: satu baris per catatan, dua ikon. */
.rk-masuk { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-kartu); padding: var(--sp-3) var(--sp-4) var(--sp-2); }
.rk-masuk .baris { position: relative; border-bottom: 1px solid var(--rule); }
.rk-masuk .baris:last-child { border-bottom: 0; }
.rk-masuk .baris-tombol { min-height: 48px; padding: 4px 0; }
.rk-masuk .baris-teks { font-weight: 500; }
.geser[data-geser="masuk"]::before { content: 'Hapus'; color: var(--pink-t); }
.rk-pilah { display: flex; gap: 4px; flex: none; }
.rk-ikon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--biru-l); color: var(--biru-t); }
.rk-ikon.lilac { background: var(--lilac-l); color: var(--lilac-t); }
.rk-ikon svg { width: 19px; height: 19px; }
.rk-ikon:active { transform: scale(.94); }
.rk-petunjuk { font-size: 12px; color: var(--ink-4); margin-top: var(--sp-1); }
.rk-lega { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-kartu); background: var(--mint-l); color: var(--mint-t); font-size: 13.5px; font-weight: 500; }
.rk-lega svg { width: 20px; height: 20px; flex: none; }
.rk-lewat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-kartu); background: var(--kuning-l); color: var(--kuning-t); }
.rk-lewat > b { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.rk-lewat svg { width: 16px; height: 16px; }
.rk-lewat .tbl-teks { color: var(--ink); font-size: 14px; text-align: left; min-height: 32px; }

/* Agenda: tanggal di kiri, kegiatan di kanan. */
.rk-agenda { min-width: 0; }
.rk-agenda > .bagian-kepala { margin-bottom: var(--sp-1); }
.rk-salin { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-meta); }
.rk-salin svg { width: 15px; height: 15px; }
.ag-hari { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--sp-2); border-bottom: 1px solid var(--rule); }
.ag-tgl { display: flex; flex-direction: column; align-items: flex-start; padding: 10px 0 8px; text-align: left; color: var(--ink-3); border-radius: 8px; }
.ag-tgl small { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.ag-tgl b { font-size: 20px; font-weight: 700; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.ag-tgl em { font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--merek-teks); }
.ag-hari.lampau .ag-tgl b { color: var(--ink-3); }
.ag-hari.ini .ag-tgl b { color: var(--merek-teks); }
.ag-tgl:hover b { text-decoration: underline; text-underline-offset: 3px; }
.ag-isi { display: flex; flex-direction: column; padding: 6px 0; min-width: 0; }
.ag-baris { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 2px 0; text-align: left; color: var(--ink); }
.ag-jam { flex: none; width: 40px; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ag-jam svg { width: 15px; height: 15px; vertical-align: -3px; }
.ag-bilah { flex: none; align-self: stretch; width: 3.5px; margin: 5px 0; border-radius: 3px; background: var(--merek); }
.ag-rutin .ag-bilah { background: var(--mint-isi); }
.ag-tenggat .ag-bilah, .ag-tenggat .ag-jam { background: none; color: #d0960f; }
.ag-tenggat .ag-bilah { background: #e0a520; }
.ag-hitung .ag-bilah { background: var(--peach-t); }
.ag-hitung .ag-jam { color: var(--peach-t); }
.ag-teks { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.35; }
.ag-teks small { margin-left: 6px; font-size: 11.5px; color: var(--ink-3); }
.ag-baris.beres .ag-teks { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-4); }
.ag-ok { flex: none; color: var(--mint-isi); }
.ag-ok svg { width: 16px; height: 16px; stroke-width: 3; }
.ag-lapang { min-height: 38px; display: flex; align-items: center; font-size: 13px; color: var(--ink-4); }
.ag-pisah { padding: var(--sp-3) 0 var(--sp-1); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--rule); }
.rk-hm .flip-semua { margin-top: var(--sp-2); }

/* ==========================================================================
   app-coba tahap 3: laptop tiga zona (sidebar · isi · zona kanan).
   ========================================================================== */
.zona-kanan { display: none; }
@media (min-width: 900px) {
  .isi:has(.rencana-agenda) { max-width: 1120px; }
  .rk-kolom { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
  .rk-kiri { position: sticky; top: var(--sp-6); }
  .rk-agenda { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-kartu); padding: var(--sp-3) var(--sp-5, 20px) var(--sp-3); }
  .rk-agenda .ag-hari:last-of-type { border-bottom: 0; }
  .ag-hari { grid-template-columns: 64px minmax(0, 1fr); }
}
@media (min-width: 1200px) {
  .isi:has(.hari-zona) { max-width: 1160px; }
  .hari-zona { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-6); align-items: start; }
  .zona-utama { min-width: 0; }
  .zona-kanan { display: flex; flex-direction: column; gap: var(--sp-4); }
}
.zk-kartu { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-kartu); padding: var(--sp-3) var(--sp-4); }
.zk-kartu > .label { margin-bottom: var(--sp-2); }
.zk-kosong { margin-bottom: var(--sp-2); }
.zk-agenda .ag-hari { grid-template-columns: 40px minmax(0, 1fr); }
.zk-agenda .ag-hari:last-child { border-bottom: 0; }
.zk-agenda .ag-tgl b { font-size: 17px; }
.zk-agenda .ag-jam { width: 34px; font-size: 11.5px; }
.zk-agenda .ag-teks { font-size: 13.5px; }
.zk-agenda .ag-baris, .zk-agenda .ag-lapang { min-height: 32px; }

/* Jam demi jam */
.jj { position: relative; margin: 6px 0 4px 40px; border-left: 1px solid var(--rule); }
.jj-jam { position: absolute; left: -40px; width: 34px; transform: translateY(-50%); font-size: 11px; color: var(--ink-4); text-align: right; font-variant-numeric: tabular-nums; }
.jj-jam::after { content: ''; position: absolute; left: 40px; top: 50%; width: 220px; border-top: 1px dashed var(--rule); }
.jj-sholat { position: absolute; left: 0; right: 0; border-top: 1px solid color-mix(in srgb, var(--mint-isi) 45%, transparent); }
.jj-sholat b { position: absolute; right: 0; top: -8px; font-size: 9.5px; font-weight: 600; font-style: normal; color: var(--mint-t); background: var(--paper); padding: 0 3px; }
.jj-blok { position: absolute; left: 6px; right: 2px; z-index: 1; display: flex; align-items: baseline; gap: 6px; overflow: hidden; padding: 3px 8px; border-radius: 8px; text-align: left;
  background: var(--biru-l); color: var(--biru-t); border-left: 3px solid var(--merek); }
.jj-blok b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.jj-blok small { font-size: 11px; opacity: .8; flex: none; }
.jj-rutin { background: var(--mint-l); color: var(--mint-t); border-left-color: var(--mint-isi); }
.jj-blok.beres { opacity: .55; }
.jj-blok.beres b { text-decoration: line-through; }
.jj-blok.lajur-0 { right: calc(50% + 2px); }
.jj-blok.lajur-1 { left: calc(50% + 2px); }
.jj-kini { position: absolute; left: -4px; right: 0; z-index: 2; border-top: 2px solid #e5484d; }
.jj-kini::before { content: ''; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: #e5484d; }
/* HP: agenda langsung sesudah Kotak Masuk; hitung mundur turun ke bawah. Laptop: kolom kiri utuh. */
.rk-kiri { display: contents; }
.rk-kal { order: 0; } .rk-masuk, .rk-lega { order: 1; } .rk-lewat { order: 2; } .rk-agenda { order: 3; } .rk-hm { order: 4; }
@media (min-width: 900px) { .rk-kiri { display: flex; } }
.ag-ringkas .ag-teks { font-size: 13px; color: var(--ink-3); }
.ag-ringkas .ag-jam { color: var(--mint-t); }
/* ==========================================================================
   0.9.3: Fokus mudah ditemukan. Tombol bulat di tengah navbar (bukan tab,
   sejak 0.9.6 langsung membuka layar Fokus), di sidebar, dan di kartu Layar Nusantara.
   ========================================================================== */
.nav-bawah { grid-template-columns: repeat(5, 1fr); }
.nav-fokus { color: var(--lilac-t); font-weight: 600; }
.nav-fokus-bulat { display: grid; place-items: center; width: 44px; height: 44px; margin-top: -18px; border-radius: 50%;
  background: var(--lilac-t); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--lilac-t) 40%, transparent), 0 0 0 4px var(--kanvas); }
.nav-fokus-bulat svg { width: 24px; height: 24px; stroke-width: 2.2; }
.nav-fokus:active .nav-fokus-bulat { transform: scale(.94); }
.side-fokus { color: var(--lilac-t); }
.peta-mulai { margin-top: var(--sp-3); }

/* ==========================================================================
   app-coba: Misi Harian (baris emas yang sama dengan Misi Pertama) dan
   sampul Hari Ini yang terbuka lewat level.
   ========================================================================== */
.mh-isi { display: flex; flex-direction: column; gap: 6px; padding-top: 0; }
.mh-kartu { display: flex; align-items: center; gap: 10px; background: var(--paper); border-radius: 12px; padding: 9px 10px; }
.mh-ikon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--emas-l); color: var(--emas-t); }
.mh-ikon svg { width: 19px; height: 19px; }
.mh-kartu.beres .mh-ikon { background: var(--emas); color: #3a2600; }
.mh-kartu.beres .mh-ikon svg { stroke-width: 3; }
.mh-teks { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mh-teks b { font-size: 13.5px; line-height: 1.3; }
.mh-teks > small { font-size: 11.5px; color: var(--emas-t); font-weight: 600; margin-top: 2px; }
.mh-kartu.beres .mh-teks b { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-4); }
.mh-prog { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.mh-bar { flex: 1; height: 5px; border-radius: 9px; background: var(--emas-l); overflow: hidden; }
.mh-bar i { display: block; height: 100%; border-radius: 9px; background: var(--emas); transition: width .4s; }
.mh-prog small { min-width: 44px; text-align: right; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mh-xp { flex: none; font-size: 11.5px; font-weight: 800; color: var(--emas-t); }
.mh-aksi { flex: none; min-height: 32px; padding: 0 12px; border-radius: var(--r-pil); border: 1.5px solid var(--emas-garis); color: var(--emas-t); font-size: 12.5px; font-weight: 700; background: var(--paper); }
.mh-peti { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1.5px dashed var(--emas-garis); color: var(--emas-t); font-size: 12.5px; }
.mh-peti.siap { border-style: solid; background: var(--paper); }
.mh-peti svg { flex: none; width: 34px; height: 26px; }
.mh-peti .mh-teks { font-weight: 600; }
.mh-peti .mh-teks small { font-weight: 500; color: var(--ink-3); }
.mh-peti .tbl-emas[disabled] { opacity: .45; box-shadow: none; }
.mh-catatan { font-size: 11px; color: var(--emas-t); opacity: .8; text-align: center; }
.misi-harian.tuntas { opacity: .85; }
.misi-harian.tuntas .mj-pita { background: var(--emas-garis); }

/* Suasana yang gambarnya belum ada: versi siang diwarnai. */
.sapa-tint-pagi .sapa-zum img { filter: saturate(.9) sepia(.18) hue-rotate(-8deg) brightness(1.02); }
.sapa-tint-sore .sapa-zum img { filter: sepia(.45) saturate(1.3) hue-rotate(-18deg) brightness(.92); }
.sapa-tint-malam .sapa-zum img { filter: brightness(.38) saturate(.8) hue-rotate(20deg); }

/* Pemilih sampul di lembar level */
.sp-kisi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.sp-kartu { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 6px 8px; border-radius: 14px; border: 1.5px solid var(--rule); text-align: left; color: var(--ink); background: var(--paper); }
.sp-kartu.aktif { border-color: var(--merek); box-shadow: 0 0 0 2px color-mix(in srgb, var(--merek) 25%, transparent); }
.sp-gambar { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; margin-bottom: 4px;
  background: linear-gradient(160deg, #cfe3f7, #9cc3e6); }
.sp-gambar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-sawah { background: linear-gradient(170deg, #cfe8f6 0 45%, #9fd08a 45% 60%, #6fb45a 60% 75%, #4a9a47 75%); }
.sp-kawah { background: linear-gradient(170deg, #d6e4f4 0 40%, #8aa3c0 40% 62%, #5fb7b0 62% 78%, #466a5e 78%); }
.sp-rajaampat { background: linear-gradient(175deg, #c9ecf6 0 48%, #4cc3c9 48% 70%, #2a9a8e 70%); }
.sp-kartu b { font-size: 13px; line-height: 1.25; padding: 0 2px; }
.sp-kartu small { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ink-3); padding: 0 2px; }
.sp-kartu small svg { width: 13px; height: 13px; }
.sp-kartu.aktif small { color: var(--merek-teks); font-weight: 600; }
.sp-kartu.kunci .sp-gambar { filter: grayscale(.85) blur(1.5px); opacity: .55; }
.sp-kartu[aria-disabled="true"] { cursor: default; }
.sp-kartu:not([aria-disabled]):hover { border-color: var(--merek); }
/* Sampul bertancap (Pantai, Sawah): gambar 16:9 disusun seperti object-fit cover yang rata bawah,
   supaya titik tancap bendera (persen gambar) tetap di tanah yang sama di HP maupun laptop. */
.sapa-zum:has(.sapa-kanvas) { container-type: size; }
.sapa-kanvas { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: max(100cqw, 177.78cqh); aspect-ratio: 16 / 9; }
.sapa-kanvas img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
/* Bendera diperkecil sesuai jaraknya di gambar, dengan gundukan kecil dan bayangan jatuh di kaki tiang. */
.sapa-bendera.tertancap { z-index: 1; transform: scale(var(--sk, 1)); transform-origin: 16px 59px; }
.sapa-bendera.tertancap::before { content: ''; position: absolute; left: -1px; top: 54px; width: 34px; height: 10px; border-radius: 50%; background: var(--gundukan); box-shadow: 0 2px 0 rgba(0, 0, 0, .08); z-index: -1; }
.sapa-bendera.tertancap::after { content: ''; position: absolute; left: 18px; top: 57px; width: 46px; height: 6px; border-radius: 50%; background: rgba(30, 40, 20, .22); filter: blur(2px); transform: skewX(-40deg); z-index: -2; }
/* ==========================================================================
   0.9.6: Fokus ala game. Panggung memenuhi layar (peta Layar Nusantara dengan
   kamera yang mengikuti perahu, atau tiang bendera di bukit depan pemandangan
   jam ini). Kontrol mengapung di atas, waktu dan tombol di panel bawah.
   ========================================================================== */
.fokus.fokus-game { padding: 0; align-items: stretch; overflow: hidden; background: var(--fg-dasar, #58d0e6); }
.fg-panggung { position: relative; flex: 1; min-height: 0; overflow: hidden; display: block; max-width: none; }
.fg-panggung .pg { position: absolute; inset: 0; display: block; }
.pg-peta.pg-penuh { width: 100%; height: 100%; max-height: none; overflow: hidden; }
.pg-penuh .pg-pulau text { font-size: var(--pg-fs, 6px); stroke-width: calc(var(--pg-fs, 6px) * .3); }
.pg-penuh .pg-pulau:not(.sudah):not(.tuju) text { fill: #3d5570; }
.pg-langit { position: absolute; inset: 0; background: center bottom / cover no-repeat; animation: fg-melayang 40s ease-in-out infinite alternate; }
@keyframes fg-melayang { to { transform: scale(1.06) translateY(-1%); } }
.pg-bukit { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 24%; }
.pg-besar .pg-tiang { position: absolute; left: 50%; bottom: 14%; height: 78%; max-height: none; width: auto; transform: translateX(-50%); }
.pg-w-malam .pg-tiang rect[x="109.5"], .pg-w-malam .pg-tiang line { fill: #c3cde0; stroke: #c3cde0; }

.fg-atas { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: calc(env(safe-area-inset-top) + 12px) 16px 0; pointer-events: none; }
.fg-atas > * { pointer-events: auto; }
.fg-bulat, .fg-mode { background: rgb(255 255 255 / .88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 4px 14px rgb(10 30 60 / .16); }
.fg-bulat { width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; color: #1B2A41; }
.fg-bulat svg { width: 22px; height: 22px; }
.fg-spasi { width: 44px; flex: none; }
.fg-mode { display: flex; gap: 2px; padding: 4px; border-radius: 999px; min-width: 0; }
.fg-mode button { border: 0; background: none; border-radius: 999px; padding: 8px 14px; min-height: 36px; font: inherit; font-size: 13px; font-weight: 600; color: #44516a; white-space: nowrap; }
.fg-mode button[aria-checked="true"] { background: #1e4fa8; color: #fff; box-shadow: 0 2px 8px rgb(30 79 168 / .35); }

.fg-panel { position: relative; z-index: 2; margin-top: -22px; border-radius: 24px 24px 0 0; background: var(--paper); box-shadow: 0 -8px 28px rgb(10 30 60 / .16);
  padding: 18px 16px calc(env(safe-area-inset-bottom) + 16px); }
.fg-isi { width: 100%; max-width: 480px; margin: 0 auto; display: grid; gap: 12px; }
.fg-waktu { display: grid; justify-items: center; text-align: center; }
.fg-waktu b { font-size: 52px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; line-height: 1; }
.fg-waktu small { font-size: var(--fs-meta); color: var(--ink-3); margin-top: 2px; }
.fg-tengah { display: grid; gap: 8px; }
.fg-tugas { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.fg-tugas small { flex: none; font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
.fg-tugas b { font-size: 15px; font-weight: 600; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-tugas select { min-width: 0; max-width: 64%; min-height: 40px; padding: 6px 30px 6px 12px; border: 1px solid var(--rule); border-radius: 12px; font: inherit; font-size: 15px; font-weight: 600;
  color: var(--ink); background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23889' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") right 10px center no-repeat;
  -webkit-appearance: none; appearance: none; text-overflow: ellipsis; }
.fg-panel .pg-koleksi { padding: 8px 12px; border-radius: 14px; background: var(--soft, var(--kanvas)); border: 0; }
.fg-panel .fokus-pola { margin-bottom: 10px; }
.fg-panel .fokus-bawah { max-width: none; }
.fg-panel .fokus-bawah .tbl { min-height: 52px; }

/* Laptop: panel jadi satu baris HUD, panggung makin lebar. */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .fg-atas { padding: 20px 24px 0; }
  .fg-mode button { font-size: 14px; padding: 9px 18px; }
  .fg-panel { padding: 16px 24px calc(env(safe-area-inset-bottom) + 18px); }
  .fg-isi { max-width: 1120px; grid-template-columns: auto minmax(0, 1fr) minmax(300px, 380px); align-items: center; gap: 28px; }
  .fg-waktu { justify-items: start; text-align: left; }
  .fg-waktu b { font-size: 60px; }
  .fg-tugas { justify-content: flex-start; }
  .fg-panel .fokus-pola { justify-content: flex-start; margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { .pg-langit { animation: none; } }.fg-menit { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 12px; }
.fg-menit label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-3); }
.fg-menit input { width: 76px; min-height: 44px; padding: 6px 8px; border: 1.5px solid var(--rule); border-radius: 12px; background: var(--paper); color: var(--ink);
  font: inherit; font-size: 20px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.fg-menit input::-webkit-outer-spin-button, .fg-menit input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fg-menit input:focus { outline: none; border-color: #1e4fa8; box-shadow: 0 0 0 3px rgb(30 79 168 / .15); }
.fg-cepat { display: flex; gap: 6px; }
.fg-cepat button { min-width: 44px; min-height: 40px; padding: 0 10px; border-radius: 999px; border: 1.5px solid var(--rule); background: var(--paper); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; }
.fg-cepat button[aria-pressed="true"] { background: #1e4fa8; border-color: #1e4fa8; color: #fff; }
@media (min-width: 900px) and (min-aspect-ratio: 5/4) { .fg-menit { justify-content: flex-start; margin-bottom: 8px; } }.fg-jam { font-size: 13px; font-weight: 600; color: var(--ink-2, var(--ink-3)); }
.fg-jam:empty { display: none; }

/* ==========================================================================
   0.13.18: Buka hari dan Tutup hari ala Levelmu. Kartu hero bergradasi dengan sinar berputar, lambang melayang
   (matahari pagi / bulan malam), pita tanggal, judul besar, angka ringkas, dan kartu tujuan bergaris putus-putus.
   Warna hero tetap (pagi hangat, malam ungu tua), jadi sama di tema terang dan gelap.
   ========================================================================== */
.sheet-ritual .sheet-badan { gap: 14px; }
.sheet-ritual .sheet-badan > * { flex: none; } /* 0.13.37: jangan menyusut di HP pendek (kartu tujuan terpotong); badan yang menggulir */
.rt-buka { background: linear-gradient(180deg, color-mix(in srgb, #ffd9b0 45%, var(--paper)) 0, var(--paper) 340px); }
.rt-tutup { background: linear-gradient(180deg, color-mix(in srgb, #6b63c9 22%, var(--paper)) 0, var(--paper) 340px); }
.rt-hero { position: relative; overflow: hidden; display: grid; justify-items: center; text-align: center; gap: 8px; padding: 22px 16px 16px; border-radius: 22px; color: #fff; --lv-sinar: rgba(255, 255, 255, .18);
  background: radial-gradient(circle at 50% 22%, #ffe08a 0, #ffab6e 36%, #ea7c8e 70%, #9a7ad6 100%); box-shadow: 0 12px 30px color-mix(in srgb, #ea7c8e 30%, transparent); }
.rt-tutup .rt-hero { background: radial-gradient(circle at 50% 18%, #6f74dd 0, #42459f 42%, #241f5e 100%); box-shadow: 0 12px 30px color-mix(in srgb, #2b2770 40%, transparent); --lv-sinar: rgba(255, 255, 255, .08); }
.rt-hero .lv-sinar { top: 58px; width: 700px; height: 700px; margin: -350px 0 0 -350px; }
.rt-hero > :not(.lv-sinar):not(.rt-bintang) { position: relative; }
.rt-lambang { width: 76px; height: 76px; display: grid; place-items: center; animation: lvg-melayang 3.4s ease-in-out infinite; }
.rt-lambang i { display: block; width: 62px; height: 62px; border-radius: 50%; }
.rt-matahari i { background: radial-gradient(circle at 38% 35%, #fffbd6 0, #ffe066 45%, #ffb02e 100%); box-shadow: 0 0 0 8px rgb(255 240 170 / .35), 0 0 34px 10px rgb(255 214 100 / .75); }
.rt-bulan i { background: radial-gradient(circle at 40% 38%, #fffdf3 0, #f1ecff 55%, #cfc6f5 100%); box-shadow: inset -14px -6px 0 0 rgb(80 74 170 / .28), 0 0 30px 8px rgb(214 206 255 / .45); }
.rt-pita { padding: 4px 12px; border-radius: 999px; background: rgb(255 255 255 / .22); border: 1px solid rgb(255 255 255 / .35); font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.rt-nama { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; text-shadow: 0 2px 10px rgb(0 0 0 / .18); }
.rt-kutip { max-width: 30ch; font-size: 14px; font-style: italic; line-height: 1.45; opacity: .92; }
.rt-angka { display: flex; justify-content: center; gap: 8px; width: 100%; }
.rt-angka span { flex: 1; max-width: 120px; display: grid; gap: 1px; padding: 8px 6px; border-radius: 14px; background: rgb(0 0 0 / .16); font-size: 11.5px; font-weight: 600; opacity: .95; }
.rt-angka b { font-size: 22px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rt-tujuan { width: 100%; max-width: 420px; display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-top: 4px; border-radius: 16px; text-align: left;
  background: var(--paper); color: var(--ink); border: 1.5px dashed #e0a02a; }
.rt-tujuan-ikon .koin-svg { width: 36px; height: 36px; }
.rt-tujuan-teks { display: grid; gap: 1px; min-width: 0; }
.rt-tujuan-teks small { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #c47e08; }
.rt-tujuan-teks b { font-size: 15px; }
.rt-tujuan-teks em { font-style: normal; font-size: 12.5px; color: var(--ink-3); }
.rt-judul { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.rt-judul small { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.rt-daftar { list-style: none; margin: 0; padding: 4px 14px; border-radius: 16px; background: var(--paper); border: 1px solid var(--rule); }
.rt-daftar li { display: flex; align-items: center; gap: 12px; min-height: 46px; }
.rt-daftar li + li { border-top: 1px solid var(--rule); }
.rt-jam { flex: none; min-width: 48px; padding: 3px 8px; border-radius: 999px; background: var(--biru-l); color: var(--biru-t); font-size: 12px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.rt-jam.kosong { background: none; }
.rt-nomor-kosong { visibility: hidden; }
.rt-catatan { font-size: 13px; color: var(--ink-3); }
.rt-tengah { text-align: center; }
.rt-titik { display: flex; justify-content: center; gap: 6px; margin-top: 2px; }
.rt-titik i { width: 18px; height: 5px; border-radius: 3px; background: rgb(255 255 255 / .3); }
.rt-titik i.aktif { background: #fff; }
.rt-bintang { position: absolute; inset: 0; pointer-events: none; }
.rt-bintang i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 1px rgb(255 255 255 / .8); animation: rt-kelip 2.6s ease-in-out infinite; }
.rt-bintang i:nth-child(1) { left: 12%; top: 16%; } .rt-bintang i:nth-child(2) { left: 84%; top: 12%; animation-delay: .6s; }
.rt-bintang i:nth-child(3) { left: 22%; top: 46%; animation-delay: 1.2s; } .rt-bintang i:nth-child(4) { left: 76%; top: 40%; animation-delay: 1.8s; }
.rt-bintang i:nth-child(5) { left: 92%; top: 62%; animation-delay: .9s; }
@keyframes rt-kelip { 50% { opacity: .25; transform: scale(.6); } }
.rt-langkah { display: grid; gap: 12px; }
@media (prefers-reduced-motion: reduce) { .rt-lambang, .rt-bintang i { animation: none; } }

/* ==========================================================================
   0.9.6: Layar Levelmu ala game. Satu tampilan gelap (tidak ikut tema terang)
   seperti layar perayaan level: hero bersinar, jalur level bergeser dengan
   hadiah sampul, koleksi bergembok, piala bendera, daftar misi XP.
   ========================================================================== */
.sheet.lvg { max-height: 94dvh; }
.lvg .sheet-gagang { background: rgb(255 255 255 / .25); }
.lvg .sheet-tutup { color: var(--lvg-teks); }
.lvg .sheet-judul { color: var(--lvg-teks); letter-spacing: .02em; }
.lvg .sheet-badan { gap: 14px; padding-bottom: 28px; }
.lvg .sheet-badan > * { flex: none; }

.lvg-hero { position: relative; overflow: hidden; display: grid; justify-items: center; text-align: center; gap: 6px; padding: 22px 16px 16px; border-radius: 22px;
  background: radial-gradient(circle at 50% 30%, var(--lv-l1) 0, var(--lv-l2) 100%); border: 1px solid var(--lvg-garis); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08); }
.lvg-hero .lv-sinar { top: 62px; width: 700px; height: 700px; margin: -350px 0 0 -350px; }
.lvg-lencana { position: relative; animation: lvg-melayang 3.4s ease-in-out infinite; }
.lvg-lencana .lv-besar { width: 92px; height: 92px; filter: drop-shadow(0 10px 22px color-mix(in srgb, var(--tier-a) 60%, transparent)); }
.lvg-lencana .lv-besar small { font-size: 12px; }
.lvg-lencana .lv-besar b { font-size: 40px; }
@keyframes lvg-melayang { 50% { transform: translateY(-5px); } }
.lvg-pita { position: relative; margin-top: 4px; padding: 4px 12px; border-radius: 999px; background: linear-gradient(90deg, var(--tier-a), var(--tier-b)); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.lvg-nama { position: relative; font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: #fff; text-wrap: balance; }
.lvg-bar { position: relative; width: 100%; max-width: 420px; height: 26px; margin-top: 6px; border-radius: 999px; background: rgb(0 0 0 / .35); box-shadow: inset 0 2px 4px rgb(0 0 0 / .35), 0 0 0 2px rgb(255 255 255 / .12); overflow: hidden; }
.lvg-bar .lv-isi { box-shadow: 0 0 14px color-mix(in srgb, var(--tier-a) 70%, transparent); }
.lvg-bar span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / .5); font-variant-numeric: tabular-nums; }
.lvg-menuju { position: relative; font-size: 13.5px; color: var(--lvg-redup); }
.lvg-menuju b { color: #fff; }
.lvg-hadiah { position: relative; width: 100%; max-width: 420px; margin-top: 8px; display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 16px; text-align: left;
  background: rgb(0 0 0 / .28); border: 1px dashed color-mix(in srgb, var(--lvg-emas) 55%, transparent); }
.lvg-hadiah-gambar { position: relative; flex: none; width: 84px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; }
.lvg-hadiah-gambar img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.6) brightness(.7); }
.lvg-hadiah-gambar i, .lvg-hadiah-kecil i, .sp-gembok { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.lvg-hadiah-gambar i svg { width: 20px; height: 20px; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .6)); }
.lvg-hadiah-teks { display: grid; gap: 1px; min-width: 0; }
.lvg-hadiah-teks small { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lvg-emas); }
.lvg-hadiah-teks b { font-size: 14.5px; color: #fff; }
.lvg-hadiah-teks em { font-style: normal; font-size: 12.5px; color: var(--lvg-redup); }

.lvg-judul { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.lvg-judul small { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--lvg-redup); }

.lvg-jalur-wadah { overflow-x: auto; margin: 0 -16px; padding: 4px 16px 10px; scrollbar-width: none; scroll-behavior: smooth; }
.lvg-jalur-wadah::-webkit-scrollbar { display: none; }
.lvg-jalur { position: relative; list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; width: max-content; }
.lvg-jalur::before { content: ''; position: absolute; left: 44px; right: 44px; top: 76px; border-top: 3px dashed rgb(255 255 255 / .18); }
.lvg-titik { position: relative; width: 88px; display: grid; justify-items: center; align-content: start; gap: 3px; text-align: center; }
.lvg-titik.turun { padding-top: 18px; }
.lvg-hadiah-kecil, .lvg-hadiah-kosong { position: relative; width: 44px; height: 30px; border-radius: 8px; overflow: hidden; }
.lvg-hadiah-kecil { border: 2px solid var(--lvg-emas); box-shadow: 0 0 10px color-mix(in srgb, var(--lvg-emas) 45%, transparent); }
.lvg-hadiah-kecil img { width: 100%; height: 100%; object-fit: cover; }
.lvg-hadiah-kecil:not(.buka) img { filter: grayscale(.7) brightness(.55); }
.lvg-hadiah-kecil i svg { width: 14px; height: 14px; }
.lvg-bulat { position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: #1c2754; color: var(--lvg-redup); border: 2px solid rgb(255 255 255 / .16); }
.lvg-bulat svg { width: 20px; height: 20px; stroke-width: 3; }
.lvg-titik.lewat .lvg-bulat { background: linear-gradient(135deg, var(--tier-a), var(--tier-b)); color: #fff; border-color: rgb(255 255 255 / .5); }
.lvg-titik.kini .lvg-bulat { width: 54px; height: 54px; margin: -4px 0; font-size: 20px; background: #fff; color: var(--tier-b); border: 3px solid var(--lvg-emas);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--lvg-emas) 25%, transparent), 0 0 24px color-mix(in srgb, var(--lvg-emas) 60%, transparent); animation: lvg-denyut 1.8s ease-in-out infinite; }
@keyframes lvg-denyut { 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--lvg-emas) 12%, transparent), 0 0 30px color-mix(in srgb, var(--lvg-emas) 70%, transparent); } }
.lvg-kamu { position: absolute; top: 78px; left: 50%; transform: translateX(-50%); z-index: 2; padding: 1px 6px; border-radius: 6px; background: var(--lvg-emas); color: #3a2a00; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; }
.lvg-titik.turun .lvg-kamu { top: 96px; }
.lvg-titik.kini > b { margin-top: 10px; }
.lvg-titik > b { font-size: 12px; line-height: 1.2; color: var(--lvg-teks); }
.lvg-titik > small { font-size: 11px; color: var(--lvg-redup); font-variant-numeric: tabular-nums; }
.lvg-titik:not(.lewat):not(.kini) > b { color: var(--lvg-redup); }

.lvg .sp-kartu { position: relative; background: var(--lvg-kartu); border-color: var(--lvg-garis); color: var(--lvg-teks); }
.lvg .sp-kartu small { color: var(--lvg-redup); }
.lvg .sp-kartu.aktif { border-color: var(--lvg-emas); box-shadow: 0 0 0 2px color-mix(in srgb, var(--lvg-emas) 30%, transparent), 0 0 18px color-mix(in srgb, var(--lvg-emas) 25%, transparent); }
.lvg .sp-kartu.aktif small { color: var(--lvg-emas); }
.lvg .sp-kartu:not([aria-disabled]):hover { border-color: #fff; }
.lvg .sp-kartu:not(.kunci):not(.aktif) small { color: #9fe3b8; font-weight: 600; }
.lvg .sp-kartu.kunci .sp-gambar { filter: none; opacity: 1; }
.lvg .sp-kartu.kunci .sp-gambar img { filter: grayscale(.8) brightness(.45) blur(1px); }
.sp-gembok svg { width: 28px; height: 28px; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .6)); }
.sp-pita { display: none; }
.lvg .sp-pita { display: block; position: absolute; top: 6px; left: 6px; padding: 2px 7px; border-radius: 6px; font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; background: var(--lvg-emas); color: #3a2a00; }
.lvg .sp-kartu:not(.kunci) .sp-pita { background: rgb(0 0 0 / .45); color: #fff; }

.lvg-piala-daftar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lvg-piala { display: grid; justify-items: center; gap: 3px; padding: 12px 4px 10px; border-radius: 16px; background: var(--lvg-kartu); border: 1px solid var(--lvg-garis); text-align: center; }
.lvg-piala-lencana { width: 46px; height: 46px; }
.lvg-piala-lencana small { display: none; }
.lvg-piala-lencana b { top: 22%; font-size: 20px; }
.lvg-piala > b { font-size: 13px; }
.lvg-piala > small { display: flex; align-items: center; gap: 3px; font-size: 11px; color: var(--lvg-redup); }
.lvg-piala > small svg { width: 11px; height: 11px; }
/* 0.13.25: bendera terkunci menulis kapan terbuka ("Sesudah Lv 10 Biru") dan sisa XP di baris kedua. */
.lvg-piala > small { flex-wrap: wrap; justify-content: center; line-height: 1.3; }
.lvg-piala > small.lvg-piala-xp { font-size: 10.5px; opacity: .8; }
.lvg-piala.kini { border-color: var(--lvg-emas); background: rgb(244 207 106 / .1); }
.lvg-piala.kini > small { color: var(--lvg-emas); font-weight: 700; }
.lvg-piala.kunci .lvg-piala-lencana { filter: grayscale(1) brightness(.6); opacity: .6; }
/* 0.13.25: Empat Bendera memakai gambar bendera, bukan lencana kosong. Terkunci: warnanya samar, bukan abu pekat. */
.bendera-tingkat { display: block; width: 50px; height: 50px; }
.bendera-tingkat svg { width: 100%; height: 100%; overflow: visible; }
.lvg-piala.kunci .bendera-tingkat { filter: none; opacity: .75; }
.lvg-piala.kini .bt-kain { transform-origin: 18px 19px; animation: kibar 3.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .lvg-piala.kini .bt-kain { animation: none; } }

.lvg-misi { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lvg-misi li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--lvg-kartu); border: 1px solid var(--lvg-garis); font-size: 14px; }
.lvg-misi b { flex: none; padding: 3px 9px; border-radius: 999px; background: rgb(244 207 106 / .16); color: var(--lvg-emas); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.lvg-catatan { font-size: 12.5px; color: var(--lvg-redup); line-height: 1.5; }
@media (min-width: 900px) { .sheet.lvg { width: 620px; max-height: 90dvh; } .lvg .sp-kisi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .lvg-lencana, .lvg-titik.kini .lvg-bulat { animation: none; } }
/* ==========================================================================
   0.9.6: Palet Senja Hangat (dipilih dari artifak "Warna Levelmu", opsi D).
   Jingga ke ungu seperti sampul sore. Dipakai di layar Levelmu dan kartu Misi;
   desainnya tetap, hanya warna. Koin hadiah tetap emas.
   ========================================================================== */
:root { --senja-a: #ffb88a; --senja-b: #8a6fd8; --senja-l: #fff1e8; --senja-l2: #f3ebfb; --senja-garis: #f1cdb5; --senja-t: #7a3d1c; --senja-oranye: #ef8a4c; --senja-oranye-tua: #c9632b; --senja-ungu-tua: #5d45b0;
  --lvg-bg: #fdf7f3; --lvg-atas: #fde8dc; --lvg-kartu: #ffffff; --lvg-garis: #f1e2d8; --lvg-teks: #2a1e2e; --lvg-redup: #86707a; --lvg-emas: #d98a0b; --lvg-emas-l: #fff0cf; --lvg-node: #f5ebe4; --lvg-kunci: grayscale(.8) brightness(.85); }
:root[data-tema="gelap"] { --senja-l: #2c1f22; --senja-l2: #231e33; --senja-garis: #5a3a33; --senja-t: #f7c3a0;
  --lvg-bg: #1d1720; --lvg-atas: #3a2428; --lvg-kartu: #2a2130; --lvg-garis: #3d3140; --lvg-teks: #f5ecef; --lvg-redup: #b9a6b0; --lvg-emas: #f0b93a; --lvg-emas-l: #3a2c12; --lvg-node: #33283a; --lvg-kunci: grayscale(.8) brightness(.55); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="terang"]) { --senja-l: #2c1f22; --senja-l2: #231e33; --senja-garis: #5a3a33; --senja-t: #f7c3a0;
  --lvg-bg: #1d1720; --lvg-atas: #3a2428; --lvg-kartu: #2a2130; --lvg-garis: #3d3140; --lvg-teks: #f5ecef; --lvg-redup: #b9a6b0; --lvg-emas: #f0b93a; --lvg-emas-l: #3a2c12; --lvg-node: #33283a; --lvg-kunci: grayscale(.8) brightness(.55); } }

/* Layar Levelmu */
.sheet.lvg { background: linear-gradient(180deg, var(--lvg-atas) 0, var(--lvg-bg) 320px); color: var(--lvg-teks); color-scheme: normal; }
.lvg .sheet-gagang { background: var(--lvg-garis); }
.lvg .sheet-tutup, .lvg .sheet-judul, .lvg-judul { color: var(--lvg-teks); }
.lvg-hero { background: radial-gradient(circle at 50% 28%, var(--senja-a) 0, var(--senja-b) 100%); border: 0; box-shadow: 0 10px 26px color-mix(in srgb, var(--senja-b) 30%, transparent); }
.lvg-hero .lv-sinar { --lv-sinar: rgba(255, 255, 255, .2); }
.lvg-pita { box-shadow: 0 0 0 2px rgb(255 255 255 / .35); }
.lvg-bar { background: rgb(40 10 50 / .22); }
.lvg-menuju { color: #fbe9e0; }
.lvg-hadiah { background: var(--lvg-kartu); border: 1.5px dashed var(--lvg-emas); }
.lvg-hadiah-teks b { color: var(--lvg-teks); }
.lvg-hadiah-gambar img, .lvg-hadiah-kecil:not(.buka) img { filter: var(--lvg-kunci); }
.lvg-jalur::before { border-top-color: var(--lvg-garis); }
.lvg-hadiah-kecil { box-shadow: none; }
.lvg-bulat { background: var(--lvg-node); color: var(--lvg-redup); border-color: var(--lvg-garis); }
.lvg-titik.lewat .lvg-bulat { border-color: #fff; }
.lvg-titik.kini .lvg-bulat { box-shadow: 0 0 0 6px var(--lvg-emas-l), 0 0 20px color-mix(in srgb, var(--lvg-emas) 45%, transparent); }
@keyframes lvg-denyut { 50% { box-shadow: 0 0 0 9px var(--lvg-emas-l), 0 0 26px color-mix(in srgb, var(--lvg-emas) 55%, transparent); } }
.lvg-kamu { color: #fff; }
.lvg .sp-kartu { background: var(--lvg-kartu); }
.lvg .sp-kartu.aktif { box-shadow: 0 0 0 3px var(--lvg-emas-l); }
.lvg .sp-kartu:not([aria-disabled]):hover { border-color: var(--senja-oranye); }
.lvg .sp-kartu:not(.kunci):not(.aktif) small { color: #2f9a5e; }
.lvg .sp-kartu.kunci .sp-gambar img { filter: var(--lvg-kunci) blur(1px); }
.lvg-piala.kini { background: var(--lvg-emas-l); }
.lvg-misi b { background: var(--lvg-emas-l); }
.lvg .sp-pita { color: #fff; }
.lvg-kamu, .lvg .sp-kartu.kunci .sp-pita { background: var(--lvg-emas); }

/* Kartu Misi (Misi Pertama dan Misi Harian) */
.misi-jalur { --emas: var(--senja-oranye); --emas-tua: var(--senja-oranye-tua); --emas-l: var(--senja-l); --emas-t: var(--senja-t); --emas-garis: var(--senja-garis);
  background: linear-gradient(135deg, var(--senja-l) 0%, var(--senja-l2) 100%); }
.misi-jalur .mj-pita { background: linear-gradient(90deg, var(--senja-a), var(--senja-b)); color: #fff; }
.misi-jalur .mj-pips i.ok { background: linear-gradient(135deg, var(--senja-a), var(--senja-b)); }
.misi-jalur .mj-node.ok { fill: var(--senja-oranye); stroke: var(--senja-oranye); }
.misi-jalur .mj-cek { stroke: #fff; }
.misi-jalur .tbl-emas { background: linear-gradient(135deg, var(--senja-oranye), var(--senja-b)); color: #fff; box-shadow: 0 3px 0 var(--senja-ungu-tua); }
.misi-jalur .tbl-emas:active { box-shadow: 0 1px 0 var(--senja-ungu-tua); }
.misi-jalur .mh-kartu.beres .mh-ikon { background: linear-gradient(135deg, var(--senja-a), var(--senja-b)); color: #fff; }
.misi-jalur .mh-bar i { background: linear-gradient(90deg, var(--senja-a), var(--senja-oranye)); }
/* 0.9.6: Laptop, Tambah di atas sidebar dan Fokus menempel di dasarnya (setara tombol Fokus di tengah bawah HP). */
.sidebar-fokus { display: none; }
@media (min-width: 900px) {
  .sidebar-fokus { position: sticky; bottom: 0; flex-shrink: 0; margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
    border-radius: var(--r-pil); background: var(--lilac-t); color: #fff; font-weight: 600; box-shadow: 0 -12px 0 var(--paper), 0 6px 16px color-mix(in srgb, var(--lilac-t) 35%, transparent); }
  .sidebar-fokus svg { width: 21px; height: 21px; stroke-width: 2.2; }
  .sidebar-fokus:hover { filter: brightness(1.06); }
  .sidebar-fokus:active { transform: scale(.98); }
}
/* ==========================================================================
   0.9.7: Papan Habit. Warna per habit lewat .w-* (terang, teks, isi).
   ========================================================================== */
.w-biru { --c-l: var(--biru-l); --c-t: var(--biru-t); --c-i: #3b7be0; }
.w-mint { --c-l: var(--mint-l); --c-t: var(--mint-t); --c-i: var(--mint-isi); }
.w-peach { --c-l: var(--peach-l); --c-t: var(--peach-t); --c-i: #ee8a4a; }
.w-lilac { --c-l: var(--lilac-l); --c-t: var(--lilac-t); --c-i: #8a6ae8; }
.w-kuning { --c-l: var(--kuning-l); --c-t: var(--kuning-t); --c-i: #dfae1c; }
.w-pink { --c-l: var(--pink-l); --c-t: var(--pink-t); --c-i: #e0698f; }
.ph-ikon { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--c-l); color: var(--c-t); }
.ph-ikon svg { width: 19px; height: 19px; }
.ph-ikon.kecil { width: 26px; height: 26px; border-radius: 8px; }
.ph-ikon.kecil svg { width: 15px; height: 15px; }

.ph-mode { display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--r-pil); background: var(--soft); margin: var(--sp-2) 0 var(--sp-3); }
.ph-mode button { border: 0; background: none; padding: 7px 18px; border-radius: var(--r-pil); font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-3); }
.ph-mode button[aria-checked="true"] { background: var(--paper); color: var(--ink); box-shadow: var(--bayang-kartu); }
.ph-kartu { margin-top: 0; }
.ph-atas { display: flex; align-items: center; gap: 8px; margin-bottom: var(--sp-3); }
.ph-atas .kartu-judul { margin: 0; }
.ph-spasi { flex: 1; }
.ph-panah { width: 36px; height: 36px; border: 1px solid var(--rule); border-radius: 50%; }
.ph-panah:disabled { opacity: .35; }

/* Minggu: nama | 7 titik | hitungan. HP: nama di baris sendiri, titik selebar kartu. */
.ph-grid { display: grid; grid-template-columns: minmax(150px, 1fr) repeat(7, minmax(32px, 44px)) 64px; align-items: center; row-gap: 6px; column-gap: 2px; }
.ph-kepala { text-align: center; font-size: 11px; font-weight: 600; color: var(--ink-4); line-height: 1.25; font-variant-numeric: tabular-nums; }
.ph-kepala b { display: block; margin: 2px auto 0; font-size: 12.5px; color: var(--ink-3); }
.ph-kepala.kini b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--merek); color: var(--di-merek); }
.ph-sudut { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.ph-nama { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 6px 4px 0; border: 0; background: none; text-align: left; color: var(--ink); border-radius: 10px; }
.ph-nama > span:not(.ph-ikon) { display: grid; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.25; }
.ph-nama > span small { font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
.ph-nama[aria-expanded="true"] > span:not(.ph-ikon) { color: var(--merek-teks); }
.ph-hitung-kecil { display: none; }
.ph-hitung { text-align: right; font-size: 12.5px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ph-hitung.capai, .ph-hitung-kecil.capai { color: var(--mint-t); }
.ph-titik, .ph-sel { width: 30px; height: 30px; margin: 0 auto; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--c-l); color: #fff; transition: transform .15s, background .2s; }
.ph-titik svg, .ph-sel svg { width: 15px; height: 15px; stroke-width: 3.2; opacity: 0; }
.ph-titik.kena, .ph-sel.kena { background: var(--c-i); }
.ph-titik.kena svg, .ph-sel.kena svg { opacity: 1; }
.ph-titik:not(:disabled):active, .ph-sel:not(:disabled):active { transform: scale(.9); }
.ph-titik.nanti, .ph-sel.nanti { opacity: .35; }
.ph-titik.libur, .ph-sel.libur { background: none; }
.ph-titik.libur::before, .ph-sel.libur::before { content: ''; width: 8px; height: 2px; border-radius: 1px; background: var(--rule-kuat); }
.ph-titik.kunci:not(.kena), .ph-sel.kunci:not(.kena) { opacity: .55; }
.ph-titik.kini, .ph-sel.kini { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--merek); }
.ph-ringkas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--rule); text-align: center; }
.ph-ringkas b { display: block; font-size: 24px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ph-ringkas b small { font-size: 12px; font-weight: 600; }
.ph-ringkas span { font-size: 11.5px; color: var(--ink-3); }
.ph-ringkas .c1 { color: var(--merek-teks); } .ph-ringkas .c2 { color: var(--lilac-t); } .ph-ringkas .c3 { color: var(--mint-t); } .ph-ringkas .c4 { color: var(--peach-t); }
.ph-petunjuk { margin-top: var(--sp-3); }

/* Bulan: nama menempel di kiri, tanggal digeser. */
.ph-gulir { overflow-x: auto; margin: 0 calc(-1 * var(--sp-4)); padding: 0 var(--sp-4); scrollbar-width: thin; }
.ph-bulan { border-collapse: separate; border-spacing: 0; font-size: 12px; }
.ph-bulan th, .ph-bulan td { padding: 3px 1px; text-align: center; }
.ph-bulan thead th { font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ph-bulan thead th small { display: block; font-size: 10px; font-weight: 500; color: var(--ink-4); }
.ph-bulan thead th.akhir-pekan small { color: var(--peach-t); }
.ph-bulan thead th.kini-kol b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--merek); color: var(--di-merek); }
.ph-bulan .awal-mg { border-left: 1px solid var(--rule); }
.ph-bulan td.kini-sel { background: color-mix(in srgb, var(--merek) 7%, transparent); }
.ph-bulan .ph-sel { width: 24px; height: 24px; }
.ph-bulan .ph-sel svg { width: 13px; height: 13px; }
.ph-bl-nama { position: sticky; left: calc(-1 * var(--sp-4)); z-index: 1; background: var(--paper); text-align: left !important; min-width: 150px; max-width: 170px; padding-right: 8px !important; box-shadow: 1px 0 0 var(--rule); }
.ph-nama-kecil { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; text-align: left; color: var(--ink); min-width: 0; }
.ph-nama-kecil > span:not(.ph-ikon) { display: grid; min-width: 0; font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.ph-nama-kecil > span small { font-size: 11px; font-weight: 500; color: var(--ink-3); }
/* 0.13.16: api streak di samping nama habit (papan Minggu dan Bulan), didorong ke ujung kanan sel nama. */
.ph-api { flex: none; margin-left: auto; padding-left: 4px; }
.ph-nama-kecil .ph-api .api { font-size: 12px; }
.ph-nama-kecil .ph-api .api-svg { width: 16px; height: 18px; }
.ph-nama-kecil { width: 100%; }
.ph-api + .ph-hitung-kecil { margin-left: 8px !important; }
/* Laptop: kolom nama lebih lega, jadi nama panjang tidak jadi 4 baris dan baris tetap pendek. */
@media (min-width: 900px) { .ph-bl-nama { min-width: 210px; max-width: 240px; } }
.ph-bulan tbody tr + tr > * { border-top: 1px solid var(--rule); }

/* Detail satu habit */
.ph-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--rule); }
.ph-detail-judul { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; font-size: 15px; }
.chip-jenis { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-pil); background: var(--c-l); color: var(--c-t); }
.ph-kal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; text-align: center; }
.ph-kal > b { font-size: 11px; font-weight: 600; color: var(--ink-4); }
.ph-kal > span { width: 100%; max-width: 36px; aspect-ratio: 1; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ph-kal > span.kena { background: var(--c-i); color: #fff; }
.ph-kal > span.jadwal { background: var(--c-l); color: var(--c-t); }
.ph-kal > span.nanti { color: var(--ink-4); }
.ph-kal > span.kini { box-shadow: 0 0 0 2px var(--merek); }
.ph-rekor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: start; }
.ph-rekor div { background: var(--soft); border-radius: 14px; padding: 12px 8px; text-align: center; }
.ph-rekor b { display: block; font-size: 24px; font-weight: 700; color: var(--c-t); font-variant-numeric: tabular-nums; }
.ph-rekor span { font-size: 11.5px; color: var(--ink-3); }
.ph-detail-aksi { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }

/* Form tambah / ubah */
.ph-form { display: grid; gap: var(--sp-3); }
.ph-segmen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: var(--soft); }
.ph-segmen-4 { grid-template-columns: repeat(4, 1fr); }
/* 0.13.5: lembar Tambah, satu pertanyaan yang menentukan tugas atau habit. */
.tb-sering { margin-top: var(--sp-3); }
/* 0.13.8: dua jenis, dua warna. Tugas = biru, habit = hijau (sama dengan warna centang habit), di lembar Tambah,
   judul kartu Hari Ini, dan pilihan Fokus, supaya jenisnya langsung terbaca tanpa membaca kalimatnya. */
.tb-ket { margin-top: var(--sp-2); padding: 10px 12px; border-radius: var(--r-kecil); background: var(--biru-l); color: var(--biru-t); border-left: 4px solid var(--merek); }
.tb-ket b { color: inherit; }
.tb-ket[data-jenis="habit"] { background: var(--mint-l); color: var(--mint-t); border-left-color: var(--mint-isi); }
[data-jenis="tugas"] .ph-segmen input:checked + span { color: var(--biru-t); box-shadow: inset 0 0 0 1.5px var(--merek), var(--bayang-kartu); }
[data-jenis="habit"] .ph-segmen input:checked + span { color: var(--mint-t); box-shadow: inset 0 0 0 1.5px var(--mint-isi), var(--bayang-kartu); }
.label-jenis { display: inline-flex; align-items: center; gap: 6px; }
.label-jenis::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.label-biru { color: var(--biru-t); }
.label-mint { color: var(--mint-t); }
.tbl-bulat { display: grid; place-items: center; min-width: 44px; min-height: 44px; flex-shrink: 0; }
.fg-untuk { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-3); min-width: 0; max-width: 100%; }
.fg-isi, .fg-aksi { min-width: 0; }
.fg-untuk small { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); }
.fg-untuk-baris { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.fg-untuk-baris::-webkit-scrollbar { display: none; }
.fg-untuk-pil { flex: none; display: inline-flex; align-items: center; gap: 6px; max-width: 220px; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--rule); background: var(--paper); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg-untuk-tugas::before, .fg-untuk-habit::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--merek); }
.fg-untuk-habit::before { background: var(--mint-isi); }
.fg-untuk-pil[aria-pressed="true"] { background: #1e4fa8; border-color: #1e4fa8; color: #fff; }
.fg-untuk-habit[aria-pressed="true"] { background: #2f9e6f; border-color: #2f9e6f; }
.fg-untuk-pil[aria-pressed="true"]::before { background: #fff; }
/* 0.13.26: satu baris "Fokus untuk ▾" + daftar yang terbuka di bawahnya (dua kelompok: Tugas, Habit). */
.fg-untuk-pilih { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 8px 6px 14px; border-radius: 14px; border: 1.5px solid var(--rule); background: var(--paper); color: var(--ink); font: inherit; text-align: left; }
.fg-untuk-pilih small { flex: none; }
.fg-untuk-pilih b { flex: 1; min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg-untuk-pilih::before { order: 2; }
.fg-untuk-pilih .lipat-panah { order: 3; margin-left: 0; background: color-mix(in srgb, var(--merek) 12%, transparent); color: var(--merek-teks); }
.fg-untuk-pilih.fg-untuk-habit .lipat-panah { background: color-mix(in srgb, var(--mint-isi) 16%, transparent); color: var(--mint-t); }
.fg-untuk-pilih b { order: 2; }
.fg-untuk-daftar { display: flex; flex-direction: column; gap: 2px; max-height: 36vh; overflow-y: auto; padding: 6px; border-radius: 14px; background: var(--paper); border: 1px solid var(--rule); animation: muncul .18s ease-out; }
.fg-untuk-daftar .fg-untuk-pil { width: 100%; max-width: none; justify-content: flex-start; border-radius: 10px; border-color: transparent; }
.fg-untuk-daftar .fg-untuk-pil svg { margin-left: auto; width: 16px; height: 16px; flex: none; }
.fg-untuk-daftar .fg-untuk-grup { margin: 8px 8px 2px; }
.fg-batal { flex: 1; min-height: 56px; }
.ph-segmen label, .ph-pilih-ikon label, .ph-pilih-warna label { position: relative; }
.ph-segmen input, .ph-pilih-ikon input, .ph-pilih-warna input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ph-segmen span { display: grid; place-items: center; min-height: 38px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.ph-segmen input:checked + span { background: var(--paper); color: var(--ink); box-shadow: var(--bayang-kartu); }
.ph-segmen input:focus-visible + span, .ph-pilih-ikon input:focus-visible + span, .ph-pilih-warna input:focus-visible + span { outline: 2px solid var(--merek); outline-offset: 2px; }
.ph-pilih-ikon { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.ph-pilih-ikon span { display: grid; place-items: center; height: 40px; border-radius: 12px; border: 1.5px solid var(--rule); color: var(--ink-3); }
.ph-pilih-ikon span svg { width: 20px; height: 20px; }
.ph-pilih-ikon input:checked + span { border-color: var(--merek); background: var(--merek-latar); color: var(--merek-teks); }
.ph-pilih-warna { display: flex; gap: 10px; }
.ph-pilih-warna span { display: block; width: 32px; height: 32px; border-radius: 50%; background: var(--c-i); border: 3px solid var(--paper); box-shadow: 0 0 0 1.5px var(--rule); }
.ph-pilih-warna input:checked + span { box-shadow: 0 0 0 2.5px var(--ink); }

/* Hari Ini: tautan papan dan hitungan periodik */
.papan-tautan { display: block; margin-top: var(--sp-2); font-size: 13px; }
.chip-periode { flex: none; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-pil); background: var(--lilac-l); color: var(--lilac-t); white-space: nowrap; }

@media (max-width: 699px) {
  .ph-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px; }
  .ph-grid .ph-sudut, .ph-grid .ph-sudut-kiri, .ph-hitung { display: none; }
  .ph-grid .ph-nama { grid-column: 1 / -1; padding: 12px 0 4px; }
  .ph-hitung-kecil { display: inline; margin-left: auto; font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
  .ph-titik { width: 34px; height: 34px; }
  .ph-ringkas { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .ph-detail { grid-template-columns: minmax(0, 1fr); }
}
/* ==========================================================================
   0.9.7: Tur yang benar-benar memandu. Garis cahaya berjalan mengelilingi
   sorotan, panah memantul dari kartu ke sasaran, lingkaran ketuk di tempat yang
   harus disentuh, dan halaman terkunci selama tur.
   ========================================================================== */
html.tur-kunci, html.tur-kunci body { overflow: hidden !important; overscroll-behavior: none; }
html.tur-kunci { scrollbar-gutter: stable; }
@property --tk-sudut { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.tk-sorot::before { content: ''; position: absolute; inset: -5px; border-radius: 22px; padding: 3px;
  background: conic-gradient(from var(--tk-sudut), transparent 0 55%, rgba(255, 255, 255, .15) 62%, #ffe08a 76%, #ffffff 82%, #7fb3ff 90%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: tk-putar 2.2s linear infinite; }
.tk-sorot::after { content: ''; position: absolute; inset: -2px; border-radius: 20px; box-shadow: 0 0 0 0 rgba(255, 224, 138, .7); animation: tk-nyala 1.8s ease-out infinite; }
.tk-sorot.kosong::before, .tk-sorot.kosong::after, .tk-sorot.bebas::before, .tk-sorot.bebas::after { display: none; }
@keyframes tk-putar { to { --tk-sudut: 360deg; } }
@keyframes tk-nyala { 0% { box-shadow: 0 0 0 0 rgba(255, 224, 138, .65); } 100% { box-shadow: 0 0 0 14px rgba(255, 224, 138, 0); } }

.tk-panah { position: fixed; z-index: 2; width: 30px; height: 30px; margin-left: -15px; display: grid; place-items: center; border-radius: 50%; color: #1e4fa8; background: #ffe08a;
  box-shadow: 0 6px 16px rgba(10, 20, 50, .35); pointer-events: none; transform: rotate(180deg); animation: tk-pantul-atas .9s ease-in-out infinite; transition: left 380ms cubic-bezier(.2, .8, .3, 1), top 380ms cubic-bezier(.2, .8, .3, 1); }
.tk-panah.ke-bawah { transform: none; animation-name: tk-pantul-bawah; }
.tk-panah svg { width: 20px; height: 20px; }
@keyframes tk-pantul-atas { 50% { translate: 0 -6px; } }
@keyframes tk-pantul-bawah { 50% { translate: 0 6px; } }

.tk-ketuk { position: fixed; z-index: 2; width: 0; height: 0; pointer-events: none; }
.tk-ketuk i { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 3px solid #ffe08a; background: rgba(255, 224, 138, .25); animation: tk-ketuk 1.6s ease-out infinite; }
.tk-ketuk i + i { animation-delay: .8s; }
@keyframes tk-ketuk { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
/* 0.13.5: praktek geser = jari bergerak ke kiri; praktek tekan lama = lingkaran yang diam membesar lalu bertahan. */
.tk-ketuk.geser i { animation: tk-geser 1.5s ease-in-out infinite; }
.tk-ketuk.geser i + i { display: none; }
@keyframes tk-geser { 0% { transform: translateX(60px); opacity: 0; } 15% { opacity: 1; } 80% { transform: translateX(-60px); opacity: 1; } 100% { transform: translateX(-60px); opacity: 0; } }
.tk-ketuk.tahan i { animation: tk-tahan 1.8s ease-out infinite; }
.tk-ketuk.tahan i + i { display: none; }
@keyframes tk-tahan { 0% { transform: scale(.5); opacity: .6; } 45%, 85% { transform: scale(1.15); opacity: 1; background: rgba(255, 224, 138, .55); } 100% { transform: scale(1.15); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tk-sorot::before, .tk-sorot::after, .tk-panah, .tk-ketuk i, .tk-ketuk.geser i, .tk-ketuk.tahan i { animation: none; } .tk-ketuk i + i { display: none; } }
/* Tur langkah "catat" (0.9.9): saat lembar Tambah terbuka, kartu tur memandu satu bagian
   lembar tiap kali (Hari ini, Besok, + jam…, tombol Simpan). Bagian yang sedang dibahas
   diberi bingkai kuning berdenyut, dan panah kuning menunjuknya. */
.tk-kartu.ringkas .tk-isi { display: block; margin-top: 2px; font-size: 14.5px; }
.tk-kartu.ringkas .tk-bar { display: block; }
.tk-sub { display: flex; gap: 5px; margin-top: 8px; }
.tk-sub i { width: 18px; height: 5px; border-radius: 3px; background: var(--rule-kuat); }
.tk-sub i.ini { background: #f0c34a; width: 28px; }
.tk-sub i.sudah { background: var(--merek); }
.tk-tunjuk { position: relative; z-index: 1; outline: 3px solid #f0c34a !important; outline-offset: 4px; border-radius: 14px; animation: tk-tunjuk 1.4s ease-in-out infinite; }
@keyframes tk-tunjuk { 50% { outline-color: rgba(240, 195, 74, .35); } }
.tur-tambah .tk-panah { z-index: 1001; }
.tk-kartu kbd, [data-form-tambah] kbd { display: inline-block; padding: 0 6px; border-radius: 6px; border: 1px solid var(--rule-kuat); border-bottom-width: 2px; background: var(--paper); font: 600 12px var(--font); color: var(--ink); }
/* Laptop: lembar Tambah di tengah, kartu tur pindah ke kirinya supaya tidak menutupi. */
@media (min-width: 900px) { .tk-kartu.ringkas { left: 16px; right: calc(50% + 266px); max-width: 380px; margin: 0 0 0 auto; top: 50% !important; transform: translateY(-50%); } }
.kaki-tambah .tbl { max-width: none; padding-inline: 10px; font-size: 14.5px; }
@media (prefers-reduced-motion: reduce) { .tk-tunjuk { animation: none; } }
/* Fokus terkunci: label gambar statis, tombol Selesai harus ditahan (isi merambat 1,5 detik). */
.fg-mode-kunci span { display: block; padding: 8px 16px; font-size: 13px; font-weight: 700; color: #1e4fa8; white-space: nowrap; }
.tbl-tahan { position: relative; overflow: hidden; isolation: isolate; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; }
.tbl-tahan i { position: absolute; inset: 0; z-index: -1; background: rgb(8 28 80 / .45); transform: scaleX(0); transform-origin: left; }
.tbl-tahan.menahan i { transform: scaleX(1); transition: transform var(--lama-tahan, 1.5s) linear; }
.tbl-tahan.penuh i { transform: scaleX(1); }
.tbl-tahan span { pointer-events: none; }
/* Tombol musik latar Fokus (pojok kanan atas). Saat mati dibuat redup. */
.fg-suara[aria-pressed="false"] { color: #7a869c; }
/* 0.9.8: layar Fokus benar-benar penuh. Panggung memenuhi layar, panel bawah jadi kaca
   semi transparan di atasnya. --fg-bawah = tinggi panel (diisi fokus.js), dipakai supaya
   tiang dan bukit berdiri di atas panel, dan kamera peta menaruh perahu di bagian yang terlihat. */
.fokus.fokus-game { --fg-bawah: 260px; }
.fokus-game .fg-panggung { position: absolute; inset: 0; }
.fokus-game .fg-panel { position: absolute; left: 0; right: 0; bottom: 0; margin-top: 0;
  background: color-mix(in srgb, var(--paper) 58%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border-top: 1px solid color-mix(in srgb, var(--paper) 70%, transparent);
  box-shadow: 0 -10px 30px rgb(10 30 60 / .14); }
.fokus-game .fg-waktu b { color: var(--ink); text-shadow: 0 1px 0 color-mix(in srgb, var(--paper) 60%, transparent); }
.fokus-game .fg-waktu small, .fokus-game .fg-tugas small, .fokus-game .fg-panel .meta { color: var(--ink-2); }
.fokus-game .fg-panel .pg-koleksi { background: color-mix(in srgb, var(--paper) 62%, transparent); }
.fokus-game .fg-panel .tbl-garis { background: color-mix(in srgb, var(--paper) 72%, transparent); }
.fokus-game .fg-menit input { background: color-mix(in srgb, var(--paper) 80%, transparent); }
.fokus-game .pg-tiang-penuh .pg-bukit { height: calc(var(--fg-bawah) + 16%); }
.fokus-game .pg-besar .pg-tiang { bottom: calc(var(--fg-bawah) + 6%); height: calc((100% - var(--fg-bawah)) * .8); }
@supports not (backdrop-filter: blur(1px)) { .fokus-game .fg-panel { background: color-mix(in srgb, var(--paper) 88%, transparent); } }

/* HP kecil: pilihan gambar tidak boleh menabrak tombol di kiri dan kanan. */
@media (max-width: 400px) {
  .fg-atas { gap: 8px; padding-inline: 12px; }
  .fg-mode { flex: 0 1 auto; }
  .fg-mode button { font-size: 12px; padding: 8px 10px; }
}
@media (max-width: 340px) {
  .fg-mode button { font-size: 11px; padding: 7px 8px; letter-spacing: -.01em; }
}
/* Perayaan sesi Fokus tuntas: kembang api kecil + konfeti di kanvas, kartu "Selamat!" di tengah. */
.fg-rayakan { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(ellipse at 50% 40%, rgb(10 30 70 / .25), rgb(10 20 50 / .55)); animation: fg-rayakan-masuk .3s ease-out; }
.fg-rayakan.pergi { opacity: 0; transition: opacity .25s; }
.fg-rayakan canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fg-rayakan-kartu { position: relative; width: min(340px, 100%); display: grid; justify-items: center; gap: 6px; text-align: center; padding: 28px 22px 20px; border-radius: 26px;
  background: var(--paper); color: var(--ink); box-shadow: 0 20px 50px rgb(5 15 40 / .35); animation: fg-rayakan-pantul .55s cubic-bezier(.2, 1.5, .4, 1) both; }
.fg-rayakan-lencana { display: grid; place-items: center; width: 64px; height: 64px; margin-top: -60px; margin-bottom: 4px; border-radius: 50%; font-size: 32px; color: #3a2600;
  background: radial-gradient(circle at 35% 30%, #ffe89a, #f5b82e); box-shadow: 0 6px 0 #c98a12, 0 10px 24px rgb(245 184 46 / .45); animation: fg-rayakan-putar 1.2s ease-out .2s both; }
.fg-rayakan-kartu b { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.fg-rayakan-kartu p { margin: 0; font-size: 16px; color: var(--ink-2); text-wrap: balance; }
.fg-rayakan-kartu strong { color: var(--ink); }
.fg-rayakan-kabar { font-size: 14px !important; padding: 8px 12px; border-radius: 12px; background: var(--merek-latar); color: var(--merek-teks) !important; }
.fg-rayakan-kartu .tbl { margin-top: 12px; min-height: 50px; }
/* 0.13.21: kotak "Menuju …" bisa diketuk → panel rute Layar Nusantara. */
.pg-koleksi-tombol { position: relative; font: inherit; color: inherit; cursor: pointer; padding-right: 64px !important; }
.pg-rute-lihat { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; font-weight: 700; color: var(--biru-t); }
.pg-rute-lihat svg { width: 14px; height: 14px; }
.fg-rute { position: absolute; inset: 0; z-index: 6; display: flex; align-items: flex-end; justify-content: center; padding: 16px 12px max(12px, env(safe-area-inset-bottom, 0px));
  background: rgb(8 24 52 / .45); animation: fg-rayakan-masuk .2s ease-out; }
.fg-rute.pergi { opacity: 0; transition: opacity .2s; }
.fg-rute-kartu { width: min(440px, 100%); max-height: min(78vh, 640px); overflow-y: auto; overscroll-behavior: contain; border-radius: 24px; padding: 16px 16px 12px;
  background: var(--paper); color: var(--ink); box-shadow: 0 20px 50px rgb(5 15 40 / .35); animation: fg-rute-naik .3s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes fg-rute-naik { from { transform: translateY(40px); opacity: 0; } }
.pr-kepala { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.pr-kepala b { font-size: 18px; font-weight: 700; }
.pr-tutup { width: 36px; height: 36px; background: var(--soft); color: var(--ink-2); }
.pr-aturan { list-style: none; margin: 0 0 12px; padding: 10px 12px; display: grid; gap: 8px; border-radius: 16px; background: color-mix(in srgb, #58d0e6 14%, var(--paper)); font-size: 13px; color: var(--ink-2); }
.pr-aturan li { display: flex; gap: 8px; align-items: flex-start; }
.pr-aturan svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: #1e7f96; }
.pr-aturan b { color: var(--ink); font-weight: 600; }
.pr-daftar { list-style: none; margin: 0; padding: 0; display: grid; }
.pr-pulau { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 9px 0 9px; }
.pr-pulau + .pr-pulau::before { content: ''; position: absolute; left: 13px; top: -6px; height: 14px; border-left: 2px dotted var(--rule-kuat); }
.pr-tanda { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--soft); color: var(--ink-3); }
.pr-tanda svg { width: 15px; height: 15px; }
.pr-pulau.sudah .pr-tanda { background: #2f9e6f; color: #fff; }
.pr-pulau.tuju .pr-tanda { background: var(--biru-500); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--biru-500) 22%, transparent); }
.pr-isi { flex: 1; min-width: 0; display: grid; gap: 1px; }
.pr-isi b { font-size: 15px; font-weight: 600; }
.pr-isi small { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
.pr-pulau.belum .pr-isi b { color: var(--ink-3); }
.pr-pulau.tuju .pr-isi small { color: var(--biru-t); font-weight: 600; }
.pr-bar { display: block; height: 6px; margin-top: 5px; border-radius: 4px; background: var(--rule); overflow: hidden; }
.pr-bar i { display: block; height: 100%; border-radius: 4px; background: var(--biru-500); }
.pr-kini { flex: none; align-self: center; font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #e3f5ec; color: #16684a; }
@keyframes fg-rayakan-masuk { from { opacity: 0; } }
@keyframes fg-rayakan-pantul { from { opacity: 0; transform: translateY(24px) scale(.85); } }
@keyframes fg-rayakan-putar { from { transform: scale(.3) rotate(-160deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fg-rayakan, .fg-rayakan-kartu, .fg-rayakan-lencana { animation: none; } }

/* 0.10 Lembar Tambah: Catatan | Habit di atas, label baru langsung di lembar. */
.tb-jenis { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--kanvas); margin-bottom: var(--sp-3); }
.tb-jenis button { border: 0; background: none; min-height: 40px; border-radius: 10px; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.tb-jenis button[aria-checked="true"] { background: var(--paper); color: var(--merek-teks); box-shadow: 0 1px 4px rgb(20 40 80 / .12); }
[data-blok="habit"] { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); }
[data-blok="habit"][hidden] { display: none; }
[data-blok="habit"] details.lebih > :not(summary) { margin-top: var(--sp-2); }
[data-blok="habit"] .ph-pilih-ikon { margin-top: 4px; }
.chip-baru { border-style: dashed; color: var(--merek-teks); }
.label-baru { display: flex; gap: 8px; margin-top: 8px; }
.label-baru .input { flex: 1; min-width: 0; }
/* 0.10 Rapor: satu baris ringkas ke Papan Habit; kotak angka yang belum ada isinya ditulis dengan kata, bukan tanda strip. */
.rp-habit { display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left; font: inherit; color: var(--ink); cursor: pointer; border: 0; }
.rp-habit .baris-teks b { display: block; font-weight: 600; }
.rp-habit .tbl-teks { flex: none; min-height: 0; }
.stat-kosong { font-size: 14px !important; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
/* 0.10 Tombol ? (tur mini halaman) di kanan kepala. */
.kepala { position: relative; }
.tbl-bantu { margin-left: auto; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--rule-kuat); background: var(--paper); color: var(--merek-teks); font: 700 16px var(--font); }
.kepala > div:first-child { flex: 1; min-width: 0; }

/* 0.10 Hitung mundur: kartu besar untuk yang terdekat, baris ringkas untuk sisanya dan di Rencana. */
.hm-utama .daki-kartu { margin-top: 0; }
.hm-aksi { display: flex; gap: 8px; flex-wrap: wrap; margin-top: var(--sp-2); }
.hm-daftar { list-style: none; margin: 0; padding: 4px var(--sp-3); }
.hm-baris { display: flex; align-items: center; gap: var(--sp-3); padding: 10px 0; }
.hm-baris + .hm-baris { border-top: 1px solid var(--rule); }
.hm-baris .baris-teks b, .rk-hm-ringkas .baris-teks b { display: block; font-weight: 600; }
.hm-bar { display: block; height: 6px; margin-top: 6px; border-radius: 3px; background: var(--kuning-l, #fdf0c8); overflow: hidden; }
.hm-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #f3c34c, #e89a2c); }
.rk-hm-ringkas { display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left; font: inherit; color: var(--ink); border: 0; cursor: pointer; }
.rk-hm-ringkas .baris-teks { flex: 1; min-width: 0; }
.rk-hm-ringkas > svg { flex: none; width: 20px; height: 20px; color: var(--ink-3); }
/* 0.10.1: isian tambahan di lembar Tambah tidak dilipat lagi; judul kecil menandai bahwa semuanya boleh kosong. */
.lebih-buka { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--rule-kuat); }
.lebih-judul { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-2); }
.lebih-judul small { margin-left: 6px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-3); }
.lebih-buka .dua-kolom + .dua-kolom { margin-top: 0; }
/* 0.10.1 (revisi): isian tambahan jadi lipatan dengan tanda panah yang jelas. Terbuka sendiri di laptop (lembar.js). */
details.lebih-buka { display: block; }
details.lebih-buka > :not(summary) { margin-top: var(--sp-2); }
details.lebih-buka[open] { display: grid; gap: var(--sp-2); }
details.lebih-buka[open] > :not(summary) { margin-top: 0; }
.lebih-buka > summary.lebih-judul { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; margin: 0; padding: 0 12px; border-radius: 12px;
  background: var(--kanvas); cursor: pointer; list-style: none; }
.lebih-buka > summary.lebih-judul::-webkit-details-marker { display: none; }
.lebih-panah { flex: none; width: 22px; height: 22px; color: var(--merek-teks); transition: transform .2s; }
.lebih-buka[open] .lebih-panah { transform: rotate(180deg); }
.lebih-buka > summary.lebih-judul { padding-block: 8px; }
.lebih-buka > summary.lebih-judul small { display: block; margin: 2px 0 0; }

/* 0.10.2: Jadwal ringkas dan judul panjang dipotong 2 baris; ajakan pasang di perkenalan. */
.jd-lebih { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px auto 6px; }
.hb-lebih { color: var(--mint-t); }
.hb-lebih .lipat-panah { margin-left: 0; width: 26px; height: 26px; }
.jd-lebih:not(.hb-lebih) .lipat-panah { margin-left: 0; width: 26px; height: 26px; background: color-mix(in srgb, var(--biru-500) 12%, transparent); color: var(--biru-t); }
.garis-waktu .baris-teks { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.onb-langkah { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15px; line-height: 1.5; list-style: decimal; }
.onb-langkah li { display: list-item; }
.onb-langkah li::marker { color: var(--merek); font-weight: 600; }
.onb-ikon { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--merek-latar); color: var(--merek-teks); font-size: 12px; }
.onb-pasang { display: grid; gap: var(--sp-3); }
.onb-pasang .kotak-info { margin: 0; }
.onb-data { margin-top: var(--sp-3); line-height: 1.55; }
/* --- 0.11: Rutin dilebur ke Habit ------------------------------------------------
   Hari Ini: "Habit hari ini" dikelompokkan Pagi / Siang / Malam / Sepanjang hari.
   Baris habit = ikon habit + nama + keterangan (jam, sesudah sholat) + streak + bulat centang. */
.hb-bilah { display: flex; gap: 3px; margin: 2px 0 var(--sp-2); }
.hb-bilah i { flex: 1; height: 5px; border-radius: 3px; background: var(--soft, var(--rule)); transition: background var(--durasi); }
.hb-bilah i.hb-ok { background: var(--mint-isi); }
.hb-grup + .hb-grup { margin-top: var(--sp-2); }
.hb-waktu { display: flex; align-items: center; gap: 6px; margin: var(--sp-2) 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.hb-waktu em { font-style: normal; letter-spacing: 0; text-transform: none; font-weight: 600; font-size: 11px; padding: 1px 8px; border-radius: var(--r-pil); background: var(--kuning-l); color: var(--kuning-t); }
.hb-baris { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 54px; padding: 6px 0; text-align: left; border-bottom: 1px solid var(--rule);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: transform .12s; }
.hb-grup .hb-baris:last-child { border-bottom: 0; }
.hb-baris:active { transform: scale(.985); }
.hb-baris .baris-teks { font-size: 15px; font-weight: 500; line-height: 1.3; }
.hb-baris .chip-periode { margin-left: 6px; vertical-align: 1px; }
.hb-baris[aria-pressed="true"] .ph-ikon { opacity: .55; }
.hb-grup .hk { margin: var(--sp-2) 0; }
/* 0.13.19: habit yang baru dicentang memudar lalu terlipat ke baris "N habit beres" */
.hb-pergi { overflow: hidden; animation: hbPergi .45s ease-in .6s forwards; }
@keyframes hbPergi { to { opacity: 0; max-height: 0; transform: translateX(14px); } }
.hb-pergi { max-height: 140px; }
.hb-beres { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 50px; margin-top: var(--sp-2); padding: 8px 12px; text-align: left; border-radius: var(--r-kartu, 14px); background: var(--mint-l, rgba(61,214,140,.1)); color: var(--ink); }
.hb-beres .baris-teks { font-size: 14.5px; font-weight: 600; }
.hb-beres .meta { display: block; font-weight: 400; }
.hb-beres-semua { min-height: 58px; }
.hb-beres-semua .baris-teks { font-size: 15.5px; }
.hb-beres-isi { margin-top: var(--sp-1, 4px); opacity: .85; }
/* 0.13.21: panah lipat. Bawah = bisa dibuka, atas = bisa ditutup. */
.hb-beres .baris-teks { flex: 1; min-width: 0; }
.lipat-panah { flex: none; margin-left: auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--mint-isi) 16%, transparent); color: var(--mint-t); }
.lipat-panah svg { width: 16px; height: 16px; transform: rotate(90deg); transition: transform .25s cubic-bezier(.3, .8, .3, 1); }
[aria-expanded="true"] > .lipat-panah svg { transform: rotate(-90deg); }
.lvg-capai { margin-bottom: var(--sp-2); }
.lvg-capai .lencana[data-kunci] { cursor: pointer; }
.tg-beres { background: var(--biru-l); }
.tg-beres .bulat { background: var(--biru-500); border-color: var(--biru-500); color: #fff; }
.tg-beres .lipat-panah { background: color-mix(in srgb, var(--biru-500) 14%, transparent); color: var(--biru-t); }
.hb-tutup .lipat-panah { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-2); }
[data-aksi="buka-berhasil"] .saat-buka, [data-aksi="buka-berhasil"][aria-expanded="true"] .saat-tutup { display: none; }
[data-aksi="buka-berhasil"][aria-expanded="true"] .saat-buka { display: inline; }
@media (prefers-reduced-motion: reduce) { .lipat-panah svg { transition: none; } }
@media (prefers-reduced-motion: reduce) { .hb-pergi { animation: none; } }

/* Lembar Tambah/Ubah habit: pilihan Kapan */
.kapan-pilih { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.kapan-pilih label { position: relative; }
.kapan-pilih input { position: absolute; opacity: 0; pointer-events: none; }
.kapan-pilih span { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: var(--r-pil); border: 1.5px solid var(--rule-kuat); background: var(--paper); font-size: var(--fs-meta); font-weight: 500; cursor: pointer; transition: background var(--durasi), border-color var(--durasi), color var(--durasi); }
.kapan-pilih input:checked + span { background: var(--merek); border-color: var(--merek); color: var(--di-merek); }
.kapan-pilih input:focus-visible + span { outline: 2px solid var(--merek); outline-offset: 2px; }
.kapan-sholat { margin-top: var(--sp-2); }
.kapan-sholat span { min-height: 34px; padding: 0 12px; }
[data-kapan-habit] [data-kapan-jam] { margin-top: var(--sp-2); max-width: 200px; }

/* ⚙ di kartu sapaan: pintu ke Pengaturan & lainnya (tab Lainnya dihapus dari bar bawah). Laptop pakai sidebar. */
.sapa-gir { position: absolute; top: 10px; right: 10px; z-index: 5; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .62); color: #16233a; box-shadow: 0 1px 4px rgba(20, 40, 80, .15); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sapa-gir svg { width: 20px; height: 20px; }
.sapa-gir:active { transform: scale(.92); }
@media (min-width: 900px) { .sapa-gir { display: none; } }
/* --- 0.11.1: Onboarding dimulai dengan sambutan -------------------------------------
   Layar pertama bukan pertanyaan, tapi "Selamat datang di Rutin": pemandangan Hari Ini
   sesuai jam dengan bendera berkibar di bukit, lalu tiga alasan singkat yang muncul bergantian. */
.onb-pertama::before { display: none; }
.onb-pertama .onb-isi { margin-top: 0; }
.onb-sambut { display: flex; flex-direction: column; gap: var(--sp-5, 20px); }
.onb-pemandangan.sapa { aspect-ratio: 4 / 3; max-height: 44vh; min-height: 220px; margin: 0; cursor: default; border-radius: 28px;
  box-shadow: 0 18px 40px rgba(20, 50, 100, .18); animation: onb-muncul .9s cubic-bezier(.2, .8, .2, 1) both; }
.onb-pemandangan .sapa-zum img { animation: onb-zum 9s ease-out both; }
.onb-sambut-teks { display: flex; flex-direction: column; gap: var(--sp-3); }
.onb-salam { margin: 0; font-size: 14px; font-weight: 600; color: var(--merek-teks); animation: onb-naik .6s .25s both; }
.onb-judul-besar { margin: 0; font-size: clamp(30px, 8.5vw, 40px); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; animation: onb-naik .7s .35s both; }
.onb-merek-teks { color: var(--merek); }
.onb-janji { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.55; animation: onb-naik .7s .5s both; }
.onb-alasan { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.onb-alasan li { display: flex; align-items: center; gap: var(--sp-3); animation: onb-naik .6s calc(.7s + var(--i) * .15s) both; }
.onb-alasan b { display: block; font-size: 15px; }
.onb-alasan small { display: block; color: var(--ink-3); font-size: 13px; line-height: 1.4; }
.onb-pertama .onb-kaki { flex-direction: column; align-items: stretch; gap: var(--sp-2); animation: onb-naik .6s 1.2s both; }
.onb-ayo { min-height: 54px; font-size: 16px; }
.onb-catatan { text-align: center; margin: 0; }
@keyframes onb-muncul { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes onb-zum { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes onb-naik { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Langkah pertanyaan: masuk dengan geser halus; pratinjau sapaan; chip habit berikon; jam bangun/tidur. */
.onb:not(.onb-pertama) .onb-isi { animation: onb-naik .45s both; }
.onb-pratinjau { margin: 0; align-self: flex-start; padding: 10px 16px; border-radius: 18px 18px 18px 6px; background: var(--merek-latar); color: var(--merek-teks); font-weight: 600; animation: onb-naik .35s both; }
.chip-habit { gap: 8px; padding-left: 6px; }
.chip-ik { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--c-l); color: var(--c-t); flex: none; }
.chip-ik svg { width: 16px; height: 16px; }
.chip-habit[aria-pressed="true"] .chip-ik { background: rgba(255, 255, 255, .22); color: currentColor; }
.onb-jam { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.onb-jam-kartu { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); border-radius: var(--r-kartu); border: 1px solid var(--rule); }
.onb-jam-kartu > svg { width: 30px; height: 30px; }
.onb-jam-pagi { background: var(--kuning-l); color: var(--kuning-t); }
.onb-jam-malam { background: var(--lilac-l); color: var(--lilac-t); }
.onb-jam-kartu .input { background: var(--paper); color: var(--ink); }
/* 0.13.7: Bangun/Tidur jadi habit hanya kalau dipilih; tombol kembali pindah ke ikon di kepala layar. */
.onb-jam-habit { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-meta); font-weight: 600; cursor: pointer; }
.onb-kembali { display: grid; place-items: center; width: 40px; height: 40px; margin-left: -10px; border-radius: var(--r-pil); color: var(--ink-2); }
.onb-kembali svg { width: 22px; height: 22px; }
.onb-kembali:hover { background: var(--soft); }
.onb-kaki > :only-child { margin-left: auto; }
@media (prefers-reduced-motion: reduce) {
  .onb-pemandangan.sapa, .onb-pemandangan img, .onb-salam, .onb-judul-besar, .onb-janji, .onb-alasan li, .onb-pertama .onb-kaki, .onb .onb-isi, .onb-pratinjau { animation: none; }
}
/* 0.11.1: onboarding selalu pas satu layar, tombol selalu kelihatan tanpa digulir.
   Gambar sambutan yang mengalah (menyusut mengikuti tinggi layar); di layar pendek teks kecil disembunyikan. */
.onb { height: 100vh; height: 100dvh; overflow: hidden; }
.onb-isi { flex: 1 1 auto; min-height: 0; margin-top: var(--sp-4); gap: var(--sp-2); }
.onb-kaki { flex: none; margin-top: var(--sp-3); }
.onb-pertama .onb-isi { display: flex; }
.onb-sambut { flex: 1 1 auto; min-height: 0; gap: var(--sp-4); }
.onb-pemandangan.sapa { flex: 1 1 auto; aspect-ratio: auto; height: auto; min-height: 120px; max-height: 42vh; }
.onb-sambut-teks { flex: none; gap: var(--sp-2); }
.onb-alasan { gap: var(--sp-2); margin-top: var(--sp-1); }
.onb-alasan .ikon-bulat { width: 40px; height: 40px; }
.onb-kartu { padding: var(--sp-3); }
.onb .kelompok { margin-top: var(--sp-1); }
.onb .kelompok legend { margin-bottom: var(--sp-1); }
.onb .chip-baris { gap: 6px; }
.onb .chip { min-height: 36px; }
.chip-ik { width: 24px; height: 24px; }
.onb-data { margin-top: var(--sp-2); }
@media (max-height: 760px) {
  .onb-alasan small { display: none; }
  .onb-judul-besar { font-size: clamp(26px, 7.5vw, 34px); }
  .onb .chip { min-height: 32px; padding: 0 12px; font-size: 13px; }
  .onb .chip-habit { padding-left: 4px; }
}
@media (max-height: 620px) { .onb-janji { display: none; } }/* Pengaman: kalau tetap tidak muat (layar sangat pendek), isinya yang digulir, tombol tetap di tempat. */
.onb-isi { overflow-y: auto; overscroll-behavior: contain; }
@media (max-height: 760px) {
  .onb-isi .titik-progres { margin-bottom: 0; }
  .onb-judul { font-size: 24px; }
  .onb-kartu { padding: var(--sp-2) var(--sp-3); gap: var(--sp-1); }
  .onb .kelompok legend { font-size: 10.5px; margin-bottom: 2px; }
  .onb .chip-baris { gap: 5px; }
  .onb .chip-ik { width: 20px; height: 20px; }
  .onb .chip-ik svg { width: 13px; height: 13px; }
  .onb .form-baris .input, .onb .form-baris .tbl { min-height: 38px; }
  .onb-merek { font-size: 16px; }
  .onb-isi { margin-top: var(--sp-3); }
}@media (max-height: 700px) { .onb .chip { min-height: 30px; } .onb .kelompok { margin-top: 2px; } .onb-kaki { margin-top: var(--sp-2); } }
.onb-sambut { justify-content: center; }

/* 0.11.2: hitung mundur jadi fitur unggulan. Pita di kartu sapaan + kartu gunung besar di atas Rencana. */
.sapa-hm { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin-top: var(--sp-2); padding: 5px 12px 5px 8px;
  border-radius: var(--r-pil); background: rgba(255, 255, 255, .72); color: #16233a; font-size: 12.5px; box-shadow: 0 1px 4px rgba(20, 40, 80, .12);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sapa-hm svg { width: 15px; height: 15px; flex: none; color: #9a6a06; }
.sapa-hm span { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sapa-hm b { flex: none; font-weight: 700; color: #7d5a06; }
.sapa-hm b::before { content: '·'; margin-right: 6px; color: rgba(22, 35, 58, .45); font-weight: 400; }
.sapa-hm:active { transform: scale(.97); }
.rk-hm { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--sp-3); }
.rk-hm .daki-kartu { margin: 0; }
.rk-hm-semua { align-self: flex-end; font-size: 13px; }
.rk-hm-ajak { display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left; margin-bottom: var(--sp-3); border: 1.5px dashed var(--rule-kuat); }
.rk-hm-ajak > svg { width: 20px; height: 20px; color: var(--merek-teks); flex: none; }/* Pita: satu baris penuh di bawah bar level (di dalam kartu sapaan terlalu sempit dan menabrak lencana level). */
.sapa-hm { display: flex; width: 100%; margin: 0 0 var(--sp-3); padding: 9px 14px; border-radius: var(--r-kartu); background: var(--kuning-l); color: var(--kuning-t);
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 13.5px; text-align: left; }
.sapa-hm svg { width: 17px; height: 17px; color: currentColor; }
.sapa-hm span { flex: 1; color: var(--ink); }
.sapa-hm b { color: var(--kuning-t); }
.sapa-hm b::before { content: none; }
.sapa-hm::after { content: '›'; font-size: 18px; line-height: 1; color: var(--kuning-t); margin-left: 4px; }
/* HP: kartu gunung/pasir waktu di paling atas Rencana (dulu turun ke bawah). Laptop: tetap di bawah kalender. */
@media (max-width: 899px) { .rk-hm, .rk-hm-ajak { order: -1; } }/* Ajakan hitung mundur dibuat mencolok (pengguna tidak ngeh versi garis putus-putus): latar kuning hangat,
   gunung kecil di pojok, tombol "Buat" terisi, dan denyut pelan beberapa kali saat pertama tampil. */
.rk-hm-ajak { position: relative; overflow: hidden; isolation: isolate; border: 1.5px solid color-mix(in srgb, #e0a82e 55%, transparent);
  background: linear-gradient(135deg, var(--kuning-l), color-mix(in srgb, var(--kuning-l) 55%, var(--peach-l)));
  box-shadow: 0 6px 18px color-mix(in srgb, #e0a82e 22%, transparent); animation: hm-ajak-denyut 2.4s ease-in-out 3; }
.rk-hm-ajak::after { content: ''; position: absolute; right: -8px; bottom: -14px; width: 120px; height: 64px; z-index: -1; opacity: .35;
  background: linear-gradient(to top right, transparent 49%, #d9a53a 50%) left / 50% 100% no-repeat, linear-gradient(to top left, transparent 49%, #d9a53a 50%) right / 50% 100% no-repeat; }
.rk-hm-ajak .ikon-bulat { background: #fff; color: #b7791f; box-shadow: 0 2px 6px rgba(183, 121, 31, .25); }
.rk-hm-ajak b { color: var(--kuning-t); font-size: 15.5px; }
.rk-hm-ajak-tbl { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px 8px 10px; border-radius: var(--r-pil);
  background: #d98f1e; color: #fff; font-weight: 700; font-size: 13.5px; box-shadow: 0 3px 8px rgba(217, 143, 30, .35); }
.rk-hm-ajak-tbl svg { width: 16px; height: 16px; stroke-width: 2.6; }
.rk-hm-ajak:active { transform: scale(.985); }
@keyframes hm-ajak-denyut { 0%, 100% { box-shadow: 0 6px 18px color-mix(in srgb, #e0a82e 22%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, #e0a82e 28%, transparent), 0 8px 22px color-mix(in srgb, #e0a82e 30%, transparent); } }
@media (prefers-reduced-motion: reduce) { .rk-hm-ajak { animation: none; } }.rk-hm-ajak::after { right: 0; bottom: 0; width: 132px; height: 58px; opacity: .3;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 58'%3E%3Cpath d='M0 58 34 22l14 14 26-34 22 28 12-10 24 38Z' fill='%23d9a53a'/%3E%3Cpath d='M74 2l-7 9 7-3 6 4Z' fill='%23fff' opacity='.8'/%3E%3C/svg%3E") no-repeat right bottom / contain; }.rk-hm-ajak::after { opacity: .42;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 58'%3E%3Cpath d='M0 58 34 26l14 13 26-27 22 24 12-9 24 31Z' fill='%23d9a53a'/%3E%3Crect x='73' y='0' width='2' height='13' rx='1' fill='%23b5781a'/%3E%3Cpath d='M75 1c4-2 7 2 12 0l-3 4 3 3c-5 2-8-2-12 0Z' fill='%232563c9'/%3E%3C/svg%3E") no-repeat right bottom / contain; }/* Ajakan: tersusun atas-bawah supaya kalimat tidak terjepit di antara ikon dan tombol. */
.rk-hm-ajak { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-4); }
.rk-hm-ajak-atas { display: flex; align-items: center; gap: var(--sp-3); }
.rk-hm-ajak-atas b { font-size: 16px; line-height: 1.3; }
.rk-hm-ajak-teks { max-width: 72%; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.rk-hm-ajak-tbl { margin-top: var(--sp-1); }
/* --- 0.11.3: kartu hitung mundur kecil -------------------------------------------------
   Gaya sama dengan kartu ajakan di Rencana (kuning hangat, tepi emas). Kiri: nama, tanggal,
   angka sisa hari, bar kemajuan. Kanan: jam pasir kecil yang pasirnya berkurang tiap hari. */
/* 0.13.17: Riwayat hitung mundur. Satu baris dilipat dengan panah; dibuka jadi daftar polos. */
.hm-riwayat { margin-top: var(--sp-4); padding: 0; overflow: hidden; }
.hm-riwayat summary { display: flex; align-items: center; gap: var(--sp-2); min-height: 52px; padding: 0 var(--sp-4); cursor: pointer; list-style: none; font-weight: 600; }
.hm-riwayat summary::-webkit-details-marker { display: none; }
.hm-riwayat-judul { display: inline-flex; align-items: center; gap: 8px; flex: 1; }
.hm-riwayat-judul svg { width: 18px; height: 18px; color: var(--kuning-t); }
.hm-riwayat-panah { display: grid; place-items: center; transition: transform var(--durasi); }
.hm-riwayat-panah svg { width: 18px; height: 18px; color: var(--ink-3); transform: rotate(90deg); }
.hm-riwayat[open] .hm-riwayat-panah { transform: rotate(180deg); }
.hm-riwayat-daftar { list-style: none; margin: 0; padding: 0 var(--sp-4) var(--sp-2); border-top: 1px solid var(--rule); }
.hm-riwayat-daftar li { display: flex; align-items: center; gap: var(--sp-3); padding: 8px 0; }
.hm-riwayat-daftar li + li { border-top: 1px solid var(--rule); }
.hm-riwayat-daftar .baris-teks b { display: block; font-weight: 600; }
.hm-riwayat-daftar .tbl-ikon { color: var(--ink-3); }
.hmk-selesai { pointer-events: auto; margin-top: var(--sp-2); align-self: flex-start; }
.hmk-selesai svg { width: 16px; height: 16px; }
/* minmax(0, 1fr): nama panjang (nowrap) tidak boleh melebarkan kartu melewati layar. */
.hmk-daftar { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
.hmk { position: relative; display: flex; align-items: center; gap: var(--sp-3); padding: 14px 14px 14px 16px; border-radius: var(--r-kartu);
  border: 1.5px solid color-mix(in srgb, #e0a82e 45%, transparent);
  background: linear-gradient(135deg, var(--kuning-l), color-mix(in srgb, var(--kuning-l) 60%, var(--peach-l))); }
.hmk-isi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* Nama panjang (mis. "Sidang skripsi di gedung rektorat") boleh 2 baris, baru dipotong "…". */
.hmk-nama { font-size: 15.5px; font-weight: 700; line-height: 1.3; color: var(--ink); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; padding-right: 64px; }
.hmk-tgl { font-size: 12.5px; color: var(--ink-3); }
.hmk-sisa { margin: 4px 0 0; display: flex; align-items: baseline; gap: 6px; color: var(--kuning-t); line-height: 1; }
.hmk-sisa b { font-size: 32px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hmk-sisa span { font-size: 13px; font-weight: 600; }
.hmk-bar { display: block; height: 6px; margin-top: 8px; border-radius: 3px; background: color-mix(in srgb, #d99a17 18%, transparent); overflow: hidden; }
.hmk-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #f0c24e, #d98f1e); }
.hmk-pasir { flex: none; width: 64px; height: 80px; cursor: pointer; }
.hmk-pasir svg { width: 100%; height: 100%; overflow: visible; }
.hmk.dekat { border-color: #e0a82e; box-shadow: 0 6px 18px color-mix(in srgb, #e0a82e 25%, transparent); }
.hmk.tiba { background: linear-gradient(135deg, #fff1c2, #ffd98a); }
.hmk.tiba .hmk-sisa { color: #9a5b00; }
.hmk-aksi { position: absolute; top: 6px; right: 76px; display: flex; gap: 2px; }
.hmk-aksi .tbl-ikon { width: 32px; height: 32px; min-height: 32px; color: var(--ink-3); }
.hmk-aksi .tbl-ikon svg { width: 17px; height: 17px; }
.hmk:not(:has(.hmk-aksi)) .hmk-nama { padding-right: 0; }
.rk-hm { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--sp-3); }
.rk-hm-bawah { display: flex; justify-content: space-between; align-items: center; }
.rk-hm-bawah .tbl-teks { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.rk-hm-bawah svg { width: 15px; height: 15px; }
/* Gunung di pojok ajakan tidak dipakai lagi (gambar hitung mundur sekarang jam pasir). */
.rk-hm-ajak:not(.rk-hm-masuk)::after { content: none; }
.rk-hm-ajak:not(.rk-hm-masuk) .rk-hm-ajak-teks { max-width: none; }
/* Rencana: kartu masuk ke halaman Hitung mundur, gunung berbendera tetap di pojok. */
.rk-hm-masuk { width: 100%; margin-bottom: var(--sp-3); }
.rk-hm-masuk .rk-hm-ajak-teks strong { color: var(--ink); font-weight: 700; }
:root[data-tema="gelap"] .hmk.tiba { background: linear-gradient(135deg, #3a2c0c, #4a3610); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="terang"]) .hmk.tiba { background: linear-gradient(135deg, #3a2c0c, #4a3610); } }/* Di Rencana kartunya lebih pendek, supaya kalender dan agenda tetap dekat. */
.rk-hm .hmk { padding: 10px 12px 10px 14px; gap: var(--sp-2); }
.rk-hm .hmk-isi { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-2); align-items: baseline; }
.rk-hm .hmk-nama { grid-column: 1; font-size: 14.5px; -webkit-line-clamp: 1; line-clamp: 1; }
.rk-hm .hmk-tgl { grid-column: 1; grid-row: 2; }
.rk-hm .hmk-sisa { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; flex-direction: column; align-items: flex-end; gap: 0; }
.rk-hm .hmk-sisa b { font-size: 26px; }
.rk-hm .hmk-sisa span { font-size: 11px; }
.rk-hm .hmk-bar { grid-column: 1 / -1; margin-top: 6px; height: 5px; }
.rk-hm .hmk-pasir { width: 40px; height: 52px; }
.rk-hm .hmk-daftar { gap: 6px; }/* 0.11.3: angka flip (hari · jam · menit · detik) di kartu kecil, warna emas senada kartu. */
.hmk .flip-baris { display: grid; grid-template-columns: repeat(4, minmax(0, 46px)); gap: 6px; margin: 6px 0 0; }
.hmk .flip { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hmk .flip-k { width: 100%; height: 38px; border-radius: 9px; display: grid; place-items: center; overflow: hidden; position: relative;
  background: linear-gradient(180deg, #f2b93b 0 50%, #e6a42a 50% 100%); color: #fff; box-shadow: 0 2px 6px rgba(200, 130, 20, .3); }
.hmk .flip-k::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(120, 70, 0, .25); }
.hmk .flip-k span { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.hmk .flip small { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--kuning-t); }
/* Rencana: lebih kecil lagi, angka flip di bawah nama. */
.rk-hm .hmk-isi { display: flex; flex-direction: column; }
.rk-hm .hmk .flip-baris { grid-template-columns: repeat(4, minmax(0, 36px)); gap: 4px; margin-top: 4px; }
.rk-hm .hmk .flip-k { height: 28px; border-radius: 7px; }
.rk-hm .hmk .flip-k span { font-size: 15px; }
.rk-hm .hmk .flip small { font-size: 8px; }
.rk-hm .hmk-pasir { width: 44px; height: 58px; }.rk-hm .hmk-isi { align-items: stretch; }
.rk-hm .hmk-sisa { align-self: flex-start; flex-direction: row; margin-top: 4px; }
.rk-hm .hmk-sisa b { font-size: 22px; }
/* 0.13.14: auto-fit, jadi satu kartu memenuhi lebar halaman (dulu auto-fill menyisakan kolom kosong di kanan). */
@media (min-width: 900px) { .hmk-kisi { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } }
/* 0.13.14: halaman Habit di laptop selebar Hari Ini; ukuran huruf dan kartu tidak berubah, hanya ruangnya. */
@media (min-width: 1200px) {
  /* Selebar Hari Ini (1160px), supaya semua halaman sama lebarnya. */
  html[data-halaman="habit"] .isi, .isi:has(.hmk-kisi) { max-width: 1160px; }
  /* Laptop lebar: kolom tanggal sedikit lebih lega. */
  html[data-halaman="habit"] .ph-bulan th, html[data-halaman="habit"] .ph-bulan td { padding-inline: 3px; }
}
/* 0.13.14: papan Bulan satu papan panjang (3 bulan lalu sampai bulan ini), digeser dengan scrollbar, tanpa panah. */
/* Nama bulan menempel di kiri selama bulannya masih terlihat (sticky di dalam selnya sendiri, jadi tidak menumpuk). */
.ph-bulan thead th.ph-bl-bulan { text-align: left; padding: 0 0 4px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.ph-bl-bulan span { position: sticky; left: 160px; display: inline-block; padding-inline: 6px; white-space: nowrap; }
@media (max-width: 699px) { .ph-bl-bulan span { left: 150px; } }
/* 0.13.22: kolom nama di laptop ≥210px, jadi nama bulan yang menempel digeser keluar dari bawahnya (dulu "September" terpotong jadi "ember"). */
@media (min-width: 700px) { .ph-bl-bulan span { left: 214px; } }
/* 0.13.22: tablet (700–899px). Dulu isi tetap 640px di tengah, layar tablet kosong di kiri-kanan. Sekarang selebar layar;
   papan Habit sebulan dengan kolom nama selebar laptop dan titik sedikit lebih besar untuk jari. */
@media (min-width: 700px) and (max-width: 899px) {
  .isi { max-width: none; padding-inline: var(--sp-6); }
  .nav-bawah, .tulis-bar { max-width: 640px; }
  .ph-bl-nama { min-width: 210px; max-width: 240px; }
  .ph-bulan th, .ph-bulan td { padding: 5px 2px; }
  .ph-bulan .ph-sel { width: 30px; height: 30px; }
  .ph-bulan .ph-sel svg { width: 15px; height: 15px; }
}
.ph-bulan .awal-bln { border-left: 2px solid var(--rule-kuat); }
.ph-gulir { scrollbar-width: auto; scrollbar-color: var(--rule-kuat) transparent; padding-bottom: 6px; }
/* 0.13.14: hitung mundur di Hari Ini jadi satu pita. 7 hari atau kurang, angka flip ikut di dalamnya, 75% dari
   kotak lama (76 → 57px, huruf 28 → 21px). HP: angka di baris kedua; laptop: satu baris. */
.sapa-hm-flip { flex-wrap: wrap; align-items: center; row-gap: 8px; padding-block: 10px 12px; }
.sapa-hm-flip .flip-baris { order: 5; flex-basis: 100%; display: grid; grid-template-columns: repeat(4, 57px); gap: 6px; justify-content: start; }
.sapa-hm-flip .flip { display: grid; justify-items: center; gap: 3px; }
.sapa-hm-flip .flip-k { width: 57px; aspect-ratio: auto; height: 46px; border-radius: 10px; font-size: 21px;
  background: linear-gradient(180deg, #f6d97a 0 50%, #e9c25a 50% 100%); color: #3a2a00; }
.sapa-hm-flip .flip-k::after { background: rgba(80, 50, 0, .3); }
.sapa-hm-flip .flip-k span { flex: none; overflow: visible; color: inherit; font-weight: 700; }
.sapa-hm-flip .flip small { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--kuning-t); }
@media (min-width: 700px) {
  .sapa-hm-flip { flex-wrap: nowrap; }
  .sapa-hm-flip .flip-baris { order: 0; flex-basis: auto; margin-left: auto; }
  .sapa-hm-flip > span { flex: 0 1 auto; }
}
/* 0.13.16: pita di Hari Ini ikut warna kedekatan, sama dengan kartunya di halaman Hitung mundur:
   emas (>30 hari, bawaan di atas) → oranye (8–30) → oranye-merah (3–7) → merah berdenyut (0–2). */
/* 0.13.19: biru (> 7 hari) → kuning (3–7) → oranye (1–2) → merah (hari-H / ≤ 3 jam), sama dengan .hmk. */
.sapa-hm-jauh { --hm-a: #6aa5ff; --hm-b: #3b7be0; }
.sapa-hm-mendekat { --hm-a: #f2b93b; --hm-b: #c98a10; }
.sapa-hm-dekat { --hm-a: #f59a3e; --hm-b: #ea7a22; }
/* 0.13.17: pita tidak berdenyut; warnanya saja sudah cukup, checklist tetap jadi fokus. */
.sapa-hm-genting { --hm-a: #ec4c4c; --hm-b: #d33434; }
:is(.sapa-hm-jauh, .sapa-hm-mendekat, .sapa-hm-dekat, .sapa-hm-genting) {
  background: linear-gradient(135deg, color-mix(in srgb, var(--hm-a) 20%, var(--paper)), color-mix(in srgb, var(--hm-b) 9%, var(--paper)));
  color: color-mix(in srgb, var(--hm-b) 80%, var(--ink)); }
:is(.sapa-hm-jauh, .sapa-hm-mendekat, .sapa-hm-dekat, .sapa-hm-genting) b,
:is(.sapa-hm-jauh, .sapa-hm-mendekat, .sapa-hm-dekat, .sapa-hm-genting)::after,
:is(.sapa-hm-jauh, .sapa-hm-mendekat, .sapa-hm-dekat, .sapa-hm-genting) .flip small { color: color-mix(in srgb, var(--hm-b) 80%, var(--ink)); }
:is(.sapa-hm-dekat, .sapa-hm-genting) .flip-k { background: linear-gradient(180deg, var(--hm-a) 0 50%, var(--hm-b) 50% 100%); color: #fff; }
:is(.sapa-hm-dekat, .sapa-hm-genting) .flip-k::after { background: rgba(0, 0, 0, .18); }
@media (prefers-reduced-motion: reduce) { .sapa-hm-genting { animation: none; } }

/* --- 0.11.3b: hitung mundur lebih besar, berwarna sesuai kedekatan, jam pasir hidup ---------
   Warna: emas (>30 hari) → oranye (8–30) → oranye-merah (3–7) → merah berdenyut (0–2).
   Latar dicampur dari warna paper, jadi otomatis pas di tema terang dan gelap. */
.hmk { --hm-a: #f2b93b; --hm-b: #e3a128; --hm-pendar: #ffd36b;
  border-color: color-mix(in srgb, var(--hm-a) 60%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--hm-a) 20%, var(--paper)), color-mix(in srgb, var(--hm-b) 9%, var(--paper)));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--hm-a) 16%, transparent); }
/* 0.13.19: biru (> 7 hari) → kuning (3–7) → oranye (1–2) → merah (hari-H / ≤ 3 jam). */
.hmk-jauh { --hm-a: #6aa5ff; --hm-b: #3b7be0; --hm-pendar: #9cc3ff; }
.hmk-mendekat { --hm-a: #f2b93b; --hm-b: #e3a128; --hm-pendar: #ffd36b; }
.hmk-dekat { --hm-a: #f59a3e; --hm-b: #ea7a22; --hm-pendar: #ffae66; }
.hmk-genting { --hm-a: #ec4c4c; --hm-b: #d33434; --hm-pendar: #ff6b6b; animation: hm-genting 1.8s ease-in-out infinite; }
.hmk.tiba { --hm-a: #ec4c4c; --hm-b: #d33434; background: linear-gradient(135deg, color-mix(in srgb, #ffd36b 40%, var(--paper)), color-mix(in srgb, var(--hm-a) 18%, var(--paper))); }
@keyframes hm-genting { 0%, 100% { box-shadow: 0 4px 14px color-mix(in srgb, var(--hm-a) 22%, transparent); } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--hm-a) 25%, transparent), 0 6px 18px color-mix(in srgb, var(--hm-a) 30%, transparent); } }
.hmk-ket { margin: 2px 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.hmk-ket b { font-size: 15px; font-weight: 700; color: color-mix(in srgb, var(--hm-b) 78%, var(--ink)); }
.hmk-ket span { font-size: 12.5px; color: var(--ink-3); }
.hmk-tgl { display: none; }
.hmk-sisa, .hmk.tiba .hmk-sisa { color: color-mix(in srgb, var(--hm-b) 80%, var(--ink)); }
.hmk-bar { background: color-mix(in srgb, var(--hm-a) 18%, transparent); }
.hmk-bar i { background: linear-gradient(90deg, var(--hm-a), var(--hm-b)); }
/* Angka flip besar (halaman Hitung mundur) */
.hmk .flip-baris { grid-template-columns: repeat(4, minmax(0, 58px)); gap: 7px; margin-top: 8px; }
.hmk .flip-k { height: 54px; border-radius: 12px; background: linear-gradient(180deg, var(--hm-a) 0 50%, var(--hm-b) 50% 100%);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--hm-b) 35%, transparent); }
.hmk .flip-k span { font-size: 29px; }
.hmk .flip small { font-size: 10px; color: color-mix(in srgb, var(--hm-b) 70%, var(--ink)); }
.hmk-pasir { width: 78px; height: 102px; }
.hmk-nama { font-size: 16px; }
/* Rencana: tetap ringkas, tapi angka lebih besar dari sebelumnya */
.rk-hm .hmk .flip-baris { grid-template-columns: repeat(4, minmax(0, 44px)); gap: 5px; margin-top: 6px; }
.rk-hm .hmk .flip-k { height: 38px; border-radius: 9px; }
.rk-hm .hmk .flip-k span { font-size: 21px; }
.rk-hm .hmk .flip small { font-size: 8.5px; }
.rk-hm .hmk-pasir { width: 56px; height: 74px; }
.rk-hm .hmk-ket b { font-size: 14px; }
@media (max-width: 380px) { .hmk .flip-baris { grid-template-columns: repeat(4, minmax(0, 50px)); gap: 5px; } .hmk .flip-k span { font-size: 25px; } .hmk-pasir { width: 64px; height: 84px; } }

/* Jam pasir hidup: arus pasir mengalir, butiran jatuh bergantian, percikan di puncak gundukan,
   cekungan di permukaan atas bergerak pelan, kilau kaca berdenyut, dan pendar sesuai warna kartu. */
.ps-pendar { animation: ps-pendar 2.8s ease-in-out infinite; }
.hmk-jauh .ps-pendar { opacity: .5; }
.pasir-adegan.selesai .ps-pendar { animation: none; opacity: 1; }
.ps-arus { animation: ps-arus .35s linear infinite; }
.ps-butir2 { fill: #f7cb5a; opacity: 0; animation: ps-jatuh2 .85s cubic-bezier(.5, 0, 1, 1) infinite; animation-delay: var(--t); }
.ps-percik { fill: #ffd36b; opacity: 0; animation: ps-percik 1.1s ease-out infinite; }
.ps-percik.p2 { animation-name: ps-percik2; animation-delay: .55s; }
.ps-kilau { animation: ps-kilau 3.2s ease-in-out infinite; }
.pasir-adegan.jalan .ps-atas { animation: ps-turun 2.4s ease-in-out infinite alternate; }
@keyframes ps-pendar { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes ps-arus { to { stroke-dashoffset: -14; } }
@keyframes ps-jatuh2 { 0% { opacity: 0; transform: translateY(0); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translateY(var(--j)); } }
@keyframes ps-percik { 0% { opacity: 0; transform: translate(0, 0); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(7px, -6px); } }
@keyframes ps-percik2 { 0% { opacity: 0; transform: translate(0, 0); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-7px, -5px); } }
@keyframes ps-kilau { 0%, 100% { stroke-opacity: .45; } 50% { stroke-opacity: .95; } }
@media (prefers-reduced-motion: reduce) { .ps-pendar, .ps-arus, .ps-butir2, .ps-percik, .ps-kilau, .hmk-genting, .pasir-adegan.jalan .ps-atas { animation: none; } .ps-butir2, .ps-percik { display: none; } }.hmk-pasir svg { stroke: none; }
.hmk-aksi { right: 96px; }
.hmk:has(.hmk-aksi) .hmk-nama { padding-right: 70px; }

/* 0.11.3: kartu ajakan pasang disorot dengan biru merek (bukan kuning/oranye: itu warna hitung mundur):
   tepi biru, tombol Pasang terisi, denyut pelan 3x. */
.kartu-pasang { border: 2px solid color-mix(in srgb, var(--merek) 65%, transparent);
  background: linear-gradient(135deg, var(--biru-l), var(--paper) 70%);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--merek) 18%, transparent); animation: pasang-denyut 2.4s ease-in-out 3; }
.kartu-pasang [data-aksi="pasang"] { background: var(--merek); color: var(--di-merek); box-shadow: 0 3px 8px color-mix(in srgb, var(--merek) 35%, transparent); }
.kartu-pasang .ikon-bulat { background: #fff; color: var(--merek); box-shadow: 0 2px 6px color-mix(in srgb, var(--merek) 25%, transparent); }
@keyframes pasang-denyut { 0%, 100% { box-shadow: 0 6px 18px color-mix(in srgb, var(--merek) 18%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--merek) 22%, transparent), 0 8px 22px color-mix(in srgb, var(--merek) 26%, transparent); } }
@media (prefers-reduced-motion: reduce) { .kartu-pasang { animation: none; } }
/* 0.11.4: laptop berlayar pendek (mis. 1366x768): Jadwal sholat dan Tentang tertutup tombol Fokus yang menempel.
   Rapatkan baris sidebar supaya semuanya muat tanpa gulir. */
@media (min-width: 900px) and (max-height: 860px) {
  .sidebar .side-btn { min-height: 34px; }
  .sidebar .side-label { margin-top: 8px; margin-bottom: 2px; }
  .sidebar-tambah { min-height: 42px; }
}

/* --- 0.12: Notifikasi ------------------------------------------------------------------
   Pengaturan › Notifikasi: baris bersakelar, pilihan jam kecil di bawah keterangan, daftar "Hari ini". */
.nt-baris { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--rule); }
.nt-baris:last-child { border-bottom: 0; }
.nt-baris .baris-teks { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-weight: 600; }
.nt-baris .baris-teks small { font-weight: 400; }
.nt-anak { padding-left: calc(var(--sp-4) + 40px + var(--sp-3)); background: var(--soft, var(--kanvas)); }
.nt-anak .baris-teks { font-weight: 500; }
.nt-pilih { width: auto; max-width: 100%; min-height: 0; height: 34px; padding: 0 30px 0 10px; margin-top: 6px; font-size: 13px; font-weight: 500; align-self: flex-start; }
.nt-pilih:disabled { opacity: .5; }
.nt-utama { margin-bottom: var(--sp-2); }
.nt-mati .nt-kelompok { opacity: .45; pointer-events: none; }
.nt-ajak { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-3); border: 2px solid color-mix(in srgb, var(--merek) 55%, transparent); background: linear-gradient(135deg, var(--biru-l), var(--paper) 75%); }
.nt-ajak > div { flex: 1; min-width: 0; }
.nt-ajak b { display: block; }
.nt-ajak .meta { margin: 2px 0 0; }
.nt-hari-baris { display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-4); border-bottom: 1px solid var(--rule); }
.nt-hari-baris:last-child { border-bottom: 0; }
.nt-hari-baris .baris-teks { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
.nt-hari-jam { width: 44px; flex: none; font-variant-numeric: tabular-nums; font-size: 13.5px; color: var(--ink-2); }
.nt-redup .baris-teks, .nt-redup .nt-hari-jam { color: var(--ink-3); }
.nt-pil { flex: none; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: var(--r-pil); white-space: nowrap; }
.nt-pil.l-abu { background: var(--kanvas); color: var(--ink-3); }
.nt-privasi { margin-top: var(--sp-4); font-size: 12.5px; line-height: 1.5; }
@media (max-width: 380px) { .nt-anak { padding-left: var(--sp-4); } }

/* Form habit: "Ingatkan aku" di bawah pilihan jam / sholat. */
.kapan-ingat { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); padding: 10px 12px; border-radius: 14px; background: var(--biru-l); color: var(--biru-t); }
.kapan-ingat > svg { width: 20px; height: 20px; flex: none; }
.kapan-ingat .baris-teks { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; display: flex; flex-direction: column; }
.kapan-ingat .nt-pilih { margin-top: 0; align-self: center; }

/* Onboarding: layar izin. */
.onb-izin-daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.onb-izin-daftar li { display: flex; align-items: center; gap: var(--sp-3); }
.onb-izin-daftar li > span:last-child { display: flex; flex-direction: column; line-height: 1.35; }
.onb-izin-daftar small { color: var(--ink-3); font-size: 13px; }
.kartu-notif [data-aksi="notif-izin"] { background: var(--merek); color: var(--di-merek); box-shadow: 0 3px 8px color-mix(in srgb, var(--merek) 35%, transparent); }
/* Layar izin onboarding: dua tombol saja (tanpa Kembali), yang utama melebar. */
.onb-kaki:has([data-izin]) [data-izin] { flex: 1; }

/* 0.12.1: Buka hari / Tutup hari menjelaskan maksudnya di langkah pertama. */
.pengantar-langkah { margin: -4px 0 var(--sp-3); }
.pengantar-tutup { margin: 0 0 var(--sp-3); padding: 12px 14px; border-radius: 14px; background: var(--lilac-l); color: var(--lilac-t); font-size: 14px; line-height: 1.5; }
.pengantar-tutup b { color: inherit; }

/* 0.12.2: bendera di bukit dibuat glossy seperti lencana level, dengan tepi putih tipis dan pendar halus,
   supaya tidak menyatu dengan langit (Platinum di langit pagi terlihat pudar). Tipis, tidak menyilaukan. */
/* Revisi: kilap glossy hanya untuk Emas, Platinum, Berlian (Biru tetap seperti awal). Semua bendera di kartu
   sapaan diberi pendar luar berwarna bendera itu sendiri, tipis dan lembut, bukan garis putih. */
.bd-glossy { display: none; }
.sapa-bendera:is(.tier-1, .tier-2, .tier-3) .bd-glossy { display: inline; }
.sapa-bendera { --pendar: rgba(91, 155, 240, .75); --pendar-2: rgba(91, 155, 240, .35); }
.sapa-bendera.tier-1 { --pendar: rgba(246, 200, 80, .8); --pendar-2: rgba(240, 180, 40, .4); }
.sapa-bendera.tier-2 { --pendar: rgba(245, 238, 255, .85); --pendar-2: rgba(200, 215, 245, .45); }
.sapa-bendera.tier-3 { --pendar: rgba(200, 180, 255, .85); --pendar-2: rgba(110, 200, 255, .5); }
.sapa-bendera svg { filter: drop-shadow(0 0 2px var(--pendar)) drop-shadow(0 0 6px var(--pendar-2)); }

/* Tekstur premium: Platinum = krom + kulit mutiara (M2), Berlian = faset lembut + pita pelangi pastel (G2). */
.bd-plat, .bd-ber { display: none; }
.sapa-bendera.tier-2 .bd-plat, .sapa-bendera.tier-3 .bd-ber { display: inline; }
@keyframes bd-kelip { 0%, 100% { opacity: 0; transform: scale(.3); } 45%, 55% { opacity: 1; transform: scale(1); } }
@keyframes bd-denyut { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
.bd-bintang { transform-box: fill-box; transform-origin: center; animation: bd-kelip 2.6s ease-in-out infinite; }
.bd-pantul { animation: bd-denyut 3.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .bd-bintang, .bd-pantul { animation: none; } .bd-bintang { opacity: .9; } }

/* 0.13.1: hasil audit. Keterangan "sampai kemarin" di persen habit, jam habit di agenda,
   rentang hari kosong di Rencana, dan daftar streak di Rapor (pengganti untaian). */
.ph-ringkas span small { display: block; font-size: 10.5px; opacity: .8; }
.stat .stat-sub { display: block; font-size: 11px; opacity: .75; }
.ag-jam-kecil { font-size: .85em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rp-streak .daftar { margin: 0; padding: 0; list-style: none; }
.rp-streak-baris { display: flex; align-items: center; gap: var(--sp-3); padding: 10px 0; border-top: 1px solid var(--rule); }
.rp-streak-baris:first-child { border-top: 0; }
.rp-streak-baris .baris-teks { flex: 1; min-width: 0; }
.rp-streak-baris .baris-teks small { display: block; }
/* Laptop: dua kolom, jadi 12 habit tidak jadi daftar panjang ke bawah. */
@media (min-width: 900px) {
  .rp-streak .daftar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-6, 24px); }
  .rp-streak-baris:nth-child(2) { border-top: 0; }
}
/* 0.13.9: pita deadline mendekat di Hari Ini (pink, beda dari kuning hitung mundur). */
.pita-tenggat { display: flex; align-items: flex-start; gap: var(--sp-3); margin: 0 0 var(--sp-3); padding: 10px 12px 10px 14px; border-radius: var(--r-kartu); background: var(--pink-l); color: var(--pink-t); }
details.pita-tenggat { display: block; }
.pita-tenggat summary { display: flex; align-items: center; gap: var(--sp-3); list-style: none; cursor: pointer; min-height: 36px; }
.pita-tenggat summary::-webkit-details-marker { display: none; }
.pita-tenggat summary::after { content: '›'; margin-left: auto; font-size: 20px; line-height: 1; transition: transform var(--durasi); }
.pita-tenggat[open] summary::after { transform: rotate(90deg); }
.tg-ikon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-top: 3px; border-radius: 10px; background: color-mix(in srgb, var(--pink-t) 14%, transparent); }
.pita-tenggat summary .tg-ikon { margin-top: 0; }
/* 0.13.19: pita deadline ikut warna kedekatan, sama dengan hitung mundur (deadline terdekat yang menentukan). */
.pita-tenggat.tg-jauh { --tg: #3b7be0; } .pita-tenggat.tg-mendekat { --tg: #c98a10; } .pita-tenggat.tg-dekat { --tg: #e0701c; } .pita-tenggat.tg-genting { --tg: #d33434; }
.pita-tenggat[class*="tg-"] { background: color-mix(in srgb, var(--tg) 13%, var(--paper)); color: color-mix(in srgb, var(--tg) 85%, var(--ink)); }
.pita-tenggat[class*="tg-"] .tg-ikon { background: color-mix(in srgb, var(--tg) 18%, transparent); }
.tg-ikon svg { width: 17px; height: 17px; }
.pita-tenggat ul { flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; }
details.pita-tenggat ul { margin-top: var(--sp-2); padding-left: 42px; }
.tg-baris { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; }
details.pita-tenggat .tg-baris + .tg-baris { border-top: 1px solid color-mix(in srgb, var(--pink-t) 18%, transparent); }
.tg-nama { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; font: inherit; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; }
.tg-nama b { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-nama small { font-size: 12.5px; color: var(--pink-t); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-kini { flex: none; background: var(--paper); color: var(--pink-t); }
.kartu-opsional + .pita-tenggat { margin-top: var(--sp-3); }
.pita-tenggat[open] summary small { display: none; }

/* 0.13.10: tugas biru, habit hijau di mana-mana: tab bawah, tombol habit, kata di tur. */
.kata-tugas { color: var(--biru-t); }
.kata-habit { color: var(--mint-t); }
/* 0.13.11: warna jenis ada di latar halaman, bukan di bar bawah. Bar bawah hanya mewarnai ikon tab yang aktif. */
.nav-btn[data-layar="rencana"][aria-current="page"] { color: var(--biru-t); }
.nav-btn[data-layar="habit"][aria-current="page"] { color: var(--mint-t); }
html[data-halaman="rencana"] { --latar-hal: color-mix(in srgb, var(--biru-l) 60%, var(--kanvas)); }
html[data-halaman="rencana"] body { background: var(--latar-hal); }
html[data-halaman="habit"] body { background: color-mix(in srgb, var(--mint-l) 60%, var(--kanvas)); }
.side-btn[data-layar="rencana"][aria-current="page"] { background: var(--biru-l); color: var(--biru-t); }
.side-btn[data-layar="habit"][aria-current="page"] { background: var(--mint-l); color: var(--mint-t); }
:root { --habit-tbl: #187a52; }
[data-aksi="tambah-habit"], [data-aksi="ubah-habit"] { background: var(--mint-l); color: var(--mint-t); border-color: color-mix(in srgb, var(--mint-t) 30%, transparent); }
.sheet-habit .tbl-utama, .sheet:has([data-form-tambah][data-jenis="habit"]) .kaki-tambah .tbl-utama { background: var(--habit-tbl); color: #fff; box-shadow: 0 6px 16px rgba(24, 122, 82, .25); }
.sheet:has([data-form-tambah][data-jenis="habit"]) .kaki-tambah .tbl-lembut { background: var(--mint-l); color: var(--mint-t); }

/* 0.13.10: tur lanjut sendiri sesudah berhasil; bar tipis menyusut selama menunggu. */
.tk-otomatis { height: 3px; margin: 2px 0 var(--sp-2); border-radius: 2px; background: var(--rule); overflow: hidden; }
.tk-otomatis i { display: block; height: 100%; background: var(--mint-isi); transform-origin: left; animation: tk-susut linear forwards; }
@keyframes tk-susut { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* Lembar habit (Tambah mode habit, Ubah habit): warna merek ditukar hijau, jadi chip terpilih dan tombolnya ikut hijau. */
.sheet-habit, .sheet:has([data-form-tambah][data-jenis="habit"]) { --merek: var(--habit-tbl); --merek-teks: var(--mint-t); --merek-latar: var(--mint-l); }
.papan-tautan { color: var(--mint-t); }

/* 0.13.11: Levelmu: yang terkunci bisa diketuk. Gembok bergetar, gelembung "N XP lagi" muncul sebentar. */
[data-kunci] { cursor: pointer; }
.kunci-getar { animation: kunci-getar .5s ease; }
@keyframes kunci-getar { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-14deg); } 30% { transform: rotate(12deg); } 45% { transform: rotate(-9deg); } 60% { transform: rotate(6deg); } 75% { transform: rotate(-3deg); } }
.kunci-gelembung { position: fixed; z-index: 90; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100vw - 16px); padding: 7px 12px; border-radius: var(--r-pil);
  background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 600; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); pointer-events: none; animation: gelembung-masuk .2s ease; transition: opacity .3s; }
.kunci-gelembung svg { width: 15px; height: 15px; }
.kunci-gelembung.pudar { opacity: 0; }
@keyframes gelembung-masuk { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .kunci-getar, .kunci-gelembung { animation: none; } }
/* 0.13.24: peti misi. Titik dan peti di SVG bergoyang di porosnya sendiri. Peti penuh: sinar emas berputar + peti melompat kecil. */
.mj-jalur { overflow: visible; }
.mj-jalur .kunci-getar, .mh-peti .kunci-getar { transform-box: fill-box; transform-origin: 50% 80%; }
.mj-peti-ketuk, .mh-peti-ketuk { cursor: pointer; }
.mh-peti-ketuk { display: grid; flex: none; margin: -8px -4px -8px -8px; }
.mh-peti svg { width: 50px; height: 42px; overflow: visible; }
.peti-sinar path, .peti-sinar circle { stroke: none; }
/* Peti belum penuh: warna kayu dan emas diredam supaya peti penuh terasa "menyala". */
.peti-redam { filter: saturate(.45) brightness(1.06); opacity: .88; }
.peti-celah { animation: peti-denyut 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.peti-sinar-putar, .peti-sinar-balik { transform-box: fill-box; transform-origin: center; filter: blur(.25px); }
.peti-sinar-putar { animation: peti-putar 14s linear infinite; }
.peti-sinar-balik { opacity: .9; animation: peti-putar 10s linear infinite reverse; }
/* Peti penuh dibuat lembut (sedikit transparan, kontras turun) supaya sinar dan peti seimbang, bukan peti yang mendominasi. */
.peti-penuh { opacity: .82; filter: saturate(.85) contrast(.9) brightness(1.06); }
.peti-cahaya { animation: peti-denyut 2.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.peti-kilau { fill: #fffbe8; transform-box: fill-box; transform-origin: center; animation: peti-kedip 2.4s ease-in-out infinite; animation-delay: calc(var(--k) * .6s); }
@keyframes peti-kedip { 0%, 100% { opacity: 0; transform: scale(.3); } 45% { opacity: 1; transform: scale(1); } 70% { opacity: 0; transform: scale(.5); } }
.mj-peti-ketuk .mj-peti-buka, .mh-peti.siap .mj-peti { transform-box: fill-box; transform-origin: 50% 100%; animation: peti-lompat 1.6s ease-in-out infinite; }
@keyframes peti-putar { to { transform: rotate(360deg); } }
@keyframes peti-denyut { 0%, 100% { transform: scale(.85); opacity: .55; } 50% { transform: scale(1.08); opacity: .9; } }
@keyframes peti-lompat { 0%, 60%, 100% { transform: translateY(0) rotate(0); } 70% { transform: translateY(-3px) rotate(-4deg); } 80% { transform: translateY(-3px) rotate(4deg); } 90% { transform: translateY(0) rotate(0); } }
@media (prefers-reduced-motion: reduce) { .peti-sinar-putar, .peti-sinar-balik, .peti-kilau, .peti-cahaya, .mj-peti-ketuk .mj-peti-buka, .mh-peti.siap .mj-peti { animation: none; } }

/* 0.13.11: tugas lampau yang belum dicentang tidak hangus; di agenda tampil redup dengan keterangan "ikut ke hari ini". */
.ag-baris.ag-pindah .ag-teks { color: var(--ink-3); }
.ag-baris.ag-pindah small { color: var(--peach-t); }

/* 0.13.12: judul lembar ikut jenisnya. Tambah tugas biru, Tambah habit / Habit baru / Ubah habit hijau. */
.sheet:has([data-form-tambah][data-jenis="tugas"]) .sheet-judul { color: var(--biru-t); }
.sheet:has([data-form-tambah][data-jenis="habit"]) .sheet-judul, .sheet-habit .sheet-judul { color: var(--mint-t); }
/* Tombol + di bar tulis (HP) dan Tambah di sidebar (laptop) hijau saat di tab Habit. */
html[data-halaman="habit"] .tulis-bar b { background: var(--habit-tbl); }
html[data-halaman="habit"] .sidebar-tambah { background: var(--habit-tbl); color: #fff; }

/* 0.13.12: lembar Hitung mundur baru: kuning seperti kartunya, dengan pratinjau jam pasir dan contoh nama. */
:root { --hitung-tbl: #b8730f; }  /* oranye tua: teks putih tetap terbaca (4,1:1) */
.sheet-hitung { --merek: var(--hitung-tbl); --merek-teks: var(--kuning-t); --merek-latar: var(--kuning-l); }
.sheet-hitung .sheet-judul { color: var(--kuning-t); }
.hmb-pratinjau { position: relative; overflow: hidden; display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); padding: 14px 16px; border-radius: var(--r-kartu);
  background: linear-gradient(135deg, var(--kuning-l), color-mix(in srgb, var(--kuning-l) 55%, var(--peach-l))); border: 1px solid color-mix(in srgb, #e0a82e 35%, transparent); }
.hmb-pasir { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--paper); color: var(--kuning-t); box-shadow: 0 3px 10px rgba(217, 143, 30, .2); }
.hmb-pasir svg { width: 24px; height: 24px; animation: hmb-putar 3s ease-in-out infinite; }
@keyframes hmb-putar { 0%, 70% { transform: rotate(0); } 85%, 100% { transform: rotate(180deg); } }
.hmb-teks { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hmb-teks b { font-size: 16px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hmb-teks small { font-size: 13px; color: var(--kuning-t); font-weight: 600; }
.hmb-angka { position: relative; z-index: 1; flex: none; min-width: 52px; padding: 4px 10px; border-radius: 12px; text-align: center; font-size: 28px; font-weight: 800; line-height: 1.2;
  font-variant-numeric: tabular-nums; color: #3a2a00; background: linear-gradient(180deg, #f6d97a 0 50%, #e9c25a 50% 100%); box-shadow: 0 3px 8px rgba(217, 143, 30, .3); }
.hmb-contoh { display: flex; flex-wrap: wrap; gap: 6px; margin: calc(var(--sp-2) * -1) 0 var(--sp-1); }
.hmb-contoh .chip { min-height: 32px; padding: 0 12px; font-size: 13px; background: var(--kuning-l); color: var(--kuning-t); border-color: transparent; }
.tbl-hitung { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--hitung-tbl); color: #fff; box-shadow: 0 6px 16px rgba(217, 143, 30, .35); }
.tbl-hitung svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .hmb-pasir svg { animation: none; } }

/* 0.13.13: tab Tugas: baris tugas bisa digeser ke kiri. Isi baris berlatar sama dengan halaman supaya label tertutup. */
.ag-isi li.geser { position: relative; }
.ag-isi .geser-isi { background: var(--latar-hal, var(--kanvas)); }
.geser[data-geser-label]::before { content: attr(data-geser-label); }@media (min-width: 900px) { .rk-agenda .geser-isi { background: var(--paper); } }

/* 0.13.13: Tugas hari ini (gabungan). Tugas penting bernomor 1-2-3 dengan latar kuning lembut di nomornya. */
.tg-nomor { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--kuning-l); color: var(--kuning-t); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tg-nomor::before { content: '★'; font-size: 0; }
.tg-penting .baris-teks { font-weight: 500; }
.tg-berhasil { display: flex; align-items: center; gap: 8px; margin: 2px 0 var(--sp-2); padding: 8px 12px; border-radius: 12px; background: var(--mint-l); color: var(--mint-t); font-size: 13.5px; }
.tg-berhasil svg { width: 18px; height: 18px; flex: none; stroke-width: 2.4; }
.tg-berhasil b { font-weight: 700; }
/* 0.13.14: rata kiri dengan daftar tugas (dulu menjorok oleh padding tombol teks). */
.papan-tautan.tbl-teks { padding-inline: 0; }
.tg-ket { margin-top: 2px; }

/* 0.13.13: titik misi bisa diketuk (lingkaran sentuh tak terlihat lebih besar dari titiknya). */
.mj-titik { cursor: pointer; }
.mj-sentuh { fill: transparent; }
.mj-titik:active .mj-node { transform-box: fill-box; transform-origin: center; transform: scale(.9); }
.mh-kartu[data-aksi] { cursor: pointer; }

/* 0.13.13: grafik Rapor minggu ini. */
.rp-grafik .kartu-kepala { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.gr-legenda { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); }
.gr-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 4px; }
.gr-legenda i.gr-tugas { background: var(--biru-500); }
.gr-legenda i.gr-habit { background: var(--mint-isi); }
.gr-legenda i.gr-sisa, .rp-donat i.gr-sisa { background: var(--rule-kuat); }

/* 0.13.19: Rapor analisa (analisa.js): batang, donat, tabel per habit, unduh PDF. */
.rp-periode { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin: var(--sp-3) 0; }
.rp-periode b { font-size: 15px; }
.rp-unduh { flex: none; }
.rg-svg { display: block; width: 100%; height: auto; margin-top: var(--sp-2); overflow: visible; }
/* Warna seri: gradasi batang (-stop), garis/busur (-garis), titik (-titik), angka (-t). */
.rg-tugas-stop { stop-color: var(--biru-500); }
.rg-habit-stop { stop-color: var(--mint-isi); }
.rg-tugas-garis { stroke: var(--biru-500); }
.rg-habit-garis { stroke: var(--mint-isi); }
.rg-tugas-titik { fill: var(--biru-500); }
.rg-habit-titik { fill: var(--mint-isi); }
.rg-tugas-t { fill: var(--biru-t); }
.rg-habit-t { fill: var(--mint-t); }
.rg-sisa { fill: var(--rule-kuat); }
.rg-svg .rg-batang { stroke: none; animation: rg-naik .7s calc(var(--i, 0) * 45ms) cubic-bezier(.2, .9, .25, 1.15) both; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes rg-naik { from { transform: scaleY(0); } }
.rg-svg .rg-luas { stroke: none; animation: rg-muncul .8s .35s both; }
.rg-svg .rg-garis { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; animation: rg-gambar 1.1s cubic-bezier(.4, 0, .2, 1) both; }
.rg-svg .rg-titik { stroke: var(--paper); stroke-width: 1.6; transform-box: fill-box; transform-origin: center; animation: rg-letup .35s calc(var(--i, 0) * 50ms + .3s) cubic-bezier(.3, 1.6, .5, 1) both; }
.rg-svg .rg-denyut { stroke: none; opacity: 0; transform-box: fill-box; transform-origin: center; animation: rg-denyut 2.2s 1.2s ease-out infinite; }
.rg-svg .rg-nilai { font-size: 10px; font-weight: 800; font-family: var(--font); animation: rg-muncul .3s calc(var(--i, 0) * 45ms + .5s) both; }
@keyframes rg-gambar { from { stroke-dashoffset: 1; } }
@keyframes rg-muncul { from { opacity: 0; } }
@keyframes rg-letup { from { opacity: 0; transform: scale(0); } }
@keyframes rg-denyut { 0% { opacity: .45; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(3.2); } }
.rg-dasar { stroke: var(--rule); stroke-width: 1; }
.rg-bantu { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 3 4; }
.rg-skala, .rg-label { font-size: 10px; fill: var(--ink-3); font-family: var(--font); }
.rg-label.rg-nanti { opacity: .45; }
.rg-svg .rg-label.rg-ini { fill: var(--ink); font-weight: 800; }
.rg-svg .rg-kosong-teks { font-size: 11px; fill: var(--ink-3); font-family: var(--font); }
/* Sorotan di bawah grafik. */
.rg-sorot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-3); }
.rg-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 999px; background: var(--soft); font-size: 12px; color: var(--ink-2); line-height: 1.3; }
.rg-chip b { color: var(--ink); font-weight: 700; }
.rg-chip .ikon, .rg-chip svg { width: 15px; height: 15px; flex: none; }
.rp-harian .rg-chip { background: var(--mint-l); }
.rp-harian .rg-chip svg { color: var(--mint-t); }
.rp-grafik2 .rg-chip { background: var(--biru-l); }
.rp-grafik2 .rg-chip svg { color: var(--biru-t); }
.stat .stat-beda { display: block; margin-top: 2px; font-size: 11px; font-weight: 700; opacity: .9; }
.stat .stat-beda.turun { opacity: .6; }
.rp-donat-baris { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.rp-donat { margin: 0; display: grid; justify-items: center; gap: 8px; text-align: center; }
.rg-donat { width: 100%; max-width: 132px; height: auto; }
/* Ikon app memakai stroke; teks grafik dan lingkaran donat tidak boleh ikut. */
.rg-svg text, .rg-donat text { stroke: none; font-weight: 500; }
.rg-donat circle { fill: none; }
.rg-donat .rg-tengah { font-weight: 800; }
.rg-donat .rg-jalur { stroke: var(--rule); }
.rg-donat .rg-busur { animation: rg-putar 1.1s .1s cubic-bezier(.3, .8, .3, 1) both; }
@keyframes rg-putar { from { stroke-dasharray: 0 264; } }
.rg-tengah { font-size: 22px; font-weight: 800; fill: var(--ink); font-family: var(--font); }
.rg-tengah-sub { font-size: 11px; fill: var(--ink-3); font-family: var(--font); }
.rp-donat figcaption { display: grid; gap: 2px; font-size: 12.5px; color: var(--ink-2); }
.rp-donat figcaption b { font-size: 14px; color: var(--ink); }
.rp-donat figcaption span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.rp-donat figcaption i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.rp-donat i.gr-tugas { background: var(--biru-500); } .rp-donat i.gr-habit { background: var(--mint-isi); }
.rp-tabel-baris { display: grid; grid-template-columns: minmax(0, 1fr) 72px 40px; align-items: center; gap: var(--sp-2); padding: 8px 0; border-bottom: 1px solid var(--rule); }
.rp-tabel-baris:last-child { border-bottom: 0; }
.rp-tabel-bar { height: 7px; border-radius: 4px; background: var(--rule); overflow: hidden; }
.rp-tabel-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--mint-isi) 55%, var(--paper)), var(--mint-isi)); transform-origin: left; animation: rg-lebar .8s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes rg-lebar { from { transform: scaleX(0); } }
.rp-tabel-persen { text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .rg-svg *, .rg-donat *, .rp-tabel-bar i { animation: none !important; } .rg-svg .rg-denyut { display: none; } }
.gr-svg { display: block; width: 100%; height: auto; margin-top: var(--sp-2); }
/* Isian memudar ke warna kartu (tanpa tembus pandang); tumpang-tindih tugas+habit jadi aqua sendiri. */
:root { --gr-temu: #14b8c8; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="terang"]) { --gr-temu: #2fd8e8; } }
:root[data-tema="gelap"] { --gr-temu: #2fd8e8; }
.gr-stop-tugas { stop-color: color-mix(in srgb, var(--biru-500) 30%, var(--paper)); }
.gr-stop-habit { stop-color: color-mix(in srgb, var(--mint-isi) 32%, var(--paper)); }
.gr-stop-temu { stop-color: color-mix(in srgb, var(--gr-temu) 40%, var(--paper)); }
.gr-stop-dasar { stop-color: var(--paper); }
.gr-svg .gr-luas { stroke: none; }
.gr-svg .gr-isian { transform-box: view-box; transform-origin: 50% 82.7%; animation: gr-naik .8s .15s cubic-bezier(.2, .8, .2, 1) both; }
.gr-svg .gr-garis { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: gr-gambar 1s cubic-bezier(.4, 0, .2, 1) both; }
.gr-svg .gr-garis.gr-tugas { stroke: var(--biru-500); }
.gr-svg .gr-garis.gr-habit { stroke: var(--mint-isi); }
.gr-svg .gr-titik { stroke: var(--paper); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: gr-letup .35s calc(.12s * var(--i) + .2s) cubic-bezier(.3, 1.6, .5, 1) both; }
.gr-svg .gr-titik.gr-tugas { fill: var(--biru-500); }
.gr-svg .gr-titik.gr-habit { fill: var(--mint-isi); }
.gr-svg .gr-ujung { stroke-width: 2.5; }
.gr-dasar { stroke: var(--rule); stroke-width: 1; }
.gr-bantu { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 3 4; }
.gr-skala { font-size: 9.5px; fill: var(--ink-3); font-family: var(--font); }
.gr-nilai { font-size: 11px; font-weight: 800; font-family: var(--font); animation: gr-muncul .3s 1s both; }
.gr-nilai-tugas { fill: var(--biru-t); }
.gr-nilai-habit { fill: var(--mint-t); }
.gr-hari { font-size: 11px; fill: var(--ink-3); font-family: var(--font); }
.gr-hari.gr-ini { fill: var(--biru-t); font-weight: 700; }
.gr-hari.gr-nanti { opacity: .5; }
.gr-svg text { stroke: none; }
@keyframes gr-gambar { from { stroke-dashoffset: 1; } }
@keyframes gr-naik { from { opacity: 0; transform: scaleY(.2); } }
@keyframes gr-letup { from { opacity: 0; transform: scale(0); } }
@keyframes gr-muncul { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gr-svg * { animation: none !important; } }
.tg-daftar .meta svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }
.tg-daftar .baris-tombol { gap: var(--sp-3); }

/* 0.13.26: koleksi perahu Fokus di Levelmu (kartu memakai gaya sampul) + pilihan bendera perahu. */
.pk-gambar > svg { width: 100%; height: 100%; display: block; }
.lvg .sp-kartu.kunci .pk-gambar > svg { filter: grayscale(.8) brightness(.45) blur(1px); }
.pk-apung { transform-box: fill-box; transform-origin: 50% 90%; animation: pg-apung 3.2s ease-in-out infinite; }
.sp-kartu.kunci .pk-apung { animation: none; }
.pk-bendera { display: grid; gap: 8px; margin-top: var(--sp-3); }
.pk-bendera > span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lvg-redup); }
.pk-bendera > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pk-bd { display: grid; justify-items: center; gap: 2px; padding: 8px 4px 7px; border-radius: 14px; border: 1.5px solid var(--lvg-garis); background: var(--lvg-kartu); color: var(--lvg-teks); }
.pk-bd .bendera-tingkat { width: 34px; height: 34px; display: block; }
.pk-bd .bendera-tingkat svg { width: 100%; height: 100%; }
.pk-bd small { font-size: 11px; }
.pk-bd.aktif { border-color: var(--lvg-emas); box-shadow: 0 0 0 2px color-mix(in srgb, var(--lvg-emas) 30%, transparent); }
.pk-bd.aktif small { color: var(--lvg-emas); font-weight: 700; }
.pk-bd.kunci { opacity: .75; }
@media (prefers-reduced-motion: reduce) { .pk-apung { animation: none; } }
/* ==========================================================================
   0.13.28: atur urutan (seret), batas habit, pengingat lebih sering, Rute ala Levelmu
   ========================================================================== */
/* Seret: baris terangkat saat ditahan, ikut jari saat diseret; baris lain bergeser memberi tempat. */
[data-urut-id] { transition: transform .18s ease; }
[data-urut-id].diangkat { position: relative; z-index: 3; }
/* Bubble seret: lapisan di belakang baris, keluar 12px di kiri saja (teks tidak menempel di garis) dan tipis di
   atas-bawah, supaya bubblenya tidak kebesaran. Ukuran baris tetap, jadi baris lain tidak ikut bergeser. */
[data-urut-id].diseret { transition: none; z-index: 5; isolation: isolate; scale: 1.02; overflow: visible; }
/* Habit: lingkaran centang ada tepat di ujung kanan baris, jadi bubble-nya juga keluar 12px di kanan. */
.hb-grup > [data-urut-grup^="habit-"].diseret::before { right: -12px; }
/* Baris yang diseret juga tidak bergaris bawah; garisnya mengganggu di dalam bubble. */
[data-urut-id].diseret, [data-urut-id].diseret .geser-isi { border-bottom-color: transparent; background: transparent; }
/* Baris tugas (.geser) memakai ::before untuk label "Besok →": selama diseret label itu diganti bubble ini. */
[data-urut-id].diseret::before { content: ''; position: absolute; z-index: -1; inset: -2px 0 -2px -12px; border-radius: 14px; pointer-events: none;
  opacity: 1; transform: none; transition: none;
  background: var(--paper); box-shadow: 0 0 0 2px color-mix(in srgb, var(--merek) 35%, transparent), 0 10px 26px rgb(20 30 60 / .2); }
/* 0.13.33: menu baru muncul saat jari diangkat, jadi baris yang ditahan langsung tampak terangkat (bubble yang sama). */
[data-urut-id].diangkat { isolation: isolate; scale: 1.02; transition: scale .15s ease; overflow: visible; }
[data-urut-id].diangkat, [data-urut-id].diangkat .geser-isi { border-bottom-color: transparent; background: transparent; }
.hb-grup > [data-urut-grup^="habit-"].diangkat::before { right: -12px; }
[data-urut-id].diangkat::before { content: ''; position: absolute; z-index: -1; inset: -2px 0 -2px -12px; border-radius: 14px; pointer-events: none;
  opacity: 1; transform: none; transition: none;
  background: var(--paper); box-shadow: 0 0 0 2px color-mix(in srgb, var(--merek) 35%, transparent), 0 10px 26px rgb(20 30 60 / .2); }
html.sedang-seret, html.sedang-seret body { user-select: none; -webkit-user-select: none; overscroll-behavior: none; }
.aksi-petunjuk { margin-top: var(--sp-3); text-align: center; }

/* 0.13.34: Mulai dari awal. Bagian merah paling bawah di Pengaturan; lembar peringatan dengan tombol tahan merah. */
.bagian-bahaya .label { color: var(--pink-t); }
.bagian-bahaya .baris-menu .baris-teks { color: var(--pink-t); }
.sheet-mulai-awal .sheet-badan { display: flex; flex-direction: column; gap: var(--sp-3); }
.ma-peringatan p + p { margin-top: var(--sp-2); }
.ma-backup { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) 0; border-block: 1px solid var(--rule); }
.tbl-hapus-semua { background: var(--pink-t); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--pink-t) 30%, transparent); }
.tbl-hapus-semua i { background: rgb(60 0 20 / .35); }
.tbl-hapus-semua:disabled, .sheet-mulai-awal .tbl:disabled { opacity: .6; }

/* Batas habit: pesan + tombol. Di Pengaturan, pilihan Batas habit disorot sebentar. */
.kotak-batas { display: grid; gap: 8px; justify-items: start; }
.kotak-batas p { margin: 0; }
.sorot-sebentar { border-radius: 14px; animation: sorot-sebentar 3s ease-out; }
@keyframes sorot-sebentar { 0%, 60% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--senja-b) 45%, transparent); background: color-mix(in srgb, var(--senja-b) 10%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Tawaran pengingat lebih sering */
.pilih-kali { display: grid; gap: 8px; margin: var(--sp-3) 0; }
.pilih-kali-baris { display: grid; gap: 2px; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--rule); background: var(--paper); color: var(--ink); font: inherit; }
.pilih-kali-baris b { font-size: 15px; font-weight: 600; }
.pilih-kali-baris[aria-checked="true"] { border-color: var(--biru-500); background: color-mix(in srgb, var(--biru-500) 8%, var(--paper)); }

/* Fokus untuk ▾: isi daftar tidak tebal (lebih tenang dibaca). */
.fg-untuk-daftar .fg-untuk-pil { font-weight: 400; }
.fg-untuk-daftar .fg-untuk-pil[aria-pressed="true"] { font-weight: 500; }

/* Kotak "Menuju …" di layar Fokus: ungu senja seperti Levelmu, selalu tersorot. */
.pg-koleksi-tombol { background: linear-gradient(135deg, color-mix(in srgb, var(--senja-a) 22%, #fff), color-mix(in srgb, var(--senja-b) 24%, #fff)) !important;
  border: 1.5px solid color-mix(in srgb, var(--senja-b) 55%, transparent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--senja-b) 16%, transparent); }
.pg-koleksi-tombol .label { color: var(--senja-ungu-tua) !important; }
.pg-koleksi-tombol .pg-rute-lihat { color: var(--senja-ungu-tua); }

/* Panel Rute = gaya Levelmu (warna lvg). */
.fg-rute-kartu.lvg { display: grid; gap: 12px; align-content: start; padding: 16px 16px 20px; background: linear-gradient(180deg, var(--lvg-atas) 0, var(--lvg-bg) 320px); color: var(--lvg-teks); }
.fg-rute-kartu.lvg > * { min-width: 0; }
.fg-rute-kartu.lvg .pr-kepala { margin: 0; }
.fg-rute-kartu.lvg .pr-kepala b { color: var(--lvg-teks); }
.fg-rute-kartu.lvg .pr-tutup { background: var(--lvg-kartu); color: var(--lvg-teks); }
.fg-rute-kartu.lvg .lvg-judul { margin-top: 6px; }
.fg-rute-kartu.lvg .lvg-jalur-wadah { margin: 0 -16px; }
.fg-rute-kartu.lvg .lvg-jalur { --tier-a: var(--senja-a); --tier-b: var(--senja-b); }
.fg-rute-kartu.lvg .lvg-titik { width: 84px; }
.pr-lencana { width: 128px; height: 90px; border-radius: 22px; overflow: hidden; border: 4px solid #fff; box-shadow: 0 10px 22px rgb(60 30 90 / .28); }
.pr-lencana svg, .pr-hadiah-perahu svg, .pr-perahu-kecil svg { width: 100%; height: 100%; display: block; }
.pr-hadiah-perahu { background: #5ad3e8; }
.pr-perahu-kecil { background: #5ad3e8; }
.fg-rute-kartu.lvg .pr-daftar { padding: 4px 12px; border-radius: 16px; background: var(--lvg-kartu); border: 1px solid var(--lvg-garis); }
.fg-rute-kartu.lvg .pr-isi b { color: var(--lvg-teks); }
.fg-rute-kartu.lvg .pr-isi small { color: var(--lvg-redup); }
.fg-rute-kartu.lvg .pr-pulau.belum .pr-isi b { color: var(--lvg-redup); }
.fg-rute-kartu.lvg .pr-tanda { background: var(--lvg-node); color: var(--lvg-redup); }
.fg-rute-kartu.lvg .pr-pulau.sudah .pr-tanda { background: linear-gradient(135deg, var(--senja-a), var(--senja-b)); color: #fff; }
/* Pulau tujuan tetap disorot ungu (tidak hilang saat digulir). */
.fg-rute-kartu.lvg .pr-pulau.tuju { margin: 2px -8px; padding: 9px 8px; border-radius: 14px; background: color-mix(in srgb, var(--senja-b) 14%, var(--lvg-kartu)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--senja-b) 55%, transparent); }
.fg-rute-kartu.lvg .pr-pulau.tuju .pr-tanda { background: var(--senja-b); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--senja-b) 25%, transparent); }
.fg-rute-kartu.lvg .pr-pulau.tuju .pr-isi small { color: var(--senja-ungu-tua); font-weight: 600; }
.fg-rute-kartu.lvg .pr-kini { background: var(--lvg-emas-l); color: var(--lvg-emas); }
.fg-rute-kartu.lvg .pr-kini.pr-tuju { background: var(--senja-b); color: #fff; }
:root[data-tema="gelap"] .fg-rute-kartu.lvg .pr-pulau.tuju .pr-isi small, :root[data-tema="gelap"] .pg-koleksi-tombol .label { color: #cbb8ff !important; }

/* 0.13.28: pop-up di tengah layar (mis. tawaran pengingat lebih sering), warna senja seperti Levelmu. */
.sheet.sheet-tengah { left: 50%; right: auto; top: 50%; bottom: auto; width: min(400px, calc(100vw - 32px)); max-height: 88dvh; transform: translate(-50%, -50%);
  border-radius: 24px; padding-bottom: 0; overflow: hidden; animation: pop-muncul 260ms cubic-bezier(.2, .9, .3, 1.15); }
@keyframes pop-muncul { from { opacity: 0; transform: translate(-50%, -46%) scale(.94); } }
.pop-senja { background: linear-gradient(180deg, var(--lvg-atas) 0, var(--lvg-bg) 260px); color: var(--lvg-teks); }
.pop-senja .sheet-kepala, .pop-senja .sheet-gagang { display: none; }
.pop-senja .sheet-badan { padding: 14px 14px 4px; gap: 10px; }
/* Bagian atas (opsi B pilihan user, 17 Okt 2026): tanpa kotak warna; emoji di sebelah judul, angka tugas ungu. */
.pop-hero { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 10px 8px 2px; color: var(--lvg-teks); }
.pop-hero h3 { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.25; color: var(--lvg-teks); text-wrap: balance; }
/* Lonceng di sebelah judul (opsi B pilihan user, 17 Okt 2026): bulatan 38px bergradasi senja seperti tombol Simpan,
   lonceng garis putih 26px di dalamnya, sesekali bergoyang. */
.pop-emoji { width: 38px; height: 38px; margin-right: 10px; vertical-align: -9px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--senja-oranye), var(--senja-b)); box-shadow: 0 6px 14px color-mix(in srgb, var(--senja-b) 30%, transparent);
  transform-origin: 50% 10%; animation: pop-goyang 2.4s ease-in-out infinite; }
.pop-emoji svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.2; }
@keyframes pop-goyang { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(14deg); } 82% { transform: rotate(-12deg); } 88% { transform: rotate(8deg); } 94% { transform: rotate(-4deg); } }
.pop-hero p { margin: 0; font-size: 14px; color: var(--lvg-redup); }
.pop-hero b { color: var(--senja-ungu-tua); }
.pop-senja .pilih-kali { margin: 0; }
.pop-senja .pilih-kali-baris { background: var(--lvg-kartu); border-color: var(--lvg-garis); color: var(--lvg-teks); }
.pop-senja .pilih-kali-baris small { color: var(--lvg-redup); }
.pop-senja .pilih-kali-baris[aria-checked="true"] { border-color: var(--senja-b); background: color-mix(in srgb, var(--senja-b) 12%, var(--lvg-kartu)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--senja-b) 18%, transparent); }
.pop-senja .pilih-kali-baris[aria-checked="true"] b { color: var(--senja-ungu-tua); }
.pop-senja .meta { color: var(--lvg-redup); font-size: 12.5px; }
.pop-senja .sheet-kaki { border-top: 0; padding: 8px 14px 14px; }
.pop-senja .tbl-utama { background: linear-gradient(90deg, var(--senja-oranye), var(--senja-b)); border-color: transparent; color: #fff; }
.pop-senja .tbl-lembut { background: var(--lvg-kartu); color: var(--lvg-teks); border: 1px solid var(--lvg-garis); }
@media (prefers-reduced-motion: reduce) { .sheet.sheet-tengah, .pop-emoji { animation: none; } }
.pk-kini { margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 600; vertical-align: 2px; background: var(--lvg-node, #eee); color: var(--lvg-redup, #777); }

/* 0.13.35: semua pop-up bergaya Levelmu (permintaan user 18 Okt 2026). bukaSheet memberi kelas .senja ke setiap lembar:
   latar senja jingga ke krem, teks dan garis dari palet Levelmu, tombol utama bergradasi senja.
   Lembar yang sudah punya warna sendiri tetap: Buka/Tutup hari (hero pagi/malam), Levelmu, tombol tugas biru,
   habit hijau, hitung mundur kuning, hapus semua merah. */
.sheet.senja:not(.sheet-ritual, .lvg, .pop-senja) { background: linear-gradient(180deg, var(--lvg-atas) 0, var(--lvg-bg) 220px); color: var(--lvg-teks); }
:where(.senja) .sheet-gagang { background: var(--lvg-garis); }
:where(.senja) .sheet-tutup { color: var(--lvg-redup); }
:where(.senja) .sheet-judul { color: var(--lvg-teks); }
:where(.senja) .sheet-kaki { border-top-color: var(--lvg-garis); }
:where(.senja:not(.sheet-habit, .sheet-hitung, .sheet-mulai-awal):not(:has([data-form-tambah]))) .tbl-utama {
  background: linear-gradient(90deg, var(--senja-oranye), var(--senja-b)); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--senja-b) 28%, transparent); }
:where(.senja:not(.sheet-habit, .sheet-hitung, .sheet-mulai-awal):not(:has([data-form-tambah]))) .tbl-lembut { background: var(--lvg-kartu); color: var(--lvg-teks); border: 1px solid var(--lvg-garis); }