:root{
  --bg:#0c1210;
  --bg-2:#101915;
  --card:#15211c;
  --card-2:#1a2922;
  --line:#24382e;
  --gold:#c9a24b;
  --gold-2:#e5c878;
  --green:#2e7d5b;
  --text:#e9efe9;
  --muted:#9db3a6;
  --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Tajawal',sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.8;
  overflow-x:hidden;
}
.bg-pattern{
  position:fixed;inset:0;z-index:-1;opacity:.05;pointer-events:none;
  background-image:radial-gradient(circle at 25% 25%, var(--gold) 0, transparent 40%),
                   radial-gradient(circle at 75% 75%, var(--green) 0, transparent 40%);
  background-size:600px 600px;
}
.container{max-width:1150px;margin:0 auto;padding:0 20px}
a{color:inherit;text-decoration:none}

/* ===== Header ===== */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(12,18,16,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:flex;align-items:center;gap:10px;font-size:1.3rem;font-weight:800}
.brand-mark{color:var(--gold);font-size:1.6rem}
.main-nav{display:flex;gap:6px}
.nav-link{padding:8px 16px;border-radius:10px;color:var(--muted);font-weight:500;transition:.2s}
.nav-link:hover{color:var(--text)}
.nav-link.active{background:var(--card-2);color:var(--gold-2)}
.nav-toggle{display:none;background:none;border:1px solid var(--line);color:var(--text);border-radius:8px;padding:6px 12px;font-size:1.2rem;cursor:pointer}

/* ===== Hero ===== */
.hero{padding:90px 0 70px;text-align:center}
.hero-bismillah{
  font-family:'Amiri Quran',serif;font-size:2rem;color:var(--gold-2);margin-bottom:18px;
}
.hero-title{font-size:2.7rem;font-weight:800;line-height:1.5;margin-bottom:14px}
.hero-title span{color:var(--gold-2)}
.hero-sub{color:var(--muted);font-size:1.1rem;max-width:640px;margin:0 auto 28px}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:44px}
.btn{
  display:inline-block;padding:12px 30px;border-radius:12px;font-weight:700;cursor:pointer;
  border:1px solid transparent;transition:.2s;font-size:1rem;font-family:inherit;
}
.btn-primary{background:linear-gradient(135deg,var(--gold),#a87f2c);color:#14100a}
.btn-primary:hover{filter:brightness(1.1)}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-2)}
.hero-stats{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.stat{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 28px;min-width:110px;
}
.stat-num{display:block;font-size:1.7rem;font-weight:800;color:var(--gold-2)}
.stat-label{color:var(--muted);font-size:.9rem}

/* ===== Sections ===== */
.section{padding:70px 0}
.section-alt{background:var(--bg-2)}
.section-head{text-align:center;margin-bottom:36px}
.section-head h2{font-size:2.1rem;font-weight:800;color:var(--gold-2)}
.section-head p{color:var(--muted);margin-top:6px}

/* ===== Toolbar ===== */
.toolbar{
  display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;
}
.search-input{
  flex:1;min-width:220px;background:var(--bg);border:1px solid var(--line);
  border-radius:10px;padding:11px 16px;color:var(--text);font-family:inherit;font-size:1rem;
}
.search-input:focus{outline:none;border-color:var(--gold)}
.select{
  background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:11px 14px;color:var(--text);font-family:inherit;font-size:.95rem;cursor:pointer;max-width:260px;
}
.select:focus{outline:none;border-color:var(--gold)}

/* ===== Surah grid ===== */
.surah-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.surah-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;cursor:pointer;transition:.2s;display:flex;gap:14px;align-items:center;
}
.surah-card:hover{transform:translateY(-3px);border-color:var(--gold);background:var(--card-2)}
.surah-num{
  width:46px;height:46px;flex-shrink:0;display:grid;place-items:center;
  border:2px solid var(--gold);border-radius:12px;color:var(--gold-2);font-weight:800;
  transform:rotate(45deg);
}
.surah-num span{transform:rotate(-45deg)}
.surah-info h4{font-size:1.05rem}
.surah-info p{color:var(--muted);font-size:.85rem}
.surah-badge{margin-inline-start:auto;font-size:.75rem;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:2px 10px}

/* ===== Reader ===== */
.reader-overlay{
  position:fixed;inset:0;z-index:100;display:none;
  background:rgba(5,8,7,.96);overflow-y:auto;
}
.reader-overlay.open{display:block}
.reader{max-width:900px;margin:0 auto;padding:20px}
.reader-header{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  position:sticky;top:0;background:rgba(5,8,7,.97);padding:14px 0;border-bottom:1px solid var(--line);z-index:5;
}
.reader-close{
  background:var(--card);border:1px solid var(--line);color:var(--text);
  width:40px;height:40px;border-radius:10px;cursor:pointer;font-size:1.1rem;
}
.reader-title-wrap{flex:1;min-width:180px}
.reader-title-wrap h3{font-size:1.4rem;color:var(--gold-2)}
.reader-title-wrap p{color:var(--muted);font-size:.85rem}
.btn-play-all{
  background:var(--green);border:none;color:#fff;padding:10px 20px;border-radius:10px;
  font-family:inherit;font-weight:700;cursor:pointer;font-size:.95rem;
}
.btn-play-all.playing{background:#a33}
.reader-body{padding:26px 0}
.bismillah-line{
  font-family:'Amiri Quran',serif;font-size:2.1rem;text-align:center;color:var(--gold-2);
  margin-bottom:26px;
}
.ayah-block{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;margin-bottom:16px;transition:.2s;
}
.ayah-block.playing{border-color:var(--gold);background:var(--card-2);box-shadow:0 0 0 1px var(--gold)}
.ayah-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.ayah-num-badge{
  background:var(--green);color:#fff;border-radius:8px;padding:2px 12px;font-size:.85rem;font-weight:700;
}
.ayah-play-btn{
  background:var(--card-2);border:1px solid var(--line);color:var(--gold-2);
  width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:.9rem;transition:.2s;
}
.ayah-play-btn:hover{border-color:var(--gold)}
.ayah-arabic{
  font-family:'Amiri Quran',serif;font-size:1.9rem;line-height:2.3;color:var(--text);
}
.ayah-translation{margin-top:12px;color:var(--muted);border-right:3px solid var(--green);padding-right:12px;font-size:.98rem}
.ayah-tafsir{
  margin-top:12px;background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;font-size:.92rem;color:#cfdcd2;
}
.ayah-tafsir strong{color:var(--gold-2)}
.reader-footer{display:flex;justify-content:space-between;padding:16px 0 40px;gap:12px;flex-wrap:wrap}

/* ===== Reciters ===== */
.reciter-search-wrap{max-width:440px;margin:0 auto 28px}
.reciter-search-wrap .search-input{width:100%}
.reciter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.reciter-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;text-align:center;transition:.2s;
}
.reciter-card:hover{border-color:var(--gold)}
.reciter-card.active-reciter{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.reciter-avatar{
  width:70px;height:70px;margin:0 auto 12px;border-radius:50%;
  background:linear-gradient(135deg,var(--green),#1d4a37);display:grid;place-items:center;
  font-size:1.6rem;font-weight:800;color:var(--gold-2);
}
.reciter-card h4{font-size:1.1rem;margin-bottom:2px}
.reciter-card p{color:var(--muted);font-size:.85rem;margin-bottom:14px}
.reciter-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.reciter-btn{
  background:var(--card-2);border:1px solid var(--line);color:var(--text);
  padding:8px 14px;border-radius:8px;cursor:pointer;font-family:inherit;font-size:.85rem;transition:.2s;
}
.reciter-btn:hover{border-color:var(--gold);color:var(--gold-2)}
.reciter-btn.primary{background:var(--green);border-color:var(--green);color:#fff}
.qiraat-note{color:var(--muted);text-align:center;max-width:720px;margin:28px auto 0;font-size:.92rem}

/* ===== About ===== */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.about-grid h2{font-size:2rem;color:var(--gold-2);margin-bottom:14px}
.about-grid p{color:var(--muted);margin-bottom:12px}
.about-grid strong{color:var(--text)}
.about-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.about-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.about-icon{font-size:1.5rem;display:block;margin-bottom:8px}
.about-card h4{color:var(--gold-2);margin-bottom:4px}
.about-card p{font-size:.88rem}
.honesty-note{
  margin-top:36px;background:var(--card);border:1px solid var(--line);
  border-right:4px solid var(--gold);border-radius:10px;padding:16px 20px;color:var(--muted);font-size:.95rem;
}
.honesty-note strong{color:var(--gold-2)}

/* ===== Footer ===== */
.site-footer{border-top:1px solid var(--line);padding:30px 0;background:var(--bg-2)}
.footer-inner{text-align:center;color:var(--muted)}
.footer-src{font-size:.82rem;margin-top:6px}

/* ===== Audio bar ===== */
.audio-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:90;
  background:var(--card-2);border-top:1px solid var(--gold);
  display:none;align-items:center;gap:16px;padding:8px 20px;
}
.audio-bar.show{display:flex}
.audio-bar span{font-size:.9rem;color:var(--gold-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.audio-bar audio{height:40px;flex:1;max-width:520px}

/* ===== Responsive ===== */
@media (max-width:820px){
  .hero-title{font-size:1.9rem}
  .about-grid{grid-template-columns:1fr}
  .main-nav{
    display:none;position:absolute;top:66px;right:0;left:0;
    background:var(--bg-2);flex-direction:column;padding:12px;border-bottom:1px solid var(--line);
  }
  .main-nav.open{display:flex}
  .nav-toggle{display:block}
  .ayah-arabic{font-size:1.5rem}
  .toolbar .select{max-width:100%;width:100%}
}