/* رتِّل — المصحف: شبكة السور، عرض الآيات، مشغّل التلاوة */
.surah-tools{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:1.25rem}
.search-box{flex:1 1 240px;position:relative}
.search-box svg{position:absolute;inset-inline-start:.85rem;top:50%;transform:translateY(-50%);color:var(--text-muted)}
.search-box input{padding-inline-start:2.6rem}
.surah-grid{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.surah-card{
  display:flex;align-items:center;gap:.9rem;padding:1rem 1.1rem;background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-inner);
  cursor:pointer;text-align:start;font:inherit;color:inherit;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s;
}
.surah-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft);border-color:var(--green-500)}
.surah-num{
  flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;
  background:var(--green-50);border:1px solid var(--green-100);color:var(--green-800);
  border-radius:14px;font-weight:700;font-size:.9rem;
}
.surah-meta{display:grid;min-width:0}
.surah-name{font-family:var(--font-quran);font-size:1.22rem;font-weight:700;line-height:1.3}
.surah-sub{font-size:.76rem;color:var(--text-muted)}

.reader{display:grid;gap:1rem}
.reader-bar{
  position:sticky;top:68px;z-index:20;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;
  padding:.7rem .9rem;border-radius:var(--radius);background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);border:1px solid var(--border);box-shadow:var(--shadow-soft);
}
.reader-title{font-family:var(--font-quran);font-size:1.3rem;font-weight:700}
.ayah-list{display:grid;gap:.5rem;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;box-shadow:var(--shadow-soft)}
.bismillah{font-family:var(--font-quran);text-align:center;font-size:1.4rem;color:var(--green-800);padding:.4rem 0 1rem;border-bottom:1px dashed var(--border)}
.ayah{
  display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;
  padding:.6rem .5rem;border-radius:var(--radius-sm);transition:background .2s;
}
.ayah:hover{background:var(--green-50)}
.ayah.playing{background:var(--gold-50);box-shadow:inset 0 0 0 1.5px var(--gold-200)}
.ayah-num{
  width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;font-size:.72rem;font-weight:700;
  color:var(--green-800);background:var(--green-50);border:1px solid var(--green-100);border-radius:50%;
}
.ayah-text{font-family:var(--font-quran);font-size:clamp(1.3rem,2.2vw,1.6rem);line-height:2.7;text-align:justify}
.ayah-text .end{color:var(--green-600);font-size:.85em}
.ayah-actions{display:flex;gap:.3rem;align-items:center}
.ayah.in-bookmark{box-shadow:inset 3px 0 0 var(--gold-400)}

.player{display:grid;gap:.8rem}
.player-controls{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.progress-track{height:8px;border-radius:4px;background:var(--muted);overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--green-500),var(--gold-400));transition:width .3s linear}
.reciter-select{max-width:230px}
.juz-list{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.juz-chip{padding:.6rem .5rem;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--card);font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;text-align:center;transition:all .18s var(--ease)}
.juz-chip:hover{border-color:var(--green-500);background:var(--green-50);transform:translateY(-2px)}
.juz-chip.active{background:var(--green-700);color:#fff;border-color:var(--green-700)}