:root{--night:#050c1a;--deep:#0a1428;--line:rgba(217,174,73,.28);--gold:#d9ae49;--gold-hi:#f1d27a;--cream:#f3ead3;--muted:#b4b1a6;--ok:#7fc79a;--err:#e7a3a3;
 --fr:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;--ar:"Scheherazade New","Traditional Arabic",serif;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--night);color:var(--cream);font:400 16px/1.6 var(--fr);padding-bottom:env(safe-area-inset-bottom,0)}
a{color:var(--gold-hi)}
.ar{font-family:var(--ar);font-weight:700}
.wrap{max-width:1040px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
main.wrap{padding-block:28px 56px}
header.top{border-bottom:1px solid var(--line);background:var(--night);position:sticky;top:0;z-index:5}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:12px}
.brand{font-weight:700;text-decoration:none;color:var(--cream);letter-spacing:.02em}
.brand .ar{color:var(--gold);margin-left:8px;font-size:1.3em}
nav{display:flex;gap:6px 18px;flex-wrap:wrap}
nav a{color:var(--muted);text-decoration:none;font-weight:500;font-size:.95rem;padding:4px 0}
nav a.on,nav a:hover{color:var(--gold-hi)}
h1{font-size:clamp(1.5rem,4.5vw,2.1rem);line-height:1.2;margin:0 0 8px;text-wrap:balance}
h2{font-size:1.15rem;margin:0 0 12px}
.muted{color:var(--muted)}
.foot{color:var(--muted);font-size:.85rem;padding-block:20px}
.flash{padding:12px 16px;border-radius:4px;border:1px solid var(--line);background:var(--deep);margin:0 0 18px}
.flash.ok{border-color:var(--ok)}.flash.err{border-color:var(--err);color:var(--err)}
.card{background:var(--deep);border:1px solid var(--line);border-radius:4px;padding:22px;margin:0 0 22px;min-width:0}
.card.narrow{max-width:460px;margin:40px auto}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.grid .card{margin:0}
@media(max-width:820px){.grid{grid-template-columns:1fr}}
.btn,button.btn{display:inline-block;font:600 .95rem var(--fr);padding:11px 22px;border:1px solid var(--gold);border-radius:3px;color:var(--gold-hi);background:transparent;text-decoration:none;cursor:pointer}
.btn.solid{background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:#1a1205}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}
button.link{background:none;border:0;color:var(--gold-hi);text-decoration:underline;cursor:pointer;font:inherit;padding:0}
form.inline{display:inline;margin-left:10px}
label{display:block;font-weight:500;font-size:.9rem;margin:12px 0 4px}
input,select,textarea{width:100%;font:inherit;color:var(--cream);background:var(--night);border:1px solid var(--line);border-radius:3px;padding:10px 12px}
input[type=checkbox]{width:auto}
label.check{display:flex;gap:8px;align-items:center;font-weight:400}
form .btn{margin-top:16px}
.form2{display:grid;grid-template-columns:repeat(2,1fr);gap:0 18px;align-items:end}
.form2 .check,.form2 .btn{grid-column:1/-1;justify-self:start}
@media(max-width:620px){.form2{grid-template-columns:1fr}}
.scroll{overflow-x:auto;margin-bottom:22px}
table.list{width:100%;border-collapse:collapse;font-size:.92rem;min-width:720px}
table.list th,table.list td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
table.list th{color:var(--gold);font-weight:600;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
tr.off{opacity:.55}
.tag{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:0 8px;font-size:.75rem;color:var(--muted)}
.pv-steps{list-style:none;display:flex;gap:10px;padding:0;margin:20px 0 24px;flex-wrap:wrap}
.pv-steps li{flex:1 1 150px;border:1px solid var(--line);border-radius:4px;padding:12px 14px;background:var(--deep);color:var(--muted);font-size:.9rem}
.pv-steps b{display:block;color:var(--muted);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}
.pv-steps li.done{border-color:var(--gold);color:var(--cream)}.pv-steps li.done b{color:var(--gold)}
.pv-steps li.cur{border-color:var(--gold-hi);box-shadow:0 0 0 1px var(--gold-hi);color:var(--cream)}.pv-steps li.cur b{color:var(--gold-hi)}
.big{font-size:2rem;font-weight:700;margin:0 0 8px;line-height:1.2}.big span{font-size:.95rem;font-weight:500;color:var(--muted)}
.pbar{height:8px;border-radius:999px;background:var(--night);border:1px solid var(--line);overflow:hidden;margin-bottom:14px}
.pbar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-hi))}
ul.checks,ul.plain,ul.checklist{list-style:none;padding:0;margin:0}
ul.checks li{display:flex;gap:10px;align-items:flex-start;padding:5px 0;color:var(--muted)}
ul.checks li.ok{color:var(--cream)}
.mk{flex:0 0 20px;height:20px;border:1px solid var(--line);border-radius:50%;text-align:center;line-height:18px;font-size:.8rem;color:#1a1205}
li.ok .mk{background:var(--gold);border-color:var(--gold)}
.sr{position:absolute;left:-9999px}
ul.plain li{padding:9px 0;border-bottom:1px solid var(--line)}ul.plain li:last-child{border:0}
ul.checklist li{padding:6px 0}ul.checklist label{margin:0;font-weight:400;display:flex;gap:10px;align-items:center}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:.78rem;border:1px solid var(--line);border-radius:999px;padding:2px 10px;color:var(--muted)}
.chip.learning{border-color:var(--gold-hi);color:var(--gold-hi)}
.chip.done{background:var(--gold);border-color:var(--gold);color:#1a1205;font-weight:600}
blockquote{margin:12px 0 0;padding:12px 16px;border-left:3px solid var(--gold);background:var(--night)}
blockquote small{display:block;color:var(--muted);margin-top:6px}
.surahs{display:grid;grid-template-columns:repeat(3,1fr);gap:0 18px}
@media(max-width:820px){.surahs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.surahs{grid-template-columns:1fr}}
.rowrule{display:flex;gap:10px;align-items:center;margin-bottom:8px}.rowrule .pos{width:64px;flex:0 0 64px}
textarea{resize:vertical}
details summary{cursor:pointer;color:var(--gold-hi);margin:12px 0}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
fieldset.stars{border:0;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:4px 16px}
fieldset.stars legend{font-weight:500;font-size:.9rem;padding:0;margin-bottom:6px}
textarea{resize:vertical}
.small{font-size:.82rem;margin:4px 0 0}
.card form.inline .btn{margin-top:0}