/* ============================================================
   AAFER Main Website — Design Tokens (v3)
   Brand colors kept from the established identity (purple + orange,
   fuchsia as the bridge, sky for info). v3 adds: semantic surfaces,
   interactive states, a fluid type scale (clamp), a spacing scale,
   lighter shadows and motion tokens. Every component reads from here.
   ============================================================ */
:root{
  /* ---- Brand ---- */
  --purple:#6B3F8F;          /* primary */
  --purple-dark:#3E2350;     /* deep brand: headings on tint, dark sections */
  --purple-ink:#2B1838;      /* darkest brand, used for dark bands */
  --purple-tint:#F3EDF9;
  --purple-tint-2:#E8DDF3;
  --fuchsia:#A6408F;         /* secondary accent */
  --fuchsia-tint:#FBEEF7;
  --orange:#D97B45;          /* action / CTA */
  --orange-dark:#B85E2C;     /* hover + text-on-light orange (AA) */
  --orange-tint:#FBEFE6;
  --sky:#3E8FD0;
  --sky-tint:#E8F3FC;
  --gold:#F2B33D;            /* stars, small highlights only */

  /* ---- Text (all AA on white and on --bg) ---- */
  --ink:#241B33;             /* headings / primary text  15.9:1 */
  --ink-soft:#4F465C;        /* body text                 8.6:1 */
  --ink-faint:#6E6580;       /* captions / meta           5.3:1 */
  --on-dark:#FFFFFF;
  --on-dark-soft:rgba(255,255,255,.82);

  /* ---- Surfaces & lines ---- */
  --surface:#FFFFFF;
  --bg:#FAF8FC;              /* quiet section background */
  --bg-warm:#FFF9F4;         /* warm section background (human, not clinical) */
  --line:#E9E2F1;
  --line-strong:#D6CAE4;

  /* ---- Interactive states ---- */
  --focus:#A6408F;
  --focus-ring:0 0 0 3px #fff, 0 0 0 6px var(--focus);
  --hover-tint:#F6F1FB;
  --disabled-bg:#EEEAF2;
  --disabled-ink:#8D869A;

  --footer-bg:#241B33;

  /* ---- Radii ---- */
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px;

  /* ---- Shadows: soft and low, never heavy ---- */
  --shadow-xs:0 1px 2px rgba(43,24,56,.05);
  --shadow-sm:0 2px 8px rgba(43,24,56,.05), 0 1px 2px rgba(43,24,56,.04);
  --shadow-md:0 10px 28px rgba(43,24,56,.08);
  --shadow-lg:0 22px 50px rgba(43,24,56,.12);

  /* ---- Type ---- */
  --font-display:'Lama Sans','Tajawal',system-ui,sans-serif;
  --font-body:'Lama Sans','Tajawal',system-ui,sans-serif;
  --fs-hero:clamp(2.35rem, 1.4rem + 4.2vw, 4.6rem);
  --fs-h1:clamp(1.9rem, 1.35rem + 2.3vw, 3rem);
  --fs-h2:clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
  --fs-h3:clamp(1.12rem, 1.02rem + .45vw, 1.38rem);
  --fs-lead:clamp(1.02rem, .96rem + .3vw, 1.2rem);
  --fs-body:1rem;
  --fs-sm:.9rem;
  --fs-xs:.8rem;

  /* ---- Spacing ---- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
  --section-y:clamp(56px, 4rem + 4vw, 112px);

  /* ---- Layout ---- */
  --container:1240px;
  --gutter:clamp(16px, 2.5vw, 32px);
  --header-h:68px;

  /* ---- Motion ---- */
  --dur-1:140ms;             /* hover / press */
  --dur-2:280ms;             /* small transitions */
  --dur-3:620ms;             /* reveals */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --reveal-shift:18px;
}


/* ---- Lama Sans (local, subset woff2: Arabic + Latin). The build
   rewrites these url()s: relative files for the deploy build, inline
   data URIs for the single-file preview. ---- */
@font-face{ font-family:'Lama Sans'; font-weight:400; font-style:normal; font-display:swap; src:url('./fonts/LamaSans-Regular.woff2') format('woff2'); }
@font-face{ font-family:'Lama Sans'; font-weight:500; font-style:normal; font-display:swap; src:url('./fonts/LamaSans-Medium.woff2') format('woff2'); }
@font-face{ font-family:'Lama Sans'; font-weight:700; font-style:normal; font-display:swap; src:url('./fonts/LamaSans-Bold.woff2') format('woff2'); }
@font-face{ font-family:'Lama Sans'; font-weight:800; font-style:normal; font-display:swap; src:url('./fonts/LamaSans-ExtraBold.woff2') format('woff2'); }

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:#FFFFFF; /* pure white — matches the hero photos' own white background, so there is no seam around them */
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.8;                  /* generous for Arabic ascenders/descenders */
  direction:rtl;
  text-align:right;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;                  /* never let stray overflow clip/break text sideways (clip keeps sticky headers working) */
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
button:disabled{ cursor:not-allowed; }
ul{ margin:0; padding:0; list-style:none; }
input, textarea, select{ font-family:inherit; font-size:var(--fs-sm); color:var(--ink); }
::selection{ background:var(--purple-tint-2); color:var(--purple-ink); }

/* Arabic word-safety: never break a word mid-character, only wrap at
   natural spaces; never force a hyphen-break. */
h1, h2, h3, h4, p, a, span, button, li{
  overflow-wrap:normal;
  word-break:keep-all;
  hyphens:none;
}

h1, h2, h3, h4{
  font-family:var(--font-display);
  color:var(--ink);
  margin:0;
  line-height:1.35;                 /* headings: tighter but still safe for Arabic */
  font-weight:800;
  text-wrap:balance;
}
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); font-weight:700; }
p{ margin:0; color:var(--ink-soft); }

/* Paragraph alignment (req 2026-10-25): every paragraph on the site is
   justified so each line starts and ends on the same edge. Paragraphs that
   sit in a centered context stay visually centered: their full lines are
   justified and only the last (short) line is centered. */
p{ text-align:justify; text-justify:inter-word; }
p:is(.results-empty, .methodology__note, .cx-placeholder-note, .pf-download__lead, .portal-section__note, .not-found__code, .article-rate__msg, .section-head__lead--center),
:is(.hero__inner, .page-intro, .section-head--center, .how-it-works__step, .social-proof__stats, .teacher-card, .teacher-profile__price-card,
    .login-card, .not-found__inner, .site-footer__bottom, .final-cta, .pf-growth__head, .card, [style*="text-align:center"]) p{
  text-align-last:center;
}
@media (max-width:900px){ .app-showcase__inner p{ text-align-last:center; } }
@media (max-width:820px){ .founder-card p{ text-align-last:center; } }
@media (max-width:640px){ .author-box p{ text-align-last:center; } }

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}

.section{ padding:var(--section-y) 0; }
.section--tight{ padding:calc(var(--section-y) * .66) 0; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--purple);
  background:var(--purple-tint);
  padding:6px 14px;
  border-radius:var(--r-pill);
  margin-bottom:16px;
}
.eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--orange); flex-shrink:0; }

/* ---- Buttons: one shape, clear variants, all states ---- */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;                  /* comfortable touch target */
  padding:12px 26px;
  border-radius:var(--r-pill);
  font-size:var(--fs-sm);
  font-weight:700;
  line-height:1.3;
  border:1.5px solid transparent;
  white-space:nowrap;
  transition:transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn .btn__arrow{ transition:transform var(--dur-2) var(--ease-out); }
.btn:hover .btn__arrow{ transform:translateX(-4px); }
.btn--primary{ background:var(--purple-dark); color:#fff; box-shadow:0 8px 20px rgba(62,35,80,.22); }
.btn--primary:hover{ background:var(--purple-ink); box-shadow:0 12px 26px rgba(62,35,80,.28); }
.btn--accent{ background:var(--fuchsia); color:#fff; box-shadow:0 8px 20px rgba(166,64,143,.22); }
.btn--accent:hover{ background:#8E3479; }
.btn--orange{ background:var(--orange-dark); color:#fff; box-shadow:0 8px 20px rgba(217,123,69,.26); }
.btn--orange:hover{ background:#A35022; }
.btn--ghost{ background:var(--surface); color:var(--purple-dark); border-color:var(--line-strong); }
.btn--ghost:hover{ border-color:var(--purple); background:var(--hover-tint); }
.btn--onDark{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.32); }
.btn--onDark:hover{ background:rgba(255,255,255,.18); }
.btn--sm{ min-height:40px; padding:8px 18px; font-size:var(--fs-xs); }
@media (max-width:480px){ .btn{ white-space:normal; text-align:center; max-width:100%; } }
.btn:disabled, .btn[aria-disabled="true"]{ background:var(--disabled-bg); color:var(--disabled-ink); border-color:transparent; box-shadow:none; transform:none; }

.card{
  background:var(--surface);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  border:1px solid var(--line);
}

[hidden]{ display:none !important; }

/* ---- Form fields: visible label, inline error, polite status ---- */
.field{ display:grid; gap:6px; }
.field__label{ font-size:var(--fs-xs); font-weight:700; color:var(--ink); }
.field__error{ font-size:var(--fs-xs); font-weight:700; color:#B42318; min-height:0; }
.field__error:empty{ display:none; }
.form-status{ font-size:var(--fs-sm); font-weight:700; text-align:start !important; }
.form-status:empty{ display:none; }
.form-status.is-success{ color:#1E7A46; background:#EAF7EF; border:1px solid #BFE5CC; padding:10px 14px; border-radius:12px; }

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* Skip link: first focusable element on every page */
.skip-link{
  position:absolute; inset-inline-start:16px; top:-60px; z-index:200;
  background:var(--purple-dark); color:#fff; font-weight:700; padding:10px 18px; border-radius:var(--r-pill);
  transition:top var(--dur-2) var(--ease-out);
}
.skip-link:focus{ top:12px; }

/* Keyboard focus must always be visible */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
  border-radius:10px;
}
.btn:focus-visible{ border-radius:var(--r-pill); }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* A heading that is structurally an h2 but sits visually at card level */
.as-h3{ font-size:var(--fs-h3); font-weight:700; }

/* ============================================================
   HEADER — two-tier: purple brand bar with the centered wordmark
   (kept per explicit request) + a white nav row. The whole header is
   sticky with a negative top equal to the brand bar's height, so the
   brand bar scrolls away and only the nav row stays pinned.
   ============================================================ */
:root{ --topbar-h:76px; }
.site-header{ position:sticky; top:calc(-1 * var(--topbar-h)); z-index:60; }
.site-header__top{
  height:var(--topbar-h);
  background:linear-gradient(135deg, var(--purple-ink), var(--purple-dark) 45%, var(--purple));
  position:relative; overflow:hidden;
}
.site-header__top::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(40% 120% at 50% 120%, rgba(217,123,69,.28), transparent 70%);
}
.site-header__top-inner{ height:100%; display:flex; justify-content:center; align-items:center; position:relative; z-index:1; }
.site-header__top-inner img{ height:48px; width:auto; }

.site-header__bar{
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
  transition:box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.site-header.is-scrolled .site-header__bar{ background:rgba(255,255,255,.97); box-shadow:0 8px 24px rgba(43,24,56,.08); }
.site-header__bar-inner{ display:flex; align-items:center; gap:clamp(12px, 2vw, 28px); min-height:var(--header-h); }
.site-header__mark{ flex-shrink:0; line-height:0; border-radius:50%; transition:transform var(--dur-2) var(--ease-out); }
.site-header__mark:hover{ transform:rotate(-8deg) scale(1.05); }
.site-header__mark img{ width:44px; height:44px; border-radius:50%; display:block; }

.site-header__nav{ flex:1; min-width:0; }
.site-header__nav ul{ display:flex; align-items:center; gap:clamp(2px, .5vw, 8px); }
.site-header__nav a{
  position:relative; display:block;
  font-size:.86rem; font-weight:700; color:var(--ink-soft);
  padding:8px clamp(6px, .8vw, 12px); border-radius:var(--r-pill); white-space:nowrap;
  transition:color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.site-header__nav a::after{
  content:''; position:absolute; inset-inline:30%; bottom:2px; height:2.5px; border-radius:2px;
  background:var(--orange); transform:scaleX(0); transition:transform var(--dur-2) var(--ease-out);
}
.site-header__nav a:hover{ color:var(--purple-dark); background:var(--hover-tint); }
.site-header__nav a.is-active{ color:var(--purple-dark); background:var(--purple-tint); }
.site-header__nav a.is-active::after{ transform:scaleX(1); }
.site-header__actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.site-header__burger{ display:none; }
.site-header__mobile-nav{ display:none; }

@media (max-width:1180px){
  .site-header__actions .btn--orange{ display:none; }   /* still reachable from the mobile menu, platforms page and hero */
}
@media (max-width:1060px){
  :root{ --topbar-h:64px; --header-h:60px; }
  .site-header__top-inner img{ height:40px; }
  .site-header__nav, .site-header__actions{ display:none; }
  .site-header__bar-inner{ justify-content:space-between; }
  .site-header__burger{
    display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
    width:48px; height:48px; background:var(--purple-tint); border:none; border-radius:14px; padding:0 12px;
  }
  .site-header__burger span{ width:100%; height:2.4px; background:var(--purple-dark); border-radius:2px; transition:transform var(--dur-2) var(--ease-out), opacity var(--dur-1); }
  .site-header__burger.is-active span:nth-child(1){ transform:translateY(7.4px) rotate(45deg); }
  .site-header__burger.is-active span:nth-child(2){ opacity:0; }
  .site-header__burger.is-active span:nth-child(3){ transform:translateY(-7.4px) rotate(-45deg); }

  .site-header__mobile-nav{
    display:block; position:absolute; inset-inline:0; top:100%;
    max-height:calc(100dvh - 60px); overflow-y:auto; overscroll-behavior:contain;
    background:var(--surface); border-bottom:1px solid var(--line); box-shadow:0 24px 40px rgba(43,24,56,.14);
    visibility:hidden; opacity:0; transform:translateY(-8px);
    transition:opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
  }
  .site-header__mobile-nav.is-open{ visibility:visible; opacity:1; transform:none; transition-delay:0s; }
  .site-header__mobile-nav ul{ padding:8px var(--gutter); display:flex; flex-direction:column; }
  .site-header__mobile-nav li + li{ border-top:1px solid var(--line); }
  .site-header__mobile-nav ul a{ display:flex; align-items:center; min-height:52px; padding:0 12px; font-weight:700; border-radius:12px; }
  .site-header__mobile-nav ul a.is-active{ color:var(--purple-dark); background:var(--purple-tint); }
  .site-header__mobile-actions{ display:flex; gap:10px; padding:12px var(--gutter) 20px; }
  .site-header__mobile-actions .btn{ flex:1; }
  body.menu-open{ overflow:hidden; }
}

/* ============================================================
   HERO — headline over a white stage; the three real photos keep
   their triangle arrangement (one centered on top, two below at the
   outer edges), natural aspect ratios, no cards and no cropping.
   ============================================================ */
.hero{ padding:clamp(48px, 6vw, 88px) 0 clamp(32px, 4vw, 56px); position:relative; overflow:hidden; background:#fff; }
.hero__glow{
  position:absolute; inset-inline:0; top:0; height:560px; pointer-events:none;
  background:
    radial-gradient(38% 60% at 82% 0%, rgba(166,64,143,.10), transparent 70%),
    radial-gradient(34% 55% at 14% 8%, rgba(217,123,69,.10), transparent 70%);
}
.hero__inner{ text-align:center; max-width:820px; margin:0 auto; position:relative; }
.hero__title{ font-size:var(--fs-hero); line-height:1.25; margin:14px 0 18px; letter-spacing:-.01em; }
.hero__mark{
  position:relative; display:inline-block;
  background:linear-gradient(100deg, var(--purple) 10%, var(--fuchsia) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  padding-bottom:.08em;
}
.hero__lead{ font-size:var(--fs-lead); color:var(--ink-soft); max-width:640px; margin:0 auto 32px; }
.hero__cta-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.hero__audience{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:28px; }
.hero__audience li{
  font-size:var(--fs-xs); font-weight:700; color:var(--purple-dark);
  padding:6px 14px; border-radius:var(--r-pill); background:#fff; border:1px solid var(--line-strong);
}

.hero__photos{ max-width:1040px; margin:clamp(36px, 5vw, 64px) auto 0; padding:0 var(--gutter); position:relative; }
.hero__photo{ margin:0; }
.hero__photo img{ width:100%; display:block; }
.hero__photo figcaption{
  margin-top:10px; text-align:center; font-size:var(--fs-xs); font-weight:700; color:var(--ink-faint);
}
.hero__photo--center{ display:flex; flex-direction:column; align-items:center; margin-bottom:18px; }
.hero__photo--center img{ width:38%; min-width:300px; }
.hero__photo--pair{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; }
.hero__photo--right, .hero__photo--left{ width:44%; }

@media (max-width:900px){
  .hero__photo--center img{ width:62%; min-width:0; }
  .hero__photo--pair{ flex-direction:column; align-items:center; gap:28px; }
  .hero__photo--right, .hero__photo--left{ width:76%; }
}
@media (max-width:480px){
  .hero__photo--center img{ width:88%; }
  .hero__photo--right, .hero__photo--left{ width:94%; }
  .hero__cta-row .btn{ flex:1 1 100%; }
}

/* ============================================================
   FAQ — real accordion (namespaced separately from the existing
   .faq-item used by the course-landing page's <details> FAQ, to avoid
   a class-name collision between the two different FAQ patterns)
   ============================================================ */
.faq-list{ margin-top:36px; display:flex; flex-direction:column; gap:12px; }
.faq-accordion{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.faq-accordion__question{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 22px; background:none; border:none; text-align:right; font-size:14.5px; font-weight:700;
  color:var(--ink); cursor:pointer;
}
.faq-accordion__chevron{ flex-shrink:0; transition:transform .2s ease; color:var(--purple); }
.faq-accordion.is-open .faq-accordion__chevron{ transform:rotate(180deg); }
.faq-accordion__answer{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq-accordion.is-open .faq-accordion__answer{ max-height:220px; }
.faq-accordion__answer p{ padding:0 22px 20px; font-size:13.5px; }

/* ============================================================
   WHO IS AFER FOR — three audience tracks
   ============================================================ */
.who-for__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:36px; }
.who-for__card{
  position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(24px, 3vw, 34px); box-shadow:var(--shadow-sm); overflow:hidden;
  transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.who-for__card::before{
  content:''; position:absolute; inset-inline:0; top:0; height:4px;
  background:linear-gradient(90deg, var(--orange), var(--fuchsia), var(--purple));
  transform:scaleX(0); transform-origin:right; transition:transform var(--dur-3) var(--ease-out);
}
.who-for__card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--purple-tint-2); }
.who-for__card:hover::before{ transform:scaleX(1); }
.who-for__card p{ flex:1; }
.who-for__card h3{ font-size:22px; margin:12px 0 10px; }
.who-for__card p{ margin-bottom:18px; }
.who-for__link{ display:inline-flex; align-items:center; gap:6px; font-size:.85rem; font-weight:800; color:var(--purple-dark); }

@media (max-width:900px){ .who-for__grid{ grid-template-columns:1fr; } }

/* ============================================================
   HOW IT WORKS — 4-step flow
   ============================================================ */
.how-it-works{ background:var(--bg); }
.how-it-works__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:36px; }
.how-it-works__grid{ counter-reset:step; position:relative; }
.how-it-works__step{ text-align:center; padding:0 8px; position:relative; }
@media (min-width:901px){
  .how-it-works__step:not(:last-child)::after{ content:''; position:absolute; top:24px; inset-inline-start:calc(50% + 34px); width:calc(100% - 44px); border-top:2px dashed var(--line-strong); }
}
.how-it-works__num{
  display:flex; align-items:center; justify-content:center; width:48px; height:48px;
  border-radius:50%; background:var(--purple-dark); color:#fff; font-weight:800; font-size:18px;
  margin:0 auto 16px; position:relative; z-index:1; box-shadow:0 0 0 6px var(--bg), 0 0 0 7px var(--line-strong);
  transition:background-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.how-it-works__step h3{ font-size:16px; margin-bottom:8px; }

@media (max-width:900px){ .how-it-works__grid{ grid-template-columns:1fr; gap:32px; } }

/* ============================================================
   PLATFORMS SECTION
   ============================================================ */
.platforms__grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.platform-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(24px, 3vw, 40px); box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
  transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.platform-card::after{ content:''; position:absolute; width:220px; height:220px; border-radius:50%; inset-inline-end:-90px; top:-110px; background:var(--purple-tint); opacity:.7; pointer-events:none; }
.platform-card > *{ position:relative; z-index:1; }
.platform-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.platform-card__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.platform-card__icon{
  width:52px; height:52px; border-radius:16px; background:var(--purple-tint);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.platform-card__desc{ margin-bottom:14px; }
.platform-card__highlight{ color:var(--purple-dark); font-weight:700; font-size:var(--fs-sm); margin-bottom:24px; }
.platform-card__actions{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; }
.platform-card__stores{ display:flex; gap:8px; flex-wrap:wrap; }
.store-badge{
  font-size:.75rem; font-weight:700; color:var(--ink-soft); background:var(--bg);
  border:1px solid var(--line); padding:6px 12px; border-radius:var(--r-pill);
}

@media (max-width:900px){
  .platforms__grid{ grid-template-columns:1fr; }
}

/* ============================================================
   APP SHOWCASE
   ============================================================ */
.app-showcase{ background:linear-gradient(135deg, var(--purple-tint), var(--fuchsia-tint)); border-radius:var(--r-xl); margin:0 auto; max-width:calc(var(--container) + 2 * var(--gutter) + 80px); }
.app-showcase__inner{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center; }
.app-showcase__photo img{ border-radius:var(--r-lg); box-shadow:var(--shadow-lg); transition:transform var(--dur-3) var(--ease-out); }
.app-showcase__photo:hover img{ transform:translateY(-6px) rotate(-1deg); }
.app-showcase__list{ margin:22px 0 30px; display:flex; flex-direction:column; gap:14px; }
.app-showcase__list li{ display:flex; align-items:center; gap:10px; font-weight:700; color:var(--ink); }
.app-showcase__check{ color:var(--fuchsia); flex-shrink:0; }

@media (max-width:900px){
  .app-showcase{ margin:0; border-radius:0; }
  .app-showcase__inner{ grid-template-columns:1fr; text-align:center; }
  .app-showcase__list li{ justify-content:center; }
}

/* ============================================================
   SECTION HEAD (shared by academy / discover-teacher / content)
   ============================================================ */
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:clamp(28px, 3.5vw, 44px); flex-wrap:wrap; }
.section-head h2{ max-width:20ch; }
.section-head__lead{ margin-top:10px; max-width:540px; }
.section-head--center{ justify-content:center; text-align:center; }
.section-head--center h2{ max-width:none; }
.section-head--center .section-head__lead{ margin-inline:auto; }

/* ============================================================
   ACADEMY — course cards
   ============================================================ */
.academy__grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
.course-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.course-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.course-card__cover{ height:150px; display:flex; align-items:center; justify-content:center; }
.course-card__body{ padding:24px; display:flex; flex-direction:column; flex:1; }
.course-card__teacher{ font-size:var(--fs-xs); color:var(--purple); font-weight:700; margin:6px 0 12px; }
.course-card__desc{ font-size:var(--fs-sm); margin-bottom:16px; }
.course-card__meta{ display:flex; gap:8px; flex-wrap:wrap; font-size:.75rem; color:var(--ink-soft); margin-bottom:20px; }
.course-card__meta span{ background:var(--bg); border:1px solid var(--line); padding:4px 10px; border-radius:var(--r-pill); }
.course-card__foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; }
.course-card__price{ font-weight:800; color:var(--purple-dark); font-size:var(--fs-h3); }

@media (max-width:1100px){ .academy__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){ .academy__grid{ grid-template-columns:1fr; } }

/* ============================================================
   DISCOVER TEACHER — teacher cards
   ============================================================ */
.discover-teacher{ background:var(--bg); }
.discover-teacher__grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:clamp(18px, 2vw, 28px); }
.teacher-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; text-align:center; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.teacher-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
/* The source portraits are full-length (520×1233); show the upper part
   in a 4:5 frame — scaled uniformly, never stretched. */
.teacher-card__photo{ width:100%; aspect-ratio:4 / 5; overflow:hidden; background:linear-gradient(180deg, var(--purple-tint), #fff); }
.teacher-card__photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 8%; display:block; transition:transform var(--dur-3) var(--ease-out); }
.teacher-card:hover .teacher-card__photo img{ transform:scale(1.04); }
.teacher-card__body{ display:flex; flex-direction:column; flex:1; }
.teacher-card__cta{ margin-top:auto; }
.teacher-card__body{ padding:22px 24px 26px; }
.teacher-card__specialty{ font-size:var(--fs-sm); margin:6px 0 14px; }
.teacher-card__rating{ display:flex; align-items:center; justify-content:center; gap:6px; font-weight:800; margin-bottom:14px; }
.teacher-card__reviews{ font-weight:400; color:var(--ink-faint); font-size:var(--fs-xs); }
.teacher-card__facts{ display:flex; flex-direction:column; gap:6px; font-size:var(--fs-xs); color:var(--ink-soft); margin-bottom:16px; }
.teacher-card__foot{ margin-bottom:16px; }
.teacher-card__price{ font-weight:800; color:var(--purple-dark); }
.teacher-card__cta{ width:100%; justify-content:center; }

@media (max-width:1100px){ .discover-teacher__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){ .discover-teacher__grid{ grid-template-columns:1fr; } .teacher-card__photo{ aspect-ratio:1 / 1; } }

/* ============================================================
   PORTAL SECTIONS (teacher / center)
   ============================================================ */
.portal-section--teacher{ background:var(--purple-dark); color:#fff; }
.portal-section--teacher h2, .portal-section--teacher .eyebrow{ color:#fff; }
.portal-section--teacher .eyebrow{ background:rgba(255,255,255,.14); }
.portal-section--teacher p{ color:rgba(255,255,255,.78); }
.portal-section--center{ background:var(--bg); }

.portal-section__inner{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.portal-section__inner--reverse .portal-section__visual{ order:1; }
.portal-section__inner--reverse .portal-section__copy{ order:2; }

.portal-section__tags{ display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 28px; }
.portal-section__tags li{
  font-size:11.5px; font-weight:700; padding:6px 14px; border-radius:var(--r-pill);
  background:var(--purple-tint); color:var(--purple-dark);
}
.portal-section--teacher .portal-section__tags li{ background:rgba(255,255,255,.14); color:#fff; }

.portal-section__note{ font-size:.8rem; color:var(--ink-faint); margin-top:14px; }
.portal-section--teacher .portal-section__note{ color:rgba(255,255,255,.75); }

/* White button / purple text specifically for the Teacher Portal CTA
   (sits on the dark purple section background). */
.btn--onLight-teacher{ background:#fff; color:var(--purple-dark); box-shadow:0 10px 24px rgba(0,0,0,.18); }
.btn--onLight-teacher:hover{ box-shadow:0 16px 32px rgba(0,0,0,.24); }

.portal-section__dashboard-img{
  width:100%; border-radius:var(--r-lg); box-shadow:var(--shadow-lg); border:1px solid var(--line);
}

@media (max-width:900px){
  .portal-section__inner, .portal-section__inner--reverse{ grid-template-columns:1fr; }
  .portal-section__inner--reverse .portal-section__visual,
  .portal-section__inner--reverse .portal-section__copy{ order:unset; }
}

/* ============================================================
   CONTENT SECTION
   ============================================================ */
.content-section__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.content-card{
  display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:24px; box-shadow:var(--shadow-sm); transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.content-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.content-card--static:hover{ transform:none; box-shadow:var(--shadow-sm); cursor:default; }
.content-card__kind{ font-size:11px; font-weight:800; color:var(--fuchsia); }
.content-card h3{ font-size:17px; margin:10px 0 8px; }
.content-card p{ font-size:var(--fs-xs); }
.content-card__soon{ display:inline-block; margin-top:12px; font-size:10.5px; font-weight:700; color:var(--ink-faint); background:var(--bg); padding:4px 10px; border-radius:var(--r-pill); }

@media (max-width:900px){ .content-section__grid{ grid-template-columns:1fr; } }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta{
  background:
    radial-gradient(50% 120% at 0% 100%, rgba(217,123,69,.35), transparent 60%),
    radial-gradient(40% 100% at 100% 0%, rgba(166,64,143,.45), transparent 60%),
    linear-gradient(135deg, var(--purple-ink), var(--purple-dark) 50%, var(--purple));
  padding:clamp(56px, 7vw, 96px) 0; position:relative; overflow:hidden;
}
.final-cta::before{ content:''; position:absolute; width:420px; height:420px; border-radius:50%; border:1.5px solid rgba(255,255,255,.1); inset-inline-start:-140px; top:-200px; }
.final-cta__inner{ text-align:center; position:relative; }
.final-cta h2{ color:#fff; font-size:var(--fs-h1); margin-bottom:12px; }
.final-cta__lead{ color:var(--on-dark-soft); max-width:560px; margin:0 auto 30px; font-size:var(--fs-lead); }

/* ============================================================
   PAGE INTRO (secondary pages)
   ============================================================ */
.page-intro{
  padding:clamp(48px, 6vw, 80px) 0 clamp(36px, 4vw, 56px); text-align:center; position:relative; overflow:hidden;
  background:
    radial-gradient(40% 90% at 100% 0%, rgba(166,64,143,.12), transparent 70%),
    radial-gradient(35% 80% at 0% 100%, rgba(217,123,69,.12), transparent 70%),
    var(--purple-tint);
}
.page-intro::after{ content:''; position:absolute; inset-inline:0; bottom:0; height:1px; background:linear-gradient(90deg, transparent, var(--line-strong), transparent); }
.page-intro__inner{ max-width:720px; margin:0 auto; }
.page-intro h1{ margin:14px 0 12px; font-size:var(--fs-h1); }
.page-intro__lead{ font-size:var(--fs-lead); }

/* Breadcrumb — sits above the eyebrow on every secondary page */
.breadcrumb{ margin-bottom:14px; }
.breadcrumb ol{ display:flex; justify-content:center; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:0; }
.breadcrumb li{ display:flex; align-items:center; gap:6px; font-size:.8rem; }
.breadcrumb a{ color:var(--ink-soft); font-weight:600; }
.breadcrumb a:hover{ color:var(--purple-dark); }
.breadcrumb li[aria-current="page"] span:last-child{ color:var(--purple-dark); font-weight:700; }
.breadcrumb__sep{ color:var(--ink-faint); }

/* ============================================================
   PLATFORM DETAIL PAGE
   ============================================================ */
.platform-detail{ padding:80px 0; }
.platform-detail__block{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; margin-bottom:96px; }
.platform-detail__block:last-child{ margin-bottom:0; }
.platform-detail__block--reverse .platform-detail__visual{ order:1; }
.platform-detail__block--reverse .platform-detail__copy{ order:2; }
.platform-detail__visual img{ border-radius:var(--r-lg); box-shadow:var(--shadow-lg); }
.platform-detail__feature-list{ display:flex; flex-direction:column; gap:14px; margin:22px 0 28px; }
.platform-detail__feature-list li{ display:flex; gap:10px; align-items:flex-start; font-weight:700; }
.platform-detail__feature-list svg{ flex-shrink:0; margin-top:3px; color:var(--fuchsia); }
.platform-detail__subhead{ font-size:11.5px; font-weight:800; color:var(--purple); text-transform:uppercase; letter-spacing:.03em; margin-bottom:8px; }

@media (max-width:900px){
  .platform-detail__block, .platform-detail__block--reverse{ grid-template-columns:1fr; }
  .platform-detail__block--reverse .platform-detail__visual, .platform-detail__block--reverse .platform-detail__copy{ order:unset; }
}

/* ============================================================
   ACADEMY / DISCOVER-TEACHER FULL PAGES — search + filters
   ============================================================ */
.filters-bar{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px 24px; margin-bottom:32px; box-shadow:var(--shadow-sm);
  display:flex; gap:16px; flex-wrap:wrap; align-items:center;
}
.filters-bar__search{ flex:1; min-width:220px; position:relative; }
.filters-bar__search input{
  width:100%; padding:12px 44px 12px 16px; border-radius:var(--r-pill); border:1.5px solid var(--line);
  font-size:var(--fs-sm); font-family:inherit;
}
.filters-bar__search svg{ position:absolute; inset-inline-end:16px; top:50%; transform:translateY(-50%); color:var(--ink-faint); }
.filters-bar select{
  padding:11px 14px; border-radius:var(--r-pill); border:1.5px solid var(--line);
  font-size:var(--fs-sm); font-family:inherit; background:var(--surface); color:var(--ink-soft);
}
.filters-bar__tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.filters-bar__tabs button{
  padding:9px 18px; border-radius:var(--r-pill); border:1.5px solid var(--line); background:var(--surface);
  font-size:var(--fs-xs); font-weight:700; color:var(--ink-soft);
}
.filters-bar__tabs button.is-active{ background:var(--purple-dark); border-color:var(--purple-dark); color:#fff; }

.results-empty{ text-align:center; padding:60px 20px; color:var(--ink-faint); }
.results-count{ font-size:var(--fs-sm); color:var(--ink-faint); margin-bottom:20px; }

/* ============================================================
   TEACHER PROFILE PAGE
   ============================================================ */
.teacher-profile{ padding:64px 0 96px; }
.breadcrumb-row{ font-size:12px; color:var(--ink-faint); margin-bottom:20px; }
.breadcrumb-row a{ color:var(--purple); font-weight:700; }
.teacher-profile__header{ display:flex; gap:28px; align-items:center; margin-bottom:40px; flex-wrap:wrap; }
.teacher-profile__avatar{
  width:96px; height:96px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--purple), var(--fuchsia)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:28px;
}
.teacher-profile__meta{ display:flex; gap:16px; flex-wrap:wrap; font-size:var(--fs-sm); color:var(--ink-soft); margin-top:10px; }
.teacher-profile__grid{ display:grid; grid-template-columns:2fr 1fr; gap:40px; }
.teacher-profile__section{ margin-bottom:36px; }
.teacher-profile__section h2{ margin-bottom:14px; }
.teacher-profile__chips{ display:flex; gap:8px; flex-wrap:wrap; }
.teacher-profile__chips li{ background:var(--purple-tint); color:var(--purple-dark); font-size:var(--fs-xs); font-weight:700; padding:7px 14px; border-radius:var(--r-pill); }
.teacher-profile__sidebar{ position:sticky; top:24px; align-self:start; }
.teacher-profile__price-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; box-shadow:var(--shadow-md); text-align:center; }
.teacher-profile__price-card .price{ font-size:28px; font-weight:900; color:var(--purple-dark); margin-bottom:4px; }
.teacher-profile__price-card button, .teacher-profile__price-card a{ width:100%; justify-content:center; margin-top:14px; }

@media (max-width:900px){
  .teacher-profile__grid{ grid-template-columns:1fr; }
  .teacher-profile__sidebar{ position:static; }
}

/* ============================================================
   COURSE LANDING PAGE
   ============================================================ */
.course-hero{ background:linear-gradient(135deg, var(--purple-dark), var(--purple)); color:#fff; padding:72px 0; }
.course-hero__inner{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.course-hero__video{
  aspect-ratio:16/9; background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.2);
  border-radius:var(--r-lg); display:flex; align-items:center; justify-content:center;
}
.course-hero h1{ color:#fff; font-size:var(--fs-h1); margin:10px 0 16px; }
.course-hero p{ color:rgba(255,255,255,.8); }
.course-hero .eyebrow{ background:rgba(255,255,255,.14); color:#fff; }

.course-body{ padding:72px 0; display:grid; grid-template-columns:2fr 1fr; gap:48px; }
.course-body__section{ margin-bottom:40px; }
.course-body__list{ display:flex; flex-direction:column; gap:12px; }
.course-body__list li{ display:flex; gap:10px; align-items:flex-start; }
.course-body__list svg{ flex-shrink:0; margin-top:3px; color:var(--fuchsia); }
.course-sidebar{ position:sticky; top:24px; align-self:start; }
.course-sidebar__card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; box-shadow:var(--shadow-md); }
.course-sidebar__price{ font-size:26px; font-weight:900; color:var(--purple-dark); margin-bottom:16px; }
.course-sidebar__facts{ display:flex; flex-direction:column; gap:10px; font-size:var(--fs-sm); margin:18px 0; }
.course-sidebar__facts li{ display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:10px; }

.faq-item{ border-bottom:1px solid var(--line); padding:18px 0; }
.faq-item summary{ cursor:pointer; font-weight:800; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item p{ margin-top:12px; font-size:var(--fs-sm); }

.testimonial-card{ background:var(--purple-tint); border-radius:var(--r-md); padding:22px; margin-bottom:16px; }
.testimonial-card p{ color:var(--ink); font-style:italic; margin-bottom:12px; }
.testimonial-card__author{ font-size:var(--fs-xs); font-weight:800; color:var(--purple-dark); }

@media (max-width:900px){
  .course-hero__inner, .course-body{ grid-template-columns:1fr; }
  .course-sidebar{ position:static; }
}

/* ============================================================
   SOCIAL PROOF — stats + testimonials
   ============================================================ */
.social-proof{ background:var(--purple-dark); }
.social-proof__stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.social-proof__value{ font-size:clamp(2rem, 1.5rem + 2vw, 2.8rem); font-weight:800; color:#fff; margin:0; }
.social-proof__label{ font-size:.85rem; color:rgba(255,255,255,.8); margin:6px 0 0; }
.social-proof .eyebrow{ background:rgba(255,255,255,.14); color:#fff; }
.social-proof h2{ color:#fff; }

.testimonials__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:36px; }
.testimonial-card{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-lg);
  padding:28px; margin:0;
}
.testimonial-card__quote{ margin-bottom:14px; }
.social-proof .testimonial-card__text{ font-size:1rem; line-height:1.9; color:#fff; font-style:normal; margin-bottom:18px; }
.testimonial-card__name{ display:block; font-size:13px; font-weight:800; color:#fff; }
.testimonial-card__role{ display:block; font-size:.75rem; color:rgba(255,255,255,.75); margin-top:2px; }

@media (max-width:900px){
  .social-proof__stats{ grid-template-columns:repeat(2,1fr); }
  .testimonials__grid{ grid-template-columns:1fr; }
}

/* ============================================================
   404 PAGE
   ============================================================ */
.not-found{ padding:100px 0; }
.not-found__inner{ text-align:center; max-width:520px; }
.not-found__code{
  font-size:clamp(72px, 14vw, 120px); font-weight:800; line-height:1;
  background:linear-gradient(100deg, var(--purple-dark), var(--fuchsia)); -webkit-background-clip:text; background-clip:text; color:var(--purple-dark);
  -webkit-text-fill-color:transparent;
  margin-bottom:8px;
}
.not-found__lead{ margin:14px 0 28px; }
.not-found__links{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:32px;
  padding-top:28px; border-top:1px solid var(--line);
}
.not-found__links a{
  font-size:13px; font-weight:700; color:var(--purple-dark); background:var(--purple-tint);
  padding:9px 18px; border-radius:var(--r-pill);
}
.not-found__links a:hover{ background:var(--purple); color:#fff; }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-story{ padding:64px 0 40px; }
.about-story__lead{ font-size:15.5px; line-height:1.9; margin-bottom:22px; }
.about-story__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:32px; margin-top:20px; }
.about-story__card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; }
.about-story__card h2{ margin-bottom:10px; }

/* Methodology flow — a wrapping chain of steps connected by arrows */
.methodology__flow{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:10px; margin:36px 0 24px;
}
.methodology__step{
  background:var(--purple-tint); color:var(--purple-dark); font-weight:800; font-size:13px;
  padding:10px 18px; border-radius:var(--r-pill); white-space:nowrap;
}
.methodology__arrow{ color:var(--fuchsia); font-size:15px; }
.methodology__note{ text-align:center; max-width:640px; margin:0 auto; font-size:13.5px; }

@media (max-width:900px){
  .about-story__grid{ grid-template-columns:1fr; }
}

/* Founder / acknowledgment — real photo + story, two-column */
.founder-section{ background:var(--purple-tint); padding:72px 0; }
.acknowledgment-section{ background:var(--surface); }
.founder-card{
  display:grid; grid-template-columns:340px 1fr; gap:48px; align-items:center;
  max-width:920px; margin:0 auto;
}
.founder-card--reverse{ grid-template-columns:1fr 340px; }
.founder-card--reverse .founder-card__photo{ order:2; }
.founder-card--reverse .founder-card__body{ order:1; }
.founder-card__photo img{
  width:100%; border-radius:var(--r-xl); box-shadow:var(--shadow-lg);
}
.founder-card__body h2{ margin:8px 0 2px; }
.founder-card__title{ color:var(--purple); font-weight:700; font-size:var(--fs-sm); margin:0 0 16px; }
.founder-card__body p{ margin-bottom:14px; font-size:14px; line-height:1.85; }

@media (max-width:820px){
  .founder-card, .founder-card--reverse{ grid-template-columns:1fr; text-align:center; }
  .founder-card--reverse .founder-card__photo{ order:1; }
  .founder-card--reverse .founder-card__body{ order:2; }
  .founder-card__photo img{ max-width:280px; margin:0 auto; }
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-page{ padding:96px 0; display:flex; justify-content:center; }
.login-card{ width:100%; max-width:420px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); padding:44px; }
.login-card h1{ text-align:center; margin-bottom:8px; font-size:var(--fs-h2); }
.login-card__lead{ text-align:center; margin-bottom:28px; }
.login-card__field{ margin-bottom:18px; }
.login-card__field label{ display:block; font-size:var(--fs-xs); font-weight:700; color:var(--ink-soft); margin-bottom:6px; }
.login-card__field input{ width:100%; padding:12px 16px; border-radius:10px; border:1.5px solid var(--line); font-family:inherit; font-size:var(--fs-sm); }
.login-card button[type="submit"]{ width:100%; justify-content:center; margin-top:8px; }
.login-card__note{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line); font-size:12px; color:var(--ink-faint); text-align:center; }

/* ============================================================
   MARKETING PAGES (teacher.html / centers.html) — extended detail
   ============================================================ */
.marketing-benefits{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:48px 0; }
.marketing-benefit{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; box-shadow:var(--shadow-sm); }
.marketing-benefit__icon{ width:46px; height:46px; border-radius:14px; background:var(--purple-tint); color:var(--purple-dark); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
@media (max-width:900px){ .marketing-benefits{ grid-template-columns:1fr; } }

.site-footer{ background:var(--footer-bg); color:rgba(255,255,255,.78); margin-top:0; position:relative; }
.site-footer::before{ content:''; position:absolute; inset-inline:0; top:0; height:4px; background:linear-gradient(90deg, var(--orange), var(--fuchsia), var(--purple)); }
.site-footer__inner{
  padding-block:clamp(48px, 6vw, 72px) 48px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
}
.site-footer__brand p{ color:rgba(255,255,255,.75); font-size:var(--fs-sm); margin:16px 0 20px; max-width:280px; }
.site-footer__social{ display:flex; gap:10px; }
.site-footer__social a{
  width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.site-footer__social a:hover{ background:var(--fuchsia); }
.site-footer__col h2{ color:#fff; font-size:1rem; margin-bottom:18px; }
.site-footer__col ul{ display:flex; flex-direction:column; gap:12px; }
.site-footer__col a{ display:inline-block; padding:2px 0; font-size:var(--fs-sm); color:rgba(255,255,255,.78); transition:color var(--dur-2), transform var(--dur-2) var(--ease-out); }
.site-footer__col a:hover{ color:#fff; transform:translateX(-3px); }
.site-footer__bottom{ border-top:1px solid rgba(255,255,255,.1); padding:20px 0; }
.site-footer__bottom p{ font-size:.8rem; color:rgba(255,255,255,.7); text-align:center; }

@media (max-width:900px){
  .site-footer__inner{ grid-template-columns:1fr 1fr; }
  .site-footer__brand{ grid-column:1 / -1; }
}
@media (max-width:560px){
  .site-footer__inner{ grid-template-columns:1fr; }
}

/* ============================================================
   SHARED — brand cover art, stars, initials avatar
   ============================================================ */
.art-cover{ width:100%; overflow:hidden; line-height:0; background:var(--purple-dark); }
.art-cover svg{ display:block; width:100%; height:100%; }
.stars{ display:inline-flex; gap:2px; vertical-align:middle; }
.stars svg{ fill:var(--line); }
.stars svg.is-on{ fill:#F2B33D; }
.avatar-initials{
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, var(--purple), var(--fuchsia)); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:800;
}
.hero__cta-row--start{ justify-content:flex-start; }
.hidden{ display:none !important; }

/* ============================================================
   PLATFORMS PAGE (merged عافر كيدز + عافر+ + centers/teachers)
   ============================================================ */
.pf-jump{ position:sticky; top:var(--header-h); z-index:30; background:rgba(255,255,255,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.pf-jump__inner{ display:flex; gap:8px; justify-content:center; padding:12px var(--gutter); overflow-x:auto; }
.pf-jump a{ font-size:13px; font-weight:800; color:var(--purple-dark); padding:8px 18px; border-radius:var(--r-pill); background:var(--purple-tint); white-space:nowrap; }
.pf-jump a:hover{ background:var(--purple-dark); color:#fff; }

.pf-app{ padding:88px 0; scroll-margin-top:64px; }
.pf-app--plus{ background:var(--bg); }
.pf-app__hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; margin-bottom:64px; }
.pf-app__hero--reverse .pf-app__visual{ order:-1; }
.pf-app__copy h2{ font-size:var(--fs-h1); margin:4px 0 10px; }
.pf-app__tagline{ font-size:var(--fs-lead); font-weight:700; color:var(--purple-dark); margin-bottom:16px; }
.pf-app__copy > p:not(.pf-app__tagline){ margin-bottom:26px; }
.pf-app__visual img{ width:100%; border-radius:var(--r-xl); }

.pf-block-head{ margin-bottom:28px; }
.pf-block-head h3{ font-size:var(--fs-h2); }
.pf-block-head--center{ text-align:center; }

.pf-audience{ display:grid; gap:22px; }
.pf-audience--4{ grid-template-columns:repeat(4,1fr); }
.pf-audience--3{ grid-template-columns:repeat(3,1fr); }
.pf-audience__card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px 24px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pf-audience__card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--purple); }
.pf-audience__icon{ width:54px; height:54px; border-radius:16px; background:var(--purple-tint); color:var(--purple-dark); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.pf-app--plus .pf-audience__icon{ background:var(--fuchsia-tint); color:var(--fuchsia); }
.pf-audience__card h3{ font-size:18px; margin-bottom:8px; }
.pf-audience__why{ font-size:14px; color:var(--ink); font-weight:500; margin-bottom:16px; }
.pf-checklist{ display:flex; flex-direction:column; gap:10px; border-top:1px dashed var(--line); padding-top:16px; }
.pf-checklist li{ display:flex; gap:8px; align-items:flex-start; font-size:13.5px; color:var(--ink-soft); line-height:1.7; }
.pf-checklist svg{ flex-shrink:0; margin-top:4px; color:var(--fuchsia); }

.pf-features{ margin-top:40px; background:var(--purple-dark); border-radius:var(--r-xl); padding:32px 36px; color:#fff; }
.pf-app--plus .pf-features{ background:linear-gradient(120deg, var(--fuchsia), var(--purple)); }
.pf-features h3{ color:#fff; font-size:20px; margin-bottom:18px; }
.pf-features ul{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px 20px; }
.pf-features li{ display:flex; gap:8px; align-items:center; font-weight:700; font-size:14px; }
.pf-features svg{ color:#F2B33D; flex-shrink:0; }

.pf-growth{ padding:96px 0; background:linear-gradient(160deg, #2c1a3c, var(--purple-dark) 55%, #4d2b66); color:#fff; scroll-margin-top:64px; }
.pf-growth__head{ text-align:center; max-width:720px; margin:0 auto 44px; }
.pf-growth__head .eyebrow{ background:rgba(255,255,255,.14); color:#fff; }
.pf-growth__head h2{ color:#fff; margin-bottom:14px; }
.pf-growth__head p{ color:rgba(255,255,255,.78); text-align-last:center; }
.pf-growth__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.pf-growth__card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-lg); padding:26px; }
.pf-growth__who{ display:inline-block; font-size:11px; font-weight:800; color:var(--purple-dark); background:#F2B33D; padding:3px 12px; border-radius:var(--r-pill); margin-bottom:12px; }
.pf-growth__card h3{ color:#fff; font-size:18px; margin-bottom:8px; }
.pf-growth__card p{ color:rgba(255,255,255,.75); font-size:14px; }

.pf-system{ display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:center; margin-top:64px; padding-top:56px; border-top:1px solid rgba(255,255,255,.12); scroll-margin-top:80px; }
.pf-system h3{ color:#fff; font-size:var(--fs-h2); margin-bottom:10px; }
.pf-system__copy > p{ color:rgba(255,255,255,.78); }
.pf-system__list{ display:grid; grid-template-columns:1fr 1fr; gap:16px 22px; margin:24px 0 28px; }
.pf-system__list strong{ display:block; color:#fff; font-size:14.5px; margin-bottom:2px; }
.pf-system__list span{ display:block; color:rgba(255,255,255,.75); font-size:13px; line-height:1.7; }
.pf-system__note{ font-size:.8rem; color:rgba(255,255,255,.72) !important; margin-top:14px; }
.pf-system__visual img{ width:100%; border-radius:var(--r-lg); box-shadow:0 30px 70px rgba(0,0,0,.35); }

.pf-compare{ max-width:900px; margin:0 auto; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); box-shadow:var(--shadow-sm); }
.pf-compare__row{ display:grid; grid-template-columns:160px 1fr 1fr; border-top:1px solid var(--line); }
.pf-compare__row:first-child{ border-top:none; }
.pf-compare__row span{ padding:16px 20px; font-size:14px; color:var(--ink-soft); }
.pf-compare__row span:first-child{ font-weight:800; color:var(--ink); background:var(--bg); }
.pf-compare__row--head span{ font-weight:900; color:#fff !important; background:var(--purple-dark) !important; font-size:15px; }
.pf-compare__row--head span:last-child{ background:var(--fuchsia) !important; }
.pf-download__lead{ max-width:480px; margin:14px auto 28px; text-align-last:center; }

@media (max-width:1100px){
  .pf-audience--4{ grid-template-columns:repeat(2,1fr); }
  .pf-features ul{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .pf-jump__inner{ justify-content:flex-start; }
  .pf-app{ padding:56px 0; }
  .pf-app__hero, .pf-system{ grid-template-columns:1fr; gap:28px; }
  .pf-app__hero--reverse .pf-app__visual{ order:0; }
  .pf-audience--3, .pf-growth__grid{ grid-template-columns:1fr; }
  .pf-system__list{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .pf-audience--4, .pf-features ul{ grid-template-columns:1fr; }
  .pf-features{ padding:24px; }
  .pf-compare__row{ grid-template-columns:1fr 1fr; }
  .pf-compare__row span:first-child{ grid-column:1 / -1; padding-bottom:8px; }
  .pf-compare__row--head span:first-child{ display:none; }
}

/* ============================================================
   مركز عافر — news / gallery / videos
   ============================================================ */
.cx-hero{ background:radial-gradient(120% 140% at 100% 0%, #6B3F8F 0%, #3E2350 45%, #241B33 100%); color:#fff; padding:64px 0 72px; position:relative; overflow:hidden; }
.cx-hero::after{ content:''; position:absolute; width:520px; height:520px; border-radius:50%; border:1.5px solid rgba(255,255,255,.08); left:-160px; bottom:-260px; }
.cx-hero__inner{ display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:center; position:relative; z-index:1; }
.cx-hero .breadcrumb ol{ justify-content:flex-start; }
.cx-hero .breadcrumb a, .cx-hero .breadcrumb__sep{ color:rgba(255,255,255,.6); }
.cx-hero .breadcrumb li[aria-current="page"] span:last-child{ color:#fff; }
.cx-hero .eyebrow{ background:rgba(255,255,255,.14); color:#fff; }
.cx-hero h1{ color:#fff; font-size:64px; margin:6px 0 16px; }
.cx-hero__lead{ color:rgba(255,255,255,.8); font-size:var(--fs-lead); margin-bottom:26px; }
.cx-hero__chips{ display:flex; flex-wrap:wrap; gap:10px; }
.cx-hero__chips span{ font-size:13px; font-weight:700; padding:8px 16px; border-radius:var(--r-pill); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); }
.cx-hero__chips b{ color:#F2B33D; margin-inline-start:4px; }

.cx-hero__featured{
  display:block; width:100%; padding:0; text-align:right; border:none; background:var(--surface); color:var(--ink);
  border-radius:var(--r-xl); overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.4);
  transform:rotate(-1.2deg); transition:transform .2s ease;
}
.cx-hero__featured:hover{ transform:rotate(0) translateY(-4px); }
.cx-hero__featured-visual{ position:relative; }
.cx-hero__featured-visual .art-cover{ aspect-ratio:16 / 8 !important; }
.cx-badge{ position:absolute; top:16px; right:16px; background:#F2B33D; color:var(--ink); font-size:12px; font-weight:900; padding:6px 14px; border-radius:var(--r-pill); }
.cx-hero__featured-body{ padding:24px 28px 28px; }
.cx-hero__featured-body h2{ font-size:24px; margin:10px 0 8px; }
.cx-hero__featured-body p{ font-size:14.5px; margin-bottom:12px; }

.cx-kind{ display:inline-block; font-size:11.5px; font-weight:800; padding:4px 12px; border-radius:var(--r-pill); background:var(--purple-tint); color:var(--purple-dark); }
.cx-kind[data-kind="event"]{ background:var(--sky-tint); color:#1f5f93; }
.cx-kind[data-kind="award"]{ background:var(--orange-tint); color:#8f4520; }
.cx-kind[data-kind="party"]{ background:var(--fuchsia-tint); color:#7d2c6b; }
.cx-date{ font-size:12.5px; color:var(--ink-faint); font-weight:600; }

.cx-tabs{ flex-wrap:wrap; }
.cx-news{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.cx-news__card{
  display:flex; flex-direction:column; text-align:right; padding:0; border:1px solid var(--line); background:var(--surface);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); color:var(--ink);
  transition:transform .15s ease, box-shadow .15s ease;
}
.cx-news__card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.cx-news__card--wide{ grid-column:span 2; flex-direction:row; }
.cx-news__card--wide .cx-news__visual{ width:52%; flex-shrink:0; }
.cx-news__card--wide .cx-news__visual .art-cover{ height:100%; aspect-ratio:auto !important; }
.cx-news__card, .cx-hero__featured, .cx-video, .cx-gallery__item{ font:inherit; line-height:1.75; cursor:pointer; }
.cx-news__body{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.cx-news__card--wide .cx-news__body{ justify-content:center; padding:36px 40px; }
.cx-news__card--wide .cx-more{ margin-top:18px; }
.cx-news__card--wide .cx-news__body p{ font-size:15.5px; }
.cx-news__meta{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
.cx-news__body h3{ font-size:18px; margin-bottom:8px; }
.cx-news__body p{ font-size:14px; margin-bottom:14px; }
.cx-news__card--wide .cx-news__body h3{ font-size:22px; }
.cx-more{ margin-top:auto; font-size:13px; font-weight:800; color:var(--purple); }
.cx-news__img{ width:100%; height:auto; }

.cx-gallery-section{ background:var(--bg); }
.cx-gallery{ columns:3 260px; column-gap:18px; }
.cx-gallery__item{
  display:block; width:100%; margin:0 0 18px; padding:0; border:none; background:none; position:relative;
  border-radius:var(--r-lg); overflow:hidden; break-inside:avoid; cursor:zoom-in; box-shadow:var(--shadow-sm);
}
.cx-gallery__item .art-cover, .cx-gallery__item img{ transition:transform .35s ease; }
.cx-gallery__item:hover .art-cover, .cx-gallery__item:hover img{ transform:scale(1.04); }
.cx-gallery__caption{
  position:absolute; inset:auto 0 0 0; padding:28px 16px 14px; text-align:right; color:#fff; font-weight:800; font-size:14px;
  background:linear-gradient(to top, rgba(36,27,51,.85), transparent);
}
.cx-placeholder-note{ font-size:12.5px; color:var(--ink-faint); text-align:center; margin-top:8px; text-align-last:center; }

.cx-videos{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.cx-video{ display:block; padding:0; border:none; background:none; text-align:right; color:var(--ink); }
.cx-video__thumb{ position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md); margin-bottom:14px; }
.cx-video__play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:64px; height:64px; border-radius:50%;
  background:rgba(255,255,255,.95); color:var(--purple-dark); display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.3); transition:transform .15s ease;
}
.cx-video:hover .cx-video__play{ transform:translate(-50%,-50%) scale(1.1); }
.cx-video__play svg{ margin-left:3px; }
.cx-video__duration{ position:absolute; bottom:12px; left:12px; background:rgba(0,0,0,.6); color:#fff; font-size:12px; font-weight:700; padding:3px 10px; border-radius:var(--r-pill); }
.cx-video h3{ font-size:17px; }

.cx-visit{ background:linear-gradient(120deg, var(--orange), #c4603a); padding:56px 0; }
.cx-visit__inner{ display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.cx-visit h2{ color:#fff; }
.cx-visit p{ color:rgba(255,255,255,.88); margin-top:6px; }
.cx-visit .btn--orange{ background:#fff; color:#a24c25; }

.cx-modal{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:24px; }
.cx-modal[hidden]{ display:none; }
.cx-modal__backdrop{ position:absolute; inset:0; background:rgba(20,12,30,.78); backdrop-filter:blur(4px); }
.cx-modal__dialog{ position:relative; width:min(860px, 100%); max-height:calc(100vh - 48px); overflow:auto; background:var(--surface); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); }
.cx-modal__media .art-cover{ aspect-ratio:16 / 8 !important; }
.cx-modal__media img, .cx-modal__media video{ width:100%; display:block; }
.cx-modal__body{ padding:24px 32px 28px; }
.cx-modal__body h2{ margin:10px 0 6px; font-size:26px; }
.cx-modal__text p{ margin-top:12px; }
.cx-modal__close{ position:absolute; top:14px; left:14px; z-index:2; width:40px; height:40px; border-radius:50%; border:none; background:rgba(255,255,255,.95); font-size:24px; line-height:1; color:var(--ink); box-shadow:var(--shadow-sm); }
.cx-modal__nav{ display:flex; justify-content:space-between; padding:0 32px 24px; }
.cx-modal__nav button{ width:44px; height:44px; border-radius:50%; border:1.5px solid var(--line); background:var(--surface); font-size:20px; color:var(--purple-dark); }
.cx-modal__nav button:disabled{ opacity:.35; cursor:default; }
body.cx-locked{ overflow:hidden; }

@media (max-width:980px){
  .cx-hero__inner{ grid-template-columns:1fr; }
  .cx-hero h1{ font-size:44px; }
  .cx-hero__featured{ transform:none; }
  .cx-news{ grid-template-columns:repeat(2,1fr); }
  .cx-videos{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .cx-news, .cx-videos{ grid-template-columns:1fr; }
  .cx-news__card--wide{ grid-column:auto; flex-direction:column; }
  .cx-news__card--wide .cx-news__visual{ width:100%; }
  .cx-news__card--wide .cx-news__visual .art-cover{ aspect-ratio:16 / 10 !important; }
  .cx-modal{ padding:12px; }
  .cx-modal__body{ padding:20px; }
}

/* ============================================================
   مقالات عافر — list, cards, ranked lists, article page
   ============================================================ */
.articles-filters{ flex-direction:column; align-items:stretch; }
.articles-filters__tabs{ flex-wrap:wrap; }
.articles-author-filter{ display:flex; justify-content:space-between; align-items:center; gap:12px; background:var(--purple-tint); border-radius:var(--r-md); padding:12px 18px; margin-bottom:16px; font-size:14px; }
.articles-author-filter a{ font-weight:800; color:var(--purple); }

.articles-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.article-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .15s ease; }
.article-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.article-card__link{ display:flex; flex-direction:column; height:100%; }
.article-card__cover{ position:relative; }
.article-card__img{ width:100%; height:auto; }
.article-card__cat{ position:absolute; top:14px; right:14px; background:rgba(255,255,255,.95); color:var(--purple-dark); font-size:11.5px; font-weight:800; padding:5px 12px; border-radius:var(--r-pill); }
.article-card__cat--inline{ position:static; display:inline-block; background:var(--purple-tint); }
.article-card__body{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.article-card__body h3{ font-size:18px; line-height:1.5; margin-bottom:8px; }
.article-card__excerpt{ font-size:14px; margin-bottom:14px; }
.article-card__meta{ display:flex; gap:8px; font-size:12.5px; color:var(--ink-faint); font-weight:600; margin-bottom:14px; }
.article-card__foot{ margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:10px; padding-top:14px; border-top:1px solid var(--line); }
.article-card__author{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:800; color:var(--ink); }
.article-card__rating{ display:inline-flex; align-items:center; gap:4px; font-size:12.5px; font-weight:800; color:var(--ink-soft); }

.articles-extras{ background:var(--bg); }
.articles-extras__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.ranked{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; box-shadow:var(--shadow-sm); }
.ranked h3{ font-size:18px; margin-bottom:14px; padding-bottom:12px; border-bottom:2px solid var(--purple-tint); }
.ranked ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.ranked ol li{ display:flex; gap:12px; align-items:flex-start; }
.ranked__num{ width:30px; height:30px; flex-shrink:0; border-radius:10px; background:var(--purple-tint); color:var(--purple-dark); font-weight:900; display:flex; align-items:center; justify-content:center; font-size:14px; }
.ranked ol li:first-child .ranked__num{ background:var(--purple-dark); color:#fff; }
.ranked ol a strong{ display:block; font-size:14px; line-height:1.55; color:var(--ink); }
.ranked ol a:hover strong{ color:var(--purple); }
.ranked ol a small{ font-size:12px; color:var(--ink-faint); }
.reader-voices ul{ display:flex; flex-direction:column; gap:16px; }
.reader-voices li{ border-bottom:1px solid var(--line); padding-bottom:14px; }
.reader-voices li:last-child{ border-bottom:none; padding-bottom:0; }
.reader-voices__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; font-size:13.5px; }
.reader-voices p{ font-size:13.5px; margin-bottom:6px; }
.reader-voices a{ font-size:12px; font-weight:700; color:var(--purple); }

.article-page{ padding:48px 0 96px; }
.article-page__grid{ display:grid; grid-template-columns:minmax(0, 1fr) 320px; gap:48px; }
.article-page__side{ position:sticky; top:24px; align-self:start; display:flex; flex-direction:column; gap:20px; }
.article-page__all{ justify-content:center; }
.breadcrumb--start ol{ justify-content:flex-start; }
.article-view__head h1{ font-size:40px; line-height:1.35; margin:12px 0 12px; }
.article-view__excerpt{ font-size:var(--fs-lead); margin-bottom:18px; }
.article-view__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; font-size:13.5px; color:var(--ink-faint); font-weight:600; padding-bottom:22px; }
.article-view__author-thumb{ width:34px; height:34px; border-radius:50%; object-fit:cover; object-position:top; background:var(--purple-tint); }
.article-view__rating{ display:inline-flex; align-items:center; gap:6px; }
.article-view__rating b{ color:var(--ink); }
.article-view__cover{ border-radius:var(--r-xl); overflow:hidden; margin-bottom:36px; box-shadow:var(--shadow-md); }
.article-view__body{ max-width:720px; }
.article-view__body p{ font-size:17px; line-height:2; color:var(--ink); margin-bottom:20px; }
.article-view__body h2{ font-size:24px; margin:34px 0 12px; }
.article-view__body ul{ margin:0 0 24px; padding:20px 24px; background:var(--purple-tint); border-radius:var(--r-md); display:flex; flex-direction:column; gap:10px; }
.article-view__body ul li{ position:relative; padding-right:20px; font-size:16px; line-height:1.8; color:var(--ink); }
.article-view__body ul li::before{ content:''; position:absolute; right:0; top:.75em; width:8px; height:8px; border-radius:50%; background:var(--fuchsia); }

.article-rate{ max-width:720px; margin-top:44px; padding:28px; border-radius:var(--r-lg); background:linear-gradient(135deg, var(--purple-dark), var(--purple)); text-align:center; }
.article-rate h2{ color:#fff; font-size:22px; margin-bottom:12px; }
.article-rate__stars{ display:flex; justify-content:center; gap:6px; }
.article-rate__stars button{ background:none; border:none; padding:4px; line-height:0; }
.article-rate__stars svg{ fill:rgba(255,255,255,.25); transition:transform .12s ease, fill .12s ease; }
.article-rate__stars button.is-on svg, .article-rate__stars button.is-hover svg{ fill:#F2B33D; }
.article-rate__stars button:hover svg{ transform:scale(1.15); }
.article-rate__msg{ color:rgba(255,255,255,.8); font-size:13.5px; margin-top:8px; text-align-last:center; }

.article-comments{ max-width:720px; margin-top:44px; }
.article-comments h2{ font-size:22px; margin-bottom:16px; }
.article-comments__form{ display:grid; gap:12px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; margin-bottom:24px; }
.article-comments__form input, .article-comments__form textarea{ width:100%; padding:12px 16px; border-radius:12px; border:1.5px solid var(--line); font-family:inherit; font-size:14px; background:var(--surface); resize:vertical; }
.article-comments__form input:focus, .article-comments__form textarea:focus{ border-color:var(--purple); }
.article-comments__form [aria-invalid="true"]{ border-color:#B42318; background:#FFF8F7; }
.article-comments__actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.article-comments__note{ font-size:.8rem; color:var(--ink-faint); text-align:start !important; }
.article-comments__list{ display:flex; flex-direction:column; gap:14px; }
.article-comments__list li{ border:1px solid var(--line); border-radius:var(--r-md); padding:16px 18px; background:var(--surface); }
.article-comments__head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.article-comments__head strong{ font-size:14px; }
.article-comments__head small{ margin-inline-start:auto; color:var(--ink-faint); font-size:12px; }
.article-comments__list p{ font-size:14.5px; }
.article-comments__empty{ color:var(--ink-faint); font-size:14px; }

.author-box{ max-width:720px; margin-top:48px; display:grid; grid-template-columns:150px 1fr; gap:28px; align-items:center; padding:28px; border-radius:var(--r-xl); background:var(--purple-tint); }
.author-box__photo{ width:100%; height:auto; border-radius:var(--r-lg); background:#fff; }
.author-box__label{ font-size:12px; font-weight:800; color:var(--fuchsia); }
.author-box h2{ font-size:24px; margin:2px 0; }
.author-box__role{ color:var(--purple); font-weight:700; font-size:14px; margin-bottom:10px; }
.author-box__body > p:not(.author-box__role){ font-size:14.5px; margin-bottom:16px; }

@media (max-width:1100px){
  .articles-grid{ grid-template-columns:repeat(2,1fr); }
  .article-page__grid{ grid-template-columns:1fr; }
  .article-page__side{ position:static; }
}
@media (max-width:900px){ .articles-extras__grid{ grid-template-columns:1fr; } }
@media (max-width:640px){
  .articles-grid{ grid-template-columns:1fr; }
  .article-view__head h1{ font-size:28px; }
  .article-view__body p{ font-size:16px; }
  .author-box{ grid-template-columns:1fr; text-align:center; }
  .author-box__photo{ max-width:160px; margin:0 auto; }
}

/* ============================================================
   MOTION (v3) — calm, purposeful, never required to read content.
   Reveal classes are only active when JS has run (html.js) AND the
   visitor hasn't asked for reduced motion; main.js adds .reveal to
   targets and .is-visible once each enters the viewport (one time).
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  html.js .reveal{
    opacity:0; transform:translateY(var(--reveal-shift));
    transition:opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
    transition-delay:calc(var(--reveal-i, 0) * 70ms);
  }
  html.js .reveal.is-visible{ opacity:1; transform:none; }

  /* Hero entrance: staggered on first paint only */
  .hero__enter{ animation:enter-up .8s var(--ease-out) both; animation-delay:calc(var(--i, 0) * 90ms + 80ms); }
  .hero__photo{ animation:enter-up 1s var(--ease-out) both; }
  .hero__photo--center{ animation-delay:.35s; }
  .hero__photo--right{ animation-delay:.5s; }
  .hero__photo--left{ animation-delay:.62s; }

  /* Gentle float on the hero photos after they land */
  .hero__photo img{ animation:float 7s ease-in-out 1.6s infinite; }
  .hero__photo--right img{ animation-delay:2.4s; }
  .hero__photo--left img{ animation-delay:3.1s; }
}

@keyframes enter-up{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
@keyframes draw-x{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes float{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }

/* ---- Reading progress (article page) ---- */
.reading-progress{ position:fixed; inset-inline:0; top:0; height:4px; z-index:80; pointer-events:none; }
.reading-progress span{
  display:block; height:100%; width:100%;
  background:linear-gradient(270deg, var(--orange), var(--fuchsia), var(--purple));
  transform:scaleX(0); transform-origin:right center;
}

/* ---- Back to top ---- */
.back-to-top{
  position:fixed; inset-inline-start:clamp(14px, 3vw, 28px); bottom:clamp(14px, 3vw, 28px); z-index:70;
  width:48px; height:48px; border-radius:50%; border:none;
  background:var(--purple-dark); color:#fff; box-shadow:var(--shadow-md);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(12px) scale(.9); pointer-events:none;
  transition:opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), background-color var(--dur-2);
}
.back-to-top.is-shown{ opacity:1; transform:none; pointer-events:auto; }
.back-to-top:hover{ background:var(--orange-dark); transform:translateY(-3px); }
.back-to-top:focus-visible{ border-radius:50%; }

/* ============================================================
   AAFER platform UI (v4): accounts, academy items, LMS, chat,
   reviews, articles workflow, community, dashboard.
   Reads every color/radius/shadow from tokens.css.
   ============================================================ */

/* ---------- layout helpers ---------- */
.section--tight{ padding-block:clamp(28px, 2rem + 2vw, 56px); }
.container--wide{ max-width:1400px; }
.container--narrow{ max-width:880px; }
.container--feed{ max-width:760px; }
.auth-wrap{ display:flex; justify-content:center; }
.link-btn{ background:none; border:0; padding:0; color:var(--purple); font-weight:700; font-size:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.link-btn:hover{ color:var(--purple-dark); }
.btn--danger{ background:#B42318; color:#fff; }
.btn--danger:hover{ background:#8F1C13; }
.btn[disabled], .btn[aria-busy="true"]{ opacity:.6; cursor:not-allowed; }
body.modal-open{ overflow:hidden; }

/* ---------- form controls (shared) ---------- */
.ui-form{ display:grid; gap:16px; }
.ui-form input:not([type=checkbox]):not([type=radio]):not([type=file]), .ui-form select, .ui-form textarea,
.adm input:not([type=checkbox]):not([type=radio]):not([type=file]), .adm select, .adm textarea,
.ui-modal input:not([type=checkbox]):not([type=radio]):not([type=file]), .ui-modal select, .ui-modal textarea,
.chat__form textarea, .chat__search input, .cmt-form textarea, .composer textarea{
  width:100%; padding:11px 14px; border-radius:12px; border:1.5px solid var(--line-strong); background:var(--surface);
  font-family:inherit; font-size:var(--fs-sm); color:var(--ink); transition:border-color var(--dur-1);
}
.ui-form textarea, .adm textarea, .ui-modal textarea{ resize:vertical; line-height:1.8; }
:is(.ui-form, .adm, .ui-modal) :is(input, select, textarea):focus{ border-color:var(--purple); }
:is(input, select, textarea)[aria-invalid="true"]{ border-color:#B42318 !important; }
.form-status.is-error{ color:#B42318; background:#FDECEA; border:1px solid #F5C2BC; padding:10px 14px; border-radius:12px; }
.ui-check{ display:flex; align-items:flex-start; gap:10px; font-size:var(--fs-sm); color:var(--ink-soft); cursor:pointer; line-height:1.7; }
.ui-check input{ width:18px; height:18px; margin-top:4px; accent-color:var(--purple); flex-shrink:0; }
.ui-check a{ color:var(--purple); text-decoration:underline; }
.ui-note{ font-size:var(--fs-xs); color:var(--ink-faint); line-height:1.8; }
.ui-hr{ border:0; border-top:1px solid var(--line); margin:20px 0; }
.ui-actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.auth-row{ font-size:var(--fs-xs); text-align:start; }
.auth-row a, .login-card__note a{ color:var(--purple); font-weight:700; }
.login-card .ui-form button[type=submit], .login-card [data-after-reset]{ width:100%; justify-content:center; }
.login-card__note p + p{ margin-top:8px; }

/* ---------- states, banners, chips, badges ---------- */
.ui-state{ text-align:center; padding:48px 20px; color:var(--ink-soft); font-size:var(--fs-sm); background:var(--bg); border:1px dashed var(--line-strong); border-radius:var(--r-lg); }
.ui-state h1{ font-size:var(--fs-h2); margin-bottom:10px; }
.ui-state .ui-actions, .ui-state__action{ justify-content:center; margin-top:16px; display:flex; }
.ui-state--loading{ display:flex; align-items:center; justify-content:center; gap:12px; border-style:solid; border-color:transparent; background:none; }
.ui-state--error{ color:#8F1C13; background:#FDF3F2; border-color:#F5C2BC; }
.ui-state--locked{ background:var(--purple-tint); border:0; padding:56px 24px; }
li.ui-state{ list-style:none; }
.ui-spinner{ width:22px; height:22px; border-radius:50%; border:3px solid var(--purple-tint-2); border-top-color:var(--purple); animation:ui-spin .8s linear infinite; flex-shrink:0; }
@keyframes ui-spin{ to{ transform:rotate(360deg); } }
.ui-banner{ background:var(--orange-tint); color:#7A3A15; border-radius:12px; padding:12px 16px; font-size:var(--fs-sm); font-weight:600; margin-bottom:14px; line-height:1.8; }
.ui-banner a{ text-decoration:underline; font-weight:800; }
.ui-banner--bad{ background:#FDECEA; color:#8F1C13; }
.ui-chip{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:800; padding:3px 10px; border-radius:var(--r-pill); background:var(--purple-tint); color:var(--purple-dark); white-space:nowrap; }
.ui-chip--course{ background:var(--purple-dark); color:#fff; }
.ui-chip--book{ background:var(--orange-tint); color:#8A4419; }
.ui-chip--tool{ background:var(--sky-tint); color:#1F5F92; }
.ui-status{ display:inline-flex; font-size:11.5px; font-weight:800; padding:3px 10px; border-radius:var(--r-pill); background:var(--disabled-bg); color:var(--ink-soft); white-space:nowrap; }
.ui-status--ok{ background:#E3F4E9; color:#1E6B3F; }
.ui-status--info{ background:var(--sky-tint); color:#1F5F92; }
.ui-status--warn{ background:var(--orange-tint); color:#8A4419; }
.ui-status--bad{ background:#FDECEA; color:#8F1C13; }
.ui-status--muted{ background:var(--disabled-bg); color:var(--ink-faint); }
.ui-badge{ display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:var(--fs-sm); padding:8px 14px; border-radius:12px; background:var(--purple-tint); color:var(--purple-dark); }
.ui-badge--ok{ background:#E3F4E9; color:#1E6B3F; }
.ui-count{ display:inline-flex; min-width:20px; height:20px; padding:0 6px; align-items:center; justify-content:center; border-radius:var(--r-pill); background:var(--orange-dark); color:#fff; font-size:11px; font-weight:800; }
.ui-avatar{ border-radius:50%; object-fit:cover; flex-shrink:0; background:var(--purple-tint); }
.ui-avatar--initial{ display:inline-flex; align-items:center; justify-content:center; color:var(--purple-dark); font-weight:900; font-size:.95em; }
.ui-progress{ height:10px; border-radius:var(--r-pill); background:var(--purple-tint); overflow:hidden; }
.ui-progress span{ display:block; height:100%; background:linear-gradient(90deg, var(--fuchsia), var(--purple)); border-radius:inherit; transition:width var(--dur-2); }
.ui-tabs{ display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:24px; overflow-x:auto; }
.ui-tabs button, .ui-tabs a{ background:none; border:0; border-bottom:3px solid transparent; padding:12px 16px; font-weight:800; color:var(--ink-faint); white-space:nowrap; font-size:var(--fs-sm); }
.ui-tabs [aria-selected="true"], .ui-tabs .is-active{ color:var(--purple-dark); border-bottom-color:var(--purple); }
.ui-pager{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:28px; }
.ui-pager button{ min-width:40px; height:40px; border-radius:12px; border:1.5px solid var(--line-strong); background:var(--surface); font-weight:800; color:var(--ink-soft); }
.ui-pager .is-active{ background:var(--purple-dark); border-color:var(--purple-dark); color:#fff; }

/* ---------- toasts ---------- */
.ui-toasts{ position:fixed; z-index:400; inset-inline:16px; bottom:20px; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; }
.ui-toast{ background:var(--purple-ink); color:#fff; padding:12px 18px; border-radius:14px; font-weight:700; font-size:var(--fs-sm); box-shadow:var(--shadow-lg); max-width:520px; animation:ui-in var(--dur-2) var(--ease-out, ease); }
.ui-toast--success{ background:#1E6B3F; }
.ui-toast--error{ background:#9A1F15; }
.ui-toast.is-out{ opacity:0; transform:translateY(8px); transition:all .3s; }
@keyframes ui-in{ from{ opacity:0; transform:translateY(10px); } }

/* ---------- modal ---------- */
.ui-modal{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:16px; }
.ui-modal__backdrop{ position:absolute; inset:0; background:rgba(43,24,56,.55); }
.ui-modal__dialog{ position:relative; width:100%; max-width:520px; max-height:calc(100vh - 32px); overflow:auto; background:var(--surface); border-radius:var(--r-lg); padding:28px; box-shadow:var(--shadow-lg); animation:ui-in var(--dur-2); }
.ui-modal__dialog--wide{ max-width:860px; }
.ui-modal__title{ font-size:var(--fs-h3); margin-bottom:16px; padding-inline-end:36px; }
.ui-modal__sub{ font-size:17px; margin-bottom:6px; }
.ui-modal__close{ position:absolute; top:14px; inset-inline-end:14px; width:36px; height:36px; border-radius:50%; border:0; background:var(--bg); font-size:22px; line-height:1; color:var(--ink-soft); }
.ui-modal__body{ display:grid; gap:14px; }
.code-price{ font-size:var(--fs-lead); }
.buy-options{ display:grid; gap:12px; }
.buy-option{ display:grid; gap:4px; text-align:start; padding:16px 18px; border-radius:var(--r-md); border:1.5px solid var(--line-strong); background:var(--surface); color:var(--ink); }
.buy-option:hover{ border-color:var(--purple); background:var(--hover-tint); }
.buy-option span{ font-size:var(--fs-xs); color:var(--ink-faint); }

/* ---------- header: account + bell ---------- */
.hdr-auth{ display:flex; align-items:center; gap:8px; }
.hdr-bell{ position:relative; width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; color:var(--purple-dark); background:var(--purple-tint); }
.hdr-bell:hover{ background:var(--purple-tint-2); }
.hdr-bell__badge{ position:absolute; top:-3px; inset-inline-end:-3px; min-width:20px; height:20px; padding:0 5px; border-radius:var(--r-pill); background:var(--orange-dark); color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; border:2px solid #fff; }
.hdr-account{ position:relative; }
.hdr-account summary{ list-style:none; display:flex; align-items:center; gap:8px; cursor:pointer; padding:4px 4px 4px 12px; border-radius:var(--r-pill); border:1.5px solid var(--line); }
.hdr-account summary::-webkit-details-marker{ display:none; }
.hdr-account__name{ font-weight:800; font-size:var(--fs-xs); max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hdr-account__menu{ position:absolute; top:calc(100% + 8px); inset-inline-end:0; z-index:120; min-width:220px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-lg); padding:8px; display:grid; }
.hdr-account__menu a, .hdr-account__menu button, .hdr-mobile-links a, .hdr-mobile-links button{ display:flex; align-items:center; min-height:44px; padding:0 12px; border-radius:10px; font-weight:700; font-size:var(--fs-sm); background:none; border:0; text-align:start; color:var(--ink); width:100%; }
.hdr-account__menu a:hover, .hdr-account__menu button:hover{ background:var(--hover-tint); }
.hdr-account__menu button, .hdr-mobile-links button{ color:#B42318; }
.site-header__mobile-account{ display:none; }
@media (max-width:1060px){
  .site-header__mobile-account{ display:block; padding:8px var(--gutter) 0; border-top:1px solid var(--line); }
  .site-header__mobile-account > .btn{ width:100%; justify-content:center; margin-top:8px; }
  .hdr-mobile-account{ display:flex; align-items:center; gap:10px; padding:8px 0; }
  .hdr-mobile-account__name{ font-weight:800; }
  .hdr-mobile-links{ display:grid; }
  .site-header__mobile-actions .btn--primary{ display:none; }
}

/* ---------- academy: catalog + item page ---------- */
.course-card__cover{ position:relative; overflow:hidden; background:var(--purple-tint); color:var(--purple-dark); }
.course-card__cover img{ width:100%; height:100%; object-fit:cover; }
.course-card__cover--book{ background:var(--orange-tint); color:#8A4419; }
.course-card__cover--tool{ background:var(--sky-tint); color:#1F5F92; }
.course-card__body .ui-chip{ align-self:flex-start; margin-bottom:10px; }
.course-card h3 a{ color:inherit; }
.course-card h3 a:hover{ color:var(--purple); }
.academy-code-cta{ margin-top:32px; padding:16px 20px; border-radius:var(--r-md); background:var(--purple-tint); font-size:var(--fs-sm); color:var(--purple-dark); font-weight:600; }
.breadcrumb--start{ margin-bottom:20px; }
.pd{ display:grid; grid-template-columns:minmax(0, 380px) minmax(0, 1fr); gap:clamp(24px, 4vw, 56px); align-items:start; }
.pd__media{ border-radius:var(--r-xl); overflow:hidden; background:var(--purple-tint); box-shadow:var(--shadow-md); aspect-ratio:3 / 4; display:flex; align-items:center; justify-content:center; }
.pd__media img{ width:100%; height:100%; object-fit:cover; }
.pd__placeholder{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; min-height:220px; color:var(--purple); }
.pd__placeholder svg{ width:72px; height:72px; }
.pd__info h1{ font-size:var(--fs-h1); margin:10px 0 8px; }
.pd__by{ color:var(--purple); font-weight:700; margin-bottom:8px; }
.pd__rating{ display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); margin-bottom:14px; }
.pd__rating a{ color:var(--purple); text-decoration:underline; }
.pd__summary{ font-size:var(--fs-lead); margin-bottom:18px; }
.pd__facts{ display:grid; gap:10px; margin-bottom:22px; padding:16px 18px; background:var(--bg); border-radius:var(--r-md); border:1px solid var(--line); }
.pd__facts li{ display:flex; justify-content:space-between; gap:16px; font-size:var(--fs-sm); }
.pd__facts strong{ color:var(--purple-dark); }
.pd__actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.pd__actions--stack{ flex-direction:column; align-items:stretch; }
.pd__actions--stack .btn{ justify-content:center; }
.pd__section{ margin-top:48px; max-width:820px; }
.pd__section h2{ font-size:var(--fs-h2); margin-bottom:16px; }
.course-hero__video img{ width:100%; height:100%; object-fit:cover; }
.course-hero__video .pd__placeholder{ color:#fff; }
.course-hero__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:var(--fs-sm); }
.syl{ display:grid; gap:12px; counter-reset:none; }
.syl__module{ border:1px solid var(--line); border-radius:var(--r-md); padding:16px 18px; background:var(--surface); }
.syl__module h3{ font-size:17px; display:flex; flex-direction:column; gap:2px; margin-bottom:10px; }
.syl__module h3 span{ font-size:12px; color:var(--fuchsia); font-weight:800; }
.syl__module ol{ display:grid; gap:8px; }
.syl__module ol li{ display:flex; justify-content:space-between; gap:12px; font-size:var(--fs-sm); padding-top:8px; border-top:1px solid var(--line); }
.syl__tags{ display:flex; gap:4px; flex-wrap:wrap; }

/* ---------- rich text (articles, lessons, descriptions) ---------- */
.rich{ font-size:17px; line-height:2; color:var(--ink); overflow-wrap:anywhere; }
.rich > * + *{ margin-top:16px; }
.rich h2{ font-size:24px; margin-top:32px; }
.rich h3{ font-size:20px; margin-top:24px; }
.rich ul, .rich ol{ padding-inline-start:24px; }
.rich ul{ list-style:disc; }
.rich ol{ list-style:decimal; }
.rich li + li{ margin-top:6px; }
.rich a{ color:var(--purple); text-decoration:underline; }
.rich blockquote{ border-inline-start:4px solid var(--fuchsia); background:var(--fuchsia-tint); padding:14px 18px; border-radius:0 12px 12px 0; }
.rich img{ max-width:100%; height:auto; border-radius:var(--r-md); }
.rich figure{ margin:20px 0; }
.article-view__body.rich ul{ background:none; padding:0 24px 0 0; display:block; }
.article-view__body.rich ul li{ padding:0; }
.article-view__body.rich ul li::before{ display:none; }

/* ---------- reviews & ratings ---------- */
.rv-summary{ display:flex; flex-wrap:wrap; gap:24px; align-items:center; padding:18px 20px; border-radius:var(--r-md); background:var(--bg); border:1px solid var(--line); margin-bottom:18px; }
.rv-summary__avg{ display:grid; justify-items:center; gap:4px; }
.rv-summary__avg strong{ font-size:40px; font-weight:900; color:var(--purple-dark); line-height:1; }
.rv-summary__dist{ flex:1; min-width:200px; display:grid; gap:6px; font-size:12px; }
.rv-summary__dist li{ display:grid; grid-template-columns:32px 1fr 36px; align-items:center; gap:8px; }
.rv-bar{ height:8px; border-radius:var(--r-pill); background:var(--line); overflow:hidden; }
.rv-bar span{ display:block; height:100%; background:var(--gold); }
.rv-form{ display:grid; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:18px; margin-bottom:22px; }
.rv-stars{ border:0; padding:0; margin:0; }
.rv-stars__row{ display:inline-flex; flex-direction:row-reverse; gap:4px; }
.rv-stars input{ position:absolute; opacity:0; width:1px; height:1px; }
.rv-stars label{ cursor:pointer; padding:2px; border-radius:8px; }
.rv-stars label svg{ fill:var(--line-strong); transition:fill var(--dur-1), transform var(--dur-1); }
.rv-stars input:checked ~ label svg, .rv-stars label:hover svg, .rv-stars label:hover ~ label svg{ fill:var(--gold); }
.rv-stars input:focus-visible + label{ box-shadow:var(--focus-ring); }
.rv-list-title{ font-size:18px; margin-bottom:12px; }
.rv-list{ display:grid; gap:12px; }
.rv-item{ padding:16px 18px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); }
.rv-item__head{ display:flex; align-items:center; gap:10px; }
.rv-item__head > div{ display:grid; flex:1; }
.rv-item__head small{ color:var(--ink-faint); font-size:12px; }
.rv-item__body{ margin-top:10px; font-size:var(--fs-sm); color:var(--ink); line-height:1.9; }
.rv-item__actions{ margin-top:8px; font-size:12px; }

/* ---------- learning player ---------- */
.lp{ display:grid; grid-template-columns:320px minmax(0, 1fr); gap:28px; align-items:start; }
.lp__side{ position:sticky; top:16px; max-height:calc(100vh - 32px); overflow:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; }
.lp__back{ font-size:var(--fs-xs); font-weight:800; color:var(--purple); }
.lp__title{ font-size:20px; margin:8px 0 14px; }
.lp__progress{ display:grid; gap:6px; font-size:12px; color:var(--ink-faint); margin-bottom:16px; }
.lp__module + .lp__module{ margin-top:14px; }
.lp__module h2{ font-size:13px; color:var(--fuchsia); margin-bottom:6px; }
.lp__module ol{ display:grid; gap:2px; }
.lp__module a{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; font-size:var(--fs-sm); color:var(--ink-soft); }
.lp__module a:hover{ background:var(--hover-tint); }
.lp__module a[aria-current="page"]{ background:var(--purple-tint); color:var(--purple-dark); font-weight:800; }
.lp__module a > span:nth-child(2){ flex:1; }
.lp__check{ width:20px; height:20px; border-radius:50%; border:2px solid var(--line-strong); display:inline-flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0; }
.lp__module a.is-done .lp__check{ background:#1E7A46; border-color:#1E7A46; color:#fff; }
.lp__main{ min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(18px, 2vw, 32px); }
.lesson__crumb{ font-size:12px; color:var(--ink-faint); font-weight:700; }
.lesson__title{ font-size:var(--fs-h2); margin:6px 0 18px; }
.lesson__body{ margin-bottom:24px; }
.lr{ margin:0 0 20px; }
.lr video, .lr img{ width:100%; border-radius:var(--r-md); background:#000; display:block; }
.lr img{ background:var(--bg); }
.lr figcaption{ font-size:12px; color:var(--ink-faint); margin-top:6px; }
.lr__embed{ position:relative; aspect-ratio:16 / 9; border-radius:var(--r-md); overflow:hidden; background:#000; }
.lr__embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.lesson__files{ margin:24px 0; }
.lesson__files h3{ font-size:17px; margin-bottom:10px; }
.lesson__files ul{ display:grid; gap:8px; margin-bottom:8px; }
.lr-file{ display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--bg); flex-wrap:wrap; }
.lr-file__icon{ color:var(--purple); display:inline-flex; }
.lr-file__name{ flex:1; min-width:140px; font-weight:700; font-size:var(--fs-sm); display:grid; }
.lr-file__name small{ font-weight:400; color:var(--ink-faint); font-size:12px; }
.lr-file a:not(.btn){ flex:1; color:var(--purple); font-weight:700; }
.lesson__done{ margin:24px 0; padding:14px 16px; border-radius:12px; background:var(--purple-tint); }
.lesson__done .ui-check{ color:var(--purple-dark); font-weight:800; }
.lesson__nav{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-top:18px; border-top:1px solid var(--line); }
.exam{ margin:28px 0; padding:20px; border-radius:var(--r-md); border:1.5px solid var(--purple-tint-2); background:#FCFAFE; }
.exam h3{ font-size:19px; margin-bottom:4px; }
.exam__form{ display:grid; gap:16px; margin-top:16px; }
.exam__q{ border:1px solid var(--line); border-radius:12px; padding:14px 16px; background:var(--surface); }
.exam__q legend{ font-weight:800; padding:0 6px; line-height:1.8; }
.exam__q legend small{ font-weight:600; color:var(--ink-faint); }
.exam__opt{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; cursor:pointer; font-size:var(--fs-sm); }
.exam__opt:hover{ background:var(--hover-tint); }
.exam__opt input{ width:18px; height:18px; accent-color:var(--purple); }
.exam__opt.is-correct{ background:#E3F4E9; }
.exam__opt.is-wrong{ background:#FDECEA; }
.exam__result{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:16px; border-radius:12px; margin:14px 0; }
.exam__result strong{ font-size:30px; font-weight:900; }
.exam__result.is-pass{ background:#E3F4E9; color:#1E6B3F; }
.exam__result.is-fail{ background:#FDECEA; color:#8F1C13; }
.exam__history{ display:grid; gap:6px; margin:12px 0; font-size:var(--fs-xs); }
.exam__history li{ display:flex; justify-content:space-between; gap:10px; padding:8px 10px; background:var(--surface); border-radius:8px; }
.is-pass{ color:#1E6B3F; }
.is-fail{ color:#8F1C13; }

/* ---------- course chat ---------- */
.chat{ display:grid; gap:12px; }
.chat__bar{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; align-items:center; }
.chat__bar .ui-note{ flex:1 1 280px; }
.chat__search{ display:flex; gap:6px; flex:0 1 320px; }
.chat__list{ display:grid; gap:12px; max-height:60vh; overflow:auto; padding:12px; background:var(--bg); border-radius:var(--r-md); border:1px solid var(--line); }
.chat-msg{ display:flex; gap:10px; align-items:flex-start; max-width:88%; }
.chat-msg.is-mine{ margin-inline-start:auto; flex-direction:row-reverse; }
.chat-msg.is-hidden{ color:var(--ink-faint); font-size:var(--fs-xs); }
.chat-msg__bubble{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:10px 14px; min-width:0; }
.chat-msg.is-mine .chat-msg__bubble{ background:var(--purple-tint); border-color:var(--purple-tint-2); }
.chat-msg__head{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:12.5px; }
.chat-msg__head time, .chat-msg__head small{ color:var(--ink-faint); font-size:11.5px; }
.chat-msg__bubble p{ font-size:var(--fs-sm); color:var(--ink); line-height:1.8; overflow-wrap:anywhere; margin-top:4px; }
.chat-msg__quote{ margin-top:6px; padding:6px 10px; border-inline-start:3px solid var(--fuchsia); background:rgba(166,64,143,.06); font-size:12px; color:var(--ink-soft); border-radius:6px; }
.chat-msg__actions{ display:flex; gap:12px; margin-top:6px; font-size:12px; }
.chat__form{ display:grid; grid-template-columns:1fr auto; gap:8px; align-items:end; }
.chat__form [data-replying]{ grid-column:1 / -1; }
.chat__replying{ display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12.5px; background:var(--purple-tint); color:var(--purple-dark); padding:6px 12px; border-radius:10px; font-weight:700; }

/* ---------- account ---------- */
.acc{ display:grid; grid-template-columns:280px minmax(0, 1fr); gap:28px; align-items:start; }
.acc__side{ display:grid; gap:16px; position:sticky; top:16px; }
.acc__card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; text-align:center; display:grid; gap:6px; justify-items:center; }
.acc__card h1{ font-size:20px; }
.acc__avatar img{ width:88px; height:88px; border-radius:50%; object-fit:cover; }
.acc__email{ font-size:var(--fs-xs); color:var(--ink-faint); }
.acc__meta{ font-size:12px; color:var(--ink-faint); }
.acc__roles{ display:flex; flex-wrap:wrap; gap:4px; justify-content:center; }
.acc__nav{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:8px; display:grid; }
.acc__nav a, .acc__logout{ display:flex; align-items:center; justify-content:space-between; min-height:44px; padding:0 14px; border-radius:10px; font-weight:700; font-size:var(--fs-sm); background:none; border:0; text-align:start; width:100%; }
.acc__nav a:hover{ background:var(--hover-tint); }
.acc__nav a[aria-current="page"]{ background:var(--purple-tint); color:var(--purple-dark); }
.acc__logout{ color:#B42318; }
.acc__main{ min-width:0; display:grid; gap:18px; }
.acc__main > h2{ font-size:var(--fs-h2); }
.acc__head{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.acc__block{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; }
.acc__block h3{ font-size:18px; margin-bottom:14px; }
.acc__sub{ font-size:18px; margin-top:6px; }
.acc__photo{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.acc__danger{ border-color:#F5C2BC; }
.acc-list, .notif-list{ display:grid; gap:10px; }
.acc-item{ display:flex; gap:14px; align-items:center; padding:14px 16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); flex-wrap:wrap; }
.acc-item img{ width:64px; height:64px; border-radius:12px; object-fit:cover; }
.acc-item__body{ flex:1; min-width:180px; display:grid; gap:4px; }
.acc-item__body small{ color:var(--ink-faint); font-size:12px; }
.acc-item__reason{ font-size:12.5px; color:#8F1C13; }
.notif{ display:flex; gap:12px; align-items:flex-start; padding:14px 16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); }
.notif.is-unread{ background:var(--purple-tint); border-color:var(--purple-tint-2); }
.notif strong{ display:block; }
.notif small{ color:var(--ink-faint); font-size:12px; }
.notif a{ color:inherit; }

/* ---------- articles: list extras, editor, writing ---------- */
.articles-top{ display:flex; justify-content:flex-end; margin-bottom:12px; }
.articles-top:has(> [hidden]:only-child){ display:none; }
.art-ph{ aspect-ratio:16 / 10; display:flex; align-items:center; justify-content:center; background:var(--purple-tint); color:var(--purple); }
.art-ph--speech{ background:var(--sky-tint); color:#1F5F92; }
.art-ph--behavior{ background:var(--orange-tint); color:#8A4419; }
.art-ph--learning{ background:var(--fuchsia-tint); color:var(--fuchsia); }
.article-card__author a{ color:var(--purple); }
.article-view--preview h1{ font-size:30px; margin:10px 0; }
.share-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:28px 0; font-weight:700; font-size:var(--fs-sm); }
.share-row--grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)); margin:0; }
.share-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:6px 16px; border-radius:var(--r-pill); font-weight:800; font-size:var(--fs-xs); border:1.5px solid var(--line-strong); background:var(--surface); color:var(--ink); }
.share-btn:hover{ border-color:var(--purple); }
.share-btn--wa{ background:#1E7A46; border-color:#1E7A46; color:#fff; }
.share-btn--fb{ background:#1659C9; border-color:#1659C9; color:#fff; }
.share-btn--x{ background:#111; border-color:#111; color:#fff; }
.share-btn--tg{ background:#1C79B5; border-color:#1C79B5; color:#fff; }
.share-preview{ width:100%; max-width:360px; border-radius:var(--r-md); box-shadow:var(--shadow-md); margin:0 auto 12px; display:block; }
.author-box__body .ui-avatar{ margin-bottom:6px; }
.ed{ border:1.5px solid var(--line-strong); border-radius:14px; overflow:hidden; background:var(--surface); }
.ed__bar{ display:flex; flex-wrap:wrap; gap:4px; padding:8px; background:var(--bg); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:2; }
.ed__bar button, .ed__img{ min-height:34px; padding:4px 10px; border-radius:8px; border:1px solid var(--line); background:var(--surface); font-size:12.5px; font-weight:700; color:var(--ink-soft); cursor:pointer; display:inline-flex; align-items:center; }
.ed__bar button:hover, .ed__img:hover{ border-color:var(--purple); color:var(--purple-dark); }
.ed__area{ min-height:320px; padding:18px 20px; outline:none; }
.ed__area:focus{ box-shadow:inset 0 0 0 2px var(--purple-tint-2); }
.ed__count{ font-size:12px; color:var(--ink-faint); padding:6px 14px; border-top:1px solid var(--line); }
.write{ display:grid; gap:16px; }
.write__head{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.write__head h1{ font-size:var(--fs-h2); }
.write__form{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(18px, 2vw, 28px); }
.write__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.write__cover{ min-height:110px; border-radius:12px; border:1.5px dashed var(--line-strong); display:flex; align-items:center; justify-content:center; overflow:hidden; color:var(--ink-faint); font-size:var(--fs-xs); margin-bottom:8px; }
.write__cover img{ width:100%; max-height:200px; object-fit:cover; }
.write__actions{ justify-content:flex-end; }

/* ---------- community ---------- */
.feed{ display:grid; gap:18px; margin-top:18px; }
.feed-new{ position:sticky; top:12px; z-index:5; display:flex; margin:12px auto 0; box-shadow:var(--shadow-md); }
.feed-more{ margin-top:18px; display:flex; justify-content:center; }
.feed-rules{ margin-top:32px; padding:20px 22px; border-radius:var(--r-lg); background:var(--bg); border:1px solid var(--line); font-size:var(--fs-sm); }
.feed-rules h3{ font-size:17px; margin-bottom:8px; }
.feed-rules ul{ list-style:disc; padding-inline-start:20px; display:grid; gap:4px; color:var(--ink-soft); }
.composer{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px; box-shadow:var(--shadow-sm); display:grid; gap:12px; }
.composer--guest{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; }
.composer__head{ display:flex; gap:12px; align-items:flex-start; }
.composer textarea{ border:0; padding:8px 0; resize:vertical; min-height:72px; font-size:var(--fs-body); }
.composer textarea:focus{ box-shadow:none; }
.composer__preview{ position:relative; border-radius:var(--r-md); overflow:hidden; max-width:320px; }
.composer__preview img{ width:100%; display:block; }
.composer__remove{ position:absolute; top:8px; inset-inline-end:8px; width:32px; height:32px; border-radius:50%; border:0; background:rgba(0,0,0,.6); color:#fff; font-size:20px; }
.composer__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding-top:10px; border-top:1px solid var(--line); }
.composer__foot small{ flex:1; min-width:160px; color:var(--ink-faint); font-size:12px; }
.post{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow:hidden; }
.post > .ui-banner{ margin:0; border-radius:0; }
.post__head{ display:flex; gap:12px; align-items:center; padding:16px 18px 0; }
.post__head > div:nth-child(2){ flex:1; display:grid; min-width:0; }
.post__time{ font-size:12px; color:var(--ink-faint); }
.post__time:hover{ text-decoration:underline; }
.post__menu{ display:flex; gap:12px; font-size:12px; }
.post__body{ padding:12px 18px 0; font-size:var(--fs-body); line-height:1.9; color:var(--ink); overflow-wrap:anywhere; }
.post__body.is-clamped{ max-height:11.5em; overflow:hidden; -webkit-mask-image:linear-gradient(#000 70%, transparent); mask-image:linear-gradient(#000 70%, transparent); }
.post > .link-btn{ margin:6px 18px 0; font-size:var(--fs-xs); }
.post__media{ margin-top:12px; background:var(--bg); display:flex; justify-content:center; }
.post__media img{ max-width:100%; max-height:640px; width:auto; height:auto; object-fit:contain; display:block; }
.post__bar{ display:flex; gap:6px; padding:8px 12px; border-top:1px solid var(--line); margin-top:12px; }
.post__heart, .post__action{ display:inline-flex; align-items:center; gap:6px; min-height:42px; padding:0 14px; border-radius:var(--r-pill); border:0; background:none; font-weight:800; font-size:var(--fs-sm); color:var(--ink-soft); }
.post__heart:hover, .post__action:hover{ background:var(--hover-tint); }
.post__heart svg{ fill:none; stroke:var(--purple); stroke-width:2; transition:transform var(--dur-1); }
.post__heart.is-on{ color:var(--purple); }
.post__heart.is-on svg{ fill:var(--purple); stroke:var(--purple); animation:heart-pop .3s; }
@keyframes heart-pop{ 50%{ transform:scale(1.3); } }
.post__comments{ border-top:1px solid var(--line); padding:14px 18px; background:#FCFBFD; display:grid; gap:12px; }
.cmt-list, .cmt__replies{ display:grid; gap:12px; }
.cmt__replies{ margin-top:10px; padding-inline-start:8px; border-inline-start:2px solid var(--line); }
.cmt{ display:flex; gap:10px; align-items:flex-start; }
.cmt.is-hidden{ font-size:12px; color:var(--ink-faint); }
.cmt__main{ flex:1; min-width:0; }
.cmt__bubble{ background:var(--bg); border-radius:16px; padding:8px 14px; display:inline-block; max-width:100%; border:1px solid var(--line); }
.cmt__bubble strong{ font-size:13px; }
.cmt__bubble p{ font-size:var(--fs-sm); line-height:1.8; overflow-wrap:anywhere; }
.cmt__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:12px; color:var(--ink-faint); margin-top:4px; padding-inline-start:6px; }
.cmt__reacts{ display:inline-flex; flex-wrap:wrap; gap:4px; }
.cmt__react{ display:inline-flex; align-items:center; gap:3px; border:1px solid var(--line); background:var(--surface); border-radius:var(--r-pill); padding:1px 8px; font-size:12.5px; min-height:26px; }
.cmt__react.is-mine{ border-color:var(--purple); background:var(--purple-tint); }
.cmt__picker{ position:relative; }
.cmt__picker summary{ list-style:none; cursor:pointer; }
.cmt__picker summary::-webkit-details-marker{ display:none; }
.cmt__picker > div{ position:absolute; bottom:calc(100% + 6px); inset-inline-start:0; z-index:10; display:flex; gap:2px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); padding:4px 6px; box-shadow:var(--shadow-md); }
.cmt__picker > div button{ border:0; background:none; font-size:20px; width:36px; height:36px; border-radius:50%; }
.cmt__picker > div button:hover{ background:var(--hover-tint); transform:scale(1.15); }
.cmt-form{ display:grid; grid-template-columns:1fr auto; gap:8px; align-items:end; }
.cmt-form [data-replying]{ grid-column:1 / -1; }
.cmt-form textarea{ border-radius:18px; resize:vertical; min-height:42px; }

/* ---------- dashboard ---------- */
.adm-page{ background:var(--bg); }
.adm{ display:grid; grid-template-columns:240px minmax(0, 1fr); gap:24px; align-items:start; }
.adm__side{ position:sticky; top:16px; background:var(--purple-ink); color:#fff; border-radius:var(--r-lg); padding:16px 10px; max-height:calc(100vh - 32px); overflow:auto; }
.adm__brand{ font-weight:900; padding:4px 12px 12px; border-bottom:1px solid rgba(255,255,255,.12); margin-bottom:8px; color:#fff; }
.adm__side nav{ display:grid; gap:2px; }
.adm__side a{ display:flex; align-items:center; justify-content:space-between; min-height:40px; padding:0 12px; border-radius:10px; font-weight:700; font-size:var(--fs-sm); color:rgba(255,255,255,.82); }
.adm__side a:hover{ background:rgba(255,255,255,.08); color:#fff; }
.adm__side a[aria-current="page"]{ background:#fff; color:var(--purple-dark); }
.adm__main{ min-width:0; display:grid; gap:16px; outline:none; }
.adm__head{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.adm__head h1{ font-size:var(--fs-h2); }
.adm__sub{ font-size:18px; margin-top:8px; }
.adm-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(16px, 1.6vw, 24px); display:grid; gap:12px; align-content:start; }
.adm-card h2{ font-size:18px; }
.adm-card h3{ font-size:16px; }
.adm-card--inline{ margin-top:12px; }
.adm-card details > summary{ cursor:pointer; font-weight:800; color:var(--purple-dark); }
.adm-stats{ display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:12px; }
.adm-stat{ display:grid; gap:4px; padding:18px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--line); transition:border-color var(--dur-1); }
.adm-stat:hover{ border-color:var(--purple); }
.adm-stat strong{ font-size:28px; font-weight:900; color:var(--purple-dark); }
.adm-stat span{ font-size:var(--fs-xs); color:var(--ink-faint); font-weight:700; }
.adm-stat.is-alert{ border-color:var(--orange); background:var(--orange-tint); }
.adm-stat.is-alert strong{ color:var(--orange-dark); }
.adm-tabs{ margin-bottom:4px; }
.adm-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:16px; align-items:start; }
.adm-grid--article{ grid-template-columns:minmax(0, 2fr) minmax(260px, 1fr); }
.adm-form{ display:grid; gap:14px; }
.adm-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px; align-items:end; }
.adm-row--end{ display:flex; justify-content:flex-end; flex-wrap:wrap; gap:10px; }
.adm-files{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px; }
.adm-cover{ max-width:220px; max-height:220px; border-radius:12px; object-fit:cover; }
.adm-list{ display:grid; gap:8px; }
.adm-list__row{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface); font-size:var(--fs-sm); }
.adm-list__row > span:first-child{ flex:1; min-width:200px; overflow-wrap:anywhere; }
.adm-list__row small{ color:var(--ink-faint); }
.adm-table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); }
.adm-table{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); min-width:640px; }
.adm-table th, .adm-table td{ padding:10px 12px; text-align:start; border-bottom:1px solid var(--line); vertical-align:middle; }
.adm-table th{ background:var(--bg); font-size:12px; color:var(--ink-faint); font-weight:800; white-space:nowrap; }
.adm-table tr:last-child td{ border-bottom:0; }
.adm-table__actions{ display:flex; gap:10px; flex-wrap:wrap; white-space:nowrap; }
.adm-tree{ display:grid; gap:12px; }
.adm-tree__mod{ border:1px solid var(--line); border-radius:var(--r-md); padding:12px; background:var(--bg); }
.adm-tree__mod > ol{ display:grid; gap:6px; margin-top:8px; }
.adm-tree__row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 10px; background:var(--surface); border-radius:10px; }
.adm-tree__row > a, .adm-tree__row > strong{ flex:1; min-width:160px; }
.adm-tree__row > a{ color:var(--purple-dark); font-weight:700; }
.adm-tree__row small{ color:var(--ink-faint); }
.adm-tree__tools{ display:inline-flex; gap:10px; flex-wrap:wrap; font-size:12.5px; }
.adm-q{ display:grid; gap:14px; }
.adm-q__item{ border:1px solid var(--line); border-radius:var(--r-md); padding:14px; background:var(--bg); display:grid; gap:10px; }
.adm-q__opts{ border:0; padding:0; display:grid; gap:6px; }
.adm-q__opts legend{ font-size:var(--fs-xs); font-weight:800; margin-bottom:6px; }
.adm-q__opt{ display:flex; gap:8px; align-items:center; }
.adm-q__opt input[type=radio], .adm-q__opt input[type=checkbox]{ width:18px; height:18px; accent-color:#1E7A46; flex-shrink:0; }
.adm-matrix{ overflow-x:auto; }
.adm-matrix table{ border-collapse:collapse; font-size:12.5px; min-width:560px; width:100%; }
.adm-matrix th, .adm-matrix td{ border:1px solid var(--line); padding:8px; text-align:center; }
.adm-matrix th:first-child, .adm-matrix td:first-child{ text-align:start; }
.adm-matrix input{ width:18px; height:18px; accent-color:var(--purple); }
.adm-dl{ display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:var(--fs-sm); }
.adm-dl dt{ color:var(--ink-faint); font-weight:700; }
.adm-codes{ display:grid; gap:10px; }
.adm-codes textarea, .adm-codes pre{ font-family:ui-monospace, Consolas, monospace; direction:ltr; text-align:left; font-size:13px; }
.adm-meta{ font-size:12.5px; color:var(--ink-faint); display:flex; flex-wrap:wrap; gap:6px 14px; }
.adm-posts{ display:grid; gap:12px; }
.adm-post{ grid-template-columns:auto 1fr; align-items:start; }
.adm-post img{ width:140px; height:140px; object-fit:cover; border-radius:12px; }
.adm-post p{ font-size:var(--fs-sm); overflow-wrap:anywhere; }
.adm-report{ list-style:none; }
.adm-report__reason{ font-weight:700; }
.adm-report__target{ border-inline-start:3px solid var(--fuchsia); background:var(--bg); padding:10px 12px; border-radius:8px; font-size:var(--fs-sm); overflow-wrap:anywhere; }
.adm-report__target img{ max-width:120px; border-radius:8px; display:block; margin-bottom:6px; }

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .lp, .acc, .adm{ grid-template-columns:1fr; }
  .lp__side, .acc__side, .adm__side{ position:static; max-height:none; }
  .adm__side nav{ grid-auto-flow:column; grid-auto-columns:max-content; overflow-x:auto; }
  .acc__nav{ grid-auto-flow:column; grid-auto-columns:max-content; overflow-x:auto; }
  .adm-grid--article{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .pd{ grid-template-columns:1fr; }
  .pd__media{ max-width:320px; margin-inline:auto; width:100%; }
  .write__row{ grid-template-columns:1fr; }
  .chat-msg{ max-width:100%; }
  .adm-post{ grid-template-columns:1fr; }
  .adm-post img{ width:100%; height:auto; max-height:260px; }
  .ui-modal__dialog{ padding:22px 18px; }
  .hdr-account__name{ display:none; }
}
.course-crumb{ padding-top:20px; }
[data-app="course"] > .ui-state{ margin:24px var(--gutter); }
.lp__module ol, .chat__list, .cmt-list, .cmt__replies, .adm-tree, .adm-tree__mod > ol, .adm-q, .syl, .syl__module ol, .exam__history, .rv-list, .rv-summary__dist, .lesson__files ul, .acc-list, .notif-list, .adm-list{ list-style:none; padding-inline-start:0; }
.cmt__replies{ padding-inline-start:8px; }
.lesson__title:focus{ box-shadow:none; outline:none; }