/* JadiTenang: satu kolom selebar HP, nuansa laut biru-mint, tulisan besar untuk pembaca 40+.
   Tampilan terang sengaja (identitas merek); mode malam khusus untuk fitur Susah Tidur. */
:root {
  --navy: #0E2A47;
  --ink: #172D43;
  --muted: #557086;
  --teal: #147B8C;
  --teal-2: #2FA3A8;
  --aqua: #75CCD0;
  --mint: #DDF1EA;
  --ice: #EAF5F8;
  --page: #F3F9FB;
  --card: #FFFFFF;
  --line: #D8E8EE;
  --peach: #FFF3E6;
  --rose: #FCEBEF;
  --lilac: #EEEDFA;
  --night: #0B1A2C;
  --night-2: #13263D;
  --night-ink: #DCE8F2;
  --danger: #B4473C;
  --font: "Plus Jakarta Sans", "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "Lora", Georgia, "Times New Roman", serif;
  --fs: 15px;
  --radius: 20px;
  color-scheme: light;
}
html { font-size: var(--fs); background: var(--page); }
html[data-text="besar"] { --fs: 17px; }
html[data-text="sangat-besar"] { --fs: 19px; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--font); line-height: 1.55; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--aqua); outline-offset: 2px; }
a { color: var(--teal); }

#app { max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; position: relative; background: var(--page); padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
.wrap { padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); }

/* Header ilustrasi */
.hero { position: relative; overflow: hidden; background: #F1F8FB; box-sizing: border-box; padding-bottom: 34px; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero .top { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; padding: calc(16px + env(safe-area-inset-top, 0px)) 18px 0; }
.hero .top img { width: 48px; height: 48px; border-radius: 14px; box-shadow: 0 6px 16px -6px rgba(14,42,71,.35); }
.brand b { display: block; font-size: 1.35rem; font-weight: 800; color: var(--navy); letter-spacing: -.02em; line-height: 1.05; }
.brand span { display: block; font-size: .62rem; font-weight: 700; letter-spacing: .18em; color: #4C6A7E; margin-top: 3px; }
.hero .greet { position: relative; z-index: 2; padding: 16px 18px 0; max-width: 330px; }
.hero h1 { margin: 0; font-size: 1.55rem; line-height: 1.18; font-weight: 800; color: var(--navy); letter-spacing: -.02em; text-wrap: balance; }
.hero p { margin: 6px 0 0; font-size: .92rem; line-height: 1.45; color: #3E5A6E; }
.icon-btn { margin-left: auto; width: 44px; height: 44px; border: 0; background: rgba(255,255,255,.55); border-radius: 14px; display: grid; place-items: center; color: var(--navy); }
/* Header versi malam (18.00 sampai 06.00) */
.hero.night { background: #0E2140; }
.hero.night h1, .hero.night .brand b { color: #FBF6E6; text-shadow: 0 1px 12px rgba(5,15,35,.55); }
.hero.night p { color: #CCD8EA; }
.hero.night .brand span { color: #AFC2DA; }
.hero.night .icon-btn { background: rgba(255,255,255,.14); color: #FBF6E6; }
.hero.night .top img { box-shadow: 0 6px 18px -6px rgba(0,0,0,.6); }

/* Bilah atas sederhana untuk halaman dalam */
.bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px; background: rgba(243,249,251,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.bar h2 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--navy); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.back { width: 44px; height: 44px; border: 0; background: transparent; border-radius: 12px; display: grid; place-items: center; color: var(--navy); }

/* Tipografi umum */
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 26px 0 12px; }
.section-title h3 { margin: 0; font-size: 1.2rem; font-weight: 800; color: var(--navy); letter-spacing: -.01em; }
.link { border: 0; background: none; color: var(--teal); font-weight: 700; font-size: .9rem; padding: 6px 0; }
.eyebrow { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #4F7E8E; }
.muted { color: var(--muted); }
.stack { display: grid; gap: 12px; }

/* Kartu aksi besar */
.cta { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 18px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.cta .ic { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; }
.cta b { display: block; font-size: 1.12rem; font-weight: 800; color: var(--navy); line-height: 1.25; }
.cta span.sub { display: block; font-size: .9rem; color: var(--muted); margin-top: 2px; }
.cta .chev { margin-left: auto; flex: none; color: var(--navy); opacity: .7; }
.cta.primary { background: linear-gradient(100deg, #156E86, #2FA3A8); border: 0; color: #fff; }
.cta.primary b, .cta.primary span.sub, .cta.primary .chev { color: #fff; }
.cta.primary .ic { border: 2px solid rgba(255,255,255,.75); }
.cta.sleep { background: #E7EEFB; border-color: #D5E0F5; display: block; padding: 16px; }
.cta.sleep .row { display: flex; align-items: center; gap: 14px; }
.cta.think { background: #E2F4EF; border-color: #CDEAE2; }
/* Pilihan malam: bertumpuk satu per baris supaya tulisan tidak terpotong-potong */
.minis { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 14px; }
.mini { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; border-radius: 14px; border: 1px solid #D5E0F5; background: #F7FAFF; font-size: .95rem; font-weight: 700; color: var(--navy); line-height: 1.25; text-align: left; min-width: 0; width: 100%; }
.mini > span { flex: 1; }
.mini .chev { flex: none; color: #8FA6C4; display: flex; }
/* Ruang Audio: tombol suara ringkas dua kolom supaya tidak perlu scroll panjang */
.sndgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.snd { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--navy); font-size: .9rem; font-weight: 700; line-height: 1.2; text-align: left; }
.snd .ic { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ice); color: var(--teal); }
.snd.on { border-color: var(--teal); background: #E6F5F5; }
body.night .snd { background: var(--night-2); border-color: #23405F; color: var(--night-ink); }
body.night .snd.on { border-color: #8FD3D6; background: #16324A; }
/* Beranda: tiga tombol berjejer (lebih ringkas, supaya Beranda tidak terlalu panjang) */
.minis.compact { grid-template-columns: repeat(3, 1fr); margin-top: 12px; }
.minis.compact .mini { gap: 8px; min-height: 0; padding: 10px; font-size: .8rem; line-height: 1.2; }
.minis.compact .mini > span { flex: 0 1 auto; }
.mini svg { flex: none; }

/* Perjalanan */
.journey { display: grid; grid-template-columns: 104px 1fr; gap: 14px; padding: 14px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); text-align: left; width: 100%; }
.journey .art { border-radius: 14px; background: linear-gradient(180deg,#CFE9F3,#8CC7DA); position: relative; overflow: hidden; min-height: 120px; display: grid; place-items: center; color: #1F5A78; border: 1px solid rgba(31,90,120,.12); }
.journey .art i { position: absolute; left: 50%; transform: translateX(-50%); border-radius: 50%; background: linear-gradient(180deg,#E9DCC9,#B9A58D); box-shadow: 0 2px 3px rgba(0,0,0,.15); }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--mint); color: #12707F; font-size: .74rem; font-weight: 800; letter-spacing: .03em; }
.journey h4 { margin: 8px 0 4px; font-size: 1.1rem; line-height: 1.25; color: var(--navy); }
.journey p { margin: 0; font-size: .86rem; color: var(--muted); }
.progress { height: 8px; border-radius: 99px; background: #E3EEF2; overflow: hidden; margin: 10px 0 6px; }
.progress > i { display: block; height: 100%; background: linear-gradient(90deg, #2FA3A8, #8FD3D2); border-radius: 99px; }
.journey .foot { display: flex; justify-content: space-between; align-items: center; font-size: .84rem; gap: 8px; }
.journey .foot strong { color: var(--teal); }

/* Pintu (grid 2 kolom) */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.door { display: flex; gap: 12px; align-items: flex-start; padding: 16px 14px; border-radius: var(--radius); border: 1px solid transparent; text-align: left; min-width: 0; }
.door > span:last-child { min-width: 0; }
.door b { display: block; overflow-wrap: anywhere; font-size: 1rem; line-height: 1.25; color: var(--navy); }
.door span { display: block; font-size: .8rem; color: var(--muted); margin-top: 4px; line-height: 1.35; }
.door svg { flex: none; margin-top: 2px; }
.d1 { background: var(--peach); } .d2 { background: var(--lilac); } .d3 { background: var(--rose); } .d4 { background: #E3F4EE; }

/* Chip kategori */
.panel { padding: 18px; border-radius: 22px; border: 1px solid var(--line); background: var(--card); }
.panel.mint { background: linear-gradient(180deg, #EAF7F3, #F4FBF9); }
.panel.lilac { background: linear-gradient(180deg, #EEF0FB, #F7F7FD); }
.panel h3 { margin: 0; font-size: 1.2rem; color: var(--navy); }
.panel > p { margin: 4px 0 0; color: var(--muted); font-size: .92rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip { padding: 9px 14px; border-radius: 999px; border: 1px solid #E6EEF0; background: #FFFBF8; font-weight: 700; font-size: .88rem; color: var(--navy); }
.chip.on { background: var(--teal); color: #fff; border-color: var(--teal); }
.chip small { font-weight: 600; color: var(--muted); margin-left: 4px; }
.chip.on small { color: #E2F5F5; }

.search { display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 56px; border-radius: 18px; border: 1px solid var(--line); background: var(--card); }
.search input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 1rem; min-width: 0; }

/* Daftar kartu */
.item { display: block; width: 100%; text-align: left; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--card); }
.item b { display: block; font-size: 1.02rem; color: var(--navy); line-height: 1.3; }
.item .ilmu { font-size: .85rem; color: var(--teal); font-weight: 700; margin-top: 2px; }
.item p { margin: 6px 0 0; font-size: .86rem; color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tag { font-size: .7rem; font-weight: 700; padding: 3px 8px; border-radius: 8px; background: var(--ice); color: #2C627A; }
.persp { padding: 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); text-align: left; width: 100%; }
.persp .who { font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #4F7E8E; }

/* Halaman baca */
.reader { padding-top: 18px; }
.reader h1 { font-size: 1.6rem; line-height: 1.2; margin: 6px 0 4px; color: var(--navy); letter-spacing: -.02em; text-wrap: balance; }
.reader .ilmu { color: var(--teal); font-weight: 700; }
.prose { font-size: 1.02rem; line-height: 1.75; }
.prose p, .prose ul, .prose ol { margin: 0 0 12px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: 8px; padding-left: 2px; }
.prose li::marker { color: var(--teal-2); font-weight: 800; }
.prose strong { color: var(--navy); font-weight: 800; background: linear-gradient(transparent 64%, rgba(117,204,208,.38) 64%); padding: 0 1px; }
.prose em { color: #2E4B63; }
.prose h3 { font-size: 1.05rem; margin: 18px 0 6px; color: var(--navy); }
.prose blockquote { margin: 16px 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--aqua); font-family: var(--serif); font-style: italic; font-size: 1.08rem; color: #29475F; }
.prose table { border-collapse: collapse; font-size: .9rem; min-width: 100%; background: var(--card); }
.prose th { background: #FFF5C2; text-align: left; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 10px; vertical-align: top; }

/* Bagian-bagian kartu ilmu */
.sec { margin: 26px 0; }
.sec > h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.sec > h2::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sec-konsep > p:first-of-type { font-size: 1.14rem; line-height: 1.65; color: var(--navy); font-weight: 500; }
.sec-kisah { padding: 18px 18px 8px; border-radius: 20px; background: #FFF7EC; border: 1px solid #F3E2C8; }
.sec-kisah > h2 { color: #A8692A; }
.sec-kisah > h2::after { background: #F0DCC0; }
.sec-kisah p { font-family: var(--serif); font-size: 1.06rem; line-height: 1.75; color: #3B3127; }
.sec-cermin { padding: 18px 18px 8px; border-radius: 20px; background: var(--lilac); }
.sec-cermin > h2 { color: #4B55A6; }
.sec-cermin > h2::after { background: #D9DCF3; }
.sec-cermin ul { list-style: none; padding: 0; }
.sec-cermin li { position: relative; padding: 12px 14px 12px 46px; margin-bottom: 10px; border-radius: 14px; background: var(--card); color: #2A3460; font-weight: 600; line-height: 1.5; }
/* Penanda setiap pertanyaan renungan di bagian Cermin: kilau "renungkan" (sebelumnya tanda tanya) */
.sec-cermin li::before { content: ""; position: absolute; left: 12px; top: 11px; width: 26px; height: 26px; border-radius: 50%; background: #C9CEF2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B449A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8Z'/%3E%3Cpath d='M18.5 16.5l.7 1.8 1.8.7-1.8.7-.7 1.8-.7-1.8-1.8-.7 1.8-.7Z' stroke-width='1.4'/%3E%3C/svg%3E") center / 17px no-repeat; }
.sec-latihan { padding: 18px 18px 8px; border-radius: 20px; background: #E3F4EE; border: 1px solid #CBE9DD; }
.sec-latihan > h2 { color: #17766F; }
.sec-latihan > h2::after { background: #C6E5D9; }
.sec-latihan ol { list-style: none; padding: 0; counter-reset: lat; }
.sec-latihan ol > li { counter-increment: lat; position: relative; padding: 12px 14px 12px 50px; margin-bottom: 10px; border-radius: 14px; background: var(--card); }
.sec-latihan ol > li::before { content: counter(lat); position: absolute; left: 12px; top: 11px; width: 26px; height: 26px; border-radius: 50%; background: #1F8A62; color: #fff; font-weight: 800; display: grid; place-items: center; font-size: .82rem; }
.sec-latihan > p { font-weight: 500; }
.sec-refleksi { padding: 22px 20px; border-radius: 22px; background: linear-gradient(135deg, #156E86, #2FA3A8); color: #fff; text-align: center; }
.sec-refleksi > h2 { justify-content: center; color: #D7F2F2; }
.sec-refleksi > h2::after { display: none; }
.sec-refleksi p { font-family: var(--serif); font-style: italic; font-size: 1.22rem; line-height: 1.55; margin: 0; }
.sec-refleksi strong { color: #fff; background: none; }
.sec-refleksi ul { list-style: none; padding: 0; margin: 0; }
.sec-refleksi li { font-family: var(--serif); font-style: italic; font-size: 1.14rem; line-height: 1.5; padding: 12px 4px; margin: 0; border-top: 1px solid rgba(255,255,255,.22); }
.sec-refleksi li:first-child { border-top: 0; padding-top: 2px; }

/* Bagian versi 5 menit: tiap bagian punya warna dan ikon sendiri supaya bacaan tidak terasa monoton */
.sec-kenapa > h2::before, .sec-salah > h2::before, .sec-contoh > h2::before,
.sec-faq > h2::before, .sec-ingat > h2::before, .sec-latihan > h2::before {
  font-size: 1.05rem; letter-spacing: 0; line-height: 1;
}
.sec-kenapa > h2::before { content: "💡"; }
.sec-salah > h2::before { content: "🧭"; }
.sec-contoh > h2::before { content: "🏡"; }
.sec-faq > h2::before { content: "💬"; }
.sec-ingat > h2::before { content: "📌"; }
.sec-latihan > h2::before { content: "✍️"; }

.sec-kenapa { padding: 4px 0 4px 16px; border-left: 4px solid var(--teal-2); }
.sec-kenapa > h2 { text-transform: none; letter-spacing: 0; font-size: 1.12rem; color: var(--navy); }
.sec-kenapa > h2::after { display: none; }

.sec-salah > h2 { color: #A0465A; }
.sec-salah > h2::after { background: #F2D3DA; }
.sec-salah ul { list-style: none; padding: 0; }
.sec-salah li { padding: 12px 14px; margin-bottom: 10px; border-radius: 14px; background: var(--rose); border: 1px solid #F4D6DE; }
.sec-salah li strong { display: block; color: #8E3149; background: none; margin-bottom: 2px; }

.sec-contoh { padding: 18px 18px 8px; border-radius: 20px; background: #EAF3FF; border: 1px solid #D3E3F8; }
.sec-contoh > h2 { color: #2F5E9E; }
.sec-contoh > h2::after { background: #D3E3F8; }
.sec-contoh p { font-family: var(--serif); font-size: 1.04rem; line-height: 1.75; color: #22324A; }

.sec-faq > h2 { color: #6A4FA3; }
.sec-faq > h2::after { background: #DDD5F1; }
.sec-faq p { padding: 14px 16px; border-radius: 16px; background: var(--lilac); }
.sec-faq p strong:first-child { display: block; margin-bottom: 6px; color: #4B3A86; background: none; font-size: 1.04rem; }

.sec-ingat { padding: 16px 18px 6px; border-radius: 18px; background: #FFF6CC; border: 1px dashed #E6CF6E; transform: rotate(-.4deg); }
.sec-ingat > h2 { color: #8A6A08; }
.sec-ingat > h2::after { background: #EBD98C; }
.sec-ingat ul { list-style: none; padding: 0; }
.sec-ingat li { position: relative; padding-left: 30px; font-weight: 700; color: #4A3B07; }
.sec-ingat li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: #E2B93B; color: #fff; font-size: .75rem; font-weight: 800; display: grid; place-items: center; }
.sec-catatan { padding: 14px 16px 4px; border-radius: 16px; background: #FFF8E1; border: 1px solid #F1E2A8; font-size: .94rem; }
.sec-catatan > h2 { color: #9A6E12; }
.sec-catatan > h2::after { background: #EADBA0; }
.sec-sumber { font-size: .84rem; color: var(--muted); }
.sec-sumber li { margin-bottom: 6px; }
.sec-sumber strong { background: none; color: var(--muted); }
.tablewrap { overflow-x: auto; margin: 0 0 14px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 4px; }
.act { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-weight: 700; font-size: .86rem; color: var(--navy); }
.act.on { background: #FDE8EC; border-color: #F5C9D2; color: #A23B52; }
.done-box { margin: 26px 0 10px; padding: 18px; border-radius: 20px; background: var(--mint); text-align: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: 16px; border: 0; background: var(--teal); color: #fff; font-weight: 800; font-size: 1rem; }
.btn.block { width: 100%; }
.btn.ghost { background: transparent; color: var(--teal); border: 1.5px solid var(--teal); }
.btn.soft { background: var(--ice); color: var(--navy); }
.btn:disabled { opacity: .5; }

textarea, .field { width: 100%; border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: var(--card); font-size: 1rem; line-height: 1.5; resize: vertical; }
label.q { display: block; font-weight: 800; color: var(--navy); font-size: 1.05rem; margin: 6px 0 4px; }
.hint { font-size: .86rem; color: var(--muted); margin: 0 0 10px; }
.steps { display: flex; gap: 6px; margin: 4px 0 18px; }
.steps i { flex: 1; height: 6px; border-radius: 6px; background: #DCE9EE; }
.steps i.on { background: var(--teal-2); }
.choice { display: flex; gap: 10px; flex-wrap: wrap; }
.choice button { flex: 1 1 140px; padding: 14px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--card); font-weight: 700; text-align: left; }
.choice button.on { border-color: var(--teal); background: #E6F5F5; }
.note-card { padding: 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.note-card .when { font-size: .78rem; color: var(--muted); }
/* Tombol hapus per catatan: ketuk sekali muncul "Hapus?", ketuk lagi untuk menghapus */
.note-card.has-del { position: relative; padding-right: 58px; }
.note-del { position: absolute; top: 8px; right: 8px; min-width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); display: grid; place-items: center; font: inherit; font-size: .82rem; font-weight: 700; }
.note-del.ask { background: #FBE7EA; color: var(--danger); padding: 0 10px; }
.note-open { all: unset; display: block; cursor: pointer; width: 100%; }
.saved-item { position: relative; }
.saved-item > .item { width: 100%; padding-right: 58px; }
.note-del.ask { white-space: nowrap; }

/* Statistik */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
/* Tersimpan: kotak ringkasan 2 kolom yang bisa diketuk */
.stats.pilih { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.stats.pilih .stat span { font-size: .85rem; }
button.stat { font: inherit; width: 100%; cursor: pointer; }
button.stat:active { transform: scale(.98); }
.stat { padding: 12px 6px; border-radius: 18px; text-align: center; border: 1px solid var(--line); }
.stat b { display: block; font-size: 1.45rem; color: var(--navy); line-height: 1.1; margin-top: 4px; font-variant-numeric: tabular-nums; }
.stat span { font-size: .72rem; color: var(--muted); line-height: 1.2; display: block; margin-top: 2px; }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; margin-top: 10px; }
.week span { font-size: .78rem; color: var(--muted); }
.week i { display: grid; place-items: center; width: 38px; height: 38px; margin: 6px auto 0; border-radius: 50%; border: 1.5px solid #CFDDE3; color: #fff; font-style: normal; font-weight: 800; }
.week i.on { background: #26A276; border-color: #26A276; }
.week i.today { border-color: var(--teal); border-width: 2.5px; }
.menu-list { border-radius: 20px; border: 1px solid var(--line); background: var(--card); overflow: hidden; }
.menu-list button { display: flex; width: 100%; align-items: center; gap: 14px; padding: 16px 18px; border: 0; background: transparent; text-align: left; font-weight: 700; font-size: 1rem; color: var(--navy); border-bottom: 1px solid var(--line); }
.menu-list button:last-child { border-bottom: 0; }
.menu-list button > svg:last-child { margin-left: auto; flex: none; }
.menu-list button .val + svg { margin-left: 6px; }
.menu-list button .val { margin-left: auto; color: var(--muted); font-weight: 600; font-size: .9rem; }
.access { display: flex; gap: 12px; align-items: center; padding: 16px 18px; border-radius: 20px; background: #E6F6EF; color: #17765B; }
.access b { display: block; }
.access span { font-size: .86rem; color: #3F7C69; }
.seg { display: flex; padding: 4px; border-radius: 14px; background: var(--ice); gap: 4px; }
.seg button { flex: 1; border: 0; padding: 10px 8px; border-radius: 10px; background: transparent; font-weight: 700; color: var(--muted); }
.seg button.on { background: var(--card); color: var(--navy); box-shadow: 0 1px 4px rgba(14,42,71,.12); }
.collections { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.col { padding: 16px; min-height: 110px; border-radius: 18px; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; text-align: left; border: 0; }
.col b { font-size: 1.02rem; line-height: 1.2; }
.col span { font-size: .8rem; opacity: .92; }
.empty { padding: 26px 18px; border-radius: 20px; border: 1.5px dashed #C9DDE4; text-align: center; color: var(--muted); }
.empty b { display: block; color: var(--navy); margin-bottom: 4px; }
.toast { position: fixed; left: 50%; bottom: calc(104px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 14px; font-weight: 700; font-size: .92rem; z-index: 90; max-width: calc(100% - 32px); box-shadow: 0 10px 30px -10px rgba(0,0,0,.4); }

/* Navigasi bawah */
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 0 max(10px, env(safe-area-inset-left, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-right, 0px)); pointer-events: none; }
.nav-in { max-width: 460px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); background: rgba(255,255,255,.97); border-radius: 26px; box-shadow: 0 -2px 24px rgba(14,42,71,.12); padding: 8px 4px 6px; pointer-events: auto; }
.nav button { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0 6px; font-size: .74rem; font-weight: 600; color: #6A7F92; position: relative; min-height: 56px; }
.nav button.on { color: var(--teal); font-weight: 800; }
.nav button.on::after { content: ""; position: absolute; bottom: 0; width: 34px; height: 3px; border-radius: 3px; background: var(--teal); }
.nav-hidden .nav { display: none; }
.nav-hidden #app { padding-bottom: 24px; }

/* Napas */
.breath { display: grid; place-items: center; padding: 30px 0 10px; }
.orb { width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #E9FAFA, #8FD3D6 55%, #3FA6B3); box-shadow: 0 0 0 18px rgba(117,204,208,.18), 0 0 0 40px rgba(117,204,208,.08); transform: scale(.62); transition: transform 4s cubic-bezier(.45,.05,.55,.95); }
.breath-text { font-size: 1.5rem; font-weight: 800; color: var(--navy); margin-top: 26px; min-height: 2.2em; text-align: center; }
.timer { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 700; }

/* Mode malam */
body.night, body.night #app { background: var(--night); color: var(--night-ink); }
body.night .bar { background: rgba(11,26,44,.94); border-color: #1F3550; }
body.night .bar h2, body.night .back { color: var(--night-ink); }
body.night .cta, body.night .note-card, body.night textarea, body.night .panel { background: var(--night-2); border-color: #23405F; color: var(--night-ink); }
body.night .cta b, body.night label.q, body.night h1, body.night h3 { color: #F1F6FB; }
body.night .cta span.sub, body.night .hint, body.night .muted { color: #9DB3C7; }
body.night .btn.soft { background: #1B324D; color: var(--night-ink); }
body.night .btn.ghost { color: #8FD3D6; border-color: #8FD3D6; }
body.night .nav-in { background: rgba(19,38,61,.97); }
body.night .nav button { color: #8FA6BC; }
body.night .nav button.on { color: #8FD3D6; }
body.night .orb { background: radial-gradient(circle at 40% 35%, #B8D9F0, #4F79A8 55%, #23406A); box-shadow: 0 0 0 18px rgba(79,121,168,.18), 0 0 0 40px rgba(79,121,168,.08); }
body.night .breath-text { color: #E4EEF8; }
/* Pilihan bersegmen di halaman malam: gelap supaya tidak menyilaukan */
body.night .seg { background: #13263D; }
body.night .seg button { color: #9DB3C7; }
body.night .seg button.on { background: #23405F; color: #F1F6FB; box-shadow: none; }
body.night .eyebrow { color: #8FB5D6; }
body.night .timer { color: #8FA6BC; }
.night-text { font-size: 1.3rem; line-height: 1.6; text-align: center; color: #DDE8F3; min-height: 6.5em; display: grid; place-items: center; padding: 10px 6px; }

@media (prefers-reduced-motion: reduce) { .orb { transition: none; } }
@media (min-width: 520px) { #app { box-shadow: 0 0 0 1px var(--line); } }

/* Ruang Visual Tenang */
.visgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.vis { display: block; padding: 0; border-radius: var(--radius); overflow: hidden; text-align: left; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.vis-col { display: flex; gap: 6px; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; color: #CFE0F0; margin-bottom: -4px; }
.vis-col svg { color: #8FD3D6; }
.vis .thumb { display: block; position: relative; height: 96px; overflow: hidden; background: #0E2140; }
.vis .thumb canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vis b { display: block; padding: 10px 12px 12px; font-size: 1rem; color: #FBF6E6; }
.vis-full { position: fixed; inset: 0; z-index: 1000; background: #0B1A33; cursor: pointer; }
/* Pemandangan dibuat untuk header yang lebar; di layar tegak tingginya dibatasi supaya tidak memanjang,
   dan bagian atasnya menyatu dengan warna langit. */
.vis-scene { position: absolute; left: 0; right: 0; bottom: 0; height: min(100%, 125vw); overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 18%); mask-image: linear-gradient(transparent, #000 18%); }
.vis-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vis-dim { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.vis-ui { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: calc(20px + env(safe-area-inset-top, 0px)) 20px calc(28px + env(safe-area-inset-bottom, 0px)); opacity: 0; transition: opacity .6s; pointer-events: none; background: linear-gradient(rgba(0,0,0,.45), transparent 22%, transparent 70%, rgba(0,0,0,.5)); }
.vis-ui.on { opacity: 1; pointer-events: auto; }
.vis-top { text-align: center; color: #FBF6E6; }
.vis-top b { display: block; font-size: 1.2rem; }
.vis-top span { font-size: .95rem; color: #CCD8EA; }
.vis-ui .btn { min-width: 180px; }
.vis-tip { margin: 10px 0 0; font-size: .8rem; color: #AFC2DA; text-align: center; }
.vis-bottom { display: flex; flex-direction: column; align-items: center; }
/* Petunjuk putar layar: hanya saat HP tegak (pemandangan paling utuh saat mendatar) */
.vis-rotate { display: none; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; background: rgba(8,18,36,.72); color: #FBF6E6; font-size: 1rem; text-align: left; max-width: 320px; }
.vis-rotate svg { flex: none; color: #8FD3D6; }
@media (orientation: portrait) { .vis-rotate { display: flex; } }
body.vis-open { overflow: hidden; }
.choice.two { display: grid; grid-template-columns: 1fr 1fr; }
.journey .art .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Pemutar mini: bilah kecil mengambang di atas menu bawah selama suara Ruang Audio menyala, di semua halaman */
.miniplay { position: fixed; z-index: 45; left: 50%; transform: translateX(-50%); bottom: calc(88px + env(safe-area-inset-bottom, 0px)); width: min(420px, calc(100% - 28px)); box-sizing: border-box; display: flex; align-items: center; gap: 2px; padding: 4px 4px 4px 6px; border-radius: 18px; background: rgba(255,255,255,.97); border: 1px solid var(--line); box-shadow: 0 4px 18px rgba(14,42,71,.14); }
.miniplay[hidden] { display: none; }
.mp-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 4px; text-align: left; color: var(--navy); }
.mp-ic { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ice); color: var(--teal); }
.mp-t { min-width: 0; line-height: 1.2; }
.mp-t b { display: block; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-t span { display: block; font-size: .74rem; color: #6A7F92; }
.mp-btn { flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; color: var(--navy); }
.mp-btn[data-mp="toggle"] { background: var(--teal); color: #fff; }
.mp-btn[data-mp="stop"] { color: #C8583A; }
.mp-btn[data-mp="close"] { color: #6A7F92; }
body.has-mini #app { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
body.night .miniplay { background: rgba(19,38,61,.97); border-color: #23405F; }
body.night .mp-name { color: var(--night-ink); }
body.night .mp-ic { background: #16324A; color: #8FD3D6; }
body.night .mp-btn { color: var(--night-ink); }
body.night .mp-btn[data-mp="toggle"] { background: #2B8C8F; color: #fff; }
body.night .mp-btn[data-mp="stop"] { color: #F08F73; }

/* Campur suara di Ruang Audio: kartu campuran, daftar Campuran saya, dan halaman Buat/Ubah Campuran */
.mixgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mixp { display: flex; align-items: flex-start; gap: 8px; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--navy); text-align: left; line-height: 1.25; min-width: 0; }
.mixp .ic { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--lilac, #EEF0FB); color: #3B5BA0; }
.mixp b { display: block; font-size: .9rem; }
.mixp b + span { display: block; margin-top: 3px; font-size: .76rem; color: #6A7F92; font-weight: 600; }
.mixp.on { border-color: var(--teal); background: #E6F5F5; }
.mixer { margin-top: 10px; }
.mixer-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mixer-h b { font-size: 1.05rem; color: var(--navy); }
.btn.sm { min-height: 40px; padding: 0 14px; font-size: .9rem; border-radius: 12px; }
.mixrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 42px; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid var(--line); }
.mixrow .nm { font-size: .9rem; font-weight: 700; color: var(--navy); line-height: 1.2; }
.mixrow input { width: 100%; }
.mixrow .mp-btn { color: #6A7F92; }
body.night .mixp { background: var(--night-2); border-color: #23405F; color: var(--night-ink); }
body.night .mixp.on { border-color: #8FD3D6; background: #16324A; }
body.night .mixer-h b, body.night .mixrow .nm { color: var(--night-ink); }
.mymixes { display: grid; gap: 8px; }
.mymix { display: flex; gap: 8px; align-items: stretch; }
.mymix .mixp { flex: 1; }
.mix-edit { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 64px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--teal); font-size: .78rem; font-weight: 800; }
.mix-del { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin-top: 12px; border: 1.5px solid #E2B8AC; border-radius: 14px; background: #FFF6F3; color: #B3492E; font-weight: 800; font-size: .95rem; }
.mix-del.ask { background: #C8583A; border-color: #C8583A; color: #fff; }
.mixsave { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; padding: 10px max(18px, env(safe-area-inset-left, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, var(--page) 70%, transparent); }
.mixsave .btn { display: flex; width: 100%; max-width: 444px; margin: 0 auto; }
.btn:disabled { opacity: .45; }
body.night .mix-edit { background: var(--night-2); border-color: #23405F; color: #8FD3D6; }

/* Perspektif Para Bijak yang dikurasi: tiga kartu sudut pandang dengan contoh dan latihan kecil */
.persp-k { padding: 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.pk-head { display: flex; align-items: center; gap: 10px; }
.pk-no { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ice); color: var(--teal); font-weight: 800; }
.persp-k .who { display: block; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #4F7E8E; }
.pk-trad { display: block; font-size: .8rem; color: #6A7F92; }
.persp-k h4 { margin: 10px 0 6px; font-size: 1.1rem; line-height: 1.3; color: var(--navy); }
.persp-k > p { margin: 0; line-height: 1.6; }
.pk-ex, .pk-try { margin-top: 12px; padding: 12px 14px; border-radius: 14px; }
.pk-ex { background: #F4F7FB; }
.pk-try { background: #E6F5F0; }
.pk-ex b, .pk-try b { display: flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--navy); }
.pk-try b { color: #1F7A5C; }
.pk-ex p, .pk-try p { margin: 4px 0 0; line-height: 1.55; font-size: .95rem; }
.pk-try .btn { margin-top: 10px; }
.pk-read { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin-top: 12px; padding: 10px 2px 0; border: 0; border-top: 1px solid var(--line); background: none; color: var(--teal); font-weight: 800; font-size: .92rem; text-align: left; }