/* ============================================================
   ZHH TECH — QURAN WEB PLATFORM
   Design tokens: deep slate + emerald + gold, illuminated-manuscript accents
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Scheherazade+New:wght@400;700&family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  /* ---- Core palette (brief-mandated) ---- */
  --slate-950:#0F172A;
  --slate-900:#131c31;
  --slate-800:#1b2740;
  --slate-700:#26324d;
  --slate-600:#3a4664;
  --line:rgba(212,175,55,0.14);
  --emerald:#0f9d6b;
  --emerald-soft:#14b886;
  --gold:#D4AF37;
  --gold-soft:#e8cf7a;
  --ivory:#f4f1e8;
  --text-hi:#f2f4f8;
  --text-mid:#b9c3d6;
  --text-low:#7c88a3;

  /* ---- Semantic (re-mapped per theme) ---- */
  --bg: var(--slate-950);
  --bg-panel: var(--slate-900);
  --bg-elevated: var(--slate-800);
  --border: var(--line);
  --fg: var(--text-hi);
  --fg-muted: var(--text-mid);
  --fg-faint: var(--text-low);
  --accent: var(--emerald-soft);
  --accent-2: var(--gold);
  --glass: rgba(27,39,64,0.55);
  --glass-border: rgba(212,175,55,0.18);
  --shadow: 0 20px 60px -20px rgba(0,0,0,0.6);

  /* ---- Type ---- */
  --font-arabic: 'Amiri', 'Scheherazade New', serif;
  --font-display: 'Space Grotesk', sans-serif;
  --font-ui: 'Inter', sans-serif;

  /* ---- Scale (user-adjustable via JS custom props) ---- */
  --arabic-size: 2rem;
  --translation-size: 1.05rem;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
}

[data-theme="light"]{
  --bg:#f7f5ef;
  --bg-panel:#ffffff;
  --bg-elevated:#f0ede3;
  --border:rgba(15,23,42,0.08);
  --fg:#181c24;
  --fg-muted:#4d5768;
  --fg-faint:#8a93a6;
  --accent:#0f9d6b;
  --accent-2:#a8791f;
  --glass:rgba(255,255,255,0.7);
  --glass-border:rgba(15,23,42,0.08);
  --shadow: 0 20px 50px -25px rgba(15,23,42,0.25);
}

[data-theme="sepia"]{
  --bg:#efe4cd;
  --bg-panel:#f7efdd;
  --bg-elevated:#e9dcbd;
  --border:rgba(90,62,20,0.16);
  --fg:#2b2110;
  --fg-muted:#5a4b30;
  --fg-faint:#8a7852;
  --accent:#7a5a1e;
  --accent-2:#a8791f;
  --glass:rgba(247,239,221,0.75);
  --glass-border:rgba(90,62,20,0.18);
  --shadow: 0 20px 50px -25px rgba(60,40,10,0.25);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(15,157,107,0.15), transparent 60%),
    radial-gradient(900px 500px at -5% 10%, rgba(212,175,55,0.10), transparent 55%),
    var(--bg);
  color:var(--fg);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
  transition:background-color .35s ease,color .35s ease;
  min-height:100vh;
}
a{ color:inherit; }
button{ font-family:inherit; }
::selection{ background:var(--accent); color:#08110c; }
.hidden{ display:none !important; }
.visually-hidden{ position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:6px; }

/* ============ Layout shell ============ */
#app{
  display:grid;
  grid-template-columns:300px 1fr;
  min-height:100vh;
  padding-bottom:96px; /* space for audio bar */
}
@media (max-width: 960px){
  #app{ grid-template-columns:1fr; }
}

/* ============ Header ============ */
.topbar{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.85rem 1.5rem;
  background:var(--glass);
  backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--glass-border);
  position:sticky; top:0; z-index:40;
}
.brand{ display:flex; align-items:center; gap:.7rem; min-width:0; }
.brand-mark{
  width:38px;height:38px;border-radius:11px;
  background:linear-gradient(145deg,var(--emerald),var(--emerald-soft));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display); font-weight:700; color:#06130d; font-size:.95rem;
  box-shadow:0 6px 18px -6px rgba(15,157,107,.6);
  flex:none;
}
.brand-text{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.brand-text .name{ font-family:var(--font-display); font-weight:700; letter-spacing:.02em; font-size:1.02rem; }
.brand-text .sub{ font-size:.7rem; color:var(--fg-faint); letter-spacing:.08em; text-transform:uppercase; }
.dev-badge{
  font-size:.68rem; color:var(--gold-soft); border:1px solid var(--glass-border);
  padding:.2rem .55rem; border-radius:100px; white-space:nowrap; display:none;
}
@media(min-width:640px){ .dev-badge{ display:inline-block; } }

.top-controls{ display:flex; align-items:center; gap:.4rem; }
.icon-btn{
  background:var(--bg-elevated); border:1px solid var(--border); color:var(--fg-muted);
  width:38px;height:38px;border-radius:11px; display:flex;align-items:center;justify-content:center;
  cursor:pointer; transition:transform .15s ease,color .15s ease,border-color .15s ease;
}
.icon-btn:hover{ color:var(--accent); border-color:var(--accent); transform:translateY(-1px); }
.icon-btn svg{ width:18px;height:18px; }

/* ============ Sidebar ============ */
.sidebar{
  border-right:1px solid var(--border);
  background:var(--bg-panel);
  padding:1.1rem .9rem 2rem;
  overflow-y:auto;
  max-height:calc(100vh - 66px);
  position:sticky; top:66px;
}
@media (max-width:960px){
  .sidebar{ position:static; max-height:none; border-right:none; border-bottom:1px solid var(--border); }
  .sidebar.collapsed{ display:none; }
}

.search-wrap{ position:relative; margin-bottom:.9rem; }
.search-wrap input{
  width:100%; padding:.65rem .9rem .65rem 2.3rem; border-radius:12px;
  border:1px solid var(--border); background:var(--bg-elevated); color:var(--fg);
  font-size:.88rem;
}
.search-wrap svg{ position:absolute; left:.75rem; top:50%; transform:translateY(-50%); width:16px;height:16px; color:var(--fg-faint); }

.tab-row{ display:flex; gap:.4rem; margin-bottom:.9rem; background:var(--bg-elevated); padding:.28rem; border-radius:12px; }
.tab-btn{
  flex:1; border:none; background:transparent; color:var(--fg-muted); padding:.5rem 0;
  border-radius:9px; font-size:.8rem; font-weight:600; cursor:pointer; letter-spacing:.02em;
}
.tab-btn.active{ background:var(--accent); color:#06130d; }

.list-scroll{ display:flex; flex-direction:column; gap:.4rem; }
.surah-card, .juz-card{
  display:flex; align-items:center; gap:.7rem; padding:.55rem .6rem; border-radius:12px;
  cursor:pointer; border:1px solid transparent; transition:background .15s ease,border-color .15s ease;
}
.surah-card:hover, .juz-card:hover{ background:var(--bg-elevated); border-color:var(--border); }
.surah-card.active, .juz-card.active{ background:rgba(15,157,107,0.14); border-color:var(--accent); }
.surah-num{
  width:34px;height:34px;flex:none; border-radius:9px; background:var(--bg-elevated);
  border:1px solid var(--glass-border); display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display); font-size:.78rem; color:var(--gold-soft); position:relative;
}
.surah-meta{ min-width:0; flex:1; }
.surah-meta .en{ font-size:.85rem; font-weight:600; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.surah-meta .info{ font-size:.7rem; color:var(--fg-faint); }
.surah-ar{ font-family:var(--font-arabic); font-size:1.15rem; color:var(--fg-muted); flex:none; }

/* ============ Main / Reader ============ */
main{ padding:1.4rem clamp(1rem,4vw,3rem) 2rem; min-width:0; }

.welcome{
  text-align:center; padding:3rem 1rem; max-width:640px; margin:2rem auto;
}
.welcome .mark{
  width:64px;height:64px;margin:0 auto 1.2rem; border-radius:18px;
  background:linear-gradient(150deg,var(--emerald),var(--gold));
  display:flex;align-items:center;justify-content:center; font-family:var(--font-arabic); font-size:1.8rem; color:#0a1a12;
}
.welcome h1{ font-family:var(--font-display); font-size:1.6rem; margin:0 0 .5rem; }
.welcome p{ color:var(--fg-muted); font-size:.92rem; line-height:1.6; }

.reader-header{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding-bottom:1rem; margin-bottom:1.2rem; border-bottom:1px solid var(--border);
}
.reader-title{ display:flex; align-items:center; gap:.9rem; }
.reader-title .ar-title{ font-family:var(--font-arabic); font-size:1.9rem; color:var(--gold-soft); }
.reader-title .en-title{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; }
.reader-title .meta{ font-size:.75rem; color:var(--fg-faint); }

.reader-tools{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.reader-tools select{
  background:var(--bg-elevated); color:var(--fg); border:1px solid var(--border); border-radius:10px;
  padding:.42rem .6rem; font-size:.78rem;
}

.skeleton{ display:flex; flex-direction:column; gap:1rem; }
.skel-line{ height:64px; border-radius:16px; background:linear-gradient(90deg,var(--bg-elevated) 25%,var(--bg-panel) 50%,var(--bg-elevated) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; }
@keyframes shimmer{ 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

.ayah-list{ display:flex; flex-direction:column; gap:.9rem; }
.ayah-card{
  border:1px solid var(--border); border-radius:var(--radius-md); padding:1.1rem 1.2rem;
  background:var(--bg-panel); position:relative; scroll-margin-top:90px;
  transition:border-color .25s ease, background .25s ease;
}
.ayah-card.playing{ border-color:var(--accent); background:rgba(15,157,107,0.08); box-shadow:var(--shadow); }
.ayah-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem; }
.ayah-badge{
  display:flex; align-items:center; gap:.4rem; font-size:.72rem; color:var(--fg-faint);
}
.ayah-badge .num{
  width:26px;height:26px; border-radius:8px; border:1px solid var(--glass-border);
  display:flex;align-items:center;justify-content:center; font-family:var(--font-display); color:var(--gold-soft); font-size:.68rem;
}
.ayah-actions{ display:flex; gap:.3rem; }
.ayah-actions button{
  background:transparent; border:none; color:var(--fg-faint); cursor:pointer; width:30px;height:30px;
  border-radius:8px; display:flex;align-items:center;justify-content:center;
}
.ayah-actions button:hover{ color:var(--accent); background:var(--bg-elevated); }
.ayah-actions button.saved{ color:var(--gold); }
.ayah-actions svg{ width:16px;height:16px; }

.ayah-arabic{
  direction:rtl; font-family:var(--font-arabic); font-size:var(--arabic-size); line-height:2.3;
  color:var(--fg); text-align:right; margin-bottom:.7rem;
}
.ayah-translation{ font-size:var(--translation-size); color:var(--fg-muted); line-height:1.7; }

.empty-state{ text-align:center; padding:3rem 1rem; color:var(--fg-faint); }
.empty-state svg{ width:40px;height:40px; margin-bottom:.8rem; opacity:.6; }

/* ============ Audio bar ============ */
.audio-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:var(--glass); backdrop-filter:blur(18px) saturate(140%);
  border-top:1px solid var(--glass-border);
  padding:.6rem 1rem; display:flex; align-items:center; gap:.9rem;
  transform:translateY(110%); transition:transform .35s cubic-bezier(.2,.9,.2,1);
}
.audio-bar.show{ transform:translateY(0); }
.audio-now{ display:flex; flex-direction:column; min-width:120px; max-width:220px; }
.audio-now .t1{ font-size:.8rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.audio-now .t2{ font-size:.68rem; color:var(--fg-faint); }
.audio-controls{ display:flex; align-items:center; gap:.5rem; }
.audio-controls button{
  background:var(--bg-elevated); border:1px solid var(--border); color:var(--fg);
  width:36px;height:36px;border-radius:50%; display:flex;align-items:center;justify-content:center; cursor:pointer;
}
.audio-controls .play-btn{ width:44px;height:44px; background:var(--accent); color:#06130d; border:none; }
.audio-controls svg{ width:16px;height:16px; }
.scrubber-wrap{ flex:1; display:flex; align-items:center; gap:.6rem; min-width:120px; }
.scrubber-wrap span{ font-size:.68rem; color:var(--fg-faint); font-variant-numeric:tabular-nums; }
input[type="range"]{
  -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:4px; background:var(--bg-elevated); cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:13px;height:13px; border-radius:50%; background:var(--gold); border:2px solid var(--slate-950); margin-top:-1px;
}
.audio-extra{ display:flex; align-items:center; gap:.5rem; }
.audio-extra select{ background:var(--bg-elevated); color:var(--fg); border:1px solid var(--border); border-radius:8px; padding:.3rem .4rem; font-size:.72rem; }
@media (max-width:720px){
  .audio-now{ display:none; }
  .audio-extra select:first-child{ display:none; }
}

/* ============ Modal (settings) ============ */
.modal-overlay{
  position:fixed; inset:0; background:rgba(6,10,18,0.6); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; z-index:80; padding:1rem;
}
.modal{
  background:var(--bg-panel); border:1px solid var(--glass-border); border-radius:var(--radius-lg);
  padding:1.5rem; width:100%; max-width:420px; box-shadow:var(--shadow);
}
.modal h2{ font-family:var(--font-display); font-size:1.1rem; margin:0 0 1rem; }
.setting-row{ display:flex; align-items:center; justify-content:space-between; padding:.6rem 0; border-bottom:1px solid var(--border); }
.setting-row:last-of-type{ border-bottom:none; }
.setting-row label{ font-size:.85rem; color:var(--fg-muted); }
.theme-swatches{ display:flex; gap:.5rem; }
.swatch{ width:28px;height:28px;border-radius:50%; cursor:pointer; border:2px solid transparent; }
.swatch.active{ border-color:var(--gold); }
.swatch.dark{ background:#0F172A; } .swatch.light{ background:#f7f5ef; } .swatch.sepia{ background:#efe4cd; }
.font-stepper{ display:flex; align-items:center; gap:.5rem; }
.font-stepper button{ width:28px;height:28px; border-radius:8px; border:1px solid var(--border); background:var(--bg-elevated); color:var(--fg); cursor:pointer; }
.modal-close{ width:100%; margin-top:1.2rem; padding:.7rem; border-radius:12px; border:none; background:var(--accent); color:#06130d; font-weight:600; cursor:pointer; }

/* ============ Footer ============ */
footer{
  grid-column:1 / -1; border-top:1px solid var(--border); padding:2rem 1.5rem; margin-top:1rem;
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; color:var(--fg-faint); font-size:.8rem;
}
.footer-links{ display:flex; gap:1rem; }
.footer-links a{ display:flex; align-items:center; gap:.35rem; text-decoration:none; color:var(--fg-muted); }
.footer-links a:hover{ color:var(--accent); }
.footer-links svg{ width:16px;height:16px; }

/* scrollbars */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:var(--bg-elevated); border-radius:8px; }
::-webkit-scrollbar-track{ background:transparent; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}