/* ============================================
   مشهور قرآن v2.0 — التنسيقات الاحترافية الكاملة
   Professional Quran Platform Styles
   ============================================ */

/* ---------- CSS Variables (Night Default) ---------- */
:root{
  --bg0:#050816;--bg1:#070b1a;--bg2:#0c1229;
  --sidebar-bg:rgba(8,12,26,.94);--card-bg:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  --card-hover:rgba(25,195,125,.06);--stroke:rgba(255,255,255,.08);--stroke2:rgba(255,255,255,.14);
  --text:#eaf0ff;--text2:#c8d4f0;--muted:rgba(234,240,255,.65);--muted2:rgba(234,240,255,.45);
  --accent:#19c37d;--accent2:#14a66a;--accent-glow:rgba(25,195,125,.25);
  --pink:#ff4d8d;--pink-glow:rgba(255,77,141,.20);--gold:#f5c542;
  --shadow:0 20px 60px rgba(0,0,0,.55);--shadow2:0 12px 30px rgba(0,0,0,.35);--shadow-card:0 8px 32px rgba(0,0,0,.3);
  --blur:blur(18px);--radius:22px;--radius-sm:14px;--radius-xs:10px;
  --font:"Cairo",system-ui,-apple-system,sans-serif;
  --font-quran:"Amiri",serif;
  --transition:.22s cubic-bezier(.4,0,.2,1);
  --topbar-h:56px;--sidebar-w:240px;--player-h:188px;--mobile-nav-h:60px;
}

/* ---------- Day Theme ---------- */
html[data-theme="day"]{
  --bg0:#f2f5fc;--bg1:#eaeff8;--bg2:#e2e8f4;
  --sidebar-bg:rgba(255,255,255,.94);--card-bg:linear-gradient(145deg,rgba(255,255,255,.92),rgba(255,255,255,.78));
  --stroke:rgba(11,21,48,.10);--stroke2:rgba(11,21,48,.16);
  --text:#0b1530;--text2:#2a3a5c;--muted:rgba(11,21,48,.60);--muted2:rgba(11,21,48,.45);
  --shadow:0 16px 50px rgba(11,21,48,.10);--shadow2:0 8px 24px rgba(11,21,48,.08);
  --shadow-card:0 6px 24px rgba(11,21,48,.08);
}
html[data-theme="day"] body{background:linear-gradient(180deg,var(--bg0),var(--bg1))!important}

/* ---------- Warm Theme ---------- */
html[data-theme="warm"]{
  --bg0:#1a1410;--bg1:#16120e;--bg2:#201a14;
  --sidebar-bg:rgba(26,20,16,.94);--card-bg:linear-gradient(145deg,rgba(255,220,180,.06),rgba(255,220,180,.02));
  --stroke:rgba(255,220,180,.10);--stroke2:rgba(255,220,180,.16);
  --text:#ffeedd;--text2:#dac8b2;--muted:rgba(255,238,221,.60);--muted2:rgba(255,238,221,.40);
  --accent:#e8a840;--accent2:#cc9232;--accent-glow:rgba(232,168,64,.25);
  --shadow:0 20px 60px rgba(0,0,0,.50);--shadow2:0 12px 30px rgba(0,0,0,.30);
  --shadow-card:0 8px 32px rgba(0,0,0,.28);
}

/* ---------- Font variants ---------- */
html[data-font="tajawal"]{--font:"Tajawal",system-ui,sans-serif}
html[data-font="cairo"]{--font:"Cairo",system-ui,sans-serif}

/* ---------- Reset & Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{direction:rtl;scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;max-width:100vw;width:100%}
body{
  font-family:var(--font);
  background:
    radial-gradient(1400px 900px at 78% 8%,rgba(25,195,125,.12),transparent 60%),
    radial-gradient(1000px 700px at 12% 28%,rgba(255,77,141,.06),transparent 55%),
    radial-gradient(900px 800px at 68% 88%,rgba(25,195,125,.06),transparent 60%),
    linear-gradient(180deg,var(--bg0),var(--bg1));
  background-attachment:fixed;color:var(--text);min-height:100vh;overflow-x:hidden;max-width:100vw;width:100%;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit}
img{max-width:100%;display:block}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Scrollbar */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10);border-radius:99px}
html[data-theme="day"] ::-webkit-scrollbar-thumb{background:rgba(11,21,48,.10)}

/* ============================================
   LAYOUT
   ============================================ */
.app-wrapper{display:flex;min-height:100vh;overflow-x:hidden;width:100%;max-width:100vw;}

/* ---------- Top Bar ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;height:var(--topbar-h);
  background:rgba(8,12,26,.82);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border-bottom:1px solid var(--stroke);display:flex;align-items:center;justify-content:space-between;
  padding:0 22px;z-index:1000;box-shadow:0 10px 26px rgba(0,0,0,.12);
  animation:topbarSlideIn .55s cubic-bezier(.22,1,.36,1) both;
}

html[data-theme="day"] .topbar{background:rgba(255,255,255,.85)}
html[data-theme="warm"] .topbar{background:rgba(26,20,16,.85)}

.topbar-right{display:flex;align-items:center;gap:12px}
.topbar-logo{
  display:flex;align-items:center;gap:9px;font-weight:900;font-size:16px;
  transition:transform var(--transition),filter var(--transition);
  animation:softRise .55s cubic-bezier(.22,1,.36,1) .05s both;
}
.logo-icon{width:24px;height:24px;display:grid;place-items:center;color:var(--accent)}
.logo-icon .ui-svg{width:22px;height:22px}
.topbar-social{
  display:flex;align-items:center;gap:14px;
  animation:softRise .55s cubic-bezier(.22,1,.36,1) .12s both;
}
.ui-icon{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1em;line-height:1;font-style:normal;font-weight:900;
}
.ui-svg{
  width:18px;height:18px;display:block;flex-shrink:0;
  stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
.social-link{
  color:var(--muted);font-size:13px;font-weight:700;transition:var(--transition);display:flex;align-items:center;gap:5px;
  padding:8px 10px;border-radius:999px;
}
.social-link:hover{color:var(--accent);background:rgba(255,255,255,.04)}
.topbar-contact{
  background:linear-gradient(135deg,#25D366,#128C7E);color:#fff!important;
  padding:8px 16px;border-radius:999px;font-weight:800;font-size:12px;
  display:inline-flex;align-items:center;gap:5px;transition:var(--transition);
}
.topbar-contact:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(37,211,102,.3)}
.topbar-hamburger{
  display:none;width:38px;height:38px;border-radius:var(--radius-sm);border:1px solid var(--stroke);
  background:rgba(255,255,255,.04);font-size:18px;cursor:pointer;
  place-items:center;transition:var(--transition);
  animation:softRise .55s cubic-bezier(.22,1,.36,1) .16s both;
}
.topbar-hamburger .ui-svg{width:18px;height:18px}
.topbar-logo:hover{transform:translateY(-1px);filter:drop-shadow(0 6px 16px rgba(25,195,125,.14))}

/* ---------- Sidebar ---------- */
.sidebar{
  position:fixed;top:var(--topbar-h);right:0;width:var(--sidebar-w);height:calc(100vh - var(--topbar-h));
  background:var(--sidebar-bg);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border-left:1px solid var(--stroke);display:flex;flex-direction:column;padding:16px 10px 120px;z-index:900;overflow-y:auto;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.sidebar-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:899;opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.sidebar-overlay.show{opacity:1;pointer-events:auto}
body.sidebar-open{overflow:hidden}
body.sidebar-open .player-bar,
body.sidebar-open .mobile-nav,
body.sidebar-open .scroll-top{opacity:0;pointer-events:none;transform:translateY(110%)}
.sidebar-brand{text-align:center;margin-bottom:6px;padding-bottom:12px;border-bottom:1px solid var(--stroke)}
.sidebar-brand h2{font-size:18px;font-weight:900;background:linear-gradient(135deg,var(--accent),#4ade80);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sidebar-nav{flex:1;display:flex;flex-direction:column;gap:3px;margin-top:6px}
.nav-category{font-size:11px;font-weight:900;color:var(--muted2);margin:12px 14px 4px;text-transform:uppercase;letter-spacing:0.5px}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--radius-sm);
  font-weight:800;font-size:14px;color:var(--muted);transition:var(--transition);cursor:pointer;
  border:1px solid transparent;
}
.nav-item:hover{background:rgba(255,255,255,.04);color:var(--text)}
.nav-item.active{background:rgba(25,195,125,.08);border-color:rgba(25,195,125,.16);color:var(--accent)}
.nav-icon{width:22px;height:22px;text-align:center;display:grid;place-items:center;flex-shrink:0;color:currentColor}
.nav-icon .ui-svg{width:18px;height:18px}
.nav-badge{
  margin-right:auto;margin-left:0;background:rgba(255,77,141,.14);border:1px solid rgba(255,77,141,.22);
  color:var(--pink);font-size:11px;font-weight:900;padding:2px 8px;border-radius:999px;
}
.sidebar-footer{padding-top:10px;border-top:1px solid var(--stroke);text-align:center}
.sidebar-version{font-size:12px;color:var(--muted2);font-weight:700}
.sidebar-copy{font-size:11px;color:var(--muted2);font-weight:700;margin-top:4px}
.sidebar-brand-link{
  color:var(--text);font-weight:900;transition:var(--transition);text-decoration:none;
}
.sidebar-brand-link:hover{color:var(--accent)}

/* ---------- Main Content ---------- */
.main-area{
  flex:1;margin-right:var(--sidebar-w);margin-top:var(--topbar-h);
  padding:32px 32px calc(var(--player-h) + 32px);min-height:calc(100vh - var(--topbar-h));
  max-width:100%;width:100%;margin-left:0;
}

@media(max-width:1024px){
  .sidebar{
    top:var(--topbar-h);
    width:min(84vw,320px);
    height:calc(100vh - var(--topbar-h));
    padding:18px 12px 24px;
    z-index:1300;
    box-shadow:-20px 0 48px rgba(0,0,0,.35);
    border-left:1px solid var(--stroke2);
  }
  .sidebar-overlay{z-index:1290}
  .main-area{margin-right:0;margin-left:0;padding:20px 14px calc(var(--player-h) + 24px);}
}

/* ============================================
   HERO
   ============================================ */
.hero{
  padding:24px 24px 22px;margin-bottom:18px;border-radius:28px;
  border:1px solid var(--stroke);
  background:
    radial-gradient(520px 260px at 12% 14%,rgba(255,255,255,.06),transparent 70%),
    radial-gradient(380px 280px at 88% 24%,rgba(25,195,125,.18),transparent 65%),
    linear-gradient(135deg,rgba(6,10,24,.98),rgba(11,18,41,.96));
  position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:auto -8% -32% auto;width:48%;height:56%;
  background:radial-gradient(circle,rgba(255,255,255,.06),transparent 68%);
  pointer-events:none;filter:blur(10px);opacity:.55;animation:heroDrift 9s ease-in-out infinite alternate;
}
.hero-glow{
  position:absolute;top:-50%;left:-30%;width:160%;height:200%;
  background:radial-gradient(circle,rgba(25,195,125,.04),transparent 70%);
  animation:heroPulse 6s ease-in-out infinite alternate;pointer-events:none;
}
@keyframes heroPulse{0%{opacity:.3;transform:scale(1)}100%{opacity:.8;transform:scale(1.1)}}
@keyframes heroDrift{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-18px,-10px,0)}}
@keyframes topbarSlideIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@keyframes softRise{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
.hero-grid{display:grid;grid-template-columns:minmax(320px,1.2fr) minmax(260px,.78fr);gap:18px;align-items:stretch;position:relative;z-index:1}
.hero-copy{text-align:right;display:flex;flex-direction:column;justify-content:center;min-width:0}
.hero-copy > *{animation:softRise .7s cubic-bezier(.22,1,.36,1) both}
.hero-copy > *:nth-child(1){animation-delay:.04s}
.hero-copy > *:nth-child(2){animation-delay:.1s}
.hero-copy > *:nth-child(3){animation-delay:.16s}
.hero-copy > *:nth-child(4){animation-delay:.22s}
.hero-kicker{
  display:inline-flex;align-items:center;width:max-content;margin-bottom:10px;padding:7px 12px;
  border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);
  color:var(--text2);font-size:12px;font-weight:900;
}
.hero-title{
  font-size:clamp(28px,3.5vw,46px);font-weight:900;line-height:1.14;max-width:11ch;
  color:#f5f8ff;background:none;-webkit-text-fill-color:unset;
  margin-bottom:10px;position:relative;
}
.hero-sub{font-size:14px;color:var(--text2);font-weight:700;position:relative;max-width:48ch;line-height:1.8}
.hero-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.hero-action{
  min-height:42px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);font-size:12px;font-weight:900;transition:var(--transition);
}
.hero-action:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.07);box-shadow:0 10px 24px rgba(0,0,0,.16)}
.hero-action-primary{background:linear-gradient(135deg,var(--accent),#38d996);color:#052012;border-color:transparent}
.hero-action-primary:hover{box-shadow:0 12px 30px rgba(25,195,125,.22);background:linear-gradient(135deg,#24d789,#49e0a2)}
.hero-panel{
  border-radius:24px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  padding:16px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-card);backdrop-filter:blur(10px);
  animation:softRise .8s cubic-bezier(.22,1,.36,1) .12s both;
}
.hero-panel-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hero-panel-label,.hero-panel-date{font-size:12px;font-weight:900;color:var(--muted)}
.hero-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.hero-metric{
  border-radius:16px;padding:11px 10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  display:flex;flex-direction:column;gap:4px;min-width:0;
}
.hero-metric-value{font-size:20px;font-weight:900;color:#fff}
.hero-metric-label{font-size:10px;font-weight:800;color:var(--muted)}
.hero-focus{
  margin-top:auto;padding:14px;border-radius:18px;background:rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.06);
}
.hero-focus-label{font-size:10px;font-weight:900;color:var(--muted);margin-bottom:6px}
.hero-focus-title{font-size:15px;font-weight:900;line-height:1.6;margin-bottom:6px}
.hero-focus-sub{font-size:11px;font-weight:700;color:var(--text2);line-height:1.7}
html[data-theme="day"] .hero{
  background:
    radial-gradient(420px 240px at 10% 20%,rgba(255,255,255,.9),transparent 70%),
    radial-gradient(400px 260px at 90% 18%,rgba(25,195,125,.12),transparent 65%),
    linear-gradient(135deg,#f7f9ff,#eaf1fb);
}
html[data-theme="day"] .hero-title{color:#0b1530}
html[data-theme="day"] .hero-sub,
html[data-theme="day"] .hero-metric-label,
html[data-theme="day"] .hero-panel-label,
html[data-theme="day"] .hero-panel-date,
html[data-theme="day"] .hero-focus-sub{color:var(--text2)}
html[data-theme="day"] .hero-panel,
html[data-theme="day"] .hero-focus,
html[data-theme="day"] .hero-kicker,
html[data-theme="day"] .hero-metric{background:rgba(255,255,255,.72)}

/* ============================================
   SEARCH
   ============================================ */
.search-container{
  position:relative;max-width:760px;margin:0 auto 20px;
  display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:center;
}
.search-container.with-back{grid-template-columns:auto minmax(0,1fr)}
.top-search-back{
  display:none;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 20px;
  border-radius:999px;border:1px solid var(--stroke);background:rgba(255,255,255,.04);
  color:var(--muted);font-size:13px;font-weight:900;cursor:pointer;transition:var(--transition);
  white-space:nowrap;
}
.search-container.with-back .top-search-back{display:inline-flex}
.top-search-back:hover{border-color:var(--stroke2);color:var(--text);transform:translateY(-1px)}
.top-search-back .ui-svg{width:16px;height:16px}
.search-input{
  width:100%;height:52px;border-radius:999px;border:1px solid var(--stroke);
  background:rgba(255,255,255,.04);color:var(--text);padding:0 20px 0 52px;font-size:14px;
  font-weight:700;outline:none;transition:var(--transition);box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
html[data-theme="day"] .search-input{background:rgba(255,255,255,.72)}
.search-input::placeholder{color:var(--muted2)}
.search-input:focus{border-color:rgba(25,195,125,.40);box-shadow:0 0 0 3px rgba(25,195,125,.12),0 14px 28px rgba(0,0,0,.10);transform:translateY(-1px)}
.search-icon{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border-radius:var(--radius-xs);display:grid;place-items:center;
  border:1px solid var(--stroke);background:rgba(255,255,255,.05);color:var(--muted);pointer-events:none;font-size:14px;
}
.search-container.with-back .search-icon{left:20px}

/* ============================================
   SECTION HEADERS & STATS
   ============================================ */
.section-header{text-align:center;margin-bottom:20px;position:relative}
.section-header::after{
  content:"";display:block;width:86px;height:2px;margin:12px auto 0;border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(25,195,125,.7),transparent);opacity:.8;
}
.section-header-left{text-align:right}
.section-title{font-size:clamp(22px,3.5vw,36px);font-weight:900;letter-spacing:-.02em}
.section-sub{color:var(--muted);font-weight:700;font-size:13px;margin-top:6px;line-height:1.8}
.stats-bar{
  text-align:center;font-size:12px;color:var(--muted2);font-weight:800;margin-bottom:16px;
  padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.05);
  background:rgba(255,255,255,.025);width:max-content;max-width:100%;margin-inline:auto;
}
.page-overview{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px;
}

/* ============================================
   GRID SYSTEM
   ============================================ */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.grid-3{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.grid-2{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.grid-1{grid-template-columns:1fr}

/* ============================================
   RECITER CARD
   ============================================ */
.card{
  position:relative;border-radius:var(--radius);border:1px solid var(--stroke);
  background:
    radial-gradient(180px 120px at 80% 18%,rgba(25,195,125,.06),transparent 70%),
    var(--card-bg);
  box-shadow:var(--shadow-card);overflow:hidden;cursor:pointer;transition:var(--transition);
}
.card:hover{transform:translateY(-4px);border-color:rgba(25,195,125,.22);box-shadow:0 16px 40px rgba(0,0,0,.35)}
.card-avatar{
  width:100%;aspect-ratio:1;display:grid;place-items:center;font-size:52px;font-weight:900;
  font-family:var(--font-quran);color:var(--accent);
  background:radial-gradient(circle at 50% 60%,rgba(25,195,125,.12),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
  position:relative;
}
.card-avatar::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,var(--bg0) 0%,transparent 40%);pointer-events:none;
}
html[data-theme="day"] .card-avatar::after{background:linear-gradient(0deg,var(--bg0) 0%,transparent 40%);opacity:.08}
.card-fav{
  position:absolute;top:10px;left:10px;width:36px;height:36px;border-radius:10px;
  border:1px solid var(--stroke);background:rgba(0,0,0,.28);backdrop-filter:blur(8px);
  display:grid;place-items:center;font-size:15px;cursor:pointer;z-index:2;transition:var(--transition);color:rgba(255,255,255,.7);
}
.card-fav .ui-svg,.radio-fav .ui-svg{width:16px;height:16px}
.card-fav.active{background:rgba(255,77,141,.18);border-color:rgba(255,77,141,.30);color:var(--pink)}
.card-fav:hover{transform:scale(1.1)}
.card-body{padding:12px 14px 14px}
.card-name{font-size:14px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:8px}
.card-info{display:flex;align-items:center;justify-content:space-between;gap:6px}
.card-badge{
  display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;
  font-size:11px;font-weight:800;background:rgba(25,195,125,.10);border:1px solid rgba(25,195,125,.18);color:var(--accent);
}
.card-play{
  width:30px;height:30px;border-radius:8px;border:1px solid var(--stroke);background:rgba(255,255,255,.04);
  display:grid;place-items:center;transition:var(--transition);font-size:12px;
}
.card-play:hover{background:rgba(25,195,125,.14);border-color:rgba(25,195,125,.22);color:var(--accent)}

/* ============================================
   RADIO CARD
   ============================================ */
.radio-card{
  border-radius:var(--radius);border:1px solid var(--stroke);background:var(--card-bg);
  box-shadow:var(--shadow-card);padding:18px;cursor:pointer;transition:var(--transition);
  display:flex;align-items:center;gap:14px;position:relative;
}
.radio-card:hover{transform:translateY(-3px);border-color:rgba(25,195,125,.22);box-shadow:0 16px 34px rgba(0,0,0,.18)}
.radio-meta-badges{
  position:absolute;top:10px;left:10px;display:flex;align-items:center;gap:8px;z-index:2;
}
.radio-fav{
  position:static;width:34px;height:34px;border-radius:10px;
  border:1px solid var(--stroke);background:rgba(0,0,0,.24);backdrop-filter:blur(8px);
  display:grid;place-items:center;font-size:14px;transition:var(--transition);color:rgba(255,255,255,.75);z-index:1;
}
.radio-fav.active{background:rgba(255,77,141,.18);border-color:rgba(255,77,141,.30);color:var(--pink)}
.radio-fav:hover{transform:scale(1.06)}
.radio-icon{
  width:48px;height:48px;border-radius:14px;background:rgba(25,195,125,.10);
  border:1px solid rgba(25,195,125,.18);display:grid;place-items:center;font-size:20px;flex-shrink:0;
}
.radio-icon .ui-svg,.rewaya-icon .ui-svg,.tafsir-icon .ui-svg,.history-icon .ui-svg,.empty-icon .ui-svg,.surah-card-arrow .ui-svg,.surah-download .ui-svg{width:18px;height:18px}
.radio-name{flex:1;font-weight:900;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.radio-live{
  display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:999px;
  font-size:11px;font-weight:900;background:rgba(255,77,141,.14);border:1px solid rgba(255,77,141,.22);color:var(--pink);flex-shrink:0;
}
.live-dot{width:7px;height:7px;border-radius:50%;background:#ff2b55;animation:livePulse 1.4s ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,43,85,.4)}50%{opacity:.6;box-shadow:0 0 0 5px rgba(255,43,85,0)}}

/* ============================================
   HISN CARD
   ============================================ */
.hisn-card{border-radius:var(--radius);border:1px solid var(--stroke);background:var(--card-bg);box-shadow:var(--shadow-card);padding:20px;transition:var(--transition)}
.hisn-card:hover{border-color:var(--stroke2)}
.hisn-header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}
.hisn-title{font-weight:900;font-size:16px;flex:1}
.hisn-cat{font-size:10px;font-weight:800;color:var(--muted2);white-space:nowrap}
.hisn-text{font-family:var(--font-quran);font-size:17px;line-height:2;color:var(--text2);margin-bottom:14px;white-space:pre-wrap}
.hisn-progress{width:100%;height:4px;border-radius:99px;background:var(--stroke);margin-bottom:12px;overflow:hidden}
.hisn-progress-fill{height:100%;border-radius:99px;background:var(--accent);transition:width .3s ease}
.hisn-actions{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.hisn-counter{display:flex;align-items:center;gap:6px}
.hisn-count-label{font-weight:900;font-size:13px}
.hisn-count-val{font-weight:900;font-size:16px;color:var(--accent);min-width:48px;text-align:center}
.hisn-btn{
  width:36px;height:36px;border-radius:10px;border:1px solid var(--stroke);background:rgba(255,255,255,.04);
  display:grid;place-items:center;font-size:16px;cursor:pointer;transition:var(--transition);
}
.hisn-btn:hover{border-color:var(--stroke2);transform:translateY(-1px)}
.hisn-btn-main{
  padding:8px 16px;width:auto;border-radius:999px;font-weight:900;font-size:13px;
  display:inline-flex;align-items:center;gap:5px;background:rgba(25,195,125,.12);
  border:1px solid rgba(25,195,125,.20);color:var(--accent);cursor:pointer;transition:var(--transition);
}
.hisn-btn-main.done{background:rgba(25,195,125,.20);pointer-events:none}

/* ============================================
   HISTORY CARD
   ============================================ */
.history-item{
  display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--radius);
  border:1px solid var(--stroke);background:var(--card-bg);cursor:pointer;transition:var(--transition);
}
.history-item:hover{border-color:rgba(25,195,125,.22);transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,0,0,.14)}
.history-icon{
  width:44px;height:44px;border-radius:12px;background:rgba(25,195,125,.10);
  border:1px solid rgba(25,195,125,.18);display:grid;place-items:center;font-size:18px;flex-shrink:0;
}
.history-info{flex:1;min-width:0}
.history-name{font-weight:900;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.history-sub{font-size:12px;color:var(--muted2);font-weight:700;margin-top:2px}
.history-time{font-size:11px;color:var(--muted2);font-weight:700;white-space:nowrap}
.history-play{
  width:36px;height:36px;border-radius:10px;border:1px solid var(--stroke);
  background:rgba(255,255,255,.04);display:grid;place-items:center;transition:var(--transition);
}
.history-play:hover{background:rgba(25,195,125,.12);color:var(--accent)}

/* ============================================
   SURAH LIST
   ============================================ */
.surah-list-item{
  display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:var(--radius-sm);
  border:1px solid transparent;cursor:pointer;transition:var(--transition);font-weight:800;font-size:14px;
}
.surah-list-item:hover{background:rgba(25,195,125,.06);border-color:rgba(25,195,125,.12)}
.surah-list-item.active{background:rgba(25,195,125,.10);border-color:rgba(25,195,125,.18);color:var(--accent)}
.surah-list-item.playing{animation:playingPulse 2s ease infinite}
@keyframes playingPulse{0%,100%{border-color:rgba(25,195,125,.18)}50%{border-color:rgba(25,195,125,.40)}}
.surah-num{
  width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid var(--stroke);
  display:grid;place-items:center;font-size:12px;font-weight:900;color:var(--muted);flex-shrink:0;
}
.surah-download{
  margin-right:auto;margin-left:0;width:28px;height:28px;border-radius:8px;
  border:1px solid var(--stroke);background:rgba(255,255,255,.04);display:grid;place-items:center;
  font-size:12px;cursor:pointer;transition:var(--transition);color:var(--muted);
}
.surah-download:hover{color:var(--accent);border-color:rgba(25,195,125,.20)}

/* ============================================
   RECITER DETAIL (Back button + moshaf selector)
   ============================================ */
.back-btn{
  display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:999px;
  border:1px solid var(--stroke);background:rgba(255,255,255,.04);font-weight:800;font-size:13px;
  color:var(--muted);cursor:pointer;transition:var(--transition);margin-bottom:16px;
}
.back-btn:hover{border-color:var(--stroke2);color:var(--text);transform:translateY(-1px)}
.moshaf-selector{
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:18px;
}
.moshaf-tab{
  padding:8px 18px;border-radius:999px;border:1px solid var(--stroke);background:rgba(255,255,255,.03);
  color:var(--muted);font-weight:800;font-size:13px;cursor:pointer;transition:var(--transition);
}
.moshaf-tab:hover{border-color:var(--stroke2);color:var(--text)}
.moshaf-tab.active{background:rgba(25,195,125,.10);border-color:rgba(25,195,125,.20);color:var(--accent)}
.reciter-overview{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 auto 18px;
}
.reciter-shell{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:18px;margin-bottom:18px;
}
.reciter-profile-card,.reciter-history-card{
  border-radius:24px;border:1px solid var(--stroke);background:var(--card-bg);padding:20px;
}
.reciter-profile-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:14px}
.reciter-profile-avatar{
  width:72px;height:72px;border-radius:22px;border:1px solid rgba(25,195,125,.22);
  background:linear-gradient(135deg,rgba(25,195,125,.16),rgba(255,255,255,.03));
  display:grid;place-items:center;font-size:28px;font-weight:900;color:var(--accent);flex-shrink:0;
}
.reciter-profile-meta h3{font-size:26px;font-weight:900;margin-bottom:6px}
.reciter-profile-meta p{font-size:13px;line-height:1.9;color:var(--text2)}
.reciter-quick-links,.reciter-history-list{display:grid;gap:10px}
.reciter-quick-link,.reciter-history-item{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;
  border-radius:18px;border:1px solid var(--stroke);background:rgba(255,255,255,.03);
}
.reciter-quick-link{cursor:pointer;transition:var(--transition)}
.reciter-quick-link:hover{border-color:rgba(25,195,125,.22);transform:translateY(-1px)}
.reciter-quick-link strong,.reciter-history-item strong{font-size:14px}
.reciter-quick-link span,.reciter-history-item span{font-size:12px;color:var(--muted);font-weight:800}
.reciter-history-item button{flex-shrink:0}
.reciter-stat,.reciter-actions{
  border-radius:20px;border:1px solid var(--stroke);background:var(--card-bg);
  padding:16px;display:flex;flex-direction:column;justify-content:center;gap:6px;
}
.reciter-stat-value{font-size:24px;font-weight:900;color:var(--accent)}
.reciter-stat-label{font-size:12px;font-weight:800;color:var(--muted)}
.reciter-actions{gap:10px}
.reading-nav{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px;
}
.reading-nav-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ============================================
   TABS / PILLS
   ============================================ */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;justify-content:center}
.tab{
  padding:9px 18px;border-radius:999px;border:1px solid var(--stroke);background:rgba(255,255,255,.03);
  color:var(--muted);font-weight:800;font-size:13px;cursor:pointer;transition:var(--transition);
}
.tab:hover{border-color:var(--stroke2);color:var(--text)}
.tab.active{background:rgba(25,195,125,.10);border-color:rgba(25,195,125,.20);color:var(--accent)}

/* ============================================
   SETTINGS
   ============================================ */
.settings-section{max-width:640px;margin:0 auto}
.settings-group{margin-bottom:24px}
.settings-label{font-weight:900;font-size:15px;margin-bottom:12px}
.settings-options{display:flex;gap:10px;flex-wrap:wrap}
.settings-panel{
  padding:18px;border-radius:22px;border:1px solid var(--stroke);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
}
.settings-note{font-size:12px;color:var(--muted);font-weight:700;line-height:1.8;margin-top:8px}
.settings-cache-card{
  margin-top:10px;padding:16px 16px 10px;border-radius:20px;border:1px solid rgba(25,195,125,.12);
  background:linear-gradient(180deg,rgba(25,195,125,.06),rgba(255,255,255,.02));
}
.settings-cache-head{
  display:flex;flex-direction:column;gap:4px;margin-bottom:12px;
}
.settings-cache-head strong{
  font-size:14px;font-weight:900;color:var(--text);
}
.settings-cache-head span{
  font-size:12px;font-weight:700;color:var(--muted);
}
.settings-cache-list{
  display:grid;gap:10px;
}
.settings-cache-item{
  padding:12px 14px;border-radius:16px;border:1px solid var(--stroke);background:rgba(255,255,255,.03);
}
.settings-cache-item strong{
  display:block;font-size:13px;font-weight:900;margin-bottom:4px;
}
.settings-cache-item span{
  display:block;font-size:12px;font-weight:700;line-height:1.8;color:var(--muted);
}
.settings-opt{
  padding:11px 22px;border-radius:var(--radius-sm);border:1px solid var(--stroke);
  background:rgba(255,255,255,.03);font-weight:800;font-size:13px;
  color:var(--muted);cursor:pointer;transition:var(--transition);
}
.settings-opt:hover{border-color:var(--stroke2);transform:translateY(-1px)}
.settings-opt.active{background:rgba(25,195,125,.10);border-color:rgba(25,195,125,.20);color:var(--accent)}
.settings-btn-danger{
  padding:11px 24px;border-radius:var(--radius-sm);border:1px solid rgba(255,77,141,.22);
  background:rgba(255,77,141,.10);color:var(--pink);font-weight:900;font-size:13px;cursor:pointer;transition:var(--transition);
}
.settings-btn-danger:hover{background:rgba(255,77,141,.18);transform:translateY(-1px)}
.settings-opt:disabled,
.settings-btn-danger:disabled{
  opacity:.6;cursor:progress;transform:none;
}
.developer-shell{max-width:720px;margin:0 auto}
.developer-card{
  padding:24px;border-radius:26px;border:1px solid var(--stroke);
  background:
    radial-gradient(320px 180px at 88% 18%,rgba(25,195,125,.12),transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  box-shadow:var(--shadow-card);
}
.developer-kicker{
  display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;
  background:rgba(25,195,125,.1);border:1px solid rgba(25,195,125,.18);
  color:var(--accent);font-size:11px;font-weight:900;margin-bottom:14px;
}
.developer-card h3{font-size:28px;font-weight:900;margin-bottom:10px}
.developer-card p{font-size:14px;line-height:1.95;color:var(--text2);font-weight:700;max-width:58ch}
.developer-note{
  margin-top:16px;padding:14px 16px;border-radius:18px;
  border:1px solid rgba(25,195,125,.14);background:rgba(25,195,125,.06);
  color:var(--text);font-size:13px;line-height:2;font-weight:800;
}
.developer-prayer-box{
  margin-top:14px;padding:16px 18px;border-radius:20px;
  border:1px solid var(--stroke);background:rgba(255,255,255,.035);
}
.developer-prayer-label{
  font-size:11px;font-weight:900;color:var(--accent);margin-bottom:8px;
}
.developer-prayer-box p{
  margin:0;max-width:none;font-size:14px;line-height:2;color:var(--text2);
}
.developer-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.developer-link{
  display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;
  border-radius:999px;border:1px solid var(--stroke);background:rgba(255,255,255,.04);
  color:var(--text);font-size:13px;font-weight:800;transition:var(--transition);gap:8px;
}
.developer-link:hover{transform:translateY(-2px);border-color:var(--stroke2);background:rgba(255,255,255,.08)}
.developer-link-primary{
  background:linear-gradient(135deg,rgba(25,195,125,.16),rgba(25,195,125,.28));
  border-color:rgba(25,195,125,.24);color:var(--accent);
}
.developer-links{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px;
}
.developer-link .ui-svg{width:15px;height:15px;flex-shrink:0}
.developer-link span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.developer-link-ltr{direction:ltr;unicode-bidi:plaintext}

/* ============================================
   BUTTONS
   ============================================ */
.btn{
  padding:9px 20px;border-radius:var(--radius-sm);border:1px solid var(--stroke);
  background:rgba(255,255,255,.04);font-weight:800;font-size:13px;color:var(--text);
  cursor:pointer;transition:var(--transition);display:inline-flex;align-items:center;gap:5px;
}
.btn:hover{border-color:var(--stroke2);transform:translateY(-1px)}
.btn-danger{background:rgba(255,77,141,.10);border-color:rgba(255,77,141,.22);color:var(--pink)}
.btn-accent{background:rgba(25,195,125,.10);border-color:rgba(25,195,125,.20);color:var(--accent)}
.fav-actions{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;justify-content:center}

/* ============================================
   PLAYER BAR (Robust Grid Layout)
   ============================================ */
.player-bar{
  position:fixed;bottom:0;left:0;right:0;
  background:rgba(8,12,26,.88);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border-top:1px solid var(--stroke);z-index:1100;
  display:grid;
  grid-template-areas:
    "left left"
    "actions actions"
    "seek seek";
  grid-template-columns:minmax(0,1fr);
  align-items:center;
  gap:14px;
  padding:14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  min-height:150px;
  box-shadow:0 -18px 50px rgba(0,0,0,.28);
  animation:playerDockIn .7s cubic-bezier(.22,1,.36,1) both;
}
@keyframes playerDockIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
html[data-theme="day"] .player-bar{background:rgba(255,255,255,.90)}
html[data-theme="warm"] .player-bar{background:rgba(26,20,16,.90)}

.player-left {grid-area:left; display:flex;align-items:center;gap:12px;min-width:0;justify-content:flex-start}
.player-cover {
  width:48px;height:48px;border-radius:14px;border:1px solid var(--stroke);
  background:rgba(25,195,125,.10);display:grid;place-items:center;color:var(--accent);
  font-weight:900;font-size:16px;flex-shrink:0;
}
.player-cover .ui-svg{width:22px;height:22px}
.player-meta {min-width:0;text-align:right}
.player-title {font-weight:900;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.player-subtitle {font-size:12px;color:var(--muted2);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;margin-top:4px}
.player-mobile-main{display:contents}
.player-mobile-meta{display:none}

.player-actions-row{grid-area:actions;display:flex;align-items:center;justify-content:center;gap:14px;min-width:0}
.player-controls {display:flex;align-items:center;gap:16px;justify-content:center;flex-shrink:0}
.player-btn {
  width:48px;height:48px;border-radius:16px;border:1px solid var(--stroke);background:rgba(255,255,255,.045);
  display:grid;place-items:center;font-size:17px;cursor:pointer;transition:var(--transition);
}
.player-btn .ui-svg{width:20px;height:20px}
.player-btn:hover{transform:translateY(-1px);border-color:var(--stroke2)}
.player-btn-play{background:linear-gradient(135deg,rgba(25,195,125,.16),rgba(25,195,125,.28));border-color:rgba(25,195,125,.3);color:var(--accent);width:60px;height:60px;font-size:22px;border-radius:18px;box-shadow:0 8px 24px rgba(25,195,125,.2);animation:playButtonFloat 2.8s ease-in-out infinite}
.player-btn-play .ui-svg{width:22px;height:22px}
.player-btn-play:hover{transform:scale(1.05);box-shadow:0 12px 32px rgba(25,195,125,.3);border-color:rgba(25,195,125,.4)}
@keyframes playButtonFloat{0%,100%{box-shadow:0 8px 24px rgba(25,195,125,.18)}50%{box-shadow:0 12px 28px rgba(25,195,125,.28)}}

.player-right {display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:nowrap;min-width:0}
.player-tools{
  display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:18px;
  border:1px solid rgba(255,255,255,.05);background:rgba(255,255,255,.02);
}
.player-tools-primary{padding-inline:12px}
.player-tools-secondary{background:rgba(255,255,255,.025);padding-inline:12px}
.player-tool-btn {
  width:40px;height:40px;border-radius:14px;border:1px solid var(--stroke);background:rgba(255,255,255,.045);
  font-size:14px;font-weight:800;color:var(--muted);
  cursor:pointer;transition:var(--transition);display:inline-flex;align-items:center;justify-content:center;
}
.player-tool-btn .ui-svg{width:18px;height:18px}
.player-tool-btn:hover{color:var(--text);border-color:var(--stroke2);background:rgba(255,255,255,.08)}

.player-seek {grid-area:seek; display:flex;align-items:center;gap:10px;width:100%}
.player-time {font-size:12px;color:var(--muted2);font-weight:800;width:44px;text-align:center;flex-shrink:0}
.player-range {
  flex:1;height:6px;-webkit-appearance:none;appearance:none;background:var(--stroke);
  border-radius:99px;outline:none;cursor:pointer;
}
.player-range::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#f0b84c;
  border:2px solid rgba(255,255,255,.22);cursor:pointer;box-shadow:0 2px 8px rgba(240,184,76,.3);
}

.player-volume {display:none} /* hidden on mobile */
.player-volume-group{
  padding:8px 12px;border-radius:18px;border:1px solid rgba(255,255,255,.05);
  background:rgba(255,255,255,.02);display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.player-volume-icon{
  flex-shrink:0;display:grid;place-items:center;width:18px;height:18px;
}
.player-volume-icon .ui-svg{width:18px;height:18px}
.desktop-only {display:none}

/* Desktop Layout */
@media(min-width:1024px){
  :root{--player-h:96px}
  .hero{
    padding:22px 22px 20px;
    border-radius:26px;
  }
  .hero-grid{
    grid-template-columns:minmax(340px,1.1fr) minmax(250px,.72fr);
    gap:16px;
  }
  .hero-copy{padding-inline-start:8px}
  .hero-title{font-size:clamp(30px,3.1vw,44px);max-width:10.5ch}
  .hero-sub{max-width:44ch}
  .hero-panel{max-width:760px}
  .hero-metric{min-height:76px}
  .hero-focus{min-height:98px}
  .player-bar {
    grid-template-areas: "left actions seek";
    grid-template-columns:260px auto minmax(320px,1fr);
    height:96px;min-height:96px;padding:0 28px;gap:28px;
  }
  .player-title{max-width:280px}
  .player-subtitle{max-width:280px}
  .player-actions-row{justify-content:flex-end;gap:14px}
  .player-controls {margin:0;gap:18px}
  .player-seek {max-width:640px;margin:0 auto}
  .player-right {gap:14px;flex-wrap:nowrap}
  .player-tools{gap:12px;padding:8px 14px}
  .player-tool-btn{width:42px;height:42px;border-radius:16px}
  .player-btn{width:46px;height:46px}
  .player-btn-play{width:58px;height:58px;border-radius:18px}
  .player-volume {display:flex;align-items:center;gap:10px;width:156px;min-width:156px}
  .player-range{min-width:0}
  .player-volume-icon {font-size:16px;color:var(--muted)}
  .desktop-only {display:inline-flex}
}

@media(min-width:1024px) and (max-width:1280px){
  .hero-grid{grid-template-columns:minmax(320px,1fr) minmax(240px,.72fr)}
  .hero-title{font-size:clamp(28px,2.9vw,40px)}
  .desktop-only{display:none !important}
  .player-actions-row{gap:10px}
  .player-right{gap:10px}
  .player-tools{gap:8px;padding:6px 8px}
  .player-volume{width:112px}
  .player-seek{max-width:560px}
}

/* Scroll Top */
.scroll-top{
  position:fixed;bottom:calc(var(--player-h) + 20px);left:max(16px, calc(env(safe-area-inset-left, 0px) + 12px));width:44px;height:44px;
  border-radius:50%;background:rgba(25,195,125,.15);border:1px solid rgba(25,195,125,.3);
  color:var(--accent);font-size:20px;display:grid;place-items:center;cursor:pointer;
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:var(--shadow-card);opacity:0;pointer-events:none;transition:var(--transition);z-index:1155;
}
.scroll-top.show{opacity:1;pointer-events:auto;animation:scrollTopRise .35s ease both}
.scroll-top:hover{background:rgba(25,195,125,.25);transform:translateY(-3px)}
@keyframes scrollTopRise{from{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}

@media(max-width:1024px){
  .scroll-top{bottom:calc(var(--player-h) + var(--mobile-nav-h) + 20px)}
}

/* ============================================
   MODALS
   ============================================ */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:2000;display:none;place-items:center}
.modal-overlay.show{display:grid}
.modal-card{
  width:min(620px,94vw);max-height:82vh;border-radius:var(--radius);border:1px solid var(--stroke);
  background:rgba(9,14,30,.94);backdrop-filter:var(--blur);box-shadow:var(--shadow);
  overflow:hidden;display:flex;flex-direction:column;
  background-image:radial-gradient(240px 180px at 85% 14%,rgba(25,195,125,.08),transparent 72%);
}
.modal-sm{max-width:520px}
html[data-theme="day"] .modal-card{background:rgba(255,255,255,.96)}
.modal-head{padding:14px 18px;border-bottom:1px solid var(--stroke);display:flex;align-items:center;justify-content:space-between}
.modal-title{font-weight:900;font-size:16px;display:flex;align-items:center;gap:8px}
.modal-close{
  width:34px;height:34px;border-radius:10px;border:1px solid var(--stroke);background:rgba(255,255,255,.04);
  display:grid;place-items:center;cursor:pointer;font-size:14px;transition:var(--transition);
}
.modal-close:hover{border-color:rgba(255,77,141,.3);color:var(--pink)}
.modal-search{padding:10px 14px;border-bottom:1px solid var(--stroke)}
.modal-search-input{
  width:100%;height:40px;border-radius:999px;border:1px solid var(--stroke);
  background:rgba(255,255,255,.04);color:var(--text);padding:0 16px;font-size:13px;
  font-weight:700;outline:none;
}
.modal-search-input:focus{border-color:rgba(25,195,125,.35)}
.modal-body{flex:1;overflow-y:auto;padding:14px}

/* About Modal */
.about-content{text-align:center;padding:8px}
.about-logo{width:56px;height:56px;margin:0 auto 12px;display:grid;place-items:center;color:var(--accent)}
.about-logo .ui-svg{width:42px;height:42px}
.about-content h2{font-size:22px;font-weight:900;margin-bottom:12px}
.about-content p{color:var(--muted);font-weight:700;line-height:1.8;margin-bottom:14px;font-size:14px}
.about-developer{margin-bottom:16px;padding:12px;border-radius:var(--radius-sm);border:1px solid var(--stroke);background:rgba(255,255,255,.03)}
.about-dev-name{font-weight:900;font-size:15px}
.about-dev-sub{font-size:12px;color:var(--muted);font-weight:700;margin-top:2px}
.about-links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.about-link{
  padding:8px 16px;border-radius:999px;border:1px solid var(--stroke);background:rgba(255,255,255,.04);
  font-weight:800;font-size:12px;transition:var(--transition);display:inline-flex;align-items:center;gap:5px;
}
.about-link:hover{border-color:var(--stroke2);transform:translateY(-1px)}
.about-copy{font-size:11px;color:var(--muted2);font-weight:700}
.about-copy p{margin-bottom:4px;font-size:11px}

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state{
  text-align:center;padding:44px 20px;color:var(--muted);max-width:720px;margin:0 auto;
  border:1px solid var(--stroke);border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  box-shadow:var(--shadow-card);
}
.empty-icon{
  width:56px;height:56px;margin:0 auto 14px;display:grid;place-items:center;opacity:.82;
  border-radius:18px;border:1px solid rgba(25,195,125,.16);background:rgba(25,195,125,.07);color:var(--accent);
}
.empty-state h3{font-size:20px;font-weight:900;color:var(--text);margin-bottom:8px}
.empty-state p{font-weight:700;font-size:14px}
.empty-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}

/* ============================================
   STATIC ROUTE SHELL
   ============================================ */
.route-shell{
  display:grid;gap:18px;max-width:980px;margin:0 auto;
}
.route-intro{
  position:relative;overflow:hidden;padding:28px;border-radius:30px;border:1px solid var(--stroke);
  background:
    radial-gradient(420px 220px at 88% 14%,rgba(25,195,125,.14),transparent 65%),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  box-shadow:var(--shadow-card);
}
.route-intro::after{
  content:"";position:absolute;inset:auto auto -38% -10%;width:42%;height:62%;
  background:radial-gradient(circle,rgba(255,255,255,.06),transparent 70%);
  pointer-events:none;opacity:.6;
}
.route-kicker{
  display:inline-flex;align-items:center;gap:8px;padding:7px 12px;margin-bottom:12px;
  border-radius:999px;border:1px solid rgba(25,195,125,.18);background:rgba(25,195,125,.08);
  color:var(--accent);font-size:11px;font-weight:900;
}
.route-intro h1{
  font-size:clamp(24px,3vw,38px);line-height:1.25;font-weight:900;margin-bottom:10px;
}
.route-intro p{
  max-width:62ch;color:var(--text2);font-size:14px;font-weight:700;line-height:1.95;
}
.route-highlights{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;
}
.route-chip{
  display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;
  border-radius:999px;border:1px solid var(--stroke);background:rgba(255,255,255,.04);
  color:var(--text);font-size:12px;font-weight:800;
}
.route-links{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;
}
.route-loading{
  display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:22px;
  border:1px solid var(--stroke);background:rgba(255,255,255,.03);color:var(--muted);
}
.route-loading .spinner{width:28px;height:28px;flex-shrink:0}
.route-loading-copy strong{
  display:block;color:var(--text);font-size:14px;font-weight:900;margin-bottom:4px;
}
.route-loading-copy span{
  display:block;font-size:12px;font-weight:700;line-height:1.8;
}
.no-script-panel{
  max-width:980px;margin:18px auto 0;padding:22px 24px;border-radius:26px;
  border:1px solid rgba(255,77,141,.16);background:linear-gradient(180deg,rgba(255,77,141,.08),rgba(255,255,255,.02));
  box-shadow:var(--shadow-card);
}
.no-script-panel h2{
  font-size:19px;font-weight:900;margin-bottom:8px;
}
.no-script-panel p{
  color:var(--text2);font-size:14px;font-weight:700;line-height:1.9;
}
.no-script-links{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;
}
.no-script-links a{
  display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;
  border-radius:999px;border:1px solid var(--stroke);background:rgba(255,255,255,.04);
  font-size:12px;font-weight:900;transition:var(--transition);
}
.no-script-links a:hover{
  transform:translateY(-1px);border-color:rgba(25,195,125,.22);color:var(--accent);
}
html[data-theme="day"] .route-intro,
html[data-theme="day"] .route-loading,
html[data-theme="day"] .route-chip,
html[data-theme="day"] .no-script-panel,
html[data-theme="day"] .no-script-links a{
  background:rgba(255,255,255,.78);
}

/* ============================================
   TOAST
   ============================================ */
.toast{
  position:fixed;left:50%;bottom:calc(var(--player-h) + 16px);transform:translateX(-50%) translateY(8px);
  padding:10px 20px;border-radius:999px;background:rgba(9,14,30,.88);border:1px solid var(--stroke);
  backdrop-filter:blur(14px);box-shadow:0 18px 40px rgba(0,0,0,.35);color:var(--text);font-weight:900;font-size:13px;
  z-index:9999;opacity:0;transition:.25s ease;pointer-events:none;white-space:nowrap;
}
html[data-theme="day"] .toast{background:rgba(255,255,255,.92)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.connection-banner{
  position:fixed;top:calc(var(--topbar-h) + 12px);left:50%;transform:translateX(-50%);
  width:min(92vw,560px);padding:12px 16px;border-radius:18px;border:1px solid var(--stroke);
  background:rgba(9,14,30,.94);backdrop-filter:blur(14px);box-shadow:0 18px 40px rgba(0,0,0,.22);
  z-index:1400;display:flex;align-items:center;justify-content:center;gap:10px;
  color:var(--text);font-size:13px;font-weight:800;text-align:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
}
.connection-banner.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.connection-banner[hidden]{display:none !important}
.connection-banner .ui-svg{width:16px;height:16px;flex-shrink:0}
.connection-banner.offline{border-color:rgba(255,77,141,.22);color:#ffd7e5}
.connection-banner.online{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  border-color:rgba(25,195,125,.22);
  color:#d8ffee;
}

/* ============================================
   LOADING
   ============================================ */
.loading{display:flex;justify-content:center;padding:44px}
.spinner{width:36px;height:36px;border:3px solid var(--stroke);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton-shell{display:grid;gap:16px}
.skeleton-hero,.skeleton-card,.skeleton-line{
  position:relative;overflow:hidden;border-radius:22px;border:1px solid var(--stroke);
  background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(255,255,255,.08),rgba(255,255,255,.03));
  background-size:220% 100%;animation:skeleton-shimmer 1.2s linear infinite;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.skeleton-hero{height:180px}
.skeleton-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.skeleton-card{height:150px}
.skeleton-line{height:18px;border-radius:999px}
.skeleton-stack{display:grid;gap:10px}
.skeleton-line.short{width:36%}
.skeleton-line.mid{width:62%}
@keyframes skeleton-shimmer{
  0%{background-position:200% 0}
  100%{background-position:-20% 0}
}

/* ============================================
   MOBILE BOTTOM NAV
   ============================================ */
.mobile-nav{
  display:none;position:fixed;bottom:0;left:0;right:0;height:var(--mobile-nav-h);
  background:rgba(8,12,26,.94);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border-top:1px solid var(--stroke);z-index:1200;align-items:center;justify-content:space-around;
}
html[data-theme="day"] .mobile-nav{background:rgba(255,255,255,.94)}
.mobile-nav-item{
  display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9px;font-weight:800;
  color:var(--muted);cursor:pointer;transition:var(--transition);padding:4px 8px;min-width:58px;
}
.mnav-icon{
  width:30px;height:30px;border-radius:12px;border:1px solid rgba(255,255,255,.05);
  background:rgba(255,255,255,.03);display:grid;place-items:center;font-size:16px;
}
.mnav-icon .ui-svg{width:16px;height:16px}
.mobile-nav-item.active{color:var(--accent)}
.mobile-nav-item.active .mnav-icon{border-color:rgba(25,195,125,.22);background:rgba(25,195,125,.12)}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Tablet */
@media(max-width:1024px){
  .sidebar{transform:translateX(100%)}
  .sidebar.open{transform:translateX(0)}
  .main-area{margin-right:0}
  .topbar-hamburger{display:grid}
  .mobile-nav{display:flex}
  .player-bar{bottom:calc(var(--mobile-nav-h) + 12px);left:12px;right:12px;border-radius:var(--radius);border:1px solid var(--stroke);box-shadow:0 20px 40px rgba(0,0,0,0.4);padding:14px;background:rgba(8,12,26,.95)}
  .main-area{padding-bottom:calc(var(--player-h) + var(--mobile-nav-h) + 24px)}
  .toast{bottom:calc(var(--player-h) + var(--mobile-nav-h) + 12px)}
  .hero-grid,.home-overview{grid-template-columns:1fr}
  .home-overview-grid,.home-overview-grid-compact,.home-links-grid{grid-template-columns:1fr 1fr}
  .overview-tile-wide{grid-column:span 2}
}

/* Mobile */
@media(max-width:768px){
  :root{--topbar-h:60px;--player-h:208px}
  .topbar{
    height:var(--topbar-h);padding:0 12px;
    box-shadow:0 12px 30px rgba(0,0,0,.16);
    display:grid;grid-template-columns:42px minmax(0,1fr) minmax(76px,auto);align-items:center;gap:10px;
  }
  .topbar-right{display:contents}
  .topbar-logo{
    grid-column:2;grid-row:1;font-size:14px;gap:8px;min-width:0;justify-content:center;padding-inline:4px;
    justify-self:center;
  }
  .topbar-logo .logo-text{
    display:block;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .logo-icon{width:22px;height:22px}
  .logo-icon .ui-svg{width:20px;height:20px}
  .topbar-hamburger{
    grid-column:1;grid-row:1;
    width:42px;height:42px;border-radius:16px;flex-shrink:0;
    background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.08);
    justify-self:start;
  }
  .topbar-social{
    grid-column:3;grid-row:1;display:flex;align-items:center;justify-content:flex-end;min-width:76px;
    justify-self:end;
  }
  .topbar-social .social-link:not(.topbar-contact){display:none !important}
  .topbar-contact{
    min-width:76px;height:40px;padding:0 12px;border-radius:15px;font-size:11px;justify-content:center;
  }
  .main-area{padding:16px 14px calc(var(--player-h) + var(--mobile-nav-h) + 42px)}
  .hero{
    padding:22px 16px;border-radius:28px;
    background:linear-gradient(145deg,rgba(9,18,38,.98),rgba(8,15,30,.9));
    box-shadow:0 20px 44px rgba(0,0,0,.24);
  }
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .hero-title{font-size:28px;max-width:none}
  .hero-sub{font-size:14px}
  .hero-panel,.hero-focus,.hero-kicker,.hero-metric{
    border-radius:22px;
  }
  .hero-panel,.hero-focus{padding:18px}
  .hero-metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .hero-metric{
    padding:11px 8px;border-radius:18px;align-items:center;text-align:center;
  }
  .hero-metric-value{font-size:20px}
  .hero-metric-label{font-size:10px}
  .hero-actions{flex-direction:column}
  .hero-action{width:100%}
  .social-label{display:none}
  .sidebar{width:260px;box-shadow:-10px 0 30px rgba(0,0,0,.3)}
  .card-avatar{font-size:38px}
  .section-title{font-size:22px}
  .section-sub{font-size:12px;line-height:1.8}
  .section-header{margin-bottom:16px}
  .home-strip{margin-bottom:18px}
  .home-overview,.home-links-grid,.home-overview-grid,.home-overview-grid-compact{gap:12px}
  .overview-tile,.home-link-panel,.daily-brief{
    border-radius:22px;padding:16px;
  }
  .overview-tile strong,.home-link-panel strong,.daily-brief h3{line-height:1.7}
  .daily-brief p{font-size:12px}
  .search-container{
    position:sticky;top:calc(var(--topbar-h) + 8px);z-index:40;
    margin:0 auto 16px;padding:10px;border-radius:26px;
    background:rgba(8,12,26,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.04);box-shadow:0 16px 28px rgba(0,0,0,.16);
  }
  html[data-theme="day"] .search-container{background:rgba(255,255,255,.78)}
  .search-input{height:50px;border-radius:20px;padding:0 18px 0 46px}
  .search-container.with-back{grid-template-columns:92px minmax(0,1fr)}
  .search-icon{
    width:30px;height:30px;left:20px;border-radius:12px;
  }
  .top-search-back{
    height:50px;padding:0 14px;border-radius:18px;background:rgba(255,255,255,.05);
  }
  .home-overview-grid,.home-links-grid{grid-template-columns:1fr}
  .home-overview-grid-compact{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .overview-tile-wide{grid-column:auto}
  .route-shell{gap:14px}
  .route-intro{padding:22px;border-radius:26px}
  .route-highlights,.route-links,.no-script-links{gap:8px}
  .route-chip{font-size:11px;padding:7px 11px}
  .route-loading{padding:14px 16px;border-radius:20px}
  .reciter-overview{grid-template-columns:1fr 1fr}
  .reciter-actions{grid-column:span 2}
  .reading-nav,.reading-nav-actions{flex-direction:column;align-items:stretch}
  .top-search-back-label{font-size:12px}
  .reciter-shell{grid-template-columns:1fr}
  .reciter-profile-card,.reciter-history-card,.reciter-stat,.reciter-actions,.settings-panel,.prayer-card,.qibla-card{
    border-radius:22px;
  }
  .reciter-profile-card,.reciter-history-card,.settings-panel{padding:16px}
  .surah-card,.rewaya-card,.tafsir-card,.radio-card,.history-item,.tadabor-card{padding:14px}
  .surah-card-num,.rewaya-icon,.tafsir-icon,.radio-icon,.history-icon{width:42px;height:42px}
  .btn{min-height:40px;justify-content:center}
  .radio-card{padding-top:18px}
  .radio-meta-badges{top:8px;left:8px;gap:6px}
  .radio-fav{width:30px;height:30px;border-radius:9px}
  .radio-live{padding:4px 10px;font-size:10px}
  .home-overview-grid-compact .overview-tile{
    min-height:92px;padding:12px 8px;border-radius:18px;align-items:center;text-align:center;justify-content:center;gap:6px;
  }
  .home-overview-grid-compact .overview-number{font-size:17px;line-height:1.05;margin-bottom:0}
  .home-overview-grid-compact .overview-label{font-size:9px;line-height:1.3;display:block}
  .home-overview-grid-compact .overview-tile strong{font-size:11px;line-height:1.4;text-align:center;margin:0}
}

/* Small Mobile */
@media(max-width:480px){
  :root{--topbar-h:58px;--player-h:196px}
  .social-link:not(.topbar-contact){display:none}
  .grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .main-area{padding:14px 12px calc(var(--player-h) + var(--mobile-nav-h) + 44px)}
  .topbar{padding-inline:10px;gap:8px;grid-template-columns:40px minmax(0,1fr) minmax(68px,auto)}
  .topbar-logo{gap:7px;min-width:0;padding-inline:2px}
  .topbar-logo .logo-text{font-size:12px;max-width:124px}
  .topbar-hamburger{width:40px;height:40px;border-radius:15px}
  .topbar-social{min-width:68px;justify-self:end}
  .topbar-contact{min-width:68px;height:38px;padding:0 10px;font-size:10px;border-radius:14px}
  .hero-panel{padding:14px}
  .hero-panel-top{margin-bottom:2px}
  .hero-panel-label,.hero-panel-date{font-size:11px}
  .hero-metrics{gap:6px}
  .hero-metric{
    padding:10px 6px;border-radius:16px;
  }
  .hero-metric-value{font-size:18px}
  .hero-metric-label{font-size:9px}
  .home-overview-grid-compact{gap:6px}
  .home-overview-grid-compact .overview-tile{
    min-height:82px;padding:10px 6px;border-radius:16px;justify-content:center;gap:5px;
  }
  .home-overview-grid-compact .overview-number{font-size:15px;line-height:1.05}
  .home-overview-grid-compact .overview-label{font-size:8px;line-height:1.25}
  .home-overview-grid-compact .overview-tile strong{font-size:10px;line-height:1.3;margin:0}
  .route-intro{padding:18px 16px;border-radius:22px}
  .route-kicker{font-size:10px;padding:6px 10px}
  .route-intro h1{font-size:22px;line-height:1.35}
  .route-intro p{font-size:13px;line-height:1.85}
  .route-highlights{gap:6px}
  .route-chip{font-size:10px;padding:6px 10px}
  .route-links .btn,
  .no-script-links a{flex:1 1 calc(50% - 6px);min-height:38px;padding-inline:10px}
  .route-loading{align-items:flex-start}
  .route-loading-copy strong{font-size:13px}
  .route-loading-copy span{font-size:11px}
  .no-script-panel{padding:18px 16px;border-radius:22px}
  .no-script-panel h2{font-size:17px}
  .no-script-panel p{font-size:13px}
  .search-container{
    top:calc(var(--topbar-h) + 6px);padding:8px;border-radius:22px;
  }
  .search-container.with-back{grid-template-columns:84px minmax(0,1fr);gap:8px}
  .top-search-back{padding:0 10px}
  .top-search-back-label{font-size:11px}
  .card-avatar{font-size:32px}
  .card-body{padding:8px 10px 10px}
  .card-name{font-size:12px}
  .card-badge{font-size:10px;padding:4px 8px}
  .hero-title{font-size:18px}
  .hero-sub{font-size:12px}
  .hisn-text{font-size:15px}
  .mobile-nav{
    height:64px;padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .mobile-nav-item{font-size:8px;min-width:54px;padding:4px 6px}
  .mnav-icon{width:28px;height:28px;border-radius:11px}
  .scroll-top{
    left:14px;
    right:auto;
    bottom:calc(var(--mobile-nav-h) + 153px);
    width:38px;height:38px;
    z-index:1160;
  }
  .player-bar{
    left:10px;right:10px;bottom:calc(var(--mobile-nav-h) + 10px);
    gap:8px;padding:10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
    min-height:144px;border-radius:20px;
  }
  .player-cover{width:36px;height:36px;border-radius:11px}
  .player-cover .ui-svg{width:16px;height:16px}
  .player-title{font-size:13px}
  .player-subtitle{display:none}
  .player-actions-row{
    grid-template-columns:1fr;gap:8px;padding:5px 6px;border-radius:15px;
  }
  .player-mobile-main{gap:10px}
  .player-mobile-title{font-size:13px}
  .player-mobile-subtitle{font-size:10px}
  .player-right{grid-template-columns:auto minmax(0,1fr);gap:6px}
  .player-tools-primary{order:0}
  .player-volume{order:1}
  .player-tools{gap:5px}
  .player-tool-btn{width:28px;height:28px;border-radius:9px}
  .player-tool-btn .ui-svg{width:12px;height:12px}
  .player-volume{width:100%;min-width:0;gap:5px}
  .player-volume-group{padding:5px 7px;width:100%}
  .player-volume-icon .ui-svg{width:12px;height:12px}
  .player-btn{width:36px;height:36px;border-radius:11px}
  .player-btn .ui-svg{width:14px;height:14px}
  .player-btn-play{width:42px;height:42px;border-radius:13px}
  .player-btn-play .ui-svg{width:15px;height:15px}
  .player-controls{gap:8px}
  .player-time{width:36px;font-size:10px}
  .player-seek{gap:6px}
  .developer-card{padding:18px;border-radius:22px}
  .developer-card h3{font-size:23px}
  .developer-card p{font-size:13px;line-height:1.85}
  .developer-note{padding:12px 14px;font-size:12px}
  .developer-prayer-box{padding:14px 15px}
  .developer-prayer-box p{font-size:13px;line-height:1.9}
  .developer-links{gap:8px}
  .developer-links{grid-template-columns:1fr}
  .developer-link{min-height:38px;padding:0 14px;font-size:12px}
  .connection-banner{
    top:calc(var(--topbar-h) + 8px);width:min(94vw,420px);padding:10px 12px;font-size:11px;border-radius:16px;
  }
}

/* Very Small */
@media(max-width:360px){
  .grid{grid-template-columns:repeat(2,1fr);gap:6px}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .card-avatar{aspect-ratio:1.2}
  .topbar-contact span:first-child{display:none}
}

/* ============================================
   HOME STATS
   ============================================ */
.home-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-bottom:24px}
.stat-card{
  border-radius:var(--radius);border:1px solid var(--stroke);background:var(--card-bg);
  padding:16px 10px;text-align:center;cursor:pointer;transition:var(--transition);
}
.stat-card:hover{transform:translateY(-3px);border-color:rgba(25,195,125,.22)}
.stat-num{display:block;font-size:28px;font-weight:900;color:var(--accent);margin-bottom:4px}
.stat-label{font-size:12px;font-weight:800;color:var(--muted)}
.sub-heading{font-weight:900;font-size:16px;margin-bottom:14px;margin-top:8px}
.home-overview{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,.85fr);gap:18px;margin-bottom:22px}
.home-overview-main,.home-overview-side{min-width:0}
.home-overview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.home-overview-grid-compact{grid-template-columns:repeat(4,1fr)}
.overview-tile{
  text-align:right;border-radius:22px;border:1px solid var(--stroke);background:var(--card-bg);
  padding:18px;min-height:126px;display:flex;flex-direction:column;justify-content:space-between;transition:var(--transition);
}
.overview-tile:hover,.home-link-panel:hover{transform:translateY(-3px);border-color:rgba(25,195,125,.22);box-shadow:0 16px 32px rgba(0,0,0,.14)}
.overview-tile-wide{grid-column:span 3;min-height:140px;background:linear-gradient(135deg,rgba(25,195,125,.12),rgba(255,255,255,.03))}
.overview-number{font-size:26px;font-weight:900;color:var(--accent)}
.overview-label{font-size:12px;font-weight:900;color:var(--muted)}
.overview-tile strong,.home-link-panel strong{font-size:15px;line-height:1.9;text-align:right}
.daily-brief{
  height:100%;border-radius:24px;border:1px solid var(--stroke);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  padding:22px;display:flex;flex-direction:column;justify-content:center;gap:10px;
}
.daily-brief,.hero-panel,.overview-tile,.home-link-panel,.radio-card,.video-card,.prayer-card,.tadabor-card,.settings-panel,.reciter-profile-card,.reciter-history-card,.reciter-stat{
  will-change:transform,box-shadow,border-color;
}
.daily-brief-label,.home-link-kicker{font-size:11px;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.daily-brief h3{font-size:20px;line-height:1.8}
.daily-brief p{font-size:13px;line-height:1.9;color:var(--text2)}
.home-strip{margin-bottom:24px}
.home-links-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.home-link-panel{
  text-align:right;border-radius:24px;border:1px solid var(--stroke);background:var(--card-bg);
  padding:20px;min-height:150px;display:flex;flex-direction:column;gap:10px;transition:var(--transition);
}

@media(max-width:1024px){
  .hero-grid,.home-overview{grid-template-columns:1fr}
  .home-overview-grid,.home-overview-grid-compact,.home-links-grid{grid-template-columns:1fr 1fr}
  .overview-tile-wide{grid-column:span 2}
}

@media(max-width:768px){
  .page-overview{grid-template-columns:1fr}
  .player-bar{
    grid-template-areas:
      "left left"
      "actions actions"
      "seek seek";
    grid-template-columns:1fr;
    gap:9px;
    padding:12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    min-height:162px;border-radius:22px;
    box-shadow:0 24px 50px rgba(0,0,0,.34);
  }
  .player-left{display:none}
  .player-meta{flex:1}
  .player-actions-row{
    display:grid;grid-template-columns:1fr;gap:10px;justify-content:stretch;align-items:center;
    padding:6px 8px;border-radius:17px;border:1px solid rgba(255,255,255,.05);
    background:rgba(255,255,255,.025);
  }
  .player-mobile-main{
    display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;
    direction:ltr;
  }
  .player-mobile-meta{
    display:flex;flex-direction:column;gap:4px;min-width:0;text-align:right;direction:rtl;
  }
  .player-mobile-title{
    font-size:14px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);
  }
  .player-mobile-subtitle{
    font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted2);
  }
  .player-right{
    display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;justify-content:stretch;align-items:center;
    padding:0;background:none;border:none;min-width:0;
  }
  .player-tools-primary{order:0}
  .player-volume{order:1}
  .player-controls{gap:10px;padding-top:0;order:1}
  .player-btn{width:42px;height:42px;border-radius:14px;font-size:15px}
  .player-btn .ui-svg{width:17px;height:17px}
  .player-btn-play{width:50px;height:50px;font-size:18px;border-radius:16px}
  .player-btn-play .ui-svg{width:18px;height:18px}
  .player-tools{gap:6px;padding:0;border:none;background:transparent;flex-shrink:0}
  .player-tools-primary{padding-inline:0}
  .player-tools-secondary{display:none}
  .player-tool-btn{width:30px;height:30px;border-radius:10px;font-size:13px}
  .player-tool-btn .ui-svg{width:13px;height:13px}
  .player-volume-group{
    flex:1;padding:5px 7px;border-radius:14px;background:rgba(255,255,255,.03);
  }
  .player-volume{display:flex;align-items:center;gap:6px;width:100%;min-width:0}
  .player-volume-icon .ui-svg{width:13px;height:13px}
  .player-seek{gap:8px}
  .player-time{width:40px;font-size:11px}
  .player-range{height:5px}
  .home-overview-grid,.home-links-grid{grid-template-columns:1fr}
  .home-overview-grid-compact{grid-template-columns:repeat(4,minmax(0,1fr))}
  .overview-tile-wide{grid-column:auto}
  .overview-tile,.home-link-panel{min-height:auto}
  .daily-brief{padding:18px}
  .daily-brief h3{font-size:18px}
  .history-item{
    display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;padding:14px;
  }
  .history-time{display:none}
  .history-play{width:42px;height:42px}
  .skeleton-grid{grid-template-columns:1fr 1fr}
  .toast{
    max-width:min(92vw,360px);white-space:normal;text-align:center;line-height:1.5;padding:10px 14px;
  }
  .scroll-top{
    left:18px;
    right:auto;
    bottom:calc(var(--mobile-nav-h) + 152px);
    width:40px;height:40px;border-radius:15px;
    box-shadow:0 10px 24px rgba(0,0,0,.22);
  }
}

/* ============================================
   SURAH CARD (browse surahs)
   ============================================ */
.surah-card{
  display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--radius);
  border:1px solid var(--stroke);background:var(--card-bg);cursor:pointer;transition:var(--transition);
}
.surah-card:hover{transform:translateY(-2px);border-color:rgba(25,195,125,.22);box-shadow:0 14px 30px rgba(0,0,0,.14)}
.surah-card-num{
  width:40px;height:40px;border-radius:10px;background:rgba(25,195,125,.10);
  border:1px solid rgba(25,195,125,.18);display:grid;place-items:center;
  font-weight:900;font-size:14px;color:var(--accent);flex-shrink:0;
}
.surah-card-info{flex:1;min-width:0}
.surah-card-name{font-weight:900;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.surah-card-meta{font-size:11px;color:var(--muted2);font-weight:700;margin-top:2px}
.surah-card-arrow{font-size:14px;color:var(--muted);flex-shrink:0}

/* ============================================
   REWAYA CARD
   ============================================ */
.rewaya-card{
  display:flex;align-items:center;gap:12px;padding:16px;border-radius:var(--radius);
  border:1px solid var(--stroke);background:var(--card-bg);cursor:pointer;transition:var(--transition);
}
.rewaya-card:hover{transform:translateY(-2px);border-color:rgba(25,195,125,.22);box-shadow:0 14px 30px rgba(0,0,0,.14)}
.rewaya-icon{
  width:44px;height:44px;border-radius:12px;background:rgba(245,197,66,.10);
  border:1px solid rgba(245,197,66,.18);display:grid;place-items:center;font-size:20px;flex-shrink:0;
}
.rewaya-name{flex:1;font-weight:900;font-size:14px}
.rewaya-arrow{font-size:14px;color:var(--muted);flex-shrink:0}

/* ============================================
   TAFSIR CARD
   ============================================ */
.tafsir-card{
  display:flex;align-items:center;gap:12px;padding:16px;border-radius:var(--radius);
  border:1px solid var(--stroke);background:var(--card-bg);cursor:pointer;transition:var(--transition);
}
.tafsir-card:hover{transform:translateY(-2px);border-color:rgba(25,195,125,.22);box-shadow:0 14px 30px rgba(0,0,0,.14)}
.tafsir-icon{
  width:44px;height:44px;border-radius:12px;background:rgba(100,149,237,.10);
  border:1px solid rgba(100,149,237,.18);display:grid;place-items:center;font-size:20px;flex-shrink:0;
}
.tafsir-name{flex:1;font-weight:900;font-size:14px}
.tafsir-arrow{font-size:14px;color:var(--muted);flex-shrink:0}

/* ============================================
   TADABOR CARD
   ============================================ */
.tadabor-card{
  border-radius:var(--radius);border:1px solid var(--stroke);background:var(--card-bg);
  padding:18px;transition:var(--transition);
}
.tadabor-card:hover{border-color:var(--stroke2)}
.tadabor-header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.tadabor-sura{font-weight:900;font-size:13px;color:var(--accent)}
.tadabor-rec{font-size:11px;color:var(--muted2);font-weight:700}
.tadabor-text{font-family:var(--font-quran);font-size:16px;line-height:2;color:var(--text2);margin-bottom:12px}
.tadabor-actions{display:flex;gap:8px;flex-wrap:wrap}

/* Small buttons */
.btn-sm{padding:6px 14px;font-size:11px;border-radius:999px}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeIn{from{opacity:0;transform:translateY(14px) scale(.992)}to{opacity:1;transform:translateY(0) scale(1)}}
.animate-in{animation:fadeIn .5s cubic-bezier(.22,1,.36,1) forwards}
.pop-anim{animation:popScale .35s ease}
@keyframes popScale{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}

/* Staggered grid animation */
.grid>.card,.grid>.radio-card,.grid>.hisn-card,.grid>.history-item,.grid>.surah-list-item,
.grid>.surah-card,.grid>.rewaya-card,.grid>.tafsir-card,.grid>.tadabor-card{
  opacity:0;animation:fadeIn .5s cubic-bezier(.22,1,.36,1) forwards;
}
.grid>*:nth-child(1){animation-delay:.02s}
.grid>*:nth-child(2){animation-delay:.04s}
.grid>*:nth-child(3){animation-delay:.06s}
.grid>*:nth-child(4){animation-delay:.08s}
.grid>*:nth-child(5){animation-delay:.10s}
.grid>*:nth-child(6){animation-delay:.12s}
.grid>*:nth-child(7){animation-delay:.14s}
.grid>*:nth-child(8){animation-delay:.16s}
.grid>*:nth-child(9){animation-delay:.18s}
.grid>*:nth-child(10){animation-delay:.20s}
.grid>*:nth-child(n+11){animation-delay:.22s}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .hero-glow,.hero::after,.player-btn-play,.ptbar-next,.live-dot{
    animation:none !important;
  }
}

/* ============================================
   NEW FEATURES: MUSHAF, VIDEO, TV
   ============================================ */
/* Mushaf */
.mushaf-container{
  background:var(--card-bg);border:1px solid var(--stroke);border-radius:var(--radius);
  padding:24px 20px;text-align:justify;line-height:2.6;direction:rtl;margin-top:20px;
}
.mushaf-text{font-family:'Amiri',serif;font-size:24px;color:var(--text);white-space:pre-wrap;}
.ayah-end{color:var(--accent);font-size:20px;margin:0 4px;}

/* Video Library */
.video-card{
  border-radius:var(--radius);border:1px solid var(--stroke);background:var(--card-bg);
  overflow:hidden;transition:var(--transition);display:flex;flex-direction:column;
}
.video-card:hover{border-color:var(--accent);transform:translateY(-2px);}
.video-thumb video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000;display:block;}
.video-name{padding:14px;font-weight:800;font-size:14px;color:var(--text);text-align:center;}

/* TV Stream */
.tv-container{
  border-radius:var(--radius);border:1px solid var(--stroke);background:var(--card-bg);
  padding:20px;margin-bottom:20px;text-align:center;
}
.tv-container h3{font-size:16px;margin-bottom:14px;color:var(--accent);}
.tv-player{width:100%;max-width:800px;aspect-ratio:16/9;background:#000;border-radius:8px;}

/* ============================================
   CUSTOM SCROLLBAR
   ============================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); border-left: 1px solid var(--stroke); }
::-webkit-scrollbar-thumb { background: var(--stroke); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* MOBILE ADJUSTMENTS */
@media(max-width:768px){
  .mushaf-container { padding: 16px 12px; margin-top: 10px; }
  .mushaf-text { font-size: 20px; line-height: 2.4; }
  .ayah-end { font-size: 16px; }
  .tv-container { padding: 12px; }
  .section-title[style*="font-family"] { font-size: 24px !important; }
}


/* ============================================
   PRAYER TIMES
   ============================================ */
.prayer-locate{text-align:center;padding:30px 20px}
.prayer-locate .btn-lg{padding:14px 32px;font-size:16px;border-radius:999px;margin-bottom:24px}
.prayer-manual{margin-top:20px;color:var(--muted);font-weight:700;font-size:14px}
.prayer-manual p{margin-bottom:12px}
.prayer-manual-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;max-width:500px;margin:0 auto}
.prayer-input{
  width:140px;height:44px;border-radius:var(--radius-sm);border:1px solid var(--stroke);
  background:rgba(255,255,255,.04);color:var(--text);padding:0 14px;font-size:14px;font-weight:700;outline:none;
}
.prayer-input:focus{border-color:rgba(25,195,125,.4)}
.prayer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-bottom:24px}
.prayer-card{
  border-radius:var(--radius);border:1px solid var(--stroke);background:var(--card-bg);
  padding:20px 16px;text-align:center;transition:var(--transition);position:relative;overflow:hidden;
}
.prayer-card:hover{transform:translateY(-3px);border-color:var(--stroke2)}
.prayer-next{border-color:rgba(25,195,125,.30)!important;background:linear-gradient(145deg,rgba(25,195,125,.10),rgba(25,195,125,.03))!important}
.prayer-card-icon{font-size:32px;margin-bottom:8px}
.prayer-card-name{font-weight:900;font-size:16px;margin-bottom:6px}
.prayer-card-time{font-size:28px;font-weight:900;color:var(--accent);font-variant-numeric:tabular-nums}
.prayer-next-label{
  position:absolute;top:8px;left:8px;padding:3px 10px;border-radius:999px;
  font-size:10px;font-weight:900;background:rgba(25,195,125,.16);color:var(--accent);border:1px solid rgba(25,195,125,.22);
}
.prayer-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.qibla-card{text-align:center;padding:30px;border-radius:var(--radius);border:1px solid var(--stroke);background:var(--card-bg);max-width:320px;margin:0 auto}
.qibla-compass{position:relative;width:160px;height:160px;margin:0 auto 16px;border-radius:50%;border:3px solid var(--stroke);display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.02)}
.qibla-arrow{font-size:48px;transition:transform .5s ease}
.qibla-deg{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);font-weight:900;font-size:14px;color:var(--accent);background:var(--bg0);padding:2px 10px;border-radius:999px;border:1px solid var(--stroke)}
.qibla-card p{color:var(--muted);font-weight:700;font-size:14px}

/* ============================================
   SIBHA (TASBIH COUNTER)
   ============================================ */
.sibha-presets{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:24px}
.sibha-container{text-align:center;max-width:400px;margin:0 auto}
.sibha-text{font-family:var(--font-quran);font-size:22px;line-height:2;color:var(--text2);margin-bottom:24px;min-height:60px}
.sibha-circle{
  position:relative;width:200px;height:200px;margin:0 auto 24px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  border-radius:50%;transition:var(--transition);user-select:none;-webkit-tap-highlight-color:transparent;
}
.sibha-circle:hover{transform:scale(1.03)}
.sibha-circle:active{transform:scale(.97)}
.sibha-ring{position:absolute;inset:0;width:100%;height:100%}
.sibha-ring-fill{transition:stroke-dashoffset .3s ease}
.sibha-count{font-size:48px;font-weight:900;color:var(--accent);position:relative;z-index:1;line-height:1}
.sibha-target{font-size:16px;font-weight:800;color:var(--muted);position:relative;z-index:1;margin-top:4px}
.sibha-done .sibha-count{color:var(--gold)}
.sibha-done .sibha-ring-fill{stroke:var(--gold)!important}
.sibha-actions{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap}
.sibha-actions .btn-lg{padding:14px 36px;font-size:18px;border-radius:999px}

@media(max-width:768px){
  .prayer-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .prayer-card-time{font-size:22px}
  .sibha-circle{width:170px;height:170px}
  .sibha-count{font-size:40px}
  .sibha-text{font-size:18px}
  .prayer-manual-row{flex-direction:column;align-items:center}
  .prayer-input{width:100%;max-width:260px}
}
@media(max-width:480px){
  .prayer-grid{grid-template-columns:repeat(2,1fr)}
  .sibha-circle{width:150px;height:150px}
  .sibha-count{font-size:36px}
}

/* ============================================
   PRAYER TIMES BAR (persistent top strip)
   ============================================ */
.prayer-times-bar{
  position:fixed;top:var(--topbar-h);left:0;right:0;z-index:998;
  display:none;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(8,12,26,.92),rgba(12,18,40,.92));
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border-bottom:1px solid var(--stroke);height:46px;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
}
.prayer-times-bar::-webkit-scrollbar{display:none}
html[data-theme="day"] .prayer-times-bar{background:linear-gradient(135deg,rgba(242,245,252,.95),rgba(234,239,248,.95))}
html[data-theme="warm"] .prayer-times-bar{background:linear-gradient(135deg,rgba(26,20,16,.92),rgba(32,26,20,.92))}
.ptbar-inner{
  display:flex;align-items:center;gap:6px;padding:0 14px;width:100%;
  justify-content:center;white-space:nowrap;
}
.ptbar-item{
  display:flex;align-items:center;gap:5px;padding:6px 10px;border-radius:16px;
  font-size:11px;font-weight:800;color:var(--muted);transition:var(--transition);
  border:1px solid transparent;flex-shrink:0;background:rgba(255,255,255,.025);
}
.ptbar-next{
  background:rgba(25,195,125,.12);border-color:rgba(25,195,125,.22)!important;
  color:var(--accent);animation:ptbarPulse 2s ease infinite;
}
@keyframes ptbarPulse{0%,100%{box-shadow:0 0 0 0 rgba(25,195,125,.15)}50%{box-shadow:0 0 0 6px rgba(25,195,125,0)}}
.ptbar-pi{font-size:14px}
.ptbar-pn{font-size:10px;font-weight:900;color:var(--text2)}
.ptbar-pt{font-size:12px;font-weight:900;color:var(--accent);font-variant-numeric:tabular-nums}
.ptbar-icon{font-size:16px;margin-left:4px}
.ptbar-ask{font-size:12px;font-weight:800;color:var(--muted)}
.ptbar-btn{
  padding:4px 14px;border-radius:999px;font-size:11px;font-weight:900;
  background:rgba(25,195,125,.14);border:1px solid rgba(25,195,125,.22);
  color:var(--accent);cursor:pointer;transition:var(--transition);margin-right:8px;
}
.ptbar-btn:hover{background:rgba(25,195,125,.22);transform:translateY(-1px)}

/* Adjust layout when prayer bar is visible */
.prayer-times-bar[style*="display: flex"] ~ .app-wrapper .sidebar{top:calc(var(--topbar-h) + 46px);height:calc(100vh - var(--topbar-h) - 46px)}
.prayer-times-bar[style*="display: flex"] ~ .app-wrapper .main-area{margin-top:calc(var(--topbar-h) + 46px)}

@media(max-width:768px){
  .prayer-times-bar{
    height:50px;
    padding-inline:6px;
    border-bottom:none;
    box-shadow:0 12px 28px rgba(0,0,0,.18);
  }
  .ptbar-inner{
    justify-content:flex-start;overflow-x:auto;padding:0 2px;gap:6px;
  }
  .ptbar-item{
    flex-direction:column;align-items:center;justify-content:center;
    min-width:58px;padding:6px 5px;gap:2px;border-radius:16px;
    background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.03);
  }
  .ptbar-pn{
    display:block;font-size:7px;line-height:1.05;color:var(--muted2);white-space:nowrap;
  }
  .ptbar-pt{font-size:11px}
  .ptbar-next{
    background:linear-gradient(180deg,rgba(25,195,125,.16),rgba(25,195,125,.08));
    border-color:rgba(25,195,125,.24)!important;
  }
  .ptbar-icon,.ptbar-ask{font-size:11px}
  .prayer-times-bar[style*="display: flex"] ~ .app-wrapper .sidebar{
    top:calc(var(--topbar-h) + 50px);height:calc(100vh - var(--topbar-h) - 50px)
  }
  .prayer-times-bar[style*="display: flex"] ~ .app-wrapper .main-area{
    margin-top:calc(var(--topbar-h) + 50px)
  }
}

/* ============================================
   HISN MAIN TABS (Azkar / Sibha toggle)
   ============================================ */
.hisn-main-tabs{
  display:flex;gap:0;justify-content:center;margin-bottom:20px;
  background:rgba(255,255,255,.04);border-radius:999px;border:1px solid var(--stroke);
  padding:4px;max-width:360px;margin-left:auto;margin-right:auto;
}
.hisn-main-tab{
  flex:1;padding:10px 20px;border-radius:999px;font-weight:900;font-size:14px;
  color:var(--muted);cursor:pointer;transition:var(--transition);
  border:none;background:none;text-align:center;
}
.hisn-main-tab:hover{color:var(--text)}
.hisn-main-tab.active{
  background:linear-gradient(135deg,rgba(25,195,125,.18),rgba(25,195,125,.08));
  color:var(--accent);box-shadow:0 2px 12px rgba(25,195,125,.15);
}

/* ============================================
   RADIO TABS
   ============================================ */
.radio-tabs{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;justify-content:center;
}

/* ============================================
   TV BADGE (Live indicator on TV cards)
   ============================================ */
.tv-badge{
  display:inline-flex;align-items:center;gap:6px;padding:4px 12px;
  border-radius:999px;font-size:11px;font-weight:900;
  background:rgba(255,43,85,.12);border:1px solid rgba(255,43,85,.22);
  color:#ff2b55;margin-bottom:12px;
}

/* ============================================
   TAFSIR MODE TABS
   ============================================ */
.tafsir-mode-tabs{
  display:flex;gap:0;justify-content:center;margin-bottom:20px;
  background:rgba(255,255,255,.04);border-radius:999px;border:1px solid var(--stroke);
  padding:4px;max-width:400px;margin-left:auto;margin-right:auto;
}
.tafsir-mode-tab{
  flex:1;padding:10px 20px;border-radius:999px;font-weight:900;font-size:14px;
  color:var(--muted);cursor:pointer;transition:var(--transition);
  border:none;background:none;text-align:center;
}
.tafsir-mode-tab:hover{color:var(--text)}
.tafsir-mode-tab.active{
  background:linear-gradient(135deg,rgba(100,149,237,.18),rgba(100,149,237,.08));
  color:#6495ed;box-shadow:0 2px 12px rgba(100,149,237,.15);
}

/* ============================================
   TAFSIR TEXT READING VIEW
   ============================================ */
.tafsir-nav-bar{
  display:flex;gap:10px;justify-content:center;margin-bottom:20px;flex-wrap:wrap;
}
.tafsir-overview{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px;
}
.tafsir-audio-card{
  border-radius:24px;border:1px solid var(--stroke);background:var(--card-bg);
  padding:16px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-card);
}
.tafsir-audio-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
}
.tafsir-audio-meta{
  display:flex;flex-direction:column;gap:6px;min-width:0;
}
.tafsir-audio-meta strong{
  font-size:17px;font-weight:900;color:var(--text);
}
.tafsir-audio-meta span:last-child{
  color:var(--muted);font-size:12px;font-weight:800;
}
.tafsir-audio-list{
  display:grid;gap:8px;
}
.tafsir-audio-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:44px;padding:0 14px;border-radius:16px;border:1px solid var(--stroke);
  background:rgba(255,255,255,.03);font-size:12px;font-weight:800;transition:var(--transition);
}
.tafsir-audio-item:hover:not(:disabled){
  transform:translateY(-1px);border-color:rgba(25,195,125,.22);color:var(--accent);
}
.tafsir-audio-item:disabled{
  opacity:.5;cursor:not-allowed;
}
.tafsir-audio-empty{
  padding:12px 14px;border-radius:16px;border:1px dashed var(--stroke2);color:var(--muted);font-size:12px;font-weight:700;
}
.page-overview .reciter-stat,
.tafsir-audio-card,
.empty-state,
.stats-bar{
  backdrop-filter:blur(10px);
}
.tafsir-read-container{
  background:var(--card-bg);border:1px solid var(--stroke);border-radius:var(--radius);
  padding:28px 24px;direction:rtl;margin-top:10px;
}
.tafsir-ayah-block{
  padding:18px 0;border-bottom:1px solid var(--stroke);
  transition:var(--transition);
}
.tafsir-ayah-block:last-child{border-bottom:none}
.tafsir-ayah-block:hover{background:rgba(25,195,125,.03);border-radius:var(--radius-sm);padding-right:12px;padding-left:12px}
.tafsir-ayah-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:10px;
  background:rgba(100,149,237,.10);border:1px solid rgba(100,149,237,.18);
  color:#6495ed;font-weight:900;font-size:16px;margin-bottom:10px;
  font-family:var(--font-quran);
}
.tafsir-ayah-text{
  font-family:var(--font-quran);font-size:18px;line-height:2.2;
  color:var(--text2);text-align:justify;
}
@media(max-width:768px){
  .tafsir-overview{grid-template-columns:1fr}
  .tafsir-audio-card{padding:14px;border-radius:22px}
  .tafsir-audio-head{flex-direction:column;align-items:stretch}
  .tafsir-audio-item{min-height:40px;padding-inline:12px}
  .tafsir-read-container{padding:16px 12px}
  .tafsir-ayah-text{font-size:16px;line-height:2}
  .tafsir-ayah-num{width:34px;height:34px;font-size:14px}
}