/* ===== رتِّل — تنسيقات عامة ===== */
:root{
  --green-900:#0b3d2e;
  --green-800:#0f4d3a;
  --green-700:#156a4f;
  --green-600:#1b8563;
  --green-100:#e3f2ec;
  --gold:#c9a227;
  --gold-light:#f3e6bd;
  --ink:#1d2b26;
  --ink-soft:#5a6b64;
  --bg:#f4f7f5;
  --card:#ffffff;
  --line:#e2e9e5;
  --red:#c0392b;
  --amber:#b9770e;
  --radius:16px;
  --shadow:0 4px 18px rgba(11,61,46,.08);
  --font-ui:'Tajawal', system-ui, sans-serif;
  --font-quran:'Amiri Quran','Traditional Arabic', serif;
  --quran-scale:1;

  /* ===== ألوان ثابتة لا تنقلب في الوضع الليلي =====
     شاشات الدخول والإعداد و«البطاقة الخضراء» في الرئيسية خلفيتها خضراء داكنة **دائماً**،
     بصرف النظر عن اختيار المستخدم للمظهر. لذلك يجب ألّا يعتمد نصّها على متغيّرات تنقلب،
     وإلا صار ذهبياً فاتحاً على أخضر (سليم) أو بنّياً داكناً على أخضر داكن (غير مقروء).
     هذه المتغيّرات تبقى كما هي في كل الأوضاع. */
  --on-dark-gold:#f3e6bd;   /* نص ذهبي فوق خلفية خضراء داكنة */
  --on-dark-soft:#cfe3da;   /* نص ثانوي فوق خلفية خضراء داكنة */
  --on-light-ink:#1d2b26;   /* نص داكن فوق بطاقة/حقل أبيض ثابت */
}
/* ===== الوضع الليلي ===== */
:root[data-theme="dark"]{
  --ink:#e8ede9; --ink-soft:#9fb0a8;
  --bg:#0f1613; --card:#182420; --line:#2a3730;
  --green-100:#132a20; --gold-light:#3a3116;
  --shadow:0 4px 18px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#e8ede9; --ink-soft:#9fb0a8;
    --bg:#0f1613; --card:#182420; --line:#2a3730;
    --green-100:#132a20; --gold-light:#3a3116;
    --shadow:0 4px 18px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] .mushaf{background:#1a231d;border-color:#2a3730;color:#e8ede9}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .mushaf{background:#1a231d;border-color:#2a3730;color:#e8ede9}}
:root[data-theme="dark"] .w.hiddenw{background:#2a3730;color:transparent}
/* حقول الدخول تبقى بيضاء بنص داكن في كل الأوضاع (خلفية الشاشة خضراء داكنة دوماً) */
/* رابط التخطّي: مخفي حتى يصله التنقّل بلوحة المفاتيح، فيظهر بوضوح */
.skip-link{
  position:fixed;top:-100px;left:50%;transform:translateX(-50%);z-index:300;
  background:var(--gold);color:#3d2f00;font-weight:800;
  padding:12px 22px;border-radius:0 0 14px 14px;text-decoration:none;
  transition:top .18s;
}
.skip-link:focus{top:0;outline:3px solid #fff;outline-offset:-3px}

/* إبراز واضح لعنصر التركيز — يعين ضعاف البصر ومستخدمي لوحة المفاتيح على معرفة موضعهم */
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}
.page-title:focus{outline:none} /* العنوان يتلقّى التركيز برمجياً فقط، فلا نُظهر إطاراً حوله */

/* نص مخفي بصرياً لكن يقرؤه قارئ الشاشة — لإعلانات الحالة لغير المبصرين */
.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;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-ui);
  background:var(--bg);
  color:var(--ink);
  min-height:100vh;
  min-height:100dvh;
  line-height:1.7;
  overscroll-behavior-y:contain;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;-webkit-touch-callout:none;user-select:none}
.hidden{display:none !important}

/* ===== الشاشات ===== */
.screen{display:none;min-height:100vh;min-height:100dvh}
.screen.active{display:block}
#app-shell #main{padding-bottom:84px;max-width:760px;margin:0 auto}
/* مساحة علوية تكفي لمبدّل اللغة الثابت في الوسط حتى لا يغطّي عنوان الشاشة أو أزرارها */
#app-shell .screen{min-height:auto;padding:calc(52px + env(safe-area-inset-top)) 16px 8px}

/* ===== التحميل والإعداد ===== */
/* ملاحظة مهمة: كان هنا align-items:center، وهو يعمل جيداً على الحاسوب لكنه يُعطّل الهاتف.
   السبب: حين يكون المحتوى أطول من الشاشة (وهو كذلك على الهاتف)، يفيض التوسيط العمودي
   بالمحتوى خارج حدود الحاوية من أعلى، فيُعرض بصرياً لكنه **يخرج من منطقة التمرير**
   فلا يستقبل اللمس — أي تراه ولا يستجيب. البديل الصحيح: flex-start مع margin:auto
   على الصندوق، فيبقى متوسطاً إن اتّسعت الشاشة، ويمرّر طبيعياً إن ضاقت. */
#screen-loading,#screen-onboarding,#screen-cloudauth{
  display:none;align-items:flex-start;justify-content:center;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:linear-gradient(160deg,var(--green-900),var(--green-700));
  color:#fff;text-align:center;
  padding:calc(58px + env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom));
}
#screen-loading.active,#screen-onboarding.active,#screen-cloudauth.active{display:flex}
.loading-box,.onboard-box{max-width:460px;width:100%;margin:auto}
.loading-box{animation:fadeUp .6s ease-out}
.logo-ring{
  width:96px;height:96px;margin:0 auto 14px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle,rgba(243,230,189,.16),transparent 70%);
  border:1px solid rgba(243,230,189,.3);animation:glow 2.6s ease-in-out infinite;
}
.logo-mark{font-family:var(--font-quran);font-size:2.6rem;color:var(--on-dark-gold);margin-bottom:0}
/* العبارة التعريفية تحت ﷽ — لون ثابت لأن خلفية الشاشة خضراء داكنة دائماً */
.app-slogan{
  color:var(--on-dark-gold);font-weight:800;font-size:1.06rem;letter-spacing:.2px;
  margin:6px 0 2px;animation:fadeUp .6s ease-out .05s backwards;
}
.app-name{font-size:2.4rem;font-weight:800;letter-spacing:.5px;animation:fadeUp .6s ease-out .1s backwards}
.app-tag{color:var(--on-dark-gold);margin-bottom:28px;animation:fadeUp .6s ease-out .2s backwards}
.progress-track{height:8px;background:rgba(255,255,255,.18);border-radius:99px;overflow:hidden}
.progress-fill{height:100%;width:5%;background:var(--gold);border-radius:99px;transition:width .3s}
.load-msg{margin-top:12px;font-size:.95rem;color:#d9e8e1}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(243,230,189,.18)}50%{box-shadow:0 0 0 14px rgba(243,230,189,0)}}
.load-error{margin-top:20px;background:rgba(0,0,0,.25);padding:16px;border-radius:var(--radius)}
.load-error p{margin-bottom:12px}

.onboard-lead{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);padding:14px 16px;margin-bottom:26px}
.onboard-lead b{color:var(--on-dark-gold)}
.free-trial-banner{
  display:inline-block;background:var(--gold);color:var(--green-900);
  font-family:var(--font-ui);font-weight:800;font-size:.92rem;
  padding:8px 16px;border-radius:99px;margin:-10px 0 20px;
}
.onboard-q{font-size:1.15rem;margin-bottom:16px}
.path-cards{display:grid;gap:14px}
.path-card{
  background:#fff;color:var(--ink);border-radius:var(--radius);
  padding:18px;text-align:right;display:grid;gap:4px;
  box-shadow:var(--shadow);transition:transform .15s;
}
.path-card:hover{transform:translateY(-2px)}
.path-card:active{transform:scale(.98)}
.path-card,.quick-card,.juz-card,.pg-card,.opt,.tool-btn,.nav-btn,.seg-btn,.back-btn,.stat-card,.rev-item{
  -webkit-touch-callout:none;user-select:none;
}
.path-icon{font-size:1.6rem}
.path-title{font-weight:800;font-size:1.15rem;color:var(--green-800)}
.path-desc{color:var(--ink-soft);font-size:.9rem}

/* ===== مكونات عامة ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:12px;font-weight:700;font-size:1rem;
  transition:filter .15s, transform .1s, box-shadow .15s;
}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--green-700);color:#fff;box-shadow:0 3px 10px rgba(21,106,79,.3)}
.btn-primary:hover{filter:brightness(1.1)}
.btn-gold{background:linear-gradient(135deg,#e0bb3a,var(--gold));color:#3d2f00;box-shadow:0 3px 12px rgba(201,162,39,.35)}
.btn-gold:hover{filter:brightness(1.05)}
.btn-ghost{background:var(--green-100);color:var(--green-800)}
.btn-danger{background:#fdecea;color:var(--red)}
.btn-block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}

.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-bottom:14px;transition:box-shadow .15s}
.page-title{font-size:1.35rem;font-weight:800;color:var(--green-900);margin-bottom:4px}
.page-sub{color:var(--ink-soft);font-size:.92rem;margin-bottom:16px}
.section-title{font-weight:800;color:var(--green-800);margin:18px 0 10px;font-size:1.05rem}

.topbar{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.back-btn{
  width:40px;height:40px;border-radius:12px;background:var(--card);
  box-shadow:var(--shadow);font-size:1.2rem;flex:none;transition:transform .1s;
}
.back-btn:active{transform:scale(.92)}
.topbar .page-title{margin:0}

/* ===== الرئيسية ===== */
.hero{
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(201,162,39,.20), transparent 55%),
    linear-gradient(150deg,var(--green-900),var(--green-700) 70%,var(--green-600));
  color:#fff;border-radius:22px;padding:24px 22px;margin-bottom:16px;
  position:relative;overflow:hidden;
  box-shadow:0 10px 30px rgba(11,61,46,.28);
  animation:fadeUp .5s ease-out;
}
.hero::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  border:1px solid rgba(255,255,255,.08);pointer-events:none;
}
.hero::after{
  content:'۞';position:absolute;left:-10px;bottom:-30px;font-size:9rem;
  color:rgba(255,255,255,.06);font-family:var(--font-quran);
}
.hero-top-actions{position:absolute;top:16px;left:16px;display:flex;gap:8px;z-index:1}
.hero-icon-btn{
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);color:#fff;
  width:36px;height:36px;border-radius:50%;font-size:1rem;display:flex;align-items:center;justify-content:center;
  transition:background .15s, transform .1s;
}
.hero-icon-btn:hover{background:rgba(255,255,255,.22)}
.hero-icon-btn:active{transform:scale(.92)}
.hero-greet{color:var(--on-dark-gold);font-size:.9rem;letter-spacing:.2px}
.hero-title{font-size:1.5rem;font-weight:800;margin:3px 0 10px;text-shadow:0 2px 10px rgba(0,0,0,.15)}
.level-pill{
  display:inline-flex;align-items:center;gap:5px;
  background:linear-gradient(135deg,rgba(243,230,189,.22),rgba(201,162,39,.12));
  border:1px solid rgba(243,230,189,.35);
  color:var(--on-dark-gold);font-size:.78rem;font-weight:700;padding:5px 13px;border-radius:99px;margin-bottom:14px;
}
.hero-stats{display:flex;gap:18px;flex-wrap:wrap;position:relative;padding-top:14px}
.hero-stats::before{content:'';position:absolute;top:0;right:0;left:0;height:1px;background:rgba(255,255,255,.12)}
.hstat{display:grid}
.hstat b{font-size:1.45rem;color:var(--on-dark-gold);font-weight:800}
.hstat span{font-size:.78rem;color:#cfe3da;letter-spacing:.2px}

.ring-wrap{display:flex;align-items:center;gap:16px}
.ring{position:relative;width:92px;height:92px;flex:none}
.ring svg{transform:rotate(-90deg)}
.ring-val{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-weight:800;color:var(--green-800);font-size:1.05rem;
}
.action-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.quick-card{
  border-radius:var(--radius);padding:16px;text-align:right;display:grid;gap:2px;
  box-shadow:var(--shadow);transition:transform .1s;
}
.quick-card:active{transform:scale(.97)}
.quick-card .q-ic{font-size:1.5rem}
.quick-card .q-t{font-weight:800}
.quick-card .q-d{font-size:.82rem;opacity:.85}
.qc-green{background:var(--green-700);color:#fff}
.qc-light{background:var(--card);color:var(--green-900)}

/* ===== خريطة الأجزاء ===== */
.juz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.juz-card{
  background:var(--card);border-radius:var(--radius);padding:14px;text-align:right;
  box-shadow:var(--shadow);display:grid;gap:6px;position:relative;
  border:2px solid transparent;transition:transform .1s;
}
.juz-card:active{transform:scale(.97)}
.juz-card.current{border-color:var(--gold)}
.juz-card.locked{opacity:.55;filter:grayscale(.4)}
.juz-num{font-weight:800;color:var(--green-800)}
.juz-state{font-size:.8rem;color:var(--ink-soft)}
.juz-mini-track{height:6px;background:var(--line);border-radius:99px;overflow:hidden}
.juz-mini-fill{height:100%;background:var(--green-600);border-radius:99px}
.juz-lock{position:absolute;top:10px;left:12px;font-size:1rem}
.juz-done{position:absolute;top:10px;left:12px;color:var(--green-600);font-weight:800}

/* ===== صفحات الجزء ===== */
.pages-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.pg-card{
  background:var(--card);border-radius:14px;padding:12px;text-align:center;
  box-shadow:var(--shadow);display:grid;gap:4px;border:2px solid transparent;
  transition:transform .1s;
}
.pg-card:active{transform:scale(.96)}
.pg-card small{color:var(--ink-soft);font-size:.75rem}
.pg-card b{color:var(--green-900)}
.pg-new{border-color:transparent}
.pg-learning{border-color:var(--amber)}
.pg-memorized{border-color:var(--green-600);background:var(--green-100)}
.pg-status{font-size:.78rem;font-weight:700}
.pg-new .pg-status{color:var(--ink-soft)}
.pg-learning .pg-status{color:var(--amber)}
.pg-memorized .pg-status{color:var(--green-700)}
.juz-exam-cta{margin-top:16px}

/* ===== شاشة الحفظ ===== */
.mushaf{
  background:#fffdf5;border:1px solid #efe8cf;border-radius:var(--radius);
  padding:22px 18px;box-shadow:var(--shadow);
  /* حجم خط المصحف قابل للتكبير عبر متغيّر واحد (يضبطه المستخدم من الإعدادات) */
  font-family:var(--font-quran);font-size:calc(1.55rem * var(--quran-scale,1));line-height:2.5;
  text-align:justify;color:#22301f;
}
.mushaf .surah-head{
  display:block;text-align:center;font-family:var(--font-ui);font-weight:800;
  color:var(--green-800);background:var(--green-100);border-radius:10px;
  padding:6px 4px;margin:14px 0 8px;font-size:1rem;line-height:1.8;
}
.mushaf .basmala{display:block;text-align:center;font-size:1.5rem;margin-bottom:6px;color:var(--green-900)}
.ayah-num{
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--gold);font-size:1.1rem;margin:0 4px;font-family:var(--font-ui);font-weight:700;
}
.w{transition:background .15s;border-radius:6px;padding:0 1px}
.w.hiddenw{background:#dcd4b8;color:transparent;cursor:pointer;user-select:none;text-shadow:none}
.w.hiddenw:hover{background:#cfc49e}
.w.hiddenw .tw{color:transparent!important}
.tw-legend{display:flex;flex-wrap:wrap;gap:8px 14px;padding:12px 14px;font-family:var(--font-ui);font-size:.78rem;color:var(--ink-soft)}
.tw-legend-item{display:inline-flex;align-items:center;gap:5px}
.tw-dot{width:11px;height:11px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.ayah-trans{
  display:block;text-align:left;font-family:var(--font-ui);font-size:.82rem;
  line-height:1.6;color:var(--ink-soft);background:var(--green-100);
  border-radius:8px;padding:6px 10px;margin:4px 0 12px;
}
.study-tools{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.tool-btn{
  padding:9px 14px;border-radius:99px;background:var(--card);box-shadow:var(--shadow);
  font-weight:700;font-size:.88rem;color:var(--green-800);transition:transform .1s;
}
.tool-btn.on{background:var(--green-700);color:#fff}
.tool-btn:active{transform:scale(.95)}
.audio-bar{display:flex;align-items:center;gap:10px;margin-top:10px}

/* ===== الامتحان ===== */
.exam-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.exam-count{font-weight:800;color:var(--green-800)}
.exam-track{height:8px;background:var(--line);border-radius:99px;overflow:hidden;margin-bottom:18px}
.exam-fill{height:100%;background:var(--gold);transition:width .3s}
.q-text{font-family:var(--font-quran);font-size:1.35rem;line-height:2.3;background:#fffdf5;border:1px solid #efe8cf;border-radius:var(--radius);padding:16px;margin-bottom:8px}
.q-label{font-weight:800;color:var(--green-800);margin-bottom:8px}
.q-blank{color:var(--gold);font-weight:700;letter-spacing:2px}
.opts{display:grid;gap:10px;margin-top:14px}
.opt{
  background:var(--card);border:2px solid var(--line);border-radius:14px;
  padding:12px 14px;text-align:right;font-family:var(--font-quran);font-size:1.15rem;
  line-height:2;transition:border-color .15s,transform .1s;
}
.opt:hover{border-color:var(--green-600)}
.opt:active{transform:scale(.98)}
.opt.correct{border-color:var(--green-600);background:var(--green-100)}
.opt.wrong{border-color:var(--red);background:#fdecea}
.opt:disabled{cursor:default}

.result-box{text-align:center;padding:28px 18px}
.result-emoji{font-size:3rem}
.result-score{font-size:2.6rem;font-weight:800;margin:6px 0}
.result-grade{font-size:1.2rem;font-weight:800;margin-bottom:6px}
.grade-pass .result-score,.grade-pass .result-grade{color:var(--green-700)}
.grade-fail .result-score,.grade-fail .result-grade{color:var(--red)}
.result-note{color:var(--ink-soft);margin-bottom:20px}
.result-actions{display:grid;gap:10px;max-width:320px;margin:0 auto}

/* ===== المراجعة ===== */
.rev-item{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rev-info b{color:var(--green-900)}
.rev-info small{display:block;color:var(--ink-soft)}
.rev-due{color:var(--red);font-weight:700;font-size:.82rem}
.empty-state{text-align:center;padding:40px 16px;color:var(--ink-soft)}
.empty-state .e-ic{font-size:3rem;margin-bottom:8px}

/* ===== الإحصائيات ===== */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.stat-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;text-align:center}
.stat-card b{display:block;font-size:1.7rem;color:var(--green-800)}
.stat-card span{color:var(--ink-soft);font-size:.85rem}
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:.85rem}
.bar-row .bl{width:64px;flex:none;color:var(--ink-soft)}
.bar-track{flex:1;height:10px;background:var(--line);border-radius:99px;overflow:hidden}
.bar-fill{height:100%;background:var(--green-600);border-radius:99px}

/* ===== التنقل السفلي ===== */
#bottom-nav{
  position:fixed;bottom:0;right:0;left:0;background:var(--card);
  display:flex;justify-content:space-around;padding:8px 4px calc(8px + env(safe-area-inset-bottom));
  box-shadow:0 -4px 18px rgba(11,61,46,.1);z-index:50;
}
.nav-btn{
  display:grid;justify-items:center;gap:2px;font-size:.72rem;color:var(--ink-soft);
  padding:4px 8px;border-radius:12px;position:relative;font-weight:700;
  transition:transform .1s;
}
.nav-btn.on{color:var(--green-700);background:var(--green-100)}
.nav-btn:active{transform:scale(.92)}
.nav-ic{font-size:1.25rem}
.badge{
  position:absolute;top:0;left:6px;background:var(--red);color:#fff;
  font-size:.68rem;min-width:18px;height:18px;border-radius:99px;
  display:flex;align-items:center;justify-content:center;padding:0 4px;
}

/* ===== إشعارات ===== */
.toast{
  position:fixed;bottom:calc(96px + env(safe-area-inset-bottom));right:50%;transform:translateX(50%);
  background:var(--ink);color:#fff;padding:10px 20px;border-radius:99px;
  font-size:.9rem;z-index:99;box-shadow:var(--shadow);white-space:nowrap;
  max-width:92vw;overflow:hidden;text-overflow:ellipsis;
}

/* ===== تسجيل الدخول ===== */
.login-new{margin-top:18px;display:grid;gap:10px}
.login-new input,.login-new select{
  width:100%;padding:14px 16px;border-radius:14px;border:none;
  font-family:var(--font-ui);font-size:1.05rem;text-align:center;
  background:rgba(255,255,255,.95);color:var(--on-light-ink);outline:none;
}
.login-new input::placeholder{color:#6b7a73;opacity:1}
.login-new input:focus,.login-new select:focus{box-shadow:0 0 0 3px var(--gold)}
.login-new select:invalid{color:var(--ink-soft)}
.pass-field{position:relative}
.pass-field input{padding-left:46px!important;padding-right:46px!important}
.pass-toggle{
  position:absolute;left:6px;top:50%;transform:translateY(-50%);
  background:none;border:none;font-size:1.1rem;padding:8px;line-height:1;cursor:pointer;opacity:.65;
}
.pass-toggle:hover{opacity:1}

/* شبكة مختصرات التطبيق أعلى شاشة الدخول */
#auth-features{animation:fadeUp .6s ease-out .3s backwards}
/* بطاقات ثابتة البياض دوماً (لا تتبع متغيّر --card) لأن خلفية شاشة الدخول داكنة ثابتة
   بصرف النظر عن تفضيل المظهر الفاتح/الليلي — تفادياً لبطاقة داكنة على خلفية داكنة */
#auth-features .stat-card{background:#fff;transition:transform .15s, box-shadow .15s}
#auth-features .stat-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.18)}
#auth-features .stat-card b{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin:0 auto 8px;border-radius:50%;
  background:linear-gradient(135deg,var(--green-100),rgba(201,162,39,.15));
  font-size:1.3rem;
}
#auth-features .stat-card span{font-weight:700;color:var(--on-light-ink);font-size:.82rem}
#auth-form{animation:fadeUp .6s ease-out .4s backwards}

/* ===== لوحة تفاصيل الميزة (bottom sheet) =====
   ألوانها ثابتة عمداً: تظهر فوق شاشة خلفيتها خضراء داكنة دائماً، فلا تتبع متغيّرات المظهر. */
.feat-modal{
  position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.55);
  display:flex;align-items:flex-end;justify-content:center;
  animation:fadeIn .18s ease-out;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.feat-sheet{
  background:#fff;color:var(--on-light-ink);width:100%;max-width:520px;
  max-height:86vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  border-radius:22px 22px 0 0;text-align:right;
  padding:20px 20px calc(20px + env(safe-area-inset-bottom));
  animation:sheetUp .25s cubic-bezier(.22,1,.36,1);
}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.feat-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.feat-head h2{font-size:1.2rem;font-weight:800;color:var(--green-800)}
.feat-close{
  width:40px;height:40px;border-radius:50%;background:#eef3f0;color:#41544c;
  font-size:1rem;flex:none;display:flex;align-items:center;justify-content:center;
}
.feat-close:active{transform:scale(.92)}
.feat-sheet p{color:#41544c;line-height:1.9;margin-bottom:10px;font-size:.95rem}
.feat-sheet ul{padding-inline-start:20px;margin-bottom:10px}
.feat-sheet li{color:#41544c;margin-bottom:7px;line-height:1.8;font-size:.95rem}
.feat-sheet b{color:var(--green-800)}
/* قوائم القرّاء واللغات */
.feat-chips{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 4px}
.feat-chip{
  background:#eef3f0;color:#22453a;border-radius:99px;
  padding:6px 13px;font-size:.86rem;font-weight:600;
}
.feat-chip.gold{background:#fbf3d9;color:#6b5406}
.feat-note{
  background:#eef3f0;border-radius:12px;padding:12px 14px;margin-top:12px;
  font-size:.88rem;color:#41544c;line-height:1.8;
}
/* البطاقات صارت أزراراً — نُبقيها بنفس الشكل ونضيف إشارة أنها قابلة للضغط */
#auth-features .stat-card{
  cursor:pointer;border:none;font-family:inherit;width:100%;
  display:block;text-align:center;position:relative;
}
#auth-features .stat-card::after{
  content:'›';position:absolute;top:8px;inset-inline-start:10px;
  color:#9bb0a7;font-size:1.1rem;font-weight:700;line-height:1;
}

/* الأسئلة الشائعة أسفل شاشة الدخول */
.faq-section{margin-top:28px;text-align:right;animation:fadeUp .6s ease-out .5s backwards}
.faq-section .onboard-q{font-size:1.05rem;margin-bottom:14px}
.faq-item{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  border-radius:14px;padding:4px 16px;margin-bottom:10px;
}
.faq-item summary{
  padding:14px 0;font-weight:700;cursor:pointer;list-style:none;color:var(--on-dark-gold);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:1.3rem;font-weight:400;color:var(--on-dark-gold);flex:none}
.faq-item[open] summary::after{content:'−'}
.faq-item p{color:#fff;font-size:.88rem;padding-bottom:14px;line-height:1.8}

/* ===== القائمة المرقّمة للمكفوفين ===== */
/* أزرار ضخمة متباعدة: الكفيف يصل بإصبعه لا ببصره، فالمساحة تقلّل الضغطات الخاطئة،
   وضعيف البصر يقرأ الرقم الكبير من بعيد دون أن يقرّب عينه من الشاشة. */
.blind-menu{margin-bottom:18px;text-align:start}
.blind-menu-title{
  font-size:1.25rem;font-weight:800;color:var(--on-dark-gold);
  margin-bottom:6px;text-align:center;
}
.blind-menu-lead{
  color:var(--on-dark-soft);font-size:.95rem;line-height:1.9;
  margin-bottom:16px;text-align:center;
}
.blind-item{
  display:flex;align-items:center;gap:14px;width:100%;
  min-height:78px;padding:14px 16px;margin-bottom:12px;
  border-radius:16px;border:2px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);color:#fff;
  font-family:inherit;text-align:start;cursor:pointer;
}
.blind-item:active{transform:scale(.985);background:rgba(255,255,255,.18)}
.blind-item:focus-visible{outline:4px solid var(--gold);outline-offset:3px}
.blind-num{
  flex:none;width:48px;height:48px;border-radius:50%;
  background:var(--gold);color:#3a2f00;
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;font-weight:800;
}
.blind-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.blind-txt b{font-size:1.12rem;font-weight:800;line-height:1.5}
.blind-txt span{font-size:.9rem;color:var(--on-dark-soft);line-height:1.7}
.blind-help{
  display:block;width:100%;min-height:60px;margin-top:6px;
  border-radius:14px;border:2px dashed rgba(255,255,255,.35);
  background:transparent;color:var(--on-dark-gold);
  font-family:inherit;font-size:1.02rem;font-weight:700;cursor:pointer;
}
.blind-help:active{background:rgba(255,255,255,.1)}
/* زر «أين أنا؟» العائم داخل التطبيق */
#blind-help-fab{
  position:fixed;inset-inline-start:16px;
  bottom:calc(78px + env(safe-area-inset-bottom));
  width:60px;height:60px;border-radius:50%;z-index:120;
  background:var(--green-800);color:#fff;font-size:1.7rem;border:3px solid var(--gold);
  box-shadow:0 6px 20px rgba(0,0,0,.3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
#blind-help-fab:active{transform:scale(.93)}
#blind-help-fab.hidden{display:none}

/* ===== تبويبات لوحة التحكم ===== */
/* شريط أفقي قابل للتمرير: على شاشة الهاتف لا تتّسع ستة تبويبات في سطر واحد،
   والتفافها إلى سطرين يُضيّع نصف الشاشة على التنقّل قبل رؤية أي بيانات. */
.admin-tabs{
  display:flex;gap:8px;overflow-x:auto;padding:4px 2px 12px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.admin-tabs::-webkit-scrollbar{display:none}
.admin-tab{
  flex:none;display:inline-flex;align-items:center;gap:6px;
  padding:10px 15px;border-radius:99px;border:1px solid var(--line);
  background:var(--card);color:var(--ink-soft);
  font-family:inherit;font-size:.88rem;font-weight:700;cursor:pointer;white-space:nowrap;
  min-height:44px;
}
.admin-tab.on{background:var(--green-800);color:#fff;border-color:var(--green-800)}
.admin-tab:active{transform:scale(.97)}
.admin-tab-badge{
  background:var(--gold);color:#3a2f00;border-radius:99px;
  min-width:20px;padding:1px 6px;font-size:.75rem;font-weight:800;text-align:center;
}
.admin-tab.on .admin-tab-badge{background:var(--gold);color:#3a2f00}
.admin-flag{
  background:#fdeaea;color:#8c2b2b;border-radius:10px;padding:10px 12px;
  margin:10px 0 0;font-size:.88rem;font-weight:700;line-height:1.7;
}
.admin-flag.deleted{background:#eef1f0;color:#4a5b54}
/* لوحة تفعيل الاشتراك تحت بطاقة الزبون */
.admin-grant{
  margin-top:10px;padding:12px;border-radius:12px;
  background:var(--green-100);border:1px solid var(--line);
}
.admin-grant-note{font-size:.84rem;color:var(--ink-soft);line-height:1.8;margin:0 0 8px}
.admin-grant input{
  width:100%;padding:11px 13px;border-radius:11px;border:1px solid var(--line);
  font-family:var(--font-ui);background:var(--card);color:var(--ink);margin-bottom:10px;
}
/* زر الحذف: لونه وحده يكفي للتفريق عن بقية الأزرار قبل الضغط */
.btn-danger{
  background:#b4342f;color:#fff;font-weight:700;
}
.btn-danger:active{transform:scale(.98);background:#9c2c28}

/* ===== صندوق الدعم ===== */
.support-box{
  margin-top:26px;padding:20px 18px;border-radius:18px;text-align:center;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  animation:fadeUp .6s ease-out .55s backwards;
}
.support-title{
  font-size:1.02rem;font-weight:700;color:var(--on-dark-gold);
  margin-bottom:14px;line-height:1.7;
}
.support-open{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:56px;padding:14px 18px;border-radius:14px;
  background:var(--gold);color:#3a2f00;font-weight:800;font-size:1rem;
  font-family:inherit;border:none;cursor:pointer;
}
.support-open:active{transform:scale(.98)}
.support-icon{font-size:1.35rem;line-height:1}
/* زر عائم داخل التطبيق — فوق شريط التنقّل السفلي حتى لا يحجب أزراره */
#support-fab{
  position:fixed;inset-inline-end:16px;
  bottom:calc(78px + env(safe-area-inset-bottom));
  width:54px;height:54px;border-radius:50%;z-index:120;
  background:var(--gold);color:#3a2f00;font-size:1.5rem;border:none;cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
  display:flex;align-items:center;justify-content:center;
}
#support-fab:active{transform:scale(.93)}
#support-modal textarea,#support-modal input{
  width:100%;padding:13px 15px;border-radius:13px;border:1px solid var(--line);
  font-family:var(--font-ui);font-size:1rem;background:var(--card);color:var(--ink);
  margin-bottom:10px;line-height:1.8;
}
#support-modal textarea{resize:vertical;min-height:120px}

/* ===== الدليل الصوتي للمكفوفين ===== */
/* إطار واضح حول العنصر الذي يقرؤه الدليل الآن — لمن معه بقية بصر، ولمن يساعده مبصر */
.vg-focus{
  outline:4px solid var(--gold) !important;outline-offset:3px;
  border-radius:10px;box-shadow:0 0 0 6px rgba(201,162,39,.25) !important;
}
/* شريط تنبيه علوي يشرح طريقة الاستعمال ويبقى ظاهراً في وضع الدليل */
#vg-bar{
  position:fixed;top:0;inset-inline:0;z-index:300;
  background:var(--green-900);color:var(--on-dark-gold);
  padding:calc(8px + env(safe-area-inset-top)) 14px 8px;
  font-size:.84rem;text-align:center;line-height:1.6;
}
#vg-bar button{
  background:rgba(255,255,255,.15);color:#fff;border:none;border-radius:8px;
  padding:4px 12px;margin-inline-start:8px;font-family:inherit;font-size:.8rem;cursor:pointer;
}
body.vg-on{padding-top:44px}

.terms-box{
  max-height:220px;overflow-y:auto;background:rgba(255,255,255,.95);color:var(--on-light-ink);
  border-radius:14px;padding:14px 16px;font-size:.82rem;line-height:1.8;text-align:right;
}
.terms-box ol{padding-right:18px;margin:8px 0}
.terms-box li{margin-bottom:10px}
.terms-check-row{
  display:flex;align-items:flex-start;gap:8px;margin-top:10px;font-size:.82rem;
  color:#fff;text-align:right;cursor:pointer;
}
.terms-check-row input{width:auto;margin-top:3px;flex:none}
.user-card{cursor:pointer}
.user-row{display:flex;align-items:center;gap:12px}
.user-avatar{font-size:1.8rem}
.user-meta{display:grid;text-align:right;flex:1}
.user-del{font-size:1.05rem;opacity:.55;padding:6px}
.user-del:hover{opacity:1}

/* ===== التسميع الصوتي ===== */
.recite-bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--green-900);color:#fff;border-radius:14px;
  padding:10px 14px;margin-bottom:10px;font-size:.9rem;
  animation:pulse 2s infinite;
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(21,106,79,.45)}50%{box-shadow:0 0 0 8px rgba(21,106,79,0)}}
.w.mic-hit{background:var(--green-100);color:#14532d}
.w.mic-miss{background:#fdecea;color:var(--red)}
.w.mic-hesitate{box-shadow:inset 0 -3px 0 var(--amber)}
.mic-save-row{
  display:inline-flex;align-items:center;gap:8px;font-size:.9rem;color:var(--ink-soft);
  cursor:pointer;user-select:none;
}
.mic-save-row input{width:18px;height:18px;accent-color:var(--green-600);cursor:pointer}
.mistake-box{text-align:right;margin-top:10px}
.mistake-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.mistake-chip{
  background:#fdecea;color:var(--red);border-radius:8px;padding:4px 10px;
  font-family:var(--font-quran);font-size:1rem;
}

/* ===== التحفيز: الأوسمة ===== */
.badges-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.badge-item{
  display:grid;justify-items:center;gap:2px;background:var(--gold-light);
  border-radius:12px;padding:8px 12px;min-width:52px;
}
.badge-medal{font-size:1.4rem}
.badge-n{font-weight:800;color:#6b5406;font-size:.8rem}

/* ===== مبدّل لغة الواجهة ===== */
/* في الوسط أعلى الشاشة: كان في اليسار فيُقتطع على الشاشات الضيقة، وكان يغطّي أول بطاقة
   فيبتلع اللمسة الموجَّهة إليها. وz-index أقل من لوحة التفاصيل حتى لا يظهر فوقها. */
#lang-switch{
  position:fixed;top:calc(8px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);
  z-index:150;max-width:70vw;
  padding:7px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.28);color:#fff;font-family:var(--font-ui);font-weight:700;
  font-size:.82rem;cursor:pointer;backdrop-filter:blur(4px);
  text-align:center;text-align-last:center;
}
#lang-switch.on-light{
  background:var(--card);color:var(--green-800);border-color:var(--line);box-shadow:var(--shadow);
}

/* ===== اختيار القارئ ===== */
.reciter-sel{
  padding:9px 14px;border-radius:99px;border:none;background:var(--card);
  box-shadow:var(--shadow);font-family:var(--font-ui);font-weight:700;
  font-size:.88rem;color:var(--green-800);cursor:pointer;max-width:100%;
}
.set-row .reciter-sel{border-radius:12px;background:var(--green-100);box-shadow:none}

/* ===== الإعدادات ===== */
.set-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--line);
}
.set-row:last-child{border-bottom:none}
.seg{display:flex;background:var(--green-100);border-radius:12px;padding:3px}
.seg-btn{
  padding:7px 18px;border-radius:10px;font-weight:800;color:var(--green-800);
  font-size:.95rem;
}
.seg-btn.on{background:var(--green-700);color:#fff}

@media (max-width:420px){
  .mushaf{font-size:calc(1.35rem * var(--quran-scale,1));line-height:2.4}
  .action-row{grid-template-columns:1fr}
}

/* ===== الوضع الميسّر (مناسب لمن تجاوز الخمسين) =====
   خط أكبر، أزرار أوسع يسهل ضغطها، تباين أعلى، ومساحات أوضح.
   يُفعَّل بإضافة data-senior="on" على عنصر <html>. */
:root[data-senior="on"]{ font-size:17.5px; }
:root[data-senior="on"] body{ line-height:1.85; }
:root[data-senior="on"] .btn{
  padding:16px 26px;font-size:1.12rem;border-radius:14px;min-height:56px;
}
:root[data-senior="on"] .tool-btn{ padding:14px 20px;font-size:1.05rem;min-height:52px }
:root[data-senior="on"] .seg-btn{ padding:12px 20px;font-size:1.05rem;min-height:48px }
:root[data-senior="on"] .back-btn{ width:52px;height:52px;font-size:1.45rem }
:root[data-senior="on"] .reciter-sel{ padding:13px 14px;font-size:1.05rem;min-height:52px }
:root[data-senior="on"] .nav-btn{ padding:8px 6px;font-size:.86rem }
:root[data-senior="on"] .nav-ic{ font-size:1.5rem }
:root[data-senior="on"] .page-title{ font-size:1.55rem }
:root[data-senior="on"] .page-sub,
:root[data-senior="on"] .path-desc{ font-size:1rem }
:root[data-senior="on"] .stat-card b{ font-size:2rem }
:root[data-senior="on"] .stat-card span{ font-size:1rem }
:root[data-senior="on"] .set-row{ padding:15px 0;font-size:1.05rem }
:root[data-senior="on"] .ayah-trans{ font-size:1rem;line-height:1.9 }
:root[data-senior="on"] .ayah-num{ font-size:1.35rem }
/* تباين أعلى للنص الثانوي (الرمادي الفاتح يصعب قراءته بعد الخمسين) */
:root[data-senior="on"]{ --ink-soft:#3f5049; }
:root[data-senior="on"][data-theme="dark"]{ --ink-soft:#c2d2ca; }

/* ===== الحفظ الميسّر الموجَّه (خطوة بخطوة) =====
   لوحة داكنة تحيط بالآية لتعزل البصر عمّا حولها ويتركّز على النص وحده،
   والآية نفسها في بطاقة فاتحة بإطار ذهبي فتكون هي أوضح شيء على الشاشة. */
.guided-wrap{
  background:
    radial-gradient(130% 120% at 100% 0%, rgba(201,162,39,.18), transparent 60%),
    linear-gradient(160deg,var(--green-900),var(--green-700));
  border-radius:22px;padding:16px 14px 20px;margin-bottom:16px;
  box-shadow:0 10px 30px rgba(11,61,46,.30);
}
.guided-progress{
  display:flex;align-items:center;gap:10px;margin:2px 0 14px;
  font-weight:800;color:var(--gold-light);font-size:1.02rem;
}
.guided-track{flex:1;height:12px;background:rgba(255,255,255,.18);border-radius:99px;overflow:hidden}
.guided-fill{height:100%;background:var(--gold);border-radius:99px;transition:width .35s}
.guided-text{
  background:#fffdf5;border:2px solid var(--gold);border-radius:var(--radius);
  padding:26px 18px;box-shadow:0 6px 26px rgba(0,0,0,.28);text-align:center;color:#22301f;
  font-family:var(--font-quran);line-height:2.7;
  /* بالبكسل لا بـ rem: حتى يبقى الحجم كبيراً فعلياً مهما كانت إعدادات المتصفح */
  font-size:calc(30px * var(--quran-scale,1.8));margin-bottom:16px;
}
/* معاينة حجم خط المصحف داخل الإعدادات */
.size-preview{
  background:#fffdf5;border:1px solid #efe8cf;border-radius:12px;
  padding:16px 12px;margin-top:10px;text-align:center;color:#22301f;
  font-family:var(--font-quran);line-height:2.4;
  font-size:calc(1.55rem * var(--quran-scale,1));
}
:root[data-theme="dark"] .size-preview{background:#1a231d;border-color:#2a3730;color:#e8ede9}

/* شريط تكبير/تصغير الخط داخل شاشة الحفظ نفسها — حتى لا يضطر الحافظ للذهاب للإعدادات */
.guided-size{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:14px}
.guided-size button{
  width:54px;height:54px;border-radius:14px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  font-weight:800;font-size:1.2rem;color:#fff;
}
.guided-size button:active{transform:scale(.94)}
.guided-size button:disabled{opacity:.35}
.guided-size span{font-weight:800;color:var(--gold-light);min-width:104px;text-align:center;font-size:.98rem}
.guided-text.covered{filter:blur(10px);user-select:none}
.guided-step{
  display:flex;align-items:flex-start;gap:12px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius);padding:14px 16px;
}
.guided-step-badge{
  flex:none;width:40px;height:40px;border-radius:50%;background:var(--gold);color:#3d2f00;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;
}
.guided-step-n{font-weight:800;color:var(--gold-light);font-size:1.08rem;margin-bottom:2px}
.guided-step-d{color:#dbeae3;font-size:.96rem;line-height:1.75}
.guided-actions{display:grid;gap:12px}
.guided-big{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:64px;font-size:1.2rem;font-weight:800;border-radius:16px;
  transition:filter .15s,transform .1s;
}
.guided-big:active{transform:scale(.98)}
.guided-done{
  text-align:center;padding:28px 18px;
}
.guided-done .big-emoji{font-size:3.4rem;display:block;margin-bottom:10px}