/* ===== ترتيل — الأساس: المتغيرات، التصفير، الخطوط ===== */
:root{
  --font-ui:'Noto Sans Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-head:'Noto Naskh Arabic','Noto Sans Arabic',serif;
  --font-quran:'Amiri Quran','Scheherazade New','Noto Naskh Arabic',serif;
  --r-xs:9px; --r-sm:12px; --r:18px; --r-lg:26px; --r-full:999px;
  --sp:clamp(14px,2.4vw,26px);
  --quran-size:clamp(24px,4.4vw,36px);
  --t-fast:.18s; --t:.32s; --t-slow:.55s;
  --ease:cubic-bezier(.22,.75,.3,1);
}

html[data-theme="light"]{
  --bg:#f4f1e8;
  --bg-2:#fbf9f3;
  --glow-1:rgba(18,160,116,.16);
  --glow-2:rgba(233,196,106,.20);
  --glow-3:rgba(14,107,82,.10);
  --surface:rgba(255,255,255,.66);
  --surface-2:rgba(255,255,255,.86);
  --surface-solid:#fffefb;
  --border:rgba(14,107,82,.16);
  --border-2:rgba(14,107,82,.28);
  --text:#13211c;
  --text-2:#46564f;
  --muted:#78877f;
  --accent:#0e6b52;
  --accent-2:#12a074;
  --accent-ink:#ffffff;
  --gold:#b9892f;
  --gold-soft:#e9c46a;
  --danger:#c0392b;
  --shadow:0 12px 34px rgba(19,33,28,.09);
  --shadow-lg:0 24px 60px rgba(19,33,28,.14);
  --tj-h:#5b6b7a; --tj-l:#0284c7; --tj-s:#9aa7a1; --tj-q:#1d4ed8;
  --tj-g:#15803d; --tj-f:#7c3aed; --tj-u:#be185d; --tj-m:#c62828; --tj-n:#b45309;
  --tj-i:#0d9488;
  --tj-other:#64748b;
}

html[data-theme="dark"]{
  --bg:#080e0c;
  --bg-2:#0c1512;
  --glow-1:rgba(47,215,155,.14);
  --glow-2:rgba(224,190,106,.12);
  --glow-3:rgba(18,160,116,.08);
  --surface:rgba(255,255,255,.045);
  --surface-2:rgba(255,255,255,.075);
  --surface-solid:#0f1a16;
  --border:rgba(255,255,255,.10);
  --border-2:rgba(47,215,155,.30);
  --text:#e6efe9;
  --text-2:#a8bab2;
  --muted:#7c8d86;
  --accent:#2fd79b;
  --accent-2:#17b37e;
  --accent-ink:#05201a;
  --gold:#e0be6a;
  --gold-soft:#f0d99a;
  --danger:#ff8a7a;
  --shadow:0 14px 38px rgba(0,0,0,.5);
  --shadow-lg:0 28px 70px rgba(0,0,0,.62);
  --tj-h:#94a9b8; --tj-l:#38bdf8; --tj-s:#5c6b66; --tj-q:#7ea8ff;
  --tj-g:#4ade80; --tj-f:#c084fc; --tj-u:#f472b6; --tj-m:#f87171; --tj-n:#fbbf24;
  --tj-i:#5eead4;
  --tj-other:#93a5b1;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-ui);background:var(--bg);color:var(--text);
  line-height:1.7;font-weight:400;min-height:100vh;overflow-x:hidden;
  transition:background var(--t) var(--ease),color var(--t) var(--ease);
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul{list-style:none}
[hidden]{display:none !important}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;line-height:1.35;letter-spacing:0}
.fw-500{font-weight:500}.fw-600{font-weight:600}
.muted{color:var(--muted)}
.text-2{color:var(--text-2)}
.small{font-size:.86rem}
.center{text-align:center}
.grow{flex:1}
.num{font-family:var(--font-ui);font-variant-numeric:tabular-nums}

/* تدرّج خلفي هادئ */
.bg-orbs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-orbs span{position:absolute;border-radius:50%;filter:blur(70px);opacity:.85;
  transition:background var(--t-slow) var(--ease),opacity var(--t) var(--ease)}
.bg-orbs span:nth-child(1){width:46vw;height:46vw;background:var(--glow-1);top:-14vw;inset-inline-end:-10vw;animation:float1 22s var(--ease) infinite}
.bg-orbs span:nth-child(2){width:38vw;height:38vw;background:var(--glow-2);bottom:-12vw;inset-inline-start:-8vw;animation:float2 26s var(--ease) infinite}
.bg-orbs span:nth-child(3){width:30vw;height:30vw;background:var(--glow-3);top:38%;inset-inline-start:44%;animation:float1 30s var(--ease) infinite reverse}

@keyframes float1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-3vw,4vh,0) scale(1.08)}}
@keyframes float2{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(4vw,-3vh,0) scale(1.12)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(47,215,155,.35)}50%{box-shadow:0 0 0 12px rgba(47,215,155,0)}}
.anim-up{animation:fadeUp .5s var(--ease) both}
.anim-in{animation:fadeIn .4s var(--ease) both}

/* أيقونات Lucide — قياسات افتراضية */
svg.lucide{width:18px;height:18px;stroke-width:1.75;flex-shrink:0}
.chip svg{width:16px;height:16px;stroke-width:1.85}
.hit-head svg,.state svg{flex-shrink:0}
.no-icons i[data-lucide],.no-icons svg.lucide{display:none}
.no-icons .btn svg,.no-icons .chip svg{display:none}
.no-icons .btn-icon{width:auto;min-width:34px;font-size:.8rem}