/* ============================================================
   The Clear Quran — A Reading Companion
   Theme: Modern · Obsidian + Silver + Gold
   ============================================================ */

:root{
  /* Core palette */
  --black:        #0a0a0c;
  --obsidian:     #111114;
  --panel:        #16161a;
  --panel-2:      #1c1c21;
  --panel-3:      #232329;
  --silver:       #c8cdd6;
  --silver-soft:  #a9aeb9;
  --silver-dim:   #7c828f;
  --line:         #2a2a31;
  --line-soft:    #202027;
  --line-strong:  #3a3a44;

  /* Gold accents */
  --gold:         #d4af37;
  --gold-bright:  #ecc94b;
  --gold-deep:    #9b7d22;
  --gold-soft:    rgba(212,175,55,.14);

  /* Text */
  --text:         #eef0f4;
  --text-soft:    #b8bcc6;
  --muted:        #7e8390;

  /* Feedback */
  --danger:       #ef5a6f;
  --ok:           #4cd4a8;

  /* Surfaces */
  --glass:        rgba(28,28,33,.72);
  --glass-strong: rgba(20,20,24,.85);
  --shadow:       0 10px 40px rgba(0,0,0,.55);
  --shadow-soft:  0 4px 16px rgba(0,0,0,.40);
  --glow-gold:    0 0 0 1px rgba(212,175,55,.35), 0 8px 30px rgba(212,175,55,.10);

  /* Shape */
  --radius:       16px;
  --radius-sm:    10px;
  --radius-pill:  999px;

  /* Fonts */
  --font-ui:      "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-en:      "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-ar:      "Amiri", "Scheherazade New", "Traditional Arabic", serif;
  --ar-size:      30px;
}

/* "Light" still exists as a setting but reads as a warm-silver parchment; the design
   is dark-first. Kept for the toggle but tuned to stay on-brand. */
body.light{
  --black:        #0a0a0c;
  --obsidian:     #f4f1ea;
  --panel:        #ffffff;
  --panel-2:      #faf7f0;
  --panel-3:      #f1ece0;
  --silver:       #2a2a30;
  --silver-soft:  #45454d;
  --silver-dim:   #6b6b75;
  --line:         #e2dccb;
  --line-soft:    #ece6d6;
  --line-strong:  #d3cab2;
  --text:         #1a1a20;
  --text-soft:    #3a3a42;
  --muted:        #7a7468;
  --glass:        rgba(255,255,255,.78);
  --glass-strong: rgba(255,255,255,.92);
  --shadow:       0 10px 40px rgba(60,50,20,.12);
  --shadow-soft:  0 4px 16px rgba(60,50,20,.08);
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
body{
  font-family: var(--font-ui);
  color: var(--text);
  background-color: var(--obsidian);
  background-image:
     /* faint 8-point star geometric lattice */
     url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='none' stroke='%23d4af37' stroke-width='0.6' opacity='0.05'><path d='M40 4 L48 24 L68 16 L60 36 L80 40 L60 44 L68 64 L48 56 L40 76 L32 56 L12 64 L20 44 L0 40 L20 36 L12 16 L32 24 Z'/><circle cx='40' cy='40' r='10'/><rect x='28' y='28' width='24' height='24' transform='rotate(45 40 40)'/></g></svg>"),
     radial-gradient(1200px 700px at 85% -15%, rgba(212,175,55,.14), transparent 55%),
     radial-gradient(1000px 600px at -10% 115%, rgba(212,175,55,.08), transparent 55%),
     linear-gradient(180deg, #07070a 0%, var(--obsidian) 50%, #0c0c10 100%);
  background-attachment: fixed;
  min-height: 100vh;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}
a{ color: var(--gold-bright); text-decoration: none; transition: color .15s; }
a:hover{ color: var(--gold); }
button{ font-family: var(--font-ui); cursor: pointer; }
::selection{ background: var(--gold); color: #000; }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.muted{ color: var(--muted); }
.placeholder{ color: var(--muted); font-style: italic; padding: 2rem 0; text-align:center; }

/* honor hidden everywhere */
[hidden]{ display: none !important; }

/* ============================================================
   LOGIN
   ============================================================ */
.login-screen{
  min-height: 100vh; display: grid; place-items: center; padding: 2rem; position: relative; overflow: hidden;
  background-color: #050507;
  background-image:
     url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='none' stroke='%23d4af37' stroke-width='0.6' opacity='0.07'><path d='M40 4 L48 24 L68 16 L60 36 L80 40 L60 44 L68 64 L48 56 L40 76 L32 56 L12 64 L20 44 L0 40 L20 36 L12 16 L32 24 Z'/><circle cx='40' cy='40' r='10'/><rect x='28' y='28' width='24' height='24' transform='rotate(45 40 40)'/></g></svg>"),
     radial-gradient(800px 500px at 50% -5%, rgba(212,175,55,.25), transparent 60%),
     radial-gradient(600px 400px at 50% 120%, rgba(212,175,55,.10), transparent 60%),
     linear-gradient(160deg, #050507 0%, var(--black) 50%, #0c0c10 100%);
}
/* Big transparent Kaaba silhouette behind the login card */
.login-kaaba{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -42%);
  height: 78vh; max-height: 620px; width: auto; opacity: 0.20; z-index: 0;
  filter: drop-shadow(0 0 60px rgba(212,175,55,.15));
  pointer-events: none;
}
.login-card{
  position: relative; z-index: 1;
  background:
    linear-gradient(180deg, rgba(28,28,33,.92), rgba(16,16,20,.94));
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  padding: 2.5rem 2.5rem 3rem;
  width: min(460px, 100%);
  text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
}
.login-card::before{
  content:""; position:absolute; inset:0; border-radius:24px; padding:1px;
  background: linear-gradient(160deg, var(--gold), transparent 40%, transparent 60%, rgba(212,175,55,.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none;
}
.login-bismillah{
  font-family: var(--font-ar); direction: rtl; font-size: 1.9rem; line-height: 1.6;
  background: linear-gradient(180deg, #f5d77a, var(--gold-bright) 50%, var(--gold-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 40px rgba(212,175,55,.3);
  margin-bottom: 1.5rem; letter-spacing: .01em;
}
.login-card h1{
  font-family: var(--font-ar); font-weight: 700; font-size: 1.6rem; letter-spacing: .18em;
  margin: 0 0 .35rem; line-height: 1; direction: ltr;
  background: linear-gradient(180deg, #f5d77a, var(--gold-bright) 60%, var(--gold-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 30px rgba(212,175,55,.25);
}
.login-sub{ color: var(--silver-soft); margin: 0 0 2.5rem; font-size: .9rem; letter-spacing: .01em; }
/* Big centered Enter button (no passcode) */
.login-enter{
  background: linear-gradient(180deg, var(--gold-bright), var(--gold) 60%, var(--gold-deep));
  color: #1a1408; border: none; padding: 1rem 3.5rem; border-radius: var(--radius-pill);
  font-size: 1.05rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  font-family: var(--font-ui); cursor: pointer;
  box-shadow: 0 8px 30px rgba(212,175,55,.35), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .15s, box-shadow .2s, filter .15s;
}
.login-enter:hover{
  transform: translateY(-2px) scale(1.03); filter: brightness(1.08);
  box-shadow: 0 14px 40px rgba(212,175,55,.5), inset 0 1px 0 rgba(255,255,255,.3);
}
.login-enter:active{ transform: translateY(0) scale(1); }

/* ===== Login animations ===== */
/* Kaaba slowly fades + rises in */
.login-kaaba{ animation: kaabaIn 1.6s cubic-bezier(.2,.7,.3,1) both; }
@keyframes kaabaIn{
  0%   { opacity: 0; transform: translate(-50%, -38%) scale(.92); }
  100% { opacity: .20; transform: translate(-50%, -42%) scale(1); }
}
/* gold band pulses gently */
.kaiba-band{ animation: bandPulse 4s ease-in-out infinite; transform-origin: center; }
@keyframes bandPulse{
  0%,100%{ opacity: .85; }
  50%    { opacity: 1; filter: drop-shadow(0 0 6px rgba(212,175,55,.6)); }
}
/* card slides up + fades in, staggered after the Kaaba */
.login-card{ animation: cardIn 1s cubic-bezier(.2,.7,.3,1) .25s both; }
@keyframes cardIn{
  0%   { opacity: 0; transform: translateY(30px) scale(.97); }
  100% { opacity: 1; transform: none; }
}
/* bismillah, title, subtitle, button fade+rise one after another */
.login-bismillah{ animation: riseIn .8s ease .5s both; }
.login-card h1{ animation: riseIn .8s ease .65s both; }
.login-sub{ animation: riseIn .8s ease .8s both; }
.login-enter{ animation: riseIn .8s ease .95s both; }
@keyframes riseIn{
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: none; }
}

/* ============================================================
   APP SHELL
   ============================================================ */
.app{ min-height: 100vh; display: flex; flex-direction: column; }

.topbar{
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1.25rem;
  padding: .85rem 1.75rem;
  background: var(--glass-strong);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(212,175,55,.12), 0 8px 24px rgba(0,0,0,.35);
}
/* glowing gold hairline under the top bar */
.topbar::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background: linear-gradient(90deg, transparent 5%, var(--gold-deep) 30%, var(--gold-bright) 50%, var(--gold-deep) 70%, transparent 95%);
  opacity:.5; pointer-events:none;
}
/* ===== Brand logo: gold calligraphic medallion + refined text ===== */
.brand{ display:flex; align-items:center; gap:.85rem; }
.brand-medallion{
  position: relative; width: 52px; height: 52px; flex: none;
  display:grid; place-items:center;
  filter: drop-shadow(0 0 8px rgba(212,175,55,.35));
}
.brand-svg{ position:absolute; inset:0; width:100%; height:100%; }
.brand-medallion-ar{
  position: relative; z-index: 1;
  font-family: var(--font-ar); direction: rtl; line-height: 1; font-size: 1.05rem;
  background: linear-gradient(180deg, #f5d77a, var(--gold-bright) 60%, var(--gold-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: -.02em;
}
.brand-text{ display:flex; flex-direction: column; line-height: 1.1; }
.brand-en{
  font-family: var(--font-en); font-weight: 600; font-size: 1.25rem; color: var(--text);
  letter-spacing: -.012em;
}
.brand-author{
  font-family: var(--font-ui); font-size: .72rem; font-weight: 500; color: var(--silver-soft);
  letter-spacing: .02em; margin-top: .1rem;
}
.brand-tag{
  font-family: var(--font-ui); font-size: .62rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold-bright); opacity: .75;
  margin-top: .1rem;
}
/* legacy fallbacks (no longer used by markup, kept harmless) */
.brand-ar{ display: none; }

.nav{ display:flex; gap: .2rem; flex-wrap: wrap; margin-left: auto; background: rgba(0,0,0,.25); padding:.35rem; border-radius: var(--radius-pill); border:1px solid var(--line); }
.nav a{
  color: var(--silver-soft); padding: .6rem 1.1rem; border-radius: var(--radius-pill);
  font-size: .95rem; font-weight: 700; text-decoration: none; letter-spacing: .12em;
  text-transform: uppercase;
  transition: background .15s, color .15s; white-space: nowrap;
}
.nav a:hover{ background: var(--panel-3); color: var(--text); }
.nav a.active{ background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color: #1a1408; box-shadow: 0 2px 10px rgba(212,175,55,.3); }
.nav-toggle{ display:none; background: var(--panel-3); border:1px solid var(--line); color: var(--text); width:40px; height:40px; border-radius:10px; font-size:1.2rem; margin-left:auto; }
.logout-btn{
  margin-left: auto; display:inline-flex; align-items:center; gap:.4rem;
  background: rgba(239,90,111,.10); border:1px solid rgba(239,90,111,.35); color: var(--danger);
  padding: .5rem .95rem; border-radius: var(--radius-pill); font-size: .82rem; font-weight: 700;
  letter-spacing: .04em; transition: all .15s; font-family: var(--font-ui);
}
.logout-btn:hover{ background: var(--danger); color:#fff; border-color: var(--danger); }

main#main{ flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: 1.75rem; }
.view{ animation: fade .3s cubic-bezier(.2,.7,.3,1); }
@keyframes fade{ from{ opacity:0; transform: translateY(6px);} to{opacity:1; transform:none;} }

.footer{
  text-align:center; padding: 1.25rem; font-size: .8rem; color: var(--muted);
  border-top: 1px solid var(--line); background: var(--glass);
  backdrop-filter: blur(8px);
}

/* ============================================================
   CARDS & BUTTONS  — shared depth treatment on ALL cards
   ============================================================ */
.card{
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212,175,55,.10), transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(212,175,55,.05), transparent 70%),
    linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.85rem;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
/* twinkling star field on every card */
.card::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, var(--gold-bright) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 28% 72%, var(--gold-bright) 50%, transparent 100%),
    radial-gradient(2px 2px at 47% 28%, var(--gold-bright) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 63% 82%, var(--gold-bright) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 78% 22%, var(--gold-bright) 50%, transparent 100%),
    radial-gradient(2px 2px at 88% 62%, var(--gold-bright) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 18% 48%, var(--gold-bright) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 55% 55%, var(--gold-bright) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 35% 12%, var(--gold-bright) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 72% 38%, var(--gold-bright) 50%, transparent 100%);
  opacity:.45; animation: twinkle 5s ease-in-out infinite alternate;
}
@keyframes twinkle{
  0%   { opacity:.20; }
  50%  { opacity:.60; }
  100% { opacity:.30; }
}
/* inner gold frame for depth */
.card::after{
  content:""; position:absolute; inset:8px; border:1px solid rgba(212,175,55,.22);
  border-radius: calc(var(--radius) - 6px); pointer-events:none; z-index:0;
}
/* keep all card content above the effect layers */
.card > *{ position: relative; z-index: 1; }
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom: 1.35rem; flex-wrap: wrap; }
.card-head h2{ font-family: var(--font-en); font-weight: 400; font-size: 1.75rem; color: var(--text); margin:0; letter-spacing: -0.012em; }
.card-sub{ color: var(--muted); font-size: .85rem; }

.big-card{ max-width: 780px; margin: 2rem auto 0; text-align: center; }
/* (depth + star effect now applied globally to all .card above) */

/* Clickable refresh cards (Reminder / Dua) */
.card.clickable{ cursor: pointer; transition: transform .15s, box-shadow .2s, border-color .2s; }
.card.clickable:hover{ transform: translateY(-2px); box-shadow: var(--shadow), var(--glow-gold); border-color: rgba(212,175,55,.4); }
.card.clickable:active{ transform: translateY(0); }
.click-hint{
  font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-bright); opacity: .55; transition: opacity .15s;
}
.card.clickable:hover .click-hint{ opacity: 1; }

.ghost-btn{
  background: var(--panel-3); border:1px solid var(--line-strong); color: var(--silver);
  padding: .55rem 1.1rem; border-radius: var(--radius-pill);
  font-weight: 600; font-size:.85rem; letter-spacing: .01em;
  transition: all .15s;
}
.ghost-btn:hover{ background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color:#1a1408; border-color: var(--gold); transform: translateY(-1px); }
.danger-btn{ background: rgba(239,90,111,.14); color: var(--danger); border:1px solid rgba(239,90,111,.4); padding:.6rem 1.1rem; border-radius: var(--radius-sm); font-weight:600; }
.danger-btn:hover{ background: var(--danger); color:#fff; }

/* ============================================================
   REMINDER & DUA
   ============================================================ */
.reminder-body, .dua-body{ padding: 1.25rem 0; }
.reminder-en, .dua-en{
  font-family: var(--font-en); font-size: 1.6rem; line-height: 1.6; font-weight: 300;
  color: var(--text); margin: 0 0 1.5rem; letter-spacing: -0.005em;
}
.reminder-ar, .dua-ar{
  font-family: var(--font-ar); font-size: 2.4rem; line-height: 2; font-weight: 400;
  color: var(--gold-bright); direction: rtl; margin: .5rem 0 .75rem;
  text-shadow: 0 0 30px rgba(212,175,55,.15);
}
.reminder-tr, .dua-tr{
  font-family: var(--font-ui); font-style: italic; font-size: 1.05rem; line-height: 1.7;
  color: var(--silver); margin: 0 0 1.5rem; letter-spacing: .01em;
  opacity: .85;
}
/* Reminder context window: the focus ayah vs. the surrounding verses */
.reminder-en .reminder-focus{ color: var(--text); font-weight: 400; }
.reminder-en .reminder-context{ color: var(--silver-dim); opacity: .85; }
.reminder-tr-note{ color: var(--muted); font-size: .82rem; font-style: italic; }
.reminder-ref, .dua-ref{
  display: inline-block; font-family: var(--font-ui); font-size: .8rem; font-weight: 700;
  color: var(--gold-bright); letter-spacing: .06em; text-transform: uppercase;
  background: var(--gold-soft); border: 1px solid rgba(212,175,55,.3);
  padding: .4rem .9rem; border-radius: var(--radius-pill);
}
.dua-title{ font-family: var(--font-en); font-size: 1.2rem; color: var(--gold-bright); margin: .5rem 0 1rem; font-weight:400; letter-spacing: -0.005em; }
.next-in{ color: var(--muted); font-size: .8rem; margin: 1.75rem 0 0; }

/* ============================================================
   THE QURAN VIEW
   ============================================================ */
.surah-toolbar{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom: 1.25rem;
  /* Sticky: stays under the top nav while the verses scroll */
  position: sticky; top: 70px; z-index: 30;
  padding: .85rem 1rem; margin-left: -1rem; margin-right: -1rem; /* bleed to card edges */
  border-radius: var(--radius);
  background: var(--glass-strong);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.surah-select{
  flex: 1; min-width: 260px; max-width: 520px;
  font-family: var(--font-ui); font-size: .95rem; font-weight: 500;
  padding: .85rem 1.1rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--panel); color: var(--text); cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23d4af37' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat; background-position: right 1rem center;
  padding-right: 2.5rem;
}
.surah-select:focus{ outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,175,55,.18); }
.surah-select option{ background: var(--panel); color: var(--text); }
.surah-meta{ color: var(--silver-dim); font-size: .82rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }

/* Language toggle (EN/NL) */
.lang-toggle{
  display:flex; border:1px solid var(--line-strong); border-radius: var(--radius-pill);
  overflow:hidden; background: var(--panel-3); margin-left: auto;
}
.lang-btn{
  background: transparent; border:none; padding: .5rem .9rem;
  color: var(--silver-soft); font-weight: 700; font-size: .78rem; letter-spacing: .06em;
  transition: all .15s; font-family: var(--font-ui);
}
.lang-btn:hover{ color: var(--text); }
.lang-btn.active{
  background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color:#1a1408;
}

/* Ayah selector */
.ayah-select-wrap{
  display:flex; align-items:stretch; border:1px solid var(--line-strong);
  border-radius: var(--radius-sm); overflow:hidden; background: var(--panel);
}
.ayah-select-prefix{
  display:grid; place-items:center; padding: 0 .65rem; font-size:.72rem; font-weight:700;
  color: var(--gold-bright); letter-spacing:.08em; text-transform: uppercase;
  background: rgba(212,175,55,.10); border-right:1px solid var(--line);
}
.ayah-select{
  font-family: var(--font-ui); font-size: .9rem; padding: .65rem .5rem;
  border: none; background: var(--panel); color: var(--text); cursor: pointer;
  appearance: none; padding-right: 1.6rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 12 8'><path fill='%23a9aeb9' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat; background-position: right .5rem center;
}
.ayah-select:focus{ outline:none; box-shadow: inset 0 0 0 2px rgba(212,175,55,.4); }
.ayah-go-btn{
  background: var(--panel-3); border:none; border-left:1px solid var(--line);
  color: var(--silver-soft); padding: 0 .85rem; font-size:.8rem; font-weight:700;
  transition: all .15s;
}
.ayah-go-btn:hover{ background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color:#1a1408; }

/* Reciter selector */
.reciter-select{
  font-family: var(--font-ui); font-size: .85rem; font-weight: 500;
  padding: .65rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--panel); color: var(--text); cursor: pointer; appearance: none;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 12 8'><path fill='%23d4af37' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat; background-position: right .75rem center;
}
.reciter-select:focus{ outline:none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,175,55,.15); }
.reciter-select option{ background: var(--panel); }

/* Full-surah play button */
.play-surah-btn{
  background: linear-gradient(180deg, var(--panel-3), var(--panel-2));
  border:1px solid var(--line-strong); color: var(--gold-bright);
  padding: .65rem 1.1rem; border-radius: var(--radius-sm);
  font-weight: 700; font-size: .85rem; letter-spacing: .01em;
  display:inline-flex; align-items:center; gap:.45rem; transition: all .15s;
}
.play-surah-btn:hover{ background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color:#1a1408; border-color: var(--gold); }
.play-surah-btn.playing{ background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep)); color:#1a1408; border-color: var(--gold-bright); box-shadow: var(--glow-gold); }

.quran-grid{
  display: grid; grid-template-columns: 280px 1fr 280px; gap: 1.25rem; align-items: start;
  transition: grid-template-columns .35s ease;
}
/* When one side panel is hidden, give the verses more room */
.quran-grid.hide-left{ grid-template-columns: 1fr 280px; }
.quran-grid.hide-right{ grid-template-columns: 280px 1fr; }
.quran-grid.hide-left.hide-right{ grid-template-columns: 1fr; }

.info-box{
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212,175,55,.09), transparent 70%),
    linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--line); border-radius: var(--radius);
  padding: 1.35rem; box-shadow: var(--shadow-soft); position: sticky; top: 150px;
  transition: opacity .25s ease; overflow: hidden;
}
/* subtle star field + inner gold frame */
.info-box::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.35;
  animation: twinkle 5s ease-in-out infinite alternate;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 25%, var(--gold-bright) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 75% 70%, var(--gold-bright) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 50% 50%, var(--gold-bright) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 35% 85%, var(--gold-bright) 50%, transparent 100%);
}
.info-box::after{
  content:""; position:absolute; inset:7px; border:1px solid rgba(212,175,55,.2);
  border-radius: calc(var(--radius) - 6px); pointer-events:none; z-index:0;
}
.info-box > *{ position: relative; z-index: 1; }
/* Smooth hide: collapse + fade before display:none kicks in via JS */
.info-box.collapsing{ opacity: 0; transform: scale(.96); pointer-events: none; }
.info-box.hidden-panel{ display: none; }

.info-head{ display:flex; align-items:flex-start; justify-content: space-between; gap: .5rem; }
.info-box h3{
  font-family: var(--font-ui); font-size: .8rem; color: var(--gold-bright); margin: 0 0 .15rem;
  text-transform: uppercase; letter-spacing: .12em; font-weight: 700;
}
.info-toggle{
  flex: none; background: var(--panel-3); border: 1px solid var(--line-strong);
  color: var(--silver-soft); width: 24px; height: 24px; border-radius: 50%;
  font-size: 1.05rem; line-height: 1; display:grid; place-items:center; padding: 0;
  transition: all .15s;
}
.info-toggle:hover{ background: var(--danger); color:#fff; border-color: var(--danger); }

/* Restore chips: appear under the grid when a panel is hidden */
.info-restore{ display:flex; gap:.5rem; justify-content:center; margin-top: 1rem; flex-wrap: wrap; }
.info-restore:empty{ display: none; }
.restore-chip{
  background: var(--panel-2); border:1px dashed var(--gold-deep); color: var(--gold-bright);
  padding: .5rem 1rem; border-radius: var(--radius-pill); font-size: .82rem; font-weight: 600;
  letter-spacing: .04em; cursor: pointer; transition: all .15s;
}
.restore-chip:hover{ background: var(--gold-soft); border-style: solid; }
.info-sub{ color: var(--muted); font-size: .76rem; margin: 0 0 1rem; }
.info-scroll{
  max-height: 65vh; overflow-y: auto; padding-right: .5rem;
  font-size: .92rem; line-height: 1.75; color: var(--text-soft);
}
.info-scroll h2, .info-scroll h3, .info-scroll h4{
  font-size: .82rem; color: var(--gold-bright); margin: 1.4rem 0 .5rem;
  font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
}
.info-scroll h2:first-child, .info-scroll h3:first-child, .info-scroll h4:first-child{ margin-top: 0; }
.info-scroll p{ margin: 0 0 .9rem; }
.info-scroll p:last-child{ margin-bottom: 0; }
.info-scroll::-webkit-scrollbar{ width: 6px; }
.info-scroll::-webkit-scrollbar-thumb{ background: var(--line-strong); border-radius: 3px; }
.info-scroll::-webkit-scrollbar-track{ background: transparent; }

/* Center verse box */
.verse-box-wrap{
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212,175,55,.08), transparent 70%),
    linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; position: relative;
}
.verse-box-wrap::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px; z-index:2;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:.6;
}
/* inner gold frame for depth (no stars here — keeps verses readable) */
.verse-box-wrap::after{
  content:""; position:absolute; inset:8px; border:1px solid rgba(212,175,55,.18);
  border-radius: calc(var(--radius) - 6px); pointer-events:none; z-index:0;
}
.verse-box-wrap > *{ position: relative; z-index: 1; }
.verse-box{
  /* Let the surah expand fully — no fixed max-height. The page scrolls. */
  padding: 1.75rem 2rem;
}
.verse-box::-webkit-scrollbar{ width: 8px; }
.verse-box::-webkit-scrollbar-thumb{ background: var(--gold-deep); border-radius: 4px; }
.verse-box::-webkit-scrollbar-thumb:hover{ background: var(--gold); }
.verse-box::-webkit-scrollbar-track{ background: var(--line-soft); }

.surah-banner{
  text-align:center; padding: 2rem 0 2.25rem; margin-bottom: 1.5rem;
  position: relative;
  background:
    radial-gradient(ellipse 60% 80% at center, rgba(212,175,55,.10), transparent 70%);
}
/* gold ornamental medallion behind the bismillah */
.surah-banner::before{
  content:""; position:absolute; left:50%; top:48%; transform: translate(-50%,-50%);
  width: 320px; height: 320px; max-width: 90%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='none' stroke='%23d4af37' stroke-width='0.8' opacity='0.22'><circle cx='100' cy='100' r='90'/><circle cx='100' cy='100' r='72'/><circle cx='100' cy='100' r='54'/><path d='M100 10 L115 50 L155 35 L140 75 L180 100 L140 125 L155 165 L115 150 L100 190 L85 150 L45 165 L60 125 L20 100 L60 75 L45 35 L85 50 Z'/><path d='M100 30 L128 72 L172 60 L156 104 L196 130' transform='rotate(45 100 100)'/><path d='M100 30 L128 72 L172 60 L156 104 L196 130' transform='rotate(90 100 100)'/><path d='M100 30 L128 72 L172 60 L156 104 L196 130' transform='rotate(135 100 100)'/></g></svg>");
  background-repeat: no-repeat; background-position: center; background-size: contain;
  pointer-events: none; z-index: 0;
}
.surah-banner > *{ position: relative; z-index: 1; }
.surah-banner .bismillah{
  font-family: var(--font-ar); font-size: 2.6rem; color: var(--gold-bright); direction: rtl;
  text-shadow: 0 0 40px rgba(212,175,55,.45), 0 0 12px rgba(212,175,55,.3);
  letter-spacing: .02em; line-height: 1.4;
}
.surah-banner .bismillah-en{ color: var(--silver-soft); font-size: .85rem; margin-top:.6rem; letter-spacing:.06em; font-style: italic; }

/* ornamental gold divider */
.surah-divider{
  display:flex; align-items:center; justify-content:center; gap:.75rem;
  margin: 1rem auto 0; max-width: 360px;
}
.surah-divider .line{ flex:1; height:1px; background: linear-gradient(90deg, transparent, var(--gold-deep), transparent); }
.surah-divider .ornament{
  color: var(--gold-bright); font-size: 1.1rem; line-height:1; opacity:.9;
  text-shadow: 0 0 12px rgba(212,175,55,.4);
}

/* Dramatic surah name in the banner */
.surah-name-ar{
  font-family: var(--font-ar); direction: rtl; font-size: 3.4rem; line-height: 1.3;
  background: linear-gradient(180deg, #f5d77a 0%, var(--gold-bright) 45%, var(--gold-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 60px rgba(212,175,55,.25);
  letter-spacing: .01em; margin-bottom: .15rem;
  filter: drop-shadow(0 2px 20px rgba(212,175,55,.2));
}
.surah-name-en{
  color: var(--silver-soft); font-size: .82rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 600;
}

.ayah{
  display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem;
  padding: 1rem 0; border-bottom: 1px solid var(--line-soft);
  transition: background .2s; border-radius: var(--radius-sm);
  padding-left: .5rem; padding-right: .5rem;
}
.ayah:hover{ background: rgba(212,175,55,.04); }
.ayah.flash{ animation: flashgold 1.6s ease; }
@keyframes flashgold{
  0%{ background: rgba(212,175,55,.28); box-shadow: inset 0 0 0 2px var(--gold); }
  100%{ background: transparent; box-shadow: none; }
}
.ayah:last-child{ border-bottom: none; }
.ayah-num{
  grid-column: 1 / -1; display:flex; align-items:center; gap:.6rem; margin-bottom:.3rem;
}
.ayah-num .badge{
  width: 34px; height: 34px; flex:none; border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(212,175,55,.25), var(--panel-3) 70%);
  border: 1.5px solid var(--gold-deep);
  display:grid; place-items:center; font-family: var(--font-ui); font-weight:700;
  color: var(--gold-bright); font-size: .82rem;
  box-shadow: 0 0 0 1px rgba(212,175,55,.15), inset 0 0 8px rgba(212,175,55,.08);
}
.ayah-num .ayah-key{ color: var(--silver-dim); font-size: .76rem; font-weight:600; letter-spacing:.04em; }

.ayah-en{
  font-family: var(--font-en); font-size: 1.25rem; line-height: 1.7; color: var(--text); margin:0;
  font-weight: 300; letter-spacing: -0.002em;
}
.ayah-ar{
  grid-column: 1 / -1; font-family: var(--font-ar); direction: rtl;
  font-size: var(--ar-size); line-height: 2; color: var(--gold-bright); margin: .6rem 0 .2rem;
  font-weight: 400;
  text-shadow: 0 0 30px rgba(212,175,55,.18);
  letter-spacing: .01em;
}
/* Highlight the ayah currently being recited in continuous mode */
.ayah.playing-ayah{
  background: rgba(212,175,55,.08);
  box-shadow: inset 3px 0 0 var(--gold-bright);
  border-radius: var(--radius-sm);
}
.ayah-tools{ display:flex; flex-direction: column; gap: .4rem; align-items:flex-end; }
.tool-btn{
  background: var(--panel-3); border: 1px solid var(--line-strong); color: var(--silver);
  width: 36px; height: 36px; border-radius: 50%; display:grid; place-items:center;
  font-size: .85rem; transition: all .15s;
}
.tool-btn:hover{ background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color:#1a1408; border-color: var(--gold); transform: scale(1.05); }
.tool-btn.playing{ background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep)); color:#1a1408; border-color: var(--gold-bright); box-shadow: var(--glow-gold); }

/* Footnote markers in verse text */
.fn{
  display:inline-block; cursor: pointer; color: var(--gold-bright); font-weight: 700;
  font-size: .62em; vertical-align: super; font-family: var(--font-ui);
  padding: 0 .28em; margin: 0 .05em;
  background: var(--gold-soft); border: 1px solid rgba(212,175,55,.3);
  border-radius: 4px; line-height: 1; transition: all .15s;
}
.fn:hover{ background: var(--gold); color:#1a1408; transform: scale(1.1); }
.ayah-marker{ font-family: var(--font-ar); color: var(--gold); opacity:.8; }

/* ============================================================
   99 NAMES GRID
   ============================================================ */
.names-grid{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: .85rem;
}
.name-cell{
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem .75rem; text-align:center; cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  position: relative; overflow: hidden;
}
.name-cell::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity:0; transition: opacity .2s;
}
.name-cell:hover{
  transform: translateY(-4px); box-shadow: var(--shadow), var(--glow-gold);
  border-color: rgba(212,175,55,.4);
}
.name-cell:hover::before{ opacity:1; }
.name-num{
  position:absolute; top:.5rem; left:.6rem; font-size:.68rem; color: var(--gold);
  font-family: var(--font-ui); font-weight:700; letter-spacing: .05em;
}
.name-ar{
  font-family: var(--font-ar); font-size: 1.85rem; color: var(--gold-bright); direction: rtl; line-height:1.2;
  text-shadow: 0 0 20px rgba(212,175,55,.15);
}
.name-translit{ font-weight: 600; color: var(--text); font-size: .92rem; margin: .4rem 0 .15rem; letter-spacing: -0.005em; }
.name-meaning{ color: var(--silver-dim); font-size: .78rem; line-height:1.3; }

/* ============================================================
   QUIZ
   ============================================================ */
.quiz-controls{ display:flex; gap:.5rem; flex-wrap: wrap; margin-bottom: 1.35rem; }
.quiz-controls input{
  flex:1; min-width: 240px; padding:.75rem 1rem; border:1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: rgba(0,0,0,.3); color: var(--text); font-size: .92rem;
  font-family: var(--font-ui); transition: border-color .15s, box-shadow .15s;
}
.quiz-controls input::placeholder{ color: var(--silver-dim); }
.quiz-controls input:focus{ outline:none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,175,55,.15); }
.score-badge{ color: var(--silver-dim); font-size:.85rem; font-weight:600; }
.score-badge b{ color: var(--gold-bright); font-size: 1.05rem; }

.quiz-question{
  font-family: var(--font-en); font-size: 1.4rem; line-height: 1.5; color: var(--text);
  padding: 1.4rem 1.5rem;
  background: linear-gradient(180deg, rgba(212,175,55,.07), rgba(212,175,55,.02));
  border-radius: var(--radius-sm);
  border: 1px solid rgba(212,175,55,.2); border-left: 3px solid var(--gold);
  margin-bottom: 1.25rem; min-height: 60px; font-weight: 300; letter-spacing: -0.005em;
}
.quiz-options{ display:grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.opt-btn{
  text-align:left; padding: 1rem 1.1rem; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: .98rem; color: var(--text); transition: all .15s;
  display:flex; gap:.7rem; align-items:flex-start; font-family: var(--font-ui);
}
.opt-btn:hover:not(:disabled){ border-color: var(--gold); background: var(--panel-3); transform: translateY(-1px); }
.opt-btn:disabled{ cursor: default; opacity: .85; }
.opt-btn .letter{
  flex:none; width:26px; height:26px; border-radius:50%; border:1px solid var(--line-strong);
  display:grid; place-items:center; font-weight:700; font-size:.8rem; color: var(--gold-bright);
  background: var(--panel-3);
}
.opt-btn.correct{ background: rgba(76,212,168,.12); border-color: var(--ok); }
.opt-btn.correct .letter{ background: var(--ok); color:#06281f; border-color: var(--ok); }
.opt-btn.wrong{ background: rgba(239,90,111,.10); border-color: var(--danger); }
.opt-btn.wrong .letter{ background: var(--danger); color:#2a0a10; border-color: var(--danger); }

.quiz-feedback{
  margin-top:1.25rem; padding: 1.1rem 1.3rem; border-radius: var(--radius-sm);
  background: var(--panel-2); border:1px solid var(--line); border-left: 3px solid var(--gold);
}
.quiz-feedback .verdict{ font-weight: 700; font-size: 1.02rem; margin-bottom:.4rem; letter-spacing:-0.005em; }
.quiz-feedback .verdict.ok{ color: var(--ok); }
.quiz-feedback .verdict.no{ color: var(--danger); }
.quiz-feedback .explain{ color: var(--text-soft); font-size:.92rem; line-height:1.55; }

/* Context links inside quiz feedback */
.quiz-context{ margin-top:.75rem; padding-top:.75rem; border-top:1px dashed var(--line); font-size:.85rem; }
.ctx-label{ color: var(--gold-bright); font-weight:700; }
.ctx-link{
  color: var(--gold-bright); text-decoration:none; border-bottom:1px dotted var(--gold-deep);
  font-weight:600; margin: 0 .15rem;
}
.ctx-link:hover{ color: var(--gold); border-bottom-style: solid; }

/* Quiz history panel */
.quiz-history{ margin-top: 1.5rem; }
.quiz-history-list{ display:flex; flex-direction:column; gap: .85rem; max-height: none; text-align:left; }
.hist-item{
  background: var(--panel-2); border:1px solid var(--line); border-radius: var(--radius-sm);
  padding: .9rem 1rem; border-left: 3px solid var(--muted);
}
.hist-item.hist-correct{ border-left-color: var(--ok); }
.hist-item.hist-wrong{ border-left-color: var(--danger); }
.hist-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.4rem; }
.hist-num{ font-size:.72rem; font-weight:700; letter-spacing:.1em; color: var(--silver-dim); text-transform:uppercase; }
.hist-mark{ font-weight:700; font-size:1.05rem; }
.hist-correct .hist-mark{ color: var(--ok); }
.hist-wrong .hist-mark{ color: var(--danger); }
.hist-q{ font-family: var(--font-en); font-size:1.05rem; color: var(--text); margin-bottom:.5rem; line-height:1.45; }
.hist-answers{ font-size:.88rem; color: var(--text-soft); }
.hist-row{ margin: .15rem 0; }
.hist-row span{ color: var(--silver-dim); font-weight:600; margin-right:.35rem; }
.hist-right{ color: var(--ok); font-weight:500; }
.hist-mine{ color: var(--danger); }
.hist-info{ margin-top:.5rem; padding-top:.5rem; border-top:1px dashed var(--line); font-size:.85rem; color: var(--silver); font-style: italic; line-height:1.5; }

/* ============================================================
   SETTINGS
   ============================================================ */
.settings-card{ max-width: 820px; margin: 1.5rem auto; }
.setting-row{
  display:flex; align-items:center; gap:1.25rem; justify-content: space-between;
  padding: 1.2rem 0; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap;
}
.setting-row:last-child{ border-bottom:none; }
.setting-row h4{ margin:0 0 .2rem; font-size:.98rem; color: var(--text); font-weight:600; letter-spacing:-0.005em; }
.setting-row p{ margin:0; }
.inline-form{ display:flex; gap:.5rem; }
.inline-form input{
  padding:.65rem .85rem; border:1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: rgba(0,0,0,.3); color: var(--text); font-family: var(--font-ui);
}
.inline-form input:focus{ outline:none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,175,55,.15); }
.inline-form button, .setting-row button[type="submit"]{
  background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color:#1a1408; border:none;
  padding:.65rem 1.1rem; border-radius: var(--radius-sm); font-weight:700; font-size:.88rem;
}
.inline-form button:hover{ filter: brightness(1.05); }
.seg{ display:flex; border:1px solid var(--line-strong); border-radius: var(--radius-pill); overflow:hidden; background: var(--panel-3); }
.seg-btn{ background: transparent; border:none; padding:.55rem 1.1rem; color: var(--silver-soft); font-weight:600; font-size:.85rem; transition: all .15s; }
.seg-btn.active{ background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color:#1a1408; }
input[type="range"]{ accent-color: var(--gold); width: 160px; }
.range-val{ color: var(--gold-bright); font-size:.82rem; font-weight:600; font-family: var(--font-ui); }
.grid-2col{ display:grid; grid-template-columns: 1fr 1fr; gap:.6rem; }
.grid-2col label{ display:flex; flex-direction:column; gap:.25rem; font-size:.78rem; color: var(--silver-dim); font-weight:600; letter-spacing:.03em; text-transform: uppercase; }
.grid-2col select{
  padding:.6rem; border:1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--panel); color: var(--text); font-family: var(--font-ui);
}

/* ============================================================
   ABOUT
   ============================================================ */
.about-card{ max-width: 780px; margin: 1.5rem auto; }
.about-card h3{ color: var(--gold-bright); font-family: var(--font-ui); font-size:.82rem; margin: 1.5rem 0 .4rem; text-transform:uppercase; letter-spacing: .1em; font-weight:700; }
.about-card p{ line-height: 1.7; color: var(--text-soft); }

/* ===== Knowledge / Library ===== */
.library-list{ display:flex; flex-direction: column; gap: 1.25rem; margin-top: 1.5rem; }
.lib-item{
  display:grid; grid-template-columns: 140px 1fr; gap: 1.5rem;
  background: var(--panel-2); border:1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem; transition: border-color .2s, box-shadow .2s;
}
.lib-item:hover{ border-color: rgba(212,175,55,.35); box-shadow: var(--shadow-soft); }
.lib-cover{
  width: 140px; height: 190px; border-radius: 8px;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
  padding: 1rem .6rem; text-align:center; position:relative;
  box-shadow: 0 10px 24px rgba(0,0,0,.5), inset 0 0 0 1px rgba(212,175,55,.2);
}
.lib-cover-emoji{ font-size: 2.6rem; margin-bottom: .4rem; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.lib-cover-title{
  font-family: var(--font-en); font-size: .85rem; font-weight: 500; color: var(--gold-bright);
  line-height: 1.25; letter-spacing: -.005em; text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.lib-info h3{ font-family: var(--font-en); font-size: 1.35rem; color: var(--text); margin: 0 0 .2rem; font-weight: 500; }
.lib-subtitle{ color: var(--silver-soft); font-size: .9rem; font-style: italic; margin: 0 0 .9rem; }
.lib-table{ border-collapse: collapse; font-size: .88rem; margin-bottom: .9rem; }
.lib-table th{ text-align:left; padding: .25rem 1rem .25rem 0; color: var(--silver-dim); font-weight:600; letter-spacing:.04em; white-space:nowrap; }
.lib-table td{ color: var(--text-soft); }
.lib-desc{ color: var(--silver-soft); font-size: .9rem; line-height: 1.6; margin: 0 0 1rem; }
.lib-actions{ display:flex; gap:.6rem; }
.lib-open, .lib-download{
  background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color:#1a1408;
  padding: .55rem 1.3rem; border-radius: var(--radius-pill); font-weight:700; font-size:.82rem;
  text-decoration:none; letter-spacing:.04em; border: 1px solid var(--gold); transition: filter .15s, transform .1s;
}
.lib-open:hover, .lib-download:hover{ filter: brightness(1.08); transform: translateY(-1px); text-decoration:none; }
.lib-nofile{ color: var(--muted); font-style: italic; font-size:.85rem; }
@media (max-width: 600px){
  .lib-item{ grid-template-columns: 1fr; }
  .lib-cover{ width: 110px; height: 150px; }
}
.about-opening{
  font-family: var(--font-en); font-style: italic; font-size: 1.15rem; line-height: 1.6;
  color: var(--gold-bright); text-align: center;
  border-top: 1px solid rgba(212,175,55,.25); border-bottom: 1px solid rgba(212,175,55,.25);
  padding: 1.1rem .5rem; margin-bottom: 1.5rem;
  background: radial-gradient(ellipse at center, rgba(212,175,55,.08), transparent 70%);
}

/* ============================================================
   MODALS
   ============================================================ */
.modal{ position: fixed; inset:0; z-index: 100; display:grid; place-items:center; padding:1.5rem; }
.modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.7); backdrop-filter: blur(6px); }
.modal-card{
  position:relative; z-index:1; width: min(560px, 100%); max-height: 85vh; overflow:hidden;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: 0 30px 90px rgba(0,0,0,.7); display:flex; flex-direction:column;
  animation: pop .25s cubic-bezier(.2,.7,.3,1.1);
}
@keyframes pop{ from{ transform: scale(.95) translateY(8px); opacity:0;} to{ transform:none; opacity:1;} }
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.15rem 1.35rem; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
}
.modal-head h3{ margin:0; font-family: var(--font-ui); color: var(--text); font-size:.92rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700; }
.x-btn{ background:var(--panel-3); border:1px solid var(--line); color: var(--silver-soft); width:32px; height:32px; border-radius:50%; font-size:1.1rem; line-height:1; display:grid; place-items:center; }
.x-btn:hover{ background: var(--danger); color:#fff; border-color: var(--danger); }
.modal-body{ padding: 1.35rem; overflow-y:auto; line-height:1.65; color: var(--text-soft); }

.name-detail{ text-align:center; }
.name-detail .big-ar{
  font-family: var(--font-ar); font-size: 3.2rem; color: var(--gold-bright); direction: rtl; margin: .5rem 0;
  text-shadow: 0 0 40px rgba(212,175,55,.25);
}
.name-detail .big-translit{ font-weight: 700; color: var(--text); font-size:1.2rem; letter-spacing:-0.01em; }
.name-detail .big-meaning{ color: var(--gold-bright); font-weight:600; margin:.5rem 0 1.1rem; font-size:.95rem; }
.name-detail .big-info{ text-align:left; }

/* ============================================================
   TOAST
   ============================================================ */
.toast{
  position: fixed; bottom: 1.75rem; left: 50%; transform: translateX(-50%) translateY(20px);
  background: linear-gradient(180deg, var(--panel-3), var(--panel-2));
  color: var(--text); padding: .85rem 1.5rem; border-radius: var(--radius-pill);
  font-size: .88rem; font-weight: 500;
  border:1px solid var(--line-strong);
  box-shadow: var(--shadow); opacity: 0; transition: all .25s; z-index: 200;
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px){
  .quran-grid{ grid-template-columns: 1fr; }
  /* Side panels: hidden by default on tablet/mobile, opened via the + chips */
  .quran-grid .info-box{ display: none; }
  .quran-grid.hide-left.hide-right .info-box,
  .quran-grid:not(.hide-left):not(.hide-right) .info-box{ display: none; }
  /* when a panel is requested (no hide- class), show it stacked */
  .quran-grid:not(.hide-left) .info-left,
  .quran-grid:not(.hide-right) .info-right{ display: block; position: static; max-height: 320px; }
  .quran-grid .info-box .info-scroll{ max-height: 240px; }
}
@media (max-width: 760px){
  .nav{
    display:none; position:absolute; top:calc(100% + 8px); left:1rem; right:1rem;
    background: var(--glass-strong); backdrop-filter: blur(16px);
    flex-direction:column; padding:.6rem; border-radius: var(--radius);
    border:1px solid var(--line-strong); box-shadow: var(--shadow);
  }
  .nav.open{ display:flex; }
  .nav a{ margin: .1rem 0; }
  .nav-toggle{ display:grid; place-items:center; }
  main#main{ padding: 1.25rem; }
  .quiz-options{ grid-template-columns: 1fr; }
  .card{ padding: 1.4rem; }
  .reminder-en, .dua-en{ font-size: 1.3rem; }
  .grid-2col{ grid-template-columns: 1fr; }
  .topbar{ padding:.7rem 1rem; }
  /* Compact logout on mobile: icon-only */
  .logout-btn{ padding: .5rem .6rem; font-size: 0; }
  .logout-btn::before{ content:"⏻"; font-size: 1.05rem; }
  /* Login Kaaba smaller on phones */
  .login-kaaba{ height: 60vh; opacity: 0.16; }
  .login-bismillah{ font-size: 1.5rem; }
  .login-card h1{ font-size: 2rem; }
  /* Compact sticky Quran toolbar on phones */
  .surah-toolbar{
    position: sticky; top: 56px; padding: .55rem .6rem; gap: .45rem;
    margin-left: -.6rem; margin-right: -.6rem; border-radius: var(--radius-sm);
  }
  .surah-select{ min-width: 100%; font-size: .9rem; padding: .65rem .8rem; }
  /* Ayah selector + reciter: compact on phones */
  .ayah-select-wrap{ font-size: .85rem; }
  .ayah-select-prefix{ padding: 0 .45rem; font-size: .65rem; }
  .ayah-select{ padding: .55rem .35rem; font-size: .85rem; padding-right: 1.3rem; }
  .ayah-go-btn{ padding: 0 .65rem; font-size: .72rem; }
  .reciter-select{ font-size: .78rem; padding: .55rem .7rem; padding-right: 1.6rem; }
  .play-surah-btn{ padding: .55rem .8rem; font-size: .78rem; }
  .lang-btn{ padding: .45rem .7rem; font-size: .72rem; }
  /* surah-meta hidden on very small screens to save space */
  .surah-meta{ display: none; }
  /* Side panels when opened on mobile: don't dominate */
  .quran-grid .info-box{ padding: 1rem; }
  .quran-grid .info-box .info-scroll{ max-height: 200px; font-size: .88rem; }
  .info-restore{ gap: .35rem; }
  .restore-chip{ padding: .4rem .75rem; font-size: .75rem; }
}