:root{
  --emerald:#1c7a61;
  --emerald-dark:#124a3a;
  --emerald-light:#4fc190;
  --emerald-soft:#e6f5ee;
  --gold:#dab646;
  --gold-light:#ecd48f;
  --gold-dark:#8a6417;
  --gold-soft:rgba(218,182,70,.14);
  --ivory:#fbfaf5;
  --line:rgba(18,74,58,.14);
  --ink:#16332b;
  --muted:rgba(22,51,43,.68);
  --muted2:rgba(22,51,43,.46);
  --red:#c8394b;
  --red-soft:rgba(200,57,75,.12);
  --shadow-sm:0 1px 3px rgba(20,60,45,.10);
  --shadow-md:0 4px 14px rgba(20,60,45,.12);
  --shadow-lg:0 12px 30px rgba(20,60,45,.16);
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:12px;
  --card-bg:linear-gradient(155deg,#ffffff,#f3faf7);
}

.mascot{ display:block; }
@keyframes mascotBounceIn{
  0%{ transform:scale(0) rotate(-15deg); opacity:0; }
  60%{ transform:scale(1.15) rotate(5deg); opacity:1; }
  100%{ transform:scale(1) rotate(0); }
}
.mascot-enter{ animation:mascotBounceIn .6s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes mascotFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
.mascot-float{ animation:mascotFloat 2.4s ease-in-out infinite; }
@keyframes celebrationPop{
  0%{ transform:scale(.4); opacity:0; }
  50%{ transform:scale(1.08); opacity:1; }
  100%{ transform:scale(1); opacity:1; }
}
.celebration-pop{ animation:celebrationPop .45s cubic-bezier(.34,1.56,.64,1) both; }

.matching-grid{ display:flex; gap:10px; margin-bottom:20px; }
.matching-col{ flex:1; display:flex; flex-direction:column; gap:10px; }
.matching-item{
  padding:14px 10px; border-radius:var(--radius-md); border:1.5px solid var(--line); background:var(--card-bg);
  font-size:15px; font-weight:700; color:var(--ink); transition:all .2s ease; cursor:pointer;
}
.matching-item.selected{ border-color:var(--gold); background:var(--gold-soft); }
.matching-item.matched{ border-color:var(--emerald); background:var(--emerald-soft); color:var(--emerald-dark); opacity:.85; cursor:default; }
.matching-item.wrong{ border-color:var(--red); background:var(--red-soft); color:var(--red); }
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--ivory);
  color:var(--ink);
  font-family:'Tajawal',sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.has-nav{ padding-bottom:82px; }
.font-quran{ font-family:'Amiri Quran',serif; }
a{ text-decoration:none; color:inherit; }
button{ font-family:inherit; cursor:pointer; }
input, textarea, select{ font-family:inherit; }

.app-shell{ max-width:480px; margin:0 auto; min-height:100vh; position:relative; }

/* ------- استجابة للأجهزة اللوحية والكمبيوتر ------- */
@media (min-width: 640px){
  .app-shell{ max-width:600px; box-shadow:0 0 40px rgba(20,60,45,.10); }
  body{ background:#eef4f0; }
  .app-shell{ background:var(--ivory); }
}
@media (min-width: 1024px){
  .grid2{ grid-template-columns:repeat(3,1fr); }
  .admin-shell{ max-width:680px !important; }
}
@media (min-width: 640px){
  table.admin-table{ font-size:14px; }
}

/* ------- عام ------- */
.container{ padding:0 20px; }
.h1{ font-size:25px; font-weight:800; margin:0 0 4px; letter-spacing:-.2px; color:var(--ink); }
.h2{ font-size:20px; font-weight:800; margin:0 0 4px; letter-spacing:-.2px; color:var(--ink); }
.muted{ color:var(--muted); font-size:13px; }
.card{
  background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius-lg); color:var(--ink);
  padding:18px; box-shadow:var(--shadow-sm); transition:box-shadow .15s ease, transform .1s ease;
}
a.card:active, button.card:active{ transform:scale(.985); }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none;
  border-radius:var(--radius-md); padding:15px 20px; font-weight:800; font-size:16px; width:100%;
  transition:transform .1s ease, opacity .2s, box-shadow .15s ease;
}
.btn:active{ transform:scale(.98); }
.btn-primary{ background:linear-gradient(135deg,var(--emerald),var(--emerald-dark)); color:#fff; box-shadow:0 6px 16px rgba(18,74,58,.28); }
.btn-gold{ background:linear-gradient(135deg,var(--gold-light),var(--gold),#a9862f); color:#241a05; box-shadow:0 6px 16px rgba(218,182,70,.35); }
.btn-outline{ background:var(--card-bg); color:var(--ink); border:1.5px solid var(--line); }
.btn-dark{ background:linear-gradient(135deg,var(--emerald),var(--emerald-dark)); color:#fff; border:1px solid rgba(218,182,70,.3); }
.btn:disabled{ opacity:.35; cursor:not-allowed; box-shadow:none; }
.pill{
  display:inline-flex; align-items:center; gap:6px; background:rgba(218,182,70,.14); color:var(--gold-dark); border:1px solid rgba(218,182,70,.4);
  border-radius:999px; padding:7px 13px; font-weight:800; font-size:13px; box-shadow:var(--shadow-sm);
}
.stat-row{ display:flex; justify-content:space-between; gap:8px; padding:16px 20px 0; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.grid3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.bar{ width:100%; height:10px; border-radius:99px; background:var(--line); overflow:hidden; }
.bar > div{ height:100%; background:linear-gradient(90deg,var(--emerald-light),var(--emerald)); border-radius:99px; transition:width .5s cubic-bezier(.4,0,.2,1); }
.badge-note{ background:var(--emerald-soft); border:1px solid rgba(28,122,97,.25); color:var(--emerald-dark); border-radius:var(--radius-md); padding:13px 15px; font-size:13px; display:flex; gap:8px; line-height:1.6; }
.info-note{ background:var(--gold-soft); border:1px solid rgba(218,182,70,.35); color:var(--gold-dark); border-radius:var(--radius-md); padding:13px 15px; font-size:12px; display:flex; gap:8px; line-height:1.7; }
.round-badge{ width:42px; height:42px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; color:var(--gold-dark); }
.chip-btn{ background:var(--card-bg); border:1.5px solid var(--line); border-radius:999px; padding:8px 16px; font-size:12px; font-weight:800; color:var(--ink); }
.chip-btn.chip-active{ background:linear-gradient(135deg,var(--emerald),var(--emerald-dark)); border-color:var(--emerald); color:#fff; }
.audio-icon{ width:44px; height:44px; border-radius:14px; background:var(--gold-soft); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }

/* ------- تعريفية ------- */
.intro-screen{
  min-height:100vh; background:radial-gradient(120% 100% at 50% 0%, #1c7a61 0%, var(--emerald-dark) 100%);
  color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:space-between; text-align:center; padding:48px 24px;
}
.intro-logo{
  width:100px; height:100px; border-radius:30px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28);
  display:flex; align-items:center; justify-content:center; margin-bottom:26px; box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.intro-title{ font-family:'Amiri Quran',serif; font-size:54px; font-weight:700; margin:0; color:#fff; }
.intro-tag{ color:var(--gold-light); font-weight:800; font-size:18px; margin-top:6px; }

/* ------- نماذج ------- */
.field{ width:100%; border:1.5px solid var(--line); border-radius:var(--radius-md); padding:14px 16px; font-size:16px; outline:none; margin-bottom:14px; background:#ffffff; color:var(--ink); transition:border-color .15s ease, box-shadow .15s ease; }
.field::placeholder{ color:var(--muted2); }
.field:focus{ border-color:var(--emerald); box-shadow:0 0 0 3px rgba(28,122,97,.18); }
.choice-row{ width:100%; display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-radius:var(--radius-md); border:1.5px solid var(--line); font-weight:700; background:var(--card-bg); color:var(--ink); margin-bottom:10px; text-align:right; transition:border-color .15s ease, background .15s ease; }
.choice-row.selected{ border-color:var(--emerald); background:var(--emerald-soft); }
.choice-row .check{ opacity:0; color:var(--emerald); transition:opacity .15s ease; }
.choice-row.selected .check{ opacity:1; }
.progress-steps{ display:flex; gap:6px; margin-bottom:24px; }
.progress-steps > div{ flex:1; height:6px; border-radius:99px; background:var(--line); transition:background .2s ease; }
.progress-steps > div.done{ background:var(--emerald); }
.avatar-pick{ width:52px; height:52px; border-radius:16px; font-size:24px; display:flex; align-items:center; justify-content:center; border:1.5px solid var(--line); background:var(--card-bg); margin-left:10px; transition:border-color .15s ease, transform .1s ease; }
.avatar-pick.selected{ border-color:var(--emerald); background:var(--emerald-soft); transform:scale(1.06); }

/* ------- بطاقة السورة ------- */
.surah-hero{
  background:linear-gradient(150deg,var(--emerald) 0%, var(--emerald-dark) 100%);
  color:#fff; border-radius:26px; padding:26px 24px; margin-bottom:20px; box-shadow:var(--shadow-lg); position:relative; overflow:hidden;
}
.surah-hero::after{ content:""; position:absolute; inset:0; background:radial-gradient(80% 60% at 100% 0%, rgba(255,255,255,.1), transparent); pointer-events:none; }
.surah-hero-title{ font-size:32px; font-weight:700; margin:0 0 4px; }
.surah-hero-meta{ color:rgba(255,255,255,.7); font-size:13px; margin:0 0 16px; }
.surah-hero-intro{ font-size:14px; line-height:1.9; color:rgba(255,255,255,.94); margin:0; }

/* ------- المسار ------- */
.stage-label{ text-align:center; margin:20px 0; }
.stage-label span{ background:linear-gradient(135deg,var(--emerald),var(--emerald-dark)); color:#fff; font-size:12px; font-weight:800; padding:7px 18px; border-radius:99px; box-shadow:var(--shadow-sm); }
.node-wrap{ display:flex; justify-content:center; margin-bottom:16px; }
.node{ width:66px; height:66px; border-radius:22px; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); border:2px solid; position:relative; font-size:22px; }
.node-surah-name{ font-family:'Amiri Quran',serif; font-weight:800; text-align:center; padding:0 2px; word-break:break-word; }
.node-check{ position:absolute; top:-6px; left:-6px; background:var(--emerald-dark); color:#fff; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; border:2px solid var(--ivory); box-shadow:var(--shadow-md); }
.node.completed{ background:linear-gradient(150deg,var(--emerald-light),var(--emerald-dark)); border-color:var(--emerald-dark); color:#fff; }
.node.available{ background:linear-gradient(150deg,var(--gold-light),var(--gold)); border-color:#a9862f; color:#241a05; }
.node.locked, .node.soon{ background:var(--card-bg); border-color:var(--line); color:var(--muted2); box-shadow:none; }
.node-label{ display:block; text-align:center; font-size:12px; font-weight:800; margin-top:6px; color:var(--ink); }
.node-label.dim{ color:var(--muted2); }
.stars-badge{ position:absolute; bottom:-9px; display:flex; gap:2px; background:var(--card-bg); border-radius:99px; padding:3px 7px; box-shadow:var(--shadow-sm); }

/* ------- الدرس ------- */
.lesson-top{ display:flex; align-items:center; gap:12px; padding:18px 20px 0; }
.ayah-card{ background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px; margin:20px 0; text-align:center; font-size:22px; line-height:2.4; box-shadow:var(--shadow-sm); color:var(--ink); }

/* ------- تصميم صفحة المصحف (مصحف المدينة) ------- */
.mushaf-page{
  background:#fefdf9; border:1px solid rgba(218,182,70,.4); border-radius:14px;
  padding:22px 20px; box-shadow:0 4px 18px rgba(20,60,45,.10);
}
.mushaf-topbar{
  display:flex; justify-content:space-between; align-items:center;
  font-size:12px; font-weight:800; color:var(--gold-dark); margin-bottom:14px;
}
.mushaf-surah-banner{
  background:linear-gradient(135deg,var(--emerald-dark),var(--emerald));
  border:1.5px solid rgba(218,182,70,.5); border-radius:10px;
  text-align:center; padding:10px 14px; margin-bottom:20px;
  font-family:'Amiri Quran',serif; font-size:22px; color:var(--gold-light);
  position:relative;
}
.mushaf-basmala{
  text-align:center; font-family:'Amiri Quran',serif; font-size:26px;
  color:var(--gold-dark); margin:4px 0 22px; padding-bottom:16px;
  border-bottom:1px dashed rgba(218,182,70,.5);
}
.mushaf-text{
  font-family:'Amiri Quran',serif; font-size:23px; line-height:2.7;
  text-align:justify; text-align-last:center; color:var(--ink);
}
.mushaf-ayah-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--emerald-dark), var(--emerald) 70%);
  border:1.5px solid rgba(218,182,70,.5); box-shadow:0 0 0 2px #fefdf9, 0 0 0 3px rgba(218,182,70,.45);
  font-size:12px; font-family:'Tajawal',sans-serif; font-weight:800; color:var(--gold-light);
  margin:0 4px; vertical-align:middle; position:relative;
}
.mushaf-ayah-num::before{
  content:""; position:absolute; inset:3px; border:1px dotted rgba(218,182,70,.5); border-radius:50%; opacity:.6;
}
.mushaf-highlight{ background:rgba(28,122,97,.16); border-radius:6px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.mushaf-pagenum{
  text-align:center; margin-top:18px; font-size:12px; color:var(--gold-dark); font-weight:800;
}
.blank-tag{ display:inline-block; padding:2px 22px; background:var(--gold-soft); border-radius:8px; vertical-align:middle; color:var(--gold-dark); font-weight:800; }
.opt-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.opt-btn{ border:1.5px solid var(--line); border-radius:var(--radius-md); padding:20px 10px; font-weight:800; font-size:17px; text-align:center; color:var(--ink); background:var(--card-bg); transition:transform .1s ease, opacity .15s ease; box-shadow:var(--shadow-sm); }
.opt-btn:active{ transform:scale(.96); }
.opt-grid .opt-color-1{ background:linear-gradient(150deg,var(--emerald-light),var(--emerald)); color:#fff; }
.opt-grid .opt-color-2{ background:linear-gradient(150deg,var(--gold-light),var(--gold)); color:#241a05; }
.opt-grid .opt-color-3{ background:linear-gradient(150deg,#7ab3e4,#4a86c2); color:#fff; }
.opt-grid .opt-color-4{ background:linear-gradient(150deg,#f0a868,#d97f3d); color:#fff; }
.opt-letter{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:7px; background:rgba(255,255,255,.32); font-size:12px; font-weight:800; margin-left:8px; margin-right:2px; vertical-align:middle; unicode-bidi:isolate; font-family:'Tajawal',sans-serif; }
.opt-btn.full{ text-align:right; grid-column:1 / -1; background:var(--card-bg); color:var(--ink); border:1.5px solid var(--line); box-shadow:none; }
.opt-grid .tf-true{ background:linear-gradient(150deg,var(--emerald-light),var(--emerald)); color:#fff; font-size:19px; }
.opt-grid .tf-false{ background:linear-gradient(150deg,#e88b96,var(--red)); color:#fff; font-size:19px; }
.tafsir-box{
  background:linear-gradient(180deg,var(--card-bg) 0%,#f7fbf9 250%);
  border:1.5px solid rgba(218,182,70,.5); border-radius:26px; padding:6px; box-shadow:var(--shadow-lg); position:relative; overflow:hidden;
}
.tafsir-box::before{
  content:""; position:absolute; inset:0; border-radius:24px; pointer-events:none;
  border:1px solid rgba(218,182,70,.35); margin:5px;
}
.tafsir-box-title{
  display:flex; align-items:center; gap:10px; font-weight:800; font-size:17px; color:var(--gold-light);
  background:linear-gradient(135deg,var(--emerald-dark),var(--emerald)); border:1.5px solid rgba(218,182,70,.5); border-radius:20px;
  padding:14px 20px; margin:10px 10px 20px; text-align:center; justify-content:center;
  font-family:'Amiri Quran',serif;
}
.tafsir-box-inner{ padding:4px 22px 22px; }
.tafsir-box-text{ font-family:'Tajawal',sans-serif; font-size:17px; line-height:2.5; color:var(--ink); font-weight:500; }
.tafsir-ayah-block{ margin-bottom:28px; padding-bottom:26px; border-bottom:1.5px dashed rgba(218,182,70,.35); }
.tafsir-ayah-block:last-child{ margin-bottom:0; padding-bottom:0; border-bottom:none; }
.tafsir-ayah-header{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.tafsir-ayah-num-badge{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:38px; height:38px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--emerald-dark), var(--emerald) 70%);
  border:2px solid rgba(218,182,70,.5); box-shadow:0 0 0 3px var(--ivory), 0 0 0 4px rgba(218,182,70,.45), 0 3px 8px rgba(20,60,45,.18);
  font-size:15px; font-family:'Amiri Quran',serif; font-weight:700; color:var(--gold-light); position:relative;
}
.tafsir-ayah-num-badge::before{ content:""; position:absolute; inset:3px; border:1px dotted rgba(218,182,70,.5); border-radius:50%; opacity:.7; }
.tafsir-ayah-label{ font-weight:800; font-size:13.5px; color:var(--emerald-dark); background:rgba(28,122,97,.12); padding:6px 14px; border-radius:99px; }
.tafsir-ayah-text{ font-family:'Tajawal',sans-serif; font-size:17px; line-height:2.5; color:var(--ink); font-weight:500; padding-right:4px; }
.opt-btn.correct{ background:linear-gradient(150deg,var(--emerald-light),var(--emerald)) !important; color:#fff !important; box-shadow:0 4px 14px rgba(28,122,97,.35); }
.opt-btn.wrong{ background:linear-gradient(150deg,#e88b96,var(--red)) !important; color:#fff !important; box-shadow:0 4px 14px rgba(200,57,75,.35); }
.opt-btn.dim{ opacity:.4; }
.word-chip{ display:inline-block; border:1.5px solid var(--line); border-radius:10px; padding:7px 13px; font-size:18px; font-weight:700; background:var(--card-bg); color:var(--ink); margin:4px; transition:border-color .15s ease, background .15s ease; }
.word-chip.picked{ border-color:var(--emerald); background:var(--emerald-soft); }
.ayah-order-chip{ display:block; width:100%; border:1.5px solid var(--line); border-radius:12px; padding:12px 16px; font-size:17px; font-weight:700; background:var(--card-bg); color:var(--ink); margin:8px 0; text-align:right; transition:border-color .15s ease, background .15s ease; }
.ayah-order-chip.picked{ border-color:var(--emerald); background:var(--emerald-soft); }
.word-drop{ min-height:66px; border:2px dashed var(--gold); border-radius:var(--radius-lg); padding:12px; text-align:center; margin-bottom:16px; background:var(--gold-soft); }
.feedback-bar{ position:sticky; bottom:0; padding:18px 20px; border-top:2px solid; backdrop-filter:blur(6px); }
.feedback-bar.correct{ background:rgba(28,122,97,.96); border-color:rgba(28,122,97,.5); color:#fff; }
.feedback-bar.wrong{ background:rgba(200,57,75,.96); border-color:rgba(200,57,75,.5); color:#fff; }

/* ------- الشريط السفلي ------- */
.bottom-nav{ position:fixed; bottom:0; left:0; right:0; background:var(--card-bg); border-top:1px solid var(--line); z-index:40; box-shadow:0 -4px 14px rgba(20,60,45,.10); color:var(--ink); }
.bottom-nav-inner, .bottom-nav{ max-width:480px; margin:0 auto; }
.bottom-nav{ display:block; }
.bottom-nav > a{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:11px 0 9px; color:var(--muted2); width:20%; float:right; font-size:10px; font-weight:800; transition:color .15s ease; }
.bottom-nav > a.active{ color:var(--emerald); }
.bottom-nav::after{ content:""; display:block; clear:both; }

/* ------- عام مساعد ------- */
.row{ display:flex; align-items:center; gap:10px; }
.between{ display:flex; align-items:center; justify-content:space-between; }
.mt-2{ margin-top:8px; } .mt-3{ margin-top:12px; } .mt-4{ margin-top:16px; } .mt-5{ margin-top:20px; } .mt-6{ margin-top:24px; }
.mb-1{ margin-bottom:4px; } .mb-2{ margin-bottom:8px; } .mb-3{ margin-bottom:12px; } .mb-4{ margin-bottom:16px; } .mb-5{ margin-bottom:20px; } .mb-6{ margin-bottom:24px; }
.center{ text-align:center; }
.toast{ position:fixed; bottom:92px; left:50%; transform:translateX(-50%); background:var(--card-bg); color:var(--ink); font-size:13px; padding:11px 18px; border-radius:14px; box-shadow:var(--shadow-lg); z-index:100; max-width:90%; text-align:center; border:1px solid var(--line); }
table.admin-table{ width:100%; border-collapse:collapse; font-size:13px; color:var(--ink); }
table.admin-table th{ text-align:right; padding:10px 6px; color:var(--muted); font-size:11px; border-bottom:2px solid var(--line); }
table.admin-table td{ border-bottom:1px solid var(--line); padding:10px 6px; text-align:right; }
table.admin-table tr:hover td{ background:rgba(28,122,97,.05); }
.status-tag{ font-size:11px; font-weight:800; padding:4px 11px; border-radius:99px; background:var(--line); color:var(--muted); }
.status-tag.published{ background:var(--emerald-soft); color:var(--emerald-dark); }
.status-tag.draft{ background:var(--gold-soft); color:var(--gold-dark); }

/* ------- الديسكتوب واللابتوب والآيباد بالعرض: قائمة جانبية ثابتة بدل شريط سفلي، ومحتوى أوسع ------- */
@media (min-width: 1024px){
  body.has-nav{ padding-bottom:0; padding-right:220px; }
  .app-shell{ max-width:900px; margin:0 auto; box-shadow:none; }

  .bottom-nav{
    position:fixed; top:0; bottom:0; right:0; left:auto; width:220px; height:100vh;
    border-top:none; border-left:1px solid var(--line);
    display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
    padding:28px 14px; box-shadow:2px 0 14px rgba(20,60,45,.10); box-sizing:border-box;
  }
  .bottom-nav-inner, .bottom-nav{ max-width:none !important; margin:0 !important; }
  .bottom-nav > a{
    display:flex !important; flex-direction:row !important; align-items:center; gap:12px;
    width:100% !important; float:none !important; padding:13px 14px; border-radius:14px; font-size:14px;
    justify-content:flex-start;
  }
  .bottom-nav > a svg{ width:22px; height:22px; }
  .bottom-nav > a span{ font-size:14px; }
  .bottom-nav > a.active{ background:rgba(28,122,97,.10); }
  .bottom-nav::after{ display:none !important; }

  .rattl-logo-bar{ display:none; }
}

.rattl-logo-bar{ display:flex; justify-content:center; padding:10px 0 4px; }

/* الوضع الفاتح (أبيض/أخضر) أصبح هو المظهر الوحيد للموقع - لا حاجة لزر تبديل */
.theme-fab{ display:none !important; }


/* ==========================================================================
   ألوان الموقع والتطبيق (ثيم اختياري من «تعديل الحساب»)
   الوضع الافتراضي = كل ما فوق كما هو (بدون سمة data-accent). الأنماط التالية لا تعمل إلا حين
   يضع الخادم html[data-accent="green|blue|purple|yellow|gold"] لمستخدم اختارها.
   كل ثيم يعيد تعريف نفس المتغيّرات، ثم قواعد مشتركة تستبدل الألوان المكتوبة مباشرة بأرقام (rgb).
   ========================================================================== */
html[data-accent="green"]{
  --emerald:#2f9e44; --emerald-dark:#1b5e20; --emerald-light:#7fd18b; --emerald-soft:#e6f6e8;
  --gold:#6cc46f; --gold-light:#b9e9b3; --gold-dark:#2d7a3a; --gold-deep:#3f9a4b; --gold-soft:rgba(47,158,68,.14);
  --btn-a:#2f9e44; --btn-b:#1b5e20; --on-primary:#fff; --on-accent:#0f2d14;
  --ivory:#f6fbf6; --ink:#12301a; --ink-rgb:18,48,26; --card-tint:#eef8ef; --page-bg:#e9f3ea; --paper:#fbfefb;
  --emerald-rgb:47,158,68; --gold-rgb:108,196,111; --deep-rgb:27,94,32; --shade-rgb:20,60,28;
}
html[data-accent="blue"]{
  --emerald:#2b6fd6; --emerald-dark:#14448f; --emerald-light:#7fb2f5; --emerald-soft:#e6f0fd;
  --gold:#5aaef0; --gold-light:#b9def9; --gold-dark:#1e5fa8; --gold-deep:#2b7fc9; --gold-soft:rgba(43,111,214,.14);
  --btn-a:#2b6fd6; --btn-b:#14448f; --on-primary:#fff; --on-accent:#0b2545;
  --ivory:#f5f9ff; --ink:#14233d; --ink-rgb:20,35,61; --card-tint:#edf4ff; --page-bg:#e7eff9; --paper:#fafcff;
  --emerald-rgb:43,111,214; --gold-rgb:90,174,240; --deep-rgb:20,68,143; --shade-rgb:20,45,90;
}
html[data-accent="purple"]{
  --emerald:#7b3fc4; --emerald-dark:#4b2085; --emerald-light:#b48af0; --emerald-soft:#f0e8fb;
  --gold:#a97be8; --gold-light:#dcc7fa; --gold-dark:#5f2ea5; --gold-deep:#8b55d1; --gold-soft:rgba(123,63,196,.14);
  --btn-a:#7b3fc4; --btn-b:#4b2085; --on-primary:#fff; --on-accent:#2a1250;
  --ivory:#faf6ff; --ink:#2a1a45; --ink-rgb:42,26,69; --card-tint:#f5eefd; --page-bg:#efe8f9; --paper:#fdfaff;
  --emerald-rgb:123,63,196; --gold-rgb:169,123,232; --deep-rgb:75,32,133; --shade-rgb:60,30,100;
}
html[data-accent="yellow"]{
  --emerald:#a87b00; --emerald-dark:#7a5800; --emerald-light:#ffd84d; --emerald-soft:#fff4c4;
  --gold:#ffb300; --gold-light:#ffe28a; --gold-dark:#7a5800; --gold-deep:#d99500; --gold-soft:rgba(242,194,0,.18);
  --btn-a:#ffdd33; --btn-b:#f0b800; --on-primary:#2b2100; --on-accent:#2b2100;
  --ivory:#fffdf0; --ink:#3a2f00; --ink-rgb:58,47,0; --card-tint:#fff9dc; --page-bg:#faf2c6; --paper:#fffef7;
  --emerald-rgb:242,194,0; --gold-rgb:255,179,0; --deep-rgb:138,100,0; --shade-rgb:100,80,0;
}
html[data-accent="gold"]{
  --emerald:#9c7a1a; --emerald-dark:#6b510c; --emerald-light:#e2c56a; --emerald-soft:#f6ecc9;
  --gold:#b8891a; --gold-light:#ecd48f; --gold-dark:#6b510c; --gold-deep:#9a7412; --gold-soft:rgba(201,162,39,.18);
  --btn-a:#e3c25a; --btn-b:#bf9522; --on-primary:#2a1c00; --on-accent:#2a1c00;
  --ivory:#fbf8ef; --ink:#3b2f10; --ink-rgb:59,47,16; --card-tint:#f8f1dc; --page-bg:#f0e8cf; --paper:#fefcf5;
  --emerald-rgb:201,162,39; --gold-rgb:184,137,26; --deep-rgb:143,109,18; --shade-rgb:90,70,20;
}

/* --- قواعد مشتركة للثيمات الخمسة (لا تؤثر على الوضع الافتراضي) --- */
html[data-accent]{
  --line:rgba(var(--deep-rgb),.15);
  --muted:rgba(var(--ink-rgb),.68);
  --muted2:rgba(var(--ink-rgb),.46);
  --shadow-sm:0 1px 3px rgba(var(--shade-rgb),.10);
  --shadow-md:0 4px 14px rgba(var(--shade-rgb),.12);
  --shadow-lg:0 12px 30px rgba(var(--shade-rgb),.16);
  --card-bg:linear-gradient(155deg,#ffffff,var(--card-tint));
}
@media (min-width: 640px){
  html[data-accent] body{ background:var(--page-bg); }
  html[data-accent] .app-shell{ background:var(--ivory); box-shadow:0 0 40px rgba(var(--shade-rgb),.10); }
}
html[data-accent] .btn-primary,
html[data-accent] .btn-dark{
  background:linear-gradient(135deg,var(--btn-a),var(--btn-b)); color:var(--on-primary);
  box-shadow:0 6px 16px rgba(var(--deep-rgb),.28);
}
html[data-accent] .btn-dark{ border:1px solid rgba(var(--gold-rgb),.3); }
html[data-accent] .btn-gold{
  background:linear-gradient(135deg,var(--gold-light),var(--gold),var(--gold-deep)); color:var(--on-accent);
  box-shadow:0 6px 16px rgba(var(--gold-rgb),.35);
}
html[data-accent] .chip-btn.chip-active{ background:linear-gradient(135deg,var(--btn-a),var(--btn-b)); border-color:var(--emerald); color:var(--on-primary); }
html[data-accent] .pill{ background:rgba(var(--gold-rgb),.14); color:var(--gold-dark); border-color:rgba(var(--gold-rgb),.4); }
html[data-accent] .badge-note{ border-color:rgba(var(--emerald-rgb),.25); color:var(--emerald-dark); }
html[data-accent] .info-note{ border-color:rgba(var(--gold-rgb),.35); color:var(--gold-dark); }
html[data-accent] .field:focus{ box-shadow:0 0 0 3px rgba(var(--emerald-rgb),.18); }
html[data-accent] .intro-screen{ background:radial-gradient(120% 100% at 50% 0%, var(--emerald) 0%, var(--emerald-dark) 100%); }
html[data-accent] .node.completed{ background:linear-gradient(150deg,var(--emerald-light),var(--btn-b)); color:var(--on-primary); }
html[data-accent] .node.available{ border-color:var(--gold-deep); color:var(--on-accent); }
html[data-accent] .mushaf-page{ background:var(--paper); border-color:rgba(var(--gold-rgb),.4); box-shadow:0 4px 18px rgba(var(--shade-rgb),.10); }
html[data-accent] .mushaf-surah-banner{ border-color:rgba(var(--gold-rgb),.5); }
html[data-accent] .mushaf-basmala{ border-bottom-color:rgba(var(--gold-rgb),.5); }
html[data-accent] .mushaf-ayah-num{ border-color:rgba(var(--gold-rgb),.5); box-shadow:0 0 0 2px var(--paper), 0 0 0 3px rgba(var(--gold-rgb),.45); }
html[data-accent] .mushaf-ayah-num::before,
html[data-accent] .tafsir-ayah-num-badge::before{ border-color:rgba(var(--gold-rgb),.5); }
html[data-accent] .mushaf-highlight{ background:rgba(var(--emerald-rgb),.16); }
html[data-accent] .tafsir-box{ border-color:rgba(var(--gold-rgb),.5); }
html[data-accent] .tafsir-box::before{ border-color:rgba(var(--gold-rgb),.35); }
html[data-accent] .tafsir-box-title{ border-color:rgba(var(--gold-rgb),.5); }
html[data-accent] .tafsir-ayah-block{ border-bottom-color:rgba(var(--gold-rgb),.35); }
html[data-accent] .tafsir-ayah-num-badge{ border-color:rgba(var(--gold-rgb),.5); box-shadow:0 0 0 3px var(--ivory), 0 0 0 4px rgba(var(--gold-rgb),.45), 0 3px 8px rgba(var(--shade-rgb),.18); }
html[data-accent] .tafsir-ayah-label{ background:rgba(var(--emerald-rgb),.12); color:var(--emerald-dark); }
html[data-accent] table.admin-table tr:hover td{ background:rgba(var(--emerald-rgb),.05); }
html[data-accent] .bottom-nav{ box-shadow:0 -4px 14px rgba(var(--shade-rgb),.10); }
html[data-accent] .status-tag.published{ color:var(--emerald-dark); }
@media (min-width: 1024px){
  html[data-accent] .bottom-nav{ box-shadow:2px 0 14px rgba(var(--shade-rgb),.10); }
  html[data-accent] .bottom-nav > a.active{ background:rgba(var(--emerald-rgb),.12); }
}
/* الصح والغلط يبقيان أخضر/أحمر في كل الثيمات (معنى تعليمي ثابت) */
html[data-accent] .opt-btn.correct{ background:linear-gradient(150deg,#4fc190,#1c7a61) !important; color:#fff !important; }
html[data-accent] .opt-grid .tf-true{ background:linear-gradient(150deg,#4fc190,#1c7a61); color:#fff; }
html[data-accent] .matching-item.matched{ border-color:#1c7a61; background:#e6f5ee; color:#124a3a; }