*{box-sizing:border-box} :root{--bg:#f5f8f6;--surface:#fffefa;--ink:#263d35;--muted:#84948e;--green:#4f806d;--green2:#6da58c;--mint:#e4f1eb;--cream:#f5ecd8;--gold:#c69e52;--blue:#dceef1;--line:#e4ebe7;--shadow:0 12px 35px rgba(42,77,63,.08)}body.dark{--bg:#17231f;--surface:#21302a;--ink:#eef5f1;--muted:#a7b8b0;--mint:#29473b;--cream:#4a402d;--line:#35463f}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,Arial,sans-serif}.app{min-height:100vh;display:flex}.sidebar{position:fixed;left:0;top:0;bottom:0;width:260px;background:var(--surface);border-right:1px solid var(--line);padding:24px 18px;display:flex;flex-direction:column;z-index:20}.brand{display:flex;gap:12px;align-items:center;padding:3px 10px 24px;border-bottom:1px solid var(--line)}.brand-mark{width:45px;height:45px;border-radius:14px;background:var(--green);color:white;display:grid;place-items:center;font-size:23px}.brand strong{display:block;font:800 16px "Plus Jakarta Sans"}.brand span{font-size:9px;color:var(--muted)}nav{padding-top:24px}nav p{font-size:9px;letter-spacing:1.4px;color:#9ba9a3;font-weight:800;padding:0 12px}.nav{width:100%;border:0;background:transparent;color:var(--muted);padding:12px;border-radius:10px;text-align:left;display:flex;gap:12px;align-items:center;font-size:12px;font-weight:600;cursor:pointer;margin:2px 0}.nav:hover,.nav.active{background:var(--mint);color:var(--green);font-weight:800}.sidebar-quote{margin-top:auto;background:var(--cream);border-radius:14px;padding:15px;color:#7a6846}.sidebar-quote div{font:700 30px Georgia}.sidebar-quote p{font-family:Georgia,serif;font-size:10px;line-height:1.7;margin:0 0 8px}.sidebar-quote small{font-size:8px;font-weight:800}.side-bottom{text-align:center;color:#a1ada7;font-size:8px;padding:15px 0 2px}main{margin-left:260px;width:calc(100% - 260px)}.topbar{height:90px;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 35px}.crumb{font-size:9px;color:#9aa7a1;margin-bottom:7px}.topbar h1{font:800 19px "Plus Jakarta Sans";margin:0}.actions{display:flex;align-items:center;gap:10px}.search{width:260px;border:1px solid var(--line);border-radius:10px;background:var(--bg);padding:9px 12px;display:flex;gap:8px}.search input{border:0;outline:0;background:transparent;width:100%;font-size:10px;color:var(--ink)}.round,.menu{border:1px solid var(--line);background:var(--surface);color:var(--ink);width:38px;height:38px;border-radius:10px;cursor:pointer}.menu{display:none}.content{max-width:1450px;margin:auto;padding:30px 35px}.welcome{min-height:210px;border-radius:20px;background:linear-gradient(105deg,#dcefeb,#edf5f0 55%,#f4ecd8);padding:30px 34px;display:flex;justify-content:space-between;overflow:hidden}.eyebrow{font-family:Georgia,serif;font-size:10px;color:var(--green);letter-spacing:1px}.welcome h2{font:600 24px "Plus Jakarta Sans";line-height:1.4;margin:10px 0 7px}.welcome h2 b{color:var(--green)}.welcome p{font-size:11px;color:#71837c;line-height:1.7;max-width:540px}.ornament{width:280px;position:relative;color:#c8a55c}.ornament span{font-family:Georgia;font-size:65px;position:absolute;right:60px;top:15px}.ornament i{position:absolute;right:10px;bottom:20px;font-style:normal;font-size:50px;opacity:.5}.primary{border:0;background:var(--green);color:#fff;padding:12px 18px;border-radius:9px;font-size:10px;font-weight:800;cursor:pointer}.primary span{margin-left:18px}.small{padding:10px 14px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}.stats article{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:center}.icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-weight:800;color:var(--green)}.icon.blue{background:var(--blue)}.icon.cream{background:var(--cream)}.icon.green{background:var(--mint)}.icon.gold{background:#f4e8c9;color:#967533}.stats span,.stats small{display:block;color:var(--muted);font-size:9px}.stats strong{display:block;font:800 17px "Plus Jakarta Sans";margin:4px 0}.two{display:grid;grid-template-columns:1.15fr 1fr;gap:15px;margin-bottom:15px}.card{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:20px;box-shadow:var(--shadow)}.head{display:flex;justify-content:space-between;align-items:flex-start}.head h3,.card h3{font:800 13px "Plus Jakarta Sans";margin:0 0 5px}.head p,.card>p{font-size:9px;color:var(--muted);margin:0}.more{border:0;background:transparent;color:var(--green);font-size:9px;font-weight:800;cursor:pointer}.progress-row{margin:24px 0 18px}.progress-row>div:first-child{display:flex;justify-content:space-between;align-items:end}.progress-row b{font:800 22px "Plus Jakarta Sans"}.progress-row span{font-size:8px;color:var(--muted)}.progress{height:8px;background:var(--mint);border-radius:20px;overflow:hidden;margin-top:9px}.progress i,.big-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),#88b59f);border-radius:20px;transition:.3s}.juz-mini{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}.juz-mini span{height:22px;border-radius:5px;background:var(--bg);border:1px solid var(--line);display:grid;place-items:center;font-size:7px;color:var(--muted)}.juz-mini span.done{background:var(--green);color:#fff;border-color:var(--green)}.today-list{margin-top:12px}.today-item{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);padding:11px 0}.check{width:22px;height:22px;border:1px solid #b9c8c1;border-radius:7px;background:transparent;color:white;cursor:pointer}.check.done{background:var(--green);border-color:var(--green)}.today-item div{flex:1}.today-item b{font-size:10px}.today-item span{display:block;font-size:8px;color:var(--muted);margin-top:2px}.continue{display:flex;align-items:center;gap:12px;margin-top:17px;padding:12px;background:var(--bg);border-radius:12px}.surah-symbol{width:38px;height:38px;border-radius:11px;background:var(--cream);display:grid;place-items:center;font:24px Amiri;color:#8d7138}.continue div:nth-child(2){flex:1}.continue b,.continue span{display:block}.continue b{font-size:11px}.continue span{font-size:8px;color:var(--muted);margin-top:3px}.play{border:0;background:var(--green);color:white;border-radius:8px;padding:9px 12px;font-size:8px;font-weight:800}.review-box{display:flex;gap:15px;align-items:center;margin-top:14px}.review-ring{width:70px;height:70px;border-radius:50%;background:conic-gradient(var(--green) 0deg,var(--green) 0deg,var(--mint) 0deg);display:grid;place-items:center;position:relative;font:800 13px "Plus Jakarta Sans"}.review-ring:after{content:"";position:absolute;width:55px;height:55px;border-radius:50%;background:var(--surface)}.review-ring{isolation:isolate}.review-ring::before{content:attr(id);position:absolute}.review-ring>*{position:relative}.review-ring{color:var(--ink)}.review-ring{--p:0deg}.review-ring{background:conic-gradient(var(--green) var(--p),var(--mint) 0)}.review-box .review-ring{font-size:11px}.review-box b{display:block;font-size:10px}.review-box span{display:block;font-size:8px;color:var(--muted);line-height:1.5;margin-top:5px}.page-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.page-heading h2{font:800 24px "Plus Jakarta Sans";margin:5px 0}.page-heading p{font-size:10px;color:var(--muted)}.quran-layout{display:grid;grid-template-columns:250px 1fr;gap:15px}.panel-title{font:800 12px "Plus Jakarta Sans";display:flex;justify-content:space-between;margin-bottom:14px}.panel-title span{color:var(--green)}.juz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.juz-btn{border:1px solid var(--line);background:var(--bg);border-radius:9px;padding:10px 4px;cursor:pointer;color:var(--muted);font-size:9px;font-weight:700}.juz-btn:hover,.juz-btn.active{background:var(--mint);color:var(--green);border-color:#a9cdbd}.reader-head{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:15px}.reader-head span{font-size:8px;color:var(--green);font-weight:800}.reader-head h3{font:800 17px "Plus Jakarta Sans";margin:5px 0 0}.loading{text-align:center;padding:45px;color:var(--muted);font-size:10px}.ayah{padding:19px 5px;border-bottom:1px solid var(--line)}.ayah:last-child{border-bottom:0}.ayah-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:8px}.ayah-actions{float:right}.ayah-text{font:400 27px/2.05 Amiri,serif;text-align:right;direction:rtl;margin:8px 0 0}.ayah-tools{display:flex;justify-content:flex-start;gap:7px;margin-top:6px}.tiny{border:1px solid var(--line);background:var(--bg);border-radius:7px;padding:5px 7px;font-size:8px;color:var(--muted);cursor:pointer}.target-summary{display:grid;grid-template-columns:120px 1fr 130px;gap:18px;align-items:center;margin-bottom:15px}.target-summary span{display:block;font-size:8px;color:var(--muted)}.target-summary strong{font:800 24px "Plus Jakarta Sans"}.target-summary>div:last-child{font-size:9px;color:var(--muted)}.target-summary>div:last-child b{color:var(--green)}.big-progress{height:9px;background:var(--mint);border-radius:20px;overflow:hidden}.target-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.target-card{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:15px}.target-card.done{border-color:#9bc4b2;background:#f3faf6}.target-top{display:flex;justify-content:space-between}.juz-number{font:800 12px "Plus Jakarta Sans";color:var(--green)}.status{font-size:7px;background:var(--mint);color:var(--green);border-radius:20px;padding:4px 7px}.target-card h4{margin:9px 0 3px;font-size:11px}.target-card p{margin:0;color:var(--muted);font-size:8px}.target-card button{margin-top:12px;width:100%;border:1px solid var(--line);background:transparent;border-radius:7px;padding:7px;font-size:8px;cursor:pointer;color:var(--green);font-weight:800}.review-summary{display:flex;gap:20px;align-items:center;margin-bottom:15px}.review-ring.large{width:105px;height:105px;font-size:17px;flex:none}.review-ring.large:after{width:82px;height:82px}.review-summary h3{font-size:14px}.review-summary p{font-size:9px;color:var(--muted);margin:4px 0 12px}.review-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.review-juz{border:1px solid var(--line);background:var(--surface);border-radius:11px;padding:12px}.review-juz b{font-size:10px}.review-juz span{display:block;color:var(--muted);font-size:8px;margin:4px 0 10px}.review-juz button{border:1px solid var(--line);background:var(--bg);width:100%;border-radius:7px;padding:7px;font-size:8px;color:var(--muted);cursor:pointer}.review-juz button.done{background:var(--mint);border-color:#a8cdbd;color:var(--green);font-weight:800}.notes-layout{display:grid;grid-template-columns:1fr 1fr;gap:15px}.notes-layout label{display:block;font-size:9px;font-weight:700;margin:14px 0 6px}.notes-layout input,.notes-layout textarea{width:100%;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:8px;padding:10px;font-size:9px;outline:0}.notes-layout textarea{resize:vertical}.notes-layout .primary{margin-top:15px}.note{border-bottom:1px solid var(--line);padding:12px 0}.note:last-child{border:0}.note b{font-size:10px}.note small{display:block;color:var(--muted);font-size:8px;margin:4px 0}.note p{font-size:9px;line-height:1.6;margin:0;color:var(--muted)}footer{text-align:center;color:#a0ada7;font-size:8px;padding:15px}.toast{position:fixed;right:20px;bottom:20px;background:#234f40;color:#fff;padding:11px 15px;border-radius:9px;font-size:9px;opacity:0;transform:translateY(10px);transition:.2s;z-index:50}.toast.show{opacity:1;transform:none}.hidden{display:none!important}
@media(max-width:1000px){.stats{grid-template-columns:1fr 1fr}.two{grid-template-columns:1fr}.target-cards{grid-template-columns:1fr 1fr}.review-grid{grid-template-columns:repeat(4,1fr)}}@media(max-width:750px){.sidebar{transform:translateX(-100%);transition:.25s;box-shadow:10px 0 30px #0002}.sidebar.open{transform:none}main{margin-left:0;width:100%}.menu{display:block}.topbar{padding:0 15px;height:75px}.topbar>div:first-of-type{display:none}.search{width:180px}.content{padding:18px 14px}.welcome{padding:25px 22px}.ornament{display:none}.stats{grid-template-columns:1fr 1fr}.quran-layout{grid-template-columns:1fr}.juz-panel{order:2}.reader{order:1}.juz-grid{grid-template-columns:repeat(6,1fr)}.target-cards{grid-template-columns:1fr 1fr}.review-grid{grid-template-columns:repeat(3,1fr)}.notes-layout{grid-template-columns:1fr}}@media(max-width:480px){.stats{grid-template-columns:1fr}.stats article{padding:12px}.page-heading{align-items:flex-end}.page-heading h2{font-size:20px}.page-heading p{font-size:8px}.target-cards{grid-template-columns:1fr}.review-grid{grid-template-columns:1fr 1fr}.juz-grid{grid-template-columns:repeat(5,1fr)}.ayah-text{font-size:24px}.actions .search{display:none}.welcome h2{font-size:20px}}

.audio-player{position:sticky;bottom:12px;margin-top:14px;padding:12px 14px;border:1px solid #b9d5c8;border-radius:12px;background:color-mix(in srgb,var(--surface) 94%,var(--mint));box-shadow:0 10px 28px rgba(38,77,61,.13);display:none;align-items:center;gap:12px;z-index:5}.audio-player.show{display:flex}.audio-info{display:flex;align-items:center;gap:9px;min-width:210px;flex:1}.audio-icon{width:34px;height:34px;border-radius:10px;background:var(--mint);color:var(--green);display:grid;place-items:center;font-weight:800}.audio-info b{display:block;font-size:9px}.audio-info span{display:block;font-size:8px;color:var(--muted);margin-top:3px}.audio-player audio{height:34px;max-width:360px;flex:1}.ayah-tools .play-audio{color:var(--green);font-weight:800}.ayah.playing{background:var(--mint);border-radius:10px;padding-left:10px;padding-right:10px}@media(max-width:750px){.audio-player{flex-wrap:wrap}.audio-info{min-width:100%}.audio-player audio{max-width:none;width:100%}}
/* Prayer & reciter additions */
.prayer-card{margin-bottom:15px}.prayer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px}.prayer-times{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:15px}.prayer-time{padding:11px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}.prayer-time b,.prayer-time span{display:block}.prayer-time b{font-size:9px}.prayer-time span{font-size:14px;font-weight:800;margin-top:5px;color:var(--green)}.prayer-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.prayer-controls select{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:8px;padding:8px;font-size:9px}.reciter-select{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:8px;padding:7px;font-size:9px;margin-top:7px}.adhan-panel{display:flex;gap:12px;align-items:center;margin-top:15px;padding:12px;background:var(--mint);border-radius:12px}.adhan-panel b{font-size:10px}.adhan-panel span{font-size:8px;color:var(--muted);display:block;margin-top:3px}.adhan-panel audio{max-width:330px;flex:1}.surah-name{font-family:Amiri,serif;font-size:14px;color:var(--green);margin-left:6px}@media(max-width:750px){.prayer-times{grid-template-columns:repeat(2,1fr)}.prayer-times .prayer-time:last-child{grid-column:span 2}.adhan-panel{flex-wrap:wrap}.adhan-panel audio{width:100%;max-width:none}}

/* Revisi Bismillah agar tidak bertabrakan dengan judul */
.welcome .eyebrow{display:block;font-family:Amiri,serif;font-size:19px;line-height:1.45;letter-spacing:0;margin-bottom:8px;white-space:normal;position:relative;z-index:2}
.welcome .ornament span{font-size:48px;right:45px;top:28px;opacity:.45;line-height:1}
@media(max-width:750px){.welcome .eyebrow{font-size:16px}.welcome .ornament{display:none}}