/* ===== ترتيل — صفحات العرض ===== */
.surah-hero{position:relative;overflow:hidden;border-radius:var(--r-lg);
  padding:clamp(22px,4vw,40px) clamp(18px,3vw,34px);
  background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 14%,transparent),transparent 62%),
    var(--surface);
  border:1px solid var(--border);backdrop-filter:blur(14px);box-shadow:var(--shadow);
  text-align:center;margin-bottom:clamp(16px,2.4vw,26px);animation:fadeUp .5s var(--ease) both}
.surah-hero::before{content:"";position:absolute;inset:8px;border-radius:calc(var(--r-lg) - 8px);
  border:1px solid color-mix(in srgb,var(--gold) 34%,transparent);pointer-events:none}
.surah-hero::after{content:"";position:absolute;inset:-40% -10% auto;height:180px;
  background:radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--gold) 18%,transparent),transparent 70%);
  pointer-events:none}
.surah-hero .hero-kicker{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;color:var(--gold);
  letter-spacing:1px;margin-bottom:10px;font-weight:600}
.surah-hero .hero-kicker svg{width:15px;height:15px}
.surah-hero h1{font-size:clamp(1.9rem,5vw,3.1rem);color:var(--text);margin-bottom:10px;line-height:1.3}
.surah-hero .hero-meta{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.hero-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;position:relative;z-index:1}
.basmala{font-family:var(--font-quran);font-size:calc(var(--quran-size) * .82);color:var(--accent);
  text-align:center;padding:16px 0 8px;line-height:2;letter-spacing:0}

/* قائمة الآيات */
.ayah-list{display:flex;flex-direction:column;gap:6px}
.ayah{position:relative;display:flex;gap:14px;align-items:flex-start;
  padding:16px clamp(12px,2vw,20px);border-radius:var(--r);
  border:1px solid transparent;scroll-margin-top:110px;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),
  transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.ayah:hover{background:var(--surface);border-color:var(--border)}
.ayah.is-active{background:color-mix(in srgb,var(--accent) 11%,transparent);
  border-color:var(--border-2);box-shadow:0 8px 26px color-mix(in srgb,var(--accent) 14%,transparent)}
.ayah.is-active::before{content:"";position:absolute;inset-inline-start:0;top:12%;bottom:12%;width:3px;
  border-radius:var(--r-full);background:linear-gradient(180deg,var(--accent),var(--gold))}
.ayah.is-bookmarked .ayah-num{background:linear-gradient(135deg,var(--gold),var(--gold-soft));
  color:#3a2c07;border-color:transparent}
.ayah-body{flex:1;min-width:0}
.ayah-text{font-family:var(--font-quran);font-size:var(--quran-size);line-height:2.25;
  color:var(--text);text-align:justify;text-align-last:center;word-spacing:.06em;
  transition:font-size var(--t) var(--ease),color var(--t) var(--ease)}
.ayah.sajda .ayah-text::after{content:" ۩";color:var(--gold)}
.ayah-foot{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:10px;
  opacity:0;transform:translateY(-3px);transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
.ayah:hover .ayah-foot,.ayah:focus-within .ayah-foot,.ayah.is-active .ayah-foot{opacity:1;transform:none}
@media (hover:none){.ayah-foot{opacity:1;transform:none}}
.ayah-num{flex-shrink:0;width:44px;height:44px;display:grid;place-items:center;font-size:.82rem;font-weight:600;
  color:var(--accent);border:1.5px solid var(--border-2);border-radius:50% 12% 50% 12%;
  background:var(--surface-2);font-variant-numeric:tabular-nums;
  transition:transform var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.ayah:hover .ayah-num{transform:rotate(6deg) scale(1.05)}
.ayah-num.sm{width:34px;height:34px;font-size:.72rem}

/* ألوان أحكام التجويد */
.tj{border-radius:4px;padding:0 .5px;transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.tj-h{color:var(--tj-h)}
.tj-l{color:var(--tj-l)}
.tj-s{color:var(--tj-s)}
.tj-q{color:var(--tj-q)}
.tj-g{color:var(--tj-g)}
.tj-f{color:var(--tj-f)}
.tj-u{color:var(--tj-u)}
.tj-m{color:var(--tj-m)}
.tj-n,.tj-p,.tj-o,.tj-c,.tj-w,.tj-i,.tj-a,.tj-d,.tj-b,.tj-e,.tj-k,.tj-x,.tj-y,.tj-z,.tj-j,.tj-r,.tj-t,.tj-v{color:var(--tj-n)}
.tj-other{color:var(--tj-other)}
.taj-legend{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:8px;margin-top:12px}
.taj-legend li{display:flex;align-items:center;gap:9px;font-size:.85rem;color:var(--text-2)}
.taj-legend .dot{width:13px;height:13px;border-radius:4px;flex-shrink:0;box-shadow:0 0 0 1px var(--border) inset}
.taj-head{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-bottom:20px}
@media (max-width:900px){.taj-head{grid-template-columns:1fr}}
.taj-intro h2,.taj-legend-card h2{color:var(--text)}
.taj-group{margin-bottom:26px}
.taj-group>h3{display:flex;align-items:center;gap:10px;font-size:1.2rem;margin-bottom:12px;color:var(--accent)}
.taj-group>h3 svg{width:20px;height:20px;stroke-width:1.75}
.taj-rules{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.rule{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px;
  backdrop-filter:blur(12px);transition:transform var(--t) var(--ease),border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.rule:hover{transform:translateY(-3px);border-color:var(--border-2);box-shadow:var(--shadow)}
.rule-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.rule-head h4{font-size:1.03rem;color:var(--text)}
.rule-def{font-size:.9rem;color:var(--text-2);margin-bottom:10px}
.rule-letters{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:11px}
.rule-letters span{font-family:var(--font-quran);font-size:1.08rem;padding:2px 9px;border-radius:var(--r-xs);
  background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);border:1px solid var(--border)}
.rule-ex{font-family:var(--font-quran);font-size:1.24rem;line-height:2;color:var(--text);
  padding:10px 12px;border-radius:var(--r-sm);background:var(--surface-2);border:1px dashed var(--border-2)}
.rule-ex mark{background:color-mix(in srgb,var(--gold) 30%,transparent);color:inherit;border-radius:4px;padding:0 2px}
.rule-ex figcaption{font-family:var(--font-ui);font-size:.74rem;color:var(--muted);margin-top:6px;display:block}

/* شبكة الفهرس */
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:13px}
.surah-card{display:flex;align-items:center;gap:13px;padding:14px 16px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--border);backdrop-filter:blur(12px);cursor:pointer;
  transition:transform var(--t) var(--ease),border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),
  background var(--t) var(--ease)}
.surah-card:hover{transform:translateY(-4px);border-color:var(--border-2);box-shadow:var(--shadow-lg);
  background:var(--surface-2)}
.surah-card .sc-num{width:42px;height:42px;flex-shrink:0;display:grid;place-items:center;
  font-family:var(--font-head);font-weight:700;font-size:.95rem;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid var(--border-2);
  border-radius:50% 12% 50% 12%;font-variant-numeric:tabular-nums}
.surah-card .sc-main{flex:1;min-width:0}
.surah-card .sc-name{font-family:var(--font-head);font-weight:700;font-size:1.08rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.surah-card .sc-sub{font-size:.76rem;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.surah-card.is-current{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}

.juz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:11px}
.juz-card{padding:13px 15px;border-radius:var(--r);background:var(--surface);border:1px solid var(--border);
  cursor:pointer;text-align:center;transition:transform var(--t) var(--ease),border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.juz-card:hover{transform:translateY(-3px);border-color:var(--border-2);box-shadow:var(--shadow)}
.juz-card b{display:block;font-family:var(--font-head);font-size:1.05rem;color:var(--text)}
.juz-card small{color:var(--muted);font-size:.76rem}
.juz-card .jc-ayahs{display:block;margin-top:6px;font-size:.72rem;color:var(--accent)}

/* نتائج البحث */
.hit{display:block;padding:15px 17px;border-radius:var(--r);background:var(--surface);border:1px solid var(--border);
  margin-bottom:10px;cursor:pointer;transition:transform var(--t) var(--ease),border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.hit:hover{transform:translateY(-3px);border-color:var(--border-2);box-shadow:var(--shadow)}
.hit .hit-head{display:flex;align-items:center;gap:9px;margin-bottom:7px;flex-wrap:wrap}
.hit .hit-surah{font-family:var(--font-head);font-weight:700;color:var(--accent)}
.hit .hit-text{font-family:var(--font-quran);font-size:1.34rem;line-height:2;color:var(--text)}
.hit mark{background:color-mix(in srgb,var(--gold) 34%,transparent);color:inherit;border-radius:4px;padding:0 3px}
.search-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.result-count{font-size:.85rem;color:var(--muted)}

/* ===== مواءمة أكواد رواية «التجويد الملوّن» مع مفتاح الألوان ===== */
.tj-m{color:var(--tj-m)}
.tj-n,.tj-o,.tj-p{color:var(--tj-n)}
.tj-q{color:var(--tj-q)}
.tj-i{color:var(--tj-i)}
.tj-g,.tj-a,.tj-w{color:var(--tj-g)}
.tj-f,.tj-c{color:var(--tj-f)}
.tj-u,.tj-d{color:var(--tj-u)}
.tj-h{color:var(--tj-h)}
.tj-l{color:var(--tj-l)}
.tj-s{color:var(--tj-s)}
.tj-other{color:var(--tj-other)}