/* المرتل — هُويّة داكنة مطابقة لتطبيق ترتيل: خلفيّة شبه سوداء + تدرّج تركوازي↔أخضر للعلامة +
   أخضر مسطّح للحالة الإيجابيّة + كهرمانيّ للمداومة + ذهبيّ (نوعان) للتنبيهات. خطّ Tajawal للواجهة. */
:root{
  /* الأسماء القديمة (تُستعملها شاشة القراءة الحاليّة) — قيمها فقط تغيّرت لتطابق لوحة ترتيل الداكنة. */
  --bg:#0A0A0B; --panel:#1C1C1E; --panel2:#242426;
  --ink:#F5F5F5; --muted:#9A9A9E; --line:#2C2C2E;
  --teal:#3ECF8E; --teal2:#34C77B; --teal-soft:rgba(62,207,142,.14);
  --gold:#D9A02D; --gold-soft:rgba(217,160,45,.14);
  --red:#F87171; --red-soft:rgba(248,113,113,.12); --red-line:rgba(248,113,113,.35);
  --reading:#3ECF8E; --reading-soft:rgba(62,207,142,.14);
  --shadow:0 6px 22px rgba(0,0,0,.5);
  --radius:16px;
  --qfont:"Amiri Quran", "Traditional Arabic", "Scheherazade New", serif;
  --uifont:"Tajawal", system-ui, "Segoe UI", Tahoma, sans-serif;

  /* أسماءٌ جديدة — للهيكل الجديد (ترويسات/تبويبات/شاشات/مكوّنات). نفس القيم أعلاه بأسماء دلاليّة أوضح. */
  --text:#F5F5F5; --text-muted:#9A9A9E; --text-disabled:#6B6B70;
  --border:#2C2C2E; --border-strong:#333336;
  --grad-brand: linear-gradient(135deg, #2FD3D8 0%, #4ADE80 100%);
  --accent-green:#3ECF8E; --accent-green-2:#34C77B;
  --accent-amber:#FF9500; --accent-amber-2:#F5941F;
  --gold-tip-bg:#4A3B14; --gold-tip-border:#D9A02D;
  --gold-coach-bg:#F2B705;
  --radius-lg:18px; --radius-md:14px; --radius-sm:10px; --radius-pill:999px;
  --qscale:1; /* مقياس حجم خطّ نصّ القرآن — يُضبَط من الإعدادات (مظهر القرآن ← حجم الخطّ) ويُحفَظ محليًّا */
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--ink); font-family:var(--uifont);
  min-height:100dvh; line-height:1.6; overflow-x:hidden;
}
#app{max-width:820px; margin:0 auto; padding:0 14px calc(100px + env(safe-area-inset-bottom)); min-height:100dvh;}

/* ══ الترويسة: ثلاثة أنماط، واحدٌ ظاهرٌ في كلّ لحظة (يبدّلها router.js عبر [hidden]) ══ */
#topbar{
  position:sticky; top:0; z-index:20;
  padding:14px 4px 12px; background:linear-gradient(var(--bg) 72%, transparent);
  -webkit-backdrop-filter:saturate(1.1) blur(2px);
  backdrop-filter:saturate(1.1) blur(2px);
}
.icon-btn{
  display:grid; place-items:center; width:40px; height:40px; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--panel); color:var(--ink); cursor:pointer;
}
.icon-btn:hover{background:var(--panel2);}
.pill-btn{
  border:1px solid var(--teal); color:var(--teal); background:transparent;
  border-radius:var(--radius-pill); padding:7px 14px; font-size:.85rem; font-weight:600; cursor:pointer; font-family:inherit;
}
.pill-btn:hover{background:var(--teal-soft);}
.pill-btn.active{background:var(--teal); color:#06120e;}
.pill-btn.off{opacity:.5; border-style:dashed;}

/* — نمط ١: ترويسة التبويبات الرئيسية (نشاط/اللوحة/الأهداف/الحفظ) — */
#hdr-tabs{display:flex; align-items:center; gap:10px;}
#hdr-tabs .hdr-side{width:40px; flex:none; display:flex;}
#hdr-tabs .hdr-logo{flex:1; display:flex; justify-content:center;}
#hdr-tabs .hdr-icons{flex:none; display:flex; gap:8px;}

/* — نمط ٢: ترويسة القارئ (شريحة اسم السورة بنمط ترتيل) — */
#hdr-reader{display:flex; align-items:center; gap:10px;}
/* زرّ تبديل الرسم النصّيّ القديم انتقل للأيقونة (كتاب) في الشريط السفليّ — لا يظهر في الترويسة بعد الآن. */
#hdr-reader #scriptBtn{display:none;}
#topTitle{
  flex:1; text-align:center; background:var(--panel2); border:1px solid var(--border);
  border-radius:var(--radius-pill); padding:8px 18px; font-size:.92rem; font-weight:700; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* — نمط ٣: ترويسة صفحات الإعدادات (رجوع + عنوانٌ يمينيّ) — */
#hdr-settings{display:flex; align-items:center; gap:10px;}
#settingsTitle{flex:1; text-align:right; font-weight:700; font-size:1.15rem; color:var(--text);}

/* ══ شريط التبويبات السفليّ (نشاط / اللوحة الرئيسية / الأهداف / الحفظ) ══ */
#tabbar{
  position:fixed; inset-inline:0; bottom:0; z-index:25;
  display:flex; background:var(--panel); border-top:1px solid var(--border);
  padding:6px 6px calc(6px + env(safe-area-inset-bottom));
}
.tab-btn{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  background:none; border:none; color:var(--text-disabled); font-family:inherit;
  font-size:.72rem; padding:6px 2px; cursor:pointer; border-radius:var(--radius-sm);
}
.tab-btn svg{opacity:.85;}
.tab-btn.active{color:var(--text); font-weight:700;}
.tab-btn.active svg{opacity:1;}
.tab-btn:hover{background:var(--panel2);}

/* ══ عناصر شاشاتٍ عامّة (تُستعمَل في اللوحة/النشاط/الأهداف/الحفظ/الإعدادات) ══ */
.screen{padding:6px 2px 10px;}
.sec-title{font-weight:700; color:var(--text); font-size:1rem; margin:20px 0 10px;}
.sec-sub{color:var(--text-muted); font-size:.82rem; margin:-6px 0 12px;}
.empty-pill{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:16px; text-align:center; color:var(--text-muted); font-size:.9rem;
}
.greeting{font-size:1.3rem; font-weight:700; color:var(--text); margin:10px 0 16px;}

/* بطاقةٌ عامّة (تُستعمل للأهداف/التنزيلات وغيرها) */
.plain-card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:14px 16px;
}

/* زرّ كامل العرض (ابدأ هدفًا جديدًا…) */
.wide-btn{
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-pill);
  color:var(--text); font:inherit; font-size:.95rem; font-weight:600; padding:14px 16px; cursor:pointer;
}
.wide-btn:hover{background:var(--panel2);}
.wide-btn .plus-circle{
  width:20px; height:20px; border-radius:50%; background:var(--accent-green); color:#06120e;
  display:grid; place-items:center; flex:none;
}

/* قسمٌ قابلٌ للطيّ (مؤرشف) */
.collapsible{border-top:1px solid var(--border); margin-top:18px; padding-top:12px;}
.collapsible summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between;
  font-weight:700; color:var(--text); font-size:.95rem;
}
.collapsible summary::-webkit-details-marker{display:none;}
.collapsible .archive-note{color:var(--text-muted); font-size:.82rem; margin-top:8px;}

/* ══ بطاقة المداومة (اللوحة الرئيسية) ══ */
.streak-card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:16px; box-shadow:var(--shadow); position:relative;
}
.streak-card .streak-top{display:flex; align-items:center; gap:12px;}
.streak-ring{
  width:52px; height:52px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:conic-gradient(var(--accent-amber) calc(var(--pct,60)*1%), var(--border) 0);
}
.streak-ring i{
  width:42px; height:42px; border-radius:50%; background:var(--panel); display:grid; place-items:center;
  font-style:normal;
}
.streak-top .streak-lbl{flex:1; color:var(--text-muted); font-size:.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.streak-top .streak-icons{display:flex; gap:6px; flex:none;}
.streak-diamonds{display:flex; justify-content:space-between; gap:6px; margin:16px 4px 6px;}
.diamond{
  width:26px; height:26px; border-radius:6px; transform:rotate(45deg);
  display:grid; place-items:center; background:var(--panel2); border:1.5px solid var(--border-strong);
  flex:none;
}
.diamond i{transform:rotate(-45deg); display:grid; place-items:center; font-style:normal;}
.diamond.done{background:var(--accent-green); border-color:transparent;}
.diamond.missed i svg{opacity:.55;}
.streak-lines{margin-top:10px; font-size:.85rem;}
.streak-lines .day-n{color:var(--accent-amber-2); font-weight:700;}
.streak-lines .longest{color:var(--accent-green); font-weight:700; margin-inline-start:12px;}

/* بطاقة Premium (تدرّج تركوازي↔أخضر) */
.premium-card{
  margin-top:16px; border-radius:var(--radius-lg); padding:16px;
  background:var(--grad-brand); color:#06120e; display:flex; align-items:center; gap:12px;
}
.premium-card .p-icon{font-size:1.6rem; flex:none;}
.premium-card .p-text{flex:1; font-size:.85rem; font-weight:600; line-height:1.5;}
.premium-btn{
  display:inline-flex; align-items:center; gap:6px; margin-top:10px; background:#06120e; color:#fff;
  border-radius:var(--radius-pill); padding:8px 16px; font-weight:700; font-size:.85rem; border:none; cursor:pointer;
}

/* صفّ الشارات المُحصَّلة */
.badge-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px 16px;
  color:var(--text); font-size:.9rem; cursor:pointer;
}
.badge-row:hover{background:var(--panel2);}

/* ══ صندوق تلميحٍ ذهبيّ (داخل شاشات الإعدادات) ══ */
.gold-tip{
  display:flex; gap:12px; align-items:flex-start; background:var(--gold-tip-bg);
  border:2px solid var(--gold-tip-border); border-radius:var(--radius-md); padding:14px 16px; margin-bottom:16px;
}
.gold-tip .gt-icon{flex:none; width:40px; height:40px; border-radius:50%; background:var(--grad-brand); display:grid; place-items:center; color:#06120e;}
.gold-tip .gt-body{flex:1; color:#f3dfa8;}
.gold-tip .gt-title{font-weight:700; color:#f8e6b0; margin-bottom:4px;}
.gold-tip .gt-text{font-size:.85rem; line-height:1.7;}

/* فقاعة شرحٍ ذهبيّة فوق شاشة القراءة (مرّةً واحدة) */
.gold-coach{
  position:fixed; z-index:40; max-width:320px; background:var(--gold-coach-bg); color:#20180a;
  border-radius:var(--radius-md); padding:14px 16px; box-shadow:var(--shadow);
  inset-inline-end:14px; bottom:150px;
}
.gold-coach .gc-close{position:absolute; top:8px; inset-inline-start:8px; background:none; border:none; color:#20180a; cursor:pointer; font-size:1rem; line-height:1;}
.gold-coach .gc-title{font-weight:700; display:flex; align-items:center; gap:6px; margin-inline-end:18px;}
.gold-coach .gc-text{font-size:.85rem; margin-top:6px; line-height:1.7;}
.gold-coach::after{
  content:""; position:absolute; bottom:-8px; inset-inline-end:24px; width:16px; height:16px;
  background:var(--gold-coach-bg); transform:rotate(45deg);
}

/* ══ صفوف الإعدادات (مجموعات بطاقاتٍ + عناصر قابلة للانتقال) ══ */
.settings-group{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md);
  overflow:hidden; margin-bottom:18px;
}
.settings-group-title{color:var(--text-muted); font-size:.78rem; font-weight:700; margin:0 4px 6px; text-transform:uppercase; letter-spacing:.02em;}
.settings-row{
  display:flex; align-items:center; gap:12px; padding:13px 14px; cursor:pointer;
  border-bottom:1px solid var(--border); color:var(--text); font-size:.92rem;
}
.settings-row:last-child{border-bottom:none;}
.settings-row:hover{background:var(--panel2);}
.settings-row .row-icon{flex:none; width:22px; height:22px; display:grid; place-items:center; color:var(--text-muted);}
.settings-row .row-label{flex:1;}
.settings-row .row-label .row-sub{display:block; color:var(--text-muted); font-size:.78rem; margin-top:2px;}
.settings-row .row-chevron{flex:none; color:var(--text-disabled);}
.settings-row.static{cursor:default;}

/* مفتاح تبديل (toggle) بنمط iOS */
.toggle{position:relative; display:inline-block; width:42px; height:25px; flex:none;}
.toggle input{opacity:0; width:0; height:0;}
.toggle .track{
  position:absolute; inset:0; background:var(--border-strong); border-radius:var(--radius-pill); transition:background .15s; cursor:pointer;
}
.toggle .track::before{
  content:""; position:absolute; width:21px; height:21px; inset-inline-start:2px; top:2px; background:#fff;
  border-radius:50%; transition:transform .15s;
}
.toggle input:checked + .track{background:var(--accent-green);}
.toggle input:checked + .track::before{transform:translateX(17px);}
[dir="rtl"] .toggle input:checked + .track::before{transform:translateX(-17px);}

/* ══ بطاقات التحديد (نمطا الاختيار: تحقّق دائريّ / حدّ+نقطة bullseye) ══ */
.radio-card{
  display:flex; align-items:center; gap:12px; background:var(--panel); border:1.5px solid var(--border);
  border-radius:var(--radius-md); padding:14px 16px; margin-bottom:10px; cursor:pointer;
}
.radio-card.selected{border-color:#fff;}
.radio-card .rc-icon{flex:none; width:26px; height:26px; display:grid; place-items:center; color:var(--text-muted);}
.radio-card .rc-body{flex:1;}
.radio-card .rc-title{font-weight:700; color:var(--text); font-size:.94rem;}
.radio-card .rc-sub{color:var(--text-muted); font-size:.78rem; margin-top:2px;}
.radio-card.disabled{opacity:.5; cursor:not-allowed;}
.bullseye{
  flex:none; width:22px; height:22px; border-radius:50%; border:2px solid var(--border-strong);
  display:grid; place-items:center;
}
.radio-card.selected .bullseye{border-color:#fff;}
.bullseye i{width:11px; height:11px; border-radius:50%; background:#fff; display:none;}
.radio-card.selected .bullseye i{display:block;}

.check-row{
  display:flex; align-items:center; justify-content:space-between; background:var(--panel);
  border:1.5px solid var(--border); border-radius:var(--radius-md); padding:14px 16px; margin-bottom:10px; cursor:pointer;
}
.check-row.selected{border-color:#fff;}
.check-row .cr-label{color:var(--text); font-size:.94rem;}
.check-circle{
  flex:none; width:22px; height:22px; border-radius:50%; border:2px solid var(--border-strong); background:transparent;
  display:grid; place-items:center; color:#06120e;
}
.check-row.selected .check-circle{background:#fff; border-color:#fff;}

/* ══ ورقة منزلقة عامّة (Bottom sheet) ══ */
.sheet-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:49; opacity:0; pointer-events:none; transition:opacity .2s;
}
.sheet-backdrop.open{opacity:1; pointer-events:auto;}
.sheet{
  position:fixed; inset-inline:0; bottom:0; z-index:50; background:var(--panel);
  border-radius:20px 20px 0 0; padding:10px 18px calc(20px + env(safe-area-inset-bottom));
  max-height:78vh; overflow-y:auto; transform:translateY(100%); transition:transform .25s ease;
  box-shadow:var(--shadow);
}
.sheet.open{transform:translateY(0);}
.sheet .sheet-grab{width:36px; height:4px; background:var(--border-strong); border-radius:99px; margin:6px auto 12px;}
.sheet .sheet-close{position:absolute; top:14px; inset-inline-start:16px; background:none; border:none; color:var(--text-muted); cursor:pointer;}
.sheet .sheet-title{font-weight:700; font-size:1.05rem; text-align:center; margin-bottom:2px;}
.sheet .sheet-sub{color:var(--text-muted); font-size:.82rem; text-align:center; margin-bottom:16px;}

/* عدّاد حجم الخطّ (مظهر القرآن ← تنسيق المصحف وخطّه) */
.font-stepper{ display:flex; align-items:center; justify-content:center; gap:20px; margin:20px 0; }
.font-stepper .icon-circle{ width:48px; height:48px; font-weight:700; }
.fs-pct{ min-width:64px; text-align:center; font-weight:700; font-size:1.1rem; color:var(--text); }
.font-preview{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md); padding:20px 16px; margin-top:10px; }

/* عنصرٌ نائب لشاشاتٍ بلا مرجعٍ بصريّ بعد (قيد التطوير) */
.stub-screen{padding:40px 16px; text-align:center; color:var(--text-muted);}
.stub-screen .stub-icon{font-size:2.2rem; margin-bottom:12px;}
.stub-screen .stub-title{color:var(--text); font-weight:700; font-size:1.05rem; margin-bottom:6px;}

/* الصفحة الرئيسيّة (تُستخدم من screens/memorize.js) */
.hero{
  text-align:center; padding:26px 16px 10px;
}
.hero h1{font-size:2.1rem; margin:.2em 0 .1em; color:var(--teal); letter-spacing:.5px;}
.hero p{color:var(--muted); margin:.2em 0 0; font-size:.98rem;}
.hero .bsm{font-family:var(--qfont); font-size:1.35rem; color:var(--gold); margin-bottom:.3em;}

.grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px;}
@media (min-width:560px){ .grid{grid-template-columns:1fr 1fr;} }
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 16px; cursor:pointer; box-shadow:var(--shadow); transition:transform .12s ease, border-color .12s;
  position:relative; overflow:hidden;
}
.card:hover{transform:translateY(-2px); border-color:var(--teal);}
.card .num{
  position:absolute; inset-inline-end:12px; top:10px; width:30px; height:30px; border-radius:9px;
  background:var(--gold-soft); color:var(--gold); display:grid; place-items:center; font-weight:700; font-size:.85rem;
}
.card .sname{font-family:var(--qfont); font-size:1.7rem; color:var(--ink); margin-bottom:2px;}
.card .smeta{color:var(--muted); font-size:.82rem;}
.card .slatin{color:var(--teal); font-size:.8rem; font-weight:600; margin-top:6px;}

/* شارة التلميح تحت الرئيسيّة */
.tip{
  margin-top:22px; background:var(--panel2); border:1px dashed var(--line); border-radius:14px;
  padding:14px 16px; color:var(--muted); font-size:.86rem; line-height:1.9;
}
.tip b{color:var(--ink);}
.legend{display:flex; gap:16px; flex-wrap:wrap; margin-top:10px;}
.legend span{display:inline-flex; align-items:center; gap:6px; font-size:.82rem;}
.dot{width:12px; height:12px; border-radius:4px; display:inline-block;}
.dot.err{background:var(--red);}
.dot.now{background:var(--reading);}
.dot.ok{background:var(--teal-soft); border:1px solid var(--teal);}

/* تابع من حيث وقفت */
.continue-card{
  display:flex; align-items:center; gap:14px; margin-top:16px; cursor:pointer;
  background:linear-gradient(135deg, var(--teal-soft), var(--panel)); border:1px solid var(--teal);
  border-radius:var(--radius); padding:14px 18px; box-shadow:var(--shadow); color:var(--teal);
  transition:transform .12s;
}
.continue-card:hover{transform:translateY(-2px);}
.continue-card .cc-lbl{font-size:.8rem; color:var(--muted);}
.continue-card .cc-s{font-family:var(--qfont); font-size:1.5rem; color:var(--ink);}

/* شارة أفضل نتيجة على البطاقة */
.card .best-badge{
  position:absolute; inset-inline-start:12px; top:12px; font-size:.72rem; font-weight:700;
  color:var(--muted); background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:2px 7px;
}
.card .best-badge.good{ color:var(--teal); border-color:var(--teal); background:var(--teal-soft); }

/* صفّ الختمة + زرّ اللوحة */
.khatma-row{display:flex; align-items:center; gap:14px; margin-top:16px; flex-wrap:wrap;}
.kh-info{flex:1; min-width:180px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px 16px; box-shadow:var(--shadow);}
.kh-lbl{font-size:.82rem; color:var(--muted); margin-bottom:6px;}
.kh-bar{height:8px; background:var(--line); border-radius:99px; overflow:hidden;}
.kh-bar i{display:block; height:100%; background:linear-gradient(90deg, var(--teal), var(--gold)); border-radius:99px; transition:width .4s;}
.kh-n{font-size:.8rem; color:var(--ink); margin-top:6px; font-weight:600;}
.dash-btn{
  border:1px solid var(--teal); color:var(--teal); background:var(--panel); border-radius:14px;
  padding:14px 18px; font-family:inherit; font-size:.9rem; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; box-shadow:var(--shadow);
}
.dash-btn:hover{background:var(--teal-soft);}

/* لوحة الإحصاءات (تُستخدم من screens/activity.js) */
.statwrap{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px;}
.scard{flex:1; min-width:72px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 8px; text-align:center; box-shadow:var(--shadow);}
.scard-n{font-size:1.5rem; font-weight:700; color:var(--teal);}
.scard-l{font-size:.74rem; color:var(--muted); margin-top:3px;}
.trend{display:flex; align-items:flex-end; gap:2px; height:64px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:10px 12px; box-shadow:var(--shadow);}
.tbar{flex:1; min-width:3px; border-radius:3px 3px 0 0; background:var(--line);}
.tbar.g{background:var(--teal);} .tbar.m{background:var(--gold);} .tbar.b{background:var(--red);}
.tbar.none{background:var(--line); opacity:.5;}

/* عرض السورة — إطارٌ زخرفيٌّ مبسَّط لاسم السورة (بنمط لافتة ترتيل)، وصفحةٌ واحدةٌ متدفّقة بلا بطاقاتٍ */
.sura-frame{
  margin:10px auto 18px; max-width:340px; text-align:center; padding:16px 14px; position:relative;
  border:1.5px solid var(--border-strong); border-radius:10px;
}
.sura-frame::before, .sura-frame::after{ content:""; position:absolute; width:12px; height:12px; }
.sura-frame::before{ top:-6px; inset-inline-start:-6px; border-top:1.5px solid var(--border-strong); border-inline-start:1.5px solid var(--border-strong); }
.sura-frame::after{ bottom:-6px; inset-inline-end:-6px; border-bottom:1.5px solid var(--border-strong); border-inline-end:1.5px solid var(--border-strong); }
.sura-frame span{ font-family:var(--qfont); font-size:1.9rem; color:var(--text); }
.bism{font-family:var(--qfont); font-size:1.5rem; text-align:center; color:var(--gold); margin:6px 0 16px;}

/* حشوةٌ سفليّة إضافيّة تحديدًا لصفحة القراءة: الشريط السفليّ الجديد (حالة+صفّ أيقونات+ميكروفون+عدّاد)
   أطول من القديم، فتحتاج آخر آية مساحةً إضافيّة كي لا تختفي خلفه أو خلف شريط التبويبات أسفله. */
.quran-page{ margin-top:6px; padding-bottom:210px; }
.ayah{
  padding:4px 2px; margin-bottom:6px; position:relative; border-radius:var(--radius-md);
  transition:background .25s;
}
/* شريط الوسم الأبيض على مستوى الآية (تظليلٌ خفيفٌ محايد للآية الجاريّة أثناء التسجيل فقط) */
.ayah.current-ayah{ background:rgba(255,255,255,.14); }
.ayah-text{
  font-family:var(--qfont); font-size:calc(2rem * var(--qscale, 1)); line-height:2.6; text-align:justify; text-align-last:center;
  direction:rtl; word-spacing:2px;
}
.ayah-num{
  display:inline-grid; place-items:center; min-width:1.7em; height:1.7em; padding:0 .3em;
  border-radius:50%; border:1.5px solid var(--text-disabled); color:var(--text-muted);
  font-family:var(--uifont); font-size:.9rem; font-weight:700; margin-inline-start:6px; vertical-align:middle;
}
.word{
  padding:2px 3px; border-radius:7px; cursor:default; transition:background .15s, color .15s;
  position:relative;
}
.word.read{ color:var(--ink); }
/* وسمٌ محايدٌ (أبيض/رماديّ) للكلمة الجاريّة — لا لونَ إلا عند الخطأ (err/skip أدناه) */
.word.reading{
  background:rgba(255,255,255,.44); color:var(--ink); box-shadow:none;
}
.word.err{
  color:var(--red); background:var(--red-soft); box-shadow:inset 0 -3px 0 var(--red);
}
.word.err.reading{ box-shadow:inset 0 -3px 0 var(--red); }
/* كلمةٌ لم تُقرأ (مقفوزة): تنبيهٌ كهرمانيّ متميّز — ليست خطأ نطقٍ أحمر */
.word.skip{ color:var(--accent-amber-2); background:rgba(255,149,0,.12); box-shadow:inset 0 -3px 0 var(--accent-amber); }
/* دمج الإدغام في النصّ العاديّ: الكلمتان تلتصقان بلا فراغٍ ولا حوافّ عند المفصل (تبدوان كلمةً واحدة). */
.word.join{ padding-inline-end:0; border-start-end-radius:0; border-end-end-radius:0; }
.word.join + .word{ padding-inline-start:0; border-start-start-radius:0; border-end-start-radius:0; }
/* وضع إخفاء الآيات (اختبار الحفظ): يُخفي نصّ الكلمات التي لم تُقرأ بعد بصريًّا فقط — CSS محض، بلا مساسٍ بمنطق الوسم */
.hidden-mode .word:not(.read):not(.reading){ color:transparent; background:var(--panel2); border-radius:4px; box-shadow:none; }

/* ملاحظات الأخطاء تحت الآية */
.notes{margin-top:10px; display:flex; flex-direction:column; gap:7px;}
.note{
  display:flex; align-items:flex-start; gap:9px; background:var(--red-soft);
  border:1px solid var(--red-line); border-radius:11px; padding:8px 11px; font-size:.86rem; color:var(--ink);
}
.note .tag{
  flex:none; background:var(--red); color:#fff; border-radius:7px; padding:2px 8px; font-size:.74rem; font-weight:700;
}
.note .w{font-family:var(--qfont); font-size:1.15rem; color:var(--red);}
.note .w.heard{color:var(--muted);}   /* الكلمة المسموعة (الخطأ) بلونٍ خافت مقابل الصواب */
.note.info{background:var(--panel2); border-color:var(--line); color:var(--muted);}
.note.info .tag{background:var(--gold);}
/* ملاحظة «لم تُقرأ»: كهرمانيّة (تنبيهٌ لا خطأ نطق) */
.note.skip{background:rgba(255,149,0,.10); border-color:rgba(255,149,0,.35);}
.note.skip .tag{background:var(--accent-amber);}
.note.skip .w{color:var(--accent-amber-2);}
/* شريط النطاق: سورة كاملة / آيات محدّدة / صفحة */
.scopebar{ display:flex; flex-direction:column; align-items:center; gap:8px; margin:2px 0 16px; }
.scope-seg{ display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.scope-mode{ border:none; background:var(--panel2); color:var(--muted); padding:6px 15px; font:inherit; font-size:.85rem; cursor:pointer; }
.scope-mode + .scope-mode{ border-inline-start:1px solid var(--line); }
.scope-mode.active{ background:var(--teal); color:#06120e; }
.scope-mode:disabled{ opacity:.5; cursor:not-allowed; }
.scope-sub{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:.85rem; color:var(--muted); }
.scope-select{ background:var(--panel2); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:4px 9px; font:inherit; cursor:pointer; }
.scope-nav{ background:var(--panel2); color:var(--teal); border:1px solid var(--line); border-radius:8px; padding:5px 11px; font:inherit; font-size:.82rem; cursor:pointer; }
.scope-nav:disabled{ opacity:.4; cursor:not-allowed; }
.scope-lbl{ white-space:nowrap; }

/* شريط التسجيل السفليّ — بنمطٍ أقرب لترتيل: نصّ حالةٍ خافت + صفّ أيقوناتٍ (أخطاء/كتاب/عين) + ميكروفون+عدّاد */
.recbar{
  position:fixed; inset-inline:0; bottom:64px; z-index:30;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:10px 16px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent, var(--bg) 40%);
}
.rec-status{font-size:.82rem; color:var(--muted); min-height:1.1em; text-align:center;}
.rec-status.err{color:var(--red);}
.rec-status.ok{color:var(--teal);}
.recbar-row{display:flex; align-items:center; gap:10px;}
.err-pill{
  background:var(--panel2); border:1px solid var(--border); border-radius:var(--radius-pill);
  padding:6px 14px; font-size:.8rem; color:var(--text-muted);
}
.err-pill.has-err{color:var(--red); border-color:var(--red-line);}
.icon-circle{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:var(--panel2); border:1px solid var(--border); color:var(--text); cursor:pointer;
}
.icon-circle:hover{background:var(--border);}
.icon-circle.active{background:var(--accent-green); color:#06120e; border-color:transparent;}
.mic-wrap{display:flex; align-items:center; gap:10px;}
.micbtn{
  width:66px; height:66px; border-radius:50%; border:none; cursor:pointer;
  background:var(--accent-green); color:#06120e; display:grid; place-items:center;
  box-shadow:0 0 0 10px rgba(62,207,142,.16), 0 8px 24px rgba(62,207,142,.35);
  transition:transform .1s;
}
.micbtn:active{transform:scale(.95);}
.micbtn.recording{background:var(--red); box-shadow:0 0 0 0 rgba(248,113,113,.5); animation:pulse 1.4s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(248,113,113,.45);}70%{box-shadow:0 0 0 16px rgba(248,113,113,0);}100%{box-shadow:0 0 0 0 rgba(248,113,113,0);}}

/* عدّاد زمن التسجيل + نقطة حمراء (شريط الأدوات أسفل شاشة القراءة) */
.rec-timer{display:none; align-items:center; gap:6px; background:var(--panel2); border-radius:var(--radius-pill); padding:4px 10px; font-size:.8rem; color:var(--text);}
.rec-timer.show{display:inline-flex;}
.rec-timer .rdot{width:8px; height:8px; border-radius:50%; background:var(--red); animation:pulse 1.2s infinite;}

/* شريط تقدّم التحميل (النموذج على الجهاز) */
.od-load{
  position:fixed; inset-inline:0; bottom:150px; z-index:29; display:flex; justify-content:center; pointer-events:none;
}
.od-load .box{
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:8px 14px;
  font-size:.8rem; color:var(--muted); box-shadow:var(--shadow); pointer-events:auto;
}
.od-load .bar{height:5px; background:var(--line); border-radius:99px; overflow:hidden; margin-top:6px; width:200px;}
.od-load .bar i{display:block; height:100%; background:var(--teal); width:0;}

/* لوحة الملخّص */
.summary{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px;
  margin-bottom:16px; box-shadow:var(--shadow); text-align:center;
}
.summary .score{font-size:2.4rem; font-weight:700; color:var(--teal); line-height:1;}
.summary .score.warn{color:var(--gold);} .summary .score.bad{color:var(--red);}
.summary .lbl{color:var(--muted); font-size:.86rem; margin-top:4px;}
.summary .counts{display:flex; justify-content:center; gap:18px; margin-top:12px; flex-wrap:wrap;}
.summary .counts b{color:var(--ink);}
.diag-btn{margin-top:12px; border:1px dashed var(--line); background:transparent; color:var(--muted); border-radius:9px; padding:6px 12px; font-size:.76rem; cursor:pointer; font-family:inherit;}
.diag-btn:hover{background:var(--panel2); color:var(--teal);}

.spinner{width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--teal);border-radius:50%;display:inline-block;animation:spin .8s linear infinite;vertical-align:-3px;}
@keyframes spin{to{transform:rotate(360deg);}}
[hidden]{display:none !important;}