/* Layout: one narrow column like a pocket mushaf; one screen per step of the hafalan loop */
:root{
  /* Palet: Deep Wine #4A1F24 · Merlot #66373C · Rosy Beige #A56A6F · Golden Peach #FFD6A5 · Burnt Sienna #5B3D2E */
  --wine:#4A1F24; --merlot:#66373C; --rosy:#A56A6F; --peach:#FFD6A5; --sienna:#5B3D2E;
  --bg:#FFF1DF; --surface:rgba(255,250,243,.84); --sunk:#F8E2CF; --line:#EBC9B8;
  --fg:#4A1F24; --muted:#7A4E4C; --accent:#66373C; --accent-soft:#F6D3C4; --on-accent:#FFF4E6;
  --gold:#5B3D2E; --gold-soft:#FFD6A5;
  --sky-top:#FFD6A5; --sky-bottom:#FFF6EC; --night:0;
  --f-quran:"Amiri Quran","Scheherazade New","Traditional Arabic",serif;
  --f-display:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-ui:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --r:14px; color-scheme:light;
}
:root[data-mode="dark"]{
  --bg:#2B1215; --surface:rgba(74,31,36,.78); --sunk:#57272D; --line:#7A464B;
  --fg:#FFEBD6; --muted:#E2B7AE; --accent:#FFD6A5; --accent-soft:#66373C; --on-accent:#4A1F24;
  --gold:#FFD6A5; --gold-soft:#5B3D2E;
  --sky-top:#1A0A0C; --sky-bottom:#4A1F24; --night:1; color-scheme:dark}
:root:not([data-mode])[data-theme="dark"]{
  --bg:#2B1215; --surface:rgba(74,31,36,.78); --sunk:#57272D; --line:#7A464B;
  --fg:#FFEBD6; --muted:#E2B7AE; --accent:#FFD6A5; --accent-soft:#66373C; --on-accent:#4A1F24;
  --gold:#FFD6A5; --gold-soft:#5B3D2E;
  --sky-top:#1A0A0C; --sky-bottom:#4A1F24; --night:1; color-scheme:dark}
@media (prefers-color-scheme: dark){:root:not([data-mode]):not([data-theme="light"]){
  --bg:#2B1215; --surface:rgba(74,31,36,.78); --sunk:#57272D; --line:#7A464B;
  --fg:#FFEBD6; --muted:#E2B7AE; --accent:#FFD6A5; --accent-soft:#66373C; --on-accent:#4A1F24;
  --gold:#FFD6A5; --gold-soft:#5B3D2E;
  --sky-top:#1A0A0C; --sky-bottom:#4A1F24; --night:1; color-scheme:dark}}

*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{background:var(--bg);transition:background-color .6s,color .6s;color:var(--fg);font-family:var(--f-ui);font-size:15px;line-height:1.55;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-top:calc(20px + env(safe-area-inset-top,0px));padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}
[hidden]{display:none!important}
.wrap{max-width:540px;margin:0 auto;display:flex;flex-direction:column;gap:20px;position:relative;z-index:1}
h1,h2,h3{font-family:var(--f-display);font-weight:700;letter-spacing:-.01em;text-wrap:balance;margin:0;line-height:1.25}
h1{font-size:1.6rem} h2{font-size:1.2rem} h3{font-size:1rem}
p{margin:0}
a{color:var(--accent)}
.muted{color:var(--muted)}
.small{font-size:.84rem}
.eyebrow{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600}
button{font:inherit;cursor:pointer;border:0;border-radius:999px;padding:13px 20px;font-weight:600;transition:transform .12s,background .2s}
button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
button:active{transform:scale(.97)}
button:disabled{opacity:.5;cursor:default}
.btn{background:var(--accent);color:var(--on-accent)}
.btn-ghost{background:transparent;color:var(--accent);border:1.5px solid var(--line)}
.btn-text{background:none;color:var(--muted);padding:8px 10px;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.btn-block{width:100%}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row>button{flex:1 1 140px}
.center{justify-content:center}

.top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;padding:5px 11px;border-radius:999px;background:var(--sunk);color:var(--muted);white-space:nowrap}
.chip.gold{background:var(--gold-soft);color:var(--gold)}
.chip.green{background:var(--accent-soft);color:var(--accent)}

.panel{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background-color .6s,border-color .6s;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:14px}
.note{font-size:.84rem;color:var(--muted);background:var(--surface);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.note.warn{background:var(--gold-soft);color:var(--fg)}

/* Juz 30 map */
.map{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.cell{min-height:86px;border-radius:12px;background:var(--sunk);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center;color:var(--muted);font-variant-numeric:tabular-nums;position:relative;overflow:hidden;padding:10px 6px;border:1.5px solid transparent}
.cell .nm{font-size:.9rem;font-weight:700;color:var(--fg);line-height:1.2;overflow-wrap:anywhere}
.cell .no{font-size:.72rem;font-weight:600;color:var(--accent);letter-spacing:.03em}
.cell .ay{font-size:.68rem;color:var(--muted)}
.cell .fill{position:absolute;inset:auto 0 0 0;background:var(--accent-soft);z-index:0}
.cell>*:not(.fill){position:relative;z-index:1}
.cell.open{border-color:var(--accent)}
.cell.done{background:var(--gold-soft)} .cell.done .nm,.cell.done .no{color:var(--gold)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.78rem;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}

/* badges */
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:12px}
.badge{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:.74rem;color:var(--fg)}
.medal{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:var(--gold-soft);font-family:var(--f-quran);font-size:1.05rem;color:var(--gold);border:2px solid var(--gold)}

/* surah card */
.surah{display:flex;justify-content:space-between;align-items:center;gap:12px}
.surah .ar{font-family:var(--f-quran);font-size:2rem;color:var(--accent);line-height:1.4;direction:rtl}
.bar{height:8px;background:var(--sunk);border-radius:99px;overflow:hidden;width:100%}
.bar>span{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .5s}

/* study */
.steps{display:flex;gap:6px}
.steps span{flex:1;height:4px;border-radius:9px;background:var(--line)}
.steps span.on{background:var(--accent)}
.ayah-box{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px 20px 22px;display:flex;flex-direction:column;gap:16px;text-align:center}
.ayah{font-family:var(--f-quran);font-size:clamp(1.9rem,7.5vw,2.5rem);line-height:2.1;direction:rtl;color:var(--fg);transition:filter .3s,opacity .3s;overflow-wrap:anywhere}
.ayah .num{color:var(--accent);font-size:.75em;margin-inline-start:6px}
.hidden-text{filter:blur(9px);opacity:.55;user-select:none}
.terj{color:var(--muted);font-size:.95rem}
.counter{display:flex;flex-direction:column;align-items:center;gap:10px}
.ring{width:132px;height:132px;position:relative}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:9}
.ring .bgc{stroke:var(--sunk)} .ring .fgc{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset .4s}
.ring .lbl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.ring .lbl b{font-size:2rem;font-family:var(--f-display);line-height:1}
.ring .lbl small{color:var(--muted);font-size:.78rem}
.dots{display:flex;gap:14px;justify-content:center}
.dot{width:46px;height:46px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;transition:all .25s}
.dot.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);transform:scale(1.06)}
.seq{display:flex;flex-direction:column;gap:6px;direction:rtl;font-family:var(--f-quran);font-size:1.5rem;line-height:2;text-align:center}
.seq .n{color:var(--accent)}

/* celebration */
.celebrate{text-align:center;align-items:center}
.seal{width:120px;height:120px;border-radius:50%;background:var(--gold-soft);border:3px solid var(--gold);display:grid;place-items:center;font-family:var(--f-quran);font-size:2.4rem;color:var(--gold);animation:pop .6s cubic-bezier(.2,1.6,.4,1)}
.seal.small{width:84px;height:84px;font-size:1.6rem;border-width:2px}
@keyframes pop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}

.list{display:flex;flex-direction:column;gap:8px}
.item{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;background:var(--sunk);font-size:.88rem;border:0;width:100%;text-align:start;color:var(--fg);font-weight:500}
.item .ar{font-family:var(--f-quran);font-size:1.2rem;direction:rtl;color:var(--accent)}
.item small{color:var(--muted);font-weight:400}

/* tombol tema */
.top-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.theme-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;font-size:.78rem;background:var(--surface);color:var(--fg);border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.theme-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.theme-btn svg path[d^="M20"]{fill:currentColor;stroke:none}

/* langit */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:linear-gradient(180deg,var(--sky-top),var(--sky-bottom) 70%,var(--bg));transition:background .8s}
.sky-day,.sky-night{position:absolute;inset:0;transition:opacity .9s ease}
.sky-day{opacity:calc(1 - var(--night))}
.sky-night{opacity:var(--night)}
.sun{position:absolute;top:-70px;right:-70px;width:300px;height:300px}
.sun .core{position:absolute;inset:80px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#FFF6E8,#FFD6A5 55%,#F4B98A);box-shadow:0 0 60px 20px rgba(255,214,165,.75),0 0 140px 60px rgba(255,214,165,.35);animation:glow 6s ease-in-out infinite}
.sun .rays{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,214,165,.55) 0 6deg,transparent 6deg 18deg);-webkit-mask:radial-gradient(circle,transparent 38%,#000 40%,transparent 70%);mask:radial-gradient(circle,transparent 38%,#000 40%,transparent 70%);animation:spin 70s linear infinite}
@keyframes glow{50%{box-shadow:0 0 80px 30px rgba(255,214,165,.9),0 0 180px 80px rgba(255,214,165,.4);transform:scale(1.03)}}
@keyframes spin{to{transform:rotate(360deg)}}
.cloud{position:absolute;height:46px;border-radius:999px;background:rgba(255,250,243,.75);filter:blur(2px);box-shadow:30px -16px 0 6px rgba(255,250,243,.75),70px 0 0 -2px rgba(255,250,243,.7)}
.cloud.c1{top:140px;width:120px;left:-180px;animation:drift 80s linear infinite}
.cloud.c2{top:330px;width:90px;left:-160px;opacity:.7;animation:drift 110s linear infinite;animation-delay:-50s}
.cloud.c3{top:560px;width:140px;left:-200px;opacity:.55;animation:drift 95s linear infinite;animation-delay:-20s}
@keyframes drift{to{transform:translateX(calc(100vw + 400px))}}
.nebula{position:absolute;inset:-20%;background:radial-gradient(ellipse 50% 35% at 20% 25%,rgba(165,106,111,.28),transparent 70%),radial-gradient(ellipse 45% 30% at 85% 60%,rgba(102,55,60,.45),transparent 70%),radial-gradient(ellipse 40% 25% at 60% 10%,rgba(255,214,165,.10),transparent 70%);animation:breathe 18s ease-in-out infinite alternate}
@keyframes breathe{to{transform:translate(2%,-2%) scale(1.06);opacity:.8}}
#stars{position:absolute;inset:0}

@media (prefers-reduced-motion:reduce){.seal{animation:none}*{transition:none!important}.sun .core,.sun .rays,.cloud,.nebula{animation:none}}

/* ikon di tombol putar */
.btn-icon{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-icon svg{width:1.1em;height:1.1em;fill:currentColor;flex:none}

/* penanda bacaan mengikuti audio */
.ayah .w{transition:color .3s ease,opacity .3s ease,text-shadow .3s ease}
.ayah.following .w{opacity:.35}
.ayah.following .w.on{opacity:1;color:var(--accent);text-shadow:0 0 18px var(--gold-soft)}

/* pencarian */
.search{position:relative;display:flex;align-items:center}
.search svg{position:absolute;left:14px;z-index:1;width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;pointer-events:none}
.search input{width:100%;font:inherit;font-size:1rem;color:var(--fg);background:var(--surface);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1.5px solid var(--line);border-radius:999px;padding:13px 16px 13px 42px;outline:none;transition:border-color .2s}
.search input::placeholder{color:var(--muted);opacity:.8}
.search input:focus{border-color:var(--accent)}
#results:empty{display:none}
#results .list{background:var(--surface);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:var(--r);padding:8px}

/* kotak juz di beranda */
.juz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:8px}
.juz-cell{aspect-ratio:1;max-width:100%;padding:0;border-radius:12px;background:var(--sunk);color:var(--fg);font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums;border:1.5px solid transparent}
.juz-cell:hover{border-color:var(--accent)}

/* lencana juz */
.medal.juz{font-family:var(--f-quran);font-size:1.5rem;background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.badge small{font-size:.68rem}
.panel #results .list{background:none;border:0;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none}

/* kalimat pembuka panel juz */
.lead{font-size:1.02rem;font-weight:700;color:var(--fg);line-height:1.35;text-wrap:balance}

/* teks berjalan di kolom pencarian */
.search .ticker{position:absolute;left:42px;right:18px;top:0;bottom:0;display:flex;align-items:center;overflow:hidden;white-space:nowrap;pointer-events:none;z-index:1;color:var(--muted);font-size:1rem}
.search .caret{display:inline-block;width:2px;height:1.1em;margin-left:2px;background:var(--accent);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.search input:focus ~ .ticker,.search input:not(:placeholder-shown) ~ .ticker{opacity:0}
@media (prefers-reduced-motion:reduce){.search .caret{animation:none;opacity:0}}