/* اتقان لتعليم القرآن — هويّة زمرّديّة + ذهبيّة (من اللوقو). RTL، فاتح/داكن. */
@font-face{
  font-family:"Amiri Quran Local";
  font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/amiri-quran.woff2") format("woff2");
}
:root{
  --bg:#f5f1e6; --surface:#ffffff; --surface2:#efe8d7; --sunken:#f0ead9;
  --ink:#13251c; --muted:#5f7268; --line:#e2dac7;
  --emerald:#0e7a52; --emerald-deep:#0a3d2a; --emerald-soft:rgba(14,122,82,.10);
  --gold:#b0871c; --gold-2:#caa53e; --gold-soft:rgba(176,135,28,.14);
  --err:#cf3f4b; --err-soft:rgba(207,63,75,.11); --err-line:rgba(207,63,75,.34);
  --skip:#c07a12; --skip-soft:rgba(192,122,18,.12);
  --ok:#0e7a52;
  --tj-madd:#d17d16; --tj-ghunnah:#159b5b; --tj-qalqala:#2665c9; --tj-shadda:#8a52c0;
  --qfont:"Amiri Quran Local","Amiri Quran","Scheherazade New",serif;
  --uifont:"Tajawal","Segoe UI",system-ui,Tahoma,sans-serif;
  --radius:18px; --radius-sm:12px;
  --shadow:0 12px 34px rgba(10,61,42,.12);
  --qscale:1;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#06160f; --surface:#0c2318; --surface2:#113020; --sunken:#0a1f15;
    --ink:#e9f3ec; --muted:#8aad9a; --line:#1b3a29;
    --emerald:#18a26c; --emerald-deep:#0c5238; --emerald-soft:rgba(24,162,108,.14);
    --gold:#d6b24c; --gold-2:#e6c66b; --gold-soft:rgba(214,178,76,.14);
    --tj-madd:#e8993a; --tj-ghunnah:#2bc07d; --tj-qalqala:#5b96e8; --tj-shadda:#b483e6;
    --shadow:0 12px 34px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --bg:#06160f; --surface:#0c2318; --surface2:#113020; --sunken:#0a1f15;
  --ink:#e9f3ec; --muted:#8aad9a; --line:#1b3a29;
  --emerald:#18a26c; --emerald-deep:#0c5238; --emerald-soft:rgba(24,162,108,.14);
  --gold:#d6b24c; --gold-2:#e6c66b; --gold-soft:rgba(214,178,76,.14);
  --tj-madd:#e8993a; --tj-ghunnah:#2bc07d; --tj-qalqala:#5b96e8; --tj-shadda:#b483e6;
  --shadow:0 12px 34px rgba(0,0,0,.5);
}
:root[data-theme="light"]{
  --bg:#f5f1e6; --surface:#ffffff; --surface2:#efe8d7; --sunken:#f0ead9;
  --ink:#13251c; --muted:#5f7268; --line:#e2dac7;
  --emerald:#0e7a52; --gold:#b0871c; --tj-qalqala:#2665c9;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink); font-family:var(--uifont);
  -webkit-tap-highlight-color:transparent; overflow-x:hidden;
  background-image:radial-gradient(120% 60% at 50% -10%, var(--emerald-soft), transparent 60%);
}
#app{max-width:560px; margin:0 auto; min-height:100vh; padding:14px 14px 96px; position:relative}
button{font-family:inherit; cursor:pointer}
.hidden{display:none !important}

/* ── الترويسة ── */
.top{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.top .logo{width:44px; height:44px; border-radius:12px; object-fit:cover; box-shadow:var(--shadow)}
.top .ttl{font-weight:800; font-size:1.15rem; color:var(--emerald-deep)}
:root[data-theme="dark"] .top .ttl{color:var(--gold-2)}
.top .sub{font-size:.72rem; color:var(--muted); font-weight:600}
.top .spacer{flex:1}
.icon-btn{width:38px; height:38px; border-radius:11px; border:1px solid var(--line);
  background:var(--surface); color:var(--emerald); display:grid; place-items:center; font-size:1.05rem}

/* ── البطل (الرئيسيّة) ── */
.hero{text-align:center; padding:12px 0 4px}
.hero img{width:118px; height:118px; border-radius:26px; box-shadow:var(--shadow); margin-bottom:6px}
.hero h1{margin:.1em 0 .05em; font-size:1.7rem; color:var(--emerald-deep); font-weight:800}
:root[data-theme="dark"] .hero h1{color:var(--gold-2)}
.hero .tag{color:var(--muted); font-size:.9rem; font-weight:600}
.hero .verse{font-family:var(--qfont); color:var(--gold); font-size:1.15rem; margin-top:8px}

/* ── ركائز الأربع (بطاقات الأوضاع) ── */
.pillars{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:18px 0}
.pill-card{
  position:relative; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); padding:16px 14px; text-align:center; overflow:hidden;
  transition:transform .12s ease, box-shadow .12s ease; box-shadow:0 4px 16px rgba(10,61,42,.06)}
.pill-card:active{transform:scale(.97)}
.pill-card .pi{width:52px; height:52px; margin:0 auto 8px; border-radius:15px; display:grid; place-items:center;
  background:var(--emerald-soft); color:var(--emerald); font-size:1.5rem}
.pill-card.gold .pi{background:var(--gold-soft); color:var(--gold)}
.pill-card h3{margin:2px 0; font-size:1.05rem; font-weight:800; color:var(--ink)}
.pill-card p{margin:0; font-size:.76rem; color:var(--muted); line-height:1.5}
.pill-card::after{content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--emerald),var(--gold))}

/* ── منتقي السورة ── */
.section-label{font-size:.78rem; color:var(--muted); font-weight:700; margin:14px 4px 8px}
.surah-grid{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.surah-chip{display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface); padding:10px 12px; text-align:right}
.surah-chip .num{width:30px; height:30px; border-radius:9px; background:var(--emerald-soft); color:var(--emerald);
  display:grid; place-items:center; font-weight:800; font-size:.82rem; flex:0 0 auto}
.surah-chip .nm{font-family:var(--qfont); font-size:1.28rem; color:var(--ink); line-height:1}
.surah-chip .ct{font-size:.68rem; color:var(--muted)}
.surah-chip.active{border-color:var(--gold); background:var(--gold-soft)}

/* ── شريط الوضع ── */
.mode-bar{display:flex; align-items:center; gap:8px; margin-bottom:12px}
.mode-bar .back{width:36px; height:36px; border-radius:11px; border:1px solid var(--line);
  background:var(--surface); color:var(--emerald); font-size:1.2rem}
.mode-bar .mtitle{font-weight:800; color:var(--emerald-deep)}
:root[data-theme="dark"] .mode-bar .mtitle{color:var(--gold-2)}
.mode-bar .mtitle small{display:block; font-size:.68rem; color:var(--muted); font-weight:600}
.mode-bar .spacer{flex:1}
.seg{display:inline-flex; background:var(--sunken); border:1px solid var(--line); border-radius:11px; padding:3px; gap:2px}
.seg button{border:none; background:transparent; color:var(--muted); font-weight:700; font-size:.8rem;
  padding:6px 12px; border-radius:8px}
.seg button.on{background:var(--emerald); color:#fff}

/* ── القارئ (الآيات) ── */
.reader{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 16px; box-shadow:var(--shadow)}
.bism{font-family:var(--qfont); text-align:center; color:var(--gold); font-size:1.5rem; margin-bottom:14px}
.ayah{font-family:var(--qfont); font-size:calc(1.9rem*var(--qscale)); line-height:2.5; text-align:center;
  color:var(--ink); margin:0}
.ayah .word{cursor:default; border-radius:6px; padding:0 1px; transition:background .15s}
.ayah .word.reading{background:var(--gold-soft); box-shadow:0 0 0 2px var(--gold) inset; border-radius:8px}
.ayah .word.read{color:var(--emerald)}
.ayah .word.err{color:var(--err); background:var(--err-soft)}
.ayah .word.skip{color:var(--skip); background:var(--skip-soft)}
.ayah-num{display:inline-grid; place-items:center; width:1.6em; height:1.6em; margin:0 .25em;
  border:1.5px solid var(--gold); color:var(--gold); border-radius:50%; font-family:var(--uifont);
  font-size:.5em; vertical-align:middle; font-weight:700}
.ayah-sep{display:block; height:4px}

/* ألوان التجويد */
.tj-madd{color:var(--tj-madd)}
.tj-ghunnah{color:var(--tj-ghunnah)}
.tj-qalqala{color:var(--tj-qalqala)}
.tj-shadda{color:var(--tj-shadda)}

/* أسطورة التجويد */
.legend{display:flex; flex-wrap:wrap; gap:8px 14px; justify-content:center; margin-top:14px;
  padding-top:12px; border-top:1px dashed var(--line)}
.legend .lg{display:flex; align-items:center; gap:6px; font-size:.78rem; color:var(--muted); font-weight:700}
.legend .dot{width:12px; height:12px; border-radius:50%}

/* شريط التسجيل */
.recbar{position:fixed; left:0; right:0; bottom:0; display:flex; flex-direction:column; align-items:center;
  gap:8px; padding:12px 0 calc(12px + env(safe-area-inset-bottom)); pointer-events:none; z-index:40}
.recbar .status{pointer-events:auto; background:var(--surface); border:1px solid var(--line);
  color:var(--muted); font-weight:700; font-size:.82rem; padding:7px 16px; border-radius:20px; box-shadow:var(--shadow); max-width:90%}
.recbar .status.ok{color:var(--emerald)} .recbar .status.err{color:var(--err)}
.micbtn{pointer-events:auto; width:74px; height:74px; border-radius:50%; border:none;
  background:radial-gradient(circle at 35% 30%, var(--emerald), var(--emerald-deep));
  color:#fff; font-size:1.7rem; display:grid; place-items:center;
  box-shadow:0 10px 30px rgba(14,122,82,.5); transition:transform .12s}
.micbtn:active{transform:scale(.94)}
.micbtn.recording{background:radial-gradient(circle at 35% 30%, #e0564f, #a52f2c); box-shadow:0 10px 30px rgba(207,63,75,.5)}
.pill-btn{pointer-events:auto; display:inline-flex; gap:6px; align-items:center; background:var(--surface);
  border:1px solid var(--line); color:var(--ink); font-weight:700; font-size:.8rem; padding:8px 14px; border-radius:16px; box-shadow:var(--shadow)}
.pill-btn.on{border-color:var(--gold); color:var(--gold)}

/* شريط سفليّ للتنقّل */
.tabbar{position:fixed; left:0; right:0; bottom:0; max-width:560px; margin:0 auto; display:flex; justify-content:space-around;
  background:var(--surface); border-top:1px solid var(--line); padding:8px 0 calc(8px + env(safe-area-inset-bottom)); z-index:30}
.tabbar button{border:none; background:none; color:var(--muted); font-size:.68rem; font-weight:700; display:flex; flex-direction:column; align-items:center; gap:3px}
.tabbar button .ti{font-size:1.15rem}
.tabbar button.on{color:var(--emerald)}
:root[data-theme="dark"] .tabbar button.on{color:var(--gold-2)}

/* ملاحظات التصحيح */
.notes{margin-top:14px; display:flex; flex-direction:column; gap:8px}
.note{border:1px solid var(--err-line); background:var(--err-soft); border-radius:12px; padding:10px 12px; font-size:.85rem}
.note .w{font-family:var(--qfont); font-size:1.15rem}
.note.ok{border-color:var(--emerald); background:var(--emerald-soft)}
.summary{margin-top:12px; text-align:center; font-weight:800; color:var(--emerald); font-size:1rem}

/* عامّة */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px; box-shadow:0 4px 16px rgba(10,61,42,.06)}
.muted{color:var(--muted)} .center{text-align:center}
.audio-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px}
.mini-btn{border:1px solid var(--line); background:var(--surface); color:var(--emerald); border-radius:10px; padding:7px 12px; font-weight:700; font-size:.8rem}
.mini-btn.on{background:var(--emerald); color:#fff}