/* ════════════════════════════════════════════════════════════════
   عارض الشرائح — إعلامي المستقبل  ·  واجهة v8
   إعادة تصميم كاملة: أكثر جمالاً وتناسقاً واحترافيةً
   بدون زر "فهمت" — بدون زر "اطرح سؤالاً"
═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@500;600;700;800&family=Cairo:wght@400;500;600;700;800&display=swap');

/* ── متغيرات الهوية ──────────────────────────── */
:root {
  /* ألوان الهوية */
  --cream: #FFF6EC;
  --paper: #ffffff;
  --ink:   #1E1838;
  --muted: #66608A;
  --dim:   #A8A2C0;

  --coral:    #FF7A4D; --coral-dk: #D95A28; --coral-lt: #FFE8DC;
  --teal:     #16C2A3; --teal-dk:  #0A907A; --teal-lt:  #D4F7EE;
  --grape:    #6C4DF0; --grape-dk: #4829D6; --grape-lt: #EBE4FF;
  --sun:      #FFB31E; --sun-dk:   #9A6400; --sun-lt:   #FFF0C2;
  --pink:     #FF6FA5; --pink-dk:  #CC3A74; --pink-lt:  #FFE0EE;
  --blue:     #3B7BE0; --blue-dk:  #1F56B8; --blue-lt:  #DCE9FF;

  --line:   rgba(30, 24, 56, .08);
  --line-2: rgba(30, 24, 56, .14);

  --sh-sm: 0 2px 8px rgba(72, 41, 214, .08);
  --sh:    0 20px 50px -18px rgba(72, 41, 214, .28), 0 4px 14px rgba(30, 24, 56, .05);
  --sh-lg: 0 32px 72px -24px rgba(30, 24, 56, .28);

  --r:     16px;
  --r-l:   26px;
  --r-xl:  36px;
  --r-full: 999px;

  --disp: 'Baloo Bhaijaan 2', 'Cairo', system-ui, sans-serif;
  --body: 'Cairo', system-ui, sans-serif;

  /* اللون المحوري — يُعرَّف لكل نوع شريحة */
  --accent:    var(--grape);
  --accent-dk: var(--grape-dk);
  --accent-lt: var(--grape-lt);
  --accent-glow: rgba(108, 77, 240, .22);
}

*  { margin: 0; padding: 0; box-sizing: border-box; }
*:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

body {
  font-family: var(--body);
  color: var(--ink);
  min-height: 100dvh;
  background:
    radial-gradient(130% 75% at 105%  -8%, rgba(255, 232, 220, .80) 0%, transparent 46%),
    radial-gradient(130% 75% at  -5%  -5%, rgba(228, 236, 255, .85) 0%, transparent 50%),
    radial-gradient(100%  70% at  50% 120%, rgba(240, 232, 255, .60) 0%, transparent 55%),
    var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

h1, h2, h3 {
  font-family: var(--disp);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.015em;
}

/* ─────────────────────────────────────────────
   هوية لونية لكل نوع شريحة
───────────────────────────────────────────── */
.slide[data-type="cover"]    { --accent: var(--grape);  --accent-dk: var(--grape-dk); --accent-lt: var(--grape-lt); --accent-wash: #F1ECFF; --accent-glow: rgba(108,77,240,.18); }
.slide[data-type="section"]  { --accent: var(--grape);  --accent-dk: var(--grape-dk); --accent-lt: var(--grape-lt); --accent-wash: #F3EFFF; --accent-glow: rgba(108,77,240,.15); }
.slide[data-type="concept"]  { --accent: var(--grape);  --accent-dk: var(--grape-dk); --accent-lt: var(--grape-lt); --accent-wash: #F4F0FF; --accent-glow: rgba(108,77,240,.14); }
.slide[data-type="example"]  { --accent: var(--blue);   --accent-dk: var(--blue-dk);  --accent-lt: var(--blue-lt);  --accent-wash: #EDF3FF; --accent-glow: rgba(59,123,224,.16); }
.slide[data-type="practical"]{ --accent: var(--teal);   --accent-dk: var(--teal-dk);  --accent-lt: var(--teal-lt);  --accent-wash: #E6FBF5; --accent-glow: rgba(22,194,163,.16); }
.slide[data-type="try"]      { --accent: var(--coral);  --accent-dk: var(--coral-dk); --accent-lt: var(--coral-lt); --accent-wash: #FFF0E8; --accent-glow: rgba(255,122,77,.18); }
.slide[data-type="quiz"]     { --accent: var(--sun);    --accent-dk: var(--sun-dk);   --accent-lt: var(--sun-lt);   --accent-wash: #FFF6E0; --accent-glow: rgba(255,179,30,.18); }
.slide[data-type="closing"]  { --accent: var(--teal);   --accent-dk: var(--teal-dk);  --accent-lt: var(--teal-lt);  --accent-wash: #E6FBF5; --accent-glow: rgba(22,194,163,.16); }

/* ─────────────────────────────────────────────
   هيكل الصفحة
───────────────────────────────────────────── */
.deck {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ─────────────────────────────────────────────
   الشريط العلوي
───────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 0 10px;
}

.home-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, .88);
  border: 1.5px solid var(--line);
  border-radius: var(--r-full);
  padding: 9px 17px;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  box-shadow: var(--sh-sm);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: color .18s, border-color .18s, transform .18s, box-shadow .18s;
}
.home-btn:hover {
  color: var(--grape-dk);
  border-color: var(--grape-lt);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(108, 77, 240, .16);
}
.home-btn span { font-size: 15px; }

.day-label {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 13px;
  color: var(--muted);
}
.day-label b { color: var(--grape-dk); }

.top-r {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.counter {
  background: var(--paper);
  color: var(--grape-dk);
  font-family: var(--disp);
  font-weight: 800;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: var(--r-full);
  border: 1.5px solid var(--line);
  box-shadow: var(--sh-sm);
}

/* ─────────────────────────────────────────────
   شريط التقدّم
───────────────────────────────────────────── */
.progress-wrap { padding: 0 1px; }

.progress-line {
  height: 8px;
  background: rgba(255, 255, 255, .75);
  border: 1.5px solid var(--line);
  border-radius: var(--r-full);
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--grape) 0%, var(--coral) 65%, var(--sun) 100%);
  border-radius: var(--r-full);
  transition: width .5s cubic-bezier(.3, .9, .3, 1.2);
  box-shadow: 0 0 14px -2px rgba(108, 77, 240, .5);
}

/* تلميح السحب */
#swipeHint {
  display: none;
  text-align: center;
  padding: 7px 16px;
  background: rgba(30, 24, 56, .68);
  color: #fff;
  font-family: var(--disp);
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--r-full);
  margin: 6px auto;
  width: fit-content;
  transition: opacity .5s;
}

/* ─────────────────────────────────────────────
   المسرح والشرائح
───────────────────────────────────────────── */
.stage {
  flex: 1;
  position: relative;
  margin: 14px 0 0;
}

.slide {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  justify-content: flex-start;

  /* الخلفية: غسيل لوني خفيف ثم أبيض */
  background: linear-gradient(170deg, var(--accent-wash, #F4F0FF) 0%, #fff 28%), #fff;
  border: 1.5px solid rgba(30, 24, 56, .07);
  border-top: 0;
  border-radius: var(--r-xl);
  box-shadow: var(--sh);
  padding: clamp(22px, 4vw, 60px) clamp(24px, 4.5vw, 64px);
  overflow-y: auto;
  overflow-x: hidden;
  animation: slideIn .46s cubic-bezier(.2, .9, .3, 1.15);
  scroll-behavior: smooth;
}
.slide.active { display: flex; }

/* شريط اللون العلوي */
.slide::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 5px;
  background: linear-gradient(90deg,
    var(--accent),
    color-mix(in srgb, var(--accent) 50%, #fff));
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  z-index: 2;
}

/* وهج زخرفي */
.slide::after {
  content: "";
  position: absolute;
  inset-block-start: -50px;
  inset-inline-end: -50px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle,
    var(--accent-glow, rgba(108,77,240,.14)),
    transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.slide > * { position: relative; z-index: 1; }

/* الشرائح المتمركزة رأسياً */
.t-cover, .t-section, .t-closing {
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* تأثيرات الدخول */
@keyframes slideIn {
  from { opacity: 0; transform: translateY(22px) scale(.982); }
  to   { opacity: 1; transform: none; }
}
@keyframes badgePop {
  0%   { opacity: 0; transform: scale(.6) translateY(8px); }
  60%  { transform: scale(1.15); }
  100% { opacity: 1; transform: none; }
}
@keyframes autoFill { from { width: 0; } to { width: 100%; } }

.auto-progress { flex: 1; height: 4px; background: var(--line-2); border-radius: var(--r-full); overflow: hidden; }
.auto-fill     { height: 100%; background: var(--accent); border-radius: var(--r-full); }
.quiz-score-badge { pointer-events: none; }

/* ─────────────────────────────────────────────
   الرفيق (Buddy)
───────────────────────────────────────────── */
.buddy {
  width: 100px;
  height: 100px;
  flex: 0 0 auto;
  margin-bottom: 4px;
  position: relative;
}
.buddy::after {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  z-index: -1;
  background: radial-gradient(circle, rgba(108,77,240,.2), transparent 68%);
}
.buddy svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 14px 22px rgba(108,77,240,.3));
  animation: float 3.8s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-2.5deg); }
  50%       { transform: translateY(-8px) rotate(2.5deg); }
}

/* ─────────────────────────────────────────────
   COVER — الغلاف
───────────────────────────────────────────── */
.cover-eyebrow {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 14px;
  color: var(--grape-dk);
  background: var(--grape-lt);
  padding: 7px 20px;
  border-radius: var(--r-full);
  margin-bottom: 10px;
  border: 1.5px solid color-mix(in srgb, var(--grape) 20%, transparent);
}
.cover-day {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 12px;
  color: var(--dim);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 10px 0 4px;
}
.cover-title {
  font-size: clamp(32px, 6.2vw, 58px);
  margin: 6px 0 14px;
  max-width: 20ch;
}
.cover-sub {
  color: var(--muted);
  font-size: clamp(15px, 2.2vw, 19px);
  font-weight: 600;
  max-width: 34ch;
  line-height: 1.75;
}
.cover-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 24px;
}
.cover-meta .item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.85);
  border: 1.5px solid var(--line);
  border-radius: var(--r-full);
  padding: 10px 18px;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 13px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--sh-sm);
}
.cover-meta .item b { color: var(--grape-dk); font-size: 15px; }
.cover-meta .item .e { font-size: 17px; }

/* زر بدء الدرس */
.start-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  background: linear-gradient(135deg, var(--grape), var(--coral));
  color: #fff;
  border: 0;
  border-radius: var(--r-full);
  padding: 14px 28px;
  font-family: var(--disp);
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 12px 32px -10px rgba(108,77,240,.6);
  transition: transform .18s, filter .18s, box-shadow .18s;
}
.start-btn:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.06);
  box-shadow: 0 18px 40px -12px rgba(108,77,240,.7);
}
.start-btn span { font-size: 18px; font-weight: 700; }

/* ─────────────────────────────────────────────
   علامة النوع (Tag)
───────────────────────────────────────────── */
.concept-tag, .prac-tag, .try-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  font-family: var(--disp);
  font-weight: 800;
  font-size: 13px;
  padding: 7px 16px;
  border-radius: var(--r-full);
  margin-bottom: 18px;
  letter-spacing: .01em;
  border: 1.5px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

.concept-tag {
  color: var(--muted);
  background: transparent;
  border: none;
  padding: 0;
  font-size: 14px;
  margin-bottom: 14px;
}
.concept-n {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(140deg, var(--accent), var(--accent-dk));
  color: #fff;
  font-size: 14px;
  font-family: var(--disp);
  font-weight: 800;
  box-shadow: 0 6px 16px -4px var(--accent-glow);
}

.prac-tag {
  color: var(--teal-dk);
  background: var(--teal-lt);
}

/* بطاقات الميتاداتا للتطبيق العملي (وقت + أداة) */
.prac-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -12px 0 18px;
}
.pm-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, .92);
  border: 1.5px solid var(--line);
  border-radius: var(--r-full);
  padding: 7px 14px;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--ink);
  box-shadow: var(--sh-sm);
}
.pm-time { color: var(--teal-dk); border-color: color-mix(in srgb, var(--teal) 22%, transparent); background: var(--teal-lt); }
.pm-tool { color: var(--blue-dk); border-color: color-mix(in srgb, var(--blue) 22%, transparent); background: var(--blue-lt); }

/* شارة نوع شريحة المثال (مثل concept-tag) */
.ex-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  font-family: var(--disp);
  font-weight: 800;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 14px;
}
.ex-n {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(140deg, var(--accent), var(--accent-dk));
  color: #fff;
  font-size: 14px;
  font-family: var(--disp);
  font-weight: 800;
  box-shadow: 0 6px 16px -4px var(--accent-glow);
}
.try-tag {
  color: var(--coral-dk);
  background: var(--coral-lt);
}

/* ─────────────────────────────────────────────
   CONCEPT — المفاهيم
───────────────────────────────────────────── */
.concept-title {
  font-size: clamp(22px, 3.8vw, 46px);
  margin-bottom: 22px;
  max-width: 26ch;
  line-height: 1.2;
}

.concept-lead {
  font-size: clamp(16px, 2.2vw, 23px);
  line-height: 1.85;
  color: #3E3660;
  font-weight: 600;
  max-width: 46ch;
  padding-inline-start: 20px;
  border-inline-start: 4px solid var(--accent-lt);
  border-radius: 2px;
}

.concept-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
  max-width: 980px;
}

.concept-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  padding: clamp(12px, 1.4vw, 18px) clamp(14px, 1.6vw, 20px);
  font-size: clamp(14px, 1.8vw, 19px);
  font-weight: 600;
  line-height: 1.65;
  color: #39325A;
  box-shadow: var(--sh-sm);
  transition: transform .2s ease, border-color .2s, box-shadow .2s;
}
.concept-list li:hover {
  transform: translateX(-3px);
  border-color: var(--accent-lt);
  box-shadow: 0 8px 24px -10px var(--accent-glow);
}
.concept-list li::before {
  content: "◆";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--accent-lt);
  color: var(--accent-dk);
  font-size: 12px;
  margin-top: 1px;
  transition: background .2s, color .2s;
}
.concept-list li:hover::before {
  background: var(--accent);
  color: #fff;
}

/* ─────────────────────────────────────────────
   PRACTICAL — التطبيق (خطوات مرقّمة)
───────────────────────────────────────────── */
.t-practical .concept-list { counter-reset: pstep; }
.t-practical .concept-list li { counter-increment: pstep; }
.t-practical .concept-list li::before {
  content: counter(pstep);
  font-family: var(--disp);
  font-weight: 800;
  font-size: 15px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--accent), var(--accent-dk));
  color: #fff;
  box-shadow: 0 6px 14px -4px var(--accent-glow);
}
.t-practical .concept-list li:hover::before {
  background: linear-gradient(140deg, var(--accent-dk), var(--accent));
  color: #fff;
}

.prac-takeaway {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 20px;
  background: var(--teal-lt);
  color: var(--teal-dk);
  border-radius: var(--r);
  padding: 15px 18px;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 14.5px;
  border: 1.5px solid color-mix(in srgb, var(--teal) 22%, transparent);
}

/* ─────────────────────────────────────────────
   SECTION — فاصل المحور
───────────────────────────────────────────── */
.section-kicker {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 13px;
  color: var(--grape-dk);
  background: var(--grape-lt);
  padding: 7px 18px;
  border-radius: var(--r-full);
  margin-bottom: 16px;
  border: 1.5px solid color-mix(in srgb, var(--grape) 18%, transparent);
}
.section-title {
  font-size: clamp(28px, 5.5vw, 48px);
  max-width: 22ch;
}
.section-lead {
  color: var(--muted);
  font-weight: 600;
  font-size: clamp(15px, 2.3vw, 19px);
  max-width: 42ch;
  margin-top: 12px;
  line-height: 1.75;
}

/* ─────────────────────────────────────────────
   EXAMPLE — المحادثة
───────────────────────────────────────────── */
.ex-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.ex-head .ei {
  width: clamp(48px, 5.5vw, 66px);
  height: clamp(48px, 5.5vw, 66px);
  border-radius: 18px;
  background: linear-gradient(140deg, var(--accent), var(--accent-dk));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: clamp(22px, 2.8vw, 32px);
  flex: 0 0 auto;
  box-shadow: 0 12px 26px -10px var(--accent-glow);
}
.ex-head h2 { font-size: clamp(20px, 3.2vw, 36px); line-height: 1.25; }

.chat {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.8vw, 20px);
  max-width: 100%;
}

.bub {
  padding: clamp(14px, 1.8vw, 22px) clamp(16px, 2vw, 26px);
  border-radius: 22px;
  font-size: clamp(14px, 1.7vw, 19px);
  line-height: 1.75;
  font-weight: 600;
  max-width: 92%;
  word-break: break-word;
}

.bub.me {
  background: linear-gradient(140deg, var(--grape) 0%, #8B6AF6 100%);
  color: #fff;
  border-end-end-radius: 6px;
  align-self: flex-start;
  box-shadow: 0 10px 28px -12px rgba(108,77,240,.55);
}
.bub.me .who {
  display: block;
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(11px, 1.1vw, 13px);
  opacity: .85;
  margin-bottom: 6px;
  letter-spacing: .03em;
}

.bub.ai {
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-end-start-radius: 6px;
  align-self: flex-end;
  color: #36305A;
  box-shadow: 0 4px 14px -6px rgba(30,24,56,.08);
}
.bub.ai .who {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(11px, 1.1vw, 13px);
  color: var(--accent-dk);
  margin-bottom: 6px;
}

.ex-tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: clamp(14px, 2vw, 24px);
  background: var(--sun-lt);
  color: #7A5200;
  border-radius: var(--r);
  padding: clamp(12px, 1.5vw, 18px) clamp(14px, 1.8vw, 22px);
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(13px, 1.5vw, 16px);
  border: 1.5px solid color-mix(in srgb, var(--sun) 28%, transparent);
  line-height: 1.6;
}

.ex-copy-prompt {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.ex-copy-btn {
  background: var(--grape-lt);
  color: var(--grape-dk);
  border: 1.5px solid color-mix(in srgb, var(--grape) 22%, transparent);
  border-radius: 13px;
  padding: clamp(8px, 1vw, 11px) clamp(14px, 1.5vw, 20px);
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(12px, 1.3vw, 14px);
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.ex-copy-btn:hover { background: #fff; transform: translateY(-1px); }

/* ─────────────────────────────────────────────
   TRY — صندوق التجربة
───────────────────────────────────────────── */
.try-title {
  font-size: clamp(23px, 3.8vw, 37px);
  margin-bottom: 10px;
}
.try-intro {
  color: var(--muted);
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 20px;
  max-width: 50ch;
  line-height: 1.75;
}

.magic {
  background: linear-gradient(155deg, #221A4A, #3A2D66);
  border-radius: var(--r-l);
  padding: 24px;
  box-shadow: var(--sh);
  position: relative;
  overflow: hidden;
  max-width: 900px;
}
.magic::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-l);
  border: 1.5px solid rgba(108,77,240,.3);
  pointer-events: none;
}
.magic::after {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  right: -80px;
  top: -80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,179,30,.28), transparent 70%);
}
.magic .mtop {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  margin-bottom: 16px;
  position: relative;
}
.magic .sparkle { font-size: 24px; animation: spark 2s ease-in-out infinite; }
@keyframes spark {
  0%, 100% { transform: scale(1) rotate(0); }
  50%       { transform: scale(1.3) rotate(16deg); }
}
.magic .mtop b { font-family: var(--disp); font-weight: 800; font-size: 17px; }
.magic .mtop small { display: block; color: #C0B4E4; font-size: 12px; font-weight: 600; }

.magic textarea {
  width: 100%;
  min-height: 76px;
  resize: vertical;
  border: 0;
  border-radius: 14px;
  padding: 14px 16px;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  position: relative;
  z-index: 1;
}
.magic textarea:focus { outline: 3px solid var(--coral); }

.tool-row { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; position: relative; z-index: 1; }
.toolbtn {
  flex: 1 1 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--disp);
  font-weight: 800;
  font-size: 14.5px;
  color: #fff;
  border: 0;
  cursor: pointer;
  padding: 14px;
  border-radius: 14px;
  transition: transform .16s, filter .16s;
}
.toolbtn:hover   { filter: brightness(1.08); }
.toolbtn:active  { transform: scale(.95); }
.t-gem { background: linear-gradient(135deg, #4285F4, #9b72f0); }
.t-gpt { background: linear-gradient(135deg, #10A37F, #1abf99); }

.copyonly {
  margin-top: 10px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255,255,255,.1);
  color: #E4DCFF;
  border: 1.5px solid rgba(255,255,255,.2);
  font-family: var(--body);
  font-weight: 700;
  font-size: 13px;
  padding: 12px;
  border-radius: 13px;
  cursor: pointer;
  transition: background .16s;
  position: relative;
  z-index: 1;
}
.copyonly:hover { background: rgba(255,255,255,.16); }

.try-result {
  margin-top: 14px;
  background: rgba(255,255,255,.08);
  border: 1.5px dashed rgba(255,255,255,.28);
  border-radius: 14px;
  padding: 15px;
  color: #EDE8FF;
  font-size: 13.5px;
  line-height: 1.8;
  display: none;
  position: relative;
  z-index: 1;
}
.try-result.show { display: block; }
.try-result .rwin { color: var(--teal); font-family: var(--disp); font-weight: 800; margin-top: 8px; }

/* ─────────────────────────────────────────────
   QUIZ — الاختبار
───────────────────────────────────────────── */
.quiz-q {
  font-size: clamp(22px, 3.7vw, 35px);
  margin-bottom: 26px;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 28ch;
  line-height: 1.25;
}
.quiz-q .qi { font-size: 32px; flex: 0 0 auto; }

.quiz-opts { display: flex; flex-direction: column; gap: 11px; max-width: 760px; }

.quiz-opt {
  text-align: start;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  padding: 16px 19px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: border-color .16s, transform .16s, box-shadow .16s;
  display: flex;
  align-items: center;
  gap: 13px;
  box-shadow: var(--sh-sm);
}
.quiz-opt::before {
  content: attr(data-k);
  width: 33px;
  height: 33px;
  border-radius: 10px;
  background: var(--accent-lt);
  color: var(--accent-dk);
  display: grid;
  place-items: center;
  font-family: var(--disp);
  font-weight: 800;
  font-size: 14px;
  flex: 0 0 auto;
  transition: background .16s, color .16s;
}
.quiz-opt:hover {
  border-color: var(--accent);
  transform: translateX(-3px);
  box-shadow: 0 8px 22px -10px var(--accent-glow);
}
.quiz-opt:hover::before { background: var(--accent); color: #fff; }
.quiz-opt.correct { border-color: var(--teal); background: var(--teal-lt); color: var(--teal-dk); }
.quiz-opt.correct::before { background: var(--teal); color: #fff; }
.quiz-opt.wrong   { border-color: var(--coral); background: var(--coral-lt); color: var(--coral-dk); }
.quiz-opt.wrong::before   { background: var(--coral); color: #fff; }

.quiz-fb {
  margin-top: 20px;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 15px;
  display: none;
  align-items: center;
  gap: 9px;
}
.quiz-fb.show { display: flex; }

/* ─────────────────────────────────────────────
   CLOSING — الختام
───────────────────────────────────────────── */
.close-burst {
  font-size: 68px;
  margin-bottom: 10px;
  animation: float 3.8s ease-in-out infinite;
}
.act-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 28px;
}
.act-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--disp);
  font-weight: 800;
  font-size: 15px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  background: linear-gradient(135deg, var(--grape), var(--coral));
  color: #fff;
  padding: 14px 28px;
  border-radius: var(--r-full);
  box-shadow: 0 14px 34px -12px rgba(108,77,240,.6);
  transition: transform .18s, filter .18s, box-shadow .18s;
}
.act-btn:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.06);
  box-shadow: 0 18px 42px -14px rgba(108,77,240,.7);
}
.act-btn.ghost {
  background: #fff;
  color: var(--grape-dk);
  border: 1.5px solid var(--grape-lt);
  box-shadow: var(--sh-sm);
}

/* ─────────────────────────────────────────────
   الميكسر + نقاط التنقل
───────────────────────────────────────────── */
.mixer {
  padding: 8px 2px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dots {
  display: flex;
  gap: 7px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 4px 0;
}
.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dim);
  border: 0;
  cursor: pointer;
  opacity: .45;
  transition: width .28s, background .22s, border-radius .28s, opacity .22s;
  padding: 0;
  flex-shrink: 0;
}
.dot.on {
  background: var(--dot-color, var(--grape));
  width: 28px;
  border-radius: var(--r-full);
  opacity: 1;
}
.dot:hover:not(.on) {
  opacity: .75;
  background: var(--dot-color, var(--grape));
  width: 14px;
  border-radius: var(--r-full);
}

.mixer-c { display: none !important; }
.mix-counter { display: none; }

/* ─────────────────────────────────────────────
   أسهم التنقّل الجانبية
───────────────────────────────────────────── */
.nav-arrows {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  z-index: 30;
  pointer-events: none;
}
.nav-arrows.left  { left: 16px; }
.nav-arrows.right { right: 16px; }

.nav-arrow {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  border: 1.5px solid rgba(30,24,56,.1);
  box-shadow: 0 8px 28px rgba(30,24,56,.14);
  cursor: pointer;
  font-size: 22px;
  font-weight: 700;
  display: grid;
  place-items: center;
  pointer-events: all;
  color: var(--grape-dk);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .18s, transform .18s, opacity .22s, color .18s, box-shadow .18s;
}
.nav-arrow:hover {
  background: var(--grape);
  color: #fff;
  transform: scale(1.1);
  box-shadow: 0 12px 36px rgba(108,77,240,.45);
  border-color: transparent;
}
.nav-arrow:active  { transform: scale(.93); }
.nav-arrow:disabled { opacity: .2; pointer-events: none; }

/* ─────────────────────────────────────────────
   البثّ المباشر + التنبيهات
───────────────────────────────────────────── */
.live-pill {
  display: none;
  align-items: center;
  gap: 7px;
  background: var(--coral-lt);
  color: var(--coral-dk);
  font-family: var(--disp);
  font-weight: 800;
  font-size: 12px;
  padding: 6px 14px;
  border-radius: var(--r-full);
  border: 1.5px solid color-mix(in srgb, var(--coral) 22%, transparent);
}
.live-pill.on { display: inline-flex; }
.live-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
  opacity: 1;
  animation: pulse 1.4s infinite;
}

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .32; } }

.live-banner {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: #1E1640;
  color: #fff;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 13.5px;
  padding: 11px 22px;
  border-radius: var(--r-full);
  box-shadow: var(--sh-lg);
  z-index: 50;
  display: none;
  border: 1.5px solid rgba(108,77,240,.35);
}
.live-banner.show { display: block; animation: slideIn .4s; }

.toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--grape), var(--coral));
  color: #fff;
  font-family: var(--disp);
  font-weight: 800;
  padding: 14px 26px;
  border-radius: var(--r-full);
  box-shadow: var(--sh-lg);
  z-index: 60;
  display: none;
}
.toast.show { display: block; animation: slideIn .4s; }

/* ─────────────────────────────────────────────
   الكشف التدريجي بالنقر — نقاط، خطوات، فقاعات محادثة
───────────────────────────────────────────── */
.reveal-item {
  opacity: 0;
  transform: translateY(14px);
  max-height: 0;
  overflow: hidden;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-width: 0 !important;
  pointer-events: none;
  transition:
    opacity .4s cubic-bezier(.2,.9,.3,1.1),
    transform .4s cubic-bezier(.2,.9,.3,1.1),
    max-height .45s ease,
    margin .45s ease,
    padding .45s ease,
    border-width .45s ease;
}
.reveal-item.revealed {
  opacity: 1;
  transform: none;
  max-height: 600px;
  pointer-events: auto;
}
/* استرجاع الهوامش/الحشو الأصلية عند الكشف لكل سياق */
.concept-list .reveal-item.revealed {
  margin-bottom: 0;
  padding: 15px 18px;
  border-width: 1.5px !important;
}
.chat .reveal-item.revealed {
  padding: clamp(14px, 1.8vw, 22px) clamp(16px, 2vw, 26px);
  margin-bottom: 0;
}
.reveal-list .reveal-item:not(.revealed) + .reveal-item:not(.revealed) { display: none; }

/* زر "انقر للمتابعة" */
.reveal-next-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  font-family: var(--disp);
  font-size: 13px;
  font-weight: 800;
  color: var(--accent-dk);
  background: var(--accent-lt);
  border: 1.5px solid color-mix(in srgb, var(--accent) 22%, transparent);
  padding: 10px 20px;
  border-radius: var(--r-full);
  margin-top: 22px;
  cursor: pointer;
  transition: background .18s, transform .15s, box-shadow .18s;
  animation: revealPulse 2.4s ease-in-out infinite;
  clear: both;
  position: relative;
}
/* فاصل بصري صريح بين القائمة وزر التالي */
.reveal-list + .reveal-next-btn::before {
  content: "";
  position: absolute;
  top: -10px;
  inset-inline-start: 0;
  width: 36px;
  height: 2px;
  border-radius: var(--r-full);
  background: var(--accent-lt);
  opacity: .55;
}
.reveal-next-btn:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -8px var(--accent-glow);
  animation: none;
}
.reveal-next-btn:active { transform: scale(.96); }
.reveal-next-btn.done {
  background: var(--teal-lt);
  color: var(--teal-dk);
  border-color: color-mix(in srgb, var(--teal) 25%, transparent);
  cursor: default;
  animation: none;
  pointer-events: none;
}
.reveal-next-btn .rn-icon { font-size: 15px; }
.reveal-next-btn .rn-count {
  font-size: 11px;
  opacity: .75;
  background: rgba(255,255,255,.5);
  padding: 2px 9px;
  border-radius: var(--r-full);
}
@keyframes revealPulse { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }

/* السلايد كلّه قابل للنقر للكشف (إلا فوق الأزرار/الروابط) */
.slide[data-has-reveal="1"] { cursor: pointer; }
.slide[data-has-reveal="1"] button,
.slide[data-has-reveal="1"] a,
.slide[data-has-reveal="1"] select,
.slide[data-has-reveal="1"] textarea,
.slide[data-has-reveal="1"] input { cursor: auto; }

[data-reveal] { transition: opacity .4s ease; }

/* ─────────────────────────────────────────────
   إضافات صغيرة
───────────────────────────────────────────── */
/* Typewriter */
.typing-dots span {
  animation: typingBlink 1.2s ease-in-out infinite;
  color: var(--accent-dk);
  font-size: 20px;
}
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes typingBlink {
  0%, 80%, 100% { opacity: .2; }
  40% { opacity: 1; }
}

/* بادج النقاط */
@keyframes badgePop {
  0%   { opacity: 0; transform: scale(.6) translateY(8px); }
  60%  { transform: scale(1.15); }
  100% { opacity: 1; transform: none; }
}

.order-handle { font-size: 18px; color: var(--dim); cursor: grab; }
.note { position: fixed; bottom: 8px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--dim); }

/* ─────────────────────────────────────────────
   الجوّال (≤ 600px)
───────────────────────────────────────────── */
@media (max-width: 600px) {
  .deck { padding: 0 12px; }
  .slide { padding: 22px 18px; border-radius: var(--r-l); }
  .slide::before { border-radius: var(--r-l) var(--r-l) 0 0; }
  .slide::after  { width: 160px; height: 160px; }
  .topbar { padding: 12px 0 6px; gap: 8px; }
  .topbar .day-label { display: none; }
  .buddy { width: 80px; height: 80px; }
  .cover-meta .item { padding: 8px 13px; font-size: 12px; }
  .cover-title { font-size: clamp(28px, 8vw, 42px); }
  .nav-arrows.left  { left: 8px; }
  .nav-arrows.right { right: 8px; }
  .nav-arrow { width: 44px; height: 44px; font-size: 19px; }
  #swipeHint { display: block; }
  .dots { gap: 5px; }
  .dot { width: 8px; height: 8px; }
  .dot.on { width: 22px; }
  .start-btn { font-size: 14px; padding: 12px 22px; }
  .magic { padding: 18px; }
  .tool-row { gap: 8px; }
  .toolbtn { font-size: 13px; padding: 12px; }
  .quiz-opts { max-width: 100%; }
}

/* ─────────────────────────────────────────────
   حركة مخفّفة
───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ─────────────────────────────────────────────
   وضع ملء الشاشة / جهاز العرض (Projector Mode)
   يُخفي أزرار الكشف التدريجي لأنها غير احترافية
   على الشاشة الكبيرة ويُظهر كل المحتوى دفعة واحدة
───────────────────────────────────────────── */
:fullscreen .reveal-next-btn,
:-webkit-full-screen .reveal-next-btn,
:-moz-full-screen .reveal-next-btn {
  display: none !important;
}

:fullscreen .reveal-item,
:-webkit-full-screen .reveal-item,
:-moz-full-screen .reveal-item {
  opacity: 1 !important;
  transform: none !important;
  display: flex !important;
  animation: none !important;
}

:fullscreen .prac-takeaway,
:-webkit-full-screen .prac-takeaway,
:-moz-full-screen .prac-takeaway {
  display: block !important;
}

:fullscreen #swipeHint,
:-webkit-full-screen #swipeHint,
:-moz-full-screen #swipeHint {
  display: none !important;
}

/* تحسين أحجام الخطوط في ملء الشاشة للشاشات الكبيرة */
:fullscreen .concept-title,
:-webkit-full-screen .concept-title,
:-moz-full-screen .concept-title {
  font-size: clamp(34px, 5vw, 58px);
}

:fullscreen .concept-list li,
:-webkit-full-screen .concept-list li,
:-moz-full-screen .concept-list li {
  font-size: clamp(18px, 2.4vw, 26px);
  padding: 18px 0;
}

:fullscreen .bub,
:-webkit-full-screen .bub,
:-moz-full-screen .bub {
  font-size: clamp(18px, 2.2vw, 26px);
  padding: clamp(18px, 2.2vw, 28px) clamp(20px, 2.5vw, 32px);
  max-width: 88%;
}

:fullscreen .ex-head h2,
:-webkit-full-screen .ex-head h2,
:-moz-full-screen .ex-head h2 {
  font-size: clamp(28px, 4vw, 46px);
}

:fullscreen .ex-tip,
:-webkit-full-screen .ex-tip,
:-moz-full-screen .ex-tip {
  font-size: clamp(16px, 1.8vw, 22px);
  padding: clamp(16px, 2vw, 24px) clamp(18px, 2.2vw, 28px);
}

:fullscreen .slide,
:-webkit-full-screen .slide,
:-moz-full-screen .slide {
  padding: clamp(36px, 5vw, 72px);
  justify-content: center;
}

/* ─────────────────────────────────────────────
   الشاشات الكبيرة (≥ 1024px)
───────────────────────────────────────────── */
@media (min-width: 1024px) {
  .deck { padding: 0 40px; }
  .slide { padding: clamp(36px, 4vw, 60px); }
  .concept-title { font-size: clamp(30px, 3.8vw, 52px); }
  .concept-list li { font-size: clamp(16px, 1.8vw, 21px); }
  .cover-title { font-size: clamp(38px, 5.5vw, 64px); }
  .section-title { font-size: clamp(34px, 5vw, 58px); }
  .quiz-q { font-size: clamp(22px, 3vw, 36px); }
  .quiz-opt { font-size: clamp(15px, 1.8vw, 20px); padding: 16px 22px; }
  .quiz-opts { grid-template-columns: 1fr 1fr; max-width: 860px; gap: 14px; }
  /* شرائح الأمثلة */
  .bub { font-size: clamp(15px, 1.6vw, 20px); }
  .ex-head h2 { font-size: clamp(24px, 3vw, 40px); }
  .chat { gap: clamp(14px, 1.8vw, 22px); }
}

/* ─────────────────────────────────────────────
   الشاشات الكبيرة جداً (≥ 1440px)
───────────────────────────────────────────── */
@media (min-width: 1440px) {
  .deck { padding: 0 60px; }
  .concept-list li { font-size: clamp(18px, 1.6vw, 24px); }
  .cover-sub { font-size: clamp(18px, 1.8vw, 22px); }
  .section-lead { font-size: clamp(18px, 1.8vw, 24px); }
  .bub { font-size: clamp(17px, 1.5vw, 22px); }
  .ex-head h2 { font-size: clamp(28px, 2.8vw, 44px); }
}

/* ═══════════════════════════════════════════════════════════
   v10 — تجربة تنقّل ٢٠٢٦
   شريط مجزّأ · بؤرة ضوء · خلفية متكيّفة · View Transitions
   ═══════════════════════════════════════════════════════════ */

/* ── الشريط المجزّأ (Story-bar) ── */
.storysegs {
  display: flex;
  gap: 4px;
  padding: 0 1px;
}
.sseg {
  flex: 1;
  height: 8px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .75);
  border: 1.5px solid var(--line);
  overflow: hidden;
  position: relative;
}
.sseg i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--seg-color, #7F77DD);
  box-shadow: 0 0 10px -2px var(--seg-color, #7F77DD);
  transition: width .45s cubic-bezier(.3, .9, .3, 1.2);
}
.sseg.done i { width: 100%; }
.sseg.cur  i { width: var(--seg, 35%); }
/* إخفاء الشريط القديم عند وجود المجزّأ (احتياط لو لم يُخفَ عبر JS) */
.progress-wrap:has(#storysegs) .progress-line { display: none; }

/* ── بؤرة الضوء عند الكشف ── */
.reveal-item.revealed.is-dim {
  opacity: .5;
  filter: saturate(.72);
  transition: opacity .4s ease, filter .4s ease;
}
.reveal-item.is-spot { animation: spotPop .5s cubic-bezier(.2, .9, .3, 1.15); }
.concept-list .reveal-item.is-spot,
.reveal-list  .reveal-item.is-spot {
  border-color: var(--accent) !important;
  box-shadow: 0 10px 26px -12px var(--accent-glow, rgba(108,77,240,.4));
}
.chat .reveal-item.is-spot {
  box-shadow: 0 12px 30px -12px var(--accent-glow, rgba(108,77,240,.4));
}
@keyframes spotPop {
  0%   { transform: translateY(4px) scale(.985); }
  60%  { transform: translateY(-2px) scale(1.012); }
  100% { transform: none; }
}

/* ── الخلفية المحيطة المتكيّفة ── */
.ambient-fx {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transition: background .8s ease;
}
.deck { position: relative; z-index: 1; }

/* ── انتقالات View Transitions ── */
.deck.has-vt .slide { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: .34s;
    animation-timing-function: cubic-bezier(.2, .9, .3, 1.1);
  }
}

/* ── احترام تقليل الحركة ── */
@media (prefers-reduced-motion: reduce) {
  .slide { animation: none !important; }
  .sseg i, .ambient-fx { transition: none !important; }
  .reveal-item.is-spot { animation: none !important; }
  .reveal-next-btn { animation: none !important; }
}

@media (max-width: 640px) {
  .storysegs { gap: 3px; }
}