/* ===== ذِكر — تايمر + أذكار ===== */
:root{
  --bg:#0b1015; --bg2:#111820; --card:#151d27; --card2:#1a232f;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --txt:#e8edf3; --txt2:#9fb0c2; --txt3:#6b7d90;
  --gold:#d9b168; --gold2:#f0cd8b; --teal:#4fd1c5; --red:#f27b72; --green:#66d19e;
  --ring:#1e2a37;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --r:18px;
  --fs-dhikr:clamp(19px,2.6vw,30px);
  --sans:'IBM Plex Sans Arabic','Segoe UI',Tahoma,system-ui,sans-serif;
  --serif:'Amiri','Noto Naskh Arabic','Traditional Arabic',serif;
}
html[data-theme="light"]{
  --bg:#f6f3ec; --bg2:#efeae0; --card:#fffdf8; --card2:#f7f3ea;
  --line:rgba(20,30,40,.10); --line2:rgba(20,30,40,.18);
  --txt:#1c2530; --txt2:#5a6a79; --txt3:#8b9aa8;
  --gold:#a67c2e; --gold2:#8a6520; --teal:#0f8f84; --red:#c0453c; --green:#2f8f63;
  --ring:#e2dbcb;
  --shadow:0 14px 40px rgba(90,70,30,.14);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1100px 600px at 85% -10%, color-mix(in srgb,var(--gold) 12%, transparent), transparent 60%),
    radial-gradient(900px 500px at 5% 110%, color-mix(in srgb,var(--teal) 10%, transparent), transparent 60%),
    var(--bg);
  color:var(--txt); font-family:var(--sans); min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
button,input,select{font-family:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
.app{max-width:1080px;margin:0 auto;padding:18px 18px 60px}

/* ---- topbar ---- */
.topbar{display:flex;align-items:center;gap:12px;padding:10px 4px 22px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;letter-spacing:.2px}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 14px var(--gold)}
.brand small{color:var(--txt3);font-weight:500;font-size:12.5px}
.spacer{flex:1}
.iconbtn{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);
  background:var(--card);display:grid;place-items:center;font-size:16px;color:var(--txt2);
  transition:.16s}
.iconbtn:hover{border-color:var(--line2);color:var(--txt);transform:translateY(-1px)}

/* ---- layout ---- */
.grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:16px;align-items:stretch}
.grid > .card:last-child{display:flex;flex-direction:column}
.grid > .card:last-child .dhikr-text{flex:1}
.grid > .card:last-child .nextbar{margin-top:auto}
@media(max-width:880px){.grid{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg,var(--card),var(--card2));border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);padding:20px}
.card h2{margin:0 0 14px;font-size:13px;font-weight:600;color:var(--txt3);letter-spacing:.6px}

/* ---- timer ---- */
.modes{display:flex;gap:6px;background:var(--bg2);border:1px solid var(--line);
  border-radius:12px;padding:4px;margin-bottom:18px}
.modes button{flex:1;padding:9px 6px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--txt2);transition:.16s}
.modes button.on{background:var(--card);color:var(--gold);box-shadow:0 2px 10px rgba(0,0,0,.2)}
.ringwrap{position:relative;display:grid;place-items:center;margin:4px auto 6px;width:232px;height:232px}
.ringwrap svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ringwrap circle{fill:none;stroke-width:9;stroke-linecap:round}
.ring-bg{stroke:var(--ring)}
.ring-fg{stroke:var(--gold);transition:stroke-dashoffset .35s linear}
.clock{text-align:center;z-index:1}
.clock .t{font-size:44px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:1px;line-height:1.1}
.clock .lbl{font-size:12px;color:var(--txt3);margin-top:6px;letter-spacing:.6px}
.presets{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin:12px 0 4px}
.chip{padding:6px 13px;border-radius:999px;border:1px solid var(--line);background:var(--bg2);
  font-size:12.5px;color:var(--txt2);transition:.15s}
.chip:hover{border-color:var(--gold);color:var(--gold)}
.chip.on{background:color-mix(in srgb,var(--gold) 18%,transparent);border-color:var(--gold);color:var(--gold2)}
.controls{display:flex;gap:10px;margin-top:16px}
.btn{flex:1;padding:13px;border-radius:13px;font-size:15px;font-weight:600;border:1px solid var(--line);
  background:var(--bg2);color:var(--txt);transition:.16s}
.btn:hover{border-color:var(--line2);transform:translateY(-1px)}
.btn.primary{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#221a08;border-color:transparent}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{flex:0 0 auto;padding:13px 18px;color:var(--txt2)}

/* ---- dhikr ---- */
.dhikr-head{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.cat-tag{font-size:12px;padding:5px 11px;border-radius:999px;
  background:color-mix(in srgb,var(--teal) 16%,transparent);
  color:var(--teal);border:1px solid color-mix(in srgb,var(--teal) 32%,transparent)}
.dhikr-text{font-family:var(--serif);font-size:var(--fs-dhikr);line-height:2;color:var(--txt);
  min-height:130px;display:flex;align-items:center;text-align:center;justify-content:center;
  padding:6px 2px;animation:fade .5s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.dhikr-src{text-align:center;font-size:12.5px;color:var(--txt3);min-height:18px;margin-top:2px}
.nextbar{margin-top:18px}
.nextbar .lbl{display:flex;justify-content:space-between;font-size:12px;color:var(--txt3);margin-bottom:7px}
.track{height:5px;border-radius:99px;background:var(--ring);overflow:hidden}
.track i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--gold));
  border-radius:99px;transition:width .4s linear}
.dhikr-actions{display:flex;gap:9px;margin-top:16px}
.dhikr-actions .btn{padding:11px;font-size:14px}

/* ---- bottom row ---- */
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
@media(max-width:880px){.row2{grid-template-columns:1fr}}
.tasbih{text-align:center}
.count-btn{width:100%;padding:26px 10px;border-radius:16px;border:1px dashed var(--line2);
  background:var(--bg2);transition:.12s}
.count-btn:active{transform:scale(.98);background:color-mix(in srgb,var(--gold) 10%,var(--bg2))}
.count-btn b{display:block;font-size:40px;font-weight:600;color:var(--gold);font-variant-numeric:tabular-nums}
.count-btn span{font-size:12.5px;color:var(--txt3)}
.pinbox p{margin:0 0 14px;font-size:13px;line-height:1.9;color:var(--txt2)}
.hint{font-size:11.5px;color:var(--txt3);margin-top:10px;line-height:1.7}

/* ---- settings drawer ---- */
.drawer{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);
  display:none;z-index:50}
.drawer.open{display:block}
.panel{position:absolute;inset-block:0;inset-inline-start:0;width:min(440px,92vw);
  background:var(--bg2);border-inline-end:1px solid var(--line);padding:22px;overflow-y:auto;
  box-shadow:var(--shadow);animation:slide .22s ease}
@keyframes slide{from{transform:translateX(100%)}to{transform:none}}
html[dir="rtl"] .panel{animation-name:slideR}
@keyframes slideR{from{transform:translateX(-100%)}to{transform:none}}
.panel h3{margin:0 0 20px;font-size:17px;display:flex;align-items:center}
.field{margin-bottom:20px}
.field label{display:block;font-size:13px;color:var(--txt2);margin-bottom:9px;font-weight:600}
.field .sub{font-size:11.5px;color:var(--txt3);font-weight:400;margin-top:3px}
input[type=number],select{width:100%;padding:11px 13px;border-radius:11px;border:1px solid var(--line);
  background:var(--card);font-size:14.5px}
input[type=range]{width:100%;accent-color:var(--gold)}
.cats{display:flex;flex-wrap:wrap;gap:7px}
.cats button{padding:8px 13px;border-radius:999px;border:1px solid var(--line);background:var(--card);
  font-size:12.5px;color:var(--txt3);transition:.15s}
.cats button.on{background:color-mix(in srgb,var(--teal) 16%,transparent);
  border-color:color-mix(in srgb,var(--teal) 40%,transparent);color:var(--teal)}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;
  border-bottom:1px solid var(--line)}
.toggle:last-of-type{border-bottom:0}
.toggle .txt{font-size:13.5px}
.toggle .txt small{display:block;color:var(--txt3);font-size:11.5px;margin-top:3px;line-height:1.6}
.sw{position:relative;width:46px;height:26px;border-radius:99px;background:var(--ring);
  flex:0 0 auto;transition:.2s;border:1px solid var(--line)}
.sw::after{content:'';position:absolute;top:2px;inset-inline-start:2px;width:20px;height:20px;
  border-radius:50%;background:var(--txt3);transition:.2s}
.sw.on{background:color-mix(in srgb,var(--gold) 40%,transparent);border-color:var(--gold)}
.sw.on::after{inset-inline-start:22px;background:var(--gold2)}

/* ---- toast ---- */
.toast{position:fixed;inset-block-end:22px;inset-inline:0;margin-inline:auto;width:max-content;
  max-width:90vw;background:var(--card);border:1px solid var(--line2);color:var(--txt);
  padding:12px 20px;border-radius:13px;font-size:13.5px;box-shadow:var(--shadow);
  opacity:0;transform:translateY(14px);transition:.25s;pointer-events:none;z-index:99}
.toast.show{opacity:1;transform:none}

/* ===== الودجت المثبّت (Picture-in-Picture) ===== */
#widget{display:none}
body.pip-host #widget{display:none}
.pipbody{margin:0;background:var(--bg);color:var(--txt);font-family:var(--sans);
  height:100vh;overflow:hidden}
.pipbody #widget{display:flex!important;flex-direction:column;height:100vh;padding:12px 14px;gap:9px}
.w-top{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--txt3)}
.w-top .tag{color:var(--teal)}
.w-time{margin-inline-start:auto;font-variant-numeric:tabular-nums;font-size:16px;
  font-weight:600;color:var(--gold);letter-spacing:.5px}
.w-dhikr{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--serif);font-size:16.5px;line-height:1.95;overflow:hidden;
  padding:2px 2px;animation:fade .45s ease}
.w-src{font-size:10.5px;color:var(--txt3);text-align:center;min-height:13px}
.w-track{height:3px;border-radius:99px;background:var(--ring);overflow:hidden}
.w-track i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--gold));transition:width .4s linear}
.w-vol{display:flex;align-items:center;gap:7px}
.w-vol input[type=range]{flex:1;height:18px;margin:0;accent-color:var(--gold);cursor:pointer}
.w-vol button{flex:0 0 auto;padding:3px 5px;font-size:13px;line-height:1;border-radius:7px;
  border:1px solid var(--line);background:var(--bg2);transition:.15s}
.w-vol button:hover{border-color:var(--gold)}
.w-vol span{flex:0 0 auto;font-size:10.5px;color:var(--txt3);min-width:32px;text-align:left;
  font-variant-numeric:tabular-nums}
.w-btns{display:flex;gap:6px}
.w-btns button{flex:1;padding:7px 4px;border-radius:9px;border:1px solid var(--line);
  background:var(--bg2);font-size:11.5px;color:var(--txt2);transition:.15s}
.w-btns button:hover{border-color:var(--gold);color:var(--gold)}
.w-btns button.ico{flex:0 0 auto;padding:7px 11px;font-size:13px}
.w-btns button.acc{background:color-mix(in srgb,var(--gold) 20%,transparent);
  border-color:color-mix(in srgb,var(--gold) 45%,transparent);color:var(--gold2)}

/* أسماء الأصوات إنجليزي — تتعرض من الشمال عشان متتقصّش */
#voiceSel{direction:ltr;text-align:left;font-size:13px}
.cats button{line-height:1.5}