:root {
  /* Brand colors (constant in both themes) */
  --primary: #13345F;       /* Brand Navy */
  --primary-dark: #002050;  /* Deep Navy */
  --royal: #1450C8;         /* Royal Blue */
  --secondary: #1060F0;     /* Electric Blue */

  /* Semantic tokens — LIGHT theme */
  --bg: #ffffff;            /* page background */
  --surface: #ffffff;       /* cards, navbar, tables */
  --surface-alt: #f3f6fb;   /* alternating sections, soft fills */
  --text: #002050;          /* main text */
  --muted: #5b6678;         /* secondary text */
  --border: #e6e8ef;        /* hairlines */
  --accent: #13345F;        /* accent text/borders (readable on bg) */
  --navbar-bg: rgba(255, 255, 255, .72);
  --input-bg: #ffffff;
  --input-border: #d8d6e6;
  --tag-bg: #eef2fb;
  --footer-bg: #002050;

  --radius: 14px;
  --shadow: 0 10px 30px rgba(19, 52, 95, 0.14);
  --font: 'Cairo', 'Segoe UI', system-ui, sans-serif;
  color-scheme: light;
}

/* ── DARK theme ─────────────────────────────────────────────── */
html[data-theme="dark"] {
  --bg: #0a0f1f;
  --surface: #121a30;
  --surface-alt: #0e1526;
  --text: #e8edf7;
  --muted: #9aa7c2;
  --border: #243352;
  --accent: #5b9bff;        /* brighter blue stays readable on dark */
  --navbar-bg: rgba(17, 24, 45, .58);
  --input-bg: #0e1730;
  --input-border: #2a3a5c;
  --tag-bg: #18233d;
  --footer-bg: #060b18;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  transition: background-color .25s ease, color .25s ease;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

.container {
  width: min(1140px, 92%);
  margin-inline: auto;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  border: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--royal) 55%, var(--secondary));
  color: #fff;
  box-shadow: var(--shadow);
}
.btn-primary:hover { transform: translateY(-2px); }
.btn-ghost {
  background: transparent;
  border: 2px solid var(--accent);
  color: var(--accent);
}

/* Navbar — modern floating pill */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(1180px, 94%);
  margin: 16px auto 0;
  padding: 8px 14px;
  position: sticky;
  top: 14px;
  background: var(--navbar-bg);
  backdrop-filter: blur(12px);
  z-index: 50;
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 12px 34px rgba(13, 26, 73, 0.12);
}
.navbar .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; color: var(--accent); padding-inline: 8px; }
.navbar .brand img { height: 44px; width: auto; }
/* Logo swaps with the theme: dark logo on light bg, light logo on dark bg */
.logo-on-dark { display: none; }
html[data-theme="dark"] .logo-on-light { display: none; }
html[data-theme="dark"] .logo-on-dark { display: block; }
.nav-links { display: flex; align-items: center; gap: 26px; list-style: none; }
.nav-links a { font-weight: 600; }
.nav-links a:hover { color: var(--accent); }
#langToggle {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 700;
  cursor: pointer;
}
.nav-toggle { display: none; background: none; border: none; font-size: 26px; cursor: pointer; color: var(--text); }

/* Theme toggle */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  width: 38px; height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  transition: background .15s ease;
}
.theme-toggle:hover { background: var(--surface-alt); }

/* Hero */
.hero {
  /* Background art is picked per language + theme (rules below). Each image is
     already oriented so the laptop sits on the side OPPOSITE the text. */
  background-color: #e9f0fb;
  background-image: url('/assets/images/AR_Light_background.png');
  /* "contain" + side positioning keeps the artwork on its own half (no
     stretching over the text). The empty half is the matching bg colour,
     which blends with the image's faded edge so there's no visible seam. */
  background-size: contain;
  background-position: right center;   /* artwork side (Arabic = right) */
  background-repeat: no-repeat;
  color: #0a1f3c;                /* light theme: dark navy text */
  /* Fill the whole viewport in BOTH languages, so opening the page shows only
     the hero (no white section peeking) until you scroll — and the contained
     artwork renders identically regardless of heading length. */
  padding: 96px 0 40px;
  margin-top: -78px;   /* pull hero up behind the floating navbar */
  min-height: 100vh;
  display: flex;
  align-items: center;
}
html[dir="ltr"] .hero            { background-image: url('/assets/images/EN_Light_background.png'); background-position: left center; }
html[data-theme="dark"] .hero    { background-color: #061233; color: #fff; background-image: url('/assets/images/AR_Dark_background.png'); }
html[data-theme="dark"][dir="ltr"] .hero { background-image: url('/assets/images/EN_Dark_background.png'); }

/* Wash on the text side only — keeps the text crisp and lets the artwork
   stay fully visible on its side (fades to transparent before it). */
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
html[dir="rtl"] .hero::before { background: linear-gradient(90deg,  #e9f0fb 0%, rgba(233,240,251,.92) 30%, rgba(233,240,251,0) 52%); }
html[dir="ltr"] .hero::before { background: linear-gradient(270deg, #e9f0fb 0%, rgba(233,240,251,.92) 30%, rgba(233,240,251,0) 52%); }
html[data-theme="dark"][dir="rtl"] .hero::before { background: linear-gradient(90deg,  #061233 0%, rgba(6,18,51,.92) 30%, rgba(6,18,51,0) 52%); }
html[data-theme="dark"][dir="ltr"] .hero::before { background: linear-gradient(270deg, #061233 0%, rgba(6,18,51,.92) 30%, rgba(6,18,51,0) 52%); }
.hero h1 { font-size: clamp(30px, 5vw, 52px); font-weight: 800; margin-bottom: 16px; }
.hero p { font-size: clamp(16px, 2.2vw, 20px); opacity: .95; max-width: 640px; margin: 0 auto 28px; }

/* Sections */
section { padding: 72px 0; }
.section-title { text-align: center; margin-bottom: 12px; font-size: 32px; font-weight: 800; color: var(--text); }
.section-sub { text-align: center; color: var(--muted); margin-bottom: 44px; }

/* About */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.about-grid img { border-radius: var(--radius); box-shadow: var(--shadow); }
.about-anim {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: #04081c;
  display: block;
}

/* Stats */
.stats { background: var(--surface-alt); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; text-align: center; }
.stat .num { font-size: 40px; font-weight: 800; color: var(--accent); }
.stat .label { color: var(--muted); font-weight: 600; }

/* Courses grid */
.courses-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; }
.course-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform .15s ease;
}
.course-card:hover { transform: translateY(-4px); }
/* 12px matches .cd-media on the course detail page. */
.course-card .thumb { aspect-ratio: 16/9; background: var(--surface-alt) center/cover; border-radius: 12px; }
.course-card .body { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.course-card h3 { font-size: 19px; }
.tag { background: var(--tag-bg); color: var(--accent); padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
/* Pin the CTA to the card's bottom edge so every card in the row lines up,
   however long its title/description runs. */
.course-card .btn { margin-top: auto; text-align: center; }

/* Contact */
.contact { background: var(--surface-alt); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.contact-info p { margin-bottom: 10px; }
.contact-info strong { color: var(--accent); }
.social { display: flex; gap: 14px; margin-top: 16px; }
.social a { width: 42px; height: 42px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-weight: 700; }

/* Forms */
.form-card { max-width: 520px; margin: 40px auto; background: var(--surface); border: 1px solid var(--border); padding: 36px; border-radius: var(--radius); box-shadow: var(--shadow); }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-weight: 600; margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--input-border); border-radius: 10px;
  font-family: inherit; font-size: 15px; background: var(--input-bg); color: var(--text);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
.message { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-weight: 600; }
.message.success { background: #e7f9ee; color: #167a3e; }
.message.error { background: #fdecec; color: #c0392b; }
.hidden { display: none; }

/* Footer */
.footer { background: var(--footer-bg); color: #cfcde0; padding: 40px 0; text-align: center; }
.footer-links { display: flex; gap: 22px; justify-content: center; list-style: none; margin-bottom: 18px; flex-wrap: wrap; }
.footer-links a:hover { color: #fff; }

/* Detail page */
.detail-hero { background: var(--surface-alt); padding: 48px 0; }
.detail-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; }
.detail-grid img { border-radius: var(--radius); box-shadow: var(--shadow); }
.detail-card { background: var(--surface); border: 1px solid var(--border); padding: 28px; border-radius: var(--radius); box-shadow: var(--shadow); position: sticky; top: 90px; }
.detail-card .price { font-size: 30px; font-weight: 800; color: var(--accent); margin-bottom: 16px; }

/* Admin */
.admin-body { background: var(--surface-alt); min-height: 100vh; }
.admin-header { background: var(--surface); padding: 16px 0; border-bottom: 1px solid var(--border); box-shadow: 0 1px 6px rgba(0,0,0,.05); }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 20px; margin: 30px 0; }
.admin-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); text-align: center; }
.admin-stat .num { font-size: 36px; font-weight: 800; color: var(--accent); }
.admin-stat .label { color: var(--muted); }
/* Scroll container so wide tables never clip the action column. */
.table-wrap { width: 100%; overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow); -webkit-overflow-scrolling: touch; }
/* Content-sized columns (at least full width). Cells stay on one line so every
   row has the same height — the action buttons line up next to each person —
   and the table scrolls horizontally instead of squeezing the actions out. */
.table-wrap table { box-shadow: none; border-radius: 0; width: auto; min-width: 100%; }
.table-wrap th, .table-wrap td { white-space: nowrap; }
.table-wrap .row-actions { width: 1%; }
/* Student enrollments: one course per line with its cycle/group badge. */
.enr-cell { white-space: normal; }
.enr-line { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.enr-line + .enr-line { border-top: 1px dashed var(--border); }
.enr-course { font-weight: 600; }
.enr-cell .cycle-badge { font-size: 12px; }
table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
th, td { padding: 14px 16px; text-align: start; border-bottom: 1px solid var(--border); font-size: 14px; vertical-align: middle; }
th { background: var(--primary); color: #fff; font-weight: 700; white-space: nowrap; }
tbody tr { transition: background .12s ease; }
tbody tr:nth-child(even) { background: rgba(19, 52, 95, .025); }
tbody tr:hover { background: var(--surface-alt); }
tbody tr:last-child td { border-bottom: none; }
html[data-theme="dark"] tbody tr:nth-child(even) { background: rgba(255, 255, 255, .03); }

/* Row action buttons: vertically centered, uniform size across every table. */
.row-actions { white-space: nowrap; text-align: end; }
.row-actions > * { vertical-align: middle; }
.row-actions > * + * { margin-inline-start: 8px; }
.row-actions .btn-soft, .row-actions .btn-danger, .row-actions .btn-confirm, .row-actions .btn-sm {
  height: 34px; padding: 0 14px; font-size: 13px; font-weight: 700; border-radius: 8px;
  display: inline-flex; align-items: center; gap: 6px;
}
.panel { margin: 30px 0; }
.panel h2 { margin-bottom: 14px; }
.btn-danger { background: #e74c3c; color: #fff; padding: 6px 14px; border-radius: 8px; border: none; cursor: pointer; font-weight: 700; }

/* Admin extras: filters, cycles, discount, edit */
.btn-sm { padding: 6px 14px; font-size: 13px; }
.btn-soft { background: var(--surface-alt); color: var(--accent); border: 1px solid var(--border); border-radius: 8px; padding: 6px 14px; font-weight: 700; cursor: pointer; }
.btn-soft:hover { background: var(--tag-bg); }
.muted { color: var(--muted); }
.row-actions { display: flex; gap: 8px; white-space: nowrap; }

.filters { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; margin-bottom: 16px; }
.filter-group { display: flex; flex-direction: column; gap: 4px; }
.filter-group label { font-weight: 700; font-size: 13px; color: var(--muted); }
.filter-group select { padding: 8px 12px; border: 1px solid var(--input-border); border-radius: 8px; font-family: inherit; font-size: 14px; min-width: 220px; background: var(--input-bg); color: var(--text); }
.filter-count { margin-left: auto; align-self: center; color: var(--muted); font-weight: 700; }

.col-check { width: 40px; text-align: center; }
.cycle-badge { display: inline-block; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; padding: 3px 11px; border-radius: 999px; letter-spacing: .5px; }
.cycle-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--secondary); margin-inline-start: 4px; vertical-align: middle; }

.cycle-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px; background: var(--surface-alt); border-radius: 10px; }
.cycle-bar-label { font-weight: 700; }
.cycle-bar input { padding: 8px 12px; border: 1px solid var(--input-border); border-radius: 8px; font-family: inherit; font-size: 14px; width: 150px; background: var(--input-bg); color: var(--text); }
.cycle-bar-hint { margin-left: auto; color: var(--muted); font-weight: 700; }

.price-old { text-decoration: line-through; color: var(--muted); margin-inline-end: 6px; }
.price-now { color: var(--accent); font-weight: 800; }

.course-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-actions { display: flex; gap: 10px; margin-top: 8px; }

/* Modal (edit student) */
.modal-overlay { position: fixed; inset: 0; background: rgba(2, 8, 23, .55); display: grid; place-items: center; z-index: 100; padding: 20px; backdrop-filter: blur(2px); }
.modal-overlay[hidden] { display: none; }
.modal-card { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; width: min(440px, 100%); box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.modal-card h3 { margin-bottom: 18px; }

/* Admin dashboard — sidebar layout */
.admin-layout { width: min(1240px, 94%); margin: 24px auto 60px; display: flex; gap: 26px; align-items: flex-start; }
.admin-sidebar {
  flex: 0 0 220px; position: sticky; top: 90px;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow);
}
.admin-content { flex: 1; min-width: 0; }
.tab-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: start;
  background: transparent; border: none; padding: 12px 14px;
  font-weight: 700; font-size: 15px; color: var(--muted); cursor: pointer;
  border-radius: 10px; transition: color .15s ease, background .15s ease;
}
.tab-btn:hover { color: var(--text); background: var(--surface-alt); }
.tab-btn.active { color: #fff; background: linear-gradient(135deg, var(--primary), var(--royal)); }
.tab-ic { display: inline-flex; align-items: center; }
.tab-ic svg { display: block; }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeUp .35s ease both; }

@media (max-width: 760px) {
  .admin-layout { flex-direction: column; gap: 16px; }
  .admin-sidebar { position: static; flex-direction: row; overflow-x: auto; width: 100%; }
  .tab-btn { white-space: nowrap; width: auto; }
}

.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.panel-head h2 { font-size: 22px; }
.panel-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#studentSearch { padding: 9px 14px; border: 1px solid var(--input-border); border-radius: 10px; background: var(--input-bg); color: var(--text); font-family: inherit; font-size: 14px; min-width: 240px; }
.table-foot { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-weight: 700; margin-top: 12px; }
.panel-sub { margin-top: 34px; }
.panel-sub h3 { margin-bottom: 14px; }
.badge-count { background: var(--tag-bg); color: var(--accent); border: none; padding: 3px 12px; border-radius: 999px; font-weight: 800; font-size: 13px; cursor: pointer; }
button.badge-count:hover { filter: brightness(1.05); text-decoration: underline; }

/* Discounted price on public course cards / detail */
.c-old { text-decoration: line-through; color: var(--muted); font-size: .8em; font-weight: 600; margin-inline-end: 8px; }
.c-now { color: var(--accent); }

@media (max-width: 680px) { .course-form-grid { grid-template-columns: 1fr; } }

/* Button hover micro-interactions */
.btn, #langToggle, .theme-toggle, .btn-danger, .btn-soft, .social a, .nav-toggle, .nav-links a {
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease, filter .15s ease;
}
.btn-primary:hover { box-shadow: 0 12px 26px rgba(16, 96, 240, .38); }
.btn-ghost:hover { transform: translateY(-2px); background: var(--accent); color: #fff; }
#langToggle:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 8px 18px rgba(19, 52, 95, .28); }
.theme-toggle:hover { transform: translateY(-1px) rotate(-8deg); }
.btn-danger:hover { transform: translateY(-1px); filter: brightness(1.07); box-shadow: 0 8px 18px rgba(231, 76, 60, .35); }
.btn-soft:hover { transform: translateY(-1px); }
.social a:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(19, 52, 95, .32); }
.nav-links a:hover { transform: translateY(-1px); }
.btn:active, #langToggle:active, .theme-toggle:active, .btn-danger:active, .btn-soft:active, .social a:active { transform: translateY(0) scale(.97); }

@media (prefers-reduced-motion: reduce) {
  .btn, #langToggle, .theme-toggle, .btn-danger, .btn-soft, .social a, .nav-links a { transition: background .15s ease, color .15s ease; }
  .btn-primary:hover, .btn-ghost:hover, #langToggle:hover, .theme-toggle:hover, .btn-danger:hover, .btn-soft:hover, .social a:hover, .nav-links a:hover, .btn:active, #langToggle:active, .theme-toggle:active { transform: none; }
}

/* Floating WhatsApp button */
.wa-float {
  position: fixed; bottom: 22px; left: 22px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; display: grid; place-items: center;
  box-shadow: 0 10px 26px rgba(37, 211, 102, .45);
  transition: transform .15s ease, box-shadow .15s ease;
}
.wa-float:hover { transform: scale(1.08); box-shadow: 0 14px 32px rgba(37, 211, 102, .55); }
.wa-float svg { width: 30px; height: 30px; }
.wa-float::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); animation: waPulse 2.4s ease-out infinite;
}
@keyframes waPulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.5); } 70%,100% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } }
@media (prefers-reduced-motion: reduce) { .wa-float::after { animation: none; } }

/* ── Home polish & animations ───────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(19,52,95,.08); color: var(--accent);
  border: 1px solid rgba(19,52,95,.18);
  padding: 6px 14px; border-radius: 999px;
  font-weight: 700; font-size: 13px; margin-bottom: 18px;
  backdrop-filter: blur(4px);
}
html[data-theme="dark"] .eyebrow { background: rgba(255,255,255,.14); color: #eaf1ff; border-color: rgba(255,255,255,.28); }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: #4d8bff; box-shadow: 0 0 0 4px rgba(77,139,255,.25); }

.hero { position: relative; overflow: hidden; }
.hero .hero-content {
  position: relative; z-index: 2;
  display: flex; justify-content: flex-end;
  /* Span the full width and pad from the edge so the text hugs the empty side
     (left in Arabic, right in English) — well clear of the artwork. */
  width: 100%; max-width: none;
  padding-inline: clamp(24px, 6vw, 96px);
}
.hero-text {
  max-width: 520px;
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: start;
}
.hero-text .eyebrow { align-self: flex-start; }
.hero-text p { max-width: 100%; margin: 0 0 28px; opacity: .92; }
.hero-text .btn-primary { display: block; width: fit-content; }
.hero .blob { position: absolute; z-index: 1; border-radius: 50%; filter: blur(70px); opacity: .5; pointer-events: none; }
.hero .blob-1 { width: 420px; height: 420px; background: #1060F0; top: -130px; inset-inline-start: -90px; animation: floaty 14s ease-in-out infinite; }
.hero .blob-2 { width: 360px; height: 360px; background: #2f6bf0; bottom: -150px; inset-inline-end: -70px; animation: floaty 18s ease-in-out infinite reverse; }
@keyframes floaty { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(28px,-22px) scale(1.08); } }

@keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hero .eyebrow, .hero h1, .hero p, .hero .btn-primary { animation: fadeUp .7s ease both; }
.hero .eyebrow { animation-delay: .05s; }
.hero h1 { animation-delay: .18s; }
.hero p { animation-delay: .32s; }
.hero .btn-primary { animation-delay: .46s; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .1s; }
.reveal.d2 { transition-delay: .2s; }
.reveal.d3 { transition-delay: .3s; }

.feature-list { list-style: none; margin-top: 20px; display: grid; gap: 12px; }
.feature-list li { position: relative; padding-inline-start: 32px; font-weight: 600; }
.feature-list li::before {
  content: "✓"; position: absolute; inset-inline-start: 0; top: 1px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 12px;
  display: grid; place-items: center;
}

.courses-grid .course-card { animation: fadeUp .5s ease both; }
.courses-grid .course-card:nth-child(2) { animation-delay: .08s; }
.courses-grid .course-card:nth-child(3) { animation-delay: .16s; }
.courses-grid .course-card:nth-child(4) { animation-delay: .24s; }
.courses-grid .course-card:nth-child(5) { animation-delay: .32s; }
.courses-grid .course-card:nth-child(6) { animation-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero .eyebrow, .hero h1, .hero p, .hero .btn-primary, .courses-grid .course-card { animation: none; }
  .hero .blob { animation: none; }
}

@media (max-width: 820px) {
  .about-grid, .contact-grid, .detail-grid { grid-template-columns: 1fr; }
  .detail-card { position: static; }
  .nav-links { display: none; position: absolute; top: calc(100% + 10px); inset-inline: 0; flex-direction: column; align-items: stretch; gap: 14px; background: var(--surface); padding: 18px; border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); }
  .nav-links.open { display: flex; }
  .nav-toggle { display: block; }
  .hero { min-height: 92vh; padding: 120px 0 60px; }
  .hero .hero-content { justify-content: center; }
  .hero-text { max-width: 100%; }
  /* Text centers over the artwork on small screens — add a readability wash. */
  /* On phones the text centers over the art — use a full wash (same selectors
     as the desktop rules so these win by source order). */
  html[dir="rtl"] .hero::before, html[dir="ltr"] .hero::before { background: rgba(233, 240, 251, .8); }
  html[data-theme="dark"][dir="rtl"] .hero::before, html[data-theme="dark"][dir="ltr"] .hero::before { background: rgba(4, 10, 30, .76); }
  .profile-card { flex-direction: column; text-align: center; }
  .profile-info { align-items: center; }
  .material-row { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ── Student dashboard (sidebar layout) ─────────────────────────────────── */
.sdash-body { background: var(--bg); }
.sdash { display: flex; min-height: 100vh; }
.sdash-side {
  width: 256px; flex-shrink: 0; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; flex-direction: column; gap: 8px; padding: 20px 14px;
  position: sticky; top: 14px; height: calc(100vh - 28px); z-index: 40;
  /* Floating-card drawer (matches the floating navbar): breathing room off
     the screen edge on desktop — mirrors automatically in RTL. */
  margin: 14px;
}
.sdash-brand { display: flex; align-items: center; padding: 8px 8px 18px; }
.sdash-brand img { height: 40px; width: auto; }
.sdash-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.sdash-link, .sdash-logout {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; border: none; background: transparent; cursor: pointer;
  border-radius: 12px; font: inherit; font-weight: 700; font-size: 15px;
  color: var(--muted); text-align: start; transition: background .15s ease, color .15s ease;
}
.sdash-link svg, .sdash-logout svg { width: 20px; height: 20px; flex-shrink: 0; }
.sdash-link:hover { background: var(--surface-alt); color: var(--text); }
.sdash-link.active { background: linear-gradient(135deg, var(--primary), var(--royal)); color: #fff; box-shadow: 0 8px 20px rgba(19,52,95,.25); }
.sdash-logout { color: #c0392b; margin-top: auto; }
.sdash-logout:hover { background: rgba(192,57,43,.08); }

.sdash-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sdash-top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 16px;
  padding: 16px 26px; background: var(--navbar-bg); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.sdash-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--text); }
.sdash-toggle svg { width: 26px; height: 26px; }
.sdash-titlewrap { flex: 1; }
.sdash-title { font-size: 22px; font-weight: 800; color: var(--text); }
.sdash-date { font-size: 13px; }
.sdash-top-actions { display: flex; align-items: center; gap: 12px; }
.sdash-acct-wrap { position: relative; }
.sdash-acct { display: flex; align-items: center; gap: 8px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px 4px 4px; cursor: pointer; font-family: var(--font); color: var(--text); }
.sdash-acct:hover { background: var(--tag-bg); }
.sdash-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--tag-bg); }
.sdash-acctname { font-weight: 700; font-size: 14px; color: var(--text); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-caret { color: var(--muted); flex-shrink: 0; }
.sdash-acct-menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; min-width: 210px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 8px; display: flex; flex-direction: column; gap: 4px; z-index: 70; }
.sdash-acct-menu[hidden] { display: none; }
.acct-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; background: none; border: none; padding: 11px 12px; border-radius: 10px; font: inherit; font-weight: 700; font-size: 14px; color: var(--text); cursor: pointer; }
.acct-menu-item svg { width: 17px; height: 17px; flex-shrink: 0; }
.acct-menu-item:hover { background: var(--surface-alt); }
.acct-logout { color: #c0392b; }
.acct-logout:hover { background: rgba(192,57,43,.08); }

.sdash-content { padding: 28px 26px 60px; flex: 1; }
.sdash-view { display: none; }
.sdash-view.active { display: block; animation: fadeUp .4s ease both; }
.sdash-welcome { margin-bottom: 22px; }
.sdash-welcome h2 { font-size: 26px; font-weight: 800; color: var(--text); }
.sdash-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.sdash-head h2 { font-size: 22px; font-weight: 800; color: var(--text); }
.sdash-head h3 { font-size: 17px; font-weight: 800; color: var(--text); }

.sdash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; margin-bottom: 28px; }
.sdash-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; display: flex; align-items: center; gap: 16px; }
.sdash-stat .ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; }
.sdash-stat .ic svg { width: 22px; height: 22px; }
.sdash-stat .num { font-size: 26px; font-weight: 800; color: var(--text); line-height: 1.1; }
.sdash-stat .lbl { color: var(--muted); font-weight: 600; font-size: 14px; }
.ic-blue { background: #eaf1ff; color: #1450C8; } .ic-green { background: #e7f9ee; color: #167a3e; }
.ic-amber { background: #fff4e0; color: #b45309; } .ic-purple { background: #f0eafd; color: #6b3fd4; }
html[data-theme="dark"] .ic-blue { background: rgba(20,80,200,.22); color: #9cc0ff; }
html[data-theme="dark"] .ic-green { background: rgba(22,122,62,.22); color: #8ee0ab; }
html[data-theme="dark"] .ic-amber { background: rgba(180,83,9,.22); color: #f5b971; }
html[data-theme="dark"] .ic-purple { background: rgba(107,63,212,.22); color: #c5b0f5; }

.sdash-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; }
.sdash-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; }

/* Finance (student account) */
.fin-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fin-bar { height: 10px; border-radius: 999px; background: var(--surface-alt); border: 1px solid var(--border); overflow: hidden; }
.fin-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--royal), var(--secondary)); transition: width .4s ease; }
.fin-nums { font-size: 13px; margin-top: 8px; }
.fin-nums b { color: var(--text); }

/* Ticket status timeline */
.tk-line { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.tk-step { display: flex; align-items: center; gap: 7px; }
.tk-dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--surface-alt); border: 2px solid var(--border); color: transparent; flex-shrink: 0; }
.tk-step.done .tk-dot { background: #167a3e; border-color: #167a3e; color: #fff; }
.tk-lbl { font-size: 13px; font-weight: 700; color: var(--muted); }
.tk-step.done .tk-lbl { color: var(--text); }
.tk-bar { flex: 1; min-width: 28px; height: 3px; border-radius: 2px; background: var(--border); }
.tk-bar.done { background: #167a3e; }
.tk-reply { margin-top: 12px; background: var(--surface-alt); border: 1px solid var(--border); border-inline-start: 4px solid var(--accent); border-radius: 10px; padding: 10px 14px; font-size: 14px; }
html[data-theme="dark"] .tk-step.done .tk-dot, html[data-theme="dark"] .tk-bar.done { background: #1f9b52; border-color: #1f9b52; }

/* Student profile (cover + avatar + info + security) */
.sprofile-cover { position: relative; height: 150px; border-radius: var(--radius); background: linear-gradient(120deg, var(--primary), var(--royal) 60%, var(--secondary)); display: flex; align-items: flex-end; padding: 18px 24px; overflow: visible; }
.sprofile-cover-text { color: rgba(255,255,255,.92); font-weight: 700; font-size: 15px; max-width: 60%; }
.sprofile-avatar-wrap { position: absolute; inset-inline-start: 32px; bottom: -46px; }
.sprofile-avatar { width: 116px; height: 116px; border-radius: 50%; object-fit: cover; border: 5px solid var(--surface); background: var(--tag-bg); box-shadow: var(--shadow); }
.sprofile-avatar-edit { position: absolute; inset-inline-end: 2px; bottom: 6px; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer; border: 3px solid var(--surface); }
.sprofile-id { padding: 58px 24px 0; }
.sprofile-name { font-size: 26px; font-weight: 800; color: var(--text); }
.sprofile-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; font-size: 14px; }
.role-chip { background: var(--tag-bg); color: var(--accent); font-weight: 700; font-size: 13px; padding: 4px 14px; border-radius: 999px; }
.sprofile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 26px; }
.pf-rows { display: flex; flex-direction: column; }
.pf-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.pf-row:last-child { border-bottom: none; }
.pf-label { color: var(--muted); font-weight: 600; font-size: 14px; }
.pf-val { color: var(--text); font-weight: 700; font-size: 14px; }
.pf-form { margin-top: 16px; }
.pf-edit { margin-top: 14px; }
@media (max-width: 860px) { .sprofile-grid { grid-template-columns: 1fr; } }

@media (max-width: 980px) { .sdash-cols { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
  /* Off-canvas drawer: back to a flush, full-height panel on mobile. */
  .sdash-side { position: fixed; inset-inline-start: 0; top: 0; margin: 0; height: 100vh; border-radius: 0; transform: translateX(-110%); transition: transform .25s ease; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
  html[dir="rtl"] .sdash-side { transform: translateX(110%); }
  .sdash-side.open { transform: translateX(0); }
  .sdash-overlay { display: none; position: fixed; inset: 0; background: rgba(2,8,23,.5); z-index: 39; }
  .sdash-overlay.show { display: block; }
  .sdash-toggle { display: inline-flex; }
  .sdash-acctname { display: none; }
  .sdash-content { padding: 20px 16px 50px; }
}

/* ── Auth: navbar login link + account dropdown ─────────────────────────── */
/* Use the full selector so we out-specify the generic `.nav-links a:hover`
   rule (which would otherwise turn the text navy on a navy hover background). */
/* Transparent (ghost) pill that animates a colour fill on hover. Uses the
   brand accent so it stays consistent on both the light navbar and the blue
   hero. The explicit transition gives the smooth colour animation. */
.nav-links a.nav-login-link { font-weight: 700; color: var(--accent); background: transparent; border: 1.5px solid var(--accent); padding: 7px 18px; border-radius: 999px; transition: background-color .28s ease, color .28s ease, box-shadow .28s ease, transform .15s ease; }
.nav-links a.nav-login-link:hover { color: #fff; background: var(--accent); box-shadow: 0 8px 20px rgba(19, 52, 95, .30); transform: translateY(-1px); }
.nav-account { position: relative; }
.account-trigger { display: flex; align-items: center; gap: 8px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px 4px 4px; cursor: pointer; font-weight: 700; color: var(--text); font-family: var(--font); }
.account-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--tag-bg); }
.account-name { font-size: 14px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-caret { font-size: 11px; color: var(--muted); }
.account-menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; min-width: 180px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 8px; display: flex; flex-direction: column; gap: 4px; z-index: 60; }
.account-menu[hidden] { display: none; }
.account-menu a, .account-menu button { text-align: start; background: none; border: none; padding: 10px 12px; border-radius: 9px; font: inherit; font-weight: 600; color: var(--text); cursor: pointer; }
.account-menu a:hover, .account-menu button:hover { background: var(--surface-alt); }
.account-logout { color: #c0392b; }

/* ── Student portal ─────────────────────────────────────────────────────── */
.portal { margin-top: 28px; margin-bottom: 60px; }
.portal-title { font-size: 28px; font-weight: 800; color: var(--text); margin-bottom: 18px; }
.course-pick { max-width: 440px; }
.portal th, .portal td { text-align: start; }
.sub-area { width: 100%; margin-top: 12px; }
.sub-table { box-shadow: none; border: 1px solid var(--border); }
.sub-table th { background: var(--surface-alt); color: var(--text); }
.grade-input { padding: 6px 8px; border: 1px solid var(--input-border); border-radius: 8px; background: var(--input-bg); color: var(--text); font-family: var(--font); }
.material-row { flex-wrap: wrap; }
.submit-box { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.submit-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.submit-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.submit-controls input[type="url"] { padding: 8px 10px; border: 1px solid var(--input-border); border-radius: 8px; background: var(--input-bg); color: var(--text); font-family: var(--font); min-width: 200px; }
.submit-controls input[type="file"] { font-size: 13px; color: var(--muted); max-width: 200px; }
.auth-sub { text-align: center; color: var(--muted); margin-bottom: 18px; }

/* Password field with show/hide toggle */
.pw-field { position: relative; }
.pw-field input { width: 100%; padding-inline-end: 44px; }
.pw-toggle { position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; line-height: 0; padding: 4px; border-radius: 8px; color: var(--muted); display: grid; place-items: center; }
.pw-toggle:hover { background: var(--surface-alt); color: var(--accent); }
.pw-toggle svg { display: block; }
/* Buttons that pair an inline SVG icon with text */
.icon-btn { display: inline-flex; align-items: center; gap: 6px; }
.icon-btn svg { display: block; }
.theme-toggle svg, .avatar-upload svg { display: block; }
.pw-rules { list-style: none; margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.pw-rules li { font-size: 13px; color: var(--muted); font-weight: 600; }
.pw-rules li.ok { color: #167a3e; }
html[data-theme="dark"] .pw-rules li.ok { color: #8ee0ab; }
.auth-alt { text-align: center; margin-top: 18px; color: var(--muted); }
.auth-alt a { color: var(--accent); font-weight: 700; margin-inline-start: 6px; }

.profile-card { display: flex; align-items: center; gap: 26px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px; }
.profile-avatar-wrap { position: relative; flex-shrink: 0; }
.profile-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid var(--surface-alt); background: var(--tag-bg); }
.avatar-upload { position: absolute; inset-inline-end: -2px; bottom: -2px; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer; font-size: 14px; border: 2px solid var(--surface); }
.profile-info { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.profile-name { font-size: 26px; font-weight: 800; color: var(--text); }
.profile-info .btn-soft { margin-top: 10px; }

.portal-section { margin-top: 38px; }
.portal-h2 { font-size: 22px; font-weight: 800; color: var(--text); margin-bottom: 16px; }
.empty-note { color: var(--muted); background: var(--surface-alt); border: 1px dashed var(--border); border-radius: 12px; padding: 18px; text-align: center; }
.empty-note.hidden { display: none; }

.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.course-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
.course-card h3 { color: var(--text); font-size: 18px; margin-bottom: 6px; }
.course-meta { font-size: 13px; }
.course-desc { margin-top: 10px; color: var(--text); font-size: 14px; line-height: 1.7; }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pill { background: var(--tag-bg); color: var(--accent); border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 700; }
.pill.status-progress { background: #fff4e0; color: #b45309; }
.pill.status-confirmed { background: #e7f9ee; color: #167a3e; }
html[data-theme="dark"] .pill.status-progress { background: rgba(180,83,9,.22); color: #f5b971; }
html[data-theme="dark"] .pill.status-confirmed { background: rgba(22,122,62,.22); color: #8ee0ab; }

/* Admin enrollment status badges */
.status-badge { font-size: 12px; font-weight: 800; padding: 3px 12px; border-radius: 999px; white-space: nowrap; }
.status-badge.is-pending { background: #fff4e0; color: #b45309; }
.status-badge.is-confirmed { background: #e7f9ee; color: #167a3e; }
html[data-theme="dark"] .status-badge.is-pending { background: rgba(180,83,9,.22); color: #f5b971; }
html[data-theme="dark"] .status-badge.is-confirmed { background: rgba(22,122,62,.22); color: #8ee0ab; }
.btn-confirm { background: #167a3e; color: #fff; border: none; border-radius: 8px; padding: 6px 14px; font-weight: 700; cursor: pointer; font-size: 13px; }
.btn-confirm:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Account role badges (admin Users tab) */
.role-badge { font-size: 12px; font-weight: 800; padding: 3px 12px; border-radius: 999px; text-transform: capitalize; }
.role-badge.role-student { background: #eef2fb; color: #13345F; }
.role-badge.role-instructor { background: #eaf1ff; color: #1450C8; }
.role-badge.role-moderator { background: #fff1e6; color: #c2410c; }
.role-badge.role-admin { background: #fde7ee; color: #b3215a; }
html[data-theme="dark"] .role-badge.role-student { background: rgba(19,52,95,.35); color: #b9c7e6; }
html[data-theme="dark"] .role-badge.role-instructor { background: rgba(20,80,200,.22); color: #9cc0ff; }
html[data-theme="dark"] .role-badge.role-moderator { background: rgba(194,65,12,.22); color: #ffb98a; }
html[data-theme="dark"] .role-badge.role-admin { background: rgba(179,33,90,.25); color: #f5a8c4; }

.materials-list { display: flex; flex-direction: column; gap: 12px; }
.material-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 20px; }
.material-main { display: flex; gap: 14px; align-items: flex-start; }
.material-row h4 { color: var(--text); font-size: 16px; }
.material-meta { font-size: 13px; margin-top: 2px; }
.material-desc { margin-top: 6px; color: var(--text); font-size: 14px; }
.material-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.type-badge { font-size: 12px; font-weight: 800; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.type-quiz { background: #eaf1ff; color: #1450C8; }
.type-assignment { background: #fff1e6; color: #c2410c; }
.grade-badge { background: #e7f9ee; color: #167a3e; font-weight: 800; border-radius: 999px; padding: 4px 12px; font-size: 13px; }
html[data-theme="dark"] .type-quiz { background: rgba(20,80,200,.22); color: #9cc0ff; }
html[data-theme="dark"] .type-assignment { background: rgba(194,65,12,.22); color: #ffb98a; }
html[data-theme="dark"] .grade-badge { background: rgba(22,122,62,.22); color: #8ee0ab; }

/* ─────────────────────────────────────────────────────────────────────────
   Course detail page (roadmap layout)
   ───────────────────────────────────────────────────────────────────────── */
.cd-header { margin-bottom: 28px; }
.cd-eyebrow { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .5px;
  color: var(--royal); background: var(--tag-bg); padding: 5px 14px; border-radius: 999px; }
.cd-header h1 { margin: 14px 0 12px; font-size: 34px; font-weight: 800; color: var(--text); line-height: 1.25; }
.cd-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.cd-desc { color: var(--muted); max-width: 760px; line-height: 1.9; }

.cd-main { min-width: 0; }

/* Tabs */
.cd-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 6px; box-shadow: var(--shadow); }
.cd-tab { flex: 1; min-width: 120px; border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 700; color: var(--muted);
  padding: 12px 14px; border-radius: 10px; transition: background .18s, color .18s; }
.cd-tab:hover { color: var(--accent); }
.cd-tab.active { background: linear-gradient(135deg, var(--primary), var(--royal) 60%, var(--secondary));
  color: #fff; box-shadow: var(--shadow); }

.cd-panel { display: none; }
.cd-panel.active { display: block; animation: cdFade .25s ease; }
@keyframes cdFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cd-panel > h3 { font-size: 22px; font-weight: 800; color: var(--text); margin-bottom: 16px; }

/* Course content header */
.cd-content-head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.cd-content-head h3 { font-size: 22px; font-weight: 800; color: var(--text); }
.cd-content-sub { color: var(--muted); font-size: 14px; font-weight: 600; }
.cd-expand { border: none; background: none; cursor: pointer; font-family: inherit;
  font-size: 14px; font-weight: 800; color: var(--royal); padding: 4px 6px; }
.cd-expand:hover { text-decoration: underline; }

/* Accordion */
.cd-sections { display: flex; flex-direction: column; gap: 14px; }
.cd-section { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.cd-section[data-open="true"] { border-color: var(--royal); }
.cd-section-head { width: 100%; display: flex; align-items: center; gap: 16px; cursor: pointer;
  background: transparent; border: none; font-family: inherit; text-align: start; padding: 18px 20px; }
.cd-badge { flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 12px; font-weight: 800; font-size: 15px; color: var(--royal);
  background: var(--tag-bg); }
.cd-section[data-open="true"] .cd-badge {
  background: linear-gradient(135deg, var(--primary), var(--royal)); color: #fff; }
.cd-section-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cd-section-title strong { font-size: 17px; font-weight: 800; color: var(--text); }
.cd-section-title small { font-size: 13px; color: var(--muted); font-weight: 600; }
.cd-chevron { flex: none; font-size: 20px; color: var(--muted); transition: transform .22s ease; line-height: 1; }
.cd-section[data-open="true"] .cd-chevron { transform: rotate(180deg); color: var(--royal); }

.cd-section-body { display: none; padding: 0 20px 20px; }
.cd-section[data-open="true"] .cd-section-body { display: block; }
.cd-section-desc { color: var(--muted); line-height: 1.9; margin-bottom: 14px;
  padding-top: 4px; border-top: 1px dashed var(--border); margin-top: 2px; }
.cd-topics { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.cd-topic { display: flex; align-items: center; gap: 12px; padding: 11px 12px;
  border-radius: 10px; color: var(--text); font-size: 15px; transition: background .15s; }
.cd-topic:hover { background: var(--surface-alt); }
.cd-topic-num { flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 999px; background: var(--tag-bg); color: var(--royal); font-size: 12px; font-weight: 800; }

/* Learn / features lists */
.cd-learn { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cd-learn-item { display: flex; align-items: flex-start; gap: 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; padding: 16px; box-shadow: var(--shadow);
  color: var(--text); line-height: 1.7; font-weight: 600; }
.cd-check { flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 999px; background: rgba(20,80,200,.12); color: var(--royal); font-weight: 800; font-size: 14px; }

/* Sidebar card media: the preview video plays inline when the course has one;
   otherwise the course image is shown. */
.cd-media { position: relative; display: block; aspect-ratio: 16/9; border-radius: 12px;
  background: var(--surface-alt) center/cover; margin-bottom: 18px; overflow: hidden; }
.cd-media-video { background: #000; }
.cd-media-video iframe, .cd-media-video video { display: block; width: 100%; height: 100%; border: 0; }
/* Native player: the card hugs the video's own aspect ratio, so the whole
   frame is always visible — full-bleed, no letterboxing. */
.cd-media-natural { aspect-ratio: auto; }
.cd-media-natural video { width: 100%; height: auto; min-height: 120px; }
.cd-enroll { width: 100%; text-align: center; display: block; font-size: 16px; }
.cd-benefits { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.cd-benefits h4 { font-size: 15px; font-weight: 800; color: var(--text); margin-bottom: 12px; }
.cd-benefits ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.cd-benefits li { display: flex; align-items: center; gap: 10px; color: var(--text);
  font-size: 14px; font-weight: 600; }

@media (max-width: 860px) {
  .detail-grid { grid-template-columns: 1fr; }
  .detail-card { position: static; order: -1; }
  .cd-learn { grid-template-columns: 1fr; }
  .cd-header h1 { font-size: 27px; }
}

/* Invisible shield over the Drive embed's top-right corner: swallows clicks on
   the "pop-out to Drive" arrow so viewers stay on the site. */
.cd-drive-shield { position: absolute; top: 0; right: 0; width: 64px; height: 56px; z-index: 2; }

/* Roadmap editor (admin course form) */
.roadmap-editor { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--border); }
.roadmap-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.roadmap-head h4 { font-size: 15px; font-weight: 800; color: var(--text); }
.rm-list { display: flex; flex-direction: column; gap: 10px; }
.rm-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; }
.rm-row input { width: 100%; padding: 9px 12px; border: 1px solid var(--input-border); border-radius: 9px;
  font-family: inherit; font-size: 14px; background: var(--input-bg); color: var(--text); }
.rm-row input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.rm-section { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.rm-section + .rm-section { margin-top: 4px; }
.rm-section-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.rm-section-no { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--tag-bg); color: var(--royal); font-weight: 800; font-size: 13px; }
.rm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.rm-grid input, .rm-grid textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--input-border); border-radius: 9px;
  font-family: inherit; font-size: 14px; background: var(--input-bg); color: var(--text); resize: vertical; }
.rm-grid input:focus, .rm-grid textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
.rm-topics { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.rm-add-topic { font-size: 13px; }
@media (max-width: 700px) { .rm-grid { grid-template-columns: 1fr; } .rm-row { grid-template-columns: 1fr auto; } .rm-row input[dir="ltr"] { grid-column: 1; } }