/* ملكاوي ماث: لمسات التصميم الإضافية (الهيرو، الأغلفة، الخطوات، الأسئلة، الحركات) — فوق theme.css */

body.site ::selection { background: rgba(200, 16, 46, .55); color: #fff; }
body.site { scrollbar-color: #4a0f1b #121212; }
body.site ::-webkit-scrollbar { width: 10px; }
body.site ::-webkit-scrollbar-track { background: #121212; }
body.site ::-webkit-scrollbar-thumb { background: linear-gradient(#800020, #c8102e); border-radius: 10px; border: 2px solid #121212; }

/* ── الهيرو ── */
body.site .hero-graph { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero-graph .draw { stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: draw 3.2s cubic-bezier(.6, .1, .2, 1) forwards; }
.hero-graph .d2 { animation-delay: .6s; }
.hero-graph .d3 { stroke-dasharray: 6 8; stroke-dashoffset: 0; animation: dash 40s linear infinite; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes dash { to { stroke-dashoffset: -1400; } }
body.site .hero-glow { position: absolute; z-index: 1; width: 520px; height: 520px; border-radius: 50%; pointer-events: none; left: var(--mx, 70%); top: var(--my, 40%); transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(200, 16, 46, .22), transparent 65%); transition: left .25s ease-out, top .25s ease-out; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: .85rem; font-weight: 700; color: #ffd0d7; background: rgba(200, 16, 46, .14); border: 1px solid rgba(255, 77, 106, .35); margin-bottom: 14px; }
.pill i { width: 8px; height: 8px; border-radius: 50%; background: #ff4d6a; box-shadow: 0 0 0 0 rgba(255, 77, 106, .7); animation: ping 1.8s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 8px rgba(255, 77, 106, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 77, 106, 0); } }

/* لوح المعادلات: إطار متوهّج بيلف */
body.site .hero-board { position: relative; isolation: isolate; border: 0; padding-top: 40px; }
body.site .hero-board::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--ang, 0deg), transparent 0 60%, #ff4d6a 75%, transparent 90%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 6s linear infinite; }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes spin { to { --ang: 360deg; } }
.board-dots { position: absolute; top: 14px; inset-inline-end: 16px; display: flex; gap: 6px; direction: ltr; }
.board-dots i { width: 10px; height: 10px; border-radius: 50%; background: #3a3a3a; }
.board-dots i:first-child { background: #c8102e; }

/* ── أغلفة الكورسات ── */
body.site .course-cover { overflow: hidden; }
.course-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.course-art .art-curve { stroke-dasharray: 900; stroke-dashoffset: 0; filter: drop-shadow(0 0 6px rgba(255, 77, 106, .6)); }
body.site .course-card:hover .art-curve { animation: redraw 1.2s ease; }
@keyframes redraw { from { stroke-dashoffset: 900; } to { stroke-dashoffset: 0; } }
body.site .course-cover .chip { z-index: 1; }
.cover-badge { position: absolute; top: 10px; inset-inline-end: 10px; inset-inline-start: auto !important; }
body.site .course-card { will-change: transform; transform-style: preserve-3d; }
body.site .course-card .course-body h3 { font-size: 1.12rem; }
body.site .course-card .price:not(.free) { background: linear-gradient(135deg, #c8102e, #800020); padding: 2px 12px; border-radius: 999px; font-size: .95rem; }

/* ── كيف بتبلّش ── */
.steps-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; counter-reset: s; }
.steps-flow::before { content: ""; position: absolute; top: 34px; inset-inline: 16%; height: 2px; background: linear-gradient(90deg, transparent, #c8102e, transparent); opacity: .6; }
.steps-flow li { position: relative; text-align: center; padding: 0 12px 20px; }
.steps-flow b { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; font-size: 1.6rem; font-weight: 900; color: #fff; background: radial-gradient(circle at 30% 30%, #e0153a, #580016); box-shadow: 0 0 0 6px #121212, 0 0 0 7px rgba(255, 77, 106, .4), 0 10px 30px rgba(200, 16, 46, .45); margin-bottom: 14px; }
.steps-flow h3 { margin-bottom: 6px; }
.steps-flow p { color: var(--muted); margin: 0; }

/* ── الميزات ── */
body.site .feature-icon svg { width: 24px; height: 24px; }
body.site .features > div { padding: 20px; border-radius: 16px; transition: background .3s, transform .3s; }
body.site .features > div:hover { background: rgba(255, 255, 255, .03); transform: translateY(-4px); }

/* ── الأسئلة المتكررة ── */
.faq { display: grid; gap: 10px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 14px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color .3s; }
.faq details[open] { border-color: rgba(200, 16, 46, .55); }
.faq summary { cursor: pointer; list-style: none; padding: 16px 18px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex-shrink: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(200, 16, 46, .18); color: #ff6b81; font-size: 1.2rem; transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 18px 16px; color: var(--muted); }

/* ── شريط الدعوة الأخير ── */
.cta-band { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: 36px clamp(20px, 4vw, 48px); border-radius: 24px; background: radial-gradient(600px 200px at 85% 0%, rgba(255, 77, 106, .35), transparent 60%), linear-gradient(135deg, #3a0a14, #160709); border: 1px solid rgba(255, 77, 106, .3); box-shadow: 0 20px 60px rgba(128, 0, 32, .35); }
.cta-band::after { content: "∫ Σ π √ ∞"; position: absolute; inset-inline-start: 24px; bottom: -18px; font-size: 5rem; letter-spacing: .2em; color: rgba(255, 255, 255, .05); pointer-events: none; direction: ltr; font-family: "Times New Roman", serif; }
.cta-band h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 4px; }
.cta-band p { color: #e3c3c9; margin: 0; }

/* ── رأس الصفحات: شبكة رسم بياني ── */
body.site .page-head { position: relative; overflow: hidden; }
body.site .page-head::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 40px 40px; -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent); }
body.site .page-head > .container { position: relative; }
body.site .buy-box { border: 1px solid rgba(255, 77, 106, .3); box-shadow: 0 20px 50px rgba(0, 0, 0, .5), 0 0 40px rgba(128, 0, 32, .25); }
body.site .buy-price { font-size: 2.4rem; background: linear-gradient(45deg, #fff, #ff8094); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
body.site .unit summary { transition: background .2s; border-radius: 10px; }
body.site .unit summary:hover { background: rgba(255, 255, 255, .03); }
body.site .unit[open] { border-color: rgba(200, 16, 46, .35); }

/* ── أزرار: لمعة ── */
body.site .btn-primary, body.site .btn-accent { position: relative; overflow: hidden; }
body.site .btn-primary::after, body.site .btn-accent::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); transform: skewX(-20deg); transition: left .6s ease; pointer-events: none; }
body.site .btn-primary:hover::after, body.site .btn-accent:hover::after { left: 120%; }

/* ── الرسائل: بطاقات منبثقة ── */
body.site .flashes { position: fixed; top: 76px; inset-inline: 0; z-index: 60; display: grid; justify-items: center; gap: 8px; pointer-events: none; padding-top: 0; }
body.site .flashes .alert { pointer-events: auto; width: min(560px, calc(100% - 32px)); margin: 0; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 12px 40px rgba(0, 0, 0, .5); animation: toast-in .45s cubic-bezier(.2, .8, .2, 1) both; cursor: pointer; }
body.site .flashes .alert.out { animation: toast-out .35s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-16px) scale(.97); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-12px); } }

/* ── زر الرجوع لفوق ── */
.to-top { position: fixed; bottom: 22px; inset-inline-start: 22px; z-index: 45; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 77, 106, .4); background: rgba(20, 20, 20, .85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font-size: 1.2rem; cursor: pointer; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .3s, transform .3s, background .3s; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: #c8102e; }

/* ── الفوتر ── */
body.site .site-footer { position: relative; }
body.site .site-footer::before { content: ""; position: absolute; top: -1px; inset-inline: 0; height: 1px; background: linear-gradient(90deg, transparent, #c8102e, transparent); }
body.site .footer-links a { transition: color .2s, padding .2s; }
body.site .footer-links a:hover { color: #fff; padding-inline-start: 4px; text-decoration: none; }

@media (max-width: 860px) {
  .steps-flow { grid-template-columns: 1fr; gap: 8px; }
  .steps-flow::before { top: 34px; bottom: 60px; inset-inline: auto; inset-inline-start: 50%; width: 2px; height: auto; background: linear-gradient(transparent, #c8102e, transparent); }
  body.site .hero-glow { display: none; }
}
@media (max-width: 600px) {
  .cta-band { padding: 28px 20px; text-align: center; justify-content: center; }
  .cta-band .actions { width: 100%; flex-direction: column; }
  .cta-band .actions .btn { width: 100%; }
  .to-top { bottom: 16px; inset-inline-start: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-graph .draw { animation: none; stroke-dashoffset: 0; }
  body.site .hero-board::before, .pill i { animation: none; }
}

/* ── بطاقات الجامعات: اختصار الجامعة كشارة ── */
.program-icon.abbr { align-self: flex-start; display: inline-grid; place-items: center; min-width: 56px; height: 56px; padding: 0 12px; border-radius: 16px; font: 900 1.05rem/1 "Cairo", sans-serif; letter-spacing: .04em; color: #fff; direction: ltr;
  background: radial-gradient(circle at 30% 25%, #e0153a, #580016); box-shadow: 0 0 0 1px rgba(255, 77, 106, .45), 0 10px 26px rgba(200, 16, 46, .35); }
body.site .program-card:hover .program-icon.abbr { box-shadow: 0 0 0 1px #ff4d6a, 0 12px 32px rgba(200, 16, 46, .55); }
@media (max-width: 600px) {
  body.site .program-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  body.site .program-card { padding: 14px; gap: 4px; }
  body.site .program-card .program-name { font-size: .98rem; line-height: 1.4; }
  .program-icon.abbr { min-width: 44px; height: 44px; border-radius: 12px; font-size: .9rem; padding: 0 9px; }
}

/* ── صفحات الدخول ── */
body.site .auth-card { position: relative; border: 1px solid rgba(255, 77, 106, .25); box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 60px rgba(128, 0, 32, .2); }
body.site .auth-card::before { content: ""; position: absolute; inset: 0 20% auto; height: 2px; background: linear-gradient(90deg, transparent, #ff4d6a, transparent); }
.auth-icon { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 6px; border-radius: 22px; background: radial-gradient(circle at 30% 25%, rgba(224, 21, 58, .35), rgba(88, 0, 22, .35)); box-shadow: 0 0 0 1px rgba(255, 77, 106, .35); }
body.site .pw-toggle { color: #fff; }
body.site .pw-meter { background: rgba(255, 255, 255, .08); }
body.site .code-input { background: rgba(0, 0, 0, .35); border-color: rgba(255, 77, 106, .45); }
.secure-note { opacity: .75; }

/* ── لوحة الطالب ── */
.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dash-stats > div { padding: 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); display: grid; gap: 2px; }
.dash-stats b { font-size: 1.9rem; font-weight: 900; line-height: 1.1; background: linear-gradient(45deg, #fff, #ff8094); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.dash-stats span { color: var(--muted); font-size: .9rem; }
.resume { display: flex !important; align-items: center; gap: 16px; text-decoration: none !important; color: inherit; border: 1px solid rgba(255, 77, 106, .35) !important; background: linear-gradient(135deg, rgba(200, 16, 46, .18), rgba(255, 255, 255, .02)) !important; }
.resume > span:nth-child(2) { flex: 1; display: grid; }
.resume b { font-size: 1.1rem; }
.resume-play { flex-shrink: 0; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #e0153a, #580016); color: #fff; font-size: 1.1rem; box-shadow: 0 0 0 6px rgba(200, 16, 46, .15); animation: ping 2.2s infinite; }
body.site .my-courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
body.site .my-course { display: flex !important; align-items: center; gap: 16px; }
.my-course-body { display: grid; gap: 4px; min-width: 0; }
.my-course-body a { text-decoration: none; color: inherit; }
.ring { --p: 0; flex-shrink: 0; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; text-decoration: none !important;
  background: conic-gradient(#ff4d6a calc(var(--p) * 1%), rgba(255, 255, 255, .08) 0); }
.ring span { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #161618; color: #fff; font-weight: 800; font-size: .95rem; }
.cert-chip, .cert-link { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: .88rem; color: #1a1200 !important; background: linear-gradient(135deg, #ffd56b, #e0a100); text-decoration: none !important; box-shadow: 0 6px 18px rgba(224, 161, 0, .3); }
.cert-link { margin: 10px 0 4px; }
.cert-link.pop { animation: pop .6s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }

/* ── ملاحظات الدرس ── */
.notes { margin-top: 18px; padding: 0 !important; }
.notes summary { cursor: pointer; padding: 14px 16px; font-weight: 700; display: flex; justify-content: space-between; gap: 10px; list-style: none; }
.notes summary::-webkit-details-marker { display: none; }
.notes textarea { display: block; width: calc(100% - 32px); margin: 0 16px 16px; resize: vertical; min-height: 110px; }

/* ── بحث الكورسات ── */
.course-filter { display: grid; gap: 12px; margin-bottom: 22px; }
.search-box { position: relative; display: block; max-width: 560px; }
.search-box span { position: absolute; inset-inline-start: 16px; top: 50%; transform: translateY(-50%); font-size: 1.3rem; opacity: .6; pointer-events: none; }
.search-box input { width: 100%; padding: 14px 46px 14px 16px; border-radius: 999px; font-size: 1rem; }
body.site .search-box input { background: rgba(255, 255, 255, .05); border: 1px solid var(--line); color: #fff; }
body.site .search-box input:focus { border-color: #ff4d6a; box-shadow: 0 0 0 4px rgba(200, 16, 46, .2); outline: 0; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chips button { cursor: pointer; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); color: inherit; font: inherit; font-size: .9rem; transition: all .2s; }
.filter-chips button:hover { border-color: rgba(255, 77, 106, .6); }
.filter-chips button.active { background: linear-gradient(135deg, #c8102e, #800020); border-color: transparent; color: #fff; }
.course-item { display: grid; }
.course-item[hidden] { display: none; }

/* ── الشهادة ── */
.cert-wrap { max-width: 1000px; }
.cert-actions { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 18px; }
.certificate { aspect-ratio: 1.414; padding: 18px; border-radius: 10px; color: #1b1b1b; font-family: "Cairo", "Tajawal", sans-serif;
  background: radial-gradient(circle at 15% 10%, rgba(200, 16, 46, .08), transparent 40%), radial-gradient(circle at 90% 95%, rgba(200, 16, 46, .1), transparent 45%), #fffdf8;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
.cert-border { height: 100%; border: 2px solid #c8102e; outline: 1px solid rgba(200, 16, 46, .35); outline-offset: -10px; border-radius: 6px; padding: clamp(18px, 4vw, 44px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; }
.cert-head { display: grid; justify-items: center; gap: 4px; }
.cert-head img { width: clamp(56px, 9vw, 96px); height: auto; }
.cert-kicker { font-size: clamp(1.4rem, 3.4vw, 2.4rem); font-weight: 900; color: #800020; letter-spacing: .02em; }
.cert-line { margin: 0; color: #555; font-size: clamp(.85rem, 1.6vw, 1.05rem); }
.cert-name { margin: 2px 0; font-size: clamp(1.6rem, 4.6vw, 3.1rem); font-weight: 900; color: #111; border-bottom: 2px solid rgba(200, 16, 46, .4); padding: 0 24px 4px; }
.cert-course { margin: 0; font-size: clamp(1.05rem, 2.6vw, 1.7rem); color: #c8102e; font-weight: 800; }
.cert-meta { margin: 0; color: #666; font-size: clamp(.8rem, 1.4vw, .95rem); }
.cert-foot { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 12px; margin-top: clamp(8px, 2.5vw, 26px); }
.cert-sign, .cert-code { display: grid; gap: 2px; font-size: clamp(.8rem, 1.5vw, 1rem); }
.cert-sign b { font-family: "Tajawal", serif; font-size: 1.15em; border-bottom: 1px solid #999; padding-bottom: 4px; }
.cert-sign span, .cert-code span { color: #777; font-size: .85em; }
.cert-code b { font-family: ui-monospace, monospace; letter-spacing: .08em; }
.cert-seal { width: clamp(56px, 9vw, 92px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 900 clamp(1.6rem, 4vw, 2.6rem)/1 "Times New Roman", serif;
  background: radial-gradient(circle at 30% 25%, #e0153a, #580016); box-shadow: 0 0 0 4px #fffdf8, 0 0 0 6px #c8102e, 0 10px 24px rgba(128, 0, 32, .4); }
.cert-verify { margin: clamp(4px, 1.6vw, 14px) 0 0; font-size: clamp(.65rem, 1.1vw, .8rem); color: #888; }
@media print {
  @page { size: A4 landscape; margin: 0; }
  body.site { background: #fff !important; }
  body.site > *:not(main), .no-print, .site-header, .site-footer, .to-top, .flashes, canvas, .scroll-progress { display: none !important; }
  .cert-wrap { padding: 0 !important; margin: 0 !important; max-width: none; }
  .certificate { width: 297mm; height: 210mm; aspect-ratio: auto; box-shadow: none; border-radius: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (max-width: 760px) {
  .dash-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dash-stats > div { padding: 14px; }
  .dash-stats b { font-size: 1.5rem; }
  .resume { flex-wrap: wrap; }
  .resume .btn { width: 100%; }
  .certificate { padding: 8px; aspect-ratio: auto; }
  .cert-border { padding: 26px 14px; }
  .cert-border { gap: 3px; outline-offset: -6px; }
}

/* ── أدوات الهيدر: زر الوضع + زر القائمة ── */
.nav .brand { order: 0; }
.nav .nav-links { order: 1; }
.nav .nav-tools { order: 2; display: flex; align-items: center; gap: 8px; }
.theme-toggle { position: relative; width: 42px; height: 42px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); color: #fff; cursor: pointer; overflow: hidden; font-size: 1.15rem; line-height: 1; transition: background .25s, border-color .25s, transform .25s; }
.theme-toggle:hover { border-color: #ff4d6a; transform: rotate(-12deg); }
.theme-toggle span { position: absolute; inset: 0; display: grid; place-items: center; transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
.theme-toggle .i-moon { transform: translateY(120%) rotate(-90deg); opacity: 0; }
[data-theme="light"] .theme-toggle .i-sun { transform: translateY(-120%) rotate(90deg); opacity: 0; }
[data-theme="light"] .theme-toggle .i-moon { transform: none; opacity: 1; }
.nav-toggle span { display: block; width: 22px; height: 2px; margin: 5px auto; border-radius: 2px; background: currentColor; transition: transform .3s, opacity .3s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.drawer-head, .nav-backdrop { display: none; }
.theme-switching, .theme-switching * { transition: background-color .4s ease, color .4s ease, border-color .4s ease !important; }

/* ── القائمة الجانبية على الموبايل: بتنفتح من الشمال ── */
@media (max-width: 860px) {
  body.site .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(18, 18, 18, .96); }
  .nav .nav-tools { margin-inline-start: auto; }
  body.site .nav-toggle { display: grid; place-content: center; margin: 0; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); }
  body.site .nav-links, body.site .nav-links.open {
    display: flex; position: fixed; inset-inline: auto; top: 0; bottom: 0; left: 0; right: auto; width: min(320px, 86vw); max-height: none; height: 100svh;
    z-index: 70; padding: 0 18px 24px; gap: 2px; overflow-y: auto; border: 0; border-right: 1px solid rgba(255, 77, 106, .3);
    background: linear-gradient(180deg, #1a0a0e, #121212 40%); box-shadow: 20px 0 60px rgba(0, 0, 0, .6);
    transform: translateX(-105%); visibility: hidden; transition: transform .38s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .38s;
  }
  body.site .nav-links.open { transform: none; visibility: visible; transition: transform .38s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
  .drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 64px; margin: 0 -18px 10px; padding: 0 18px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .drawer-close { width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); color: inherit; font-size: 1.05rem; cursor: pointer; }
  .nav-links.open > a:not(.btn) { animation: drawer-in .4s cubic-bezier(.2, .8, .2, 1) both; }
  .nav-links.open > a:nth-of-type(2) { animation-delay: .05s; }
  .nav-links.open > a:nth-of-type(3) { animation-delay: .1s; }
  @keyframes drawer-in { from { opacity: 0; transform: translateX(-18px); } }
  .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .3s; }
  body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }
}
body.nav-open .to-top { display: none; }
.brand-name { font-weight: 800; letter-spacing: .01em; white-space: nowrap; }

/* ── كوبونات، تقييمات، إعلانات، واتساب ── */
.coupon-box { margin-bottom: 18px; }
.coupon-form label { display: block; font-weight: 600; margin-bottom: 8px; }
.coupon-row { display: flex; gap: 8px; }
.coupon-row input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; }
.old-price { font-size: .7em; margin-inline-end: 6px; }

.stars { color: #f5b301; letter-spacing: 1px; white-space: nowrap; }
.stars-off { color: rgba(160, 160, 160, .35); }
.stars-admin { color: #e0a100; }
.card-rating { color: #f5b301; font-weight: 700; }
.card-rating small { color: var(--muted, #888); font-weight: 400; }
.head-rating { display: inline-flex; align-items: center; gap: 6px; color: inherit; }
.head-rating:hover { text-decoration: none; }
.rating-summary { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.rating-summary > b { font-size: 2.6rem; line-height: 1; }
.rating-summary .stars { font-size: 1.3rem; }
.review-form { display: grid; gap: 10px; margin-bottom: 16px; }
.star-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; direction: ltr; width: max-content; }
.star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-input label { font-size: 2rem; line-height: 1; color: rgba(160, 160, 160, .4); cursor: pointer; transition: color .15s, transform .15s; }
.star-input label:hover, .star-input label:hover ~ label, .star-input input:checked ~ label { color: #f5b301; }
.star-input label:hover { transform: scale(1.15); }
.star-input input:focus-visible + label { outline: 2px solid #c8102e; border-radius: 4px; }
.reviews { display: grid; gap: 12px; }
.review p { margin: 8px 0; }

.announcements { display: grid; gap: 10px; }
.announcements .section-title { margin-bottom: 4px; }
.announcement { border-inline-start: 3px solid #c8102e; }
.announcement summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; list-style: none; flex-wrap: wrap; }
.announcement summary::-webkit-details-marker { display: none; }
.announcement .prose { margin-top: 10px; }

.wa-float { position: fixed; bottom: 22px; inset-inline-end: 22px; z-index: 46; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; box-shadow: 0 8px 24px rgba(37, 211, 102, .35); transition: transform .25s, box-shadow .25s; animation: wa-pop .5s ease .8s both; }
.wa-float:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 30px rgba(37, 211, 102, .5); text-decoration: none; }
.wa-float::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: wa-ring 2.4s ease-out infinite; }
.wa-tip { position: absolute; inset-inline-end: 66px; white-space: nowrap; background: rgba(20, 20, 20, .9); color: #fff; font-size: .85rem; padding: 6px 12px; border-radius: 10px; opacity: 0; transform: translateX(-6px); pointer-events: none; transition: opacity .2s, transform .2s; }
.wa-float:hover .wa-tip { opacity: 1; transform: none; }
@keyframes wa-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes wa-ring { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(1.6); opacity: 0; } }
body.nav-open .wa-float { display: none; }
@media (prefers-reduced-motion: reduce) { .wa-float, .wa-float::after { animation: none; } }
@media (max-width: 600px) { .wa-float { width: 50px; height: 50px; bottom: 16px; inset-inline-end: 16px; } .wa-tip { display: none; } }

/* ── زر اللغة + الاتجاه من اليسار لليمين للإنجليزية ── */
.lang-toggle { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); color: #fff; font: 800 .95rem/1 "Cairo", sans-serif; letter-spacing: .02em; transition: border-color .25s, background .25s, transform .25s; }
.lang-toggle:hover { border-color: #ff4d6a; background: rgba(200, 16, 46, .18); text-decoration: none; transform: translateY(-2px); }
.lang-toggle[lang="ar"] { font-size: 1.15rem; }
html[dir="ltr"] .star-input { flex-direction: row-reverse; }
html[dir="ltr"] .wa-tip { transform: translateX(6px); }
html[dir="ltr"] body.site .course-card:hover::after { transform: translateX(120%); }

/* ── شعار الجامعة خلف الاسم + صفحة الجامعة ── */
body.site .program-card { position: relative; overflow: hidden; isolation: isolate; }
.program-logo-bg { position: absolute; z-index: -1; inset: -14% 6%; background: center / contain no-repeat; opacity: .15; filter: grayscale(.15); transform: rotate(-6deg); transition: opacity .35s, transform .5s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
body.site .program-card:hover .program-logo-bg { opacity: .22; transform: rotate(-4deg) scale(1.06); }
.program-card.has-logo .program-name { text-shadow: 0 2px 12px rgba(0, 0, 0, .55); }

.uni-hero { position: relative; overflow: hidden; isolation: isolate; padding-block: 56px 40px; background: linear-gradient(to bottom, rgba(128, 0, 32, .32), transparent); }
.uni-hero.has-cover { padding-block: 120px 44px; }
.uni-hero-img { position: absolute; inset: 0; z-index: -2; background: center / cover no-repeat; transform: scale(1.04); animation: uni-zoom 14s ease-out both; }
.uni-hero.has-cover::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, #121212 4%, rgba(18, 18, 18, .72) 45%, rgba(60, 0, 16, .35)); }
.uni-hero-mark { position: absolute; z-index: -1; top: 50%; inset-inline-end: 4%; height: 110%; aspect-ratio: 1; max-width: 70vw; translate: 0 -50%; background: center / contain no-repeat; opacity: .1; pointer-events: none; }
.uni-hero .crumbs, .uni-hero .crumbs a { color: rgba(255, 255, 255, .75); }
.uni-id { display: flex; align-items: center; gap: 22px; margin-top: 14px; }
.uni-logo { flex: none; width: 112px; height: 112px; border-radius: 26px; display: grid; place-items: center; padding: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(255, 77, 106, .35), 0 18px 40px rgba(0, 0, 0, .45); }
.uni-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.uni-abbr { width: auto; min-width: 96px; height: 96px; font-size: 1.6rem; border-radius: 24px; }
.uni-id h1 { margin: 0; color: #fff; font-size: clamp(1.7rem, 4vw, 2.6rem); }
.uni-id .lead { margin: 6px 0 0; color: rgba(255, 255, 255, .82); }
.uni-stats { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.uni-stats span { padding: 4px 12px; border-radius: 999px; font-size: .85rem; font-weight: 700; color: #fff; background: rgba(200, 16, 46, .25); border: 1px solid rgba(255, 77, 106, .4); }
@keyframes uni-zoom { from { transform: scale(1.12); } }
@media (max-width: 600px) { .uni-id { flex-direction: column; align-items: flex-start; gap: 14px; } .uni-logo { width: 84px; height: 84px; border-radius: 20px; } .uni-hero.has-cover { padding-top: 90px; } }
@media (prefers-reduced-motion: reduce) { .uni-hero-img { animation: none; } }
[data-theme="light"] .uni-hero:not(.has-cover) { background: linear-gradient(to bottom, #ffe9ed, transparent); }
[data-theme="light"] .uni-hero:not(.has-cover) h1 { color: var(--ink, #1a1a1a); }
[data-theme="light"] .uni-hero:not(.has-cover) .lead, [data-theme="light"] .uni-hero:not(.has-cover) .crumbs, [data-theme="light"] .uni-hero:not(.has-cover) .crumbs a { color: #555; }
[data-theme="light"] .uni-hero:not(.has-cover) .uni-stats span { color: #a00d26; background: #fff; }
[data-theme="light"] .uni-hero.has-cover::after { background: linear-gradient(to top, rgba(18, 18, 18, .88) 10%, rgba(18, 18, 18, .55) 55%, rgba(60, 0, 16, .3)); }
[data-theme="light"] .program-logo-bg { opacity: .1; }

/* ── جرس الإشعارات ── */
.bell { position: relative; }
.bell-count { position: absolute; top: -6px; inset-inline-end: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #fff; color: #C8102E; font: 800 .72rem/20px "Cairo", sans-serif; text-align: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.bell.has-unread svg { animation: bell-ring 2.4s ease-in-out 1s 2; transform-origin: 50% 10%; }
@keyframes bell-ring { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(14deg); } 20%, 40% { transform: rotate(-12deg); } 50% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .bell.has-unread svg { animation: none; } }
@media (max-width: 440px) {
  .nav .nav-tools { gap: 5px; }
  body.site .nav-tools .lang-toggle, body.site .nav-tools .theme-toggle, body.site .nav-tools .nav-toggle { width: 34px; height: 34px; border-radius: 10px; }
  .nav-tools .bell svg { width: 18px; height: 18px; }
  body.site .nav-tools .nav-toggle span { width: 18px; margin: 4px auto; }
  body.site .nav-tools .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body.site .nav-tools .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .nav-tools .bell-count { min-width: 17px; height: 17px; line-height: 17px; font-size: .66rem; top: -5px; inset-inline-end: -5px; }
  body.site .site-header .brand { gap: 8px; }
  body.site .site-header .brand-name { font-size: .95rem; }
}
@media (max-width: 360px) { body.site .site-header .nav > .brand .brand-name { display: none; } }

.notif-list { display: grid; gap: 10px; max-width: 760px; }
.notif { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); color: inherit; transition: border-color .2s, transform .2s; }
a.notif:hover { text-decoration: none; border-color: rgba(255, 77, 106, .5); transform: translateY(-1px); }
.notif.unread { border-color: rgba(255, 77, 106, .45); background: rgba(200, 16, 46, .12); }
.notif-dot { flex: none; width: 10px; height: 10px; margin-top: 8px; border-radius: 50%; background: transparent; }
.notif.unread .notif-dot { background: #ff4d6a; box-shadow: 0 0 10px #ff4d6a; }
.notif-text { flex: 1; line-height: 1.8; }
.notif-time { font-size: .8rem; opacity: .65; }
[data-theme="light"] .notif { border-color: rgba(20, 20, 30, .1); background: #fff; }
[data-theme="light"] .notif.unread { background: #fff2f4; border-color: rgba(200, 16, 46, .35); }

/* ── أسئلة الدرس ── */
.lq { margin-top: 26px; }
.lq-form textarea { width: 100%; min-height: 90px; }
.lq-form .lq-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 8px; }
.lq-item { padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .035); margin-top: 12px; }
.lq-item.mine { border-color: rgba(255, 77, 106, .3); }
.lq-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .82rem; opacity: .75; margin-bottom: 6px; }
.lq-q { line-height: 1.9; white-space: pre-line; }
.lq-a { margin-top: 10px; padding: 10px 14px; border-inline-start: 3px solid #C8102E; background: rgba(200, 16, 46, .1); border-radius: 0 10px 10px 0; line-height: 1.9; white-space: pre-line; }
html[dir="ltr"] .lq-a { border-radius: 10px 0 0 10px; }
.lq-a b { display: block; font-size: .85rem; color: #ff6b82; margin-bottom: 2px; }
.lq-wait { margin-top: 8px; font-size: .85rem; opacity: .7; }
[data-theme="light"] .lq-item { background: #fff; border-color: rgba(20, 20, 30, .1); }
[data-theme="light"] .lq-a { background: #fff2f4; }
[data-theme="light"] .lq-a b { color: #a00d25; }

/* ── الباقات ── */
.bundles-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 18px; margin-bottom: 34px; }
.bundle-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 20px; color: inherit; border: 1px solid rgba(255, 77, 106, .35); background: radial-gradient(120% 90% at 100% 0, rgba(200, 16, 46, .35), transparent 60%), rgba(255, 255, 255, .04); transition: transform .3s, border-color .3s, box-shadow .3s; }
a.bundle-card:hover { text-decoration: none; transform: translateY(-4px); border-color: #ff4d6a; box-shadow: 0 18px 40px rgba(128, 0, 32, .35); }
.bundle-tag { align-self: flex-start; font-size: .78rem; font-weight: 800; padding: 3px 12px; border-radius: 999px; background: #C8102E; color: #fff; }
.bundle-card h3 { margin: 0; font-size: 1.25rem; }
.bundle-card ul { margin: 0; padding-inline-start: 18px; opacity: .85; line-height: 1.9; }
.bundle-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.bundle-price b { font-size: 1.5rem; }
.bundle-price s { opacity: .55; }
.bundle-save { font-size: .82rem; font-weight: 700; color: #7CE3A6; }
[data-theme="light"] .bundle-card { background: radial-gradient(120% 90% at 100% 0, rgba(200, 16, 46, .12), transparent 60%), #fff; }
[data-theme="light"] .bundle-save { color: #13804a; }
.bundle-hero { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
@media (max-width: 860px) { .bundle-hero { grid-template-columns: 1fr; } }
.bundle-courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 18px; }

/* ── ملفات المادة ── */
.res-list { display: grid; gap: 10px; }
.res-item { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); color: inherit; }
a.res-item:hover { text-decoration: none; border-color: rgba(255, 77, 106, .5); }
.res-icon { flex: none; display: grid; place-items: center; width: 44px; height: 52px; border-radius: 8px; background: linear-gradient(160deg, #C8102E, #800020); color: #fff; font: 800 .72rem/1 "Cairo", sans-serif; }
.res-item.locked .res-icon { background: rgba(255, 255, 255, .12); }
.res-main { flex: 1; min-width: 0; }
.res-main b { display: block; }
.res-meta { font-size: .8rem; opacity: .7; }
.res-act { flex: none; font-size: .85rem; font-weight: 700; }
[data-theme="light"] .res-item { background: #fff; border-color: rgba(20, 20, 30, .1); }
[data-theme="light"] .res-item.locked .res-icon { background: #d9d9de; color: #555; }
.subject-block { margin-top: 26px; }
.subject-block h3 { margin: 0 0 12px; }

/* ── التدريب على الأخطاء ── */
.practice-card { display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 20px 22px; border-radius: 18px; border: 1px solid rgba(255, 77, 106, .35); background: linear-gradient(110deg, rgba(200, 16, 46, .22), rgba(255, 255, 255, .03)); margin-block: 22px; }
.practice-card h3 { margin: 0 0 4px; }
.practice-card p { margin: 0; opacity: .8; }
[data-theme="light"] .practice-card { background: linear-gradient(110deg, #ffe8ec, #fff); }
.buy-bundle { display: block; margin-top: 12px; padding: 10px 12px; border-radius: 12px; border: 1px dashed rgba(255, 77, 106, .55); background: rgba(200, 16, 46, .1); font-size: .88rem; font-weight: 700; color: inherit; line-height: 1.7; }
.buy-bundle:hover { text-decoration: none; background: rgba(200, 16, 46, .2); }
[data-theme="light"] .buy-bundle { background: #fff2f4; }

/* ── مراسلة الأستاذ (واجهة الطالب) ── */
body.site .img-pick { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .04); color: inherit; }
body.site .img-pick:hover { border-color: #ff4d6a; }
body.site .img-preview img { border-color: rgba(255, 255, 255, .2); }
body.site .msg { background: rgba(255, 255, 255, .035); border-color: rgba(255, 255, 255, .1); }
body.site .msg-teacher { background: rgba(200, 16, 46, .12); border-color: rgba(255, 77, 106, .35); border-inline-start: 3px solid #C8102E; }
body.site .msg-meta { color: inherit; opacity: .7; }
body.site .msg-teacher .msg-meta b { color: #ff6b82; }
body.site .msg-img img { border-color: rgba(255, 255, 255, .15); }
[data-theme="light"] body.site .msg { background: #fff; border-color: rgba(20, 20, 30, .1); }
[data-theme="light"] body.site .msg-teacher { background: #fff2f4; border-color: rgba(200, 16, 46, .3); }
[data-theme="light"] body.site .msg-teacher .msg-meta b { color: #a00d25; }
[data-theme="light"] body.site .img-pick { border-color: rgba(20, 20, 30, .25); background: #fff; }
.lq-item .thread { margin: 0; }
.lq-private { float: inline-end; }
.lq-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.lq-foot .lq-wait { margin: 0; }
.ask-layout { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 900px) { .ask-layout { grid-template-columns: 1fr; } }
.ask-new textarea { width: 100%; }
.conv-list { display: grid; gap: 10px; }
.conv-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); color: inherit; }
a.conv-row:hover { text-decoration: none; border-color: rgba(255, 77, 106, .5); }
.conv-row.replied { border-inline-start: 3px solid #2fbf71; }
.conv-main { min-width: 0; display: grid; gap: 2px; }
.conv-main b { overflow-wrap: anywhere; font-weight: 600; }
.conv-topic { opacity: .65; }
.conv-state { display: grid; justify-items: end; gap: 4px; flex: none; }
[data-theme="light"] .conv-row { background: #fff; border-color: rgba(20, 20, 30, .1); }

/* لوحة الرموز (واجهة الطالب) */
body.site .math-bar { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14); }
body.site .math-tabs { border-color: rgba(255, 255, 255, .12); }
body.site .math-tabs button { color: inherit; opacity: .65; }
body.site .math-tabs button.on { opacity: 1; }
body.site .math-hint { color: inherit; opacity: .55; }
body.site .math-pad button { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: inherit; }
body.site .math-pad button:hover { border-color: #ff4d6a; background: rgba(200, 16, 46, .2); }
body.site .math-preview { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .18); }
[data-theme="light"] body.site .math-bar { background: #fafafa; border-color: rgba(20, 20, 30, .14); }
[data-theme="light"] body.site .math-pad button { background: #fff; border-color: rgba(20, 20, 30, .14); }
[data-theme="light"] body.site .math-pad button:hover { background: #fff2f4; }
[data-theme="light"] body.site .math-preview { background: #fff; border-color: rgba(20, 20, 30, .18); }