@import url("https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@500;600;700&display=swap");
/* ===== دكتور ماث — نظام التصميم (منقول من موقع الأكاديمية) ===== */
/* ─────────────────────────────────────────────────────────────
   Dr.Math design system
   Ink & gold: the soroban's dark lacquered frame and brass beads.
   Colors are tokens; the theme setting swaps them at runtime.
   ───────────────────────────────────────────────────────────── */

:root {
  /* palette: ink-gold (default) */
  --ink: #0f2142;
  --ink-2: #1c3563;
  --ink-3: #2c4a80;
  --gold: #b78d33;
  --gold-2: #d6b25e;
  --gold-soft: #f1e5c3;
  --porcelain: #f3f5f9;
  --surface: #ffffff;
  --text: #15203a;
  --muted: #5a6680;
  --line: #dde2eb;
  --line-strong: #c5cddb;
  --danger: #b3261e;
  --danger-soft: #fbe9e7;
  --success: #1e7a4c;
  --success-soft: #e3f4ea;
  --warn: #8a5a00;
  --warn-soft: #fdf1d8;
  --on-ink: #f6f2e7;
  --on-ink-muted: #b9c3d8;

  --font-body: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --font-display: 'Cairo', 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif;
  --font-num: 'Amiri Quran', 'Cairo', serif;

  /* type scale (1.25) */
  --step--1: 0.85rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.56rem;
  --step-3: 1.95rem;
  --step-4: 2.44rem;
  --step-5: clamp(2.2rem, 1.4rem + 3.4vw, 3.6rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 18px;
  --shadow-1: 0 1px 2px rgb(15 33 66 / 0.06), 0 2px 8px rgb(15 33 66 / 0.05);
  --shadow-2: 0 10px 30px rgb(15 33 66 / 0.12);
  --container: 1180px;
  --focus: 0 0 0 3px var(--surface), 0 0 0 5px var(--gold);
}

:root[data-palette='green'] {
  --ink: #0c3a32;
  --ink-2: #145244;
  --ink-3: #1f6b59;
  --gold: #a9834a;
  --gold-2: #cfae74;
  --gold-soft: #efe3c8;
  --porcelain: #f2f5f3;
  --text: #13261f;
  --muted: #566a62;
  --line: #d9e2dd;
  --line-strong: #c1cec7;
  --on-ink: #f5f1e6;
  --on-ink-muted: #b6cbc2;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--porcelain);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.75;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--ink-2);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--gold);
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: var(--radius-s);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 var(--space-3);
  color: var(--ink);
  letter-spacing: 0;
}

h1 {
  font-size: var(--step-5);
}
h2 {
  font-size: var(--step-4);
}
h3 {
  font-size: var(--step-2);
}
h4 {
  font-size: var(--step-1);
}

p {
  margin: 0 0 var(--space-4);
  max-width: 68ch;
}

.container {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  top: -4rem;
  background: var(--ink);
  color: var(--on-ink);
  padding: var(--space-2) var(--space-4);
  z-index: 100;
  border-radius: var(--radius-s);
}
.skip-link:focus {
  top: 1rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.num {
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* ───────────── Buttons ───────────── */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--on-ink);
  --btn-border: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
  border: 1.5px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 600 var(--step-0) / 1.2 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.btn:hover {
  --btn-bg: var(--ink-2);
  --btn-border: var(--ink-2);
  color: var(--btn-fg);
}
.btn-gold {
  --btn-bg: var(--gold);
  --btn-border: var(--gold);
  --btn-fg: #fff;
}
.btn-gold:hover {
  --btn-bg: #9e7629;
  --btn-border: #9e7629;
}
.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-border: var(--line-strong);
}
.btn-ghost:hover {
  --btn-bg: var(--surface);
  --btn-fg: var(--ink);
  --btn-border: var(--ink);
}
.btn-on-ink {
  --btn-bg: transparent;
  --btn-fg: var(--on-ink);
  --btn-border: rgb(246 242 231 / 0.45);
}
.btn-on-ink:hover {
  --btn-bg: rgb(246 242 231 / 0.08);
  --btn-fg: #fff;
  --btn-border: var(--on-ink);
}
.btn-danger {
  --btn-bg: var(--surface);
  --btn-fg: var(--danger);
  --btn-border: #e3b4b0;
}
.btn-danger:hover {
  --btn-bg: var(--danger);
  --btn-fg: #fff;
  --btn-border: var(--danger);
}
.btn-sm {
  min-height: 34px;
  padding: 0.3rem 0.85rem;
  font-size: var(--step--1);
}
.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ───────────── Forms ───────────── */
.field {
  display: grid;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}
.field label,
.field .label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
}
.field .help {
  font-size: var(--step--1);
  color: var(--muted);
  margin: 0;
}
.field .error {
  font-size: var(--step--1);
  color: var(--danger);
  margin: 0;
  font-weight: 500;
}
.input,
.field input:not([type='checkbox']):not([type='radio']):not([type='file']),
.field select,
.field textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.8rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-m);
  background: var(--surface);
  color: var(--text);
  font: 400 var(--step-0) / 1.5 var(--font-body);
}
.field textarea {
  min-height: 110px;
  resize: vertical;
}
.field textarea.long {
  min-height: 260px;
}
.input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ink-3);
  box-shadow: 0 0 0 3px rgb(183 141 51 / 0.25);
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--danger);
}
.check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 500;
  cursor: pointer;
}
.check input {
  width: 20px;
  height: 20px;
  accent-color: var(--ink);
}
.ltr {
  direction: ltr;
  text-align: left;
}
.form-grid {
  display: grid;
  gap: 0 var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* ───────────── Alerts / states ───────────── */
.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  background: var(--surface);
  margin-bottom: var(--space-4);
}
.alert-error {
  background: var(--danger-soft);
  border-color: #efc2bd;
  color: #7a1b15;
}
.alert-success {
  background: var(--success-soft);
  border-color: #b9e0c9;
  color: #134d31;
}
.alert-warn {
  background: var(--warn-soft);
  border-color: #f0d9a4;
  color: #5c3c00;
}
.empty {
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-l);
  padding: var(--space-6) var(--space-5);
  text-align: center;
  color: var(--muted);
  background: var(--surface);
}
.empty p {
  margin-inline: auto;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 600;
  background: var(--porcelain);
  color: var(--muted);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.badge-published,
.badge-on,
.badge-converted {
  background: var(--success-soft);
  color: var(--success);
  border-color: #c3e4d1;
}
.badge-draft,
.badge-new {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: #f1dcab;
}
.badge-archived,
.badge-inactive,
.badge-closed {
  background: #eef0f4;
  color: #555f73;
}
.badge-contacted {
  background: #e7eefb;
  color: #224b9b;
  border-color: #c9d7f3;
}

/* ───────────── Tables ───────────── */
.table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
}
table.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.table th,
.table td {
  padding: 0.75rem 1rem;
  text-align: start;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.table th {
  font-weight: 600;
  color: var(--muted);
  font-size: var(--step--1);
  background: #fafbfd;
}
.table tr:last-child td {
  border-bottom: 0;
}
.table td.actions {
  white-space: nowrap;
  text-align: end;
}

/* Logo: 3D coin rotation around the vertical axis */
.logo-spin {
  display: inline-block;
  width: var(--logo-size);
  height: var(--logo-size);
  perspective: calc(var(--logo-size) * 6);
  flex-shrink: 0;
}
.logo-coin {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.logo-spin.is-spinning .logo-coin {
  animation: coin-spin var(--spin-duration, 8s) linear infinite;
  animation-direction: var(--spin-direction, normal);
}
.logo-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.logo-back {
  transform: rotateY(180deg);
}
@keyframes coin-spin {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .logo-spin.is-spinning .logo-coin {
    animation: none;
  }
  .logo-back {
    display: none;
  }
}
@media (max-width: 600px) {
  .logo-spin.is-spinning .logo-coin {
    animation-duration: calc(var(--spin-duration, 8s) * 1.5);
  }
}


@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

:root[data-palette='emerald'] {
  --ink: #0B3739; --ink-2: #12494B; --ink-3: #1a5f61;
  --gold: #C9A24C; --gold-2: #E0BE6A; --gold-soft: #E6D29C;
  --porcelain: #F2F4F3; --text: #18292A; --muted: #5B6B6B; --line: #D9E0DE; --line-strong: #c3cdca;
  --on-ink: #F2F4F3; --on-ink-muted: #BFD2CF;
}
/* أسماء بديلة مستخدمة في صفحات التدريب */
:root { --pearl: var(--porcelain); --paper: var(--surface); --deep: var(--ink); --gold-deep: #8a6a22; --ok: var(--success); --bad: var(--danger); }
:root[data-palette='emerald'] { --gold-deep: #9C7A2E; }
html[lang='ar'] .num { font-family: var(--font-num); font-weight: 400; }

/* ===== الموقع ===== */
/* ───────────── Public website ───────────── */

.muted {
  color: var(--muted);
}
.lede {
  font-size: var(--step-1);
  color: var(--muted);
  line-height: 1.7;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(255 255 255 / 0.94);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 72px;
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
}
.brand-text {
  display: grid;
  line-height: 1.2;
}
.brand-name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
}
.brand-sub {
  font-size: 0.78rem;
  color: var(--muted);
}
.main-nav {
  margin-inline-start: auto;
}
.nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}
.nav-links a {
  display: block;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
  font-size: 0.95rem;
}
.nav-links a:hover {
  background: var(--porcelain);
  color: var(--ink);
}
.nav-links a[aria-current='page'] {
  background: var(--ink);
  color: var(--on-ink);
}
.mobile-menu {
  display: none;
  margin-inline-start: auto;
}
.mobile-menu summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  padding: 0.5rem 0.9rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  font-weight: 600;
  min-height: 44px;
}
.mobile-menu summary::-webkit-details-marker {
  display: none;
}
.burger,
.burger::before,
.burger::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  position: relative;
}
.burger::before,
.burger::after {
  content: '';
  position: absolute;
}
.burger::before {
  top: -6px;
}
.burger::after {
  top: 6px;
}
.mobile-menu-panel {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  padding: var(--space-3) 1rem var(--space-5);
}
.mobile-menu-panel .nav-links {
  flex-direction: column;
}
.mobile-menu-panel .nav-links a {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-m);
}
@media (max-width: 1060px) {
  .main-nav {
    display: none;
  }
  .mobile-menu {
    display: block;
  }
}
@media (max-width: 480px) {
  .brand-sub {
    display: none;
  }
}

/* Hero */
.hero {
  background:
    radial-gradient(1100px 500px at 15% 10%, rgb(255 255 255 / 0.06), transparent 60%),
    linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 100%);
  color: var(--on-ink);
  padding-block: var(--space-8) var(--space-7);
  overflow: hidden;
}
.hero h1 {
  color: #fff;
  margin-bottom: var(--space-4);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--space-7);
  align-items: center;
}
.hero-kicker {
  color: var(--gold-2);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.hero-body p {
  color: var(--on-ink-muted);
  font-size: var(--step-1);
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.hero-emblem {
  margin-bottom: var(--space-4);
}
.hero-visual {
  display: flex;
  justify-content: center;
}
.hero-soroban {
  margin: 0;
  width: 100%;
  max-width: 470px;
  background: var(--porcelain);
  border-radius: var(--radius-l);
  padding: var(--space-4) var(--space-4) var(--space-3);
  box-shadow: 0 30px 60px rgb(0 0 0 / 0.3);
}
.hero-soroban figcaption {
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
  padding-top: var(--space-2);
}
.hero-photo {
  border-radius: var(--radius-l);
  box-shadow: 0 30px 60px rgb(0 0 0 / 0.3);
}
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .hero {
    padding-block: var(--space-7) var(--space-6);
  }
}

/* Soroban */
.soroban {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.soroban.is-interactive .bead {
  cursor: pointer;
}
.soroban.is-interactive .bead:hover path {
  filter: brightness(1.12);
}
.soroban .rod:focus-visible {
  outline: none;
}
.soroban .rod:focus-visible > rect:nth-of-type(1),
.soroban .rod:focus-visible .rod-label {
  fill: var(--gold);
}
.soroban .rod-label {
  font: 600 13px var(--font-body);
  fill: var(--muted);
}
.soroban .rod-glow {
  fill: rgb(183 141 51 / 0.16);
  stroke: var(--gold);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}

/* Stats */
.stats-band {
  background: var(--ink);
  color: var(--on-ink);
  border-top: 1px solid rgb(255 255 255 / 0.08);
  padding-block: var(--space-6);
}
.stats-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}
.stat {
  flex: 1 1 160px;
  padding: var(--space-2) var(--space-5);
  border-inline-start: 3px solid var(--gold);
  display: flex;
  flex-direction: column-reverse;
  margin-block: var(--space-2);
}
.stat dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1.1;
  color: #fff;
}
.stat dt {
  color: var(--on-ink-muted);
  font-size: 0.95rem;
}
.stats-light {
  margin-block: var(--space-6);
}
.stats-light .stat dd {
  color: var(--ink);
}
.stats-light .stat dt {
  color: var(--muted);
}

/* Sections */
.section {
  padding-block: var(--space-8);
}
.section + .section {
  padding-top: 0;
}
.section.section-tint,
.section.section-tint + .section,
.section.cta-panel + .section,
.section + .section.cta-panel {
  padding-top: var(--space-8);
}
.section.cta-panel + .section.cta-panel {
  padding-top: 0;
}
.section-tint {
  background: var(--surface);
  border-block: 1px solid var(--line);
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.section-head h2 {
  margin: 0;
}
.section-head .lede {
  margin: var(--space-2) 0 0;
}
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
}
.split > :only-child {
  grid-column: 1 / -1;
}
.split-photo {
  border-radius: var(--radius-l);
  width: 100%;
  object-fit: cover;
}
@media (max-width: 820px) {
  .split {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

/* Year rail */
.year-rail {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5);
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-2);
}
.year-rail a {
  display: grid;
  text-align: center;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-m);
  border: 1.5px solid var(--line-strong);
  text-decoration: none;
  color: var(--ink);
  background: var(--surface);
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.2;
  white-space: nowrap;
}
.year-rail small {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--muted);
}
.year-rail a[aria-current='page'],
.year-rail a:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}
.year-rail a[aria-current='page'] small,
.year-rail a:hover small {
  color: var(--on-ink-muted);
}
.year-block + .year-block {
  margin-top: var(--space-7);
}
.year-title {
  font-size: var(--step-3);
  border-bottom: 2px solid var(--gold);
  padding-bottom: var(--space-2);
  display: block;
}

/* Cards */
.card-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
}
.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s;
}
.card:hover {
  border-color: var(--gold);
  color: var(--text);
}
.card-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--porcelain);
}
.card-img.placeholder {
  background:
    repeating-linear-gradient(90deg, transparent 0 34px, rgb(15 33 66 / 0.06) 34px 36px),
    linear-gradient(180deg, var(--porcelain), #e8ecf3);
}
.card-body {
  padding: var(--space-4) var(--space-5) var(--space-5);
}
.card-body h3,
.card-title {
  font-size: var(--step-1);
  margin: var(--space-1) 0 var(--space-2);
}
.card-body p {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0;
}
.card-meta {
  font-size: 0.85rem;
  color: var(--gold);
  font-weight: 600;
}
.card-tags {
  font-size: 0.85rem;
}

/* Governorate chips */
.gov-chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}
.gov-chips a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  background: var(--porcelain);
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
}
.gov-chips a:hover {
  border-color: var(--gold);
  background: var(--surface);
}
.gov-chips small {
  color: var(--muted);
  font-weight: 500;
}

/* CTA panels */
.cta-panel .cta-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6);
  border-radius: var(--radius-l);
  flex-wrap: wrap;
}
.cta-trainer_cta .cta-inner {
  background: var(--gold-soft);
  border: 1px solid #e3cf98;
}
.cta-lab_cta .cta-inner {
  background: var(--surface);
  border: 1px solid var(--line);
}
.cta-panel h2 {
  font-size: var(--step-3);
}
.cta-panel .lede {
  margin: 0;
}

/* Partners */
.partner-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
}
.partner {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: var(--space-3);
  text-align: center;
  display: grid;
  gap: var(--space-1);
}
.partner img,
.partner-ph {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-s);
  background: var(--porcelain);
}
.partner span {
  font-weight: 600;
}
.partner small {
  color: var(--muted);
}
.photo-strip,
.mosaic {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(46%, 220px), 1fr));
}
.photo-strip img,
.mosaic img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-m);
}
.mosaic li {
  position: relative;
}
.mosaic-cap {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  padding-top: var(--space-1);
}

/* News */
.news-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}
.news-layout > :only-child {
  grid-column: 1 / -1;
}
@media (max-width: 860px) {
  .news-layout {
    grid-template-columns: 1fr;
  }
}
.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}
.news-item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  text-decoration: none;
  color: var(--text);
}
.news-item:hover {
  border-color: var(--gold);
  color: var(--text);
}
.news-item h3,
.news-item .card-title {
  font-size: var(--step-1);
  margin: var(--space-1) 0;
}
.news-item p {
  color: var(--muted);
  margin: 0;
  font-size: 0.95rem;
}
.news-thumb {
  width: 132px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--radius-m);
  flex-shrink: 0;
}
@media (max-width: 520px) {
  .news-thumb {
    width: 90px;
    height: 80px;
  }
}
.events {
  background: var(--ink);
  color: var(--on-ink);
  border-radius: var(--radius-l);
  padding: var(--space-5);
}
.events h3,
.events h2 {
  color: #fff;
  font-size: var(--step-1);
}
.events ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-4);
}
.events li {
  display: grid;
  border-inline-start: 3px solid var(--gold);
  padding-inline-start: var(--space-3);
}
.events time {
  color: var(--gold-2);
  font-size: 0.85rem;
  font-weight: 600;
}
.events a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
}
.events a:hover {
  text-decoration: underline;
}

/* Videos */
.video-grid {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
}
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: #000;
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-grid p {
  margin: var(--space-2) 0 0;
  font-weight: 600;
}

/* Testimonials */
.quotes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
.quotes blockquote {
  margin: 0;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: var(--space-5);
  border-top: 3px solid var(--gold);
}
.quotes footer {
  color: var(--muted);
  font-size: 0.95rem;
}
.quotes strong {
  color: var(--ink);
}

/* Join band */
.join-band {
  background: linear-gradient(160deg, var(--ink), var(--ink-2));
  color: var(--on-ink);
  padding-block: var(--space-7);
}
.join-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.join-band h2 {
  color: #fff;
}
.join-band p {
  color: var(--on-ink-muted);
  margin: 0;
}

/* Inner pages */
.page-head {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding-block: var(--space-5) var(--space-6);
}
.page-head h1 {
  font-size: var(--step-4);
  margin: 0;
}
.page-head .lede {
  margin: var(--space-2) 0 0;
}
.crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  margin: 0 0 var(--space-3);
  font-size: 0.88rem;
  color: var(--muted);
}
.crumbs li + li::before {
  content: '‹';
  margin-inline-end: var(--space-2);
  color: var(--line-strong);
}
.crumbs a {
  color: var(--muted);
}
.page-body {
  padding-block: var(--space-6) var(--space-8);
}
.page-body.narrow {
  max-width: 860px;
}
.section-block {
  margin-top: var(--space-7);
}
.big-count {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--ink);
  border-inline-start: 4px solid var(--gold);
  padding-inline-start: var(--space-3);
}
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
}
.facts div {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: var(--space-3) var(--space-4);
}
.facts dt {
  font-size: 0.85rem;
  color: var(--muted);
}
.facts dd {
  margin: 0;
  font-weight: 600;
  color: var(--ink);
}
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  align-items: end;
  margin-bottom: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: var(--space-4) var(--space-5);
}
.filter-bar .field {
  margin: 0;
  min-width: 200px;
  flex: 1;
}
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.tabs a {
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1.5px solid var(--line-strong);
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
  background: var(--surface);
}
.tabs a[aria-current='page'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}
.pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-5);
  gap: var(--space-3);
}
.article {
  max-width: 820px;
}
.article p {
  font-size: 1.08rem;
  line-height: 1.95;
}
.article-cover {
  border-radius: var(--radius-l);
  margin-block: var(--space-4) var(--space-5);
  width: 100%;
}
.event-date {
  font-weight: 600;
  color: var(--ink);
}
.not-found {
  text-align: center;
}
.not-found p {
  margin-inline: auto;
}
.nf-code {
  font-family: var(--font-display);
  font-size: 4rem;
  color: var(--gold);
  margin: 0;
}

/* Footer */
.site-footer {
  background: var(--ink);
  color: var(--on-ink-muted);
  padding-top: var(--space-7);
  margin-top: 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-6);
}
@media (max-width: 760px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}
.footer-name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: #fff;
  margin: var(--space-2) 0 0;
}
.footer-full {
  margin: 0 0 var(--space-3);
}
.footer-h {
  font-size: var(--step-0);
  color: var(--gold-2);
  font-family: var(--font-body);
  font-weight: 600;
}
.footer-links,
.footer-social {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}
.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.site-footer a {
  color: var(--on-ink);
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--gold-2);
  text-decoration: underline;
}
.footer-bottom {
  border-top: 1px solid rgb(255 255 255 / 0.1);
  margin-top: var(--space-6);
  padding-block: var(--space-4);
  font-size: 0.85rem;
}
.wa-float {
  position: fixed;
  inset-inline-start: 18px;
  bottom: 18px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #1fa855;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.25);
  z-index: 60;
}
.wa-float:hover {
  color: #fff;
  background: #188a45;
}

/* ───────────── Trainer finder ───────────── */
.finder-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  align-items: end;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: var(--space-4) var(--space-5);
}
.finder-controls .field {
  margin: 0;
  min-width: 190px;
}
.finder-controls .grow {
  flex: 1;
}
.finder-msg {
  min-height: var(--space-4);
  margin-block: var(--space-3);
}
.finder-msg p {
  margin: 0;
}
.finder-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.finder-map {
  height: 600px;
  border-radius: var(--radius-l);
  border: 1px solid var(--line);
  position: sticky;
  top: 90px;
  z-index: 1;
  background: #e8edf3;
}
.finder.is-compact .finder-map {
  height: 440px;
}
.finder-list ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}
.finder-list > .btn {
  margin-top: var(--space-4);
  width: 100%;
}
.finder-count {
  margin: 0 0 var(--space-3);
  color: var(--muted);
}
.trainer {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: var(--space-4);
}
.trainer.is-selected {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold-soft);
}
.trainer-head {
  display: flex;
  gap: var(--space-3);
}
.trainer h3 {
  font-size: var(--step-1);
  margin: 0 0 var(--space-1);
  font-family: var(--font-body);
  font-weight: 600;
}
.trainer p {
  margin: 0;
}
.trainer-place {
  font-weight: 500;
}
.trainer-meta {
  color: var(--muted);
  font-size: 0.9rem;
}
.trainer-photo,
.trainer-initial {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.trainer-initial {
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--gold-2);
  font-family: var(--font-display);
  font-size: 1.3rem;
}
.trainer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
@media (max-width: 900px) {
  .finder-grid {
    grid-template-columns: 1fr;
  }
  .finder-map {
    position: relative;
    top: 0;
    height: 380px;
  }
}
.pin span {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50% 50% 50% 0;
  background: var(--gold);
  border: 3px solid #fff;
  transform: rotate(-45deg);
  box-shadow: 0 3px 8px rgb(0 0 0 / 0.35);
}
.popup {
  font-family: var(--font-body);
  direction: rtl;
  text-align: right;
  display: grid;
  gap: 4px;
  min-width: 190px;
}
.popup strong {
  font-size: 1rem;
  color: var(--ink);
}
.popup-muted {
  color: var(--muted);
}
.popup-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
  background-color: rgb(183 141 51 / 0.35) !important;
}
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
  background-color: var(--ink) !important;
  color: #fff !important;
  font-family: var(--font-body);
  font-weight: 600;
}

/* ───────────── Soroban lab ───────────── */
.lab-tabs,
.join-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.lab-tabs button,
.join-tabs button {
  font: 600 1rem var(--font-body);
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  min-height: 44px;
}
.lab-tabs button.is-active,
.join-tabs button.is-active {
  background: var(--ink);
  color: var(--on-ink);
  border-color: var(--ink);
}
.lab-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: var(--space-5);
}
.lab-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: center;
  margin-bottom: var(--space-4);
}
.lab-prefs {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
}
.lab-rods {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
}
.lab-rods select {
  min-height: 38px;
  border-radius: var(--radius-s);
  border: 1.5px solid var(--line-strong);
  padding: 0 0.5rem;
  font: inherit;
  background: var(--surface);
}
.lab-board {
  max-width: 820px;
  margin-inline: auto;
}
.lab-value {
  text-align: center;
  font-size: var(--step-1);
  margin: var(--space-3) 0;
  min-height: 2em;
}
.lab-value strong {
  font-family: var(--font-display);
  color: var(--ink);
  font-size: var(--step-2);
}
.lab-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.lab-tip,
.lab-hint {
  text-align: center;
  color: var(--muted);
  margin: var(--space-4) auto 0;
}
.lab-hint {
  background: var(--gold-soft);
  color: var(--text);
  border-radius: var(--radius-m);
  padding: var(--space-3) var(--space-4);
}
.lab-status {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
}
.lab-practice {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
@media (max-width: 720px) {
  .lab-practice {
    grid-template-columns: 1fr;
  }
}
.lab-question {
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-l);
  padding: var(--space-4) var(--space-5);
}
.lab-operands {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.5;
  direction: ltr;
  text-align: right;
}
.lab-operands li {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.op-sign {
  color: var(--gold-2);
  min-width: 1ch;
}
.op-line {
  border-top: 2px solid rgb(255 255 255 / 0.4);
  margin-block: 0.25rem;
}
.lab-countdown {
  margin: var(--space-3) 0 0;
  color: var(--on-ink-muted);
  font-size: 0.95rem;
  text-align: center;
}
.lab-countdown.is-low {
  color: #ffb4a8;
  font-weight: 600;
}
.lab-feedback {
  text-align: center;
  font-weight: 600;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-m);
  margin-inline: auto;
  max-width: 520px;
}
.lab-feedback.is-correct {
  background: var(--success-soft);
  color: var(--success);
  animation: pop 0.35s ease-out;
}
.lab-feedback.is-wrong,
.lab-feedback.is-timeout {
  background: var(--warn-soft);
  color: var(--warn);
}
@keyframes pop {
  0% {
    transform: scale(0.92);
  }
  60% {
    transform: scale(1.04);
  }
  100% {
    transform: scale(1);
  }
}
.level-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}
.level-card {
  width: 100%;
  height: 100%;
  text-align: start;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--porcelain);
  cursor: pointer;
  font: inherit;
  color: var(--text);
}
.level-card:hover {
  border-color: var(--gold);
  background: var(--surface);
}
.level-card strong {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--ink);
}
.level-card small {
  color: var(--muted);
}
.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0;
}
.results-grid div {
  background: var(--porcelain);
  border-radius: var(--radius-m);
  padding: var(--space-3) var(--space-4);
}
.results-grid dt {
  color: var(--muted);
  font-size: 0.9rem;
}
.results-grid dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--ink);
}
.lab-results .lab-actions {
  justify-content: flex-start;
}
.solution {
  margin-top: var(--space-5);
  border-top: 1px dashed var(--line-strong);
  padding-top: var(--space-5);
}
.solution-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.solution-text {
  text-align: center;
  font-size: var(--step-1);
  font-weight: 500;
  margin: var(--space-3) auto var(--space-1);
  min-height: 3.4em;
  max-width: 60ch;
}
.solution-value {
  text-align: center;
  color: var(--muted);
  margin-inline: auto;
}

/* ───────────── Join ───────────── */
.join-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: var(--space-5);
}
.join-form .span-all {
  grid-column: 1 / -1;
}
.radio-group {
  border: 0;
  padding: 0;
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  align-items: center;
}
.radio-group legend {
  width: 100%;
  margin-bottom: var(--space-1);
}
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.join-done {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
  border-radius: var(--radius-l);
  padding: var(--space-6);
  text-align: center;
}
.join-done p {
  margin-inline: auto;
}

/* ===== إضافات: شريط الإعلانات، جدول الضرب، المنتجات، الأسئلة، اللغة ===== */
.adbar{background:var(--gold);color:var(--ink);font-weight:600;font-size:.95rem;text-align:center;padding:.55rem 3rem;position:relative;line-height:1.5}
.adbar.red{background:var(--danger);color:#fff}.adbar.green{background:var(--success);color:#fff}
.adbar a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.adbar .x{position:absolute;inset-inline-end:10px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;border:0;background:rgb(0 0 0/.12);color:inherit;cursor:pointer;font-size:16px}
.adbar .dots{display:inline-flex;gap:4px;margin-inline-start:10px;vertical-align:middle}.adbar .dots i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.35}.adbar .dots i.on{opacity:1}
.lang-btn{border:1px solid var(--line-strong);background:transparent;color:var(--ink);border-radius:999px;padding:.35rem .9rem;font:inherit;font-size:.9rem;cursor:pointer;white-space:nowrap}
.header-inner .header-actions{display:flex;align-items:center;gap:.5rem;margin-inline-start:auto}
.main-nav{margin-inline-start:0}
.cta-panel.cta-multiply{background:var(--ink);color:var(--on-ink);border-radius:var(--radius-l);margin-inline:auto;max-width:var(--container)}
.cta-multiply .cta-inner{padding:var(--space-6) var(--space-6)}
.cta-multiply h2{color:#fff}.cta-multiply .lede,.cta-multiply p{color:var(--on-ink-muted)}
.mult-art{display:flex;align-items:center;gap:.8rem;justify-content:center;margin-top:1rem}
.mult-art .node{width:70px;height:70px;border-radius:16px;color:#fff;display:flex;align-items:center;justify-content:center;font-size:2.1rem}
.mult-art .o{background:#F39C2B;box-shadow:0 6px 0 #B8711A}.mult-art .g{background:#7CB342;box-shadow:0 6px 0 #5A8A2A}.mult-art .p{background:#8E5BC4;box-shadow:0 6px 0 #653F94}
.mult-art .x{font-family:var(--font-display);font-size:1.8rem;color:var(--gold-2)}
.prod-grid{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.prod{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);overflow:hidden;display:flex;flex-direction:column}
.prod .img{aspect-ratio:4/3;background:var(--ink);display:flex;align-items:center;justify-content:center;color:var(--gold-soft)}.prod .img img{width:100%;height:100%;object-fit:cover}
.prod .b{padding:var(--space-4) var(--space-5) var(--space-5);display:flex;flex-direction:column;gap:.35rem;flex:1}
.prod .kind{font-size:.8rem;color:var(--gold);font-weight:600}.prod h3{font-size:var(--step-1);margin:0}.prod p{color:var(--muted);font-size:.95rem;flex:1;margin:0}
.faq-list{max-width:820px;display:flex;flex-direction:column;gap:.6rem}
.faq-list details{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);padding:0 1.2rem}
.faq-list summary{cursor:pointer;list-style:none;padding:1rem 0;font-family:var(--font-display);font-weight:700;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq-list summary::-webkit-details-marker{display:none}.faq-list summary::after{content:"+";font-size:1.5rem;color:var(--gold)}.faq-list details[open] summary::after{content:"−"}
.faq-list .a{padding:0 0 1.1rem;color:var(--muted);white-space:pre-line}
.hero-soroban .bead .face{transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.soroban-svg{width:100%;height:auto;display:block}
.install-bar{position:fixed;bottom:0;inset-inline:0;z-index:55;background:var(--surface);border-top:1px solid var(--line);padding:.8rem 1rem;display:flex;align-items:center;gap:.8rem;justify-content:center;box-shadow:0 -6px 20px rgb(0 0 0/.08)}
.home-map{height:420px;border-radius:var(--radius-l);border:1px solid var(--line);overflow:hidden;margin-top:var(--space-5)}
.search-field{display:flex;gap:.5rem;align-items:end;flex-wrap:wrap}
[hidden]{display:none!important}
.page-head .num{font-family:var(--font-num)}
.article-cover{width:100%;max-height:460px;object-fit:cover;border-radius:var(--radius-l);margin-bottom:var(--space-5)}
.lab-wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--space-6);align-items:start}
@media (max-width:900px){.lab-wrap{grid-template-columns:1fr}}
.legal{max-width:820px;white-space:pre-line;line-height:1.9}
.cta-multiply{margin-top:var(--space-7)}
.brand{flex-shrink:1;min-width:0}.brand-name{white-space:nowrap}
@media (max-width:480px){.brand-name{font-size:1.05rem}.header-inner{gap:var(--space-2)}.lang-btn{padding:.3rem .6rem;font-size:.8rem}}
.nav-links a{padding:.45rem .5rem;font-size:.86rem}

/* اللوجو بيلف ببطء بشكل مجسم (3D) */
.brand img,.footer-brand img{animation:logo3d 7s linear infinite;transform-style:preserve-3d;backface-visibility:visible;filter:drop-shadow(0 4px 8px rgb(0 0 0/.25))}
@keyframes logo3d{from{transform:perspective(500px) rotateY(0deg)}to{transform:perspective(500px) rotateY(360deg)}}
@media (prefers-reduced-motion:reduce){.brand img,.footer-brand img{animation:none}}

/* ===== مراجعة التنسيق العام: إيقاع موحّد بين الأقسام، كروت أنعم، عناوين أهدأ ===== */
.section{padding-block:var(--space-7)}
.section.section-tint,.section.section-tint + .section,.section.cta-panel + .section,.section + .section.cta-panel{padding-top:var(--space-7)}
.section-head{margin-bottom:var(--space-5);align-items:center}
.section-head h2{font-size:clamp(1.45rem,2.6vw,2rem)}
.section-head .lede{font-size:1rem}
h1{font-size:clamp(1.8rem,3.6vw,2.6rem)}
.page-head h1{font-size:clamp(1.6rem,3vw,2.2rem)}
.card{transition:transform .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgb(15 33 66/.14)}
.card-img{aspect-ratio:16/10}
.btn{transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-gold:hover{box-shadow:0 8px 20px rgb(183 141 51/.35)}
.stats-band{padding-block:var(--space-5)}
.stat dd{font-size:clamp(1.6rem,3vw,2.3rem)}
.gov-chips a{transition:background .2s,color .2s,transform .2s}
.gov-chips a:hover{transform:translateY(-2px)}
.trainer{transition:transform .2s,box-shadow .2s}
.trainer:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgb(15 33 66/.1)}
.partner{transition:transform .2s}.partner:hover{transform:translateY(-3px)}
.mosaic img,.photo-strip img{transition:transform .35s ease}
.mosaic li:hover img,.photo-strip li:hover img{transform:scale(1.03)}
.quotes blockquote{position:relative}
.quotes blockquote::before{content:"”";position:absolute;top:-.2em;inset-inline-start:.6rem;font-family:var(--font-display);font-size:3.2rem;color:var(--gold);opacity:.35;line-height:1}
.site-footer{padding-top:var(--space-6)}
.cta-panel .cta-inner{box-shadow:0 20px 50px rgb(8 21 40/.18)}
.soroban-band .hero-copy h2{font-size:clamp(1.5rem,2.8vw,2.1rem)}
.soroban-band .hero-body p{font-size:1rem}
@media (max-width:700px){.section{padding-block:var(--space-6)}.section-head{flex-direction:column;align-items:flex-start}}
.pin{background:none;border:0}

/* ===== زخارف متحركة خفيفة على الخلفيات الغامقة ===== */
.has-deco{position:relative;overflow:hidden}
.has-deco > :where(*:not(.deco)){position:relative;z-index:1}
.deco{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.deco span{position:absolute;color:#f1e5c3;opacity:.06;font-family:var(--font-display);font-weight:700;line-height:1;animation:deco-drift ease-in-out infinite alternate;will-change:transform;user-select:none}
.deco .deco-bead{width:.9em;height:.55em;background:linear-gradient(180deg,#f1e5c3,#b78d33);clip-path:polygon(0 50%,25% 0,75% 0,100% 50%,75% 100%,25% 100%);opacity:.07}
@keyframes deco-drift{from{transform:translate(0,0) rotate(var(--r,0deg))}to{transform:translate(6px,-14px) rotate(calc(var(--r,0deg) + 6deg))}}
.cta-multiply .deco span,.cta-inner .deco span{opacity:.05}
@media (prefers-reduced-motion:reduce){.deco span{animation:none}}

/* ===== الفوتر الاحترافي ===== */
.site-footer{padding-top:0;margin-top:0;border-top:3px solid var(--gold)}
.footer-top{padding-block:var(--space-6) var(--space-5)}
.site-footer .footer-grid{display:grid;grid-template-columns:1.6fr .8fr .8fr 1.2fr;gap:var(--space-5) var(--space-6);align-items:start}
.footer-logo{display:flex;align-items:center;gap:.8rem}
.footer-logo img{height:52px;width:auto}
.site-footer .footer-name{margin:0;font-size:1.35rem;line-height:1.2}
.site-footer .footer-full{margin:.1rem 0 0;font-size:.85rem;color:var(--on-ink-muted)}
.site-footer .footer-about{margin:var(--space-3) 0 0;font-size:.92rem;line-height:1.8;color:var(--on-ink-muted);max-width:42ch}
.site-footer .footer-social{display:flex;gap:.5rem;margin-top:var(--space-4)}
.site-footer .footer-social a{width:38px;height:38px;border-radius:50%;border:1px solid rgb(241 229 195/.3);display:grid;place-items:center;color:#f1e5c3;transition:.2s}
.site-footer .footer-social a:hover{background:var(--gold);color:var(--deep);border-color:var(--gold);transform:translateY(-2px)}
.site-footer .footer-social svg{width:18px;height:18px}
.site-footer .footer-h{font-family:var(--font-display);font-size:.95rem;color:var(--gold-2);margin:0 0 .8rem;padding-bottom:.5rem;position:relative}
.site-footer .footer-h::after{content:"";position:absolute;bottom:0;inset-inline-start:0;width:28px;height:2px;background:var(--gold);border-radius:2px}
.site-footer .footer-links{gap:.45rem}
.site-footer .footer-links a{font-size:.92rem;color:var(--on-ink-muted);display:inline-flex;align-items:center;gap:.4rem;transition:.2s}
.site-footer .footer-links a::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:0;transition:.2s;transform:translateX(4px)}
html[dir='ltr'] .site-footer .footer-links a::before{transform:translateX(-4px)}
.site-footer .footer-links a:hover{color:#fff;text-decoration:none}
.site-footer .footer-links a:hover::before{opacity:1;transform:none}
.contact-list{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.contact-list li,.contact-list a{display:flex;align-items:center;gap:.7rem;color:var(--on-ink);text-decoration:none}
.contact-list i{width:38px;height:38px;border-radius:10px;background:rgb(241 229 195/.08);border:1px solid rgb(241 229 195/.2);display:grid;place-items:center;color:var(--gold-2);flex:none;transition:.2s}
.contact-list i svg{width:18px;height:18px}
.contact-list a:hover i{background:var(--gold);color:var(--deep)}
.contact-list small{display:block;font-size:.72rem;color:var(--on-ink-muted);line-height:1.2}
.contact-list b{font-weight:600;font-size:.92rem}
.site-footer .footer-bottom{margin-top:0;border-top:1px solid rgb(255 255 255/.08);background:rgb(0 0 0/.18);padding-block:.9rem;font-size:.82rem}
.footer-bottom-in{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.footer-mini{display:flex;gap:1rem}
.footer-mini a{color:var(--on-ink-muted)}
@media (max-width:900px){.site-footer .footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.site-footer .footer-grid{grid-template-columns:1fr}.footer-bottom-in{justify-content:center;text-align:center}}

/* ===== الأزرار الذهبية: شامبانيا فاتحة وناعمة بدل الذهبي الغامق ===== */
.btn-gold{background:linear-gradient(135deg,#f6ecc9 0%,#e3cb86 100%);color:var(--ink);border:1px solid rgb(183 141 51/.45);box-shadow:0 2px 8px rgb(183 141 51/.18);font-weight:700}
.btn-gold:hover{background:linear-gradient(135deg,#f9f1d6 0%,#e9d59a 100%);color:var(--ink);box-shadow:0 8px 18px rgb(183 141 51/.28)}
.hero .btn-gold,.stats-band .btn-gold,.cta-multiply .btn-gold,.join-band .btn-gold,.soroban-band .btn-gold{border-color:rgb(241 229 195/.5)}
.btn-on-ink{border-color:rgb(241 229 195/.45);color:#f1e5c3}
.btn-on-ink:hover{background:rgb(241 229 195/.12)}
.lang-btn:hover{background:var(--porcelain)}

/* ===== الخريطة ملء الشاشة ===== */
.map-fullscreen{position:fixed!important;inset:0!important;z-index:200!important;height:100vh!important;width:100vw!important;border-radius:0!important;border:0!important}
body.map-full-open{overflow:hidden}
.map-full-ctl a{display:flex;align-items:center;justify-content:center;color:var(--ink)}
.map-exit{position:absolute;top:14px;inset-inline-start:14px;z-index:1000;width:46px;height:46px;border-radius:50%;background:var(--ink);color:#f1e5c3;border:1px solid rgb(241 229 195/.4);font-size:20px;cursor:pointer;box-shadow:0 6px 18px rgb(0 0 0/.3)}
.finder-map{height:min(78vh,760px)}
.finder-grid{grid-template-columns:1fr}
.finder-grid .finder-list ol{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.finder-map{position:relative;top:0}

/* ===== الأزرار الذهبية: نسخة ألطف (كريمي هادي بنص ذهبي غامق) ===== */
.btn-gold{background:linear-gradient(180deg,#fdf8ec 0%,#f3e7c6 100%);color:#6e5417;border:1px solid #e3d3a4;box-shadow:0 1px 3px rgb(110 84 23/.12),inset 0 1px 0 #fff;font-weight:700}
.btn-gold:hover{background:linear-gradient(180deg,#fffdf6 0%,#f7edd2 100%);color:#5a4411;border-color:#d9c48a;box-shadow:0 6px 16px rgb(110 84 23/.18),inset 0 1px 0 #fff}

/* ===== كروت المحافظات: اللوجو فوق الاسم ===== */
.gov-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:.9rem}
.gov-cards-lg{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));list-style:none;padding:0;margin:0}
.gov-card{display:flex;flex-direction:column;align-items:center;gap:.45rem;padding:1rem .6rem .9rem;background:var(--paper,#fff);border:1px solid var(--line,#dde2eb);border-radius:18px;text-decoration:none;color:var(--text,#15203a);text-align:center;transition:transform .2s,box-shadow .2s,border-color .2s}
.gov-card:hover{transform:translateY(-3px);border-color:var(--gold,#b78d33);box-shadow:0 14px 30px -18px rgba(15,33,66,.45)}
.gov-card strong{font-family:"Cairo",sans-serif;font-size:1rem;line-height:1.3}
.gov-card small{font-size:.78rem;color:var(--muted,#5a6680)}
.gov-logo{width:72px;height:72px;object-fit:contain;display:block;filter:drop-shadow(0 4px 8px rgba(15,33,66,.15))}
.gov-cards-lg .gov-logo{width:96px;height:96px}
.gov-logo-fallback{position:relative;display:grid;place-items:center}
.gov-logo-fallback svg{width:100%;height:100%;position:absolute;inset:0}
.gov-logo-fallback b{position:relative;font-family:"Cairo",sans-serif;font-weight:800;font-size:1.7rem;color:#f1e5c3;line-height:1;padding-bottom:.2em}
.gov-cards-lg .gov-logo-fallback b{font-size:2.2rem}

/* ===== استكشف: خارج مصر + جولة ٣٦٠ ===== */
.explore-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media (max-width:760px){.explore-grid{grid-template-columns:1fr}}
.explore-tile{position:relative;display:grid;grid-template-rows:200px 1fr;border-radius:24px;overflow:hidden;text-decoration:none;color:#f2f4f3;background:linear-gradient(160deg,#1a2f55,#0f2142 60%,#081528);border:1px solid rgba(241,229,195,.18);box-shadow:0 24px 50px -30px rgba(8,21,40,.7);transition:transform .25s,box-shadow .25s}
.explore-tile:hover{transform:translateY(-4px);box-shadow:0 30px 60px -28px rgba(8,21,40,.8)}
.explore-tile .tile-art{position:relative;display:grid;place-items:center;color:rgba(241,229,195,.75);background:radial-gradient(600px 200px at 50% 120%,rgba(183,141,51,.25),transparent 70%)}
.explore-tile .tile-art svg{width:150px;height:150px;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.explore-tile:hover .tile-art svg{transform:rotate(-8deg) scale(1.06)}
.tile-tour .tile-art{background-image:var(--cover,none);background-size:cover;background-position:center}
.tile-tour .tile-art::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,21,40,.95),rgba(8,21,40,.35))}
.tile-tour .tile-art svg{position:relative}
.explore-tile .flags{position:absolute;bottom:12px;inset-inline-start:16px;display:flex;gap:6px}
.explore-tile .flag{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center;font-size:1.2rem;border:1px solid rgba(241,229,195,.3);backdrop-filter:blur(4px)}
.explore-tile .tile-body{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;position:relative}
.explore-tile .kicker{font-size:.78rem;letter-spacing:.06em;color:var(--gold-soft,#f1e5c3);font-weight:600}
.explore-tile h3{font-family:"Cairo",sans-serif;font-size:1.45rem;margin:0;color:#fff;line-height:1.3}
.explore-tile p{margin:0;color:#c9d1e0;font-size:.95rem;line-height:1.7;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.explore-tile .btn{margin-top:auto;align-self:flex-start}

/* ===== صفحة خارج مصر ===== */
.intl-hero{position:relative;background:linear-gradient(160deg,#0f2142,#081528);color:#f2f4f3;padding:4rem 0 3.5rem;overflow:hidden}
.intl-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(241,229,195,.18) 1px,transparent 1.5px);background-size:22px 22px;mask-image:radial-gradient(60% 80% at 70% 50%,#000,transparent);opacity:.7}
.intl-hero .container{position:relative;display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}
@media (max-width:860px){.intl-hero .container{grid-template-columns:1fr}}
.intl-hero h1{font-family:"Cairo",sans-serif;font-size:clamp(1.8rem,4vw,2.8rem);color:#fff;margin:.3rem 0 .8rem}
.intl-hero .lede{color:#c9d1e0;font-size:1.05rem;max-width:60ch}
.intl-hero .kicker{color:var(--gold-soft,#f1e5c3);font-weight:600;letter-spacing:.06em;font-size:.85rem}
.intl-hero .globe{justify-self:center;width:min(300px,70vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2a4680,#0b1a36 70%);box-shadow:inset -20px -20px 50px rgba(0,0,0,.5),0 30px 60px -20px rgba(0,0,0,.7),0 0 0 1px rgba(241,229,195,.25);position:relative;overflow:hidden;animation:spinGlobe 40s linear infinite}
.intl-hero .globe::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 38px,rgba(241,229,195,.12) 38px 39px),repeating-linear-gradient(0deg,transparent 0 38px,rgba(241,229,195,.12) 38px 39px);border-radius:50%}
.intl-hero .globe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
@keyframes spinGlobe{to{background-position:300px 0}}
@media (prefers-reduced-motion:reduce){.intl-hero .globe{animation:none}}
.intl-points{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:-2rem;position:relative;z-index:1}
.intl-points li{list-style:none;background:#fff;border:1px solid var(--line,#dde2eb);border-radius:16px;padding:1rem 1.1rem;display:flex;gap:.7rem;align-items:flex-start;box-shadow:0 10px 24px -18px rgba(15,33,66,.4);font-weight:600}
.intl-points li i{flex:none;width:28px;height:28px;border-radius:50%;background:linear-gradient(180deg,#fdf8ec,#f3e7c6);color:#6e5417;display:grid;place-items:center;font-style:normal;font-size:.85rem}
.country-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.2rem}
.country-card{background:#fff;border:1px solid var(--line,#dde2eb);border-radius:22px;padding:1.3rem 1.3rem 1.2rem;display:flex;flex-direction:column;gap:.6rem;position:relative;overflow:hidden;box-shadow:0 14px 30px -24px rgba(15,33,66,.5);transition:transform .2s,box-shadow .2s}
.country-card:hover{transform:translateY(-3px);box-shadow:0 24px 40px -24px rgba(15,33,66,.55)}
.country-card::before{content:"";position:absolute;top:0;inset-inline:0;height:5px;background:linear-gradient(90deg,#b78d33,#f1e5c3,#b78d33)}
.country-card .head{display:flex;align-items:center;gap:.9rem}
.country-card .flag{width:58px;height:58px;border-radius:16px;background:#f3f5f9;display:grid;place-items:center;font-size:2rem;flex:none;border:1px solid var(--line,#dde2eb)}
.country-card .flag img{width:100%;height:100%;object-fit:cover;border-radius:16px}
.country-card h3{font-family:"Cairo",sans-serif;margin:0;font-size:1.3rem;color:var(--ink,#0f2142)}
.country-card .city{color:var(--muted,#5a6680);font-size:.9rem}
.country-card .who{font-weight:600;color:var(--text,#15203a)}
.country-card .note{color:var(--muted,#5a6680);font-size:.92rem;line-height:1.7;margin:0}
.country-card .rows{display:grid;gap:.35rem;font-size:.92rem;color:var(--text,#15203a)}
.country-card .rows span{display:flex;gap:.5rem;align-items:center}
.country-card .rows svg{width:16px;height:16px;color:var(--gold,#b78d33);flex:none}
.country-card .acts{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.4rem}
.country-card .acts .btn{padding:.55rem .9rem;font-size:.9rem}
.btn-wa{background:#25d366;color:#fff!important;border-color:#25d366}
.intl-empty{text-align:center;padding:3rem 1rem;color:var(--muted,#5a6680)}
.intl-cta{margin-top:2.5rem;background:linear-gradient(160deg,#1a2f55,#0f2142);color:#fff;border-radius:24px;padding:2rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.intl-cta h2{font-family:"Cairo",sans-serif;margin:0 0 .3rem;color:#fff}
.intl-cta p{margin:0;color:#c9d1e0}

/* ===== حصة تجريبية ===== */
.trial-band{background:linear-gradient(135deg,#fdf8ec,#f3e7c6);border-top:1px solid #e3d3a4;border-bottom:1px solid #e3d3a4}
.trial-inner{display:grid;grid-template-columns:1.1fr 1fr auto;gap:1.5rem;align-items:center}@media(max-width:900px){.trial-inner{grid-template-columns:1fr}}
.trial-band h2{font-family:"Cairo",sans-serif;color:var(--ink,#0f2142);margin:.2rem 0 .4rem}.trial-band .lede{color:#5a4a20;margin:0}.trial-band .hero-kicker{color:#8a6a22}
.trial-steps{display:grid;gap:.5rem}.trial-steps span{display:flex;align-items:center;gap:.6rem;font-weight:600;color:#3d3214}.trial-steps b{width:30px;height:30px;border-radius:50%;background:var(--ink,#0f2142);color:var(--gold-soft,#f1e5c3);display:grid;place-items:center;font-family:"Cairo",sans-serif;flex:none}
.trial-band .btn-gold{background:var(--ink,#0f2142)!important;color:var(--gold-soft,#f1e5c3)!important;border-color:var(--ink,#0f2142)!important;padding:.9rem 1.6rem;font-size:1.05rem}
.prod-order{margin-top:.5rem;align-self:flex-start}

/* ═════════════════════════════════════════════════════════════
   تحديث الهوية v4 — «نحاس على كحلي»
   العداد هو بطل الموقع: إطار كحلي غامق، خرز نحاسي، وعناوين بخط كوفي حديث
   ═════════════════════════════════════════════════════════════ */
:root{
  --font-display:'Noto Kufi Arabic','Cairo','IBM Plex Sans Arabic',system-ui,sans-serif;
  --brass:#c39a45; --brass-hi:#e2c272; --night:#081528; --mist:#f4f6fa;
  --r-sm:12px; --r-lg:22px;
}
h1,h2,h3,.section-head h2,.brand-name,.cta-panel h2,.join-band h2,.trial-band h2{font-family:var(--font-display);letter-spacing:0}
h1,h2{font-weight:700}

/* الهيدر: أبيض زجاجي هادي، والصفحة الحالية بخط نحاسي تحتها بدل الكبسولة الكحلي */
.site-header{background:rgb(255 255 255/.86);border-bottom:1px solid rgb(15 33 66/.07);box-shadow:0 1px 0 rgb(255 255 255/.6) inset}
.header-inner{min-height:78px}
.brand-name{font-size:1.45rem;font-weight:700}
.nav-links{gap:.1rem}
.nav-links a{position:relative;border-radius:8px;padding:.5rem .6rem;color:#2a3654;font-weight:500}
.nav-links a:hover{background:none;color:var(--ink)}
.nav-links a[aria-current='page']{background:none;color:var(--ink);font-weight:700}
.main-nav .nav-links a[aria-current='page']::after{content:"";position:absolute;inset-inline:.6rem;bottom:.15rem;height:2px;border-radius:2px;background:var(--brass)}
.mobile-menu-panel .nav-links a[aria-current='page']{background:var(--mist)}

/* الأرقام والرموز الطايرة في الخلفيات اتشالت — الفخامة في الهدوء */
.deco{display:none}

/* الأزرار */
.btn{border-radius:999px;font-weight:600;letter-spacing:0}
.btn-gold{background:linear-gradient(180deg,var(--brass-hi) 0%,var(--brass) 100%);color:var(--ink);border:1px solid #a9822f;box-shadow:inset 0 1px 0 rgb(255 255 255/.35),0 10px 22px -12px rgb(183 141 51/.85);font-weight:700}
.btn-gold:hover{color:var(--ink);filter:brightness(1.06);transform:translateY(-1px)}
.hero .btn-gold,.stats-band .btn-gold,.cta-multiply .btn-gold,.join-band .btn-gold,.soroban-band .btn-gold{border-color:#a9822f}
.btn-ghost{background:transparent;border:1px solid #c9d1de;color:var(--ink)}
.btn-ghost:hover{border-color:var(--brass);color:var(--ink);background:#fff}
.btn-on-ink{background:rgb(255 255 255/.04);border:1px solid rgb(241 229 195/.32);color:#f6f2e7}
.btn-on-ink:hover{background:rgb(255 255 255/.1);color:#fff;border-color:rgb(241 229 195/.6)}

/* الإيقاع العام للأقسام */
.section{padding-block:clamp(3.5rem,7vw,6rem)}
.section-tint{background:var(--mist)}
.section-head{margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.section-head h2{font-size:clamp(1.75rem,3.1vw,2.6rem);line-height:1.25;color:var(--ink)}
.section-head .lede{font-size:1.05rem;color:var(--muted);margin-top:.35rem}

/* ── الواجهة ── */
.hero-bg{min-height:clamp(560px,84vh,780px)}
.hero-bg.no-photos{background:
  radial-gradient(900px 520px at 22% 48%,rgb(214 178 94/.16),transparent 62%),
  radial-gradient(700px 400px at 90% 0%,rgb(44 74 128/.45),transparent 70%),
  linear-gradient(165deg,#13284f 0%,#0c1d3c 52%,var(--night) 100%)}
.hero-bg.no-photos::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(90deg,transparent 0 69px,rgb(214 178 94/.05) 69px 70px);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent)}
.hero-bg .hero-kicker{color:var(--brass-hi);font-weight:600;font-size:.95rem;margin-bottom:.9rem}
.hero-bg h1{font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1.22;font-weight:700;color:#fff;margin-bottom:1.1rem}
.hero-bg .hero-text{font-size:clamp(1.02rem,1.3vw,1.15rem);line-height:1.95;color:#c6cfe0;max-width:46ch;margin-bottom:1.8rem}
.hero-bg .btn{font-size:1rem;padding:.8rem 1.5rem}
.hero-bg .hero-ctas{gap:.75rem}
.hero-bg.has-stage .hero-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(2rem,6vw,6rem);padding-block:clamp(3rem,7vw,5.5rem)}
.hero-bg.has-stage .hero-copy{max-width:600px}
.hero-abacus{margin:0;pointer-events:auto;position:relative;max-width:560px;justify-self:center;width:100%}
.hero-abacus::before{content:"";position:absolute;inset:8% 4% 18%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgb(214 178 94/.22),transparent);filter:blur(10px)}
.hero-abacus figcaption{margin-top:1.1rem}
.hero-abacus figcaption strong{font-size:clamp(30px,3.4vw,42px);color:var(--brass-hi)}
@media (max-width:900px){
  .hero-bg.has-stage .hero-inner{grid-template-columns:1fr;gap:2.2rem;padding-block:2.6rem 3rem}
  .hero-bg.has-stage{min-height:0}
  .hero-abacus{max-width:420px}
  .hero-bg h1{font-size:clamp(1.9rem,7vw,2.4rem)}
}

/* ── نبذة: فقرة افتتاحية في النص بدل الصندوق ── */
.about-section .container-wide{width:min(100% - 2.5rem,900px)}
.about-section .section-head{justify-content:center;text-align:center}
body .about-section .about-box{background:none;border:0;border-radius:0;box-shadow:none;padding:0}
body .about-section .about-scroll p{font-size:clamp(1.12rem,1.7vw,1.38rem);line-height:2.05;color:#24304d;text-align:center;max-width:58ch;margin-inline:auto}
.about-fade{background:linear-gradient(to top,var(--mist),transparent)}
.section-tint.about-section .about-fade{background:linear-gradient(to top,var(--mist),transparent)}

/* ── مستويات البرنامج: سلّم هادي بأرقام نحاسية ── */
body .levels-grid{gap:.7rem}
body .levels-grid li{background:#fff;border:1px solid #e3e7ef;border-radius:var(--r-sm);box-shadow:none;padding:.95rem 1.05rem}
body .levels-grid li:hover{transform:none;box-shadow:none;border-color:rgb(183 141 51/.55)}
body .levels-grid .lv-num{background:none;border:1.5px solid var(--brass);color:var(--ink);border-radius:50%;width:42px;height:42px;font-family:var(--font-num);font-weight:400;font-size:1.35rem}
body .levels-grid strong{font-family:var(--font-body);font-weight:600;font-size:1.02rem}

/* ── الأرقام ── */
.stats-band{background:linear-gradient(180deg,#0f2142,#0b1a36);padding-block:clamp(2.6rem,5vw,4rem);border-top:0}
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0}
.stat{border-inline-start:0;padding:.4rem 1.4rem;margin:0;text-align:center;align-items:center;position:relative}
.stat + .stat::before{content:"";position:absolute;inset-inline-start:0;top:15%;bottom:15%;width:1px;background:rgb(241 229 195/.16)}
.stat dd{font-family:var(--font-num);font-weight:400;color:var(--brass-hi);font-size:clamp(2.3rem,4.2vw,3.3rem);line-height:1.15}
.stat dt{color:#b9c3d8;font-size:.98rem;margin-top:.2rem}
.facts-strip{border-top:1px solid rgb(241 229 195/.12);margin-top:2rem;padding-top:1.4rem}
@media (max-width:620px){.stats-row{grid-template-columns:1fr 1fr}.stat:nth-child(odd)::before{display:none}.stat{padding-block:.9rem}}

/* ── المحافظات: شرايط مدمجة بدل حيطة كروت ── */
.gov-chips{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.6rem}
.gov-chips a{display:flex;align-items:center;gap:.7rem;padding:.55rem .8rem .55rem 1rem;background:#fff;border:1px solid #e3e7ef;border-radius:var(--r-sm);text-decoration:none;color:var(--ink);transition:border-color .2s,background .2s}
.gov-chips a:hover{border-color:var(--brass);background:#fffdf7;color:var(--ink)}
.gov-chips .gov-logo{width:34px;height:34px;flex:none;filter:none}
.gov-chips .gov-logo-fallback b{font-size:.9rem}
.gov-chips span{font-weight:600;font-size:.98rem;line-height:1.3}
.gov-chips small{margin-inline-start:auto;color:var(--muted);font-size:.8rem;white-space:nowrap}
@media (max-width:520px){.gov-chips{grid-template-columns:1fr 1fr}.gov-chips small{display:none}}

/* ── لوحات الدعوة ── */
.cta-panel.cta-multiply{border-radius:var(--r-lg);background:linear-gradient(160deg,#13284f,#0b1a36)}
.cta-panel .cta-inner{border-radius:var(--r-lg)}
.trial-band{background:#fff;border-block:1px solid #eadfc2}
.trial-band h2{font-family:var(--font-display);font-size:clamp(1.7rem,3vw,2.4rem)}
.trial-band .lede{color:var(--muted)}
.trial-band .hero-kicker{color:var(--gold-deep,#8a6a22)}
.trial-steps span{color:var(--ink);font-weight:600}
.trial-steps b{background:none;border:1.5px solid var(--brass);color:var(--ink);font-family:var(--font-num);font-weight:400}
.trial-band .btn-gold{background:var(--ink)!important;color:#f6ecc9!important;border-color:var(--ink)!important;box-shadow:0 14px 28px -16px rgb(8 21 40/.9)}
.join-band{background:linear-gradient(160deg,#13284f,#0b1a36)}

/* ── استكشف ── */
.explore-tile{border-radius:var(--r-lg);border-color:rgb(241 229 195/.14)}
.explore-tile:hover{transform:translateY(-3px)}

/* ── الفوتر ── */
.site-footer .footer-top{border-top:1px solid rgb(214 178 94/.35)}
@media (max-width:900px){body .program-split{grid-template-columns:1fr;gap:1.6rem}}
@media (max-width:520px){.brand-name{font-size:1.08rem}.brand svg{width:32px;height:32px}.header-inner{gap:.6rem}}

/* ── لوحة جدول الضرب: محاذاة وإيقاع ثابت للنصوص ── */
h1,h2,h3{text-wrap:balance}
p,li,dd,dt{text-wrap:pretty}
.section.cta-multiply{padding:clamp(2.6rem,5vw,3.8rem) clamp(1.5rem,5vw,4rem)}
.cta-multiply .cta-inner{display:block;padding:0;box-shadow:none;background:none}
.cta-multiply .split{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.cta-multiply .split > div:first-child{display:flex;flex-direction:column;align-items:flex-start;max-width:34rem}
.cta-multiply .hero-kicker{margin:0 0 .7rem;font-size:.92rem;font-weight:600;color:var(--brass-hi)}
.cta-multiply h2{margin:0 0 .55rem;font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.3;color:#fff}
.cta-multiply .lede{margin:0 0 .85rem;font-size:1.12rem;line-height:1.7;color:#e6d8b0}
.cta-multiply .lede + p{margin:0 0 1.7rem;font-size:1rem;line-height:1.95;color:#b9c3d8;max-width:44ch}
.cta-multiply .btn{margin:0}
.cta-multiply .mult-art{margin:0;justify-content:center;gap:1rem}
.cta-multiply .mult-art .node{width:86px;height:86px;border-radius:20px;font-size:2.5rem}
.cta-multiply .mult-art .x{font-size:2rem;width:1.2em;text-align:center}
@media (max-width:820px){
  .cta-multiply .split{grid-template-columns:1fr;gap:2rem}
  .cta-multiply .mult-art{justify-content:flex-start}
  .cta-multiply .mult-art .node{width:64px;height:64px;font-size:1.9rem;border-radius:16px}
}
.cta-multiply .mult-art{display:inline-flex;justify-self:center;width:auto}
.cta-multiply .mult-art > *{flex:none}
@media (max-width:820px){.cta-multiply .mult-art{justify-self:start}}
.cta-multiply .mult-art{gap:.75rem}
.cta-multiply .mult-art .x{width:auto}
.cta-multiply .mult-art .node{line-height:1;padding:0}
/* خط الأرقام (Amiri) بيقعد تحت منتصف السطر — تعويض مقاس بالبكسل عشان الرقم يبقى في نص المربع بالظبط */
.cta-multiply .mult-art .node{padding-bottom:.775em}
@media (max-width:820px){.cta-multiply .mult-art .node{padding-bottom:.625em}}

/* ── الأزرار الأساسية: أزرق من باليتة الموقع بدل الذهبي ── */
:root{--btn1:#1e8bff;--btn2:#0038ff}
.btn-gold,body .btn-gold,.hero .btn-gold,.stats-band .btn-gold,.cta-multiply .btn-gold,.join-band .btn-gold,.soroban-band .btn-gold{
  background:linear-gradient(135deg,var(--btn1),var(--btn2));color:#fff;border:1px solid #0a3fe0;
  box-shadow:inset 0 1px 0 rgb(255 255 255/.25),0 10px 22px -12px rgb(0 56 255/.8);font-weight:700}
.btn-gold:hover,body .btn-gold:hover{color:#fff;filter:brightness(1.08);transform:translateY(-1px)}
.btn-gold:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--btn1)}
.trial-band .btn-gold{background:linear-gradient(135deg,var(--btn1),var(--btn2))!important;color:#fff!important;border-color:#0a3fe0!important}

/* ── المنتجات: الكروت والعارض ثلاثي الأبعاد (مشترك بين الرئيسية وصفحة منتجاتنا) ── */
.prod-open{all:unset;display:block;width:100%;cursor:pointer}
.prod-open:focus-visible{outline:2px solid var(--btn2,#0038ff);outline-offset:2px;border-radius:14px}
.prod .img{position:relative}
.badge-3d{position:absolute;bottom:10px;inset-inline-start:10px;display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .7rem;border-radius:999px;background:rgb(8 21 40/.82);color:#f1e5c3;font-size:.8rem;font-weight:600;backdrop-filter:blur(4px)}
.prod-dlg{width:min(960px,100% - 1.5rem);max-height:calc(100dvh - 1.5rem);padding:0;border:0;border-radius:22px;background:#fff;color:var(--text);box-shadow:0 40px 90px -30px rgb(8 21 40/.6);overflow:auto}
.prod-dlg::backdrop{background:rgb(8 21 40/.62);backdrop-filter:blur(3px)}
.pd-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.3rem .4rem}
.pd-head h2{margin:0;font-size:clamp(1.25rem,2.4vw,1.6rem);color:var(--ink)}
.pd-x{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:24px;line-height:1;cursor:pointer;color:var(--ink)}
.pd-tabs{display:flex;gap:.4rem;padding:.3rem 1.3rem .6rem}
.pd-tabs:empty{display:none}
.pd-tabs button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:.4rem 1rem;font:inherit;font-weight:600;cursor:pointer;color:var(--ink)}
.pd-tabs button[aria-selected="true"]{background:var(--ink);color:#f1e5c3;border-color:var(--ink)}
.pd-stage{margin:0 1.3rem;border-radius:16px;overflow:hidden;background:radial-gradient(circle at 50% 35%,#ffffff,#eef1f6 70%)}
.pd-stage model-viewer{width:100%;height:min(62vh,540px);--poster-color:transparent;background:transparent}
.pd-ar{position:absolute;bottom:14px;inset-inline-end:14px}
.pd-hint{text-align:center;color:var(--muted);font-size:.85rem;margin:0;padding:.5rem 1rem .8rem}
.pd-photo{margin:0;display:grid;place-items:center;height:min(62vh,540px)}
.pd-photo img{max-width:100%;max-height:100%;object-fit:contain}
.pd-thumbs{display:flex;gap:.5rem;justify-content:center;padding:.6rem;flex-wrap:wrap}
.pd-thumbs button{width:64px;height:64px;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;cursor:pointer;background:#fff}
.pd-thumbs button[aria-current="true"]{border-color:var(--btn2,#0038ff)}
.pd-thumbs img{width:100%;height:100%;object-fit:cover}
.pd-body{padding:1rem 1.3rem 1.4rem;display:grid;gap:.8rem;justify-items:start}
.pd-body p{margin:0;color:var(--muted);max-width:65ch}
/* القائمة اللي فوق في سطر واحد، وبتتحول لزرار «القائمة» بدري شوية */
.main-nav .nav-links{flex-wrap:nowrap}
.main-nav .nav-links a{font-size:.9rem;padding:.5rem .5rem;white-space:nowrap}
@media (max-width:1240px){.main-nav{display:none}.mobile-menu{display:block}}
.brand svg,.brand img{flex:none}

/* ── شريط الفعاليات (تحت الواجهة) ── */
.events-band{background:#fff;padding-bottom:clamp(2.5rem,5vw,4rem)}
.events-band .section-head{align-items:flex-end}
.ev-ctrl{display:flex;gap:.5rem;align-items:center}
.ev-nav{width:44px;height:44px;border-radius:50%;border:1px solid #d6dbe6;background:#fff;color:var(--ink);font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center;padding-bottom:3px;transition:border-color .2s,background .2s}
.ev-nav:hover{border-color:var(--btn2,#0038ff);background:#f5f8ff}
.ev-viewport{position:relative;overflow:hidden;padding-block:.4rem 1.2rem;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ev-viewport.is-moving{cursor:grab}.ev-viewport.is-dragging{cursor:grabbing}
.ev-viewport.is-static{-webkit-mask-image:none;mask-image:none;width:min(100% - 3rem,var(--container,1180px));margin-inline:auto}
.ev-track{list-style:none;margin:0;padding:0 1rem;display:flex;gap:18px;width:max-content;will-change:transform;direction:ltr}
.ev-viewport.is-static .ev-track{width:auto;flex-wrap:wrap;justify-content:center;padding:0;direction:inherit}
.ev-card{flex:none;width:clamp(250px,24vw,340px);direction:rtl}
html[dir='ltr'] .ev-card{direction:ltr}
.ev-open{all:unset;box-sizing:border-box;display:block;position:relative;width:100%;aspect-ratio:4/3;border-radius:18px;overflow:hidden;cursor:pointer;background:#0f2142;box-shadow:0 14px 30px -18px rgb(8 21 40/.55)}
.ev-open:focus-visible{outline:3px solid var(--btn1,#1e8bff);outline-offset:3px}
.ev-open img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.ev-open:hover img{transform:scale(1.05)}
.ev-open::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgb(8 21 40/.88) 0%,rgb(8 21 40/.35) 45%,transparent 70%);pointer-events:none}
.ev-cap{position:absolute;z-index:1;inset-inline:16px;bottom:14px;display:grid;gap:3px;color:#fff;text-align:start}
.ev-cap strong{font-family:var(--font-display);font-size:1.08rem;line-height:1.4;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ev-cap small{font-size:.82rem;color:rgb(255 255 255/.8)}
.ev-kind{position:absolute;z-index:1;top:12px;inset-inline-start:12px;padding:.28rem .75rem;border-radius:999px;font-size:.78rem;font-weight:700;color:#fff;background:linear-gradient(135deg,#1e8bff,#0038ff);box-shadow:0 6px 14px -8px rgb(0 0 0/.5)}
.ev-kind[data-k="champ"]{background:linear-gradient(135deg,#ffa51f,#ff5c00)}.ev-kind[data-k="meeting"]{background:linear-gradient(135deg,#24d6c9,#00a2ad)}
.ev-kind[data-k="grant"]{background:linear-gradient(135deg,#36cf7f,#0c9a55)}.ev-kind[data-k="award"]{background:linear-gradient(135deg,#ff4f8d,#ff1257)}
.ev-kind[data-k="visit"]{background:linear-gradient(135deg,#b752e4,#8411d6)}.ev-kind[data-k="workshop"]{background:linear-gradient(135deg,#8f9fd6,#5664a6)}
.ev-dlg{padding:0;border:0;background:transparent;max-width:min(1100px,96vw);max-height:94dvh;overflow:visible}
.ev-dlg::backdrop{background:rgb(6 14 30/.86);backdrop-filter:blur(4px)}
.ev-dlg figure{margin:0;border-radius:18px;overflow:hidden;background:#0f2142}
.ev-dlg img{display:block;max-width:100%;max-height:78dvh;margin-inline:auto;object-fit:contain}
.ev-dlg figcaption{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;padding:1rem 1.3rem;color:#fff}
.ev-dlg figcaption .ev-kind{position:static}
.ev-dlg figcaption strong{font-family:var(--font-display);font-size:1.2rem}
.ev-dlg figcaption small{color:rgb(255 255 255/.75)}
.ev-dlg figcaption .btn{margin-inline-start:auto}
.ev-x{position:absolute;top:-14px;inset-inline-end:-14px;width:42px;height:42px;border-radius:50%;border:0;background:#fff;color:#0f2142;font-size:24px;line-height:1;cursor:pointer;box-shadow:0 8px 20px -8px rgb(0 0 0/.6)}
@media (max-width:640px){.ev-card{width:78vw}.ev-ctrl .ev-nav{display:none}.ev-x{top:8px;inset-inline-end:8px}}
@media (prefers-reduced-motion:reduce){.ev-open img{transition:none}}
.ev-viewport.is-moving{direction:ltr}
@media (max-width:420px){.brand-name{font-size:.98rem}.brand-sub{display:none}.lang-btn{padding:.35rem .6rem;font-size:.8rem}.header-actions{gap:.35rem}.brand{gap:.4rem}}

/* ── شريط الفعاليات: دايرة ثلاثية الأبعاد بتلف ── */
.ev-stage{position:relative;height:var(--evH,440px);perspective:1400px;perspective-origin:50% 30%;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;margin-top:.2rem}
.ev-stage.is-dragging{cursor:grabbing}
.ev-ring{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.ev-orbit{position:absolute;left:50%;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%);border:2px solid rgb(30 139 255/.22);background:radial-gradient(closest-side,rgb(30 139 255/.10),rgb(30 139 255/.03) 70%,transparent);box-shadow:0 0 0 10px rgb(30 139 255/.04),inset 0 0 40px rgb(0 56 255/.08)}
.ev-orbit::before{content:"";position:absolute;inset:14px 6%;border-radius:50%;border:1.5px dashed rgb(0 56 255/.18)}
.ev-orbit::after{content:"";position:absolute;left:50%;top:50%;width:46%;height:46%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgb(255 255 255/.9),rgb(220 234 255/.0));}
.ev-ring .ev-card{position:absolute;top:0;left:50%;width:var(--evW,300px);margin-inline-start:calc(var(--evW,300px) / -2);transform-origin:50% 50%;will-change:transform,opacity;direction:rtl}
html[dir='ltr'] .ev-ring .ev-card{direction:ltr;margin-inline-start:0;margin-left:calc(var(--evW,300px) / -2)}
html[dir='rtl'] .ev-ring .ev-card{margin-inline-start:0;margin-left:calc(var(--evW,300px) / -2)}
.ev-ring .ev-card .ev-open{box-shadow:0 26px 44px -26px rgb(8 21 40/.75);transition:box-shadow .4s}
.ev-ring .ev-card.is-front .ev-open{outline:3px solid #fff;outline-offset:-3px;box-shadow:0 34px 70px -26px rgb(0 56 255/.6)}
.ev-ring .ev-card .ev-cap small{opacity:0;transition:opacity .35s}
.ev-ring .ev-card.is-front .ev-cap small{opacity:1}
.ev-ring .ev-card .ev-open:hover img{transform:none}
.ev-dots{display:flex;justify-content:center;gap:7px;margin-top:.2rem;position:relative;z-index:2}
.ev-dots button{all:unset;cursor:pointer;width:8px;height:8px;border-radius:99px;background:rgb(15 33 66/.18);transition:width .35s,background .35s}
.ev-dots button.on{width:26px;background:linear-gradient(90deg,#1e8bff,#0038ff)}
@media (max-width:640px){.ev-stage{perspective:900px}.ev-ctrl .ev-nav{display:none}}


/* ── شريط الفعاليات الدائري: الكروت جنب بعض على قوس عجلة بتلف ── */
.ev-wheel{position:relative;height:var(--evH,420px);overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;direction:ltr}
.ev-wheel.is-dragging{cursor:grabbing}
.ev-wheel .ev-track{position:absolute;inset:0;display:block;width:auto;padding:0;direction:ltr}
.ev-wheel .ev-card{position:absolute;top:0;left:50%;width:var(--evW,300px);margin-left:calc(var(--evW,300px) / -2);transform-origin:50% 50%;will-change:transform,opacity;direction:rtl}
html[dir='ltr'] .ev-wheel .ev-card{direction:ltr}
.ev-wheel .ev-open:hover img{transform:none}
.ev-rim{position:absolute;left:50%;transform:translateX(-50%);border-radius:50%;pointer-events:none;border:2px dashed rgb(15 33 66/.10);box-shadow:inset 0 0 0 14px rgb(15 33 66/.025)}
.ev-wheel::after{content:"";position:absolute;inset-inline:0;bottom:0;height:40px;background:linear-gradient(to top,#fff,transparent);pointer-events:none}
@media (max-width:640px){.ev-ctrl .ev-nav{display:none}}

/* ── العرض التتابعي: الصورة في النص قدّام واللي جنبها مايلة للداخل ── */
.ev-flow{overflow:hidden;padding-block:6px}
.ev-flow .ev-card{top:8px;transition:none;transform-origin:50% 0}
.ev-flow .ev-card .ev-open{box-shadow:0 26px 50px -24px rgb(8 21 40/.7);transition:box-shadow .4s}
.ev-flow .ev-card.is-front .ev-open{outline:3px solid #fff;outline-offset:-3px;box-shadow:0 36px 70px -26px rgb(8 21 40/.75)}
.ev-flow .ev-card:not(.is-front) .ev-cap small{opacity:0}
.ev-flow::after{display:none}
.ev-dots{display:flex;justify-content:center;gap:7px;margin-top:.4rem}
.ev-dots button{all:unset;cursor:pointer;width:8px;height:8px;border-radius:99px;background:rgb(15 33 66/.18);transition:width .35s,background .35s}
.ev-dots button.on{width:26px;background:var(--gold,#b78d33)}

/* ===== كارت الخريطة: صورة + شكوى ===== */
.popup-photo{width:64px;height:64px;border-radius:50%;object-fit:cover;display:block;margin:0 auto .4rem;border:2px solid var(--gold,#b78d33)}
.popup-students{color:var(--ink,#0f2142);font-weight:600}
.popup-complain{color:#9b3b2f!important}
.cmp-dlg{border:0;border-radius:20px;padding:0;max-width:min(460px,94vw);box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}
.cmp-dlg::backdrop{background:rgba(8,21,40,.6)}
.cmp-form{padding:1.4rem;display:grid;gap:.8rem;font-family:inherit}
.cmp-form h3{margin:0;font-family:"Cairo",sans-serif;color:var(--ink,#0f2142)}
.cmp-form label{display:grid;gap:.3rem;font-weight:600;font-size:.92rem}
.cmp-form input,.cmp-form textarea{border:1px solid var(--line,#dde2eb);border-radius:10px;padding:.6rem .8rem;font:inherit}
.cmp-err{color:#b3261e;margin:0}
.cmp-acts{display:flex;gap:.5rem;justify-content:flex-end}
.trainer-students{font-size:.85rem;color:var(--ink,#0f2142);font-weight:600}

/* زر القمر الصناعي على الخرائط */
.map-sat-ctl a{font-size:18px;line-height:30px;text-align:center}
.map-sat-ctl.on a{background:#0f2142;color:#fff}
.sat-labels{filter:invert(1) hue-rotate(180deg) brightness(1.6) contrast(1.4)}

/* ===== خريطة MapLibre في الموقع: أزرار الأوضاع والدبابيس والكروت ===== */
.map-modes{position:absolute;top:10px;right:10px;left:auto;z-index:5;display:flex;gap:4px;background:rgba(255,255,255,.95);border-radius:12px;padding:4px;box-shadow:0 4px 14px rgba(0,0,0,.2);direction:rtl}
.map-modes button{border:0;background:transparent;border-radius:9px;padding:6px 10px;font:600 13px/1 "Cairo",sans-serif;color:#0f2142;cursor:pointer;display:flex;align-items:center;gap:4px}
.map-modes button.on{background:#0f2142;color:#f1e5c3}
.map-modes button:hover:not(.on){background:#eef1f6}
@media (max-width:640px){.map-modes button span{display:none}.map-modes button{padding:7px 9px;font-size:15px}}
.gl-pin{width:34px;height:44px;cursor:pointer;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.gl-popup .maplibregl-popup-content{border-radius:14px;padding:12px 14px;font-family:inherit;direction:rtl;text-align:start;box-shadow:0 12px 30px -10px rgba(0,0,0,.35)}
.gl-popup .maplibregl-popup-close-button{font-size:20px;padding:2px 8px;left:4px;right:auto}
.gl-popup .popup{display:grid;gap:3px;font-size:.9rem}
.gl-popup .popup strong{font-family:"Cairo",sans-serif;font-size:1.05rem;color:#0f2142}
.gl-popup .popup-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.gl-popup .popup-actions a{padding:4px 10px;border-radius:999px;background:#f3f5f9;color:#0f2142;text-decoration:none;font-size:.82rem;font-weight:600}
.maplibregl-ctrl-attrib{font-size:10px}
.map-fullscreen .map-modes{top:14px}