:root{
  --emerald:#0E7C66; --emerald-2:#12A183; --gold:#C9A227; --gold-2:#E4C464;
  --bg:#0A0F0E; --bg-2:#0F1614; --surface:rgba(255,255,255,.045); --surface-2:rgba(255,255,255,.075);
  --border:rgba(255,255,255,.09); --fg:#F3F1EA; --fg-2:#C9C6BC; --muted:#8E9A96;
  --danger:#E5484D; --ok:#2F9E63;
  --shadow:0 18px 40px -22px rgba(0,0,0,.85);
  --radius:18px; --radius-sm:12px; --maxw:980px;
  --ff:'Noto Sans Arabic',system-ui,-apple-system,Segoe UI,sans-serif;
  --ff-q:'Noto Naskh Arabic',serif;
  --safe-b:env(safe-area-inset-bottom,0px);
}
html[data-theme="light"]{
  --emerald:#0B6B57; --emerald-2:#0E8A6D; --gold:#A97C0B; --gold-2:#8A6608;
  --bg:#F6F4EE; --bg-2:#FFFFFF; --surface:rgba(255,255,255,.72); --surface-2:rgba(11,60,50,.06);
  --border:rgba(20,40,36,.12); --fg:#14201D; --fg-2:#3C4A46; --muted:#66756F;
  --shadow:0 14px 34px -24px rgba(16,40,34,.4);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1100px 620px at 92% -12%,rgba(14,124,102,.30),transparent 62%),
    radial-gradient(900px 520px at 4% 8%,rgba(201,162,39,.16),transparent 60%),
    var(--bg);
  color:var(--fg); font-family:var(--ff); font-size:16px; line-height:1.75;
  min-height:100vh; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
html[data-theme="light"] body{background:
  radial-gradient(1000px 560px at 92% -14%,rgba(14,124,102,.14),transparent 62%),
  radial-gradient(820px 480px at 2% 6%,rgba(201,162,39,.13),transparent 60%), var(--bg)}
.app{max-width:var(--maxw); margin:0 auto; padding:0 14px calc(112px + var(--safe-b)); position:relative}
h1,h2,h3,h4{font-family:var(--ff-q); font-weight:600; line-height:1.5; margin:0}
p{margin:0}
a{color:inherit}
button,input,select{font-family:inherit; font-size:inherit; color:inherit}
button{cursor:pointer; border:0; background:none}
:focus-visible{outline:3px solid var(--gold); outline-offset:2px; border-radius:10px}
::selection{background:rgba(201,162,39,.32)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 4px; margin-bottom:8px;
  background:var(--bg); background:color-mix(in srgb,var(--bg) 78%,transparent); backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.brand-mark{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(140deg,var(--emerald),#06453A 62%,#03231E);
  border:1px solid rgba(201,162,39,.45); box-shadow:inset 0 1px 0 rgba(255,255,255,.16),var(--shadow);
}
.brand-mark span{font-family:var(--ff-q); font-size:19px; color:var(--gold-2); font-weight:700; letter-spacing:.5px}
.brand-text{display:flex; flex-direction:column; min-width:0}
.brand-text strong{font-family:var(--ff-q); font-size:19px; font-weight:600; letter-spacing:.3px}
.brand-text span{font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topbar-actions{display:flex; gap:8px}
.icon-btn{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center; color:var(--fg-2);
  background:var(--surface); border:1px solid var(--border);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
}
.icon-btn svg{width:20px;height:20px;stroke-width:1.75}
.icon-btn:hover{transform:translateY(-2px); background:var(--surface-2); color:var(--fg); box-shadow:var(--shadow)}
.icon-btn.primary{background:linear-gradient(140deg,var(--emerald),#06453A); color:#fff; border-color:rgba(201,162,39,.35)}
.icon-btn.on{color:var(--gold-2); border-color:rgba(201,162,39,.5)}
.icon-btn[disabled]{opacity:.4; pointer-events:none}

/* ---------- bottom tabs ---------- */
.tabbar{
  position:fixed; inset:auto 0 0 0; z-index:50; display:grid; grid-template-columns:repeat(5,1fr);
  gap:2px; padding:8px 8px calc(8px + var(--safe-b));
  background:var(--bg-2); background:color-mix(in srgb,var(--bg-2) 82%,transparent); backdrop-filter:blur(18px) saturate(1.4);
  border-top:1px solid var(--border);
}
.tab{
  display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px; border-radius:14px;
  color:var(--muted); font-size:11.5px; font-weight:500; transition:color .18s ease,background .18s ease,transform .18s ease;
}
.tab svg{width:21px;height:21px;stroke-width:1.75}
.tab:hover{color:var(--fg-2); transform:translateY(-2px)}
.tab.is-active{color:var(--gold-2); background:var(--surface-2)}

/* ---------- layout ---------- */
.view{display:none; animation:fadeUp .42s cubic-bezier(.22,.9,.3,1) both}
.view.is-active{display:block}
@keyframes fadeUp{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:.55} 50%{opacity:.9}}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px; backdrop-filter:blur(12px); box-shadow:var(--shadow);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.card.pad-lg{padding:20px}
.card-title{display:flex; align-items:center; gap:9px; margin-bottom:12px}
.card-title svg{width:19px;height:19px;stroke-width:1.75;color:var(--gold-2)}
.card-title h2{font-size:17.5px}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:10px}
.stack{display:grid; gap:14px; margin-top:14px}
.grid-2{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.section-label{font-size:13px;color:var(--muted);margin:18px 4px 8px;font-weight:500}
.hint{font-size:12.5px;color:var(--muted);line-height:1.8}
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:999px;font-size:13px;
  background:var(--surface); border:1px solid var(--border); color:var(--fg-2);
  transition:transform .16s ease,background .16s ease,color .16s ease,border-color .16s ease;
}
.chip svg{width:15px;height:15px;stroke-width:1.75}
.chip:hover{transform:translateY(-2px); background:var(--surface-2)}
.chip.is-active{background:linear-gradient(140deg,var(--emerald),#06453A); color:#fff; border-color:rgba(201,162,39,.4)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:14px;
  font-weight:600;font-size:14.5px;background:var(--surface-2);border:1px solid var(--border);color:var(--fg);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.btn svg{width:17px;height:17px;stroke-width:1.9}
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.btn.solid{background:linear-gradient(140deg,var(--emerald),#06453A); color:#fff; border-color:rgba(201,162,39,.35)}
.btn.gold{background:linear-gradient(140deg,var(--gold),#8A6608); color:#100C02; border-color:rgba(255,255,255,.18)}
.btn.sm{padding:9px 13px;font-size:13px;border-radius:12px}
.btn.ghost{background:transparent}

/* ---------- skeleton + toast ---------- */
.skel{border-radius:14px;background:linear-gradient(90deg,var(--surface),var(--surface-2),var(--surface));
  background-size:220% 100%;animation:shimmer 1.25s ease-in-out infinite;height:14px;margin:9px 0}
@keyframes shimmer{0%{background-position:120% 0}100%{background-position:-20% 0}}
.toast-wrap{position:fixed;inset:auto 14px calc(96px + var(--safe-b)) 14px;z-index:70;display:grid;gap:8px;pointer-events:none}
.toast{
  background:var(--bg-2); background:color-mix(in srgb,var(--bg-2) 92%,transparent); border:1px solid var(--border);
  border-right:3px solid var(--gold); border-radius:14px; padding:12px 14px; font-size:14px;
  box-shadow:var(--shadow); animation:fadeUp .3s ease both; pointer-events:auto;
}
.toast.ok{border-right-color:var(--ok)} .toast.err{border-right-color:var(--danger)}

/* ---------- home / prayer ---------- */
.hero{
  position:relative; overflow:hidden; border-radius:22px; padding:22px;
  background:
    radial-gradient(560px 300px at 88% 6%,rgba(201,162,39,.22),transparent 62%),
    linear-gradient(150deg,rgba(14,124,102,.42),rgba(6,60,50,.55) 58%,rgba(3,28,24,.72));
  border:1px solid rgba(201,162,39,.28); box-shadow:var(--shadow);
}
.hero .eyebrow{font-size:12.5px;color:var(--gold-2);letter-spacing:.6px;font-weight:600}
.hero h1{font-size:clamp(24px,6vw,34px); margin:4px 0 6px}
.hero .count{font-family:var(--ff); font-size:clamp(20px,5vw,26px); font-weight:700; letter-spacing:1px; color:#fff;
  font-variant-numeric:tabular-nums}
.hero .place{font-size:13px;color:var(--fg-2);margin-top:8px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hero .place svg{width:15px;height:15px;stroke-width:1.9}
.prayer-list{display:grid;gap:8px;margin-top:12px}
.prayer-row{
  display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;padding:12px 13px;
  border-radius:14px;background:var(--surface);border:1px solid var(--border);
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
.prayer-row:hover{transform:translateY(-2px);background:var(--surface-2)}
.prayer-row svg{width:19px;height:19px;stroke-width:1.75;color:var(--fg-2)}
.prayer-row .name{font-weight:500}
.prayer-row .time{font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:.4px}
.prayer-row.is-next{border-color:rgba(201,162,39,.55); background:linear-gradient(120deg,rgba(201,162,39,.14),transparent)}
.prayer-row.is-next .name{color:var(--gold-2)}
.prayer-row.is-past{opacity:.6}
.q-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:12px}
.q-action{
  display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:var(--radius);text-align:right;
  background:var(--surface);border:1px solid var(--border);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.q-action svg{width:22px;height:22px;stroke-width:1.75;color:var(--gold-2)}
.q-action strong{font-size:15px;font-weight:600}
.q-action span{font-size:12px;color:var(--muted);line-height:1.6}
.q-action:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(201,162,39,.35)}
.verse-card{font-family:var(--ff-q);font-size:19px;line-height:2.3;text-align:center;padding:18px}
.verse-card small{display:block;font-family:var(--ff);font-size:12px;color:var(--muted);margin-top:8px}

/* ---------- adhkar ---------- */
.adhkar-cats{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.cat-card{
  display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--radius);text-align:right;
  background:var(--surface);border:1px solid var(--border);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.cat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(201,162,39,.35)}
.cat-ico{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(140deg,rgba(14,124,102,.5),rgba(6,60,50,.7));border:1px solid var(--border)}
.cat-ico svg{width:20px;height:20px;stroke-width:1.75;color:var(--gold-2)}
.cat-card b{display:block;font-size:15px}
.cat-card small{color:var(--muted);font-size:12px}
.zikr{padding:16px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.zikr.done{border-color:rgba(47,158,99,.5)}
.zikr-text{font-family:var(--ff-q);font-size:19.5px;line-height:2.25;white-space:pre-line}
.zikr-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;flex-wrap:wrap}
.zikr-ref{font-size:12px;color:var(--muted)}
.counter{
  min-width:74px;padding:9px 14px;border-radius:999px;font-weight:700;font-variant-numeric:tabular-nums;
  background:linear-gradient(140deg,var(--emerald),#06453A);color:#fff;border:1px solid rgba(201,162,39,.35);
  transition:transform .14s ease;
}
.counter:active{transform:scale(.94)}
.counter.finished{background:linear-gradient(140deg,var(--gold),#8A6608);color:#100C02}
.progress{height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin-top:12px}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--emerald-2));transition:width .3s ease}
.tasbih{display:grid;place-items:center;gap:14px;padding:20px}
.tasbih .num{font-size:clamp(44px,14vw,68px);font-weight:700;font-variant-numeric:tabular-nums;
  background:linear-gradient(140deg,var(--gold-2),var(--emerald-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.tasbih .dial{
  width:190px;height:190px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 34% 26%,rgba(255,255,255,.14),transparent 60%),linear-gradient(140deg,var(--emerald),#053A31);
  border:1px solid rgba(201,162,39,.4);box-shadow:var(--shadow),inset 0 0 60px rgba(0,0,0,.35);
  transition:transform .1s ease;
}
.tasbih .dial:active{transform:scale(.97)}

/* ---------- quran ---------- */
.search{
  display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;
  background:var(--surface);border:1px solid var(--border);
}
.search svg{width:18px;height:18px;stroke-width:1.9;color:var(--muted)}
.search input{flex:1;background:none;border:0;outline:none;font-size:15px}
.list{display:grid;gap:8px;margin-top:12px}
.item{
  display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;padding:12px 13px;
  border-radius:14px;background:var(--surface);border:1px solid var(--border);text-align:right;
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
.item:hover{transform:translateY(-2px);background:var(--surface-2);border-color:rgba(201,162,39,.35)}
.item .num{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:13px;
  background:var(--surface-2);border:1px solid var(--border);color:var(--gold-2);font-weight:600}
.item b{display:block;font-family:var(--ff-q);font-size:17px}
.item small{color:var(--muted);font-size:12px}
.item .act{display:flex;gap:6px}
.item .act .icon-btn{width:38px;height:38px;border-radius:11px}
.item.is-playing{border-color:rgba(201,162,39,.55);background:linear-gradient(120deg,rgba(201,162,39,.12),transparent)}
.tagline{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.tag{font-size:11px;padding:3px 9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);color:var(--fg-2)}
.tag.gold{color:var(--gold-2);border-color:rgba(201,162,39,.4)}
.reader{font-family:var(--ff-q);font-size:26px;line-height:2.6;text-align:justify;direction:rtl}
.reader .ayah{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;border-radius:8px}
.reader .ayah:hover{background:rgba(201,162,39,.14)}
.reader .ayah.is-read{color:var(--emerald-2)}
.ayah-badge{display:inline-grid;place-items:center;width:30px;height:30px;margin:0 6px;border-radius:50%;
  font-size:12px;font-family:var(--ff);border:1px solid rgba(201,162,39,.45);color:var(--gold-2);vertical-align:middle}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
select,input[type="text"],input[type="number"]{
  background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 12px;outline:none;
}
label.field{display:grid;gap:6px;font-size:13px;color:var(--muted)}
.switch{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 13px;border-radius:14px;
  background:var(--surface);border:1px solid var(--border)}
.switch input{width:20px;height:20px;accent-color:var(--emerald-2)}

/* ---------- qibla ---------- */
.qibla-wrap{display:grid;place-items:center;gap:16px;padding:24px 10px}
.compass{
  position:relative;width:min(300px,76vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.07),transparent 62%),
    linear-gradient(150deg,rgba(14,124,102,.32),rgba(4,26,22,.72));
  border:1px solid rgba(201,162,39,.35);box-shadow:var(--shadow),inset 0 0 70px rgba(0,0,0,.5);
}
.compass::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,var(--border) 0deg .7deg,transparent .7deg 15deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 13px),#000 calc(100% - 12px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 13px),#000 calc(100% - 12px));
}
.compass .needle{
  position:absolute;left:50%;top:50%;width:4px;height:38%;border-radius:99px;transform-origin:50% 100%;
  background:linear-gradient(180deg,var(--gold-2),var(--emerald));box-shadow:0 0 18px rgba(201,162,39,.5)
}
.compass .kaaba{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:16px;
  display:grid;place-items:center;background:linear-gradient(140deg,#0B0F0E,#123);border:1px solid rgba(201,162,39,.5);color:var(--gold-2)}
.compass .kaaba svg{width:26px;height:26px;stroke-width:1.75}
.compass .deg{position:absolute;left:0;right:0;bottom:8%;text-align:center;font-weight:700;letter-spacing:1px;font-variant-numeric:tabular-nums}
.compass .lbl{position:absolute;left:0;right:0;top:8%;text-align:center;font-size:13px;color:var(--muted)}

/* ---------- player ---------- */
.player{
  position:fixed;z-index:60;left:14px;right:14px;bottom:calc(76px + var(--safe-b));max-width:var(--maxw);
  margin:0 auto;padding:12px 14px;border-radius:18px;
  background:var(--bg-2); background:color-mix(in srgb,var(--bg-2) 90%,transparent);backdrop-filter:blur(18px);
  border:1px solid rgba(201,162,39,.28);box-shadow:var(--shadow);
  display:grid;gap:10px;animation:fadeUp .3s ease both;
}
.player-info{display:flex;align-items:center;gap:11px;min-width:0}
.player-art{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(140deg,var(--emerald),#053A31);border:1px solid var(--border);color:var(--gold-2)}
.player-art svg{width:20px;height:20px;stroke-width:1.75}
.player-meta{min-width:0}
.player-meta strong{display:block;font-family:var(--ff-q);font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-meta span{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-controls{display:flex;align-items:center;gap:8px;justify-content:space-between}
.player-controls .icon-btn{width:40px;height:40px;border-radius:12px}
.player-bar{height:4px;border-radius:99px;background:var(--surface-2);overflow:hidden;cursor:pointer}
.player-fill{height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--emerald-2));transition:width .2s linear}

@media (max-width:420px){
  .prayer-row{grid-template-columns:28px 1fr auto;font-size:15px}
  .item{grid-template-columns:38px 1fr auto;gap:9px}
  .tab span{font-size:10.5px}
}
@media (min-width:900px){
  .view{padding-top:6px}
  .hero{padding:28px}
}