/* ═══════════════════════════════════════════════════════════════════════════
   Auntie Kash Kids Academy — Design System
   Ported faithfully from the v4 Next.js globals.css
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;500;600;700;800;900&display=swap');

:root {
  --font-display: 'Baloo 2', 'Fredoka', cursive;
  --font-fredoka: 'Fredoka', sans-serif;
  --font-nunito: 'Nunito', sans-serif;
  --pink:    #FF3E9E;
  --purple:  #7B2FF7;
  --blue:    #2AA7FF;
  --green:   #7ED321;
  --yellow:  #FFD93D;
  --navy:    #1D1B4E;
  --orange:  #E67E22;
  --bg:      #FFFFFF;
  --surface: #F9F9FB;
  --border:  #E8E8F0;
  --text:    #1D1B4E;
  --muted:   #6B7280;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-nunito), sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
h1,h2,h3,h4,h5,h6 { font-family: var(--font-fredoka), sans-serif; letter-spacing: -0.01em; line-height: 1.15; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

/* ── Layout helpers ─────────────────────────────────────── */
.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 900px; margin: 0 auto; padding: 0 24px; }
.section { padding: 80px 0; }
.text-center { text-align: center; }
.grid { display: grid; gap: 24px; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
/* gap-5 and gap-8 were used across six pages but had never been defined, so
   those gaps silently fell back to the grid default. flex-col likewise did
   nothing on the waitlist page, which wanted a stacked column. */
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.gap-5 { gap: 20px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; }
.flex-col { flex-direction: column; }
.hidden { display: none; }
@media (min-width: 768px) {
  .md\:grid-2 { grid-template-columns: repeat(2, 1fr); }
  .md\:grid-3 { grid-template-columns: repeat(3, 1fr); }
  .md\:grid-4 { grid-template-columns: repeat(4, 1fr); }
  .md\:flex { display: flex; }
  .md\:hidden { display: none; }
}
@media (min-width: 1024px) {
  .lg\:grid-2 { grid-template-columns: repeat(2, 1fr); }
  .lg\:grid-3 { grid-template-columns: repeat(3, 1fr); }
  .lg\:grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn-pink, .btn-purple, .btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-nunito); font-weight: 700; color: white;
  border: none; cursor: pointer; transition: all 200ms;
  padding: 14px 28px; font-size: 18px; min-height: 60px; border-radius: 35px;
}
.btn-pink { background: var(--pink); }
.btn-purple { background: var(--purple); }
.btn-primary { background: var(--pink); padding: 12px 24px; font-size: 16px; min-height: 48px; }
.btn-pink:hover, .btn-purple:hover, .btn-primary:hover { transform: scale(1.03); box-shadow: 0 10px 25px rgba(0,0,0,0.15); }
.btn-pink:active, .btn-purple:active, .btn-primary:active { transform: scale(0.98); }
.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-nunito); font-weight: 700;
  background: transparent; color: var(--purple); border: 2.5px solid var(--purple);
  padding: 12px 24px; font-size: 16px; min-height: 48px; border-radius: 35px;
  cursor: pointer; transition: all 200ms;
}
.btn-secondary:hover { transform: scale(1.03); background: rgba(123,47,247,0.06); }
.btn-white {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-nunito); font-weight: 700;
  background: white; color: var(--purple);
  padding: 16px 36px; font-size: 18px; border-radius: 35px;
  cursor: pointer; transition: all 200ms;
}
.btn-white:hover { transform: scale(1.03); box-shadow: 0 12px 30px rgba(0,0,0,0.2); }

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 16px; padding: 24px; transition: all 200ms;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }

/* ── Inputs ──────────────────────────────────────────────── */
.input {
  width: 100%; padding: 12px 16px; border-radius: 12px;
  background: var(--bg); border: 1.5px solid var(--border);
  color: var(--text); font-family: var(--font-nunito); font-size: 15px;
  min-height: 44px; transition: all 150ms;
}
.input:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(123,47,247,0.12); }
.input::placeholder { color: var(--muted); }
.label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 8px; color: var(--text); }

/* ── Form consistency standard (Checklist #15) ──────────────
   Applied globally rather than page-by-page: browsers render <select>
   shorter than text inputs by default, and buttons directly after an
   input look cramped without deliberate spacing. These two rules fix
   both across every form in the app from one place. */
select.input {
  min-height: 44px; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px;
}
form .btn-primary, form .btn-secondary, form button[type="submit"] { margin-top: 18px; }
.mb-3 + .btn-primary, .mb-4 + .btn-primary, .mb-3 + .btn-secondary, .mb-4 + .btn-secondary { margin-top: 18px; }

/* ── Progress ────────────────────────────────────────────── */
.progress-bar { height: 8px; border-radius: 9999px; overflow: hidden; background: var(--border); }
.progress-bar-fill { height: 100%; border-radius: 9999px; transition: width 500ms; background: linear-gradient(90deg, var(--purple), var(--pink)); }

/* ── Badges ──────────────────────────────────────────────── */
.badge { display: inline-block; font-weight: 700; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 12px; border-radius: 9999px; }
.badge-pink   { background: #FFE8F5; color: var(--pink); }
.badge-purple { background: #F0E8FF; color: var(--purple); }
.badge-blue   { background: #E8F4FF; color: var(--blue); }
.badge-green  { background: #F0FFF4; color: #4d9c0f; }
.badge-amber  { background: #FFF8E0; color: #B45309; }

/* ── Animations ──────────────────────────────────────────── */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideDown { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.45} }
.float { animation: float 5s ease-in-out infinite; }
.fade-in { animation: fadeIn 300ms ease-out; }
.slide-down { animation: slideDown 260ms ease-out; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ── Hero gradient ───────────────────────────────────────── */
.hero-bg { background: linear-gradient(135deg, #EEF2FF 0%, #FFF0FB 40%, #F0FAFF 100%); }

/* ── Navbar ──────────────────────────────────────────────── */
.navbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.85); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-link { font-family: var(--font-nunito); font-weight: 600; color: var(--text); transition: color 150ms; }
.nav-link:hover { color: var(--purple); }

/* ── Footer ──────────────────────────────────────────────── */
.footer { background: var(--navy); color: white; padding: 56px 0; }
.footer a { color: rgba(255,255,255,0.6); transition: color 150ms; }
.footer a:hover { color: var(--pink); }

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: var(--purple); }

/* ── Utility ─────────────────────────────────────────────── */
.text-pink { color: var(--pink); } .text-purple { color: var(--purple); }
.text-muted { color: var(--muted); } .text-white { color: white; }
.font-fredoka { font-family: var(--font-fredoka); }
.font-bold { font-weight: 700; } .font-extrabold { font-weight: 800; }
.mb-2{margin-bottom:8px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}.mb-8{margin-bottom:32px}
/* mt-6 is used on the homepage but had never been defined, so that margin
   silently did nothing. Added here alongside its siblings. */
.mt-2{margin-top:8px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}
.w-full { width: 100%; }
.rounded-full { border-radius: 9999px; }
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg,var(--purple),var(--pink)); z-index: 100; width: 0%; }

/* ═══════════════════════════════════════════════════════════════════════════
   HERO SCENE — CSS-built rainbow sky (matches brand mockup)
   ═══════════════════════════════════════════════════════════════════════════ */
.hero-scene {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #D6EAF8 0%, #E4F1FB 50%, #F4FBFF 100%);
  isolation: isolate;
}
/* soft sky gradient wash */
.hero-scene::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 78% 30%, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 38%),
    radial-gradient(circle at 20% 12%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 30%);
  z-index: -2;
}

/* ── Rainbow arc ─────────────────────────────────────────── */
.rainbow {
  position: absolute;
  right: 14%;
  top: -2%;
  width: 580px; height: 580px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 360deg); /* fallback */
  z-index: -1;
  pointer-events: none;
  opacity: 0.95;
}
/* build the rainbow from stacked ring borders */
.rainbow span {
  position: absolute;
  border-radius: 50%;
  border-style: solid;
  border-color: transparent;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.rainbow .r1 { width: 540px; height: 540px; border-width: 22px; border-top-color:#FF5CA8; border-left-color:#FF5CA8; }
.rainbow .r2 { width: 496px; height: 496px; border-width: 22px; border-top-color:#FF9A3D; border-left-color:#FF9A3D; }
.rainbow .r3 { width: 452px; height: 452px; border-width: 22px; border-top-color:#FFD93D; border-left-color:#FFD93D; }
.rainbow .r4 { width: 408px; height: 408px; border-width: 22px; border-top-color:#7ED321; border-left-color:#7ED321; }
.rainbow .r5 { width: 364px; height: 364px; border-width: 22px; border-top-color:#2AA7FF; border-left-color:#2AA7FF; }
.rainbow .r6 { width: 320px; height: 320px; border-width: 22px; border-top-color:#7B2FF7; border-left-color:#7B2FF7; }

/* ── Sun ─────────────────────────────────────────────────── */
.sun {
  position: absolute; top: 5%; right: 2%;
  width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #FFE36B 0%, #FFD021 70%, #FBB500 100%);
  box-shadow: 0 0 0 8px rgba(255,217,61,0.25), 0 0 40px rgba(255,200,0,0.45);
  z-index: -1;
}
.sun::before, .sun::after {
  content: "";
  position: absolute; left: 28%; width: 18%; height: 10px; border-radius: 6px;
  background: #6B4A1F; opacity: 0.85;
}
.sun::before { top: 38%; box-shadow: 22px 0 0 #6B4A1F; }    /* eyes */
.sun::after  { top: 58%; left: 32%; width: 36%; height: 10px; border-radius: 0 0 12px 12px; background: transparent; border-bottom: 4px solid #6B4A1F; } /* smile */

/* ── Clouds ──────────────────────────────────────────────── */
.cloud {
  position: absolute; background: #fff; border-radius: 100px; z-index: -1;
  filter: drop-shadow(0 6px 10px rgba(120,150,200,0.12));
}
.cloud::before, .cloud::after { content:""; position:absolute; background:#fff; border-radius:50%; }
.cloud.c1 { width: 120px; height: 38px; top: 22%; left: 8%; }
.cloud.c1::before { width: 52px; height: 52px; top: -22px; left: 16px; }
.cloud.c1::after  { width: 38px; height: 38px; top: -14px; left: 60px; }
.cloud.c2 { width: 90px; height: 30px; top: 60%; left: 3%; opacity: 0.9; }
.cloud.c2::before { width: 40px; height: 40px; top: -18px; left: 12px; }
.cloud.c2::after  { width: 30px; height: 30px; top: -10px; left: 46px; }

/* ── Floating decorative bits (stars, butterfly, rocket) ── */
.deco { position: absolute; z-index: -1; font-size: 28px; line-height: 1; user-select: none; }
.deco.star1 { top: 16%; right: 50%; font-size: 22px; color: #2AA7FF; }
.deco.star2 { top: 52%; right: 46%; font-size: 16px; color: #7B2FF7; }
.deco.star3 { top: 30%; right: 2%;  font-size: 18px; color: #FF3E9E; }
.deco.butterfly { top: 18%; right: 40%; font-size: 30px; }
.deco.rocket { bottom: 18%; right: 2%; font-size: 34px; }
.deco.flower1 { bottom: 6%; left: 44%; font-size: 26px; }

/* gentle float animation, staggered */
.floaty { animation: float 5s ease-in-out infinite; }
.floaty.d1 { animation-delay: .4s; } .floaty.d2 { animation-delay: .9s; }
.floaty.d3 { animation-delay: 1.4s; } .floaty.d4 { animation-delay: 1.9s; }

/* ── Multi-colour brand wordmark ─────────────────────────── */
.wordmark { font-family: var(--font-fredoka); font-weight: 700; line-height: 0.95; letter-spacing: -0.01em; }
.wordmark .line1 { font-size: clamp(46px, 7vw, 88px); display: block; }
.wordmark .line2 { font-size: clamp(54px, 8.5vw, 104px); display: block; margin-top: -4px; }
.wm-a { color: #FF3E9E; } .wm-k { color: #2AA7FF; } .wm-s { color: #FF9A3D; }
.wm-K { color: #FF6A2B; } .wm-I { color: #FFD021; } .wm-D { color: #2AA7FF; } .wm-S2 { color: #7B2FF7; }
.wordmark .letter { display: inline-block; -webkit-text-stroke: 2px rgba(255,255,255,0.9); paint-order: stroke fill; text-shadow: 0 4px 0 rgba(0,0,0,0.06); }
.academy-ribbon {
  display: inline-block; background: linear-gradient(90deg, #7B2FF7, #9B51E0);
  color: #fff; font-family: var(--font-fredoka); font-weight: 600;
  font-size: clamp(18px, 2.4vw, 26px); padding: 6px 26px; border-radius: 10px;
  transform: rotate(-2deg); box-shadow: 0 6px 0 rgba(94,32,184,0.35); margin-top: 8px;
}
.welcome-pill {
  display: inline-block; background: #FFD93D; color: #1D1B4E;
  font-family: var(--font-fredoka); font-weight: 600; font-size: 14px; letter-spacing: 0.12em;
  padding: 7px 18px; border-radius: 10px; margin-bottom: 18px;
}
.shine-line { font-family: var(--font-fredoka); font-weight: 700; font-size: clamp(22px, 3.2vw, 38px); line-height: 1.15; margin: 18px 0 14px; }
.shine-line .w1 { color: #1D1B4E; } .shine-line .w2 { color: #FF3E9E; }
.shine-line .w3 { color: #7ED321; } .shine-line .w4 { color: #2AA7FF; } .shine-line .w5 { color: #7B2FF7; }

/* ── Hero feature card (Small Classes / Live Online / Ages) ─ */
.hero-features {
  position: absolute; right: 4%; bottom: 8%;
  background: #fff; border-radius: 18px; padding: 16px 20px;
  box-shadow: 0 12px 30px rgba(80,60,160,0.18);
  display: flex; flex-direction: column; gap: 10px; z-index: 2;
}
.hero-features .feat { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--navy); font-size: 14px; }
.hero-features .feat .ic { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: #F0E8FF; }

/* ── Hero mascot image ───────────────────────────────────── */
.hero-mascot { position: relative; z-index: 2; width: 100%; max-width: 600px; margin: 0 auto; display: block; filter: drop-shadow(0 18px 30px rgba(80,60,160,0.22)); }

/* ═══════════════════════════════════════════════════════════
   NAVBAR with dropdowns
   ═══════════════════════════════════════════════════════════ */
.nav-item { position: relative; }
.nav-dropdown {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
  background: #fff; border-radius: 16px; box-shadow: 0 16px 40px rgba(80,60,160,0.16);
  padding: 12px; min-width: 240px; opacity: 0; visibility: hidden; transition: all 180ms;
  border: 1px solid var(--border); z-index: 60;
}
.nav-dropdown.wide { min-width: 520px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }

/* The grouped "More" menu: columns with headings, rather than one long list. */
.nav-dropdown.mega { min-width: 600px; display: grid; grid-template-columns: repeat(3, 1fr);
                     gap: 4px 18px; padding: 16px 18px; }
.nav-dd-group { min-width: 0; }
.nav-dd-title { font-family: var(--font-nunito); font-size: 10.5px; font-weight: 800;
                letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted);
                margin: 0 0 6px; padding: 0 12px; }
.nav-dd-all { font-weight: 700; color: var(--purple) !important; grid-column: 1 / -1;
              border-top: 1px solid var(--border); margin-top: 6px; padding-top: 12px !important; }

/* A wide menu hanging off a centred trigger can run off the edge of the
   viewport, so the two big ones are pinned to the right of the bar instead. */
@media (max-width: 1180px) {
  .nav-dropdown.mega, .nav-dropdown.wide { left: auto; right: 0; transform: translateY(8px); }
  .nav-item:hover .nav-dropdown.mega,
  .nav-item:hover .nav-dropdown.wide { transform: translateY(4px); }
}
@media (max-width: 1020px) {
  .nav-dropdown.mega { min-width: 420px; grid-template-columns: repeat(2, 1fr); }
  .nav-dropdown.wide { min-width: 360px; grid-template-columns: 1fr; }
}

html[data-theme="dark"] .nav-dropdown { background: var(--surface); }
html[data-theme="dark"] .nav-dropdown a:hover { background: #2B2345; }

/* Group headings inside the mobile accordion. */
.m-group-title { font-family: var(--font-nunito); font-size: 10.5px; font-weight: 800;
                 letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted);
                 margin: 12px 0 4px; padding: 0 18px; }
.m-group-title:first-child { margin-top: 4px; }
.nav-item:hover .nav-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(4px); }
.nav-dropdown a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  font-size: 14px; font-weight: 600; color: var(--navy); transition: background 140ms;
}
.nav-dropdown a:hover { background: #F7F4FF; color: var(--purple); }
.nav-caret { font-size: 10px; margin-left: 3px; opacity: 0.7; }
.btn-login { background: var(--purple); color:#fff; border-radius: 30px; padding: 10px 22px; font-weight: 700; font-family: var(--font-nunito); display:inline-flex; align-items:center; gap:8px; transition: all 180ms; }
.btn-login:hover { transform: scale(1.04); box-shadow: 0 8px 20px rgba(123,47,247,0.35); }
.btn-signup { background: var(--pink); color:#fff; border-radius: 30px; padding: 10px 22px; font-weight: 700; font-family: var(--font-nunito); display:inline-flex; align-items:center; gap:8px; transition: all 180ms; }
.btn-signup:hover { transform: scale(1.04); box-shadow: 0 8px 20px rgba(255,62,158,0.35); }

/* Hide complex hero scene decorations on small screens for clarity */
@media (max-width: 900px) {
  .rainbow, .sun, .cloud, .deco, .hero-features { display: none; }
  .hero-mascot { max-width: 360px; }
  .nav-dropdown.wide { grid-template-columns: 1fr; min-width: 240px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STYLING UPGRADE — professional finishing, glass & neumorphism, soft shadows
   ═══════════════════════════════════════════════════════════════════════════ */

/* Use the rounded display face for all headings & brand type */
h1, h2, h3, h4, h5, h6,
.wordmark, .academy-ribbon, .shine-line, .program-label, .welcome-pill {
  font-family: var(--font-display), sans-serif;
  letter-spacing: -0.005em;
}
body { font-family: var(--font-nunito), sans-serif; }

/* ── Soft, layered shadow tokens ─────────────────────────── */
:root {
  --shadow-sm: 0 2px 8px rgba(80,60,160,0.06), 0 1px 2px rgba(80,60,160,0.08);
  --shadow-md: 0 8px 24px rgba(80,60,160,0.10), 0 2px 6px rgba(80,60,160,0.06);
  --shadow-lg: 0 18px 44px rgba(80,60,160,0.16), 0 6px 14px rgba(80,60,160,0.08);
  --shadow-pink: 0 10px 28px rgba(255,62,158,0.30);
  --shadow-purple: 0 10px 28px rgba(123,47,247,0.30);
}

/* ── Glassmorphism ───────────────────────────────────────── */
.glass {
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: var(--shadow-md);
}
.glass-dark {
  background: rgba(29,27,78,0.55);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.12);
}

/* ── Neumorphism (soft extruded surfaces) ────────────────── */
.neu {
  background: #F4F2FB;
  border-radius: 22px;
  box-shadow: 8px 8px 18px rgba(174,166,210,0.45), -8px -8px 18px rgba(255,255,255,0.9);
}
.neu-inset {
  background: #F4F2FB;
  border-radius: 18px;
  box-shadow: inset 5px 5px 12px rgba(174,166,210,0.5), inset -5px -5px 12px rgba(255,255,255,0.9);
}
.neu-btn {
  background: #F4F2FB; border: none; border-radius: 16px;
  box-shadow: 6px 6px 14px rgba(174,166,210,0.45), -6px -6px 14px rgba(255,255,255,0.9);
  transition: all 160ms;
}
.neu-btn:hover { box-shadow: 4px 4px 10px rgba(174,166,210,0.5), -4px -4px 10px rgba(255,255,255,0.95); }
.neu-btn:active { box-shadow: inset 4px 4px 10px rgba(174,166,210,0.5), inset -4px -4px 10px rgba(255,255,255,0.9); }

/* ── Refined buttons: glossy, soft, tactile ──────────────── */
.btn-pink, .btn-purple, .btn-primary, .btn-signup, .btn-login {
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-md);
}
.btn-pink::after, .btn-purple::after, .btn-primary::after,
.btn-signup::after, .btn-login::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0));
  pointer-events: none;
}
.btn-pink:hover { box-shadow: var(--shadow-pink); }
.btn-purple:hover { box-shadow: var(--shadow-purple); }

/* ── Cards: softer, deeper, more tactile ─────────────────── */
.card {
  border: 1px solid rgba(232,232,240,0.9);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
}
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }

/* ── Navbar: frosted glass ───────────────────────────────── */
.navbar {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 2px 20px rgba(80,60,160,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.6);
}
.nav-dropdown { background: rgba(255,255,255,0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* ── Hero feature card → glass ───────────────────────────── */
.hero-features {
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: var(--shadow-lg);
}
.hero-features .feat .ic { background: rgba(123,47,247,0.12); }

/* ── Program circle icons: glossy neumorphic pop ─────────── */
.program-circle {
  box-shadow: 0 8px 18px rgba(0,0,0,0.14), inset 0 2px 4px rgba(255,255,255,0.4);
  position: relative;
}
.program-circle::after {
  content: ""; position: absolute; top: 8%; left: 14%; width: 42%; height: 30%;
  background: rgba(255,255,255,0.35); border-radius: 50%; filter: blur(2px);
}
.program-pill:hover .program-circle { transform: translateY(-3px) scale(1.05); }

/* ── Logo image in navbar ────────────────────────────────── */
.nav-logo { height: 58px; width: auto; display: block; }
@media (max-width: 600px){ .nav-logo { height: 42px; } }

/* ── Section headers get a touch more weight ─────────────── */
.section-eyebrow {
  display: inline-block; font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 16px; border-radius: 30px; margin-bottom: 14px;
}

/* Respect reduced motion already handled globally */

/* ── Hero composed-scene image ───────────────────────────── */


/* ═══════════════════════════════════════════════════════════════════════════
   PROFESSIONAL DASHBOARD SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */
.dash-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:28px; }
.dash-title { font-family:var(--font-display); font-size:30px; color:var(--navy); font-weight:700; }
.dash-sub { color:var(--muted); margin-top:2px; font-size:15px; }
.dash-date { background:#fff; border:1px solid var(--border); border-radius:12px; padding:10px 16px; font-size:13px; color:var(--muted); font-weight:600; }

/* ── Stat cards: gradient accent, icon, trend ────────────── */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:28px; }
.kpi {
  background:#fff; border-radius:18px; padding:20px;
  border:1px solid rgba(232,232,240,0.9); box-shadow:var(--shadow-sm);
  position:relative; overflow:hidden; transition:all 180ms;
}
.kpi:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); }
.kpi::before { content:""; position:absolute; top:0; left:0; width:100%; height:4px; background:var(--kpi-accent, var(--purple)); }
.kpi-icon { width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:21px; margin-bottom:14px; background:var(--kpi-bg, #F0E8FF); }
.kpi-value { font-family:var(--font-display); font-weight:700; font-size:30px; color:var(--navy); line-height:1; }
.kpi-label { color:var(--muted); font-size:13px; font-weight:600; margin-top:6px; }
.kpi-trend { font-size:12px; font-weight:700; margin-top:8px; display:inline-flex; align-items:center; gap:3px; }
.kpi-trend.up { color:#2d9c0f; } .kpi-trend.flat { color:var(--muted); }

/* ── Panels ──────────────────────────────────────────────── */
.panel { background:#fff; border:1px solid rgba(232,232,240,0.9); border-radius:18px; box-shadow:var(--shadow-sm); overflow:hidden; margin-bottom:24px; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px; border-bottom:1px solid var(--border); }
.panel-title { font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--navy); display:flex; align-items:center; gap:9px; }
.panel-body { padding:6px 0; }
.panel-body.padded { padding:22px; }

/* ── Data tables ─────────────────────────────────────────── */
.dtable { width:100%; border-collapse:collapse; font-size:14px; }
.dtable th { text-align:left; padding:12px 22px; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); font-weight:700; background:#FAFAFE; border-bottom:1px solid var(--border); }
.dtable td { padding:14px 22px; border-bottom:1px solid #F2F2F8; color:#333; vertical-align:middle; }
.dtable tr:last-child td { border-bottom:none; }
.dtable tr:hover td { background:#FCFBFF; }

/* avatar chips */
.avatar-chip { width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; color:#fff; flex-shrink:0; }
.user-cell { display:flex; align-items:center; gap:11px; }
.user-cell .nm { font-weight:700; color:var(--navy); font-size:14px; line-height:1.2; }
.user-cell .em { font-size:12px; color:var(--muted); }

/* role pills */
.role-pill { font-size:11px; font-weight:800; letter-spacing:0.04em; padding:4px 11px; border-radius:30px; text-transform:uppercase; }
.role-CEO    { background:#F0E8FF; color:#7B2FF7; }
.role-ADMIN  { background:#E8F4FF; color:#2AA7FF; }
.role-TUTOR  { background:#FFF1E0; color:#E67E22; }
.role-PARENT { background:#FFE8F5; color:#FF3E9E; }
.role-STUDENT{ background:#EFFAEA; color:#4d9c0f; }

/* status pills */
.status-pill { font-size:11px; font-weight:700; padding:4px 11px; border-radius:30px; }
.st-NEW{background:#FFE8F5;color:#c81e76;} .st-CONTACTED{background:#E8F4FF;color:#1a72c0;}
.st-ENROLLED{background:#EFFAEA;color:#3b7d0f;} .st-ACTIVE{background:#EFFAEA;color:#3b7d0f;}
.st-COMPLETED{background:#F0E8FF;color:#6a1fd0;} .st-PENDING{background:#FFF6E0;color:#b06a00;}
.st-PUBLISHED{background:#EFFAEA;color:#3b7d0f;} .st-DRAFT{background:#F0F0F4;color:#666;}

/* mini progress bar in tables */
.mini-prog { width:90px; height:7px; border-radius:30px; background:#EFEEF6; overflow:hidden; display:inline-block; vertical-align:middle; }
.mini-prog > span { display:block; height:100%; border-radius:30px; background:linear-gradient(90deg,#7B2FF7,#FF3E9E); }
.prog-wrap { display:flex; align-items:center; gap:8px; }
.prog-num { font-size:12px; font-weight:700; color:var(--purple); min-width:34px; }

/* tabs */
.dash-tabs { display:flex; gap:6px; border-bottom:2px solid var(--border); margin-bottom:22px; flex-wrap:wrap; }
.dash-tab { padding:11px 18px; background:none; border:none; border-bottom:3px solid transparent; color:var(--muted); font-weight:700; font-family:var(--font-nunito); cursor:pointer; font-size:14px; margin-bottom:-2px; transition:all 150ms; border-radius:8px 8px 0 0; }
.dash-tab:hover { color:var(--navy); background:#FAFAFE; }
.dash-tab.active { color:var(--purple); border-bottom-color:var(--purple); }
.tab-panel { display:none; } .tab-panel.active { display:block; animation:fadeIn 250ms; }

/* responsive: stack tables into cards on small screens */
@media (max-width:768px){
  .dtable thead{ display:none; }
  .dtable, .dtable tbody, .dtable tr, .dtable td{ display:block; width:100%; }
  .dtable tr{ border-bottom:8px solid #F4F2FB; padding:6px 0; }
  .dtable td{ padding:8px 18px; border:none; }
  .dtable td::before{ content:attr(data-label); display:block; font-size:10px; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); font-weight:700; margin-bottom:2px; }
}



/* ═══════════════════════════════════════════════════════════════════════════
   HERO — clean, fully fluid (text on top, scene below). No overlap, all screens.
   ═══════════════════════════════════════════════════════════════════════════ */
.hero-scene { padding: 48px 0 0; }
.hero-scene .container { display: flex; flex-direction: column; align-items: center; }
.hero-copy { text-align: center; max-width: 760px; margin: 0 auto; position: relative; z-index: 2; }
.hero-copy .welcome-pill { margin-bottom: 14px; }
.hero-copy .shine-line { margin: 8px 0 16px; }
.hero-sub { font-size: clamp(15px, 2vw, 18px); color: #444; line-height: 1.7; max-width: 540px; margin: 0 auto 26px; }
.hero-cta { margin-bottom: 8px; }

/* The composed scene image — scales fluidly, never crops, never overlaps text */
.hero-art { width: 100%; max-width: 920px; margin: 0 auto; position: relative; z-index: 1; }
.hero-art img {
  display: block; width: 100%; height: auto;
  /* Feather all four edges so the image dissolves into the background (no hard rectangle) */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 7%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,  transparent 0%, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 7%, #000 90%, transparent 100%);
  mask-composite: intersect;
}

/* Larger screens: give the scene a comfortable presence */
@media (min-width: 1100px) {
  .hero-scene { padding: 60px 0 0; }
  .hero-art { max-width: 1000px; margin-top: -8px; }
}
/* Small screens: tighter spacing, full-width scene */
@media (max-width: 600px) {
  .hero-scene { padding: 32px 0 0; }
  .hero-copy { padding: 0 4px; }
  .hero-art { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE APP-STYLE NAV (slide-in, animated hamburger, accordions)
   ═══════════════════════════════════════════════════════════════════════════ */
.hamburger { display:none; background:none; border:none; cursor:pointer; width:40px; height:40px; flex-direction:column; justify-content:center; gap:5px; padding:8px; flex-shrink:0; }
.hamburger span { display:block; height:3px; width:24px; background:var(--purple); border-radius:3px; transition:all 280ms; }
.hamburger.active span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

.mobile-overlay { display:none; position:fixed; inset:0; background:rgba(29,27,78,0.5); backdrop-filter:blur(3px); z-index:90; opacity:0; transition:opacity 280ms; }
.mobile-overlay.open { display:block; opacity:1; }

.mobile-app-menu {
  position:fixed; top:0; left:0; right:0; width:100%;
  background:#fff; z-index:95;
  max-height:0; overflow:hidden;
  transition:max-height 360ms cubic-bezier(0.4,0,0.2,1);
  display:flex; flex-direction:column; box-shadow:0 14px 40px rgba(0,0,0,0.16);
}
.mobile-app-menu.open { max-height:100dvh; overflow-y:auto; }
.mobile-menu-head { position:sticky; top:0; background:#fff; z-index:2; }
.mobile-menu-head { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--border); }
.mobile-close { background:var(--surface); border:none; width:38px; height:38px; border-radius:50%; font-size:26px; line-height:1; color:var(--navy); cursor:pointer; }
.mobile-menu-body { flex:1; overflow-y:auto; padding:8px 0; -webkit-overflow-scrolling:touch; }
.mobile-menu-foot { padding:16px 20px; border-top:1px solid var(--border); }

.m-item { display:flex; align-items:center; justify-content:space-between; width:100%; padding:15px 22px; font-family:var(--font-nunito); font-weight:700; font-size:16px; color:var(--navy); background:none; border:none; cursor:pointer; text-align:left; transition:background 150ms; }
.m-item:active, .m-item:hover { background:var(--surface); }
.m-caret { transition:transform 280ms; font-size:13px; color:var(--muted); }
.m-accordion.open .m-caret { transform:rotate(180deg); }
.m-submenu { max-height:0; overflow:hidden; transition:max-height 320ms ease; background:var(--surface); }
.m-submenu.open { max-height:600px; }
.m-subitem { display:block; padding:12px 22px 12px 38px; font-size:14px; color:#555; font-weight:600; }
.m-subitem:active, .m-subitem:hover { background:#EFEAFB; color:var(--purple); }

@media (max-width: 900px) {
  .hamburger { display:flex; }
}

/* ── Single consistent nav breakpoint (900px) ──
   Desktop nav + auth visible above 900px; hamburger only at/below 900px.    */
.nav-desktop-menu { display: flex; }
.nav-desktop-auth { display: flex; }
@media (max-width: 900px) {
  .nav-desktop-menu, .nav-desktop-auth { display: none !important; }
  .hamburger { display: flex !important; }
}
@media (min-width: 901px) {
  .hamburger { display: none !important; }
  .mobile-app-menu, .mobile-overlay { display: none !important; }
}

/* ── Mobile menu open state ──────────────────────────────────────────────────
   The panel used to sit at top:0 with a z-index ABOVE the navbar, and the
   hamburger was given opacity:0 and pointer-events:none while it was open. So
   the control people reach for to close a menu was both invisible and dead,
   and the only way out was a × inside the panel.

   Now the panel opens BELOW the sticky navbar and the navbar stays on top. The
   hamburger remains visible and becomes an X (the .hamburger.active rotation
   below already existed for exactly this and was never being seen), so the one
   control opens and closes. The overlay, the Escape key and tapping any link
   also close it. */
.m-caret { display: inline-block; font-size: 14px; color: var(--purple); opacity: 0.8; }
.m-accordion { justify-content: space-between; }

/* The navbar must outrank the panel, or it cannot be tapped to close it. */
.navbar { z-index: 9999; }
.mobile-app-menu { z-index: 9990; top: var(--nav-h, 80px); }
.mobile-overlay  { z-index: 9980; top: var(--nav-h, 80px); }
.mobile-app-menu.open { max-height: calc(100dvh - var(--nav-h, 80px)); }

/* The navbar already shows the logo and the X, so the panel's own header would
   be a second copy of both. */
.mobile-menu-head { display: none; }

:root { --nav-h: 80px; }
@media (max-height: 620px) { :root { --nav-h: 64px; } }

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD COMPONENTS
   These classes are used by parent.blade.php, calendar, directory-students,
   free-trial-slots and my-trials, but were never defined in this stylesheet
   (the views shipped expecting a stylesheet that wasn't included). Built on
   the existing design tokens above so they match the rest of the platform.
   ═══════════════════════════════════════════════════════════════════════════ */

.dashboard-content { display: flex; flex-direction: column; gap: 28px; }

/* ── Welcome bar ─────────────────────────────────────────────────────────── */
.welcome-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; }
.welcome-title { font-family: var(--font-display); font-size: clamp(24px,3.2vw,32px); color: var(--navy); margin:0; }
.welcome-sub { color: var(--muted); font-size: 15px; margin: 4px 0 0; }

/* ── Stat bar ────────────────────────────────────────────────────────────── */
.stat-bar { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; }
.stat-card { background:#fff; border:1px solid var(--border); border-radius:16px; padding:18px 20px;
             box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:2px; text-decoration:none;
             transition:transform 140ms, box-shadow 140ms; }
a.stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.stat-num { font-family:var(--font-fredoka); font-size:30px; font-weight:800; color:var(--purple); line-height:1.1; }
.stat-lbl { font-size:13px; color:var(--muted); font-weight:600; }

/* ── Section blocks ──────────────────────────────────────────────────────── */
.section-block { background:#fff; border:1px solid var(--border); border-radius:18px; padding:22px;
                 box-shadow:var(--shadow-sm); }
.section-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.section-heading { font-family:var(--font-display); font-size:20px; color:var(--navy); margin:0;
                   display:flex; align-items:center; gap:8px; }
.text-link { color:var(--purple); font-weight:700; font-size:14px; text-decoration:none; display:inline-block; }
.text-link:hover { text-decoration:underline; }

/* ── Empty states ────────────────────────────────────────────────────────── */
.empty-state { text-align:center; padding:34px 18px; }
.empty-icon { font-size:44px; margin-bottom:10px; }
.empty-title { font-family:var(--font-display); font-size:18px; color:var(--navy); margin:0 0 6px; }
.empty-sub { color:var(--muted); font-size:14px; margin:0 0 16px; }

/* ── Children ────────────────────────────────────────────────────────────── */
/* A child card used to be one flex row — avatar, text and two buttons side by
   side — inside a 240px grid column. The text column was left with about 80px,
   so the child's name wrapped mid-word and "Age group 9-12" broke across three
   lines. It is now a two-column grid with the buttons on their own row, and
   the column minimum is wide enough for a real name. */
.children-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:16px; }
.child-card { display:grid; grid-template-columns:auto 1fr; gap:12px 14px; align-items:center;
              background:var(--surface); border:1px solid var(--border);
              border-radius:16px; padding:16px; }
.child-avatar { width:48px; height:48px; border-radius:50%; flex-shrink:0;
                background:linear-gradient(135deg,var(--pink),var(--purple)); display:flex;
                align-items:center; justify-content:center; }
.avatar-initials { color:#fff; font-weight:800; font-size:18px; font-family:var(--font-fredoka); }
.child-info { min-width:0; }
.child-name { font-weight:800; color:var(--navy); margin:0; font-size:16px; line-height:1.3; }
.child-meta { font-size:13px; color:var(--muted); margin:3px 0 0; line-height:1.5; }
.child-enrollments { font-size:12px; color:var(--purple); font-weight:700; margin:4px 0 0; }
/* Full width under the name, so the buttons never squeeze the text. */
.child-actions { grid-column:1 / -1; display:flex; gap:8px; align-items:center; }
.child-actions > * { flex:1; justify-content:center; text-align:center; }

/* ── Upcoming classes ────────────────────────────────────────────────────── */
.class-grid { display:flex; flex-direction:column; gap:12px; }
.class-card { display:flex; align-items:center; justify-content:space-between; gap:14px;
              border:1px solid var(--border); border-radius:14px; padding:14px 16px; background:#fff; flex-wrap:wrap; }
.class-card--live { border-color:var(--green); background:#F6FFF0; }
.class-card__left { display:flex; align-items:center; gap:14px; min-width:0; }
.class-card__body { min-width:0; }
.class-card__right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.class-date-box { width:52px; height:52px; border-radius:12px; background:var(--surface);
                  border:1px solid var(--border); display:flex; flex-direction:column;
                  align-items:center; justify-content:center; flex-shrink:0; }
.class-day { font-size:19px; font-weight:800; color:var(--navy); line-height:1; }
.class-month { font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; }
.class-course { font-weight:700; color:var(--navy); margin:0; }
.class-meta, .class-date { font-size:13px; color:var(--muted); margin:2px 0 0; }
.live-badge { background:var(--green); color:#fff; font-size:10px; font-weight:800; padding:3px 9px;
              border-radius:20px; text-transform:uppercase; letter-spacing:.05em; }

/* ── Enrollment list ─────────────────────────────────────────────────────── */
.enrollment-list { display:flex; flex-direction:column; gap:10px; }
.enrollment-row { display:flex; align-items:center; gap:14px; border:1px solid var(--border);
                  border-radius:14px; padding:13px 16px; background:#fff; flex-wrap:wrap; }
.enrollment-icon { font-size:26px; flex-shrink:0; }
.enrollment-info { flex:1; min-width:0; }
.enrollment-course { font-weight:700; color:var(--navy); margin:0; }
.enrollment-meta { font-size:13px; color:var(--muted); margin:2px 0 0; }
.enrollment-status { flex-shrink:0; }

/* ── Badges / buttons / alerts ───────────────────────────────────────────── */
.badge-success { background:#EFFAEA; color:#3b7d0f; }
.badge-muted   { background:var(--surface); color:var(--muted); }
.badge-info    { background:#EAF4FF; color:#1763a6; }
.badge-warning { background:#FFF6E5; color:#9a6400; }
.badge-danger  { background:#FFF0F0; color:#c0392b; }

/* ── Onboarding / compliance checklist ───────────────────────────────────── */
.check-group { margin-top:20px; }
.check-group-title { font-family:var(--font-nunito); font-weight:800; color:var(--navy);
                     font-size:15px; margin:0 0 10px; letter-spacing:.01em; }
.check-item { border:1px solid var(--border); border-radius:14px; background:#fff;
              padding:16px 18px; margin-bottom:10px; }
.check-item.is-done    { border-left:4px solid var(--green); }
.check-item.is-waiting { border-left:4px solid #2AA7FF; }
.check-item.is-problem { border-left:4px solid #E74C3C; }
.check-item.is-todo    { border-left:4px solid var(--border); }
.check-head { display:flex; align-items:flex-start; justify-content:space-between;
              gap:14px; flex-wrap:wrap; }
.check-title { font-weight:700; color:var(--navy); margin:0; font-size:15px; }
.check-desc  { font-size:13px; color:#555; line-height:1.6; margin:6px 0 0; }
.check-note  { font-size:13px; line-height:1.6; margin:10px 0 0; padding:10px 12px;
               border-radius:10px; background:var(--surface); color:#555; }
.check-note.is-problem { background:#FFF0F0; color:#a93226; }
.check-actions { margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.check-meta { font-size:12px; color:var(--muted); margin:6px 0 0; }

.progress-track { height:10px; border-radius:6px; background:var(--surface); overflow:hidden; }
.progress-fill  { height:100%; border-radius:6px; background:linear-gradient(90deg,#7B2FF7,#FF3E9E); }

.doc-scroll { max-height:340px; overflow-y:auto; border:1px solid var(--border);
              border-radius:12px; padding:16px; background:var(--surface);
              font-size:13.5px; line-height:1.75; color:#333; white-space:pre-wrap; }

@media (max-width:640px) {
  .check-head { flex-direction:column; }
  .check-actions { flex-direction:column; align-items:stretch; }
}

/* Base for `class="btn btn-primary"` / `class="btn btn-outline"`. Deliberately
   sets no border, background or size, so the variant class next to it decides
   the look and nothing already in the project changes. */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
       font-family:var(--font-nunito); font-weight:700; cursor:pointer;
       transition:all 200ms; text-decoration:none; }

/* A disabled action must look disabled — the approve button on the compliance
   screen is disabled until every required item is verified. */
.btn[disabled], .btn-primary[disabled], .btn-outline[disabled], .btn-secondary[disabled] {
  opacity:.5; cursor:not-allowed; }
.btn[disabled]:hover, .btn-primary[disabled]:hover, .btn-outline[disabled]:hover {
  transform:none; box-shadow:none; background:transparent; }
.btn-primary[disabled]:hover { background:var(--pink); }

.btn-outline { background:transparent; border:2px solid var(--purple); color:var(--purple);
               padding:9px 18px; border-radius:30px; font-weight:700; cursor:pointer; text-decoration:none;
               display:inline-block; }
.btn-outline:hover { background:var(--purple); color:#fff; }
.btn-sm { padding:8px 16px; font-size:14px; min-height:38px; }
.btn-xs { padding:5px 12px; font-size:12px; min-height:30px; border-radius:20px; }
.alert { padding:13px 16px; border-radius:12px; margin-bottom:16px; font-size:14px; }
.alert-success { background:#F0FFF4; border:1px solid var(--green); color:#2d6a0f; }
.alert-error   { background:#FFF0F0; border:1px solid #FFB0B0; color:#c0392b; }
.accent { color:var(--purple); font-weight:700; }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.field { margin-bottom:14px; }
.field-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; }
.form-tip { font-size:12px; color:var(--muted); margin-top:4px; }
.req { color:var(--pink); }

/* ── Modal ───────────────────────────────────────────────────────────────── */
.modal, .modal-overlay { position:fixed; inset:0; background:rgba(29,27,78,.55); z-index:9998;
                         display:none; align-items:center; justify-content:center; padding:18px; }
.modal.open, .modal-overlay.open, .modal[style*="flex"] { display:flex; }
.modal-box { background:#fff; border-radius:18px; width:100%; max-width:480px; box-shadow:var(--shadow-lg);
             max-height:90vh; display:flex; flex-direction:column; }
.modal-header { padding:18px 22px; border-bottom:1px solid var(--border); display:flex;
                align-items:center; justify-content:space-between; gap:12px; }
.modal-title { font-family:var(--font-display); font-size:19px; color:var(--navy); margin:0; }
.modal-close { background:none; border:none; font-size:22px; cursor:pointer; color:var(--muted); line-height:1; }
.modal-body { padding:22px; overflow-y:auto; }
.modal-footer { padding:16px 22px; border-top:1px solid var(--border); display:flex; gap:10px; justify-content:flex-end; }

/* ── Certificate viewer ──────────────────────────────────────────────────────
   The certificate is a whole page drawn for A4 landscape, so the frame holding
   it keeps that shape: a sheet of paper scaled to the width is what makes it
   readable without a scrollbar hunting around inside the frame. Wider than an
   ordinary dialog, because a landscape sheet squeezed into 480px is no use to
   anyone. */
.cert-modal-box  { max-width:1040px; }
.cert-modal-body { padding:16px; }
.cert-frame-wrap { position:relative; width:100%; aspect-ratio:297/210; background:#fff;
                   border:1px solid var(--border); border-radius:12px; overflow:hidden; }
/* The document inside is drawn at its true size: 297 x 210mm is 1123 x 794
   CSS pixels. The frame is given exactly that, then scaled down to whatever
   width the dialog has, so the sheet is shown whole instead of the viewer
   scrolling around inside it. The script sets the scale. */
.cert-frame      { position:absolute; top:0; left:0; width:1123px; height:794px;
                   border:0; background:#fff; transform-origin:top left; }

/* Without aspect-ratio the wrapper collapses to nothing, which reads as a
   broken dialog rather than a certificate. */
@supports not (aspect-ratio: 1) {
  .cert-frame-wrap { height:0; padding-bottom:70.7%; }
}

.cert-hint { display:none; }

/* On a phone a landscape sheet is unreadable at page width, so it is given room
   to scroll sideways at a size a person can actually read. */
@media (max-width: 760px) {
  .cert-modal-body { overflow-x:auto; }
  .cert-frame-wrap { width:680px; }
  .cert-hint { display:block; position:sticky; left:0; width:min(100%, 92vw);
               margin:10px 0 0; font-size:12.5px; color:var(--muted); }
}

/* ── The public certificate check ────────────────────────────────────────────
   The page is dressed as the thing it is checking: the certificate's own gold
   and navy, and a round stamp for the verdict, because pressing a stamp onto a
   document is the gesture this page stands in for. Those two colours appear
   nowhere else on the site, which is the point: this page belongs to the
   paper, not to the marketing. */
:root {
  --cert-gold: #C9962E;
  --cert-gold-pale: #F6E9CC;
  --cert-navy: #17275F;
}
html[data-theme="dark"] {
  --cert-gold-pale: #2A2338;
}

.vfy-top { padding: 64px 0 40px;
           background: linear-gradient(160deg, #FFF9EC 0%, #FDF4FF 55%, #EEF6FF 100%); }
html[data-theme="dark"] .vfy-top { background: linear-gradient(160deg, #1B1830 0%, #191729 55%, #14131F 100%); }

.vfy-top-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px;
                gap: 48px; align-items: center; }
.vfy-intro { max-width: 680px; }

/* ── The sketch of the certificate's foot ─────────────────────────────────
   Drawn in CSS rather than photographed, so it cannot fall out of step with
   the certificate it points at. */
.vfy-locate { justify-self: end; width: 100%; max-width: 340px; }
.vfy-sheet  { position: relative; aspect-ratio: 297/210; background: #FEFDFA;
              border: 3px solid var(--cert-gold); border-radius: 10px;
              box-shadow: 0 0 0 1px #EBD9B0 inset, var(--shadow-md);
              padding: 13% 9% 9%; display: flex; flex-direction: column;
              justify-content: flex-end; }
.vfy-sheet-seal { position: absolute; right: 9%; top: 11%; width: 15%; aspect-ratio: 1;
                  border-radius: 50%; background: var(--cert-gold); opacity: .55; }
.vfy-sheet-line { position: absolute; left: 14%; height: 5px; border-radius: 3px;
                  background: #D9D5E6; }
.vfy-sheet-line-a { top: 24%; width: 44%; height: 9px; background: #C6C2D8; }
.vfy-sheet-line-b { top: 38%; width: 60%; }
.vfy-sheet-line-c { top: 48%; width: 50%; }

.vfy-sheet-foot { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 7%; }
.vfy-sheet-foot > div { text-align: center; }
.vfy-cell-val { display: block; height: 15px; border-bottom: 2px solid var(--cert-gold);
                font: 700 7px/15px ui-monospace, Menlo, Consolas, monospace;
                color: var(--cert-navy); overflow: hidden; white-space: nowrap; }
.vfy-cell-lab { display: block; margin-top: 4px; font-size: 8px; font-weight: 700;
                color: var(--cert-navy); }
html[data-theme="dark"] .vfy-cell-val,
html[data-theme="dark"] .vfy-cell-lab { color: #3A3568; }
.vfy-cell-is-it { position: relative; }
.vfy-cell-is-it::before { content: ""; position: absolute; inset: -9px -8px -7px -8px;
                          border: 2px solid var(--purple); border-radius: 8px;
                          background: rgba(123,47,247,.07); }
.vfy-cell-is-it > * { position: relative; }
.vfy-h1 { font-family: var(--font-display); font-size: clamp(30px, 4.4vw, 48px);
          line-height: 1.08; color: var(--cert-navy); margin: 0 0 14px; }
html[data-theme="dark"] .vfy-h1 { color: var(--navy); }
.vfy-lede { font-size: 17px; line-height: 1.65; color: #4A4866; margin: 0 0 30px; max-width: 60ch; }
html[data-theme="dark"] .vfy-lede { color: var(--text); }

.vfy-form  { margin: 0; }
.vfy-label { display: block; font-size: 14px; font-weight: 700;
             color: var(--cert-navy); margin-bottom: 8px; }
html[data-theme="dark"] .vfy-label { color: var(--navy); }

/* The number is set wide and monospaced in the box, so what someone types
   looks like what is printed on the certificate as they type it. */
.vfy-entry { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.vfy-input { flex: 1 1 320px; min-width: 0; font: 600 19px/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
             letter-spacing: 0.06em; color: var(--cert-navy); background: #fff;
             border: 2px solid var(--cert-gold); border-radius: 14px; padding: 15px 18px;
             text-transform: uppercase; }
html[data-theme="dark"] .vfy-input { background: var(--surface); color: var(--text); }
.vfy-input::placeholder { color: #B9B2C6; text-transform: none; letter-spacing: 0.04em; }
.vfy-input:focus { outline: 3px solid rgba(123,47,247,.35); outline-offset: 2px;
                   border-color: var(--purple); }

.vfy-go { flex: 0 0 auto; border: 0; cursor: pointer; border-radius: 14px;
          padding: 15px 30px; font-size: 16px; font-weight: 700; color: #fff;
          background: var(--cert-navy); }
.vfy-go:hover  { background: #0F1B46; }
.vfy-go:focus-visible { outline: 3px solid rgba(123,47,247,.45); outline-offset: 2px; }

.vfy-where { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 12px 0 0; max-width: 58ch; }

/* ── The verdict ──────────────────────────────────────────────────────────── */
.vfy-result-wrap { padding: 36px 0 8px; }
.vfy-result { display: flex; gap: 30px; align-items: flex-start;
              background: #fff; border: 1px solid var(--border); border-radius: 22px;
              padding: 30px; box-shadow: var(--shadow-md); }
html[data-theme="dark"] .vfy-result { background: var(--surface); }

.vfy-stamp { flex: 0 0 auto; width: 136px; height: 136px; border-radius: 50%;
             display: flex; flex-direction: column; align-items: center; justify-content: center;
             gap: 2px; border: 4px double currentColor; }
.vfy-stamp-mark { font-size: 42px; line-height: 1; font-weight: 700; }
.vfy-stamp-word { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; }

.vfy-valid     .vfy-stamp { color: #2F7D1F; background: #F1FAEC; }
.vfy-test      .vfy-stamp { color: #9A6A12; background: #FDF4E2; }
.vfy-withdrawn .vfy-stamp { color: #A8321C; background: #FDEEEA; }
.vfy-unknown   .vfy-stamp { color: #6B6881; background: var(--surface); }

.vfy-valid     { border-left: 6px solid #2F7D1F; }
.vfy-test      { border-left: 6px solid #C98A12; }
.vfy-withdrawn { border-left: 6px solid #A8321C; }
.vfy-unknown   { border-left: 6px solid #B7B4C6; }

.vfy-body    { flex: 1 1 320px; min-width: 0; }
.vfy-verdict { font-family: var(--font-display); font-size: clamp(21px, 2.6vw, 27px);
               line-height: 1.25; color: var(--cert-navy); margin: 2px 0 10px; }
html[data-theme="dark"] .vfy-verdict { color: var(--navy); }
.vfy-say     { font-size: 15.5px; line-height: 1.7; color: #4A4866; margin: 0; max-width: 62ch; }
html[data-theme="dark"] .vfy-say { color: var(--text); }
.vfy-say a   { color: var(--purple); }

/* The facts, as a register entry rather than a table: a quiet grid of pairs
   the eye can run down beside the paper. */
.vfy-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
             gap: 18px 26px; margin: 26px 0 0; padding: 22px 0 0;
             border-top: 1px solid var(--border); }
.vfy-facts dt { font-size: 12.5px; color: var(--muted); margin: 0 0 4px; }
.vfy-facts dd { margin: 0; font-size: 15.5px; font-weight: 600; color: var(--cert-navy);
                overflow-wrap: anywhere; }
html[data-theme="dark"] .vfy-facts dd { color: var(--text); }
.vfy-name   { font-size: 19px !important; }
.vfy-serial { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
              letter-spacing: 0.04em; font-weight: 700; }

.vfy-privacy { margin: 20px 0 0; font-size: 13px; line-height: 1.65; color: var(--muted);
               max-width: 64ch; }

/* ── The notes under it ───────────────────────────────────────────────────── */
.vfy-notes { padding: 44px 0 72px; }
.vfy-notes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px; }
.vfy-notes h3 { font-family: var(--font-display); font-size: 17px; color: var(--cert-navy);
                margin: 0 0 8px; padding-top: 14px; border-top: 2px solid var(--cert-gold); }
html[data-theme="dark"] .vfy-notes h3 { color: var(--navy); }
.vfy-notes p  { font-size: 14.5px; line-height: 1.7; color: #55536F; margin: 0; }
html[data-theme="dark"] .vfy-notes p { color: var(--muted); }
.vfy-notes a  { color: var(--purple); }

@media (max-width: 900px) {
  .vfy-top-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .vfy-locate   { justify-self: start; max-width: 300px; }
}

@media (max-width: 640px) {
  .vfy-top     { padding: 40px 0 30px; }
  .vfy-locate  { display: none; }
  .vfy-result  { gap: 20px; padding: 24px; flex-direction: column; align-items: center;
                 text-align: center; }
  .vfy-facts   { text-align: left; }
  .vfy-go      { width: 100%; }
  .vfy-stamp   { width: 112px; height: 112px; }
  .vfy-say, .vfy-privacy { text-align: left; }
}

/* ── Spacing helpers ─────────────────────────────────────────────────────── */
.mt-2 { margin-top:8px; }
.mt-3 { margin-top:12px; }

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .enrollment-row, .class-card { flex-direction:column; align-items:flex-start; }
  .class-card__right { width:100%; }
  .stat-bar { grid-template-columns:repeat(2,1fr); }
}

/* ── Missing status + badge variants ─────────────────────────────────────── */
.badge-grey   { background:var(--surface); color:var(--muted); }
.st-ACTIVE    { background:#EFFAEA; color:#3b7d0f; }
.st-APPROVED  { background:#EFFAEA; color:#3b7d0f; }
.st-CONTACTED { background:#E8F4FF; color:#1a72c0; }
.st-DRAFT     { background:var(--surface); color:var(--muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   MASTER CALENDAR  (week / month / year views)
   ═══════════════════════════════════════════════════════════════════════════ */
.cal-week { display:grid; grid-template-columns:repeat(7,1fr); gap:10px; }
.cal-day { background:#fff; border:1px solid var(--border); border-radius:14px; padding:10px;
           min-height:130px; display:flex; flex-direction:column; gap:6px; }
.cal-day.cal-today { border-color:var(--pink); box-shadow:0 0 0 2px rgba(255,62,158,.15); }
.cal-dow { font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; }
.cal-dom { font-family:var(--font-fredoka); font-size:19px; font-weight:800; color:var(--navy); line-height:1; }
.cal-chip { font-size:11px; padding:5px 7px; border-radius:7px; color:var(--navy);
            overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-empty { font-size:11px; color:#C9C9D6; text-align:center; margin-top:auto; }

/* Month grid */
.cal-month { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-mcell { background:#fff; border:1px solid var(--border); border-radius:10px; padding:7px;
             min-height:84px; display:flex; flex-direction:column; gap:3px; text-decoration:none; }
.cal-mcell:hover { border-color:var(--purple); }
.cal-mcell.cal-mtoday { border-color:var(--pink); background:#FFF7FB; }
.cal-mcell.cal-muted  { background:var(--surface); opacity:.55; }
.cal-mdate { font-size:12px; font-weight:700; color:var(--navy); }
.cal-mchip { font-size:10px; padding:2px 5px; border-radius:5px; overflow:hidden;
             text-overflow:ellipsis; white-space:nowrap; }

/* Year grid */
.cal-year { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.cal-ymonth { background:#fff; border:1px solid var(--border); border-radius:14px; padding:16px;
              text-decoration:none; display:block; transition:transform 140ms, box-shadow 140ms; }
.cal-ymonth:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.cal-ymonth.cal-ycurrent { border-color:var(--pink); background:#FFF7FB; }
.cal-ymname { font-family:var(--font-display); font-size:16px; color:var(--navy); margin-bottom:8px; }
.cal-ystats { display:flex; flex-wrap:wrap; gap:6px; }
.cal-ystat { font-size:11px; color:var(--muted); background:var(--surface); padding:3px 8px; border-radius:20px; }

@media (max-width: 760px) {
  .cal-week { grid-template-columns:1fr; }
  .cal-day { min-height:auto; }
  .cal-mcell { min-height:62px; padding:5px; }
}

/* ── Remaining dashboard supporting classes ──────────────────────────────── */
.page-title { font-family:var(--font-display); font-size:clamp(22px,3vw,28px); color:var(--navy); margin:0; }
.page-sub   { color:var(--muted); font-size:14px; margin:4px 0 0; }

.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.data-table { width:100%; border-collapse:collapse; font-size:14px; }
.data-table th { text-align:left; padding:12px 18px; font-size:11px; text-transform:uppercase;
                 letter-spacing:.06em; color:var(--muted); font-weight:700; background:#FAFAFE;
                 border-bottom:1px solid var(--border); white-space:nowrap; }
.data-table td { padding:13px 18px; border-bottom:1px solid #F2F2F8; color:#333; vertical-align:middle; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:#FCFBFF; }

.avatar-xs { width:30px; height:30px; border-radius:50%; flex-shrink:0;
             background:linear-gradient(135deg,var(--pink),var(--purple));
             display:inline-flex; align-items:center; justify-content:center; }
.avatar-initials-xs { color:#fff; font-weight:800; font-size:12px; font-family:var(--font-fredoka); }

.btn-link { background:none; border:none; padding:0; color:var(--purple); font-weight:700;
            font-size:13px; cursor:pointer; text-decoration:none; }
.btn-link:hover { text-decoration:underline; }

/* Calendar sub-elements */
.cal-day-head  { display:flex; align-items:baseline; justify-content:space-between; gap:6px; }
.cal-day-body  { display:flex; flex-direction:column; gap:4px; flex:1; }
.cal-dow-label { font-size:10px; text-transform:uppercase; letter-spacing:.06em;
                 color:var(--muted); font-weight:700; text-align:center; padding-bottom:4px; }
.cal-month-head { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-month-row  { display:contents; }

/* Rich-text editor shell (blog + library managers) */
.rte-toolbar { display:flex; flex-wrap:wrap; gap:4px; padding:8px; background:var(--surface);
               border:1px solid var(--border); border-bottom:none; border-radius:12px 12px 0 0; }
.rte-toolbar button { background:#fff; border:1px solid var(--border); border-radius:6px;
                      padding:5px 10px; font-size:13px; cursor:pointer; color:var(--navy); }
.rte-toolbar button:hover { background:var(--surface); border-color:var(--purple); color:var(--purple); }
.rte-editor { border:1px solid var(--border); border-radius:0 0 12px 12px; padding:14px;
              min-height:220px; background:#fff; font-family:var(--font-nunito); line-height:1.7;
              overflow-y:auto; }
.rte-editor:focus { outline:none; border-color:var(--purple); }

/* Small utilities used across dashboards */
.items-start { align-items:flex-start; }
.mb-1 { margin-bottom:4px; }
.mb-5 { margin-bottom:20px; }

/* Visible to screen readers only — used for labels where the visual design
   relies on a placeholder (accessibility: every input still needs a label). */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
           clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE APP SHELL
   Makes the platform behave like a native app on a phone: a fixed bottom tab
   bar, comfortable touch targets, and momentum scrolling. Desktop is unchanged.
   ═══════════════════════════════════════════════════════════════════════════ */

.mobile-tabs { display: none; }

@media (max-width: 900px) {
  .mobile-tabs {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    background: #fff;
    border-top: 1px solid var(--border);
    /* Clears the iPhone home indicator so the last tab is not cut off */
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -2px 14px rgba(29,27,78,.07);
  }
  .mtab {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 9px 2px 7px;
    /* 48px exceeds the 44px minimum both Apple and Google recommend */
    min-height: 48px;
    background: none; border: none; cursor: pointer;
    font-family: var(--font-nunito); font-size: 10.5px; font-weight: 700;
    color: var(--muted); text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .mtab svg { width: 21px; height: 21px; }
  .mtab.active { color: var(--pink); }
  .mtab:active { background: var(--surface); }

  /* Stop the bar covering the end of the page */
  .dashboard-content, .dash-main { padding-bottom: 86px; }

  /* App-like feel: momentum scroll, no accidental sideways drag,
     and no iOS zoom-on-focus (which needs a 16px font) */
  html, body { overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
  body { overflow-x: hidden; }
  .input, select.input, textarea.input { font-size: 16px; }

  /* Comfortable tap targets throughout */
  .btn-primary, .btn-secondary, .btn-pink, .btn-purple, .btn-outline { min-height: 46px; }
  .sidebar-link { min-height: 46px; }

  /* Tables reflow into stacked cards, using the data-label already on each cell */
  .dtable thead { display: none; }
  .dtable, .dtable tbody, .dtable tr, .dtable td { display: block; width: 100%; }
  .dtable tr {
    border: 1px solid var(--border); border-radius: 12px;
    padding: 10px 12px; margin-bottom: 10px; background: #fff;
  }
  .dtable td { border: none; padding: 6px 0; display: flex; justify-content: space-between; gap: 12px; }
  .dtable td::before {
    content: attr(data-label);
    font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--muted); font-weight: 800; flex-shrink: 0;
  }
  .dtable td:not([data-label])::before { content: ''; }

  /* Modals become full-height sheets, as they do in an app */
  .modal-box, .act-box { max-height: 94vh; border-radius: 16px 16px 0 0; align-self: flex-end; }
}

/* Treat a phone in landscape the same way */
@media (max-width: 900px) and (orientation: landscape) {
  .mobile-tabs { padding-bottom: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE APP SHELL — CONTENT
   The tab bar alone does not make an app. On a phone the content itself has to
   behave like one: full-width cards, a sticky header, stacked forms, no
   sideways scrolling, and controls big enough for a thumb.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── Page frame ─────────────────────────────────────────────────── */
  .dash-main, .dashboard-content { padding-left: 14px; padding-right: 14px; }
  .container, .container-narrow { padding-left: 14px; padding-right: 14px; }

  /* Header becomes a sticky app bar, so the page title stays visible */
  .dash-header {
    position: sticky; top: 0; z-index: 80;
    background: var(--bg, #F7F7FB);
    padding: 12px 0 10px; margin-bottom: 14px;
    border-bottom: 1px solid var(--border);
    flex-direction: column; align-items: flex-start; gap: 10px;
  }
  .dash-title { font-size: 21px; line-height: 1.25; }
  .dash-sub { font-size: 13px; }
  /* A header action becomes a full-width button, as in an app */
  .dash-header > form, .dash-header > a.btn-primary,
  .dash-header > a.btn-secondary, .dash-header > button { width: 100%; }
  .dash-header > form button { width: 100%; }

  /* ── Cards and panels: edge-to-edge, less chrome ─────────────────── */
  .panel, .card, .section-block {
    border-radius: 14px;
    margin-left: 0; margin-right: 0;
  }
  .panel-body.padded, .card { padding: 16px; }
  .panel-head {
    flex-direction: column; align-items: flex-start; gap: 6px;
    padding: 14px 16px;
  }
  .panel-title { font-size: 16px; }

  /* ── Grids collapse to one column ────────────────────────────────── */
  .grid.md\:grid-2, .grid.md\:grid-3, .grid.lg\:grid-3,
  .grid.lg\:grid-6, .grid.md\:grid-4 { grid-template-columns: 1fr; }
  .children-grid, .class-grid, .cal-year { grid-template-columns: 1fr; }
  .stat-bar { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-card { padding: 14px; }
  .stat-num { font-size: 24px; }
  .stat-lbl { font-size: 11px; }

  /* ── Forms: stacked, thumb-sized ─────────────────────────────────── */
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .input, select.input, textarea.input { min-height: 46px; }
  textarea.input { min-height: 110px; }
  .label { font-size: 13px; }
  /* A form's buttons go full width and sit in a row of their own */
  form .btn-primary, form .btn-secondary, form .btn-pink, form .btn-purple { width: 100%; }
  .act-foot, .modal-footer { flex-direction: column-reverse; gap: 8px; }
  .act-foot button, .modal-footer button { width: 100%; }

  /* ── Lists and rows ──────────────────────────────────────────────── */
  .enrollment-row, .class-card, .child-card { padding: 14px; }
  .dtable td { font-size: 14px; }
  .status-pill, .badge { font-size: 11px; }

  /* ── Hero sections: shorter, so content is visible without scrolling ── */
  .hero-bg { padding: 32px 0 !important; }
  .section { padding-top: 28px; padding-bottom: 28px; }

  /* ── Nothing should ever scroll the page sideways ────────────────── */
  .table-wrap, .panel-body { max-width: 100%; }
  img, video, iframe { max-width: 100%; height: auto; }
  pre, code { white-space: pre-wrap; word-break: break-word; }

  /* ── Details/summary used as accordions get a bigger tap area ────── */
  details > summary { padding: 10px 0; min-height: 44px; display: flex;
                      align-items: center; gap: 8px; flex-wrap: wrap; }

  /* ── Drawer: full-height sheet with its own scroll ───────────────── */
  .sidebar { width: 82vw; max-width: 320px; overflow-y: auto;
             padding-bottom: 90px; -webkit-overflow-scrolling: touch; }
}

/* Very small phones */
@media (max-width: 380px) {
  .stat-bar { grid-template-columns: 1fr; }
  .dash-title { font-size: 19px; }
  .mtab { font-size: 9.5px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Dark mode
   ═══════════════════════════════════════════════════════════════════════════
   Driven by data-theme="dark" on <html>, set before first paint by a small
   inline script in each layout so the page never flashes light first.

   The design system is well tokenised, so most of this is simply redefining
   the tokens. Two things need more than that:

   1. --navy is used as a TEXT colour throughout the views, not just as a brand
      colour, so in dark mode it becomes near-white. The brand navy is still
      available as --navy-brand where a background genuinely needs it.

   2. A number of views set background:#fff inline, and an inline style beats
      any stylesheet rule. Those are overridden with !important below. That is
      normally worth avoiding, but it is the only thing that wins against an
      inline style, and the alternative is white cards on a dark page.
   ═══════════════════════════════════════════════════════════════════════════ */

:root { --navy-brand: #1D1B4E; }

html[data-theme="dark"] {
  --bg:      #14131F;
  --surface: #1C1B2B;
  --border:  #2E2C42;
  --text:    #E8E7F0;
  --muted:   #9B99B0;
  /* Used as a text colour across the views, so it has to invert. */
  --navy:    #F2F1F8;
  --navy-brand: #1D1B4E;
  /* Brand colours lifted slightly so they stay legible on a dark ground. */
  --pink:    #FF5CAE;
  --purple:  #9D5BFF;
  --blue:    #4FB8FF;
  --green:   #8FE03A;
  --orange:  #F08B33;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.30);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.30);
  --shadow-lg: 0 18px 44px rgba(0,0,0,0.55), 0 6px 14px rgba(0,0,0,0.35);
  color-scheme: dark;
}

/* Surfaces defined in this stylesheet. */
html[data-theme="dark"] body { background: var(--bg); color: var(--text); }
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .mobile-topbar,
html[data-theme="dark"] .mobile-tabs,
html[data-theme="dark"] .check-item,
html[data-theme="dark"] .enrollment-row,
html[data-theme="dark"] .cal-day,
html[data-theme="dark"] .cal-ymonth,
html[data-theme="dark"] .navbar { background: var(--surface); border-color: var(--border); }

html[data-theme="dark"] .panel-head,
html[data-theme="dark"] .cal-day-head,
html[data-theme="dark"] .cal-month-head,
html[data-theme="dark"] .dtable thead th { background: #232134; border-color: var(--border); }

html[data-theme="dark"] .cal-mcell,
html[data-theme="dark"] .cal-month { border-color: var(--border); }
html[data-theme="dark"] .cal-muted { background: #1A1927; }
html[data-theme="dark"] .cal-mtoday,
html[data-theme="dark"] .cal-today .cal-day-head,
html[data-theme="dark"] .sidebar-link.active { background: #2B2345; color: var(--purple); }

html[data-theme="dark"] .input,
html[data-theme="dark"] select.input,
html[data-theme="dark"] textarea.input {
  background: #232134; border-color: var(--border); color: var(--text);
}
html[data-theme="dark"] .input::placeholder { color: #7D7B94; }
html[data-theme="dark"] .dtable td { border-color: var(--border); }
html[data-theme="dark"] .doc-scroll { background: #232134; border-color: var(--border); color: var(--text); }

/* Badges: the light tints become near-invisible, so they are re-tinted. */
html[data-theme="dark"] .badge-success { background: rgba(126,211,33,0.16);  color: #A6E86A; }
html[data-theme="dark"] .badge-info    { background: rgba(42,167,255,0.16);  color: #7CC9FF; }
html[data-theme="dark"] .badge-warning { background: rgba(230,126,34,0.18);  color: #F5B265; }
html[data-theme="dark"] .badge-danger  { background: rgba(231,76,60,0.18);   color: #FF9B8F; }
html[data-theme="dark"] .badge-muted   { background: #262438;                color: var(--muted); }
html[data-theme="dark"] .alert-success { background: rgba(126,211,33,0.12); border-color: rgba(126,211,33,0.35); color: #A6E86A; }
html[data-theme="dark"] .alert-error   { background: rgba(231,76,60,0.12);  border-color: rgba(231,76,60,0.35);  color: #FF9B8F; }

/* Inline background:#fff in the views — only !important beats an inline style. */
html[data-theme="dark"] .panel[style],
html[data-theme="dark"] .card[style],
html[data-theme="dark"] .check-item[style],
html[data-theme="dark"] .cal-day[style],
html[data-theme="dark"] .enrollment-row[style],
html[data-theme="dark"] .akk-surface { background: var(--surface) !important; }

/* Components whose white background is set in a view's own <style> block.
   Those rules come later in the document than this file, but a
   html[data-theme="dark"] .x selector outranks a bare .x on specificity, so
   these win without needing !important. */
html[data-theme="dark"] .act-box,
html[data-theme="dark"] .book-card,
html[data-theme="dark"] .trait-face,
html[data-theme="dark"] .rte-toolbar button,
html[data-theme="dark"] .program-pill,
html[data-theme="dark"] .mobile-app-menu,
html[data-theme="dark"] .mobile-menu-head,
html[data-theme="dark"] .mobile-menu-foot { background: var(--surface); border-color: var(--border); }
html[data-theme="dark"] .trait-face { color: var(--text); }

/* Anything still reading as body text on a card. */
html[data-theme="dark"] .dash-sub,
html[data-theme="dark"] .form-tip,
html[data-theme="dark"] .check-meta { color: var(--muted); }

/* The settings menu's styles live in partials/settings-menu.blade.php, beside
   its markup, inside an @once block.

   Why there and not here: that component is the one that fails worst when the
   stylesheet does not arrive — unstyled, its panel renders expanded in the
   page flow and its icons blow up to full size. Keeping its rules next to its
   markup means it cannot be separated from them. The sidebar, the calendar and
   the dashboard layout already do the same. */


/* The "transient" part: colours cross-fade rather than snapping, but only
   after the first paint, so the initial render is never animated. */
html.theme-ready body,
html.theme-ready .panel, html.theme-ready .card, html.theme-ready .sidebar,
html.theme-ready .input, html.theme-ready .check-item, html.theme-ready .panel-head,
html.theme-ready .dtable thead th, html.theme-ready .badge, html.theme-ready .navbar {
  transition: background-color 260ms ease, color 260ms ease, border-color 260ms ease;
}
@media (prefers-reduced-motion: reduce) {
  html.theme-ready body, html.theme-ready .panel, html.theme-ready .card,
  html.theme-ready .sidebar, html.theme-ready .input { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Modal system — used by the login/signup pop-ups and the session notice
   ═══════════════════════════════════════════════════════════════════════════ */
.akk-modal {
  position: fixed; inset: 0; z-index: 9000;
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.akk-modal.open { display: flex; }
.akk-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(29,27,78,0.45);
  /* The page behind stays visible but out of focus, so context is not lost. */
  backdrop-filter: blur(7px) saturate(0.9);
  -webkit-backdrop-filter: blur(7px) saturate(0.9);
}
html[data-theme="dark"] .akk-modal-backdrop { background: rgba(8,7,14,0.62); }

.akk-modal-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 460px;
  max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border);
  border-radius: 22px; padding: 32px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.30);
  animation: akkModalIn 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.akk-modal-card.is-wide { max-width: 560px; }
@keyframes akkModalIn {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .akk-modal-card { animation: none; }
}

.akk-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--muted); cursor: pointer; font-size: 18px; line-height: 1; padding: 0;
}
.akk-modal-close:hover { color: var(--pink); border-color: var(--pink); }

.akk-modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.akk-modal-actions > * { flex: 1; }

/* The login and signup pages use the long-standing .section / .container /
   .card classes with inline sizing, so nothing about them can depend on a
   rule added here. Deliberately no .auth-page / .auth-card. */

@media (max-width: 520px) {
  .akk-modal { padding: 12px; align-items: flex-end; }
  .akk-modal-card { padding: 24px 20px; border-radius: 22px 22px 14px 14px;
                    max-height: calc(100vh - 24px); }
  .akk-modal-actions { flex-direction: column; }
}

/* Show/hide-password icon states. Both SVGs are in the button; CSS picks one,
   so toggling needs no icon-swapping JavaScript. */
.akk-pw-toggle .eye-open   { display: block; }
.akk-pw-toggle .eye-closed { display: none; }
.akk-pw-toggle.is-revealed .eye-open   { display: none; }
.akk-pw-toggle.is-revealed .eye-closed { display: block; }
.akk-pw-toggle:hover { color: var(--purple); }


/* ═══════════════════════════════════════════════════════════════════════════
   Height responsiveness
   ═══════════════════════════════════════════════════════════════════════════
   Everything above responds to WIDTH. These rules respond to HEIGHT, which
   matters in three situations the width queries never catch:

     *  A phone held sideways. A 360px-tall viewport given 80px of section
        padding and an 80px navbar has almost nothing left for the content.
     *  A small laptop, or any window the person has shortened.
     *  Mobile browsers where 100vh counts the retracting toolbar, so a
        "full height" element is taller than the screen and the page scrolls
        when it should not. dvh measures what is actually visible.

   vh is declared first as a fallback for older browsers, then dvh overrides it
   where supported.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Shorter than a typical phone held upright. */
@media (max-height: 760px) {
  .section { padding: 56px 0; }
}

/* Landscape phones and short windows. */
@media (max-height: 620px) {
  .section { padding: 36px 0; }
  .navbar .container { height: 64px !important; }
  .nav-logo { height: 34px; }
  .hero-mascot { max-width: 280px; }
  /* A dropdown taller than the window has to scroll, or its last item is
     unreachable. */
  .nav-dropdown, .nav-dropdown.mega, .nav-dropdown.wide {
    max-height: calc(100dvh - 90px); overflow-y: auto;
  }
  .settings-panel { max-height: calc(100dvh - 80px); overflow-y: auto; }
}

/* Very short: a small window, or a phone sideways with the keyboard up. */
@media (max-height: 460px) {
  .section { padding: 24px 0; }
  .hero-features, .rainbow, .sun, .cloud, .deco { display: none; }
  /* The bottom tab bar costs too much of the screen at this height, so it
     slims down rather than disappearing — losing navigation entirely would be
     worse than a tighter bar. */
  .mtab { min-height: 40px; padding: 5px 2px 4px; font-size: 9.5px; gap: 1px; }
  .mtab svg { width: 17px; height: 17px; }
  .dashboard-content, .dash-main { padding-bottom: 66px; }
}

/* A landscape phone specifically: short AND wide, which the max-height rules
   above cannot distinguish from a small window. */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 1000px) {
  .dash-main { padding: 14px 16px 66px; }
  .dash-header { margin-bottom: 14px; }
  .sidebar { padding: 12px 12px; }
  .sidebar-user { display: none; }   /* the name is in the settings menu anyway */
  .sidebar-logo img { height: 32px; }
}

/* Dynamic viewport units: what is actually visible, excluding the browser
   toolbar that comes and goes as the page scrolls. */
.dash-layout { min-height: 100vh; min-height: 100dvh; }
.sidebar { height: auto; }

@media (max-width: 900px) {
  .sidebar { height: 100vh; height: 100dvh; }

  /* NOTE THE .open. Without it this sets a full-height max-height on the menu
     at all times, which beats the `max-height: 0` that keeps it SHUT, because
     the two selectors have equal specificity and this one comes later. The
     menu then sits permanently open and the class the hamburger toggles has no
     effect at all. That is exactly what happened. */
  .mobile-app-menu.open { max-height: 100vh; max-height: calc(100dvh - var(--nav-h, 80px)); }
}

/* Any scrolling overlay, capped against the visible area rather than the
   nominal one. */
.modal-box, .act-box, .shop-modal-inner { max-height: 90vh; max-height: 90dvh; }
.akk-modal-card { max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); }

/* Tables and long panels on a short screen: let the page scroll rather than
   trapping the content in a box with its own scrollbar. */
@media (max-height: 620px) {
  .doc-scroll { max-height: 220px; }
  .sidebar-nav { overflow-y: auto; }
}

/* Safe areas. Now that viewport-fit=cover is set, these report real values on
   a notched phone — which also means content would otherwise sit under the
   notch when the phone is sideways. */
@supports (padding: env(safe-area-inset-left)) {
  @media (orientation: landscape) and (max-width: 1000px) {
    .container, .container-narrow {
      padding-left: max(24px, env(safe-area-inset-left));
      padding-right: max(24px, env(safe-area-inset-right));
    }
    .dash-main {
      padding-left: max(16px, env(safe-area-inset-left));
      padding-right: max(16px, env(safe-area-inset-right));
    }
  }
  .mobile-app-menu { padding-bottom: env(safe-area-inset-bottom, 0); }
}