/* ================================================================
   EDUMAX DESIGN SYSTEM v1.0
   Single source of truth for tokens + reusable components.

   This file consolidates what's already in use across:
   public-styles.css, auth-styles.css, programs-styles.css,
   course-detail-styles.css, teachers-styles.css, about-styles.css
   (and stays compatible with the in-app edumax-styles.css tokens).

   HOW TO USE
   1. Link this file FIRST on every new page, before any
      page-specific stylesheet:
        <link rel="stylesheet" href="design-system.css">
        <link rel="stylesheet" href="your-page-styles.css">
   2. Page-specific CSS should only contain layout/components that
      are unique to that page — everything reusable belongs here.
   3. Never hardcode a hex color, radius, shadow, or font-size in a
      page file. If it's not a token below, add it here first.
   ================================================================ */


/* ================================================================
   1. FONTS
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,500&display=swap');


/* ================================================================
   2. DESIGN TOKENS
   ================================================================ */
:root {
  /* ---- Brand colors ---- */
  --b: #3B82F6;
  /* Blue  — primary actions, progress, knowledge   */
  --bd: #1D4ED8;
  /* Blue dark  — hover state for primary           */
  --bl: #E0F2FE;
  /* Blue light — tinted backgrounds, active nav     */

  --r: #EF4444;
  /* Red   — energy, achievement, attention, errors */
  --rd: #DC2626;
  /* Red dark   — hover state for danger/red        */
  --rl: #FEE2E2;
  /* Red light  — tinted backgrounds, error fields   */

  --g: #22C55E;
  /* Green — success, completed, correct             */
  --gl: #DCFCE7;
  /* Green light — tinted backgrounds                */

  --y: #F59E0B;
  /* Yellow — reward, XP, streak                     */
  --yl: #FEF3C7;
  /* Yellow light — tinted backgrounds               */

  --n: #0F172A;
  /* Navy  — primary text, dark surfaces             */

  /* ---- Neutral scale ---- */
  --g1: #F1F5F9;
  /* Surface tint / hover backgrounds */
  --g2: #E2E8F0;
  /* Borders / dividers */
  --g3: #CBD5E1;
  /* Disabled / locked */
  --g4: #94A3B8;
  /* Tertiary text / icons */
  --g5: #64748B;
  /* Secondary text */
  --g6: #475569;
  /* Body text (on light surfaces) */

  --w: #ffffff;
  /* White — main surface */
  --bg: #F0F9FF;
  /* Page background tint */

  /* ---- Typography ---- */
  --f-display: 'Fredoka', system-ui, sans-serif;
  /* Headings, numbers, XP, nav logo */
  --f-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  /* Body, UI, forms */

  /* Type scale — use for consistency; components may fine-tune with clamp() */
  --fs-xs: 12px;
  --fs-sm: 13.5px;
  --fs-base: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;
  --fs-4xl: 38px;
  --fs-5xl: 48px;

  /* ---- Radius scale — rounded & playful throughout ---- */
  --rs: 10px;
  /* Small controls (badges, small icons) */
  --rm: 14px;
  /* Medium elements (inputs, chips) */
  --rlg: 18px;
  /* Buttons, inputs, standard cards */
  --rxl: 24px;
  /* Cards, panels */
  --r2: 28px;
  /* Large cards, modals, hero panels */
  --rf: 9999px;
  /* Pills, avatars, fully rounded */

  /* ---- Shadows — soft, never harsh ---- */
  --ss: 0 1px 2px rgba(15, 23, 42, .06);
  --sm: 0 6px 16px -4px rgba(15, 23, 42, .10), 0 2px 6px -2px rgba(15, 23, 42, .06);
  --sl: 0 20px 40px -12px rgba(15, 23, 42, .16), 0 8px 16px -6px rgba(15, 23, 42, .08);

  /* ---- Spacing scale (4px grid) — use for new components ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---- Motion ---- */
  --tr: all .2s cubic-bezier(.4, 0, .2, 1);
  --tr-slow: all .35s ease;

  /* ---- Layout ---- */
  --wrap: 1180px;
  /* Max content width for .wrap container */
  --wrap-narrow: 760px;
  /* Narrower reading-width container (FAQ, article body) */

  /* ---- Z-index scale — keep everything on this scale, don't freelance ---- */
  --z-header: 100;
  --z-filterbar: 90;
  --z-mobilebar: 150;
  --z-mobilemenu: 300;
  --z-toast: 400;
}

/*
  BREAKPOINTS (reference — not usable as var() inside media queries)
  Use these exact values for all new responsive work:

    480px  — small phones, tight single-column tweaks
    640px  — large phones / small tablets, 2-column grids begin
    768px  — tablets, sidebar/nav layout shifts
    860px  — wide tablets, 2→3 column grids
    960px  — desktop nav breakpoint (burger → full nav switches here)
    1040px — desktop, 3-column grids finalize
    1200px — max practical content width beyond .wrap
*/


/* ================================================================
   3. RESET & BASE ELEMENTS
   ================================================================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--f-body);
  font-size: var(--fs-base);
  color: var(--n);
  background: var(--w);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  cursor: pointer;
  font-family: inherit;
}

ul,
ol {
  list-style: none;
}

input,
select,
textarea {
  font-family: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--n);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

:focus-visible {
  outline: 2.5px solid var(--b);
  outline-offset: 2px;
}

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


/* ================================================================
   4. LAYOUT UTILITIES
   ================================================================ */
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px;
}

.wrap-narrow {
  max-width: var(--wrap-narrow);
  margin: 0 auto;
  padding: 0 20px;
}

section {
  padding: 76px 0;
}

.section-head {
  max-width: 640px;
  margin: 0 auto 44px;
  text-align: center;
}

.section-head h2 {
  font-size: clamp(28px, 4vw, 38px);
  margin-bottom: 12px;
}

.section-head p {
  color: var(--g5);
  font-size: 16px;
  line-height: 1.6;
}

/* Eyebrow label — small pill above a heading */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--b);
  background: var(--bl);
  padding: 6px 14px;
  border-radius: var(--rf);
  margin-bottom: 16px;
}

.eyebrow.r {
  color: var(--r);
  background: var(--rl);
}

.eyebrow.g {
  color: var(--g);
  background: var(--gl);
}

.eyebrow.y {
  color: #B45309;
  background: var(--yl);
}

/* Scroll-reveal — pair with an IntersectionObserver that adds .in */
.rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}

.rv.in {
  opacity: 1;
  transform: translateY(0);
}


/* ================================================================
   5. BUTTONS
   ================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--rlg);
  border: none;
  font-family: var(--f-body);
  font-size: 14.5px;
  font-weight: 700;
  transition: var(--tr);
  white-space: nowrap;
}

.btn-sm {
  padding: 9px 16px;
  font-size: 13.5px;
  border-radius: var(--rm);
}

.btn-lg {
  padding: 15px 28px;
  font-size: 16px;
  border-radius: var(--rxl);
}

.btn-primary {
  background: var(--b);
  color: var(--w);
  box-shadow: 0 4px 12px -2px rgba(59, 130, 246, .45);
}

.btn-primary:hover {
  background: var(--bd);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -4px rgba(59, 130, 246, .5);
}

.btn-outline {
  background: var(--w);
  color: var(--n);
  border: 1.5px solid var(--g2);
}

.btn-outline:hover {
  border-color: var(--b);
  color: var(--b);
}

.btn-ghost {
  background: transparent;
  color: var(--g6);
}

.btn-ghost:hover {
  color: var(--n);
}

.btn-red {
  background: var(--r);
  color: var(--w);
  box-shadow: 0 4px 12px -2px rgba(239, 68, 68, .4);
}

.btn-red:hover {
  background: var(--rd);
  transform: translateY(-2px);
}

.btn-success {
  background: var(--g);
  color: #fff;
  box-shadow: 0 4px 12px -2px rgba(34, 197, 94, .4);
}

.btn-success:hover {
  background: #16a34a;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -4px rgba(34, 197, 94, .5);
}

.btn-white {
  background: var(--w);
  color: var(--b);
}

.btn-white:hover {
  background: var(--bl);
  transform: translateY(-2px);
}

/* Loading state — pair with a .spinner + .btn-label span inside */
.btn-submit {
  position: relative;
}

.btn-submit .spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2.5px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

.btn-submit.loading .spinner {
  display: inline-block;
}

.btn-submit.loading .btn-label {
  opacity: .85;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


/* ================================================================
   6. BADGES / CHIPS / PILLS
   ================================================================ */
.bdg {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: var(--rf);
  font-size: 11px;
  font-weight: 600;
}

.bdg-b {
  background: var(--bl);
  color: var(--b);
}

.bdg-g {
  background: var(--gl);
  color: var(--g);
}

.bdg-y {
  background: var(--yl);
  color: #B45309;
}

.bdg-r {
  background: var(--rl);
  color: var(--r);
}

.bdg-n {
  background: var(--g1);
  color: var(--g5);
}

/* Filter chip — toggleable pill, e.g. subject filters */
.chip {
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 700;
  padding: 9px 16px;
  border-radius: var(--rf);
  border: 1.5px solid var(--g2);
  background: var(--w);
  color: var(--g6);
  transition: var(--tr);
  white-space: nowrap;
}

.chip:hover {
  border-color: var(--g3);
}

.chip.active {
  background: var(--n);
  border-color: var(--n);
  color: var(--w);
}

.chip.active[data-world="math"] {
  background: var(--b);
  border-color: var(--b);
}

.chip.active[data-world="sci"] {
  background: var(--g);
  border-color: var(--g);
}

.chip.active[data-world="eng"] {
  background: var(--r);
  border-color: var(--r);
}

/* Segmented toggle — e.g. Student / Parent role picker */
.seg-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--g1);
  border-radius: var(--rlg);
  padding: 4px;
  gap: 4px;
}

.seg-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.seg-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 8px;
  border-radius: var(--rm);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--g5);
  cursor: pointer;
  transition: var(--tr);
}

.seg-toggle input:checked+.seg-opt {
  background: var(--w);
  color: var(--n);
  box-shadow: var(--ss);
}

.seg-toggle input:focus-visible+.seg-opt {
  outline: 2.5px solid var(--b);
  outline-offset: 2px;
}


/* ================================================================
   7. CARDS
   ================================================================ */

/* Generic content card */
.card {
  background: var(--w);
  border: 1px solid var(--g2);
  border-radius: var(--rxl);
  padding: 24px;
  transition: var(--tr);
}

.card:hover {
  box-shadow: var(--sm);
  transform: translateY(-3px);
  border-color: var(--bl);
}

/* World / subject card — full-bleed color, used for Math/Science/English */
.world-card {
  border-radius: var(--r2);
  padding: 26px 24px;
  position: relative;
  overflow: hidden;
  color: var(--w);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: var(--tr);
}

.world-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sl);
}

.world-math {
  background: linear-gradient(150deg, #3B82F6 0%, #1D4ED8 100%);
}

.world-sci {
  background: linear-gradient(150deg, #22C55E 0%, #15803D 100%);
}

.world-eng {
  background: linear-gradient(150deg, #EF4444 0%, #B91C1C 100%);
}

.world-card h4 {
  font-size: 21px;
  color: var(--w);
  margin-bottom: 6px;
}

.world-card p {
  font-size: 13px;
  opacity: .85;
  margin-bottom: 12px;
}

.world-deco {
  position: absolute;
  top: -20px;
  right: -20px;
  font-size: 100px;
  opacity: .12;
}

.world-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.world-tags span {
  font-size: 11.5px;
  font-weight: 600;
  background: rgba(255, 255, 255, .18);
  padding: 4px 10px;
  border-radius: var(--rf);
}

/* Feature / icon card */
.feat-card {
  background: var(--w);
  border: 1px solid var(--g2);
  border-radius: var(--rxl);
  padding: 24px;
  transition: var(--tr);
}

.feat-card:hover {
  box-shadow: var(--sm);
  transform: translateY(-3px);
  border-color: var(--bl);
}

.feat-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--rlg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.fi-b {
  background: var(--bl);
  color: var(--b);
}

.fi-r {
  background: var(--rl);
  color: var(--r);
}

.fi-g {
  background: var(--gl);
  color: var(--g);
}

.fi-y {
  background: var(--yl);
  color: #B45309;
}

.feat-card h4 {
  font-size: 16.5px;
  margin-bottom: 8px;
}

.feat-card p {
  font-size: 13.5px;
  color: var(--g5);
  line-height: 1.55;
}

/* CTA band — full-width dark closing panel */
.cta-band {
  background: var(--n);
  border-radius: var(--r2);
  padding: 56px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(59, 130, 246, .35), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(239, 68, 68, .28), transparent 40%);
}

.cta-band>* {
  position: relative;
  z-index: 2;
}

.cta-band h2 {
  color: var(--w);
  font-size: clamp(26px, 4vw, 36px);
  margin-bottom: 12px;
}

.cta-band p {
  color: var(--g3);
  font-size: 15.5px;
  margin-bottom: 26px;
}

.cta-mascot {
  font-size: 44px;
  margin-bottom: 14px;
}

.cta-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}


/* ================================================================
   8. FORMS
   ================================================================ */
.field-group {
  margin-bottom: 16px;
}

.field-group label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--n);
  margin-bottom: 7px;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 480px) {
  .field-row {
    grid-template-columns: 1fr;
  }
}

.field-wrap {
  position: relative;
}

.field-wrap .input {
  width: 100%;
}

.field-wrap svg.field-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--g4);
  pointer-events: none;
}

.field-wrap .input.has-icon {
  padding-left: 42px;
}

.input {
  font-family: var(--f-body);
  font-size: 14.5px;
  color: var(--n);
  background: var(--w);
  border: 1.5px solid var(--g2);
  border-radius: var(--rlg);
  padding: 12px 14px;
  transition: var(--tr);
  width: 100%;
}

.input:hover {
  border-color: var(--g3);
}

.input:focus {
  outline: none;
  border-color: var(--b);
  box-shadow: 0 0 0 4px var(--bl);
}

.input.err {
  border-color: var(--r);
}

.input.err:focus {
  box-shadow: 0 0 0 4px var(--rl);
}

.input::placeholder {
  color: var(--g4);
}

select.input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

.pw-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 6px;
  color: var(--g4);
  display: flex;
  border-radius: var(--rs);
}

.pw-toggle:hover {
  color: var(--g6);
  background: var(--g1);
}

.field-err {
  display: none;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--r);
  margin-top: 6px;
  font-weight: 600;
}

.field-err.show {
  display: flex;
}

.field-hint {
  font-size: 12px;
  color: var(--g5);
  margin-top: 6px;
}

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 22px;
}

.check-row input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--b);
  flex-shrink: 0;
}

.check-row label {
  font-size: 13px;
  color: var(--g6);
  line-height: 1.5;
}

.check-row a {
  color: var(--b);
  font-weight: 700;
}

/* Search bar */
.search-bar {
  position: relative;
}

.search-bar svg {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--g4);
  pointer-events: none;
}

.search-bar input {
  width: 100%;
  padding: 15px 18px 15px 48px;
  border-radius: var(--rf);
  border: 1.5px solid var(--g2);
  background: var(--w);
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--n);
  box-shadow: var(--sm);
  transition: var(--tr);
}

.search-bar input:focus {
  outline: none;
  border-color: var(--b);
  box-shadow: 0 0 0 4px var(--bl);
}


/* ================================================================
   9. NAVIGATION
   ================================================================ */
.ph-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--g2);
}

.ph-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  max-width: var(--wrap);
  margin: 0 auto;
}

.ph-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ph-logo span {
  font-family: var(--f-display);
  font-size: 21px;
  font-weight: 600;
  color: var(--b);
}

.ph-logo img {
  width: 75px;
}

.ph-links {
  display: none;
  align-items: center;
  gap: 30px;
}

.ph-links a {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--g6);
  transition: var(--tr);
}

.ph-links a:hover {
  color: var(--b);
}

.ph-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ph-burger {
  display: flex;
  width: 40px;
  height: 40px;
  border-radius: var(--rm);
  border: 1.5px solid var(--g2);
  background: var(--w);
  align-items: center;
  justify-content: center;
}

.mob-menu {
  position: fixed;
  inset: 0;
  background: var(--w);
  z-index: var(--z-mobilemenu);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column;
  padding: 18px 20px 40px;
}

.mob-menu.open {
  transform: translateX(0);
}

.mob-menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}

.mob-menu a {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 600;
  padding: 14px 4px;
  border-bottom: 1px solid var(--g1);
}

.mob-menu-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 960px) {
  .ph-links {
    display: flex;
  }

  .ph-burger {
    display: none;
  }
}

/* Breadcrumb */
.crumb {
  padding: 18px 0 0;
  font-size: 13px;
  color: var(--g5);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.crumb a {
  color: var(--g5);
  font-weight: 600;
}

.crumb a:hover {
  color: var(--b);
}

.crumb span.sep {
  color: var(--g3);
}

.crumb span.cur {
  color: var(--n);
  font-weight: 700;
}

/* Footer */
footer {
  background: var(--n);
  color: var(--g3);
  padding: 60px 0 26px;
}

.foot-grid {
  display: grid;
  gap: 32px;
  margin-bottom: 40px;
}

.foot-brand span {
  font-family: var(--f-display);
  color: var(--w);
  font-size: 19px;
  font-weight: 600;
}

.foot-brand p {
  font-size: 13.5px;
  color: var(--g4);
  margin-top: 12px;
  line-height: 1.6;
  max-width: 260px;
}

.foot-col h5 {
  font-family: var(--f-body);
  font-size: 13px;
  color: var(--w);
  font-weight: 700;
  margin-bottom: 14px;
  letter-spacing: .02em;
}

.foot-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.foot-col a {
  font-size: 13.5px;
  color: var(--g4);
  transition: var(--tr);
}

.foot-col a:hover {
  color: var(--w);
}

.foot-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--g4);
}

.foot-bottom a {
  color: var(--g4);
}

.foot-bottom a:hover {
  color: var(--w);
}

.foot-legal {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

@media (min-width: 860px) {
  .foot-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}


/* ================================================================
   10. AVATARS
   ================================================================ */
.av {
  border-radius: var(--rf);
  background: var(--n);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-weight: 600;
  flex-shrink: 0;
}

.av-sm {
  width: 24px;
  height: 24px;
  font-size: 10px;
}

.av-md {
  width: 32px;
  height: 32px;
  font-size: 12px;
}

.av-lg {
  width: 54px;
  height: 54px;
  font-size: 19px;
}

.av-xl {
  width: 68px;
  height: 68px;
  font-size: 24px;
}

.av.c-math {
  background: var(--b);
}

.av.c-sci {
  background: var(--g);
}

.av.c-eng {
  background: var(--r);
}


/* ================================================================
   11. STATS DISPLAY
   ================================================================ */
.stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}

.stats-row div {
  display: flex;
  flex-direction: column;
}

.stats-row b {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--n);
}

.stats-row span {
  font-size: 12.5px;
  color: var(--g5);
  font-weight: 600;
}

/* Dark variant — for CTA bands / stats on navy backgrounds */
.stats-row.on-dark b {
  color: #fff;
}

.stats-row.on-dark span {
  color: var(--g4);
}


/* ================================================================
   12. ACCORDION (curriculum lists, FAQs)
   ================================================================ */
.acc-item {
  border: 1px solid var(--g2);
  border-radius: var(--rxl);
  margin-bottom: 14px;
  overflow: hidden;
}

.acc-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  cursor: pointer;
  background: var(--w);
  transition: var(--tr);
}

.acc-head:hover {
  background: var(--g1);
}

.acc-chevron {
  color: var(--g4);
  transition: transform .25s ease;
  flex-shrink: 0;
  margin-left: auto;
}

.acc-item.open .acc-chevron {
  transform: rotate(180deg);
}

.acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
  background: var(--g1);
}

.acc-item.open .acc-body {
  max-height: 900px;
}

/* Simple FAQ variant (no border box, just underlines) */
.faq-item {
  border-bottom: 1px solid var(--g2);
}

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 4px;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--f-body);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--n);
}

.faq-q svg {
  flex-shrink: 0;
  color: var(--g4);
  transition: transform .25s ease;
}

.faq-item.open .faq-q svg {
  transform: rotate(45deg);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}

.faq-item.open .faq-a {
  max-height: 240px;
}

.faq-a p {
  font-size: 13.5px;
  color: var(--g6);
  line-height: 1.6;
  padding: 0 4px 18px;
  max-width: 640px;
}


/* ================================================================
   13. TOAST
   ================================================================ */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 20px);
  background: var(--n);
  color: #fff;
  padding: 13px 20px;
  border-radius: var(--rlg);
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: var(--sl);
  opacity: 0;
  pointer-events: none;
  transition: all .25s ease;
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: 9px;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}


/* ================================================================
   14. EMPTY / NOT-FOUND STATES
   ================================================================ */
.empty-state {
  display: none;
  text-align: center;
  padding: 70px 20px;
}

.empty-state.show {
  display: block;
}

.empty-state .mascot {
  font-size: 46px;
  margin-bottom: 14px;
}

.empty-state h3 {
  font-size: 19px;
  margin-bottom: 8px;
  font-family: var(--f-display);
}

.empty-state p {
  color: var(--g5);
  font-size: 14px;
  margin-bottom: 20px;
}


/* ================================================================
   15. GAMIFICATION (in-app components — XP, streak, progress)
   ================================================================ */

/* Progress bar (linear) */
.progress-bar {
  height: 8px;
  background: var(--g2);
  border-radius: var(--rf);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: var(--b);
  border-radius: var(--rf);
  transition: width .5s ease-out;
}

/* XP bar (thinner variant) */
.xp-bar {
  height: 6px;
  background: var(--g2);
  border-radius: var(--rf);
  overflow: hidden;
}

.xp-bar-fill {
  height: 100%;
  background: var(--y);
  border-radius: var(--rf);
  transition: width .5s ease-out;
}

/* Streak / XP stat pill */
.gami-stat {
  text-align: center;
  padding: 24px 18px;
}

.gami-stat .icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.gami-stat .value {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--n);
  margin-bottom: 4px;
}

.gami-stat .label {
  font-size: 13px;
  color: var(--g5);
  margin-bottom: 8px;
}

/* Progress ring (SVG-based, pair with an inline <svg><circle></svg>) */
.progress-ring-wrap {
  position: relative;
  width: 110px;
  height: 110px;
  margin: 14px auto;
}

.progress-ring-wrap svg {
  transform: rotate(-90deg);
}

.progress-ring-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.progress-ring-text .pct {
  font-size: 22px;
  font-weight: 700;
  color: var(--b);
  display: block;
}

.progress-ring-text .lbl {
  font-size: 11px;
  color: var(--g5);
}

/* Floating XP animation — trigger by appending a positioned element with this class */
@keyframes floatUp {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -150%) scale(1.2);
  }
}

/* Session / journey node pulse (used on "current position" markers) */
@keyframes nodePulse {

  0%,
  100% {
    transform: scale(1);
    opacity: .55;
  }

  50% {
    transform: scale(1.35);
    opacity: 0;
  }
}

.node-pulse {
  animation: nodePulse 2s ease-in-out infinite;
  transform-origin: center;
}

/* Journey path draw-in (pair with stroke-dasharray = path length) */
@keyframes pathDraw {
  to {
    stroke-dashoffset: 0;
  }
}

.path-draw {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: pathDraw 2.2s ease forwards .3s;
}

/* ================================================================
   MODAL COMPONENT SYSTEM
   ================================================================ */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 10000;
  box-sizing: border-box;
}

.modal-overlay.open {
  display: flex !important;
}

.modal-card {
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  background: var(--w);
  border-radius: var(--r2, 20px);
  border: 1px solid var(--g2);
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  z-index: 10001;
  pointer-events: auto;
  margin: auto;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--g2);
  background: var(--w);
}

.modal-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--n);
  margin: 0;
  font-family: var(--f-display);
}

.modal-close {
  background: var(--g1);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--g5);
  font-size: 16px;
  transition: var(--tr);
}

.modal-close:hover {
  background: var(--g2);
  color: var(--n);
}

.modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--g2);
  background: var(--g1);
}