/* ══════════════════════════════════════════════════════════════════════
   AI ROBOTICS ACADEMY — design tokens
   Three layers: primitive → semantic → component.

   The system is deliberately HARD-EDGED: nothing is rounded, borders are
   hairlines, shadows are solid offsets with no blur, and dark blocks carry a
   45° chamfer on one corner (--notch) as the brand's structural signature.
   Primitives are sampled from the logo mark — the deep navy outline, the
   signal blue of the visor, the sand of the pencil tip.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Layer 1 · primitives ─────────────────────────────────────────── */
  --ink:      #06131f;   /* near-black navy — bars, dark blocks, body text */
  --ink-900:  #0a1f31;
  --navy-800: #08487f;   /* logo outline navy */
  --navy-700: #0b5aa0;
  --blue-600: #0f7fd4;
  --blue-500: #1e9bf5;   /* logo signal blue — the accent */
  --blue-400: #55b6f8;
  --blue-200: #b7ddfb;
  --blue-100: #dceefe;
  --blue-050: #eff7fe;
  --sand-400: #e9be8b;
  --sand-300: #f8d3a8;   /* pencil tip */
  --sand-100: #fdf1e2;
  --slate-600: #3d4d5f;
  --slate-500: #5b6b7c;
  --slate-300: #c3ced9;
  --slate-200: #dde4ec;
  --slate-100: #eaeff5;
  --paper: #f2f5f8;
  --white: #ffffff;
  --red-500: #d64535;
  --green-600: #12703a;

  /* ── Layer 2 · semantic (light) ───────────────────────────────────── */
  --primary: var(--navy-800);
  --primary-dark: var(--ink);
  --royal: var(--navy-700);
  --secondary: var(--blue-500);
  --accent: var(--navy-800);
  --accent-bright: var(--blue-500);

  --bg: var(--paper);
  --surface: var(--white);
  --surface-alt: var(--blue-050);
  --text: var(--ink);
  --text-invert: var(--white);
  --muted: var(--slate-500);
  --border: var(--slate-200);
  --border-strong: var(--ink);
  --rule: rgba(6, 19, 31, .07);

  --navbar-bg: var(--ink);
  --navbar-text: #eaf3fb;
  --input-bg: var(--white);
  --input-border: var(--slate-300);
  --tag-bg: var(--blue-100);
  --footer-bg: var(--ink);

  /* ── Layer 3 · component ──────────────────────────────────────────── */
  --btn-accent-bg: var(--accent-bright);
  --btn-accent-fg: var(--ink);
  --btn-outline-fg: var(--ink);
  --btn-outline-border: var(--ink);
  --chip-bg: var(--accent-bright);
  --chip-fg: var(--ink);
  --mark-bg: var(--accent-bright);
  --mark-fg: var(--ink);
  --frame-slab: var(--accent-bright);
  --card-bg: var(--surface);
  --card-border: var(--border);

  /* ── Structure ────────────────────────────────────────────────────── */
  --radius: 0px;         /* nothing is rounded */
  --radius-lg: 0px;
  --radius-pill: 0px;
  --notch: 22px;         /* the 45° corner cut on dark blocks */
  --notch-sm: 12px;
  --hair: 1px;
  --shadow: none;
  --shadow-lg: none;
  --shadow-hard: 6px 6px 0 var(--ink);   /* solid offset, never blurred */

  --font: 'IBM Plex Sans Arabic', 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --font-latin: 'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --step: 8px;
  color-scheme: light;
}

/* ── DARK theme — semantic + component layers only ──────────────────── */
html[data-theme="dark"] {
  --bg: #050e17;
  --surface: #0a1b29;
  --surface-alt: #07141f;
  --text: #e9f2fa;
  --text-invert: var(--ink);
  --muted: #8ea4b8;
  --border: #1a3247;
  --border-strong: #eaf3fb;
  --rule: rgba(120, 190, 250, .08);

  --accent: var(--blue-400);
  --accent-bright: var(--blue-500);
  --navbar-bg: #03090f;
  --input-bg: #07151f;
  --input-border: #1f3c53;
  --tag-bg: rgba(30, 155, 245, .16);
  --footer-bg: #03090f;

  --btn-outline-fg: #e9f2fa;
  --btn-outline-border: #e9f2fa;
  --shadow-hard: 6px 6px 0 rgba(233, 242, 250, .22);
  color-scheme: dark;
}

/* ══════════════════════════════════════════════════════════════════════
   THE NOTCH — the brand's structural signature.
   A 45° cut on one corner, mirrored per writing direction so it always
   lands on the same *logical* corner in Arabic and English.
   ══════════════════════════════════════════════════════════════════════ */
[dir="rtl"] .notch-be,  /* bottom, inline-end (= left in RTL) */
.notch-be:dir(rtl) {
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
}
[dir="ltr"] .notch-be {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
}
[dir="rtl"] .notch-te { /* top, inline-end */
  clip-path: polygon(0 var(--notch), var(--notch) 0, 100% 0, 100% 100%, 0 100%);
}
[dir="ltr"] .notch-te {
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}
[dir="rtl"] .notch-ts { /* top, inline-start */
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}
[dir="ltr"] .notch-ts {
  clip-path: polygon(0 var(--notch), var(--notch) 0, 100% 0, 100% 100%, 0 100%);
}

* { 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(1240px, 92%);
  margin-inline: auto;
}
/* ══════════════════════════════════════════════════════════════════════
   Buttons
   ══════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: 0;
  font-family: var(--font);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
/* Primary = the bright signal blue with navy type on it (4.9:1), the same
   pairing the logo uses for the visor bars. */
.btn-primary,
.btn-accent {
  background: var(--btn-accent-bg);
  color: var(--btn-accent-fg);
  box-shadow: 0 8px 22px rgba(30, 155, 245, .28);
}
.btn-primary:hover,
.btn-accent:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(30, 155, 245, .38); }
/* Secondary = hairline outline, no fill. */
.btn-ghost,
.btn-outline {
  background: transparent;
  border-color: var(--btn-outline-border);
  color: var(--btn-outline-fg);
}
.btn-ghost:hover,
.btn-outline:hover { border-color: var(--accent-bright); color: var(--accent); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ══════════════════════════════════════════════════════════════════════
   Navbar — solid navy bar, floating over the page
   ══════════════════════════════════════════════════════════════════════ */
.navbar {
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(1320px, 94%);
  margin: 14px auto 0;
  padding: 10px 12px 10px 10px;
  position: sticky;
  top: 12px;
  background: var(--navbar-bg);
  color: var(--navbar-text);
  z-index: 50;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 0;
  box-shadow: 0 18px 42px rgba(4, 24, 46, .22);
}
.navbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .02em;
  color: var(--navbar-text);
  padding-inline: 8px;
  flex-shrink: 0;
}
.navbar .brand img { height: 38px; width: auto; }
/* The mark reads as a white-on-navy silhouette inside the bar; the plate keeps
   a light-background PNG legible without needing a second asset. */
.navbar .brand .brand-mark {
  height: 42px; width: 42px;
  border-radius: 0;
  background: var(--white);
  padding: 2px;
  object-fit: contain;
  flex-shrink: 0;
}
.brand-name { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name b { font-size: 15px; font-weight: 800; letter-spacing: .04em; }
.brand-name span { font-size: 10px; font-weight: 700; letter-spacing: .18em; color: var(--accent-bright); }
.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
}
.nav-links a {
  font-weight: 700;
  font-size: 14px;
  color: rgba(232, 242, 251, .82);
  padding: 8px 12px;
  border-radius: 0;
}
.nav-links a:hover { color: var(--white); background: rgba(255, 255, 255, .08); }
.nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-inline-start: auto; }
/* Segmented AR / EN switch, matching the reference's two-state pill. */
#langToggle {
  background: rgba(255, 255, 255, .1);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 0;
  padding: 8px 14px;
  font-family: var(--font);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .06em;
  cursor: pointer;
}
#langToggle:hover { background: var(--accent-bright); color: var(--ink-900); border-color: transparent; }
.nav-login {
  font-weight: 700;
  font-size: 14px;
  color: rgba(232, 242, 251, .9);
  padding: 8px 12px;
  border-radius: 0;
}
.nav-login:hover { color: var(--white); background: rgba(255, 255, 255, .08); }
.nav-cta {
  background: var(--btn-accent-bg);
  color: var(--btn-accent-fg);
  font-weight: 800;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 0;
  white-space: nowrap;
}
.nav-cta:hover { filter: brightness(1.06); }
.nav-toggle { display: none; background: none; border: none; font-size: 26px; cursor: pointer; color: var(--navbar-text); }

/* Theme toggle */
.theme-toggle {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .16);
  color: var(--white);
  width: 36px; height: 36px;
  border-radius: 0;
  display: grid; place-items: center;
  cursor: pointer;
}
.theme-toggle:hover { background: rgba(255, 255, 255, .18); }

/* ══════════════════════════════════════════════════════════════════════
   Hero — editorial: chip, highlighted headline, framed image
   ══════════════════════════════════════════════════════════════════════ */
/* The faint vertical rules that run the length of the page, as in the
   reference. Drawn once on the hero so it never tiles over dark sections. */
.hero {
  position: relative;
  background: var(--bg);
  padding: clamp(48px, 8vw, 104px) 0 clamp(56px, 7vw, 96px);
  margin-top: -74px;
  padding-top: clamp(122px, 12vw, 170px);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px 108px);
  pointer-events: none;
  z-index: 0;
}
.hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  width: min(1240px, 92%);
  max-width: none;
  margin-inline: auto;
  padding: 0;
}
.hero-text { max-width: 620px; justify-self: end; }
html[dir="ltr"] .hero-text { justify-self: start; }

/* Accent chip above the headline */
.chip {
  display: inline-block;
  background: var(--chip-bg);
  color: var(--chip-fg);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .02em;
  padding: 5px 12px;
  border-radius: 0;
  margin-bottom: 22px;
}

.hero h1 {
  font-size: clamp(30px, 4.1vw, 52px);
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: -.015em;
  margin-bottom: 22px;
}
/* Highlighter block — the headline device from the reference. Inline padding
   plus box-decoration-break keeps every wrapped line boxed. */
.mark {
  background: var(--mark-bg);
  color: var(--mark-fg);
  /* Inline padding without vertical padding: the block hugs the line box, so
     highlighted lines never push the headline's leading apart. */
  padding: 0 .28em;
  box-shadow: 0 .1em 0 var(--mark-bg), 0 -.06em 0 var(--mark-bg);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hero .lead {
  font-size: clamp(15px, 1.5vw, 18px);
  color: var(--muted);
  line-height: 1.9;
  max-width: 560px;
  margin: 0 0 30px;
}
.fineprint { margin-top: 18px; font-size: 13px; color: var(--muted); }

/* Hero image with the offset solid slab behind it */
.frame-img { position: relative; display: block; }
.frame-img::after {
  content: "";
  position: absolute;
  inset-block: 18px -18px;
  inset-inline: -18px 18px;
  background: var(--frame-slab);
  z-index: 0;
}
.frame-img > img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
}

/* Sections */
/* 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: 0; box-shadow: var(--shadow); }
.about-anim {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 0;
  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: 0;
  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: 0; }
.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: 0; 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: 0; 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: 0; 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: 0;
  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: 0; 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: 0; box-shadow: var(--shadow); }
.detail-card { background: var(--surface); border: 1px solid var(--border); padding: 28px; border-radius: 0; 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: 0; 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: 0; 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 group badge. */
.enr-cell { white-space: normal; }
.table-wrap td.expense-desc-cell { white-space: normal; word-break: break-word; max-width: 320px; }
.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 .group-badge { font-size: 12px; }
table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: 0; 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: 0;
  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: 0; border: none; cursor: pointer; font-weight: 700; }

/* Admin extras: filters, groups, 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: 0; 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: 0; font-family: inherit; font-size: 14px; min-width: 220px; background: var(--input-bg); color: var(--text); }
.filter-group input { padding: 8px 12px; border: 1px solid var(--input-border); border-radius: 0; font-family: inherit; font-size: 14px; width: 100%; background: var(--input-bg); color: var(--text); }
.filter-group select:focus, .filter-group input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--tag-bg); }
.filter-count { margin-left: auto; align-self: center; color: var(--muted); font-weight: 700; }

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

.group-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px; background: var(--surface-alt); border-radius: 0; }
.group-bar-label { font-weight: 700; }
.group-bar input { padding: 8px 12px; border: 1px solid var(--input-border); border-radius: 0; font-family: inherit; font-size: 14px; width: 150px; background: var(--input-bg); color: var(--text); }
.group-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: 0; 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: 0; 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: 0; 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: 0; 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: 0; font-weight: 800; font-size: 13px; cursor: pointer; }
button.badge-count:hover { filter: brightness(1.05); text-decoration: underline; }

/* Course order column: position number + up/down move buttons */
.order-cell { display: flex; align-items: center; gap: 10px; }
.order-arrows { display: flex; flex-direction: column; gap: 2px; }
.order-arrow {
  width: 22px; height: 18px; line-height: 1; border: 1px solid var(--border); border-radius: 0;
  background: var(--surface-alt); color: var(--accent); font-size: 10px; cursor: pointer; padding: 0;
  display: grid; place-items: center;
}
.order-arrow:hover:not(:disabled) { background: var(--tag-bg); }
.order-arrow:disabled { opacity: .3; cursor: default; }

/* 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 ───────────────────────────────── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hero .chip, .hero h1, .hero .lead, .hero .btn-row, .hero .fineprint, .hero .frame-img { animation: fadeUp .7s ease both; }
.hero .chip      { animation-delay: .04s; }
.hero h1         { animation-delay: .14s; }
.hero .lead      { animation-delay: .26s; }
.hero .btn-row   { animation-delay: .38s; }
.hero .fineprint { animation-delay: .46s; }
.hero .frame-img { animation-delay: .2s; }

html.js-reveal .reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; }
html.js-reveal .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: 0;
  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: 0; 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: 0;
  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; flex-shrink: 0; }
.sdash-brand img { height: 40px; width: auto; }
.sdash-nav {
  display: flex; flex-direction: column; gap: 4px; flex: 1;
  /* Scrolls internally once the nav list is taller than the viewport (e.g.
     the admin dashboard's long tab list), so the last item is never clipped
     — the logo above stays put instead of scrolling away with it. */
  min-height: 0; overflow-y: auto;
}
.sdash-link, .sdash-logout {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; border: none; background: transparent; cursor: pointer;
  border-radius: 0; 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: 0; 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: 0; 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: 0; 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: 0; 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: 0; box-shadow: var(--shadow); padding: 20px; display: flex; align-items: center; gap: 16px; }
.sdash-stat .ic { width: 46px; height: 46px; border-radius: 0; 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: 0; 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: 0; background: var(--surface-alt); border: 1px solid var(--border); overflow: hidden; }
.fin-bar span { display: block; height: 100%; border-radius: 0; 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); }
/* Discount styling: green in the admin finance table and the student account. */
.fin-discount { color: #167a3e; font-weight: 700; }
.fin-discount-line { color: #167a3e; }
.fin-discount-line b { color: #167a3e; }
.fin-discount-line s { color: var(--muted); }
.pill.pill-discount { background: #e7f9ee; color: #167a3e; }
html[data-theme="dark"] .fin-discount,
html[data-theme="dark"] .fin-discount-line,
html[data-theme="dark"] .fin-discount-line b { color: #8ee0ab; }
html[data-theme="dark"] .pill.pill-discount { background: rgba(22,122,62,.22); color: #8ee0ab; }

/* 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: 0; 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: 0; 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: 0; 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: 0; 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: 0; 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: 0; 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: 0; }
.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%); }
  /* Open state must out-specify the RTL hide rule above, otherwise the drawer
     never slides in on Arabic (default) pages. Cover both directions. */
  .sdash-side.open,
  html[dir="rtl"] .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(--navbar-text); background: transparent; border: 1.5px solid rgba(255, 255, 255, .24); padding: 7px 16px; border-radius: 0; transition: background-color .28s ease, color .28s ease, border-color .28s ease; }
.nav-links a.nav-login-link:hover { color: var(--ink-900); background: var(--accent-bright); border-color: transparent; }
.nav-account { position: relative; }
.account-trigger { display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); border-radius: 0; padding: 4px 10px 4px 4px; cursor: pointer; font-weight: 700; color: var(--navbar-text); font-family: var(--font); }
.sdash-top-actions .account-trigger { background: var(--surface-alt); border-color: var(--border); color: var(--text); }
.account-avatar { width: 30px; height: 30px; border-radius: 0; 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: 0; 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: 0; 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; }

/* Notification bell (shared navbar, every logged-in role) */
.nav-bell { position: relative; }
.bell-trigger { position: relative; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); border-radius: 0; cursor: pointer; color: var(--navbar-text); }
.sdash-top-actions .bell-trigger { background: var(--surface-alt); border-color: var(--border); color: var(--text); }
.bell-trigger svg { width: 18px; height: 18px; }
.bell-badge { position: absolute; top: -4px; inset-inline-end: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 0; background: #e74c3c; color: #fff; font-size: 10px; font-weight: 800; line-height: 17px; text-align: center; }
.bell-badge.hidden { display: none; }
.bell-menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; width: 320px; max-width: 90vw; background: var(--surface); border: 1px solid var(--border); border-radius: 0; box-shadow: var(--shadow); padding: 8px; z-index: 60; }
.bell-menu[hidden] { display: none; }
.bell-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 10px; font-weight: 800; }
.bell-mark-all { background: none; border: none; color: var(--accent); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; padding: 0; }
.bell-mark-all:hover { text-decoration: underline; }
.bell-list { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.bell-item { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: start; background: none; border: none; padding: 10px 12px; border-radius: 0; font: inherit; color: var(--text); cursor: pointer; }
.bell-item:hover { background: var(--surface-alt); }
.bell-item.unread { background: var(--tag-bg); }
.bell-item-title { font-weight: 700; font-size: 14px; }
.bell-item-body { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bell-item-time { font-size: 11px; color: var(--muted); margin-top: 2px; }
.bell-empty { text-align: center; padding: 24px 12px; font-size: 13px; }
.bell-empty.hidden { display: none; }

/* ── 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; }
/* Instructor Teaching header: course picker at the start of the row, the
   "Complete course" action pushed to the far end so it never crowds the
   dropdown. margin-inline-start keeps that correct in both RTL and LTR. */
.course-pick-row { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
/* flex-basis keeps the picker at its usual 440px instead of shrinking to
   fit the selected course's text, while still narrowing on small screens. */
.course-pick-row .course-pick { margin-bottom: 0; flex: 0 1 440px; }
/* padding + line-height + the transparent border add up to exactly the
   select's 46px, so the two sit on a clean shared baseline. */
.course-pick-row .complete-course-btn {
  margin-inline-start: auto; padding: 12px 24px; font-size: 15px; border-radius: 0;
  line-height: 20px; border: 1px solid transparent;
}
.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: 0; 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: 0; 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: 0; 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; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }
.pagination button:disabled { opacity: .4; cursor: not-allowed; }
.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: 0; box-shadow: var(--shadow); padding: 26px; }
.profile-avatar-wrap { position: relative; flex-shrink: 0; }
.profile-avatar { width: 96px; height: 96px; border-radius: 0; 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: 0; 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: 0; 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: 0; 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; }

.group-card { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.group-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.12); }
.group-card .course-meta.no-instructor { color: var(--muted); font-style: italic; }
.group-schedule-note { font-size: 13px; color: var(--muted); margin-top: 2px; }
.group-schedule-note.no-schedule { font-style: italic; }
.modal-card.modal-wide { width: min(860px, 100%); max-height: 90vh; overflow-y: auto; }
.schedule-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 0; padding: 6px 8px 6px 14px; font-size: 13px; font-weight: 700; }
.schedule-chip button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 4px; border-radius: 0; }
.schedule-chip button:hover { background: var(--tag-bg); color: #e74c3c; }

.schedule-grid-table th, .schedule-grid-table td { vertical-align: top; white-space: normal; border-inline-end: 1px solid var(--border); }
.schedule-grid-table th { border-inline-end-color: rgba(255,255,255,.2); }
.schedule-grid-table th:last-child, .schedule-grid-table td:last-child { border-inline-end: none; }
.schedule-grid-table .sg-hour { white-space: nowrap; font-weight: 800; background: var(--surface-alt); }
.schedule-grid-table td { min-width: 150px; padding: 8px; }
.sg-card { background: var(--tag-bg); border-radius: 0; padding: 8px 10px; margin-bottom: 6px; }
.sg-card:last-child { margin-bottom: 0; }
.sg-card-teacher { font-weight: 800; font-size: 13px; color: var(--text); }
.sg-card-meta {
  font-size: 12px; color: var(--muted); margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
}
.pill { background: var(--tag-bg); color: var(--accent); border-radius: 0; padding: 3px 12px; font-size: 12px; font-weight: 700; }
.pill.status-progress { background: #fff4e0; color: #b45309; }
.pill.status-confirmed { background: #e7f9ee; color: #167a3e; }
/* A finished course reads as "done", not "active" — a distinct blue keeps it
   from being mistaken for the green in-progress state. */
.pill.status-completed { background: #e8effc; color: #1450c8; }
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; }
html[data-theme="dark"] .pill.status-completed { background: rgba(20,80,200,.26); color: #9dbcf5; }

/* Admin enrollment status badges */
.status-badge { font-size: 12px; font-weight: 800; padding: 3px 12px; border-radius: 0; 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: 0; padding: 6px 14px; font-weight: 700; cursor: pointer; font-size: 13px; }
.att-check { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; cursor: pointer; }
.att-check input { width: 16px; height: 16px; cursor: pointer; }

.teach-subtabs { display: flex; gap: 24px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.teach-subtab {
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 14px; font-weight: 700; color: var(--muted); padding: 10px 2px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.teach-subtab:hover { color: var(--text); }
.teach-subtab.active { color: var(--accent); border-bottom-color: var(--accent); }
.teach-subview { display: none; }
.teach-subview.active { display: block; }
.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: 0; 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: 0; 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: 0; white-space: nowrap; }
.type-quiz { background: #eaf1ff; color: #1450C8; }
.type-assignment { background: #fff1e6; color: #c2410c; }
.type-video { background: #f3e8ff; color: #7e22ce; }
.grade-badge { background: #e7f9ee; color: #167a3e; font-weight: 800; border-radius: 0; 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"] .type-video { background: rgba(126,34,206,.25); color: #d9b3ff; }
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: 0; }
.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: 0;
  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: 0; 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: 0; 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: 0; 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: 0; 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: 0; 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: 0; 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: 0; 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: 0;
  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: 0;
  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: 0; 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: 0;
  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: 0;
  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; } }

/* Admin "Review" impersonation banner — shown on every page while an admin
   is viewing another account's dashboard. */
.impersonation-banner {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap; background: #fef3c7; color: #92400e;
  font-size: 14px; font-weight: 700; padding: 10px 16px; text-align: center;
}
.impersonation-banner .impersonation-back {
  background: #92400e; color: #fff; border: none; border-radius: 0;
  padding: 6px 14px; font-size: 13px; font-weight: 700; cursor: pointer;
  font-family: inherit;
}
html[data-theme="dark"] .impersonation-banner { background: #451a03; color: #fde68a; }
html[data-theme="dark"] .impersonation-banner .impersonation-back { background: #fde68a; color: #451a03; }

/* Admin Overview: mini bar chart (enrollments/revenue trend) — one hue,
   thin bars, rounded data-ends anchored to the baseline. */
.mbar-chart { display: flex; align-items: flex-end; gap: 8px; height: 170px; padding-top: 8px; }
.mbar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; min-width: 0; }
.mbar-value { font-size: 12px; font-weight: 800; color: var(--text); margin-bottom: 6px; white-space: nowrap; }
.mbar-track { flex: 1; width: 60%; max-width: 34px; display: flex; align-items: flex-end; background: var(--surface-alt); border-radius: 0; overflow: hidden; }
.mbar-fill { width: 100%; background: var(--royal); border-radius: 0; min-height: 2px; }
.mbar-label { font-size: 11px; color: var(--muted); margin-top: 8px; white-space: nowrap; }

/* Admin Overview: horizontal bar list (top courses by enrollment). */
.hbar-row { display: grid; grid-template-columns: minmax(0, 1.3fr) 1fr auto; align-items: center; gap: 10px; margin-bottom: 12px; }
.hbar-row:last-child { margin-bottom: 0; }
.hbar-label { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { background: var(--surface-alt); border-radius: 0; height: 10px; overflow: hidden; }
.hbar-fill { height: 100%; background: var(--royal); border-radius: 0; min-width: 3%; }
.hbar-value { font-weight: 800; font-size: 13px; color: var(--text); min-width: 24px; text-align: end; }

/* ══════════════════════════════════════════════════════════════════════
   MARKETING LAYER — editorial sections for the public site
   Everything below composes the tokens above; no raw hex values.
   ══════════════════════════════════════════════════════════════════════ */

/* Section heading block: eyebrow label + big headline + optional lead. */
.sec {
  padding: clamp(56px, 7vw, 96px) 0;
  position: relative;
}
.sec-alt { background: var(--surface-alt); }
.sec-dark { background: var(--ink-900); color: #e8f2fb; }
.sec-dark .sec-lead, .sec-dark .muted { color: rgba(232, 242, 251, .72); }
.sec-head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 52px); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--accent-bright);
  margin-bottom: 12px;
}
.sec-title {
  font-size: clamp(26px, 3.6vw, 42px);
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -.01em;
}
.sec-lead { margin-top: 14px; color: var(--muted); font-size: clamp(15px, 1.4vw, 17px); line-height: 1.85; }

/* Legacy centred heading, kept so existing pages don't regress. */
.section-title { text-align: center; margin-bottom: 12px; font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.section-sub { text-align: center; color: var(--muted); margin-bottom: 44px; }

/* ── Numbered steps ─────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }
.step {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 0;
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
}
.step::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 4px;
  background: var(--accent-bright);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform .3s ease;
}
.step:hover::before { transform: scaleX(1); }
.step .n {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 0;
  background: var(--accent-bright);
  color: var(--ink-900);
  font-weight: 800;
  font-size: 17px;
  margin-bottom: 16px;
}
.step h3 { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 15px; line-height: 1.8; }
.sec-dark .step { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); }
.sec-dark .step p { color: rgba(232, 242, 251, .74); }

/* ── Feature cards ──────────────────────────────────────────────────── */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.feature {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 0;
  padding: 28px 24px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.feature .ic {
  width: 46px; height: 46px;
  border-radius: 0;
  background: var(--tag-bg);
  color: var(--accent);
  display: grid; place-items: center;
  margin-bottom: 16px;
}
.feature .ic svg { width: 23px; height: 23px; }
.feature h3 { font-size: 17px; font-weight: 800; margin-bottom: 8px; }
.feature p { color: var(--muted); font-size: 15px; line-height: 1.8; }

/* ── Split block: text beside a framed image ────────────────────────── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 68px);
  align-items: center;
}
.split-media { position: relative; }

/* ── Stats band ─────────────────────────────────────────────────────── */
.stats { background: var(--ink-900); color: #e8f2fb; padding: clamp(40px, 5vw, 64px) 0; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; text-align: center; }
.stat .num { font-size: clamp(34px, 4vw, 48px); font-weight: 800; color: var(--accent-bright); line-height: 1.1; }
.stat .label { color: rgba(232, 242, 251, .74); font-weight: 700; font-size: 14px; }

/* ── FAQ (native details/summary — no JS) ───────────────────────────── */
.faq { display: grid; gap: 12px; max-width: 860px; margin-inline: auto; }
.faq-item {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 0;
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 22px;
  font-weight: 800;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 700;
  color: var(--accent-bright);
  flex-shrink: 0;
  transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 22px 20px; color: var(--muted); line-height: 1.9; font-size: 15px; }

/* ── Closing CTA band ───────────────────────────────────────────────── */
.cta-band {
  background: var(--accent-bright);
  color: var(--ink-900);
  padding: clamp(48px, 6vw, 76px) 0;
  text-align: center;
}
.cta-band h2 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; line-height: 1.3; margin-bottom: 14px; }
.cta-band p { max-width: 620px; margin: 0 auto 26px; font-size: 16px; line-height: 1.8; color: rgba(6, 42, 76, .78); }
.cta-band .btn-row { justify-content: center; }
.cta-band .btn-dark { background: var(--ink-900); color: var(--white); }
.cta-band .btn-dark:hover { background: var(--ink); transform: translateY(-2px); }
.cta-band .btn-outline { border-color: rgba(6, 42, 76, .35); color: var(--ink-900); }
.cta-band .btn-outline:hover { border-color: var(--ink-900); background: rgba(6, 42, 76, .06); }

/* ── Footer ─────────────────────────────────────────────────────────── */
.footer { background: var(--footer-bg); color: rgba(232, 242, 251, .68); padding: 56px 0 32px; }
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  text-align: start;
}
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer-brand .brand-mark { height: 42px; width: 42px; border-radius: 0; background: var(--white); padding: 2px; object-fit: contain; }
.footer-brand .brand-name b { color: var(--white); font-size: 15px; letter-spacing: .04em; }
.footer-brand .brand-name span { color: var(--accent-bright); font-size: 10px; letter-spacing: .18em; }
.footer-about { max-width: 380px; font-size: 14px; line-height: 1.9; }
.footer-col h4 { color: var(--white); font-size: 13px; font-weight: 800; letter-spacing: .12em; margin-bottom: 14px; }
.footer-col ul { list-style: none; display: grid; gap: 10px; }
.footer-col a, .footer-col li { font-size: 14px; }
.footer-col a:hover { color: var(--accent-bright); }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 22px;
  font-size: 13px;
}
.footer-links { display: flex; gap: 22px; justify-content: center; list-style: none; flex-wrap: wrap; }
.footer-links a:hover { color: var(--accent-bright); }
.social { display: flex; gap: 10px; margin-top: 16px; }
.social a {
  width: 38px; height: 38px;
  border-radius: 0;
  background: rgba(255, 255, 255, .09);
  color: var(--white);
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 13px;
}
.social a:hover { background: var(--accent-bright); color: var(--ink-900); }

/* ── Page header for inner pages (courses, auth) ────────────────────── */
.page-head {
  background: var(--ink-900);
  color: #e8f2fb;
  padding: clamp(112px, 11vw, 150px) 0 clamp(40px, 5vw, 64px);
  margin-top: -74px;
  position: relative;
  overflow: hidden;
}
.page-head::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(to right, rgba(120, 190, 250, .06) 0 1px, transparent 1px 108px);
  pointer-events: none;
}
.page-head > * { position: relative; }
.page-head h1 { font-size: clamp(28px, 4vw, 46px); font-weight: 800; line-height: 1.25; }
.page-head p { color: rgba(232, 242, 251, .74); margin-top: 12px; max-width: 620px; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: calc(100% + 10px);
    inset-inline: 0;
    background: var(--navbar-bg);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 0;
    padding: 10px;
    box-shadow: var(--shadow-lg);
  }
  .nav-toggle { display: block; margin-inline-start: auto; }
  .navbar { position: sticky; }
}
@media (max-width: 900px) {
  .hero-content, .split { grid-template-columns: 1fr; }
  .hero-text { justify-self: stretch; max-width: none; }
  .hero .frame-img { order: -1; }
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 560px) {
  /* The bar has to fit brand + language + CTA + menu button on a 360px phone,
     so every part loses a few pixels rather than the row wrapping or clipping. */
  .navbar { gap: 6px; padding: 8px; }
  .navbar .brand { padding-inline: 4px; min-width: 0; }
  .navbar .brand .brand-mark { height: 32px; width: 32px; border-radius: 0; }
  .brand-name b { font-size: 12px; letter-spacing: .02em; }
  .brand-name span { font-size: 9px; letter-spacing: .12em; }
  .nav-actions { gap: 6px; }
  .nav-login, .theme-toggle { display: none; }
  #langToggle { padding: 7px 10px; font-size: 11px; }
  .nav-cta { padding: 8px 12px; font-size: 12px; }
  .nav-toggle { font-size: 22px; }
  .btn { padding: 12px 22px; font-size: 14px; }
  .frame-img::after { inset-block: 12px -12px; inset-inline: -12px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .chip, .hero h1, .hero .lead, .hero .btn-row, .hero .fineprint, .hero .frame-img { animation: none; }
  .step::before { transition: none; }
}

/* Rich bilingual blocks: when markup (not just text) differs per language,
   both versions ship in the HTML and CSS shows the active one. Plain text
   still uses data-ar / data-en, which js/main.js swaps. */
.i18n { display: none; }
html[lang="ar"] .i18n-ar,
html[lang="en"] .i18n-en { display: revert; }

/* ── Auth pages: navy band, card lifted over its lower edge ─────────────── */
.auth-head { padding-bottom: clamp(72px, 9vw, 110px); text-align: center; }
.auth-head p { margin-inline: auto; }
.auth-wrap { padding-bottom: clamp(56px, 7vw, 90px); }
.form-card {
  max-width: 520px;
  margin: clamp(-90px, -8vw, -60px) auto 0;
  position: relative;
  z-index: 2;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 36px;
  border-radius: 0;
  box-shadow: var(--shadow-lg);
}
.form-card .btn { width: 100%; }
.auth-alt { margin-top: 18px; text-align: center; color: var(--muted); font-size: 14px; }
.auth-alt a { color: var(--accent); font-weight: 800; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none;
  border-color: var(--accent-bright);
  box-shadow: 0 0 0 3px var(--tag-bg);
}

/* ── Course cards ───────────────────────────────────────────────────────── */
.course-card { border-radius: 0; }
.course-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.course-card .thumb { border-radius: 0; }
.course-card .body { padding: 20px; }
.tag { background: var(--tag-bg); color: var(--accent); font-weight: 800; }
.course-card .btn { width: 100%; }

/* ── 404 ────────────────────────────────────────────────────────────────── */
.notfound { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 40px 20px; background: var(--bg); }
.notfound .code { font-size: clamp(72px, 14vw, 150px); font-weight: 800; line-height: 1; color: var(--accent-bright); letter-spacing: -.04em; }
.notfound h1 { font-size: clamp(22px, 3vw, 32px); font-weight: 800; margin: 12px 0 10px; }
.notfound p { color: var(--muted); margin-bottom: 26px; }

/* Dashboard sidebar brand uses the same mark + wordmark lockup as the site. */
.sdash-brand { gap: 10px; }
.sdash-brand .brand-mark { height: 40px; width: 40px; border-radius: 0; background: var(--white); padding: 3px; object-fit: contain; flex-shrink: 0; border: 1px solid var(--border); }
.sdash-brand .brand-name b { color: var(--text); }

/* Course thumbnail with no usable image: branded tile instead of a broken icon. */
.course-card .thumb-empty {
  background: linear-gradient(135deg, var(--navy-800), var(--blue-500));
  position: relative;
}
.course-card .thumb-empty::after {
  content: "AI ROBOTICS ACADEMY";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .55);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-align: center;
  padding: 0 16px;
}

/* ══════════════════════════════════════════════════════════════════════
   BRAND PANEL — the hero/about visual, built from the mark + tokens.
   Replaces the stock photography that used to sit here, so the site
   carries no heavy bitmaps beyond the logo itself.
   ══════════════════════════════════════════════════════════════════════ */
.brand-panel {
  position: relative;
  z-index: 1;
  aspect-ratio: 16 / 11;
  background:
    radial-gradient(120% 100% at 70% 0%, rgba(30, 155, 245, .28), transparent 60%),
    linear-gradient(160deg, var(--navy-800), var(--ink));
  display: grid;
  place-items: center;
  overflow: hidden;
}
/* Faint circuit grid behind the mark. */
.brand-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right, rgba(120, 190, 250, .10) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(to bottom, rgba(120, 190, 250, .10) 0 1px, transparent 1px 46px);
}
.brand-panel .bp-mark {
  position: relative;
  width: clamp(110px, 20%, 172px);
  aspect-ratio: 1;
  border-radius: 0;
  background: var(--white);
  padding: 12px;
  object-fit: contain;
  box-shadow: 0 24px 60px rgba(4, 24, 46, .5);
}
/* Skill chips orbiting the mark; absolute so they read as a composition
   rather than a list. Hidden on very small panels where they'd collide. */
.brand-panel .bp-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(120, 190, 250, .3);
  color: #e8f2fb;
  font-size: 12px;
  font-weight: 800;
  padding: 8px 13px;
  border-radius: 0;
  backdrop-filter: blur(6px);
  white-space: nowrap;
}
.brand-panel .bp-chip::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-bright);
  box-shadow: 0 0 0 4px rgba(30, 155, 245, .22);
  flex-shrink: 0;
}
.brand-panel .bp-1 { inset-block-start: 12%; inset-inline-start: 8%; }
.brand-panel .bp-2 { inset-block-start: 26%; inset-inline-end: 7%; }
.brand-panel .bp-3 { inset-block-end: 24%; inset-inline-start: 6%; }
.brand-panel .bp-4 { inset-block-end: 11%; inset-inline-end: 10%; }
@media (max-width: 520px) {
  .brand-panel .bp-chip { font-size: 10px; padding: 6px 9px; }
  .brand-panel .bp-2, .brand-panel .bp-3 { display: none; }
}

/* Light card carrying the full logo lockup (mark + name). */
.lockup-card {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 3;
  background: var(--white);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  padding: 32px;
}
.lockup-card img {
  position: absolute;
  inset: 28px;
  width: calc(100% - 56px);
  height: calc(100% - 56px);
  object-fit: contain;
}
html[data-theme="dark"] .lockup-card { background: #f2f6fb; }

/* ══════════════════════════════════════════════════════════════════════
   SHARP SYSTEM
   Hard edges, hairline rules, solid offset shadows, chamfered dark blocks.
   Everything below composes the tokens at the top of this file.
   ══════════════════════════════════════════════════════════════════════ */

body { font-family: var(--font); letter-spacing: -.005em; }
:lang(en) { font-family: var(--font-latin); }
h1, h2, h3, h4 { letter-spacing: -.02em; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
  border-radius: 0;
  border-width: var(--hair);
  font-weight: 600;
  letter-spacing: .01em;
  padding: 15px 30px;
}
.btn-primary, .btn-accent {
  background: var(--btn-accent-bg);
  color: var(--btn-accent-fg);
  border-color: var(--btn-accent-bg);
  box-shadow: none;
}
.btn-primary:hover, .btn-accent:hover {
  transform: none;
  box-shadow: var(--shadow-hard);
  translate: -3px -3px;
}
.btn-ghost, .btn-outline {
  border-color: var(--btn-outline-border);
  color: var(--btn-outline-fg);
  background: transparent;
}
.btn-ghost:hover, .btn-outline:hover {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}
html[data-theme="dark"] .btn-ghost:hover,
html[data-theme="dark"] .btn-outline:hover { background: #e9f2fa; color: var(--ink); }
.btn-dark { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* ── Navbar — solid ink bar with the corner cut ─────────────────────── */
.navbar {
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 0 0;
  width: min(1440px, 96%);
  margin: 16px auto 0;
  top: 0;
  min-height: 64px;
  padding-inline: 22px;
  gap: 20px;
}
/* The notch is drawn on a pseudo-element, NOT on the bar itself: clip-path
   clips every descendant, which was cutting the account and notification
   dropdowns off at the bar's edge. The bar stays unclipped; only its
   painted background carries the corner cut. */
.navbar { background: transparent; isolation: isolate; }
.navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--navbar-bg);
  z-index: -1;
}
[dir="rtl"] .navbar::before {
  clip-path: polygon(0 var(--notch), var(--notch) 0, 100% 0, 100% 100%, 0 100%);
}
[dir="ltr"] .navbar::before {
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}
.navbar .brand .brand-mark { border-radius: 0; height: 36px; width: 36px; padding: 2px; }
.brand-name b { font-size: 14px; letter-spacing: .06em; font-weight: 700; }
.brand-name span { font-size: 9px; letter-spacing: .22em; }
.nav-links a { border-radius: 0; font-weight: 500; font-size: 14px; letter-spacing: .01em; }
.nav-links a:hover { background: transparent; color: var(--accent-bright); }
.nav-cta {
  border-radius: 0;
  padding: 11px 20px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .02em;
}
#langToggle {
  border-radius: 0;
  border: var(--hair) solid rgba(255, 255, 255, .22);
  background: transparent;
  padding: 9px 13px;
  font-size: 12px;
  letter-spacing: .1em;
}
.theme-toggle {
  border-radius: 0;
  border: var(--hair) solid rgba(255, 255, 255, .22);
  background: transparent;
  width: 34px; height: 34px;
}
.nav-links a.nav-login-link { border-radius: 0; border-width: var(--hair); }

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero { margin-top: -80px; padding-top: clamp(128px, 12vw, 176px); }
.hero h1 { font-weight: 700; line-height: 1.3; }
.chip { border-radius: 0; font-weight: 600; letter-spacing: .04em; padding: 6px 12px; }
.mark { padding: 0 .24em; }
.frame-img::after { display: none; }
.frame-img { box-shadow: var(--shadow-hard); }
.brand-panel { border-radius: 0; }
[dir="rtl"] .brand-panel, [dir="rtl"] .hero .frame-img > img {
  clip-path: polygon(0 var(--notch), var(--notch) 0, 100% 0, 100% 100%, 0 100%);
}
[dir="ltr"] .brand-panel, [dir="ltr"] .hero .frame-img > img {
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}
.brand-panel .bp-mark { border-radius: 0; box-shadow: none; padding: 14px; }
.brand-panel .bp-chip { border-radius: 0; border-width: var(--hair); font-weight: 600; }
.lockup-card { border-radius: 0; border-width: var(--hair); }

/* ── Sections ───────────────────────────────────────────────────────── */
.sec-label { letter-spacing: .22em; font-weight: 600; font-size: 11px; }
.sec-title { font-weight: 700; line-height: 1.32; }
.sec-dark { background: var(--ink); }

/* Cards: hairline box, no rounding, hard shadow only on hover. */
.step, .feature, .faq-item, .course-card, .form-card, .sdash-panel, .sdash-stat,
.admin-stat, .modal-card, .detail-card {
  border-radius: 0;
  border: var(--hair) solid var(--border);
  box-shadow: none;
}
.step:hover, .feature:hover, .course-card:hover {
  transform: none;
  box-shadow: var(--shadow-hard);
  border-color: var(--border-strong);
}
.step .n { border-radius: 0; font-weight: 700; }
.feature .ic { border-radius: 0; border: var(--hair) solid var(--border); background: transparent; }
.stats { background: var(--ink); }
.stat .num { font-weight: 700; }
.tag { border-radius: 0; font-weight: 600; letter-spacing: .02em; }
.faq-item summary { font-weight: 600; }
.cta-band { color: var(--ink); }
.social a { border-radius: 0; }
.page-head { background: var(--ink); margin-top: -80px; padding-top: clamp(120px, 11vw, 158px); }

/* ── Forms ──────────────────────────────────────────────────────────── */
.form-group label { font-weight: 600; font-size: 13px; letter-spacing: .02em; }
.form-group input, .form-group select, .form-group textarea,
.filter-group input, .filter-group select, #studentSearch, .group-bar input {
  border-radius: 0;
  border: var(--hair) solid var(--input-border);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--ink);
  box-shadow: none;
  outline: 2px solid var(--accent-bright);
  outline-offset: -2px;
}
.message { border-radius: 0; border-inline-start: 3px solid currentColor; font-weight: 500; }

/* ══════════════════════════════════════════════════════════════════════
   DASHBOARD — sharp shell, shared by admin, instructor and student.
   All three pages use the same .sdash-* markup, so this restyles every
   role at once.
   ══════════════════════════════════════════════════════════════════════ */
.sdash-body { background: var(--bg); }
.sdash { gap: 0; }

/* ── Sidebar: numbered index, hairline rules, no chrome ─────────────── */
.sdash-side {
  background: var(--surface);
  border: none;
  border-inline-end: var(--hair) solid var(--border);
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  width: 268px;
  flex-shrink: 0;
  /* Flush to the screen edge and full height — the old floating-card drawer
     had margins and rounded corners that fight the hard-edged system. */
  margin: 0;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sdash-brand {
  padding: 20px 22px;
  border-bottom: var(--hair) solid var(--border);
  gap: 11px;
}
.sdash-brand .brand-mark { border: var(--hair) solid var(--border); border-radius: 0; }
.sdash-nav {
  counter-reset: navitem;
  padding: 10px 0;
  gap: 0;
  display: flex;
  flex-direction: column;
}
/* Numbered like an index — 01, 02, 03 — so the sidebar reads as a
   contents list rather than a stack of buttons. */
.sdash-link {
  counter-increment: navitem;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 22px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  text-align: start;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
.sdash-link::before {
  content: counter(navitem, decimal-leading-zero);
  font-family: var(--font-latin);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--slate-300);
  flex-shrink: 0;
  min-width: 18px;
}
.sdash-link svg { width: 17px; height: 17px; opacity: .8; }
.sdash-link:hover { background: var(--surface-alt); color: var(--text); }
.sdash-link.active {
  background: transparent;
  color: var(--text);
  font-weight: 700;
  box-shadow: none;
}
/* A solid bar on the inline-start edge marks the active row. */
.sdash-link.active::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--accent-bright);
}
.sdash-link.active::before { color: var(--accent-bright); }
.sdash-logout { border-radius: 0; }

/* ── Top bar: the ink block with the corner cut ─────────────────────── */
.sdash-main { background: var(--bg); }
.sdash-top {
  background: var(--ink);
  color: #eaf3fb;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 14px 24px;
  margin: 0;
  gap: 16px;
  min-height: 68px;
  backdrop-filter: none;
  border-bottom: none;
}
.sdash-top { background: transparent; position: sticky; isolation: isolate; }
.sdash-top::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  z-index: -1;
}
[dir="rtl"] .sdash-top::before {
  clip-path: polygon(0 var(--notch), var(--notch) 0, 100% 0, 100% 100%, 0 100%);
}
[dir="ltr"] .sdash-top::before {
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}
.sdash-title { color: var(--white); font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.sdash-date { color: rgba(234, 243, 251, .58); font-size: 12px; letter-spacing: .02em; }
.sdash-toggle { color: #eaf3fb; }
.sdash-top .theme-toggle,
.sdash-top #langToggle {
  border: var(--hair) solid rgba(255, 255, 255, .22);
  background: transparent;
  color: #eaf3fb;
  border-radius: 0;
}
.sdash-top .theme-toggle:hover,
.sdash-top #langToggle:hover { background: var(--accent-bright); color: var(--ink); border-color: transparent; }
.sdash-acct {
  background: transparent;
  border: var(--hair) solid rgba(255, 255, 255, .22);
  border-radius: 0;
  color: #eaf3fb;
  padding: 5px 12px 5px 5px;
}
.sdash-acct:hover { background: rgba(255, 255, 255, .08); }
.sdash-acctname { color: #eaf3fb; font-weight: 600; font-size: 13px; }
.sdash-avatar { border-radius: 0; }
.acct-caret { color: rgba(234, 243, 251, .6); }
.sdash-acct-menu { border-radius: 0; border: var(--hair) solid var(--border); box-shadow: var(--shadow-hard); padding: 0; }
.acct-menu-item { border-radius: 0; font-weight: 500; padding: 12px 14px; }
.acct-menu-item + .acct-menu-item { border-top: var(--hair) solid var(--border); }
.sdash-top-actions .bell-trigger {
  border-radius: 0;
  border: var(--hair) solid rgba(255, 255, 255, .22);
  background: transparent;
  color: #eaf3fb;
  width: 34px; height: 34px;
}
.bell-menu { border-radius: 0; border: var(--hair) solid var(--border); box-shadow: var(--shadow-hard); }

.sdash-content { padding: 30px 24px 64px; }
.sdash-welcome h2, .sdash-head h2 { font-weight: 700; letter-spacing: -.02em; }

/* ── Stat tiles: big figure, hairline box, label in small caps ──────── */
.sdash-stats, .admin-stats { gap: 0; border: var(--hair) solid var(--border); background: var(--border); }
.sdash-stat, .admin-stat {
  background: var(--surface);
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 22px;
  margin: 0;
  gap: 14px;
  /* 1px of the wrapper's background shows through as the divider. */
  outline: var(--hair) solid var(--border);
  outline-offset: 0;
}
.sdash-stat .ic {
  border-radius: 0;
  border: var(--hair) solid var(--border);
  background: transparent;
  width: 42px; height: 42px;
}
.sdash-stat .num, .admin-stat .num { font-weight: 700; letter-spacing: -.03em; }
.sdash-stat .lbl, .admin-stat .label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--muted);
}

/* ── Panels ─────────────────────────────────────────────────────────── */
.sdash-panel, .panel {
  border-radius: 0;
  box-shadow: none;
}
.sdash-panel { border: var(--hair) solid var(--border); padding: 22px; }
/* The heading gets a full-bleed rule under it by cancelling the panel's
   inline padding, so the divider spans edge to edge. */
.sdash-panel > .sdash-head {
  margin: -22px -22px 18px;
  padding: 16px 22px;
  border-bottom: var(--hair) solid var(--border);
}
.panel-head h2 { font-weight: 700; letter-spacing: -.02em; }

/* ── Tables: rules, not cards ───────────────────────────────────────── */
.table-wrap { border-radius: 0; box-shadow: none; border: var(--hair) solid var(--border); }
table { border-radius: 0; box-shadow: none; background: var(--surface); }
thead th {
  background: var(--surface-alt);
  border-bottom: var(--hair) solid var(--border-strong);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px 14px;
}
tbody td { border-bottom: var(--hair) solid var(--border); padding: 12px 14px; font-size: 14px; }
tbody tr:nth-child(even) { background: transparent; }
tbody tr:hover { background: var(--surface-alt); }
html[data-theme="dark"] tbody tr:nth-child(even) { background: transparent; }

/* ── Small controls ─────────────────────────────────────────────────── */
.btn-soft, .btn-danger, .btn-sm, .badge-count, .order-arrow, .group-badge, .pill {
  border-radius: 0;
  font-weight: 600;
}
.btn-soft { border: var(--hair) solid var(--border); background: transparent; }
.btn-soft:hover { background: var(--ink); color: var(--white); border-color: var(--ink); transform: none; }
.btn-danger { background: var(--red-500); border: var(--hair) solid var(--red-500); }
.btn-danger:hover { transform: none; filter: brightness(.92); }
.group-badge { letter-spacing: .08em; }
.tab-btn { border-radius: 0; }
.tab-btn.active { background: var(--ink); color: var(--white); }
.fin-bar, .fin-bar span { border-radius: 0; }
.fin-bar span { background: var(--accent-bright); }
.modal-overlay { backdrop-filter: none; background: rgba(6, 19, 31, .6); }
.modal-card { box-shadow: var(--shadow-hard); }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .sdash-side { width: 250px; }
}
@media (max-width: 760px) {
  .sdash-top { padding: 12px 16px; --notch: 14px; }
  .sdash-content { padding: 20px 16px 48px; }
  .sdash-stats, .admin-stats { border: none; background: transparent; }
  .sdash-stat, .admin-stat { border: var(--hair) solid var(--border); outline: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   ARABIC TYPOGRAPHY GUARD
   Arabic is cursive — letters join. Any letter-spacing (positive tracking
   on small-caps labels, negative tracking on display headings) breaks
   those joins and renders the word as disconnected glyphs. So tracking is
   neutralised whenever the page is in Arabic, and restored only on the
   parts that are always Latin: the wordmark, the sidebar's index numbers,
   and the EN/AR switch.
   ══════════════════════════════════════════════════════════════════════ */
html[lang="ar"] * { letter-spacing: normal; }
html[lang="ar"] .brand-name b { letter-spacing: .06em; }
html[lang="ar"] .brand-name span { letter-spacing: .22em; }
html[lang="ar"] .sdash-link::before { letter-spacing: .08em; }
html[lang="ar"] #langToggle { letter-spacing: .1em; }
html[lang="ar"] .footer-brand .brand-name span { letter-spacing: .18em; }

/* Arabic sits lower and needs more leading than Latin at the same size. */
html[lang="ar"] body { line-height: 1.75; }
html[lang="ar"] h1, html[lang="ar"] h2 { line-height: 1.4; }
html[lang="ar"] .sdash-link { font-size: 14.5px; }

/* ── Stat tiles: figure first, label as a quiet caption ─────────────── */
.sdash-stat { align-items: flex-start; }
.sdash-stat .num, .admin-stat .num { font-size: clamp(26px, 2.4vw, 34px); line-height: 1; margin-bottom: 6px; }
.admin-stat { text-align: start; }

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE — last block in the file on purpose.
   Media queries add no specificity, so these have to come after the sharp
   layer above or the desktop navbar sizing wins on a phone and the bar
   overflows the viewport.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  .navbar { padding-inline: 14px; gap: 12px; }
}
@media (max-width: 560px) {
  :root { --notch: 14px; }
  .navbar {
    width: calc(100% - 20px);
    margin: 10px auto 0;
    padding-inline: 10px;
    gap: 6px;
    min-height: 56px;
  }
  .navbar .brand { padding-inline: 2px; min-width: 0; }
  .navbar .brand .brand-mark { height: 30px; width: 30px; }
  .brand-name b { font-size: 11px; }
  .brand-name span { font-size: 8px; }
  .nav-actions { gap: 5px; }
  #langToggle { padding: 6px 8px; font-size: 10px; }
  .nav-cta { padding: 8px 10px; font-size: 11px; }
  .theme-toggle, .nav-login { display: none; }
  .hero { margin-top: -66px; padding-top: 104px; }
  .page-head { margin-top: -66px; padding-top: 100px; }
  .btn { padding: 13px 20px; font-size: 14px; }
}

/* The inner-page dark band carries the same corner cut as the top bar, so
   every dark block on the site shares one silhouette. */
[dir="rtl"] .page-head {
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
}
[dir="ltr"] .page-head {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
}
.auth-wrap .form-card { box-shadow: var(--shadow-hard); }
.sdash-content .form-card { box-shadow: none; }

/* Popovers get a lighter offset than panels — the full 6px slab reads as a
   black block behind something this small. */
.sdash-acct-menu, .account-menu, .bell-menu {
  box-shadow: 3px 3px 0 rgba(6, 19, 31, .18);
  border: var(--hair) solid var(--border-strong);
}
html[data-theme="dark"] .sdash-acct-menu,
html[data-theme="dark"] .account-menu,
html[data-theme="dark"] .bell-menu { box-shadow: 3px 3px 0 rgba(0, 0, 0, .5); }

/* ══════════════════════════════════════════════════════════════════════
   DASHBOARD SHELL v2 — bar on top, index rail beside the content.
   The markup still nests .sdash-top and .sdash-content inside .sdash-main;
   `display: contents` dissolves that wrapper so both become grid items of
   .sdash directly, and the bar can span the full width above the rail
   without restructuring three pages of HTML.
   ══════════════════════════════════════════════════════════════════════ */
.sdash {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  grid-template-areas:
    "top top"
    "nav content";
  align-content: start;
  gap: 0 clamp(18px, 3vw, 44px);
  width: min(1560px, 96%);
  margin-inline: auto;
  min-height: 100vh;
}
.sdash-main { display: contents; }
.sdash-top { grid-area: top; }
.sdash-side { grid-area: nav; }
.sdash-content { grid-area: content; }

/* ── The bar: floating ink block, brand at the start, controls at the end ── */
.sdash-top {
  margin: 16px 0 clamp(20px, 3vw, 38px);
  padding: 0 22px;
  min-height: 66px;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 40;
}
.sdash-top .sdash-brand {
  padding: 0;
  border: none;
  gap: 11px;
  margin-inline-end: auto;
  flex-shrink: 0;
}
.sdash-top .sdash-brand .brand-mark {
  height: 34px; width: 34px;
  background: var(--white);
  border: none;
  padding: 2px;
}
.sdash-top .sdash-brand .brand-name b { color: var(--white); font-size: 13px; }
.sdash-top .sdash-brand .brand-name span { color: var(--accent-bright); font-size: 8px; }
.sdash-top-actions { gap: 10px; }

/* Account chip: name over role, avatar alongside. */
.sdash-acct { gap: 10px; padding: 5px 5px 5px 12px; align-items: center; }
[dir="rtl"] .sdash-acct { padding: 5px 12px 5px 5px; }
.acct-id { display: flex; flex-direction: column; line-height: 1.25; text-align: end; }
.sdash-acctname { font-size: 13px; font-weight: 600; color: #eaf3fb; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-role { font-size: 11px; font-weight: 500; color: rgba(234, 243, 251, .55); }
.sdash-avatar { width: 34px; height: 34px; }

.sdash-logout-btn {
  background: transparent;
  border: none;
  color: rgba(234, 243, 251, .78);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.sdash-logout-btn:hover { color: var(--accent-bright); }

/* ── The index rail: no panel, just numbers, titles and a hairline ─────── */
.sdash-side {
  position: sticky;
  top: 92px;
  height: auto;
  max-height: calc(100vh - 110px);
  background: transparent;
  border: none;
  overflow-y: auto;
  padding-bottom: 30px;
}
.sdash-nav {
  /* One continuous rule down the outer edge; the active row lights its own
     segment of it, so the rail reads as a single measured index. */
  border-inline-start: var(--hair) solid var(--border);
  padding: 0;
}
.sdash-link {
  gap: 14px;
  padding: 12px 18px;
  font-size: 14px;
}
.sdash-link svg { display: none; }
.sdash-link::before { order: 1; min-width: 20px; }
.sdash-link span { order: 2; flex: 1; }
.sdash-link.active { background: var(--surface); }
/* The accent segment sits on the same edge as the rail's rule, so the active
   row lights up its own piece of that continuous line. */
.sdash-link.active::after {
  inset-inline-start: -1px;
  inset-inline-end: auto;
  width: 3px;
}
.sdash-content { padding: 0 0 70px; min-width: 0; }

@media (max-width: 900px) {
  .sdash {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "top" "nav" "content";
    gap: 0;
  }
  .sdash-side {
    position: static;
    max-height: none;
    width: auto;
    margin-bottom: 22px;
  }
  .sdash-nav {
    flex-direction: row;
    overflow-x: auto;
    border-inline-start: none;
    border-bottom: var(--hair) solid var(--border);
  }
  .sdash-link { white-space: nowrap; padding: 11px 14px; }
  .sdash-link.active::after { inset: auto 0 -1px 0; width: auto; height: 3px; }
  .sdash-top { padding: 0 14px; margin-bottom: 20px; }
  .acct-id { display: none; }
  .sdash-logout-btn { padding: 8px; }
}

/* The content column and the index rail should start on the same line — the
   first block inside a view brings its own top margin, which pushed it down. */
.sdash-view > :first-child { margin-top: 0; }
.sdash-content > .message:first-child:not(.hidden) { margin-bottom: 18px; }

@media (max-width: 900px) {
  /* Grid items default to min-content width, so the nav's full row of links
     was widening the whole track instead of scrolling inside it. */
  .sdash-side, .sdash-nav, .sdash-content { min-width: 0; }
  .sdash-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 560px) {
  .sdash { width: calc(100% - 16px); }
  .sdash-top { padding: 0 10px; gap: 8px; min-height: 58px; }
  .sdash-top .sdash-brand { gap: 8px; }
  .sdash-top .sdash-brand .brand-mark { height: 28px; width: 28px; }
  .sdash-top .sdash-brand .brand-name b { font-size: 11px; }
  .sdash-top .sdash-brand .brand-name span { font-size: 7px; }
  .sdash-top-actions { gap: 6px; }
  /* Logout already lives in the account menu; the standalone button is the
     first thing to go when the bar runs out of room. */
  .sdash-logout-btn { display: none; }
  .sdash-acct { padding: 3px; }
  .sdash-avatar { width: 30px; height: 30px; }
  .sdash-top .theme-toggle, .sdash-top #langToggle { padding: 6px 8px; width: auto; height: 30px; font-size: 10px; }
  .sdash-top-actions .bell-trigger { width: 30px; height: 30px; }
}

@media (max-width: 900px) {
  /* The rail became a horizontal scroller on small screens, so the old
     off-canvas drawer is obsolete — and its rules out-specify the new ones,
     which was sliding the whole nav off-screen. Cancel it, along with the
     hamburger and the dimming overlay it needed. */
  .sdash-side,
  html[dir="rtl"] .sdash-side,
  .sdash-side.open,
  html[dir="rtl"] .sdash-side.open {
    position: static;
    inset: auto;
    transform: none;
    height: auto;
    width: auto;
    box-shadow: none;
    transition: none;
  }
  .sdash-toggle { display: none; }
  .sdash-overlay,
  .sdash-overlay.show { display: none; }
}

/* Dashboard views are <section> elements, so the marketing layer's blanket
   `section { padding: 72px 0 }` was indenting every view from the top and
   pushing the content column out of line with the index rail. */
.sdash-view { padding: 0; }

/* ── Identity at the trailing end of the bar ────────────────────────────
   The account chip / login link now mounts into .nav-actions rather than
   among the page links, so it sits at the far inline-end of the bar. Its
   styles can no longer depend on a .nav-links ancestor.
   ──────────────────────────────────────────────────────────────────────── */
.nav-actions .nav-auth,
.nav-actions .nav-account { list-style: none; display: flex; align-items: center; }
.nav-actions .nav-bell { display: flex; align-items: center; }
a.nav-login-link {
  font-weight: 600;
  font-size: 13px;
  color: var(--navbar-text);
  background: transparent;
  border: var(--hair) solid rgba(255, 255, 255, .24);
  padding: 9px 16px;
  border-radius: 0;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
a.nav-login-link:hover { color: var(--ink); background: var(--accent-bright); border-color: transparent; }
.navbar .account-trigger { padding: 4px 10px 4px 4px; }
.navbar .account-avatar { width: 30px; height: 30px; border-radius: 0; object-fit: cover; }
.navbar .account-name { font-size: 13px; font-weight: 600; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Full lockup built from the mark plus the CSS wordmark, the same way the
   navbar and footer do it. The separate "logo with name" bitmap is gone from
   the repo, and composing it here means the name stays crisp at any size. */
.lockup { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.lockup img { width: clamp(96px, 34%, 168px); height: auto; }
.lockup-name { display: flex; flex-direction: column; line-height: 1.1; }
.lockup-name b { font-size: clamp(20px, 3.4vw, 32px); font-weight: 700; letter-spacing: .06em; color: var(--ink); }
.lockup-name > span { font-size: clamp(10px, 1.5vw, 14px); font-weight: 600; letter-spacing: .3em; color: var(--navy-800); }
html[lang="ar"] .lockup-name b { letter-spacing: .06em; }
html[lang="ar"] .lockup-name > span { letter-spacing: .3em; }
.lockup-card img { position: static; inset: auto; width: auto; height: auto; }

/* ══════════════════════════════════════════════════════════════════════
   BRAND MARK — no plate, sized up.
   The mark is transparent, so it now sits directly on whatever surface it
   lands on. Its navy outline is low-contrast against the ink bars, but the
   white face, the blue visor bars and the antenna dot carry the silhouette
   on their own — the outline reading as an edge rather than a line is the
   intended look here.
   ══════════════════════════════════════════════════════════════════════ */
.navbar .brand .brand-mark,
.footer-brand .brand-mark,
.sdash-brand .brand-mark,
.sdash-top .sdash-brand .brand-mark {
  background: transparent;
  border: none;
  padding: 0;
  object-fit: contain;
  flex-shrink: 0;
}
.navbar .brand .brand-mark { height: 52px; width: 52px; }
.footer-brand .brand-mark { height: 52px; width: 52px; }
.sdash-top .sdash-brand .brand-mark { height: 48px; width: 48px; }
/* The bar has to grow with the mark or the logo crowds its edges. */
.navbar { min-height: 72px; }
.sdash-top { min-height: 72px; }

@media (max-width: 560px) {
  .navbar .brand .brand-mark { height: 36px; width: 36px; }
  .sdash-top .sdash-brand .brand-mark { height: 34px; width: 34px; }
}

/* ══════════════════════════════════════════════════════════════════════
   BAR CONTROLS — one height, one hover.
   The language switch, the theme toggle and the login button were each
   sized by their own padding, so they ended up three different heights and
   three different hovers. They are one control family; size them as one.
   ══════════════════════════════════════════════════════════════════════ */
.navbar #langToggle,
.navbar .theme-toggle,
.navbar a.nav-login-link,
.navbar .account-trigger,
.navbar .bell-trigger,
.sdash-top #langToggle,
.sdash-top .theme-toggle,
.sdash-top .sdash-acct,
.sdash-top .sdash-branch,
.sdash-top .bell-trigger {
  height: 42px;
  min-height: 42px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  border: var(--hair) solid rgba(255, 255, 255, .22);
  background: transparent;
  color: var(--navbar-text);
  font-family: var(--font);
  cursor: pointer;
  /* Same easing and same properties everywhere, so they respond identically. */
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
/* Square controls stay square; the text ones size by their own padding. */
.navbar .theme-toggle,
.navbar .bell-trigger,
.sdash-top .theme-toggle,
.sdash-top .bell-trigger { width: 42px; padding: 0; }
.navbar #langToggle,
.sdash-top #langToggle { padding: 0 15px; font-size: 12px; font-weight: 700; }
.navbar a.nav-login-link { padding: 0 18px; font-size: 13px; font-weight: 600; }
.navbar .account-trigger { padding: 0 6px 0 12px; gap: 9px; }
[dir="rtl"] .navbar .account-trigger { padding: 0 12px 0 6px; }
.sdash-top .sdash-acct { padding: 0 6px 0 12px; gap: 10px; }
[dir="rtl"] .sdash-top .sdash-acct { padding: 0 12px 0 6px; }

/* One hover for all of them: fill with the accent, ink text. */
.navbar #langToggle:hover,
.navbar .theme-toggle:hover,
.navbar a.nav-login-link:hover,
.navbar .account-trigger:hover,
.navbar .bell-trigger:hover,
.sdash-top #langToggle:hover,
.sdash-top .theme-toggle:hover,
.sdash-top .sdash-acct:hover,
/* focus-within, not just hover: the branch box holds a <select>, so it is
   also "active" while the keyboard is inside it. */
.sdash-top .sdash-branch:hover,
.sdash-top .sdash-branch:focus-within,
.sdash-top .bell-trigger:hover {
  background: var(--accent-bright);
  color: var(--ink);
  border-color: var(--accent-bright);
  transform: none;
  filter: none;
}
.navbar .account-trigger:hover .account-name,
.navbar .account-trigger:hover .account-caret,
.sdash-top .sdash-acct:hover .sdash-acctname,
.sdash-top .sdash-acct:hover .acct-role,
.sdash-top .sdash-acct:hover .acct-caret { color: var(--ink); }

/* Avatars shrink to fit inside the shared 42px control height. */
.navbar .account-avatar,
.sdash-top .sdash-avatar { width: 32px; height: 32px; }

@media (max-width: 560px) {
  .navbar #langToggle,
  .navbar .theme-toggle,
  .navbar a.nav-login-link,
  .navbar .account-trigger,
  .navbar .bell-trigger,
  .sdash-top #langToggle,
  .sdash-top .theme-toggle,
  .sdash-top .sdash-acct,
  .sdash-top .bell-trigger { height: 34px; min-height: 34px; }
  .navbar .theme-toggle,
  .navbar .bell-trigger,
  .sdash-top .theme-toggle,
  .sdash-top .bell-trigger { width: 34px; }
  .navbar .account-avatar, .sdash-top .sdash-avatar { width: 26px; height: 26px; }
  /* Everything shrinks a little rather than any one control disappearing —
     brand, language, theme and login all still fit a 360px bar. */
  .navbar #langToggle { padding: 0 8px; font-size: 10px; }
  .navbar a.nav-login-link { padding: 0 10px; font-size: 11px; }
  .navbar .account-trigger { padding: 0 8px 0 4px; gap: 6px; }
  [dir="rtl"] .navbar .account-trigger { padding: 0 4px 0 8px; }
  .navbar { gap: 4px; padding-inline: 8px; }
  .navbar .nav-actions { gap: 4px; }
  .navbar .brand { gap: 6px; }
}

/* Drawer links fill the panel so the whole row is the tap target. */
@media (max-width: 1080px) {
  .nav-links.open li { width: 100%; }
  .nav-links.open a { display: block; width: 100%; padding: 13px 14px; }
  .nav-links.open a:hover { background: rgba(255, 255, 255, .07); color: var(--accent-bright); }
}

/* The mobile drawer hangs below the bar and must clear the hero beneath it. */
@media (max-width: 1080px) {
  .nav-links.open { z-index: 60; box-shadow: 0 18px 40px rgba(4, 24, 46, .35); }
}

/* The account chip is wrapped in a positioning div for its dropdown; without
   its own centring that wrapper let the chip sit 2px above its neighbours. */
.sdash-acct-wrap, .nav-account, .nav-bell, .nav-auth { display: flex; align-items: center; }

/* ── Course visibility checkbox (admin courses table) ───────────────────
   Styled with appearance:none on the input itself rather than hiding the
   input behind a decorative span: one element, natively clickable, natively
   focusable, and it still reports as a checkbox to assistive tech.
   ────────────────────────────────────────────────────────────────────── */
.col-publish { text-align: center; width: 1%; }
input.switch {
  appearance: none;
  -webkit-appearance: none;
  width: 22px; height: 22px;
  margin: 0;
  border: 2px solid var(--input-border);
  background: var(--input-bg);
  position: relative;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
input.switch:hover { border-color: var(--accent-bright); }
input.switch:checked { background: var(--accent-bright); border-color: var(--accent-bright); }
/* The tick is drawn, so it needs no font and stays crisp at any zoom. */
input.switch:checked::after {
  content: "";
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 6px;
  width: 5px; height: 10px;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input.switch:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
input.switch:disabled { opacity: .5; cursor: progress; }
/* A hidden course is dimmed so its state reads down the whole table. */
tbody tr.row-hidden > td:not(.col-publish):not(.row-actions) { opacity: .45; }
.form-check label { display: flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; }
.form-check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent-bright); cursor: pointer; }
.form-hint { font-size: 13px; margin-top: 6px; line-height: 1.7; }

/* ══════════════════════════════════════════════════════════════════════
   COURSE LEVELS
   A course is an age track; a level is the thing a child actually enrols
   in. Both the admin editor and the public detail page render a stack of
   level blocks, so the two share the numbered-slab treatment below.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Admin: the levels editor inside the course form ────────────────── */
.lv-block { margin-top: 26px; padding-top: 22px; border-top: 2px solid var(--border-strong); }
.lv-block .panel-head { margin-bottom: 6px; }
.lv-block .panel-head h4 { font-size: 18px; font-weight: 800; }
.lv-block .form-hint { margin-bottom: 16px; }
.lv-list { display: flex; flex-direction: column; gap: 18px; }

.lv-card {
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--accent-bright);
  background: var(--surface);
  padding: 16px 18px 18px;
}
.lv-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
/* The number is written by renumberLevels(), so reordering renames the
   cards without touching their fields. */
.lv-num { font-size: 15px; font-weight: 800; color: var(--accent); }
.lv-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lv-live { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; cursor: pointer; }

.lv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.lv-grid .form-group { margin: 0; }

.lv-topics-block { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border); }
.lv-topics-block .panel-head { margin-bottom: 12px; }
.lv-topics-block .panel-head h4 { font-size: 15px; font-weight: 700; }
/* ── Public: what the course card now leads with ────────────────────── */
/* Age is the first thing a parent checks, so it carries the accent fill
   while the level count stays a quiet tag. No price: the public API does
   not return one. */
.tag-age { background: var(--accent-bright); color: var(--ink); }

/* ── Public: the level list on the course detail page ───────────────── */
.levels-stack { display: flex; flex-direction: column; gap: 18px; }
.level-block {
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 20px 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 22px;
  align-items: start;
}
.level-block > .level-body { grid-column: 1; }
/* With the price gone the buy column is a single button, so it is centred
   against the block rather than pinned to the top with dead space under it. */
.level-block > .level-buy  { grid-column: 2; text-align: center; align-self: center; }
/* Just the number, like the course-content sections — the level's own name
   is the heading right under it, so spelling out "Level 1" twice would only
   repeat whatever the admin typed. */
.level-index {
  display: inline-block;
  background: var(--ink); color: var(--text-invert);
  font-size: 12px; font-weight: 800;
  padding: 4px 9px; margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.level-block h3 { font-size: 20px; margin-bottom: 6px; }
.level-block .level-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.level-block > .level-body > p { color: var(--muted); margin-bottom: 12px; }
.level-topics { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.level-topics li { position: relative; padding-inline-start: 22px; line-height: 1.7; }
.level-topics li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0; inset-block-start: .62em;
  width: 9px; height: 9px;
  background: var(--accent-bright);
}
.level-buy .btn { white-space: nowrap; }

/* The level stack sits above the content tabs, so it needs the same bottom
   gap the tab bar leaves behind it. */
.cd-levels { margin-bottom: 34px; }
.cd-no-levels { color: var(--muted); font-size: 14px; line-height: 1.8; margin: 4px 0 0; }

/* Narrow screens: the buy column drops under the level body rather than
   squeezing the topics into a column two words wide. */
@media (max-width: 720px) {
  .lv-grid { grid-template-columns: 1fr; }
  .level-block { grid-template-columns: 1fr; }
  .level-block > .level-buy { grid-column: 1; text-align: start; align-self: stretch; margin-top: 14px; }
  .level-buy .btn { width: 100%; }
}

/* Money in a table cell. Prices are staff-only now — they appear in the
   dashboard and nowhere on the public site — so they are set solid rather
   than muted, and tabular so a column of them lines up. */
.cell-money { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════════
   BRANCH SWITCHER
   Four branches share one catalogue; this box is what the whole dashboard
   is scoped to. It joins the BAR CONTROLS family — same height, same
   border, same accent-fill hover — so the top bar stays one row of
   controls rather than a select bolted next to them.
   ══════════════════════════════════════════════════════════════════════ */
/* Sizing, border and hover come from the BAR CONTROLS family above; only what
   is specific to this control lives here. */
.sdash-branch { gap: 7px; padding: 0 12px; font-weight: 700; font-size: 14px; }
/* The <select> is transparent so the box behind it carries the whole
   control — including the hover fill, which a natively-painted select
   would sit on top of. */
.sdash-branch select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  padding: 0 2px;
  cursor: pointer;
  max-width: 160px;
}
.sdash-branch select:focus { outline: none; }
/* Options paint in the OS menu, not on the bar, so they need their own
   colours — inheriting the bar's white-on-transparent leaves them
   unreadable on the menu's light background. */
.sdash-branch select option { background: var(--surface); color: var(--text); }
.sdash-branch svg { flex-shrink: 0; opacity: .9; }
/* Branch staff get a label, not a control: their scope is their account. */
.sdash-branch-fixed { font-weight: 700; letter-spacing: .01em; }
html[lang="ar"] .sdash-branch-fixed { letter-spacing: normal; }

/* An in-table branch picker (the admin placing an application). Sized to the
   row, not to a form. */
.cell-select {
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  max-width: 150px;
}
.cell-select:hover { border-color: var(--accent-bright); }
.cell-select:disabled { opacity: .5; cursor: progress; }

@media (max-width: 720px) {
  .sdash-branch { padding: 0 8px; gap: 4px; }
  .sdash-branch select { max-width: 96px; }
  .sdash-branch svg { display: none; }
}
/* No branch assigned yet: the account sees nothing, so the label warns rather
   than sitting quietly like a normal one. */
.sdash-branch.is-unset { border-color: var(--sand-300); color: var(--sand-300); }

/* ══════════════════════════════════════════════════════════════════════
   HIDDEN MEANS HIDDEN
   The `hidden` attribute is only `display: none` from the UA stylesheet, so
   ANY author rule that sets display beats it — `.group-bar { display: flex }`
   was enough to keep a bar on screen that JS had explicitly hidden, which is
   how a moderator ended up seeing an admin-only control. The codebase had
   been patching this one element at a time (.modal-overlay[hidden],
   .sdash-acct-menu[hidden], …); this settles it for every element at once.
   ══════════════════════════════════════════════════════════════════════ */
[hidden] { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════
   CRM
   The customer-service console reuses the .sdash-* shell, so it is visibly
   the same product. Only what is genuinely new lives here: the customer
   drawer, the fact lists inside it, and the contact log.
   ══════════════════════════════════════════════════════════════════════ */
.crm-drawer { max-width: 760px; width: 92vw; max-height: 88vh; overflow-y: auto; }
.crm-drawer .panel-head { position: sticky; top: 0; background: var(--surface); z-index: 1; padding-bottom: 12px; }

.crm-id { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }

/* Label/value pairs. A two-column grid rather than a table so a long branch
   name wraps under its own label instead of stretching the row. */
.crm-facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0 0 4px; }
.crm-facts dt { color: var(--muted); font-size: 13px; font-weight: 700; }
.crm-facts dd { margin: 0; font-size: 14px; }

.crm-section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); }
.crm-section h4 { font-size: 15px; font-weight: 800; margin-bottom: 12px; }

/* One enrollment: what they bought, where, and what comes next. */
.crm-enr { border: 1px solid var(--border); border-inline-start: 4px solid var(--accent-bright); padding: 14px 16px; margin-bottom: 12px; }
.crm-enr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }

.crm-inline, .crm-log-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.crm-inline label, .crm-log-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; }
.crm-inline select, .crm-inline input,
.crm-log-form select, .crm-log-form input, .crm-log-form textarea {
  padding: 8px 12px; border: 1px solid var(--input-border); background: var(--input-bg);
  color: var(--text); font-family: inherit; font-size: 14px; border-radius: 0;
}
/* The note is the point of the form, so it gets the full width. */
.crm-log-form .crm-note-label { flex: 1 1 100%; }
.crm-log-form textarea { width: 100%; resize: vertical; }

.crm-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.crm-log li { border-inline-start: 3px solid var(--border); padding-inline-start: 12px; }
.crm-log-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 4px; }
.crm-log p { margin: 0; font-size: 14px; line-height: 1.7; }

/* Status colours. The three that need to stand out do; the rest stay quiet so
   a list of forty rows is not a rainbow. */
.crm-st-interested     { background: var(--tag-bg); color: var(--accent); }
.crm-st-converted      { background: var(--green-600); color: var(--white); }
.crm-st-not_interested,
.crm-st-lost           { background: var(--slate-100); color: var(--muted); }

@media (max-width: 560px) {
  .crm-facts { grid-template-columns: 1fr; gap: 2px 0; }
  .crm-facts dt { margin-top: 8px; }
  .crm-inline label, .crm-log-form label { flex: 1 1 100%; }
}