/* ملكاوي ماث: الثيم الداكن لواجهة الطلاب (خلفية رياضيات، زجاج، توهّج خمري)
   بيشتغل فوق app.css وبس على body.site، فلوحة التحكم ما بتتأثر. */
body.site {
  --navy: #121212;
  --navy-2: #1e1e1e;
  --blue: #ff4d6a;
  --blue-soft: rgba(200, 16, 46, .16);
  --accent: #c8102e;
  --accent-ink: #fff;
  --maroon: #800020;
  --maroon-dark: #580016;
  --glow: #ff0040;
  --silver: #c0c0c0;
  --on-dark: #d0d0d0;
  --bg: #121212;
  --card: rgba(30, 30, 30, .62);
  --card-solid: #1c1c1c;
  --ink: #ffffff;
  --muted: #b0b0b0;
  --line: rgba(255, 255, 255, .1);
  --ok: #3ddc84;
  --ok-soft: rgba(61, 220, 132, .13);
  --bad: #ff6b6b;
  --bad-soft: rgba(255, 107, 107, .13);
  --radius: 16px;
  --shadow: 0 8px 32px rgba(0, 0, 0, .37);
  --f-body: "Cairo", "Tajawal", system-ui, "Segoe UI", Tahoma, sans-serif;
  --f-display: "Cairo", "Tajawal", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
}
body.site h1, body.site h2 { font-weight: 800; }

/* خلفية الرياضيات المتحركة */
.math-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .55; }
.math-bg canvas { display: block; width: 100%; height: 100%; }
body.site > main, body.site > footer, body.site > .flashes { position: relative; z-index: 1; }
body.site > .site-header { position: sticky; top: 0; z-index: 40; }
body.calm .math-bg { display: none; }

/* زجاج */
body.site .card, body.site .program-card, body.site .course-card, body.site .exam-row, body.site .unit,
body.site .buy-box, body.site .facts div, body.site .step, body.site .locked-box, body.site .empty, body.site .kpi {
  background: var(--card);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
body.site .program-card, body.site .course-card, body.site .exam-row {
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
body.site .program-card:hover, body.site .course-card:hover, body.site .exam-row:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 14px 40px rgba(128, 0, 32, .35);
}
body.site .course-card { position: relative; }
body.site .course-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.08) 45%, transparent 60%);
  transform: translateX(120%); transition: transform .8s ease;
}
body.site .course-card:hover::after { transform: translateX(-120%); }
body.site .course-cover { background: linear-gradient(135deg, #2a0a10, #161616); }
body.site .cover-sym { color: var(--accent); opacity: .85; text-shadow: 0 0 24px rgba(255, 0, 64, .5); transition: transform .4s ease; }
body.site .course-card:hover .cover-sym { transform: scale(1.12) rotate(-4deg); }
body.site .program-icon { filter: drop-shadow(0 0 10px rgba(255, 0, 64, .35)); }

/* أزرار */
body.site .btn { border-radius: 10px; font-weight: 700; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease; }
body.site .btn-primary, body.site .btn-accent {
  background: linear-gradient(135deg, var(--accent), var(--maroon));
  color: #fff; box-shadow: 0 4px 15px rgba(128, 0, 32, .45);
}
body.site .btn-primary:hover, body.site .btn-accent:hover { background: linear-gradient(135deg, #e0153a, var(--maroon)); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(200, 16, 46, .55); }
body.site .btn-outline, body.site .btn-outline-light { background: transparent; border: 2px solid var(--accent); color: #fff; }
body.site .btn-outline:hover, body.site .btn-outline-light:hover { background: var(--accent); transform: translateY(-2px); }
body.site .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .22); }
body.site .btn-ghost:hover { background: rgba(255, 255, 255, .08); }
body.site .btn-link { color: var(--muted); }
.glow { animation: pulse-glow 2.2s infinite; }
@keyframes pulse-glow {
  0% { box-shadow: 0 0 0 0 rgba(200, 16, 46, .7); }
  70% { box-shadow: 0 0 0 12px rgba(200, 16, 46, 0); }
  100% { box-shadow: 0 0 0 0 rgba(200, 16, 46, 0); }
}

/* الهيدر: زجاج شفاف وبصير أغمق مع النزول */
body.site .site-header { background: rgba(18, 18, 18, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: background .3s ease, box-shadow .3s ease, border-color .3s ease; }
body.site .site-header.scrolled { background: rgba(18, 18, 18, .95); box-shadow: 0 4px 20px rgba(0, 0, 0, .5); border-color: rgba(255, 255, 255, .06); }
body.site .brand-mark { background: transparent; padding: 0; }
body.site .nav-links > a:not(.btn) { position: relative; font-weight: 600; }
body.site .nav-links > a:not(.btn)::after { content: ""; position: absolute; inset-inline: 12px; bottom: 2px; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform .3s ease; }
body.site .nav-links > a:not(.btn):hover::after, body.site .nav-links > a.active::after { transform: scaleX(1); }
body.site .nav-links > a:not(.btn):hover, body.site .nav-links > a.active { background: transparent; }
.scroll-progress { position: fixed; top: 0; inset-inline: 0; height: 3px; z-index: 50; background: linear-gradient(90deg, var(--maroon), var(--glow)); transform-origin: right; transform: scaleX(0); pointer-events: none; }
@media (max-width: 860px) {
  body.site .nav-links { background: rgba(18, 18, 18, .98); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom: 1px solid var(--line); }
}

/* الهيرو */
body.site .hero {
  position: relative; overflow: hidden; background: radial-gradient(circle at 50% 40%, #2a0a10 0%, transparent 70%);
  min-height: calc(100svh - 64px); display: flex; flex-direction: column; justify-content: center; padding-block: 48px 0;
}
body.site .hero h1 {
  font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.25;
  background: linear-gradient(45deg, #fff 40%, #ff4d6a);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 22px rgba(128, 0, 32, .55));
}
body.site .hero .lead { color: var(--silver); font-size: 1.2rem; }
body.site .hero-grid, body.site .hero .stats { position: relative; z-index: 2; }
body.site .hero > .container { width: 100%; }
.math-symbol { position: absolute; z-index: 1; font-size: 3rem; color: rgba(200, 16, 46, .28); pointer-events: none; font-family: "Times New Roman", serif; animation: float 6s ease-in-out infinite; user-select: none; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
body.site .hero-board { background: rgba(20, 20, 20, .6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 0, 64, .25); box-shadow: 0 0 40px rgba(128, 0, 32, .35), inset 0 0 30px rgba(128, 0, 32, .15); }
body.site .stats { background: var(--line); border: 1px solid var(--line); border-bottom: 0; }
body.site .stats div { background: rgba(26, 26, 26, .85); }
body.site .stats b { color: #fff; text-shadow: 0 0 18px rgba(255, 0, 64, .45); }

body.site .section-title { font-size: clamp(1.5rem, 3vw, 2.1rem); position: relative; padding-bottom: 10px; }
body.site .section-title::after { content: ""; position: absolute; bottom: 0; inset-inline-start: 0; width: 56px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--glow), var(--maroon)); }

body.site .band { background: rgba(30, 30, 30, .45); border-color: var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
body.site .feature-icon { width: 52px; height: 52px; font-size: 1.3rem; border-radius: 14px; background: linear-gradient(135deg, var(--accent), var(--maroon)); color: #fff; box-shadow: 0 6px 20px rgba(128, 0, 32, .5); }
body.site .teacher-photo { background: linear-gradient(135deg, #2a0a10, #121212); border: 2px solid var(--accent); box-shadow: 0 0 40px rgba(200, 16, 46, .35); }

body.site .page-head { background: linear-gradient(to bottom, rgba(128, 0, 32, .28), transparent); padding-block: 56px 36px; }
body.site .page-head h1 { color: #fff; }

/* نصوص وشارات */
body.site .eyebrow { color: #ff6b81; }
body.site .chip { background: var(--blue-soft); color: #ff8094; }
body.site .chip-free { background: rgba(40, 167, 69, .18); color: #5be27f; }
body.site .chip-muted, body.site .status-cancelled { background: rgba(255, 255, 255, .08); color: var(--muted); }
body.site .chip-dark { background: rgba(0, 0, 0, .7); }
body.site .status-awaiting_review, body.site .diff-medium { background: rgba(242, 165, 22, .16); color: #ffc65c; }
body.site .status-pending { background: rgba(255, 255, 255, .08); color: #ddd; }
body.site .price { color: #fff; }
body.site .alert-success { background: var(--ok-soft); border-color: rgba(61, 220, 132, .35); color: #8ef0b5; }
body.site .alert-error { background: var(--bad-soft); border-color: rgba(255, 107, 107, .35); color: #ffb0b0; }
body.site .alert-info { background: rgba(255, 255, 255, .06); border-color: var(--line); color: #e6e6e6; }
body.site .progress { background: rgba(255, 255, 255, .1); }
body.site .progress i { background: linear-gradient(90deg, var(--maroon), var(--glow)); }

/* نماذج */
body.site input:not([type=checkbox]):not([type=radio]):not([type=file]), body.site select, body.site textarea { background: rgba(10, 10, 10, .6); border-color: rgba(255, 255, 255, .14); color: #fff; }
body.site select option { background: #1c1c1c; color: #fff; }
body.site input::placeholder, body.site textarea::placeholder { color: #777; }
body.site input:focus, body.site select:focus, body.site textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200, 16, 46, .25); }
body.site input:disabled { background: rgba(255, 255, 255, .04); }
body.site input[type=file] { color: var(--muted); }
body.site fieldset { border-color: var(--line); }

/* صفحة الكورس والدروس والامتحان */
body.site .lesson-list li:hover, body.site .side-lessons a:hover { background: rgba(255, 255, 255, .05); }
body.site .learn-side { background: var(--card-solid); }
body.site .side-lessons .current a { background: var(--blue-soft); color: #ff8094; }
body.site .player { box-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
body.site .exam-bar { background: rgba(18, 18, 18, .95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
body.site .timer { background: #2a0a10; border: 1px solid rgba(255, 0, 64, .35); }
body.site .timer.low { background: var(--accent); }
body.site .option { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .02); transition: border-color .2s, background .2s; }
body.site .option:hover { border-color: rgba(200, 16, 46, .6); }
body.site .explain, body.site .preview { background: rgba(255, 255, 255, .05); }
body.site .result-hero.pass { background: var(--ok-soft); color: #8ef0b5; }
body.site .result-hero.fail { background: var(--bad-soft); color: #ffb0b0; }
body.site .table th { background: rgba(255, 255, 255, .04); }
body.site .step b { background: rgba(255, 255, 255, .08); }
body.site .copy { border-bottom-color: var(--blue); }
body.site .error-code { color: rgba(200, 16, 46, .4); text-shadow: 0 0 30px rgba(255, 0, 64, .4); }

body.site .site-footer { background: rgba(22, 22, 22, .92); border-top: 1px solid var(--line); }
body.site .copyright { border-color: var(--line); }

/* حركات الظهور مع النزول (JS بضيف .reveal بس لما الحركة مسموحة) */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }
.hero-in > * { animation: hero-up .9s cubic-bezier(.2, .7, .2, 1) both; }
.hero-in > *:nth-child(2) { animation-delay: .12s; }
.hero-in > *:nth-child(3) { animation-delay: .24s; }
.hero-in > *:nth-child(4) { animation-delay: .36s; }
@keyframes hero-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.board-line.write { animation: write-in 1s ease both; }
@keyframes write-in { from { opacity: 0; transform: translateX(-24px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

@media (prefers-reduced-motion: reduce) {
  .math-symbol, .glow, .hero-in > *, .board-line.write { animation: none !important; }
  .math-bg { display: none; }
}
@media (max-width: 860px) { .math-symbol { font-size: 2rem; } }

/* ── الموبايل ── */
body.site .hero .stats { padding-inline: 0; width: calc(100% - 32px); max-width: 1148px; border-radius: 16px 16px 0 0; }
body.site h2.section-title:not(:first-child) { margin-top: 32px; }
@media (max-width: 860px) {
  body.site .nav-links { top: 64px; padding: 8px 16px 18px; gap: 2px; box-shadow: 0 18px 40px rgba(0, 0, 0, .6); max-height: calc(100svh - 64px); overflow-y: auto; }
  body.site .nav-links > a:not(.btn) { padding: 12px 6px; font-size: 1.05rem; border-bottom: 1px solid rgba(255, 255, 255, .06); }
  body.site .nav-links > a:not(.btn)::after { display: none; }
  body.site .nav-links > a.active { color: #ff6b81; }
  body.site .nav-links .btn { margin-top: 10px; padding-block: 11px; }
  body.site .nav-links form { display: block; text-align: center; margin-top: 4px; }
  body.site .nav-toggle { width: 44px; height: 44px; border-radius: 10px; }
  body.site .nav-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, .08); }
}
@media (max-width: 600px) {
  body.site .section { padding-block: 28px; }
  body.site .hero { min-height: auto; padding-top: 40px; text-align: center; }
  body.site .hero .eyebrow, body.site .hero .lead { margin-inline: auto; }
  body.site .hero h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  body.site .hero .lead { font-size: 1.02rem; }
  body.site .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  body.site .hero-actions .btn { width: 100%; }
  body.site .hero .stats { margin-top: 36px; }
  body.site .stats div { padding: 14px 8px; }
  body.site .stats b { font-size: 1.5rem; }
  body.site .section-title { font-size: 1.45rem; }
  body.site .features { gap: 22px; padding-block: 32px; }
  body.site .features > div { display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; align-items: start; }
  body.site .features .feature-icon { grid-row: span 2; margin: 0; }
  body.site .features h3 { margin: 4px 0 2px; }
  body.site .teacher-strip { flex-direction: column; text-align: center; gap: 16px; }
  body.site .teacher-strip .teacher-photo { margin-inline: auto; width: 120px; height: 120px; }
  body.site .page-head { padding-block: 36px 24px; }
  body.site .course-meta { gap: 8px 12px; }
  body.site .buy-box { padding: 18px; }
  body.site .auth { padding-block: 24px; }
  body.site .auth .card { padding: 20px 16px; }
  body.site .footer-grid { text-align: center; gap: 18px; padding-block: 28px 20px; }
  body.site .footer-grid .brand { justify-content: center; }
  body.site .footer-links { justify-items: center; }
  body.site .copyright { text-align: center; }
  body.site .learn-actions { flex-direction: column-reverse; align-items: stretch; }
  body.site .learn-actions .btn { width: 100%; }
  body.site .exam-row { flex-wrap: wrap; }
  .math-symbol { opacity: .7; }
}