:root{color-scheme:dark;--bg:#07140f;--card:#0d2018;--card2:#12291f;--line:#1f3b2f;--gold:#d6b46a;--gold2:#ecd29a;--text:#eef1e8;--muted:#98b0a2;--r:18px}
body.light{color-scheme:light;--bg:#f5f3ea;--card:#fffefa;--card2:#f1f0e4;--line:#dcdfcf;--gold:#8f6c22;--gold2:#6e5116;--text:#17392c;--muted:#5f766a}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:clip;background:radial-gradient(900px 420px at 85% -10%,#1a4a3744,transparent),radial-gradient(700px 400px at 0 0,#d6b46a12,transparent),var(--bg);color:var(--text);font:15px/1.7 'Cairo',system-ui,sans-serif}
body.light{background:radial-gradient(900px 420px at 85% -10%,#cfe3d155,transparent),var(--bg)}
a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit;color:inherit}button{cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.i{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}.i.fill{fill:currentColor}
.wrap{width:min(1040px,calc(100% - 32px));margin-inline:auto}
.muted{color:var(--muted)}.sm{font-size:12.5px}.gold-t{color:var(--gold)}
h1,h2,h3,p{margin:0}

.topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top)}
.bar{height:58px;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:baseline;gap:8px}.brand b{font-size:18px;color:var(--gold2)}.brand small{color:var(--muted);font-size:11px;letter-spacing:.5px}
.topnav{display:flex;gap:22px;margin-inline:auto}.topnav a{font-size:13.5px;color:var(--muted);padding:4px 0;border-bottom:2px solid transparent;transition:.2s}.topnav a:hover,.topnav a.on{color:var(--gold);border-color:var(--gold)}
.icon-btn,.rbtn{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--gold)}.icon-btn.small{width:30px;height:30px}
.icon-btn:hover,.rbtn:hover{border-color:var(--gold)}

.hero{padding:40px 0 6px;text-align:center}
.hero h1{font-size:clamp(23px,3.3vw,36px);font-weight:700;line-height:1.5}
.ayah{font:clamp(20px,2.4vw,26px)/1.9 'Amiri',serif;color:var(--gold2);margin-top:6px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.card{background:linear-gradient(160deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:var(--r)}
.stat{display:flex;gap:14px;align-items:center;padding:16px 18px;min-width:0}
.stat>.i{width:42px;height:42px;padding:10px;border-radius:12px;background:#d6b46a1a;color:var(--gold)}
.stat small{display:block;color:var(--muted);font-size:12px;line-height:1.5}.stat strong{display:block;color:var(--gold2);font-size:16px;line-height:1.5}

.sec{padding-top:44px;scroll-margin-top:70px}
.sec h2,.rowhead h2{display:flex;align-items:center;gap:10px;font-size:22px;margin-bottom:16px}.sec h2 .i{color:var(--gold)}
.rowhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.rowhead h2{margin:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:9px 16px;font-weight:600;font-size:13.5px;border:1px solid transparent;transition:transform .15s}
.btn:hover{transform:translateY(-1px)}.btn:disabled{opacity:.6;cursor:wait}
.btn.gold{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#14261d}
.btn.ghost{border-color:var(--line);background:transparent;color:var(--text)}.btn.ghost:hover{border-color:var(--gold);color:var(--gold)}
.link{border:0;background:none;padding:0;color:var(--gold);font-size:13px}.link:hover{text-decoration:underline}.link.danger{color:#e0907f}
.field{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:12.5px}
input,textarea,select{width:100%;min-width:0;background:color-mix(in srgb,var(--bg) 70%,var(--card));border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:14px;color:var(--text)}

.player{padding:20px;text-align:center}.player h3{font:700 26px/1.5 'Amiri',serif;color:var(--gold2)}
.ctrls{display:flex;justify-content:center;align-items:center;gap:22px;margin:14px 0}
.pbtn{width:54px;height:54px;border-radius:50%;border:0;background:var(--gold);color:#14261d;display:grid;place-items:center;font-size:22px}
.seek{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;margin-bottom:14px}.seek input{flex:1;padding:0;accent-color:var(--gold);background:none;border:0}
.player .field{text-align:right}
.slist{padding:16px}.searchbox{position:relative;margin-bottom:10px}.searchbox .i{position:absolute;inset-inline-start:12px;top:50%;translate:0 -50%;color:var(--muted)}.searchbox input{padding-inline-start:38px}
.surahs{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:300px;overflow:auto;align-content:start}
.si{display:flex;align-items:center;gap:8px;text-align:right;border:1px solid transparent;border-radius:10px;padding:7px 8px;background:#ffffff08;min-width:0}
.si:hover,.si.active{border-color:var(--gold);background:#d6b46a14}
.si i{font-style:normal;width:26px;height:26px;display:grid;place-items:center;border-radius:8px;background:#d6b46a1a;color:var(--gold);font-size:12px;flex:none}
.si span{min-width:0}.si b{display:block;font:700 15px/1.4 'Amiri',serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.si small{display:block;color:var(--muted);font-size:11.5px;line-height:1.3}

.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.tab{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:30px;padding:6px 16px;font-size:13.5px}.tab.on{background:var(--gold);border-color:var(--gold);color:#14261d;font-weight:700}
.azkar{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.dhikr{padding:18px;display:flex;flex-direction:column;gap:10px}.dhikr p{font:20px/1.9 'Amiri',serif}
.dhikr .row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto;font-size:12.5px;color:var(--muted)}
.cbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--gold);background:#d6b46a1a;color:var(--gold2);border-radius:12px;padding:5px 12px;font-size:13px}.cbtn.done{background:var(--gold);color:#14261d}

.ptool{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;margin-bottom:12px}.ptool strong{color:var(--gold2)}.ptool p{line-height:1.5}
.acts{display:flex;gap:10px;align-items:center}
.pgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.pc{padding:14px 6px;text-align:center;border:1px solid var(--line);border-radius:14px;background:var(--card)}.pc .i{color:var(--gold);width:24px;height:24px}
.pc small{display:block;color:var(--muted);font-size:12.5px}.pc strong{display:block;color:var(--gold2);font-size:18px;line-height:1.4}
.pc.next{border-color:var(--gold);background:#d6b46a1c}
.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:24px}

.cal,.notes{padding:18px}.calhead{display:flex;justify-content:space-between;align-items:center;text-align:center}.calhead h3{font-size:18px}.calhead p{line-height:1.4}
.wd,.days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}.wd{margin:14px 0 6px;color:var(--muted);font-size:12px}
.days button{min-height:42px;border:1px solid transparent;border-radius:10px;background:transparent;font-size:14px;line-height:1.2;padding:2px 0}
.days button i{display:block;font-style:normal;font-size:10px;color:var(--muted)}
.days button:hover{border-color:var(--gold)}.days .out{opacity:.35}.days .today{border-color:var(--gold);color:var(--gold2)}.days .sel{background:var(--gold);color:#14261d;font-weight:700}.days .sel i{color:#2c4a3b}
.sel-label{margin-top:12px}
.notes h3{font-size:18px;margin-bottom:10px}.noteform{display:flex;gap:8px}
.nlist{list-style:none;margin:12px 0;padding:0;display:grid;gap:4px}.nlist li{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}.nlist li span{flex:1;overflow-wrap:anywhere}.nlist li button{border:0;background:none;color:#e0907f;display:grid}

.daily{padding:20px}.quote{font:24px/1.9 'Amiri',serif;margin:8px 0}.daily .acts{margin-top:12px;gap:18px}
.about{padding:22px}.about h2{margin-bottom:8px}.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.tags span{border:1px solid var(--line);color:var(--gold2);border-radius:30px;padding:2px 12px;font-size:12.5px}
.form{padding:20px;display:grid;gap:14px;max-width:640px}.form .btn.gold{justify-self:start}
.filerow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.filerow span{overflow-wrap:anywhere;min-width:0}
.ts{min-height:65px;max-width:100%}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;opacity:0;pointer-events:none}
.foot{margin-top:56px;padding:22px 16px;border-top:1px solid var(--line);text-align:center;color:var(--muted);font-size:12.5px}.foot a{color:var(--gold)}
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,16px);background:var(--gold2);color:#14261d;border-radius:12px;padding:9px 18px;font-size:13.5px;font-weight:600;opacity:0;pointer-events:none;transition:.25s;z-index:60;max-width:calc(100% - 32px);text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}
.bnav{display:none}
.calwrap{max-width:560px}
.si.na{opacity:.4}
.fab{position:fixed;z-index:40;inset-inline-end:16px;bottom:calc(20px + env(safe-area-inset-bottom));width:54px;height:54px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--gold2),var(--gold));color:#14261d;display:grid;place-items:center;box-shadow:0 8px 24px #0006;transition:transform .15s}.fab:hover{transform:scale(1.06)}.fab .i{width:24px;height:24px}
.dlg{border:1px solid var(--line);border-radius:var(--r);background:var(--card);color:var(--text);padding:0;width:min(520px,calc(100% - 24px));max-height:90dvh;overflow:auto}
.dlg::backdrop{background:#000a;backdrop-filter:blur(3px)}
.dlghead{display:flex;justify-content:space-between;align-items:center;padding:14px 18px 0}.dlghead h3{font-size:18px}
.dlg .form{max-width:none}

@media(max-width:900px){.topnav{gap:14px}.pgrid{grid-template-columns:repeat(3,1fr)}.azkar{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){
  body{font-size:14px;padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .wrap{width:calc(100% - 24px)}
  .bar{height:52px}.topnav{display:none}.icon-btn{margin-inline-start:auto}
  .hero{padding-top:26px}.hero h1{font-size:22px}.ayah{font-size:19px}
  .stats{gap:8px;margin-top:12px}.stat{padding:12px;gap:10px}.stat>.i{width:34px;height:34px;padding:7px}.stat strong{font-size:14px}.stat small{font-size:11.5px}
  .sec{padding-top:30px}.sec h2,.rowhead h2{font-size:19px;margin-bottom:12px}
  .grid2,.azkar{grid-template-columns:1fr}
  .player{padding:16px}.player h3{font-size:23px}
  .surahs{max-height:260px}
  .ptool{flex-direction:column;align-items:flex-start}.ptool .acts{width:100%}.ptool .btn{flex:1}
  .pgrid{gap:8px}.pc{padding:10px 4px}.pc strong{font-size:16px}
  .cal,.notes,.daily,.about,.form{padding:14px}.days button{min-height:40px}
  .quote{font-size:21px}.dhikr p{font-size:19px}
  .foot{margin-top:36px}
  .toast{bottom:calc(76px + env(safe-area-inset-bottom))}.fab{bottom:calc(74px + env(safe-area-inset-bottom))}
  .bnav{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;inset:auto 0 0 0;z-index:30;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .bnav a{display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 0 6px;color:var(--muted);font-size:11px}.bnav .i{width:21px;height:21px}.bnav a.on{color:var(--gold)}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}