/* ═══════════════════════════════════════════════
   Bé Học Tập — Design System
   Nền tảng luyện thi Toán tư duy quốc tế
   Ưu tiên: Desktop + Tablet/iPad
   ═══════════════════════════════════════════════ */

/* ── CSS Variables ── */
:root {
  /* Colors — giáo dục, thân thiện trẻ em */
  --green: #41C7A4;
  --green-light: #E7FAF5;
  --blue: #3BB7E8;
  --blue-light: #E9F8FE;
  --orange: #FFB84D;
  --orange-light: #FFF4DA;
  --purple: #6558E8;
  --purple-light: #F0EEFF;
  --red: #FF7262;
  --red-light: #FFF0ED;
  --teal: #41C7A4;

  --primary: #6558E8;
  --primary-light: #F0EEFF;
  --primary-dark: #5144CE;
  --secondary: var(--orange);
  --accent: var(--blue);

  /* Neutrals */
  --gray-50: #FAFAFA;
  --gray-100: #F5F5F5;
  --gray-200: #EEEEEE;
  --gray-300: #E0E0E0;
  --gray-400: #BDBDBD;
  --gray-500: #9E9E9E;
  --gray-600: #757575;
  --gray-700: #616161;
  --gray-800: #424242;
  --gray-900: #18213A;

  --bg: #FFFFFF;
  --bg-soft: #F8F7FF;
  --bg-cream: #FFF9EF;
  --text: #18213A;
  --text-muted: #667085;
  --text-light: #B2BEC3;

  /* Typography */
  --font: ui-rounded, 'SF Pro Rounded', 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.5rem;
  --fs-hero: 3rem;
  --fw-normal: 400;
  --fw-semi: 600;
  --fw-bold: 700;
  --fw-extra: 800;

  /* Spacing */
  --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; --sp-20: 80px;

  /* Radius */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow: 0 2px 8px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 250ms;

  /* Layout */
  --max-w: 1200px;
  --header-h: 64px;
}

/* PDF embed sizing: use the browser PDF plugin directly instead of nesting its viewer in an iframe. */
.lesson-pdf-panel>embed{width:100%;height:min(78vh,980px);min-height:720px;display:block;border:0;background:#e9e9ee}
@media(max-width:900px){.lesson-pdf-panel>embed{height:72vh;min-height:620px}}
@media(max-width:620px){.lesson-pdf-panel>embed{height:68vh;min-height:520px}}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: 16px; }
@media (min-width: 1024px) { html { font-size: 18px; } }

body {
  font-family: var(--font);
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

body.modal-open { overflow: hidden; }

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--duration) var(--ease); }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { line-height: 1.25; font-weight: var(--fw-bold); color: var(--gray-900); }
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); }
input, select, textarea { font: inherit; }
mark { background: #FFF9C4; padding: 0 2px; border-radius: 2px; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
[hidden] { display:none !important; }
.skip-link {
  position: fixed; top: var(--sp-3); left: var(--sp-3); z-index: 1000;
  background: #fff; color: var(--text); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

/* ── Utilities ── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--sp-6); }
.center { text-align: center; }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: var(--fs-sm); }
.text-link { color: var(--primary); font-weight: var(--fw-semi); }
.text-link:hover { text-decoration: underline; }
.exam-save-state { align-self:center; color:#188D76; font-size:var(--fs-xs); font-weight:800; }.exam-save-state.is-error { color:#C74438; }
.document-viewer { position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:24px; }.document-viewer[hidden] { display:none; }.document-viewer__backdrop { position:absolute; inset:0; background:rgba(16,22,43,.72); backdrop-filter:blur(6px); }.document-viewer__dialog { position:relative; z-index:1; width:min(1120px,96vw); height:min(850px,92vh); display:grid; grid-template-rows:auto 1fr; overflow:hidden; border-radius:24px; background:#fff; box-shadow:0 30px 90px rgba(10,15,38,.4); }.document-viewer__dialog header { min-height:64px; padding:13px 20px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #E8E8F0; }.document-viewer__dialog header strong { font-size:var(--fs-md); }.document-viewer__dialog header button { min-width:48px; min-height:44px; padding:8px 14px; border-radius:12px; background:var(--primary-light); color:var(--primary); font-weight:800; }.document-viewer__dialog iframe { width:100%; height:100%; border:0; background:#F4F4F8; }
.section--compact-top { padding-top: var(--sp-5); }
.section--flush-top { padding-top: 0; }
.mt-2 { margin-top: var(--sp-2); }
.mt-5 { margin-top: var(--sp-5); }
.mt-8 { margin-top: var(--sp-8); }

/* Category themes — keeps dynamic colors compatible with a strict CSP. */
.theme-default,.theme-timo { --theme-color:#43A047;--theme-soft:#E8F5E9;--cover-color:var(--theme-color);--exam-color:var(--theme-color);--doc-color:var(--theme-color);--cat-color:var(--theme-color) }
.theme-hkimo { --theme-color:#1976D2;--theme-soft:#E3F2FD;--cover-color:var(--theme-color);--exam-color:var(--theme-color);--doc-color:var(--theme-color);--cat-color:var(--theme-color) }
.theme-bbb { --theme-color:#F57C00;--theme-soft:#FFF3E0;--cover-color:var(--theme-color);--exam-color:var(--theme-color);--doc-color:var(--theme-color);--cat-color:var(--theme-color) }
.theme-fmo { --theme-color:#7E57C2;--theme-soft:#F3E5F5;--cover-color:var(--theme-color);--exam-color:var(--theme-color);--doc-color:var(--theme-color);--cat-color:var(--theme-color) }
.theme-ikmc { --theme-color:#00897B;--theme-soft:#E0F2F1;--cover-color:var(--theme-color);--exam-color:var(--theme-color);--doc-color:var(--theme-color);--cat-color:var(--theme-color) }
.theme-sasmo { --theme-color:#C62828;--theme-soft:#FFEBEE;--cover-color:var(--theme-color);--exam-color:var(--theme-color);--doc-color:var(--theme-color);--cat-color:var(--theme-color) }
.theme-seamo { --theme-color:#0277BD;--theme-soft:#E1F5FE;--cover-color:var(--theme-color);--exam-color:var(--theme-color);--doc-color:var(--theme-color);--cat-color:var(--theme-color) }
.theme-asmo { --theme-color:#AD1457;--theme-soft:#FCE4EC;--cover-color:var(--theme-color);--exam-color:var(--theme-color);--doc-color:var(--theme-color);--cat-color:var(--theme-color) }
.theme-aimo { --theme-color:#4527A0;--theme-soft:#EDE7F6;--cover-color:var(--theme-color);--exam-color:var(--theme-color);--doc-color:var(--theme-color);--cat-color:var(--theme-color) }
.theme-toan-nen-tang { --theme-color:#2E7D32;--theme-soft:#E8F5E9;--cover-color:var(--theme-color);--exam-color:var(--theme-color);--doc-color:var(--theme-color);--cat-color:var(--theme-color) }
.theme-color { color:var(--theme-color)!important }
.theme-soft { background:var(--theme-soft)!important }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6); border-radius: var(--radius-sm); font-weight: var(--fw-bold);
  font-size: var(--fs-sm); white-space: nowrap; transition: all var(--duration) var(--ease);
  min-height: 44px; /* Touch target */
}
.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--outline { border: 2px solid var(--primary); color: var(--primary); background: transparent; }
.btn--outline:hover { background: var(--primary-light); }
.btn--ghost { color: var(--text); }
.btn--ghost:hover { background: var(--gray-100); }
.btn--light { background: #fff; color: var(--primary); }
.btn--light:hover { background: var(--gray-50); }
.btn--large { padding: var(--sp-4) var(--sp-8); font-size: var(--fs-base); min-height: 52px; }
.btn--full { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ── Reveal Animation ── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal--delay { transition-delay: 0.15s; }

/* ═══════════════════════════════════════════════
   TOPBAR
   ═══════════════════════════════════════════════ */
.topbar {
  background: var(--primary-dark);
  color: #fff;
  font-size: var(--fs-xs);
  padding: var(--sp-2) 0;
}
.topbar__inner {
  display: flex; justify-content: space-between; align-items: center;
}
.topbar a { color: #fff; font-weight: var(--fw-semi); }
.topbar a:hover { text-decoration: underline; }
@media (max-width: 768px) { .topbar { display: none; } }

/* ═══════════════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════════════ */
.navbar {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--sp-3); padding-bottom: var(--sp-3);
  min-height: var(--header-h);
}

.brand {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-lg); font-weight: var(--fw-extra);
  color: var(--primary);
}
.brand__icon { font-size: 1.6em; }
.brand strong { color: var(--secondary); }
.brand--light { color: #fff; }
.brand--light strong { color: #FFD54F; }

.nav-content { display: flex; align-items: center; gap: var(--sp-8); }
.nav-links { display: flex; gap: var(--sp-6); }
.nav-links a {
  font-weight: var(--fw-semi); color: var(--gray-700);
  padding: var(--sp-2) var(--sp-1); position: relative;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -2px; left: 0; right: 0;
  height: 3px; border-radius: 2px; background: var(--primary);
  transform: scaleX(0); transition: transform var(--duration) var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: var(--primary); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }

.nav-actions { display: flex; align-items: center; gap: var(--sp-3); }

.icon-btn {
  width: 40px; height: 40px; border-radius: var(--radius-sm); display: flex;
  align-items: center; justify-content: center; color: var(--gray-600);
}
.icon-btn:hover { background: var(--gray-100); color: var(--primary); }
.icon-btn svg { width: 20px; height: 20px; }

.auth-buttons { display: flex; gap: var(--sp-2); }

/* Mobile nav toggle */
.nav-toggle { display: none; width: 40px; height: 40px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: all var(--duration) var(--ease); }
.nav-toggle.is-open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .nav-content {
    display: none; position: fixed; top: var(--header-h); left: 0; right: 0;
    background: #fff; flex-direction: column; padding: var(--sp-6);
    box-shadow: var(--shadow-lg); z-index: 100; gap: var(--sp-4);
  }
  .nav-content.open { display: flex; }
  .nav-links { flex-direction: column; }
  .nav-links a { font-size: var(--fs-lg); padding: var(--sp-3) 0; }
  .nav-actions { flex-wrap: wrap; }
}

/* ── User Menu ── */
.user-menu { position: relative; }
.user-avatar-btn { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2); border-radius: var(--radius-sm); }
.user-avatar-btn:hover { background: var(--gray-100); }
.avatar-circle {
  width: 36px; height: 36px; border-radius: 50%; background: var(--primary);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
}
.user-name { font-weight: var(--fw-semi); font-size: var(--fs-sm); }
.user-dropdown {
  position: absolute; top: 100%; right: 0; margin-top: var(--sp-2);
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  min-width: 200px; padding: var(--sp-2); z-index: 100;
}
.user-dropdown a, .user-dropdown button {
  display: block; width: 100%; text-align: left; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm); font-size: var(--fs-sm);
}
.user-dropdown a:hover, .user-dropdown button:hover { background: var(--gray-100); }
.user-dropdown hr { border: none; border-top: 1px solid var(--gray-200); margin: var(--sp-2) 0; }

@media (max-width: 768px) { .user-name { display: none; } }

/* ── Search Panel ── */
.search-panel {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: #fff; box-shadow: var(--shadow-lg); padding: var(--sp-6) 0;
}
.search-panel[hidden] { display: none !important; }
.search-panel__inner { display: flex; align-items: center; gap: var(--sp-3); }
.search-panel__inner svg { width: 24px; height: 24px; flex-shrink: 0; color: var(--gray-400); }
.search-panel input {
  flex: 1; border: none; outline: none; font-size: var(--fs-lg);
  padding: var(--sp-3);
}
.search-close {
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
  background: var(--gray-100); font-size: var(--fs-sm); font-weight: var(--fw-semi);
}

/* Header sticky */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--gray-200); }

/* ═══════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════ */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--purple-light) 0%, #fff 50%, var(--orange-light) 100%);
  padding: var(--sp-16) 0 var(--sp-12);
}
.hero__shapes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.shape { position: absolute; font-size: 2rem; opacity: 0.08; animation: float 8s infinite ease-in-out; }
.shape--1 { top: 15%; left: 8%; color: var(--primary); }
.shape--2 { top: 25%; right: 12%; color: var(--secondary); animation-delay: -2s; }
.shape--3 { bottom: 20%; left: 15%; color: var(--accent); animation-delay: -4s; }
.shape--4 { bottom: 30%; right: 20%; color: var(--purple); animation-delay: -6s; }
@keyframes float { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-15px) rotate(5deg); } }

.hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); align-items: center; }
.hero__badge {
  display: inline-block; background: var(--primary-light); color: var(--primary-dark);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-full);
  font-size: var(--fs-sm); font-weight: var(--fw-bold); margin-bottom: var(--sp-4);
}
.hero__content h1 { font-size: var(--fs-hero); line-height: 1.15; margin-bottom: var(--sp-4); }
.hero__content h1 em { font-style: normal; color: var(--primary); }
.hero__desc { font-size: var(--fs-md); color: var(--text-muted); max-width: 520px; margin-bottom: var(--sp-8); }
.hero__actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-8); }
.hero__stats {
  display: flex; gap: var(--sp-8);
}
.hero__stats div { text-align: center; }
.hero__stats strong { display: block; font-size: var(--fs-xl); color: var(--primary-dark); }
.hero__stats span { font-size: var(--fs-sm); color: var(--text-muted); }

/* Hero card */
.hero__visual { position: relative; }
.hero-card {
  background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  overflow: hidden; max-width: 380px; margin: 0 auto;
}
.hero-card__top {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-4) var(--sp-5);
}
.hero-card__badge { background: var(--green-light); color: var(--primary); padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.hero-card__cat { font-size: var(--fs-sm); color: var(--text-muted); }
.hero-card__illustration {
  background: linear-gradient(135deg, var(--green-light), var(--blue-light));
  padding: var(--sp-10) var(--sp-5); text-align: center;
}
.math-eq { font-size: var(--fs-3xl); font-weight: var(--fw-extra); color: var(--primary-dark); }
.blink { animation: blink 1s infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
.math-shapes { margin-top: var(--sp-3); font-size: var(--fs-xl); display: flex; justify-content: center; gap: var(--sp-6); }
.math-shapes span { opacity: 0.3; }
.hero-card__info { padding: var(--sp-4) var(--sp-5); }
.hero-card__info strong { font-size: var(--fs-base); display: block; margin-bottom: var(--sp-2); }
.hero-card__info small { font-size: var(--fs-xs); color: var(--text-muted); }

.progress-bar { height: 8px; background: var(--gray-200); border-radius: 4px; overflow: hidden; }
.progress-bar__fill--68 { width: 68%; }
.progress-bar__fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--teal)); border-radius: 4px; transition: width 1s var(--ease); }

.hero-float {
  position: absolute; background: #fff; padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius); box-shadow: var(--shadow-md); font-size: var(--fs-sm);
  white-space: nowrap; animation: floatBadge 3s infinite ease-in-out;
}
.hero-float--score { top: 10%; right: -10px; }
.hero-float--streak { bottom: 15%; left: -10px; animation-delay: -1.5s; }
@keyframes floatBadge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@media (max-width: 768px) {
  .hero { padding: var(--sp-10) 0 var(--sp-8); }
  .hero__grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .hero__content h1 { font-size: var(--fs-2xl); }
  .hero__visual { display: none; }
  .hero__stats { gap: var(--sp-4); }
}

/* ═══════════════════════════════════════════════
   SECTIONS
   ═══════════════════════════════════════════════ */
.section { padding: var(--sp-16) 0; }
.section--soft { background: var(--bg-soft); }
.section--cream { background: var(--bg-cream); }

.section-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: var(--sp-8); flex-wrap: wrap; gap: var(--sp-4); }
.section-header--center { flex-direction: column; align-items: center; text-align: center; }
.section-tag { display: inline-block; font-size: var(--fs-xs); font-weight: var(--fw-extra); text-transform: uppercase; letter-spacing: 1px; color: var(--primary); margin-bottom: var(--sp-2); }
.section-header p { max-width: 540px; }

/* ── Category Chips ── */
.category-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sp-4);
}
.category-chip {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-4); border-radius: var(--radius);
  background: #fff; border: 2px solid var(--gray-200);
  transition: all var(--duration) var(--ease); text-align: center;
}
.category-chip:hover {
  border-color: var(--cat-color, var(--primary));
  transform: translateY(-3px); box-shadow: var(--shadow-md);
}
.category-chip__logo { font-size: 2rem; }
.category-chip__name { font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.category-chip__count { font-size: var(--fs-xs); color: var(--text-muted); }

/* ── Course Card ── */
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-6); }
.course-grid--compact { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.course-card {
  background: #fff; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow); transition: all var(--duration) var(--ease);
}
.course-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.course-card__link { display: block; color: inherit; }

.course-card__cover {
  height: 140px; background: linear-gradient(135deg, var(--cover-color, var(--primary)), color-mix(in srgb, var(--cover-color, var(--primary)) 70%, #000));
  position: relative; display: flex; align-items: flex-end; justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
}
.course-card__cover--sm { height: 80px; }
.course-card__cat-badge {
  background: rgba(255,255,255,0.2); color: #fff; padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: var(--fw-bold); backdrop-filter: blur(4px);
}
.course-card__grade {
  color: rgba(255,255,255,0.9); font-size: var(--fs-sm); font-weight: var(--fw-bold);
}

.course-card__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.course-card__meta { display: flex; justify-content: space-between; font-size: var(--fs-xs); font-weight: var(--fw-bold); margin-bottom: var(--sp-2); }
.course-card__body h3 { font-size: var(--fs-base); margin-bottom: var(--sp-2); }
.course-card__body h3 a:hover { color: var(--primary); }
.course-card__body p { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-3); line-height: 1.5; }
.course-card__footer { display: flex; gap: var(--sp-4); font-size: var(--fs-xs); color: var(--text-muted); }
.course-card--compact .course-card__body { padding: var(--sp-3) var(--sp-4); }

/* ── Exam Card ── */
.exam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-6); }
.exam-card {
  background: #fff; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow); display: flex; flex-direction: column;
  transition: all var(--duration) var(--ease);
}
.exam-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.exam-card__header {
  padding: var(--sp-5); display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, var(--theme-soft, var(--primary-light)), var(--bg-soft));
}
.exam-card__icon { font-size: 2rem; }
.exam-card__body { padding: var(--sp-4) var(--sp-5); flex: 1; }
.exam-card__body h3 { margin-bottom: var(--sp-2); }
.exam-card__body h3 a:hover { color: var(--primary); }
.exam-card__body p { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-3); }
.exam-card__info { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: var(--sp-3); }
.exam-card__stats { font-size: var(--fs-xs); color: var(--text-muted); }
.exam-card > .btn { margin: 0 var(--sp-5) var(--sp-5); }

.exam-status {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-full);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
}
.status--active { background: var(--green-light); color: var(--primary-dark); }
.status--upcoming { background: var(--blue-light); color: var(--blue); }
.status--closed { background: var(--gray-100); color: var(--gray-600); }

/* ── Exam Row (listing) ── */
.exam-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.exam-row {
  display: flex; gap: var(--sp-5); padding: var(--sp-5); background: #fff;
  border-radius: var(--radius-lg); box-shadow: var(--shadow); align-items: flex-start;
  transition: all var(--duration) var(--ease);
}
.exam-row:hover { box-shadow: var(--shadow-md); transform: translateX(4px); }
.exam-row--compact { padding: var(--sp-3) var(--sp-4); }
.exam-row__icon {
  width: 56px; height: 56px; border-radius: var(--radius); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
  background: linear-gradient(135deg, var(--theme-soft, var(--primary-light)), var(--bg-soft));
}
.exam-row__main { flex: 1; }
.exam-row__top { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.exam-row__main h3 { margin-bottom: var(--sp-2); }
.exam-row__main h3 a:hover { color: var(--primary); }
.exam-row__main > p { font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.exam-row__meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--text-muted); }
.exam-row__action { flex-shrink: 0; align-self: center; }

@media (max-width: 768px) {
  .exam-row { flex-direction: column; }
  .exam-row__action { align-self: stretch; }
  .exam-row__action .btn { width: 100%; }
}

/* ── Document Card ── */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-6); }
.doc-card {
  background: #fff; border-radius: var(--radius-lg); padding: var(--sp-5);
  box-shadow: var(--shadow); transition: all var(--duration) var(--ease);
}
.doc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.doc-card__type {
  display: inline-block; background: var(--theme-soft, var(--primary-light)); color: var(--theme-color, var(--primary));
  padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-sm);
  font-size: var(--fs-xs); font-weight: var(--fw-extra); margin-bottom: var(--sp-3);
}
.doc-card__meta { display: flex; gap: var(--sp-2); font-size: var(--fs-xs); margin-bottom: var(--sp-2); }
.doc-card h3 { font-size: var(--fs-base); margin-bottom: var(--sp-2); }
.doc-card p { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-3); }
.doc-card__footer { display: flex; gap: var(--sp-4); font-size: var(--fs-xs); color: var(--text-muted); }

/* ── Document Row (listing) ── */
.doc-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.doc-row {
  display: flex; gap: var(--sp-5); padding: var(--sp-5); background: #fff;
  border-radius: var(--radius-lg); box-shadow: var(--shadow); align-items: flex-start;
  transition: all var(--duration) var(--ease);
}
.doc-row:hover { box-shadow: var(--shadow-md); }
.doc-row--compact { padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); }
.doc-row__type {
  width: 72px; height: 88px; border-radius: var(--radius-sm); flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1);
  background: linear-gradient(135deg, var(--theme-soft, var(--primary-light)), #fff);
  border: 2px solid var(--theme-color, var(--primary));
}
.doc-row__ext { font-weight: var(--fw-extra); font-size: var(--fs-sm); color: var(--doc-color, var(--primary)); }
.doc-row__pages { font-size: var(--fs-xs); color: var(--text-muted); }
.doc-row__main { flex: 1; }
.doc-row__meta { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.doc-badge { font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.doc-row__main h3 { margin-bottom: var(--sp-2); }
.doc-row__main p { font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.doc-row__stats { display: flex; gap: var(--sp-4); font-size: var(--fs-xs); color: var(--text-muted); }
.doc-row__actions { display: flex; flex-direction: column; gap: var(--sp-2); flex-shrink: 0; align-self: center; }

@media (max-width: 768px) {
  .doc-row { flex-direction: column; }
  .doc-row__type { width: 100%; height: 48px; flex-direction: row; gap: var(--sp-2); }
  .doc-row__actions { flex-direction: row; width: 100%; }
  .doc-row__actions .btn { flex: 1; }
}

/* ═══════════════════════════════════════════════
   PAGE HEADERS
   ═══════════════════════════════════════════════ */
.page-header {
  background: var(--bg-soft); padding: var(--sp-10) 0 var(--sp-6);
  border-bottom: 1px solid var(--gray-200);
}
.page-header h1 { margin-bottom: var(--sp-2); }
.page-header--course, .page-header--exam-detail {
  background: linear-gradient(135deg, var(--cover-color, var(--primary)), color-mix(in srgb, var(--cover-color, var(--primary)) 80%, #000));
  color: #fff; padding: var(--sp-6) 0 var(--sp-4);
}
.page-header--exams { background: linear-gradient(135deg, var(--blue-light), var(--purple-light)); }
.page-header--docs { background: linear-gradient(135deg, var(--orange-light), var(--green-light)); }

.breadcrumb { display: flex; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--primary); text-decoration: underline; }
.breadcrumb--light, .breadcrumb--light a { color: rgba(255,255,255,0.8); }
.breadcrumb--light a:hover { color: #fff; }

/* ── Filters ── */
.filter-bar { margin-bottom: var(--sp-6); }
.filter-group { margin-bottom: var(--sp-3); }
.filter-label { font-size: var(--fs-sm); font-weight: var(--fw-bold); margin-bottom: var(--sp-2); display: block; color: var(--gray-600); }
.filter-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.filter-btn {
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-full);
  font-size: var(--fs-sm); font-weight: var(--fw-semi); background: var(--gray-100);
  color: var(--gray-700); border: 2px solid transparent;
  transition: all var(--duration) var(--ease);
  min-height: 44px; white-space: nowrap;
}
.filter-btn:hover { background: var(--primary-light); color: var(--primary); }
.filter-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.results-info { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-4); }

/* ── Course Section (grouped) ── */
.course-section { margin-bottom: var(--sp-10); }
.course-section__header {
  display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4); border-bottom: 2px solid var(--gray-100);
}
.course-section__logo {
  width: 48px; height: 48px; border-radius: var(--radius); display: flex;
  align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0;
}
.course-section__header h3 { margin-bottom: 0; }
.course-section__count {
  margin-left: auto; font-size: var(--fs-sm); color: var(--text-muted);
  background: var(--gray-100); padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-full);
}

/* ═══════════════════════════════════════════════
   COURSE DETAIL
   ═══════════════════════════════════════════════ */
.course-detail__layout { display: grid; grid-template-columns: 1fr 360px; gap: var(--sp-8); margin-top: calc(-1 * var(--sp-10)); }
.course-detail__hero {
  background: #fff; border-radius: var(--radius-xl); padding: var(--sp-8);
  box-shadow: var(--shadow); margin-bottom: var(--sp-6);
}
.course-detail__cat { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.category-badge { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.grade-badge { background: var(--gray-100); padding: var(--sp-1) var(--sp-3); border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: var(--fw-semi); }
.course-detail__hero h1 { font-size: var(--fs-2xl); margin-bottom: var(--sp-3); }
.course-detail__desc { color: var(--text-muted); margin-bottom: var(--sp-6); }
.course-detail__stats { display: flex; flex-wrap: wrap; gap: var(--sp-6); }
.course-detail__stats div { display: flex; align-items: center; gap: var(--sp-2); }
.stat-icon { font-size: 1.2em; }

/* Chapters */
.course-chapters { margin-bottom: var(--sp-6); }
.course-chapters h2 { margin-bottom: var(--sp-5); }
.chapter-block { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-bottom: var(--sp-3); overflow: hidden; }
.chapter-block__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5); cursor: pointer;
  transition: background var(--duration) var(--ease);
  width: 100%; text-align: left;
}
.chapter-block__header:hover { background: var(--gray-50); }
.chapter-block__title { display: flex; align-items: center; gap: var(--sp-3); }
.chapter-num {
  width: 32px; height: 32px; border-radius: 50%; background: var(--primary-light);
  color: var(--primary); display: flex; align-items: center; justify-content: center;
  font-weight: var(--fw-extra); font-size: var(--fs-sm); flex-shrink: 0;
}
.chapter-block__title h3 { font-size: var(--fs-base); margin-bottom: 0; }
.chevron { transition: transform var(--duration) var(--ease); color: var(--gray-400); }
.chapter-block__header[aria-expanded="false"] .chevron { transform: rotate(-90deg); }

.chapter-block__lessons { padding: 0 var(--sp-5) var(--sp-4); }
.lesson-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm);
  transition: background var(--duration) var(--ease);
}
.lesson-item:hover { background: var(--gray-50); }
.lesson-item__num { font-size: var(--fs-xs); color: var(--text-muted); font-weight: var(--fw-bold); width: 28px; }
.lesson-item__info { flex: 1; }
.lesson-item__title { font-weight: var(--fw-semi); font-size: var(--fs-sm); }
.lesson-item__duration { font-size: var(--fs-xs); color: var(--text-muted); margin-left: var(--sp-3); }
.lesson-item__status { font-size: 1.1em; }

/* Sidebar */
.course-sidebar-card { background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-md); overflow: hidden; position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
.course-sidebar-card__cover {
  height: 100px;
  background: linear-gradient(135deg, var(--cover-color, var(--primary)), color-mix(in srgb, var(--cover-color, var(--primary)) 70%, #000));
  display: flex; align-items: center; justify-content: center;
}
.course-sidebar-card__icon { font-size: 2.5rem; }
.course-sidebar-card__body { padding: var(--sp-5); }
.price-tag { font-size: var(--fs-xl); font-weight: var(--fw-extra); color: var(--primary); margin-bottom: var(--sp-4); text-align: center; }
.course-sidebar-card__features { margin-top: var(--sp-4); }
.course-sidebar-card__features li { padding: var(--sp-2) 0; font-size: var(--fs-sm); border-bottom: 1px solid var(--gray-100); }
.course-sidebar-card__features li:last-child { border-bottom: none; }

@media (max-width: 1024px) {
  .course-detail__layout { grid-template-columns: 1fr; }
  .course-detail__sidebar { order: -1; }
  .course-sidebar-card { position: static; }
}

/* ═══════════════════════════════════════════════
   EXAM DETAIL
   ═══════════════════════════════════════════════ */
.exam-detail__layout { display: grid; grid-template-columns: 1fr 340px; gap: var(--sp-8); margin-top: calc(-1 * var(--sp-8)); }
.exam-detail__hero {
  background: #fff; border-radius: var(--radius-xl); padding: var(--sp-8);
  box-shadow: var(--shadow); margin-bottom: var(--sp-6);
}
.exam-detail__cat { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.exam-detail__hero h1 { font-size: var(--fs-2xl); margin-bottom: var(--sp-3); }
.exam-detail__hero p { color: var(--text-muted); }

/* Tabs */
.exam-tabs { background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); overflow: hidden; }
.tab-nav { display: flex; border-bottom: 2px solid var(--gray-100); }
.tab-btn {
  padding: var(--sp-4) var(--sp-6); font-weight: var(--fw-bold); color: var(--gray-500);
  position: relative; font-size: var(--fs-sm); min-height: 48px;
}
.tab-btn::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 3px; background: var(--primary); border-radius: 2px 2px 0 0; transform: scaleX(0); transition: transform var(--duration) var(--ease); }
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--primary); }
.tab-btn.active::after { transform: scaleX(1); }
.tab-content { display: none; padding: var(--sp-6); }
.tab-content.active { display: block; }

/* Info Grid */
.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-4); }
.info-item {
  display: flex; gap: var(--sp-3); padding: var(--sp-4); background: var(--gray-50);
  border-radius: var(--radius-sm);
}
.info-item__icon { font-size: 1.5em; flex-shrink: 0; }
.info-item strong { display: block; font-size: var(--fs-sm); margin-bottom: var(--sp-1); }
.info-item span { font-size: var(--fs-sm); color: var(--text-muted); }

/* Rules */
.rules-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.rule { display: flex; gap: var(--sp-3); align-items: flex-start; }
.rule__num {
  width: 32px; height: 32px; border-radius: 50%; background: var(--primary);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: var(--fw-bold); font-size: var(--fs-sm); flex-shrink: 0;
}
.rule div { font-size: var(--fs-sm); padding-top: var(--sp-1); }

/* Leaderboard */
.leaderboard h3 { margin-bottom: var(--sp-4); }
.leaderboard-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.leaderboard-table th { text-align: left; padding: var(--sp-3) var(--sp-4); background: var(--gray-50); font-weight: var(--fw-bold); border-bottom: 2px solid var(--gray-200); }
.leaderboard-table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--gray-100); }
.leaderboard-table tr:hover { background: var(--gray-50); }
.leaderboard-table .top-1 { background: #FFF8E1; }
.leaderboard-table .top-2 { background: #F5F5F5; }
.leaderboard-table .top-3 { background: #FFF3E0; }
.rank-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; }
.lb-name { font-weight: var(--fw-semi); }

/* Exam sidebar */
.exam-sidebar-card { background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-md); overflow: hidden; position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
.exam-sidebar-card__top {
  padding: var(--sp-5); display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, var(--theme-soft, var(--primary-light)), #fff);
}
.exam-sidebar-card__icon { font-size: 2rem; }
.exam-sidebar-card__body { padding: var(--sp-5); }
.exam-sidebar-card__info { margin-top: var(--sp-4); }
.exam-sidebar-card__info > div { display: flex; justify-content: space-between; padding: var(--sp-2) 0; font-size: var(--fs-sm); border-bottom: 1px solid var(--gray-100); }
.exam-sidebar-card__info > div:last-child { border-bottom: none; }

@media (max-width: 1024px) {
  .exam-detail__layout { grid-template-columns: 1fr; }
  .exam-detail__sidebar { order: -1; }
  .exam-sidebar-card { position: static; }
}

/* ═══════════════════════════════════════════════
   SEARCH
   ═══════════════════════════════════════════════ */
.search-inline { margin-bottom: var(--sp-6); }
.search-inline form {
  display: flex; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow);
  overflow: hidden; padding: var(--sp-2);
}
.search-inline svg { width: 24px; height: 24px; flex-shrink: 0; padding-left: var(--sp-3); color: var(--gray-400); align-self: center; }
.search-inline input { flex: 1; border: none; outline: none; padding: var(--sp-3); font-size: var(--fs-base); }
.search-group { margin-bottom: var(--sp-8); }
.search-group__title { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-lg); margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 2px solid var(--gray-100); }

/* ═══════════════════════════════════════════════
   TRUST STRIP
   ═══════════════════════════════════════════════ */
.trust-strip { background: var(--primary-dark); color: #fff; padding: var(--sp-8) 0; }
.trust-grid { display: flex; justify-content: space-around; text-align: center; flex-wrap: wrap; gap: var(--sp-6); }
.trust-grid strong { display: block; font-size: var(--fs-2xl); }
.trust-grid span { font-size: var(--fs-sm); opacity: 0.8; }

/* ═══════════════════════════════════════════════
   CTA CARD
   ═══════════════════════════════════════════════ */
.cta-card {
  background: linear-gradient(135deg, var(--primary), var(--teal));
  border-radius: var(--radius-xl); padding: var(--sp-12) var(--sp-10);
  color: #fff; display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: var(--sp-6);
}
.cta-card__tag { font-size: var(--fs-xs); font-weight: var(--fw-extra); letter-spacing: 1px; opacity: 0.8; text-transform: uppercase; }
.cta-card h2 { font-size: var(--fs-2xl); color: #fff; margin-top: var(--sp-2); }
.cta-card p { font-size: var(--fs-sm); opacity: 0.8; margin-top: var(--sp-2); }

/* ═══════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════ */
.modal {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: var(--sp-6);
}
.modal[hidden] { display: none !important; }
.modal__backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,0.45); backdrop-filter: blur(4px);
}
.modal__dialog {
  position: relative; background: #fff; border-radius: var(--radius-xl);
  padding: var(--sp-8); max-width: 440px; width: 100%; box-shadow: var(--shadow-lg);
  animation: modalIn 0.3s var(--ease);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(20px) scale(0.97); } }
.modal__close {
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  width: 36px; height: 36px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 1.5rem; color: var(--gray-400);
}
.modal__close:hover { background: var(--gray-100); color: var(--text); }
.modal__icon { font-size: 2.5rem; text-align: center; margin-bottom: var(--sp-2); }
.modal__dialog h2 { text-align: center; margin-bottom: var(--sp-1); }
.modal__dialog > p { text-align: center; color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-6); }
.modal__footer { text-align: center; margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--text-muted); }
.modal__footer a { color: var(--primary); font-weight: var(--fw-bold); }
.form-message { margin:10px 0 2px; padding:11px 13px; border-radius:11px; background:#FFF0EE; color:#B83A35; font-size:.74rem; font-weight:700; line-height:1.45; }
.form-message[hidden] { display:none; }
.form-message:not([hidden]) + .btn { margin-top:12px; }
.modal button:disabled { cursor:wait; opacity:.68; }
.auth-page { min-height:62vh; display:grid; place-items:center; padding-inline:20px; background:radial-gradient(circle at 18% 20%,rgba(255,184,77,.12),transparent 24%),radial-gradient(circle at 85% 25%,rgba(101,88,232,.13),transparent 27%),#F9F8FE; }
.auth-page__card { width:min(560px,100%); padding:48px; border:1px solid #E8E4F4; border-radius:30px; background:#fff; box-shadow:0 24px 70px rgba(47,39,103,.12); }
.auth-page__card > h1,.auth-page__card > p { text-align:center; }
.auth-page__card > p { margin:10px auto 26px; color:var(--text-muted); }
.auth-page__icon { width:76px; height:76px; display:grid; place-items:center; margin:0 auto 18px; border-radius:24px; background:#F0EDFF; font-size:2rem; }
.auth-page__card .eyebrow { margin-bottom:6px; color:var(--primary); font-size:.72rem; font-weight:900; letter-spacing:.12em; }
.auth-page__card form { display:grid; gap:10px; margin-top:24px; }
.auth-page__card input { min-height:54px; border-radius:14px; }
.auth-success { text-align:center; }
.auth-success > span { width:68px; height:68px; display:grid; place-items:center; margin:0 auto 16px; border-radius:50%; background:#DDF7EF; color:#168E72; font-size:1.7rem; font-weight:900; }
.auth-success p { margin:8px 0 24px; color:var(--text-muted); }

/* Form elements */
label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semi); margin-bottom: var(--sp-1); color: var(--gray-700); }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], select {
  width: 100%; padding: var(--sp-3) var(--sp-4); border: 2px solid var(--gray-200);
  border-radius: var(--radius-sm); font-size: var(--fs-base); margin-bottom: var(--sp-4);
  transition: border-color var(--duration) var(--ease); background: #fff;
  min-height: 48px;
}
input:focus, select:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px var(--primary-light); }
select:not([multiple]) {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 48px;
  background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='30' height='30' rx='9' fill='%23F0EDFF'/%3E%3Cpath d='m10.5 12.5 4.5 4.5 4.5-4.5' fill='none' stroke='%236554E8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 30px 30px;
}
select:not([multiple]):disabled { cursor:not-allowed; opacity:.65; }

.password-field { position: relative; }
.password-field input { padding-right: 48px; }
.toggle-pw { position: absolute; right: 4px; top: 4px; width: 40px; height: 40px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; }
.toggle-pw:hover { background: var(--gray-100); }

.form-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-4); font-size: var(--fs-sm); }
.checkbox { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; }
.checkbox input { width: 18px; height: 18px; accent-color: var(--primary); }
.form-row a { color: var(--primary); }
.form-row a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════ */
.empty-state { text-align: center; padding: var(--sp-12) var(--sp-6); }
.empty-state__icon { font-size: 3rem; margin-bottom: var(--sp-4); }
.empty-state h3 { margin-bottom: var(--sp-2); }
.empty-state p { margin-bottom: var(--sp-4); }

/* ── 404 ── */
.page-404 { padding: var(--sp-20) 0; }
.error-icon { font-size: 4rem; margin-bottom: var(--sp-4); }
.page-404 h1 { margin-bottom: var(--sp-2); }
.page-404 p { margin-bottom: var(--sp-6); }

/* ═══════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════ */
.toast {
  position: fixed; bottom: var(--sp-6); left: 50%; transform: translateX(-50%) translateY(100px);
  background: var(--gray-900); color: #fff; padding: var(--sp-4) var(--sp-6);
  border-radius: var(--radius); font-size: var(--fs-sm); font-weight: var(--fw-semi);
  box-shadow: var(--shadow-lg); z-index: 400;
  opacity: 0; transition: all 0.3s var(--ease);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ═══════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════ */
.site-footer { background: var(--gray-900); color: #fff; padding: var(--sp-12) 0 0; }
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
  gap: var(--sp-8); padding-bottom: var(--sp-8);
}
.footer-brand p { margin-top: var(--sp-3); color: var(--gray-400); font-size: var(--fs-sm); }
.socials { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.socials a {
  width: 36px; height: 36px; border-radius: 50%; background: var(--gray-800);
  display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm);
}
.socials a:hover { background: var(--primary); }
.footer-grid h3 { font-size: var(--fs-sm); font-weight: var(--fw-bold); margin-bottom: var(--sp-4); color: var(--gray-300); text-transform: uppercase; letter-spacing: 0.5px; }
.footer-grid a { display: block; color: var(--gray-400); font-size: var(--fs-sm); padding: var(--sp-1) 0; }
.footer-grid a:hover { color: #fff; }
.footer-contact p { color: var(--gray-400); font-size: var(--fs-sm); margin-top: var(--sp-2); }

.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-4) 0; border-top: 1px solid var(--gray-800);
  font-size: var(--fs-xs); color: var(--gray-500); flex-wrap: wrap; gap: var(--sp-2);
}
.footer-bottom div { display: flex; gap: var(--sp-4); }

@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════════════
   TABLET / MOBILE OVERRIDES
   ═══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero__content h1 { font-size: var(--fs-2xl); }
  .category-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  h1 { font-size: var(--fs-2xl); }
  h2 { font-size: var(--fs-xl); }
}

@media (max-width: 768px) {
  .section { padding: var(--sp-10) 0; }
  .course-grid { grid-template-columns: 1fr; }
  .exam-grid { grid-template-columns: 1fr; }
  .doc-grid { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .cta-card { padding: var(--sp-8) var(--sp-6); flex-direction: column; text-align: center; }
  .trust-grid { flex-direction: column; }
  .filter-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: var(--sp-2); -webkit-overflow-scrolling: touch; }
}

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

/* ═══════════════════════════════════════════════
   WONDER LEARNING WORLD — Homepage V2
   ═══════════════════════════════════════════════ */
.topbar { background: #18213A; padding: 7px 0; }
.topbar__inner { letter-spacing: .1px; }
.site-header { background: rgba(255,255,255,.92); border-bottom-color: rgba(101,88,232,.1); }
.navbar { min-height: 76px; }
.brand { color: #18213A; letter-spacing: -.5px; gap: 10px; }
.brand strong { color: var(--primary); }
.brand__mark { width: 42px; height: 42px; display: block; flex: 0 0 auto; }
.brand__mark svg { width: 100%; height: 100%; }
.brand__mark-bg { fill: var(--primary); }
.brand__mark-pencil { fill: #FFB84D; }
.brand__mark-face { fill: none; stroke: #fff; stroke-width: 2.3; stroke-linecap: round; }
.brand--light .brand__mark-bg { fill: #8E82FF; }
.brand--light .brand__text { color: #fff; }
.brand--light strong { color: #FFCA69; }
.nav-links a { font-size: .86rem; color: #515B73; }
.nav-links a::after { height: 4px; bottom: -7px; border-radius: 6px; }
.auth-buttons .btn { border-radius: 13px; }
.auth-buttons .btn--primary { box-shadow: 0 8px 18px rgba(101,88,232,.22); }

.wonder-hero {
  position: relative; overflow: hidden; min-height: 670px;
  background: radial-gradient(circle at 82% 20%, rgba(65,199,164,.15), transparent 26%),
              radial-gradient(circle at 12% 3%, rgba(101,88,232,.17), transparent 28%),
              linear-gradient(130deg, #F7F4FF 0%, #FFF9F0 54%, #F0FCF8 100%);
}
.wonder-grid { position: absolute; inset: 0; pointer-events: none; opacity: .28; }
.wonder-grid--one { background-image: radial-gradient(rgba(101,88,232,.23) 1px, transparent 1px); background-size: 30px 30px; mask-image: linear-gradient(90deg,#000,transparent 48%); }
.wonder-hero__layout { min-height: 645px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 58px; align-items: center; padding-top: 55px; padding-bottom: 85px; }
.wonder-hero__copy { position: relative; z-index: 3; }
.wonder-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 999px; background: rgba(255,255,255,.82); border: 1px solid rgba(101,88,232,.13); color: #5549CD; font-size: .72rem; font-weight: 800; box-shadow: 0 8px 30px rgba(66,54,135,.08); }
.wonder-eyebrow span { color: #FF9B55; }
.wonder-hero h1 { font-size: clamp(2.8rem,5vw,4.6rem); line-height: 1.06; letter-spacing: -3.5px; margin: 22px 0 20px; max-width: 650px; }
.wonder-hero h1 em { display: inline; font-style: normal; color: var(--primary); position: relative; white-space: nowrap; }
.wonder-hero h1 em::after { content: ''; position: absolute; height: 9px; left: 2px; right: 2px; bottom: -8px; background: linear-gradient(90deg,#FFB84D,#FF7262); border-radius: 60% 40% 55% 30%; transform: rotate(-1deg); opacity: .7; }
.wonder-hero__copy > p { color: #59647B; font-size: 1rem; max-width: 580px; margin-bottom: 30px; }
.wonder-hero__actions { display: flex; align-items: center; gap: 20px; }
.btn--wonder { border-radius: 16px; padding-inline: 28px; box-shadow: 0 13px 30px rgba(101,88,232,.28); }
.btn--wonder:hover { transform: translateY(-3px); }
.wonder-play { display: inline-flex; align-items: center; gap: 10px; font-size: .86rem; font-weight: 800; color: #29334C; }
.wonder-play > span { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--primary); box-shadow: 0 8px 24px rgba(37,34,77,.13); }
.wonder-play svg { width: 20px; fill: currentColor; }
.wonder-proof { margin-top: 34px; display: flex; align-items: center; gap: 14px; color: #748096; font-size: .66rem; }
.wonder-proof > div:nth-child(2) { display: flex; flex-direction: column; padding-right: 16px; border-right: 1px solid rgba(24,33,58,.12); }
.wonder-proof strong { color: #18213A; font-size: .75rem; }
.wonder-avatars { display: flex; padding-left: 8px; }
.wonder-avatars span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #FFB84D; color: #fff; font-weight: 900; border: 2px solid #fff; margin-left: -8px; }
.wonder-avatars span:nth-child(2) { background: #3BB7E8; }.wonder-avatars span:nth-child(3) { background: #41C7A4; }.wonder-avatars span:nth-child(4) { background: #6558E8; font-size: .55rem; }
.wonder-rating { display: flex; flex-direction: column; }.wonder-rating b { color: #18213A; font-size: .78rem; }.wonder-rating span { color: #F7A928; letter-spacing: 1px; }
.wonder-hero__art { position: relative; min-width: 0; z-index: 2; }
.wonder-picture-frame { aspect-ratio:3/2; overflow: hidden; border-radius: 38px 38px 80px 38px; border: 8px solid rgba(255,255,255,.82); box-shadow: 0 35px 80px rgba(63,51,140,.19), 0 3px 8px rgba(40,31,88,.06); transform: rotate(1.2deg); background: #F5F0FF; }
.wonder-picture-frame img { width: 100%; height:100%; object-fit: cover; }
.wonder-float { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 11px 15px; background: rgba(255,255,255,.94); border: 1px solid rgba(255,255,255,.9); border-radius: 17px; box-shadow: 0 15px 40px rgba(46,38,103,.17); backdrop-filter: blur(10px); }
.wonder-float div { display: flex; flex-direction: column; }.wonder-float strong { font-size: .72rem; }.wonder-float small { color: #7A8497; font-size: .56rem; }
.wonder-float__icon { width: 35px; height: 35px; border-radius: 11px; display: grid; place-items: center; font-weight: 900; }.wonder-float__icon--orange { color: #E6762E; background: #FFF0E5; }.wonder-float__icon--mint { color: #188D76; background: #E4F9F3; }
.wonder-float--streak { left: -28px; top: 25%; }.wonder-float--score { right: -22px; top: 12%; }
.wonder-progress-card { position: absolute; z-index: 4; right: 6%; bottom: -30px; width: 240px; padding: 14px 16px; background: rgba(255,255,255,.95); border-radius: 17px; box-shadow: 0 17px 42px rgba(46,38,103,.16); }
.wonder-progress-card > div:first-child { display: flex; flex-direction: column; }.wonder-progress-card span { color: #9299AA; font-size: .55rem; }.wonder-progress-card strong { font-size: .7rem; }.wonder-progress-card > b { position: absolute; right: 16px; top: 18px; font-size: .65rem; color: var(--primary); }
.wonder-progress { height: 6px; background: #EBEAF4; border-radius: 10px; margin-top: 9px; overflow: hidden; }.wonder-progress i { display: block; width: 68%; height: 100%; background: linear-gradient(90deg,#6558E8,#41C7A4); border-radius: inherit; }
.wonder-hero__curve { position: absolute; left: -5%; right: -5%; bottom: -50px; height: 80px; background: #fff; border-radius: 50% 50% 0 0/100% 100% 0 0; }

.wonder-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 40px; }
.wonder-heading--center { display: block; text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
.wonder-heading h2 { font-size: clamp(1.9rem,3vw,2.6rem); letter-spacing: -1.4px; margin-top: 8px; }
.wonder-heading p { color: #6A7489; margin: 10px auto 0; max-width: 620px; }
.wonder-kicker { font-size: .66rem; letter-spacing: 1.7px; font-weight: 900; color: var(--primary); }.wonder-kicker--light { color: #C9C3FF; }
.wonder-text-link { color: var(--primary); font-size: .78rem; font-weight: 900; white-space: nowrap; }.wonder-text-link span { margin-left: 7px; }
.wonder-quick-start { padding-top:90px; background:#fff; }
.wonder-quick-start .wonder-kicker { font-size:var(--fs-xs); letter-spacing:2px; }
.wonder-quick-start .wonder-heading p { font-size:var(--fs-base); line-height:1.65; max-width:720px; }
.quick-start-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.quick-start-card { position:relative; min-height:194px; padding:28px 24px; display:grid; grid-template-columns:64px 1fr 44px; align-items:center; gap:18px; overflow:hidden; border-radius:25px; border:1px solid rgba(101,88,232,.12); background:linear-gradient(145deg,#F5F2FF,#fff); box-shadow:0 12px 35px rgba(48,40,110,.07); transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; }
.quick-start-card::after { content:''; position:absolute; width:125px; height:125px; right:-64px; bottom:-67px; border:24px solid rgba(101,88,232,.06); border-radius:50%; }
.quick-start-card:hover,.quick-start-card:focus-visible { transform:translateY(-6px); border-color:rgba(101,88,232,.28); box-shadow:0 22px 46px rgba(48,40,110,.13); }
.quick-start-card--exam { background:linear-gradient(145deg,#EEF8FF,#fff); }.quick-start-card--docs { background:linear-gradient(145deg,#EEFBF6,#fff); }
.quick-start-card__number { position:absolute; top:14px; right:18px; color:rgba(24,33,58,.13); font-size:var(--fs-xs); font-weight:900; letter-spacing:1px; }
.quick-start-card__icon { width:64px; height:64px; display:grid; place-items:center; border-radius:19px; background:#fff; color:var(--primary); box-shadow:0 9px 24px rgba(69,57,147,.11); }
.quick-start-card--exam .quick-start-card__icon { color:#1978CB; }.quick-start-card--docs .quick-start-card__icon { color:#29935A; }
.quick-start-card__icon svg { width:31px; height:31px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.quick-start-card__copy { min-width:0; display:flex; flex-direction:column; }.quick-start-card__copy small { color:var(--primary); font-size:var(--fs-xs); font-weight:900; letter-spacing:1px; line-height:1.35; }.quick-start-card--exam small { color:#1978CB; }.quick-start-card--docs small { color:#29935A; }
.quick-start-card__copy strong { margin-top:7px; color:#18213A; font-size:var(--fs-md); line-height:1.35; }.quick-start-card__copy em { margin-top:7px; color:#667085; font-size:var(--fs-sm); font-style:normal; line-height:1.5; }
.quick-start-card > i { position:relative; z-index:2; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:#fff; color:var(--primary); font-size:var(--fs-md); font-style:normal; font-weight:900; box-shadow:0 7px 18px rgba(50,42,112,.1); }
.journey-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 14px; }
.journey-card { min-height: 220px; padding: 20px; border-radius: 23px; position: relative; overflow: hidden; display: flex; flex-direction: column; background: var(--theme-soft,#F5F2FF); border: 1px solid color-mix(in srgb,var(--theme-color,#6558E8) 16%,transparent); transition: transform .25s ease,box-shadow .25s ease; }
.journey-card:hover { transform: translateY(-7px) rotate(-.5deg); box-shadow: 0 18px 42px color-mix(in srgb,var(--theme-color,#6558E8) 18%,transparent); }
.journey-card::after { content:''; position:absolute; width:105px; height:105px; border-radius:50%; border:22px solid color-mix(in srgb,var(--theme-color) 10%,transparent); right:-45px; bottom:-45px; }
.journey-card__spark { position:absolute; right:14px; top:12px; color:var(--theme-color); opacity:.35; }
.journey-card__icon { width:53px; height:53px; display:grid; place-items:center; border-radius:16px; background:#fff; color:var(--theme-color); box-shadow:0 8px 18px color-mix(in srgb,var(--theme-color) 13%,transparent); }
.journey-card__icon svg { width:29px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.journey-card > strong { margin-top:16px; font-size:1rem; color:#18213A; }.journey-card > small { color:#6B7486; font-size:.59rem; line-height:1.45; margin-top:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.journey-card__footer { margin-top:auto; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; }.journey-card__footer b { font-size:.61rem; color:var(--theme-color); }.journey-card__footer i { width:29px; height:29px; display:grid; place-items:center; border-radius:50%; background:#fff; color:var(--theme-color); font-style:normal; }

.wonder-courses { position:relative; background:linear-gradient(180deg,#F8F7FF 0%,#FDFDFF 100%); overflow:hidden; }
.home-course-filters { display:flex; align-items:center; gap:10px; margin:-16px 0 27px; padding-bottom:3px; overflow-x:auto; scrollbar-width:none; }.home-course-filters::-webkit-scrollbar { display:none; }
.home-course-filters a { min-height:43px; padding:9px 14px; display:inline-flex; align-items:center; gap:7px; flex:0 0 auto; border-radius:999px; border:1px solid #E4E2F2; background:#fff; color:#59647A; font-size:.64rem; font-weight:800; transition:.2s ease; }
.home-course-filters a:hover,.home-course-filters a:focus-visible { color:var(--theme-color,var(--primary)); border-color:color-mix(in srgb,var(--theme-color,var(--primary)) 35%,#fff); transform:translateY(-2px); }.home-course-filters a.is-active { color:#fff; background:var(--primary); border-color:var(--primary); }
.home-course-filters a span { display:grid; place-items:center; color:var(--theme-color,var(--primary)); }.home-course-filters a.is-active span { color:#fff; }.home-course-filters svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; }.home-course-filters b { min-width:20px; height:20px; padding-inline:5px; display:grid; place-items:center; border-radius:999px; background:#F0EEF9; color:#777F91; font-size:.5rem; }.home-course-filters a.is-active b { color:var(--primary); background:#fff; }
.wonder-blob { position:absolute; border-radius:50%; filter:blur(1px); pointer-events:none; }.wonder-blob--left { width:360px; height:360px; left:-220px; top:80px; background:rgba(101,88,232,.07); }
.wonder-course-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.wonder-course-grid--count-2 { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:980px; margin-inline:auto; }
.wonder-course-grid--count-1 { grid-template-columns:minmax(0,980px); justify-content:center; }
.wonder-course-grid--count-1 .wonder-course-card { display:grid; grid-template-columns:minmax(300px,44%) 1fr; min-height:320px; }
.wonder-course-grid--count-1 .wonder-course-card__cover { height:100%; min-height:320px; }
.wonder-course-grid--count-1 .wonder-course-card__body { padding:34px; display:flex; flex-direction:column; justify-content:center; }
.wonder-course-grid--count-1 .wonder-course-card h3 { font-size:1.45rem; }
.wonder-course-grid--count-1 .wonder-course-card p { min-height:0; font-size:.76rem; }
.home-content-empty { grid-column:1/-1; min-height:230px; padding:36px; display:grid; place-items:center; align-content:center; gap:8px; text-align:center; border:2px dashed rgba(101,88,232,.2); border-radius:25px; background:rgba(255,255,255,.72); color:#6A7489; }
.home-content-empty > span { font-size:2rem; }.home-content-empty h3 { color:#18213A; }.home-content-empty p { max-width:430px; font-size:.72rem; }
.mission-shell--empty { display:grid; place-items:center; min-height:390px; }.mission-shell--empty .home-content-empty { width:100%; min-height:330px; }
.wonder-course-card { border-radius:25px; background:#fff; border:1px solid rgba(71,63,135,.08); box-shadow:0 10px 35px rgba(53,45,117,.08); overflow:hidden; transition:.3s ease; }.wonder-course-card:hover { transform:translateY(-7px); box-shadow:0 25px 55px rgba(53,45,117,.14); }
.wonder-course-card__cover { height:205px; position:relative; overflow:hidden; display:block; background:linear-gradient(145deg,var(--theme-color),color-mix(in srgb,var(--theme-color) 72%,#18213A)); color:#fff; }
.wonder-course-card__cover::after { content:''; position:absolute; inset:0; background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.23),transparent 30%),linear-gradient(120deg,transparent,rgba(255,255,255,.07)); }
.wonder-course-card__badge,.wonder-course-card__grade { position:absolute; z-index:4; top:14px; padding:5px 9px; border-radius:9px; font-size:.55rem; font-weight:900; backdrop-filter:blur(8px); }.wonder-course-card__badge { left:14px; background:#FFDA7B; color:#57430B; }.wonder-course-card__grade { right:14px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.28); }
.wonder-course-card__cat { position:absolute; z-index:4; left:17px; bottom:15px; display:flex; align-items:center; gap:7px; font-size:.66rem; font-weight:800; }.wonder-course-card__cat svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; }
.wonder-course-card__art { position:absolute; inset:0; z-index:2; }.cover-orbit { position:absolute; width:140px; height:140px; border:1px dashed rgba(255,255,255,.45); border-radius:50%; right:23px; top:28px; }.cover-orbit::after { content:''; position:absolute; inset:27px; border:17px solid rgba(255,255,255,.09); border-radius:50%; }
.cover-cube { position:absolute; display:grid; place-items:center; background:rgba(255,255,255,.92); color:var(--theme-color); border-radius:16px; font-weight:900; box-shadow:0 12px 25px rgba(16,23,47,.19); }.cover-cube--one { width:70px; height:70px; right:65px; top:56px; font-size:1.5rem; transform:rotate(-7deg); }.cover-cube--two { width:47px; height:47px; right:25px; top:112px; transform:rotate(9deg); }.cover-star { position:absolute; right:145px; top:42px; color:#FFDA7B; font-size:1.7rem; }.cover-tower { position:absolute; right:70px; bottom:44px; width:70px; height:105px; background:rgba(255,255,255,.18); clip-path:polygon(50% 0,100% 28%,87% 100%,13% 100%,0 28%); }.cover-path { position:absolute; width:150px; height:70px; border:15px solid rgba(255,255,255,.12); border-color:rgba(255,255,255,.15) transparent transparent; border-radius:50%; right:20px; top:60px; }.cover-wave { position:absolute; width:180px; height:90px; border:22px solid rgba(255,255,255,.12); border-radius:50%; right:-15px; top:70px; }
.wonder-course-card__body { padding:20px; }.wonder-course-card__rating { display:flex; align-items:center; justify-content:space-between; }.wonder-course-card__rating span { font-size:.63rem; font-weight:900; color:#F2A623; }.wonder-course-card__rating small { font-size:.58rem; color:#9198A8; }
.wonder-course-card h3 { font-size:1rem; line-height:1.35; margin:9px 0 7px; }.wonder-course-card h3 a:hover { color:var(--primary); }.wonder-course-card p { color:#70798C; font-size:.66rem; line-height:1.55; min-height:61px; }
.wonder-course-card__footer { display:flex; align-items:center; justify-content:space-between; padding-top:14px; margin-top:15px; border-top:1px solid #ECECF3; color:#788195; font-size:.62rem; }.wonder-course-card__footer a { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:var(--primary-light); color:var(--primary); font-weight:900; }

.wonder-exam-section { background:#fff; }
.wonder-exam { min-height:530px; border-radius:36px; padding:58px 65px; display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:center; background:radial-gradient(circle at 95% 10%,rgba(65,199,164,.18),transparent 27%),linear-gradient(130deg,#18213A,#2A2859); position:relative; overflow:hidden; color:#fff; box-shadow:0 24px 70px rgba(24,33,58,.18); }
.wonder-exam::after { content:''; position:absolute; width:260px; height:260px; border:65px solid rgba(255,255,255,.035); border-radius:50%; left:-110px; bottom:-120px; }.wonder-exam__copy { position:relative; z-index:2; }.wonder-exam h2 { color:#fff; font-size:2.35rem; letter-spacing:-1.6px; margin:9px 0 16px; }.wonder-exam__copy > p { color:#BCC2D4; font-size:.82rem; }.wonder-exam__copy ul { margin:23px 0 28px; }.wonder-exam__copy li { display:flex; align-items:center; gap:10px; margin:11px 0; color:#E1E3EC; font-size:.72rem; }.wonder-exam__copy li span { width:23px; height:23px; display:grid; place-items:center; border-radius:50%; background:rgba(65,199,164,.18); color:#71E0C4; font-size:.6rem; }
.wonder-exam__card { position:relative; z-index:2; border-radius:27px; background:#fff; color:#18213A; padding:28px; box-shadow:0 25px 60px rgba(8,11,28,.28); transform:rotate(1deg); }.wonder-exam__top { display:flex; align-items:center; justify-content:space-between; }.wonder-exam__logo { width:52px; height:52px; display:grid; place-items:center; background:var(--theme-soft); color:var(--theme-color); border-radius:16px; }.wonder-exam__logo svg { width:28px; fill:none; stroke:currentColor; stroke-width:1.8; }.wonder-exam__card > small { display:block; color:var(--theme-color); font-size:.6rem; font-weight:800; margin-top:17px; }.wonder-exam__card h3 { font-size:1.22rem; margin:5px 0 18px; }.wonder-exam__numbers { display:grid; grid-template-columns:repeat(3,1fr); padding:15px 0; background:#F7F7FB; border-radius:15px; }.wonder-exam__numbers div { text-align:center; border-right:1px solid #E7E7EF; }.wonder-exam__numbers div:last-child { border:0; }.wonder-exam__numbers strong { display:block; font-size:1rem; }.wonder-exam__numbers span { font-size:.54rem; color:#8A92A4; }.wonder-exam__timeline { position:relative; height:6px; border-radius:9px; background:#ECECF2; margin:30px 0 27px; }.wonder-exam__timeline i { display:block; width:71%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--primary),#41C7A4); }.wonder-exam__timeline span,.wonder-exam__timeline b { position:absolute; top:10px; font-size:.53rem; }.wonder-exam__timeline span { left:0; color:#7B8496; }.wonder-exam__timeline b { right:0; color:#18213A; }

.wonder-library { background:#FFF9EF; }.wonder-doc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }.wonder-doc { display:grid; grid-template-columns:100px 1fr 38px; gap:18px; align-items:center; min-height:175px; padding:22px; background:#fff; border:1px solid #F0E8DA; border-radius:22px; box-shadow:0 11px 32px rgba(105,77,29,.07); transition:.25s ease; }.wonder-doc:hover { transform:translateY(-5px); box-shadow:0 20px 44px rgba(105,77,29,.11); }.wonder-doc__paper { width:92px; height:120px; padding:15px 12px; background:linear-gradient(145deg,#fff,#F6F5F3); border:1px solid #E8E5DF; border-radius:8px; box-shadow:0 8px 20px rgba(77,57,30,.11); transform:rotate(-3deg); position:relative; }.wonder-doc--2 .wonder-doc__paper { transform:rotate(2deg); }.wonder-doc__clip { position:absolute; width:26px; height:8px; border:2px solid #A9A6AC; border-radius:5px; left:33px; top:-5px; }.wonder-doc__mark { display:inline-block; padding:3px 6px; border-radius:5px; font-size:.48rem; font-weight:900; }.wonder-doc__paper i { display:block; height:4px; background:#E1E1E6; border-radius:4px; margin-top:10px; }.wonder-doc__paper i:nth-of-type(2) { width:72%; }.wonder-doc__paper i:nth-of-type(3) { width:85%; }.wonder-doc__paper b { position:absolute; right:9px; bottom:8px; color:#B3B0B5; font-size:.52rem; }.wonder-doc__info span { font-size:.57rem; font-weight:900; }.wonder-doc__info h3 { font-size:.82rem; line-height:1.35; margin:6px 0 9px; }.wonder-doc__info small { color:#8C93A2; font-size:.55rem; }.wonder-doc > a { width:36px; height:36px; display:grid; place-items:center; border-radius:11px; background:#F2F0FF; color:var(--primary); font-weight:900; }
.wonder-community { position:relative; padding:78px 0 76px; background:radial-gradient(circle at 4% 105%,rgba(255,184,77,.24),transparent 24%),radial-gradient(circle at 96% -5%,rgba(65,199,164,.25),transparent 25%),linear-gradient(115deg,#FBF8FF 0%,#F3F5FF 53%,#EBFBF6 100%); color:#18213A; overflow:hidden; }
.community-wave { position:absolute; z-index:1; left:0; width:100%; height:56px; pointer-events:none; }.community-wave--top { top:-1px; }.community-wave--bottom { bottom:-1px; }.community-wave__fill { fill:#FFF9EF; }.community-wave--bottom .community-wave__fill { fill:#fff; }.community-wave__accent { fill:none; stroke:rgba(101,88,232,.09); stroke-width:2; vector-effect:non-scaling-stroke; }.community-wave--bottom .community-wave__accent { stroke:rgba(65,199,164,.1); }
.wonder-community__layout { position:relative; z-index:2; min-height:340px; display:grid; grid-template-columns:.72fr 1.28fr; align-items:center; gap:58px; }
.wonder-community__heading { position:relative; z-index:2; }.wonder-community__heading .wonder-kicker--light { color:var(--primary); }.wonder-community__heading h2 { margin:10px 0 14px; color:#18213A; font-size:clamp(1.8rem,3vw,2.45rem); line-height:1.17; letter-spacing:-1.4px; }.wonder-community__heading p { max-width:410px; color:#667085; font-size:var(--fs-sm); line-height:1.65; }
.wonder-community__grid { position:relative; z-index:2; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.community-stat { min-height:128px; padding:20px; display:grid; grid-template-columns:62px 1fr; align-items:center; gap:16px; border:1px solid rgba(80,71,153,.1); border-radius:22px; background:rgba(255,255,255,.82); box-shadow:0 11px 30px rgba(54,46,120,.08),inset 0 1px 0 #fff; backdrop-filter:blur(9px); transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; }.community-stat:hover { transform:translateY(-5px); border-color:rgba(101,88,232,.22); box-shadow:0 18px 38px rgba(54,46,120,.13); }
.community-stat__icon { width:62px; height:62px; display:grid; place-items:center; border-radius:19px; color:#4F43C8; background:#F0EEFF; box-shadow:0 10px 24px rgba(16,13,58,.18); }.community-stat__icon svg { width:39px; height:39px; fill:none; stroke:currentColor; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }.community-icon__accent { stroke:#FF9F43; stroke-width:2.6; }
.community-stat--lessons .community-stat__icon { color:#168E75; background:#E4F9F3; }.community-stat--lessons .community-icon__accent { stroke:#33B795; }.community-stat--exams .community-stat__icon { color:#D87918; background:#FFF2D9; }.community-stat--exams .community-icon__accent { stroke:#6558E8; }.community-stat--paths .community-stat__icon { color:#1978CB; background:#E7F4FF; }.community-stat--paths .community-icon__accent { stroke:#FFB84D; stroke-width:4.2; }
.community-stat div { min-width:0; }.community-stat strong { display:block; color:#5549D2; font-size:2rem; line-height:1; letter-spacing:-1px; }.community-stat--lessons strong { color:#168E75; }.community-stat--exams strong { color:#D87918; }.community-stat--paths strong { color:#1978CB; }.community-stat div > span { display:flex; flex-direction:column; margin-top:7px; color:#18213A; font-size:var(--fs-sm); font-weight:800; line-height:1.3; }.community-stat small { margin-top:3px; color:#778196; font-size:var(--fs-xs); font-weight:600; }
.wonder-community__shapes { position:absolute; inset:0; pointer-events:none; }.wonder-community__shapes span { position:absolute; color:rgba(101,88,232,.07); font-size:4.7rem; line-height:1; }.wonder-community__shapes span:first-child { left:3%; bottom:-38px; font-size:10rem; }.wonder-community__shapes span:nth-child(2) { left:39%; top:-23px; color:rgba(65,199,164,.12); transform:rotate(14deg); }.wonder-community__shapes span:nth-child(3) { right:5%; top:27px; color:rgba(255,184,77,.3); font-size:2.8rem; }.wonder-community__shapes span:last-child { left:45%; bottom:17px; font-size:3rem; transform:rotate(12deg); }
.wonder-final__card { min-height:260px; border-radius:32px; padding:45px 58px; display:flex; align-items:center; justify-content:space-between; gap:35px; color:#fff; background:radial-gradient(circle at 10% 100%,rgba(255,184,77,.28),transparent 30%),linear-gradient(120deg,#6558E8,#8074F0); position:relative; overflow:hidden; box-shadow:0 23px 60px rgba(101,88,232,.21); }.wonder-final__card h2 { color:#fff; font-size:2rem; letter-spacing:-1.1px; margin:8px 0; }.wonder-final__card p { color:#DAD6FF; font-size:.67rem; }.wonder-final__shapes span { position:absolute; color:rgba(255,255,255,.16); font-size:4rem; }.wonder-final__shapes span:first-child { right:22%; top:-25px; }.wonder-final__shapes span:nth-child(2) { right:7%; bottom:-25px; }.wonder-final__shapes span:last-child { left:35%; bottom:15px; font-size:1.5rem; }

@media (max-width:1100px) {
  .wonder-hero__layout { gap:32px; grid-template-columns:1fr 1fr; }.wonder-hero h1 { letter-spacing:-2.5px; }.wonder-float--score { right:-5px; }.wonder-float--streak { left:-10px; }
  .quick-start-grid { grid-template-columns:1fr 1fr; }.quick-start-card:last-child { grid-column:1/-1; }.journey-grid { grid-template-columns:repeat(3,1fr); }.journey-card { min-height:190px; }
  .wonder-doc-grid { grid-template-columns:1fr; }.wonder-doc { grid-template-columns:90px 1fr 38px; }
}
@media (max-width:820px) {
  .wonder-hero__layout { grid-template-columns:1fr; text-align:center; padding-top:48px; }.wonder-hero__copy > p { margin-left:auto; margin-right:auto; }.wonder-hero__actions,.wonder-proof { justify-content:center; }.wonder-hero__art { width:min(620px,100%); margin:0 auto; }.wonder-picture-frame { border-radius:30px 30px 55px 30px; }.wonder-heading { display:block; }.wonder-text-link { display:inline-block; margin-top:17px; }
  .quick-start-grid { grid-template-columns:1fr; }.quick-start-card:last-child { grid-column:auto; }.wonder-course-grid { grid-template-columns:repeat(2,1fr); }.wonder-exam { grid-template-columns:1fr; gap:40px; padding:45px; }.wonder-exam__copy { text-align:center; }.wonder-exam__copy li { justify-content:center; }.wonder-exam__card { max-width:560px; margin:auto; width:100%; }
  .wonder-community__layout { min-height:0; grid-template-columns:1fr; gap:34px; }.wonder-community__heading { text-align:center; }.wonder-community__heading p { margin-inline:auto; }
  .wonder-course-grid--count-1 { grid-template-columns:1fr; }.wonder-course-grid--count-1 .wonder-course-card { grid-template-columns:1fr; }.wonder-course-grid--count-1 .wonder-course-card__cover { min-height:230px; }.wonder-course-grid--count-1 .wonder-course-card__body { padding:24px; }
  .wonder-final__card { text-align:center; flex-direction:column; justify-content:center; }
}
@media (max-width:560px) {
  .navbar { min-height:68px; }.brand__mark { width:37px; height:37px; }.brand { font-size:1.05rem; }
  .wonder-hero { min-height:auto; }.wonder-hero__layout { padding:38px 18px 80px; }.wonder-hero h1 { font-size:2.42rem; letter-spacing:-2px; }.wonder-hero h1 em { white-space:normal; }.wonder-hero__copy > p { font-size:.9rem; }.wonder-hero__actions { flex-direction:column; }.wonder-hero__actions .btn { width:100%; }.wonder-proof { flex-wrap:wrap; }.wonder-proof > div:nth-child(2) { border:0; padding:0; }.wonder-picture-frame { border-width:5px; }.wonder-float { padding:8px 10px; }.wonder-float--streak { left:-5px; top:16%; }.wonder-float--score { right:-5px; top:5%; }.wonder-float__icon { width:29px; height:29px; }.wonder-progress-card { right:7px; bottom:-38px; width:205px; }
  .wonder-heading h2 { font-size:1.8rem; }.wonder-quick-start { padding-top:65px; }.wonder-quick-start .wonder-heading p { font-size:var(--fs-md); }.quick-start-card { min-height:172px; grid-template-columns:56px 1fr 40px; padding:22px 18px; gap:14px; }.quick-start-card__icon { width:56px; height:56px; }.quick-start-card__copy strong { font-size:var(--fs-lg); }.quick-start-card__copy em { font-size:var(--fs-base); }.home-course-filters { margin-top:-12px; }.journey-grid { display:flex; overflow-x:auto; margin-right:-24px; padding-right:24px; padding-bottom:16px; scroll-snap-type:x mandatory; }.journey-card { min-width:176px; scroll-snap-align:start; }
  .wonder-course-grid { grid-template-columns:1fr; }.wonder-course-card__cover { height:220px; }
  .wonder-exam { margin-inline:0; padding:34px 22px; border-radius:26px; }.wonder-exam h2 { font-size:1.9rem; }.wonder-exam__card { padding:20px; }.wonder-exam__numbers strong { font-size:.85rem; }
  .wonder-doc { grid-template-columns:78px 1fr 34px; gap:12px; padding:16px; }.wonder-doc__paper { width:72px; height:96px; padding:11px 9px; }.wonder-doc__clip { left:24px; }.wonder-doc__info h3 { font-size:.75rem; }
  .wonder-community { padding:62px 0 60px; }.community-wave { height:38px; }.wonder-community__grid { grid-template-columns:1fr 1fr; gap:11px; }.community-stat { min-height:155px; padding:16px 13px; grid-template-columns:1fr; justify-items:center; text-align:center; gap:10px; }.community-stat__icon { width:56px; height:56px; }.community-stat strong { font-size:1.7rem; }.community-stat div > span { font-size:var(--fs-base); }.community-stat small { font-size:var(--fs-sm); }
  .wonder-final__card { padding:38px 22px; }.wonder-final__card h2 { font-size:1.7rem; }.wonder-final__card .btn { width:100%; }
}

/* ═══════════════════════════════════════════════
   FINAL CTA + FOOTER V2
   ═══════════════════════════════════════════════ */
.wonder-final { padding-top:30px; padding-bottom:76px; background:linear-gradient(180deg,#fff,#F8F7FF); }
.wonder-final__card { min-height:340px; display:grid; grid-template-columns:220px 1fr auto; align-items:center; gap:42px; padding:45px 58px; text-align:left; background:radial-gradient(circle at 12% 90%,rgba(255,184,77,.32),transparent 28%),radial-gradient(circle at 92% 5%,rgba(65,199,164,.2),transparent 25%),linear-gradient(120deg,#282558,#6558E8); border:1px solid rgba(255,255,255,.18); box-shadow:0 30px 75px rgba(53,45,124,.26); }
.wonder-final__shapes { position:absolute; inset:0; pointer-events:none; }
.wonder-final__visual { width:210px; height:230px; position:relative; border-radius:105px 105px 38px 38px; overflow:visible; background:#F4EEFF; border:6px solid rgba(255,255,255,.22); box-shadow:0 19px 42px rgba(16,13,51,.25); }
.wonder-final__visual img { width:100%; height:100%; object-fit:cover; object-position:70% 60%; border-radius:99px 99px 32px 32px; }
.wonder-final__visual::after { content:''; position:absolute; width:58px; height:58px; border:13px solid rgba(255,255,255,.15); border-radius:50%; left:-31px; top:28px; }
.wonder-final__visual > span { position:absolute; z-index:3; left:50%; bottom:-18px; transform:translateX(-50%); width:max-content; padding:9px 13px; border-radius:12px; background:#fff; color:#4E43C7; font-size:.7rem; font-weight:900; box-shadow:0 12px 30px rgba(20,16,65,.22); }
.wonder-final__content { position:relative; z-index:3; }.wonder-final__content h2 { font-size:2.25rem; line-height:1.15; letter-spacing:-1.5px; margin:10px 0 12px; }.wonder-final__content > p { max-width:530px; color:#D7D3F5; font-size:.85rem; line-height:1.65; }
.wonder-final__benefits { display:flex; flex-wrap:wrap; gap:9px 18px; margin-top:19px; }.wonder-final__benefits span { color:#fff; font-size:.72rem; font-weight:800; }.wonder-final__benefits span::first-letter { color:#77E0C5; }
.wonder-final__action { position:relative; z-index:3; min-width:220px; display:flex; flex-direction:column; align-items:center; gap:11px; }.wonder-final__action .btn { width:100%; border-radius:16px; color:#5548D3; box-shadow:0 14px 35px rgba(16,13,51,.23); }.wonder-final__action small { text-align:center; color:#C7C3E8; font-size:.65rem; line-height:1.5; }
.wonder-final__shapes span:first-child { right:4%; top:17px; }.wonder-final__shapes span:nth-child(2) { right:20%; bottom:-24px; }.wonder-final__shapes span:nth-child(3) { left:42%; bottom:20px; }.wonder-final__shapes span:nth-child(4) { position:absolute; left:29%; top:20px; color:rgba(255,255,255,.12); font-size:2.5rem; transform:rotate(15deg); }

.site-footer { position:relative; margin-top:0; padding:0; background:#151D35; color:#fff; border-radius:38px 38px 0 0; overflow:hidden; }
.footer-wave { height:11px; background:linear-gradient(90deg,#6558E8 0 25%,#41C7A4 25% 50%,#FFB84D 50% 75%,#FF7262 75%); }
.footer-promise { min-height:122px; display:grid; grid-template-columns:1fr 1fr 1.08fr; align-items:center; gap:28px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-promise > div { display:flex; align-items:center; gap:13px; }.footer-promise__icon { width:48px; height:48px; flex:0 0 auto; display:grid; place-items:center; border-radius:15px; background:rgba(65,199,164,.13); color:#63D6B9; }.footer-promise__icon--orange { background:rgba(255,184,77,.14); color:#FFCA70; }.footer-promise__icon svg { width:27px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }.footer-promise p { display:flex; flex-direction:column; }.footer-promise strong { font-size:.8rem; }.footer-promise small { margin-top:2px; color:#8F9AB2; font-size:.65rem; line-height:1.45; }
.footer-promise > a { justify-self:end; display:flex; flex-direction:column; min-width:280px; padding:14px 18px; border-radius:15px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); transition:.25s ease; }.footer-promise > a:hover { background:rgba(255,255,255,.12); transform:translateY(-2px); }.footer-promise > a span { color:#9FA9BE; font-size:.65rem; }.footer-promise > a strong { margin-top:1px; color:#fff; font-size:.76rem; }
.footer-grid { grid-template-columns:1.5fr 1fr 1fr 1.2fr 1.05fr; gap:50px; padding-top:52px; padding-bottom:46px; }
.footer-brand > p { margin:16px 0 3px; color:#D6DAE5; font-size:.8rem; font-weight:800; }.footer-brand > small { display:block; max-width:315px; color:#8995AD; font-size:.68rem; line-height:1.6; }
.socials { margin-top:22px; gap:10px; }.socials button { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; color:#AAB3C6; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.09); transition:.25s ease; }.socials button:hover { color:#fff; background:#6558E8; transform:translateY(-3px); }.socials svg { width:21px; fill:currentColor; }.socials .social-play { fill:#151D35; }
.footer-grid h3 { margin-bottom:18px; color:#fff; font-size:.72rem; letter-spacing:1.2px; }.footer-grid > div:not(.footer-brand) { display:flex; flex-direction:column; align-items:flex-start; gap:7px; }.footer-grid a,.footer-grid > div:not(.footer-brand) button { display:block; width:auto; padding:4px 0; color:#9BA6BC; font-size:.76rem; line-height:1.5; text-align:left; transition:.2s ease; }.footer-grid a:hover,.footer-grid > div:not(.footer-brand) button:hover { color:#fff; transform:translateX(3px); }
.footer-contact p { color:#8995AD; font-size:.7rem; line-height:1.65; }.footer-contact p strong { color:#D8DCE6; }.footer-online { display:inline-flex; align-items:center; gap:7px; margin-top:8px; color:#7EDCC5; font-size:.66rem; }.footer-online i { width:8px; height:8px; border-radius:50%; background:#41C7A4; box-shadow:0 0 0 5px rgba(65,199,164,.1); }
.footer-bottom { min-height:70px; padding:18px 0; border-top-color:rgba(255,255,255,.1); color:#78859F; font-size:.68rem; }.footer-bottom div { display:flex; align-items:center; gap:24px; }.footer-bottom div span { display:flex; align-items:center; gap:7px; }.footer-bottom svg { width:17px; fill:none; stroke:#8E99B0; stroke-width:1.8; }

@media (max-width:1100px) {
  .wonder-final__card { grid-template-columns:180px 1fr auto; gap:28px; padding-inline:38px; }.wonder-final__visual { width:175px; height:205px; }.wonder-final__content h2 { font-size:1.9rem; }.wonder-final__action { min-width:190px; }
  .footer-promise { grid-template-columns:1fr 1fr; padding:22px 24px; }.footer-promise > a { grid-column:1/-1; justify-self:stretch; min-width:0; }.footer-grid { grid-template-columns:1.4fr repeat(2,1fr); }.footer-brand { grid-row:span 2; }.footer-contact { grid-column:3; }
}
@media (max-width:820px) {
  .wonder-final__card { grid-template-columns:170px 1fr; }.wonder-final__action { grid-column:1/-1; width:min(320px,100%); justify-self:center; }.wonder-final__content h2 { font-size:1.8rem; }
  .footer-grid { grid-template-columns:1fr 1fr; }.footer-brand { grid-column:1/-1; grid-row:auto; }.footer-contact { grid-column:auto; }
}
@media (max-width:560px) {
  .wonder-final { padding:24px 0 60px; }.wonder-final__card { display:flex; min-height:0; padding:32px 22px 36px; gap:30px; text-align:center; }.wonder-final__visual { width:155px; height:175px; }.wonder-final__content h2 { font-size:1.75rem; }.wonder-final__content > p { font-size:.86rem; }.wonder-final__benefits { justify-content:center; }.wonder-final__benefits span { font-size:.76rem; }.wonder-final__action { width:100%; }.wonder-final__action small { font-size:.7rem; }
  .site-footer { border-radius:27px 27px 0 0; }.footer-promise { grid-template-columns:1fr; gap:20px; padding:28px 24px; }.footer-promise > a { grid-column:auto; }.footer-grid { grid-template-columns:1fr 1fr; gap:36px 24px; padding-top:40px; }.footer-brand { grid-column:1/-1; }.footer-brand > small { max-width:none; }.footer-contact { grid-column:1/-1; }.footer-bottom { display:block; padding:22px 24px; }.footer-bottom > span { display:block; line-height:1.6; }.footer-bottom div { margin-top:14px; flex-direction:column; align-items:flex-start; gap:8px; }
}

/* ═══════════════════════════════════════════════
   LARGE TYPE + PLAYFUL EXAM / LIBRARY
   ═══════════════════════════════════════════════ */
:root { --fs-xs:.8rem; --fs-sm:.94rem; --fs-base:1rem; --fs-md:1.16rem; }
@media (min-width:768px) and (max-width:1023px) { html { font-size:17px; } }
@media (min-width:1024px) { html { font-size:18px; } }
.wonder-eyebrow { font-size:.78rem; }.wonder-proof { font-size:.73rem; }.wonder-proof strong { font-size:.8rem; }.wonder-float strong { font-size:.78rem; }.wonder-float small { font-size:.66rem; }
.wonder-progress-card span { font-size:.64rem; }.wonder-progress-card strong { font-size:.77rem; }.wonder-progress-card > b { font-size:.72rem; }
.wonder-kicker { font-size:.72rem; }.journey-card > small { font-size:.71rem; }.journey-card__footer b { font-size:.69rem; }
.wonder-course-card__badge,.wonder-course-card__grade { font-size:.65rem; }.wonder-course-card__cat { font-size:.74rem; }.wonder-course-card__rating span { font-size:.74rem; }.wonder-course-card__rating small { font-size:.69rem; }.wonder-course-card h3 { font-size:1.08rem; }.wonder-course-card p { font-size:.78rem; min-height:70px; }.wonder-course-card__footer { font-size:.74rem; }
.wonder-final__card p { font-size:.78rem; }

.wonder-exam { min-height:630px; grid-template-columns:.88fr 1.12fr; gap:75px; overflow:visible; }
.wonder-exam-section { overflow:hidden; }
.wonder-exam__decor { position:absolute; inset:0; pointer-events:none; }.wonder-exam__decor span { position:absolute; color:rgba(255,255,255,.11); font-weight:900; pointer-events:none; }.wonder-exam__decor span:first-child { font-size:3rem; left:34px; top:35px; }.wonder-exam__decor span:nth-child(2) { font-size:5rem; left:41%; bottom:-28px; transform:rotate(14deg); }.wonder-exam__decor span:last-child { width:120px; height:120px; border:18px solid rgba(255,255,255,.04); border-radius:50%; right:-35px; top:-38px; color:transparent; }
.wonder-exam h2 { font-size:2.55rem; }.wonder-exam__copy > p { font-size:.92rem; line-height:1.7; }.wonder-exam__copy li { font-size:.82rem; margin:14px 0; }.wonder-exam__copy li span { width:29px; height:29px; font-size:.7rem; }
.mission-shell { position:relative; z-index:3; padding:24px; background:#fff; color:#18213A; border-radius:30px; box-shadow:0 28px 70px rgba(6,9,26,.32); transform:rotate(1deg); }
.mission-shell::before { content:''; position:absolute; inset:12px -13px -13px 13px; z-index:-1; border-radius:30px; background:linear-gradient(135deg,#FFCD77,#FF8A70); opacity:.88; transform:rotate(1.2deg); }
.mission-shell__top { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-bottom:15px; border-bottom:1px solid #ECECF2; }
.mission-title { display:flex; align-items:center; gap:12px; }.mission-title__icon { width:47px; height:47px; display:grid; place-items:center; border-radius:15px; background:var(--theme-soft); color:var(--theme-color); }.mission-title__icon svg { width:27px; fill:none; stroke:currentColor; stroke-width:1.8; }.mission-title div { display:flex; flex-direction:column; }.mission-title small { color:#8A92A4; font-size:.64rem; font-weight:900; letter-spacing:.8px; }.mission-title strong { font-size:.83rem; }
.mission-stars { display:flex; align-items:center; gap:5px; padding:8px 11px; border-radius:12px; background:#FFF4D6; color:#F4A824; font-size:.75rem; }.mission-stars b { color:#665321; }
.mission-progress { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:14px 2px; font-size:.7rem; color:#8991A3; }.mission-progress > span b { color:#18213A; }.mission-progress > div { height:7px; border-radius:8px; background:#ECECF2; overflow:hidden; }.mission-progress > div i { display:block; width:26%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#6558E8,#41C7A4); }.mission-progress > strong { color:#6558E8; font-size:.75rem; }
.mission-question { position:relative; overflow:hidden; text-align:center; padding:18px 20px 20px; border-radius:20px; background:radial-gradient(circle at 90% 10%,rgba(59,183,232,.16),transparent 30%),linear-gradient(135deg,#F5F2FF,#FFFAF0); border:1px solid #E9E5FA; }.mission-question::after { content:'✦'; position:absolute; right:13px; bottom:5px; color:#FFBE54; opacity:.55; font-size:1.4rem; }.mission-question__badge { display:inline-block; padding:5px 9px; border-radius:8px; background:#fff; color:#6558E8; font-size:.63rem; font-weight:900; box-shadow:0 5px 15px rgba(70,58,147,.09); }.mission-question p { margin:10px 0 13px; font-size:.8rem; font-weight:800; }
.mission-sequence { display:flex; justify-content:center; align-items:center; gap:9px; }.mission-sequence span { width:48px; height:48px; display:grid; place-items:center; border-radius:14px; background:#fff; color:#6558E8; font-size:1.2rem; font-weight:900; box-shadow:0 7px 18px rgba(63,52,133,.12); }.mission-sequence i { color:#A4ABBA; font-style:normal; font-weight:900; }.mission-sequence .mission-sequence__mystery { background:#6558E8; color:#fff; transform:rotate(5deg); }
.mission-options { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:12px 0; }.mission-options > span { min-height:48px; display:flex; align-items:center; justify-content:center; border:2px solid #E8E8F0; border-radius:14px; font-size:.8rem; font-weight:900; color:#657087; }.mission-options .is-picked { border-color:#41C7A4; color:#168A72; background:#E8FAF5; }.mission-options b { margin-left:auto; margin-right:12px; width:21px; height:21px; display:grid; place-items:center; border-radius:50%; color:#fff; background:#41C7A4; font-size:.62rem; }
.mission-reward { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:5px; }.mission-reward > div { display:flex; align-items:center; gap:8px; }.mission-reward > div > span { width:36px; height:36px; display:grid; place-items:center; border-radius:11px; background:#FFF1D9; }.mission-reward p { display:flex; flex-direction:column; }.mission-reward p strong { font-size:.72rem; }.mission-reward p small { color:#8A92A4; font-size:.61rem; }.mission-reward > a { padding:9px 13px; border-radius:11px; color:#fff; background:#6558E8; font-size:.7rem; font-weight:900; }.mission-reward > a span { margin-left:5px; }
.mission-float { position:absolute; z-index:5; display:flex; flex-direction:column; align-items:center; min-width:78px; padding:10px 12px; border-radius:16px; background:#fff; box-shadow:0 13px 35px rgba(11,14,35,.2); }.mission-float b { font-size:.9rem; color:#6558E8; }.mission-float span { font-size:.57rem; color:#8C94A4; }.mission-float--timer { right:-40px; top:29%; }.mission-float--players { left:-34px; bottom:15%; }.mission-float--players b { color:#F07854; }

.wonder-library { position:relative; overflow:hidden; padding-bottom:115px; background:radial-gradient(circle at 8% 18%,rgba(255,184,77,.2),transparent 24%),radial-gradient(circle at 92% 80%,rgba(65,199,164,.15),transparent 23%),#FFF9EF; }
.library-stage { position:relative; max-width:1100px; margin:0 auto; padding:35px 35px 62px; border-radius:36px; background:rgba(255,255,255,.62); border:1px solid rgba(255,255,255,.9); box-shadow:0 25px 70px rgba(114,78,25,.09); backdrop-filter:blur(10px); }
.library-stage__spark span { position:absolute; color:#FFB84D; opacity:.45; }.library-stage__spark span:first-child { left:12px; top:15px; font-size:1.8rem; }.library-stage__spark span:nth-child(2) { right:5%; top:-25px; width:55px; height:55px; border:10px solid #41C7A4; color:transparent; border-radius:50%; }.library-stage__spark span:last-child { left:33%; bottom:9px; font-size:2rem; color:#6558E8; }
.wonder-doc-grid { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:end; }
.workbook-card { overflow:hidden; background:#fff; border-radius:25px; border:1px solid rgba(68,54,136,.08); box-shadow:0 17px 40px rgba(83,58,20,.11); transition:.3s ease; }.workbook-card:hover { transform:translateY(-10px) rotate(-.5deg); box-shadow:0 28px 55px rgba(83,58,20,.16); }.workbook-card--2 { transform:translateY(16px) rotate(1deg); }.workbook-card--2:hover { transform:translateY(5px) rotate(.5deg); }.workbook-card--3 { transform:rotate(-1deg); }
.workbook-cover { height:220px; position:relative; overflow:hidden; padding:20px; background:linear-gradient(145deg,var(--theme-color),color-mix(in srgb,var(--theme-color) 66%,#18213A)); color:#fff; }.workbook-card--2 .workbook-cover { background:linear-gradient(145deg,#FFB84D,#FF7C62); }.workbook-card--3 .workbook-cover { background:linear-gradient(145deg,#3BB7E8,#6558E8); }
.workbook-cover::after { content:''; position:absolute; width:190px; height:190px; right:-75px; bottom:-80px; border:36px solid rgba(255,255,255,.09); border-radius:50%; }.workbook-cover__tag { position:relative; z-index:3; display:inline-block; padding:6px 9px; border-radius:8px; background:rgba(255,255,255,.17); border:1px solid rgba(255,255,255,.22); font-size:.65rem; font-weight:900; }.workbook-cover__level { position:absolute; z-index:3; left:20px; bottom:16px; font-size:.7rem; font-weight:900; }
.workbook-cover__art { position:absolute; inset:0; }.workbook-number { position:absolute; z-index:2; right:65px; top:72px; width:90px; height:90px; display:grid; place-items:center; border-radius:24px; background:#fff; color:var(--theme-color); font-size:2rem; font-weight:900; box-shadow:0 15px 30px rgba(25,25,52,.21); transform:rotate(-7deg); }.workbook-card--2 .workbook-number { color:#EF7652; }.workbook-card--3 .workbook-number { color:#6558E8; }.workbook-planet { position:absolute; width:120px; height:120px; border:1px dashed rgba(255,255,255,.5); border-radius:50%; right:48px; top:55px; }.workbook-cover__art i { position:absolute; width:18px; height:18px; border-radius:5px; background:rgba(255,255,255,.35); transform:rotate(18deg); }.workbook-cover__art i:first-of-type { right:35px; top:42px; }.workbook-cover__art i:nth-of-type(2) { right:170px; top:100px; width:12px; height:12px; }.workbook-cover__art i:nth-of-type(3) { right:35px; bottom:37px; border-radius:50%; }
.workbook-cover__spiral { position:absolute; z-index:4; left:-4px; top:35px; bottom:35px; display:flex; flex-direction:column; justify-content:space-around; }.workbook-cover__spiral i { display:block; width:24px; height:8px; border:3px solid #DDD9E8; border-left:0; border-radius:0 8px 8px 0; }
.workbook-card__body { padding:21px; }.workbook-card__body > span { font-size:.7rem; font-weight:900; }.workbook-card__body h3 { font-size:1rem; line-height:1.38; margin:7px 0 17px; min-height:50px; }.workbook-card__body > div { display:flex; align-items:center; justify-content:space-between; padding-top:13px; border-top:1px solid #ECECF2; }.workbook-card__body small { color:#858E9F; font-size:.68rem; }.workbook-card__body a { font-size:.7rem; font-weight:900; color:#6558E8; }.workbook-card__body a b { margin-left:5px; }
.library-shelf { position:absolute; z-index:1; left:3%; right:3%; bottom:30px; height:22px; border-radius:10px; background:linear-gradient(#D89B54,#B87332); box-shadow:0 13px 0 #92572A,0 22px 28px rgba(101,63,27,.24); }.library-shelf i,.library-shelf span { position:absolute; width:17px; height:46px; bottom:-45px; background:#92572A; }.library-shelf i { left:8%; }.library-shelf span { right:8%; }

@media (max-width:1100px) {
  .wonder-exam { gap:44px; padding-inline:46px; }.mission-float--timer { right:-20px; }.mission-float--players { left:-18px; }
  .library-stage { padding-inline:25px; }.wonder-doc-grid { gap:18px; }
}
@media (max-width:820px) {
  .wonder-exam { grid-template-columns:1fr; gap:44px; padding:48px 42px 62px; overflow:hidden; }.wonder-exam__copy { text-align:center; }.wonder-exam__copy li { justify-content:center; }.mission-shell { max-width:620px; width:100%; margin:0 auto; }.mission-float--timer { right:10px; top:-25px; }.mission-float--players { left:12px; bottom:-25px; }
  .library-stage { padding-bottom:55px; }.wonder-doc-grid { grid-template-columns:repeat(2,1fr); }.workbook-card--2 { transform:none; }.workbook-card--3 { grid-column:1/-1; width:calc(50% - 9px); margin:auto; transform:none; }
}
@media (max-width:560px) {
  :root { --fs-xs:.83rem; --fs-sm:.96rem; }.wonder-eyebrow { font-size:.72rem; }.wonder-proof { font-size:.72rem; }.wonder-course-card p { font-size:.84rem; }.wonder-course-card__rating small { font-size:.73rem; }
  .wonder-exam { padding:42px 18px 48px; }.wonder-exam h2 { font-size:2rem; }.wonder-exam__copy > p { font-size:.94rem; }.wonder-exam__copy li { justify-content:flex-start; text-align:left; font-size:.86rem; }.mission-shell { padding:15px; border-radius:23px; transform:none; }.mission-shell::before { display:none; }.mission-title__icon { width:42px; height:42px; }.mission-title small { font-size:.6rem; }.mission-title strong { font-size:.75rem; }.mission-stars { padding:7px; }.mission-sequence { gap:5px; }.mission-sequence span { width:39px; height:43px; font-size:1rem; }.mission-sequence i { font-size:.7rem; }.mission-options > span { min-height:50px; font-size:.77rem; }.mission-reward { align-items:flex-end; }.mission-reward p small { display:none; }.mission-float { display:none; }
  .wonder-library { padding-bottom:80px; }.library-stage { padding:20px 16px 50px; border-radius:26px; }.wonder-doc-grid { display:flex; overflow-x:auto; gap:16px; margin-right:-16px; padding:5px 16px 22px 3px; scroll-snap-type:x mandatory; }.workbook-card,.workbook-card--3 { min-width:270px; width:270px; transform:none; scroll-snap-align:start; }.workbook-cover { height:205px; }.workbook-card__body h3 { font-size:1.02rem; }.workbook-card__body small,.workbook-card__body a { font-size:.76rem; }.library-shelf { bottom:22px; }
}

/* ═══════════════════════════════════════════════
   WONDER LEARNING WORLD — INNER PAGES
   ═══════════════════════════════════════════════ */
.page-header {
  position:relative; overflow:hidden; min-height:260px; padding:40px 0 58px;
  border:0; isolation:isolate; background:#F5F2FF;
}
.page-header::before,.page-header::after { content:''; position:absolute; z-index:-1; border-radius:50%; pointer-events:none; }
.page-header::before { width:420px; height:420px; right:-90px; top:-220px; background:rgba(255,255,255,.38); }
.page-header::after { width:210px; height:210px; right:30%; bottom:-150px; border:34px solid rgba(255,255,255,.16); }
.page-header .container { position:relative; }
.page-header .breadcrumb { width:max-content; max-width:100%; margin-bottom:20px; padding:7px 13px; border-radius:999px; background:rgba(255,255,255,.68); color:#6F7690; font-size:.74rem; font-weight:700; backdrop-filter:blur(7px); }
.detail-back-link { width:max-content; min-height:48px; display:inline-flex; align-items:center; gap:10px; margin-bottom:12px; padding:9px 17px; border:1px solid rgba(255,255,255,.65); border-radius:15px; background:rgba(255,255,255,.9); color:#5143A4; box-shadow:0 9px 24px rgba(42,35,95,.12); font-size:.78rem; font-weight:900; backdrop-filter:blur(9px); }.detail-back-link span { font-size:1.15rem; line-height:1; }.detail-back-link:hover { color:#403390; transform:translateY(-1px); }.detail-back-link--light { color:#285F39; }
.page-header h1 { max-width:720px; margin:9px 0 11px; color:#202844; font-size:clamp(2rem,4vw,3.35rem); line-height:1.08; letter-spacing:-.045em; }
.page-header p { position:relative; z-index:2; max-width:660px; font-size:.92rem; line-height:1.65; color:#687289; }
.page-header__eyebrow { display:block; color:#6558E8; font-size:.7rem; font-weight:900; letter-spacing:1.25px; text-transform:uppercase; }
.page-header__art { position:absolute; right:2%; top:4px; width:350px; height:220px; pointer-events:none; }
.page-header__art::before { content:''; position:absolute; width:165px; height:165px; right:64px; top:24px; border:1px dashed rgba(255,255,255,.66); border-radius:50%; }
.page-header__art::after { content:''; position:absolute; width:95px; height:95px; right:98px; top:58px; border:20px solid rgba(255,255,255,.17); border-radius:50%; }
.page-header__art i,.page-header__art b { position:absolute; display:grid; place-items:center; font-style:normal; }
.page-header__art i { width:22px; height:22px; border-radius:7px; background:rgba(255,255,255,.38); transform:rotate(20deg); }
.page-header__art i:first-child { right:48px; top:24px; }.page-header__art i:nth-child(2) { right:250px; top:115px; width:15px; height:15px; }.page-header__art i:nth-child(3) { right:34px; bottom:28px; border-radius:50%; }
.page-header__art b { width:55px; height:55px; border-radius:17px; background:#fff; color:#6558E8; box-shadow:0 15px 35px rgba(50,42,114,.18); font-size:1.05rem; transform:rotate(-8deg); }
.page-header__art b:nth-of-type(1) { right:185px; top:24px; }.page-header__art b:nth-of-type(2) { right:45px; top:88px; transform:rotate(8deg); }.page-header__art b:nth-of-type(3) { right:177px; bottom:12px; width:48px; height:48px; }
.page-header--courses { color:#fff; background:radial-gradient(circle at 72% 12%,rgba(255,255,255,.19),transparent 24%),linear-gradient(125deg,#7768EE,#9A71E8); }
.page-header--courses h1,.page-header--courses .page-header__eyebrow { color:#fff; }.page-header--courses p { color:rgba(255,255,255,.83); }
.page-header--exams { background:radial-gradient(circle at 75% 15%,rgba(255,255,255,.17),transparent 25%),linear-gradient(125deg,#3AAFE1,#6558E8); }
.page-header--exams h1,.page-header--exams .page-header__eyebrow { color:#fff; }.page-header--exams p { color:rgba(255,255,255,.84); }
.page-header--docs { background:radial-gradient(circle at 72% 14%,rgba(255,255,255,.2),transparent 24%),linear-gradient(125deg,#FFB64A,#FF816B); }
.page-header--docs h1,.page-header--docs .page-header__eyebrow { color:#fff; }.page-header--docs p { color:rgba(255,255,255,.88); }
.page-header--search { background:radial-gradient(circle at 78% 10%,rgba(101,88,232,.12),transparent 22%),linear-gradient(130deg,#F3F0FF,#E7FAF4); }
.page-header--search .page-header__art b { color:#22A789; }
.page-header--course,.page-header--exam-detail { min-height:165px; padding:30px 0 75px; background:radial-gradient(circle at 78% 8%,rgba(255,255,255,.2),transparent 25%),linear-gradient(125deg,var(--theme-color,var(--primary)),color-mix(in srgb,var(--theme-color,var(--primary)) 70%,#3B327D)); }
.chapter-block--locked { border-color:#E3DFEB; background:#FBFAFD; }.chapter-block--locked .chapter-block__lessons { background:linear-gradient(90deg,#FCFBFE,#F7F5FB); }.chapter-lock-badge { flex:0 0 auto; padding:7px 10px; border-radius:999px; background:#EEEAFB; color:#6558E8; font-size:.63rem; font-weight:900; }.lesson-action-link.is-locked { border-color:#DDD8EA; background:#F3F0F8; color:#777083; }.lesson-action-link.is-locked svg { color:#8B82A5; }.lesson-action-link.is-locked:hover { border-color:#BDB5D7; background:#ECE8F5; }

.section--compact-top { position:relative; padding-top:42px; background:linear-gradient(180deg,#FAFBFF 0,#fff 340px); }
.filter-bar { position:relative; z-index:5; margin-top:-78px; margin-bottom:35px; padding:24px 28px 15px; border:1px solid rgba(70,61,135,.08); border-radius:25px; background:rgba(255,255,255,.95); box-shadow:0 20px 55px rgba(48,39,112,.12); backdrop-filter:blur(12px); }
.filter-group { margin-bottom:14px; }.filter-label { margin-bottom:9px; color:#343D58; font-size:.74rem; font-weight:900; }
.filter-tabs { gap:8px; }.filter-btn { min-height:42px; padding:9px 16px; border:1px solid #E8E7F0; background:#FAFAFD; color:#687188; font-size:.72rem; }
.filter-btn:hover { border-color:#CCC6F8; background:#F2F0FF; transform:translateY(-1px); }.filter-btn.active { border-color:#6558E8; background:linear-gradient(135deg,#6558E8,#8173F0); box-shadow:0 8px 18px rgba(101,88,232,.25); color:#fff; }
.results-info { display:flex; align-items:center; width:max-content; margin-bottom:24px; padding:8px 13px; border-radius:10px; background:#F3F1FF; color:#737C90; font-size:.72rem; }.results-info strong { color:#6558E8; }

/* Course worlds */
.course-section { margin-bottom:62px; padding:27px; border:1px solid rgba(90,77,166,.07); border-radius:32px; background:linear-gradient(145deg,rgba(248,247,255,.9),#fff 45%); box-shadow:0 18px 55px rgba(58,48,119,.07); }
.course-section__header { margin-bottom:25px; padding:0 0 19px; border-bottom:1px dashed #DCD9ED; }
.course-section__logo { width:58px; height:58px; border-radius:18px; box-shadow:inset 0 0 0 1px rgba(101,88,232,.1); }
.course-section__logo svg { width:31px; height:31px; fill:none; stroke:currentColor; stroke-width:1.8; }
.course-section__header h3 { font-size:1.15rem; }.course-section__header p { margin-top:3px; font-size:.76rem; }
.course-section__count { padding:7px 12px; background:#fff; border:1px solid #E9E7F1; color:#798195; font-size:.68rem; font-weight:800; box-shadow:0 5px 15px rgba(48,41,95,.06); }
.course-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.course-card { border:1px solid rgba(70,60,135,.08); border-radius:25px; box-shadow:0 11px 35px rgba(52,44,106,.09); }
.course-card:hover { transform:translateY(-7px); box-shadow:0 22px 48px rgba(52,44,106,.15); }
.course-card__cover { height:190px; overflow:hidden; align-items:flex-start; padding:15px; isolation:isolate; }
.course-card__cover::after { content:''; position:absolute; inset:0; z-index:-1; background:radial-gradient(circle at 18% 15%,rgba(255,255,255,.25),transparent 26%),linear-gradient(135deg,transparent,rgba(21,24,57,.12)); }
.course-card__cat-badge,.course-card__grade { position:relative; z-index:4; padding:6px 10px; border-radius:9px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.24); color:#fff; font-size:.64rem; font-weight:900; backdrop-filter:blur(7px); }
.course-card__art { position:absolute; inset:0; z-index:2; color:#fff; }.course-card__orbit { position:absolute; width:125px; height:125px; right:32px; top:39px; border:1px dashed rgba(255,255,255,.5); border-radius:50%; }.course-card__orbit::after { content:''; position:absolute; inset:25px; border:14px solid rgba(255,255,255,.1); border-radius:50%; }
.course-card__symbol { position:absolute; z-index:2; right:69px; top:76px; width:50px; height:50px; display:grid; place-items:center; border-radius:16px; background:#fff; color:var(--theme-color,var(--primary)); box-shadow:0 12px 30px rgba(22,22,48,.22); transform:rotate(-7deg); }.course-card__symbol svg { width:29px; height:29px; fill:none; stroke:currentColor; stroke-width:1.8; }
.course-card__art i { position:absolute; width:16px; height:16px; border-radius:5px; background:rgba(255,255,255,.37); transform:rotate(20deg); }.course-card__art i:nth-of-type(1) { right:25px; top:36px; }.course-card__art i:nth-of-type(2) { right:172px; top:100px; width:11px; height:11px; }.course-card__art i:nth-of-type(3) { right:28px; bottom:24px; border-radius:50%; }
.course-card__body { padding:20px; }.course-card__meta { font-size:.69rem; }.course-card__body h3 { margin:9px 0 8px; font-size:1rem; line-height:1.4; }.course-card__body p { min-height:66px; margin-bottom:14px; font-size:.77rem; line-height:1.6; }.course-card__footer { padding-top:13px; border-top:1px solid #ECEBF2; justify-content:space-between; font-size:.7rem; }

/* Mission cards */
.exam-list { gap:20px; }.exam-row { position:relative; overflow:hidden; gap:20px; padding:23px; border:1px solid rgba(72,62,139,.08); border-radius:25px; box-shadow:0 11px 35px rgba(48,40,106,.08); }
.exam-row::after { content:'✦'; position:absolute; right:122px; bottom:-15px; color:var(--theme-color,var(--primary)); opacity:.07; font-size:5rem; font-weight:900; transform:rotate(15deg); }
.exam-row:hover { transform:translateY(-4px); box-shadow:0 20px 45px rgba(48,40,106,.14); }
.exam-row__icon { width:78px; height:78px; border-radius:23px; color:var(--theme-color,var(--primary)); box-shadow:inset 0 0 0 1px rgba(101,88,232,.08); }.exam-row__icon svg { width:39px; height:39px; fill:none; stroke:currentColor; stroke-width:1.7; }
.exam-row__top { margin-bottom:7px; }.exam-row__main h3 { max-width:760px; margin-bottom:7px; font-size:1.05rem; }.exam-row__main > p { max-width:760px; font-size:.76rem; line-height:1.55; }.exam-row__meta { gap:8px; }.exam-row__meta span { padding:6px 9px; border-radius:8px; background:#F7F7FB; color:#737C90; font-size:.67rem; font-weight:700; }
.exam-status { padding:6px 10px; font-size:.64rem; }.exam-row__action .btn { position:relative; z-index:2; border-radius:13px; }

/* Workbook rows */
.doc-list { gap:20px; }.doc-row { position:relative; gap:24px; padding:23px; border:1px solid rgba(125,88,35,.09); border-radius:25px; box-shadow:0 11px 34px rgba(92,63,23,.08); }
.doc-row:hover { transform:translateY(-4px); box-shadow:0 20px 45px rgba(92,63,23,.13); }
.doc-row__type { position:relative; width:92px; height:118px; overflow:visible; border:0; border-radius:14px 20px 20px 14px; background:linear-gradient(145deg,var(--theme-color,var(--primary)),color-mix(in srgb,var(--theme-color,var(--primary)) 72%,#20233D)); box-shadow:8px 9px 0 rgba(65,55,120,.1); color:#fff; }
.doc-row__type::before { content:''; position:absolute; left:-5px; top:13px; bottom:13px; width:11px; border-top:3px solid #D6D3E3; border-bottom:3px solid #D6D3E3; box-shadow:0 18px 0 #D6D3E3,0 36px 0 #D6D3E3,0 54px 0 #D6D3E3,0 72px 0 #D6D3E3; border-radius:4px; }
.doc-row__type::after { content:''; position:absolute; width:48px; height:48px; right:-8px; bottom:-9px; border:10px solid rgba(255,255,255,.11); border-radius:50%; }
.doc-row__ext { position:relative; z-index:2; color:#fff; font-size:.74rem; }.doc-row__pages { position:relative; z-index:2; color:rgba(255,255,255,.8); font-size:.62rem; }
.doc-row__meta { flex-wrap:wrap; }.doc-badge { padding:5px 8px; border-radius:7px; background:#F5F3FF; font-size:.64rem; }.doc-row__main h3 { margin:7px 0; font-size:1.05rem; }.doc-row__main p { max-width:750px; margin-bottom:12px; font-size:.76rem; line-height:1.55; }.doc-row__stats { flex-wrap:wrap; font-size:.67rem; }.doc-row__actions .btn { min-width:125px; border-radius:12px; }

/* Course and exam detail */
.course-detail,.exam-detail { background:linear-gradient(180deg,#F7F5FF,#fff 500px); }
.course-detail__layout,.exam-detail__layout { gap:28px; }
.course-detail__hero,.exam-detail__hero { position:relative; overflow:hidden; padding:32px; border:1px solid rgba(72,61,140,.08); border-radius:29px; box-shadow:0 20px 55px rgba(49,40,108,.11); }
.course-detail__hero::after,.exam-detail__hero::after { content:'✦'; position:absolute; right:25px; top:12px; color:var(--theme-color,var(--primary)); opacity:.09; font-size:6rem; font-weight:900; transform:rotate(12deg); }
.category-badge,.grade-badge { padding:7px 11px; font-size:.68rem; }.category-badge svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; }
.course-detail__hero h1,.exam-detail__hero h1 { position:relative; z-index:2; max-width:780px; font-size:clamp(1.8rem,3vw,2.65rem); line-height:1.15; letter-spacing:-.035em; }.course-detail__desc,.exam-detail__hero p { position:relative; z-index:2; max-width:730px; font-size:.86rem; line-height:1.7; }
.course-detail__stats { gap:10px; }.course-detail__stats div { padding:10px 12px; border-radius:12px; background:#F7F6FC; color:#70798E; font-size:.72rem; }.course-detail__stats strong { color:#252D47; }
.course-chapters h2 { font-size:1.45rem; }.chapter-block { margin-bottom:13px; border:1px solid #ECEAF3; border-radius:19px; box-shadow:0 7px 22px rgba(54,47,102,.06); }.chapter-block__header { min-height:72px; padding:16px 19px; }.chapter-num { width:40px; height:40px; background:linear-gradient(135deg,#6558E8,#887BF2); color:#fff; box-shadow:0 7px 15px rgba(101,88,232,.24); }.chapter-block__title h3 { font-size:.9rem; }.lesson-item { min-height:56px; border-top:1px dashed #EBE9F1; border-radius:0; }.lesson-item__title { font-size:.77rem; }
.course-sidebar-card,.exam-sidebar-card { border:1px solid rgba(72,61,140,.08); border-radius:25px; box-shadow:0 19px 50px rgba(48,39,106,.13); }.course-sidebar-card__cover { position:relative; height:135px; overflow:hidden; }.course-sidebar-card__cover::after { content:''; position:absolute; width:120px; height:120px; border:22px solid rgba(255,255,255,.1); border-radius:50%; right:-20px; bottom:-50px; }.course-sidebar-card__icon svg,.exam-sidebar-card__icon svg { width:52px; height:52px; fill:none; stroke:#fff; stroke-width:1.6; }.course-sidebar-card__body,.exam-sidebar-card__body { padding:23px; }.price-tag { font-size:1.65rem; }.course-sidebar-card__features li { padding:10px 0; font-size:.73rem; }
.exam-tabs { border:1px solid rgba(72,61,140,.08); border-radius:25px; box-shadow:0 13px 38px rgba(48,39,106,.08); }.tab-nav { padding:7px; border:0; background:#F6F4FF; }.tab-btn { flex:1; border-radius:14px; }.tab-btn::after { display:none; }.tab-btn.active { background:#fff; box-shadow:0 6px 17px rgba(55,46,112,.11); }.tab-content { padding:27px; }.info-item { padding:17px; border:1px solid #ECEAF4; border-radius:15px; background:#FBFAFF; }.info-item__icon { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:#EEEAFE; }.rule__num { width:37px; height:37px; box-shadow:0 6px 14px rgba(101,88,232,.22); }.leaderboard-table { overflow:hidden; border-radius:14px; }.leaderboard-table th { background:#F2F0FA; }
.exam-sidebar-card__top { padding:22px; min-height:95px; }.exam-sidebar-card__icon { width:56px; height:56px; display:grid; place-items:center; border-radius:17px; background:var(--theme-color,var(--primary)); }.exam-sidebar-card__icon svg { width:31px; height:31px; }.exam-sidebar-card__info > div { padding:10px 0; font-size:.73rem; }

/* Search and authentication */
.page-header--search + .section--compact-top .search-inline { margin-top:-75px; }.search-inline form { padding:9px; border:1px solid rgba(72,61,140,.08); border-radius:22px; box-shadow:0 19px 52px rgba(48,39,106,.13); }.search-inline svg { width:30px; height:30px; color:#6558E8; }.search-inline input { margin:0; min-height:54px; font-size:.9rem; }.search-inline .btn { min-width:110px; border-radius:14px; }.search-group { margin-bottom:48px; padding:25px; border:1px solid #ECEAF4; border-radius:27px; background:#fff; box-shadow:0 12px 36px rgba(48,39,106,.07); }.search-group__title { border-bottom:1px dashed #DCD9EC; font-size:1.25rem; }
.modal__backdrop { background:rgba(27,28,61,.62); backdrop-filter:blur(9px); }.modal__dialog { overflow:hidden; max-width:480px; padding:35px; border:1px solid rgba(255,255,255,.7); border-radius:29px; box-shadow:0 35px 90px rgba(18,18,48,.3); }.modal__dialog::before { content:''; position:absolute; z-index:0; left:0; right:0; top:0; height:125px; background:radial-gradient(circle at 75% 10%,rgba(255,255,255,.2),transparent 24%),linear-gradient(135deg,#6558E8,#8B78EF); }.modal__dialog > * { position:relative; z-index:1; }.modal__icon { width:68px; height:68px; display:grid; place-items:center; margin:4px auto 21px; border:5px solid rgba(255,255,255,.75); border-radius:21px; background:#fff; box-shadow:0 10px 28px rgba(35,29,87,.25); font-size:2rem; transform:rotate(-4deg); }.modal__close { z-index:3; color:#fff; }.modal__close:hover { background:rgba(255,255,255,.16); color:#fff; }.modal__dialog h2 { font-size:1.45rem; }.modal__dialog > p { font-size:.77rem; }.modal__dialog input,.modal__dialog select { min-height:52px; border-color:#E5E3ED; border-radius:13px; background:#FCFCFE; font-size:.82rem; }.modal__dialog label { font-size:.72rem; }.modal__footer { padding-top:18px; border-top:1px solid #EEEAF4; }

@media (max-width:1100px) {
  .page-header__art { right:-4%; transform:scale(.86); }.course-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px) {
  .brand__text { white-space:nowrap; }
  .nav-toggle { display:flex; }
  .nav-content { display:none; position:fixed; top:var(--header-h); left:0; right:0; z-index:100; flex-direction:column; gap:18px; padding:24px; background:#fff; box-shadow:var(--shadow-lg); }
  .nav-content.open { display:flex; }
  .nav-links { width:100%; flex-direction:column; gap:2px; }
  .nav-links a { padding:12px 4px; font-size:1rem; }
  .nav-actions { width:100%; justify-content:center; flex-wrap:wrap; }
}
@media (max-width:820px) {
  .page-header { min-height:245px; padding-bottom:52px; }.page-header h1 { max-width:580px; }.page-header__art { right:-115px; opacity:.5; transform:scale(.75); }.page-header .container { padding-right:70px; }
  .filter-bar { margin-top:-68px; padding:20px; }.filter-tabs { flex-wrap:nowrap; overflow-x:auto; padding-bottom:8px; scrollbar-width:thin; }.filter-btn { flex:0 0 auto; }
  .course-section { padding:22px; }.course-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.course-card__cover { height:175px; }
  .course-detail__layout,.exam-detail__layout { margin-top:-65px; }.course-detail__sidebar,.exam-detail__sidebar { order:2; }.course-sidebar-card,.exam-sidebar-card { position:static; }
  .course-sidebar-card__cover { height:105px; }.course-sidebar-card__body,.exam-sidebar-card__body { padding:20px; }
}
@media (max-width:620px) {
  .page-header { min-height:230px; padding:28px 0 48px; }.page-header .container { padding-right:20px; }.page-header__art { display:none; }.page-header h1 { font-size:2rem; }.page-header h1 br { display:none; }.page-header p { font-size:.84rem; }.page-header .breadcrumb { display:none; }.detail-back-link { min-height:50px; margin-bottom:8px; padding-inline:16px; }.chapter-lock-badge { margin-left:auto; }.chapter-block--locked .chapter-block__header { flex-wrap:wrap; }
  .section--compact-top { padding-top:35px; }.filter-bar { margin-top:-62px; margin-inline:-2px; padding:17px 15px 9px; border-radius:20px; }.filter-label { font-size:.78rem; }.filter-btn { min-height:43px; font-size:.76rem; }
  .course-section { margin-inline:-6px; padding:18px 14px; border-radius:24px; }.course-section__header { align-items:flex-start; gap:12px; }.course-section__logo { width:48px; height:48px; }.course-section__count { display:none; }.course-grid { grid-template-columns:1fr; }.course-card__cover { height:195px; }.course-card__body p { min-height:0; }
  .exam-row { padding:18px; }.exam-row__icon { width:62px; height:62px; }.exam-row__main h3 { font-size:1rem; }.exam-row__action { width:100%; }.exam-row__action .btn { width:100%; }.exam-row::after { display:none; }
  .doc-row { padding:18px; }.doc-row__type { width:100%; height:75px; flex-direction:row; gap:8px; box-shadow:6px 7px 0 rgba(65,55,120,.09); }.doc-row__type::before { display:none; }.doc-row__actions { width:100%; }.doc-row__actions .btn { flex:1; min-width:0; }
  .course-detail__layout,.exam-detail__layout { margin-top:-62px; }.course-detail__hero,.exam-detail__hero { padding:24px 20px; border-radius:23px; }.course-detail__stats div { width:calc(50% - 5px); }.course-detail__hero::after,.exam-detail__hero::after { display:none; }.chapter-block__header { padding:14px; }.chapter-block__title { align-items:flex-start; }.lesson-item { padding-inline:10px; }.lesson-item__duration { display:block; margin:3px 0 0; }.tab-content { padding:20px 15px; }.info-grid { grid-template-columns:1fr; }.leaderboard-table th,.leaderboard-table td { padding:10px 7px; font-size:.7rem; }
  .page-header--search + .section--compact-top .search-inline { margin-top:-65px; }.search-inline form { border-radius:18px; }.search-inline svg { display:none; }.search-inline input { padding-inline:10px; }.search-inline .btn { min-width:76px; }.search-group { padding:17px 14px; border-radius:22px; }
  .modal { padding:14px; }.modal__dialog { max-height:94vh; overflow-y:auto; padding:29px 20px 24px; }.modal__dialog::before { height:110px; }.modal__icon { width:60px; height:60px; margin-bottom:17px; }.form-row { align-items:flex-start; gap:10px; }
}

/* A lesson may offer PDF, video, and advanced content. No mode is a completion gate. */
.lesson-mode-switch{display:flex;align-items:center;gap:6px;margin-top:22px;padding:6px;border:1px solid #e4e0ed;border-radius:17px;background:#f2eff8;box-shadow:0 8px 22px rgba(54,44,101,.06)}
.lesson-mode-switch button{min-width:145px;min-height:48px;display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 17px;border-radius:12px;color:#706b7d;font-size:.76rem;font-weight:900;transition:.2s}.lesson-mode-switch button.active{background:#fff;color:#5949c7;box-shadow:0 6px 16px rgba(54,44,101,.1)}.lesson-mode-switch>small{margin-left:auto;padding:0 12px;color:#858b9b;font-size:.62rem}
.lesson-pdf-panel,.lesson-video-panel{margin-top:14px;overflow:hidden;border:1px solid rgba(62,49,126,.11);border-radius:27px;background:#fff;box-shadow:0 17px 48px rgba(51,42,103,.1)}.lesson-pdf-panel[hidden],.lesson-video-panel[hidden],.lesson-board[hidden]{display:none}
.lesson-pdf-panel>header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;border-bottom:1px solid #e8e4ef;background:linear-gradient(100deg,#f6f3ff,#fff 60%,#eefaf6)}.lesson-pdf-panel>header>div:first-child{min-width:0}.lesson-pdf-panel>header span{color:#6558e8;font-size:.64rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.lesson-pdf-panel>header h2{margin:4px 0 3px;font-size:1.16rem;line-height:1.3}.lesson-pdf-panel>header p{margin:0;color:#757d90;font-size:.72rem;line-height:1.5}.lesson-pdf-panel>header>div:last-child{display:flex;flex:0 0 auto;gap:8px}.lesson-pdf-panel>header .btn{min-height:44px;padding:9px 14px;font-size:.68rem}.lesson-pdf-panel>iframe{width:100%;height:min(78vh,980px);min-height:720px;display:block;border:0;background:#e9e9ee}
.lesson-video-player{position:relative;aspect-ratio:16/9;background:#1d1c26}.lesson-video-player iframe{width:100%;height:100%;position:absolute;inset:0;border:0}.lesson-video-panel>div:last-child{padding:20px 25px 23px}.lesson-video-panel>div:last-child>span{color:#6558e8;font-size:.61rem;font-weight:900;text-transform:uppercase;letter-spacing:.07em}.lesson-video-panel h2{margin:6px 0 5px;font-size:1.15rem}.lesson-video-panel p{color:#777e90;font-size:.7rem;line-height:1.55}
@media(max-width:900px){.lesson-pdf-panel>iframe{height:72vh;min-height:620px}}
@media(max-width:620px){.lesson-mode-switch{align-items:stretch;flex-wrap:wrap}.lesson-mode-switch button{min-width:0;flex:1 1 calc(50% - 6px);padding-inline:9px}.lesson-mode-switch>small{width:100%;margin:0;padding:4px 7px;text-align:center}.lesson-pdf-panel,.lesson-video-panel{border-radius:21px}.lesson-pdf-panel>header{align-items:stretch;flex-direction:column;padding:17px}.lesson-pdf-panel>header>div:last-child{display:grid;grid-template-columns:1fr 1fr}.lesson-pdf-panel>header .btn{width:100%;padding-inline:8px}.lesson-pdf-panel>iframe{height:68vh;min-height:520px}.lesson-video-panel>div:last-child{padding:17px}}

/* ═══════════════════════════════════════════════
   LESSON QUIZ — FOCUSED PRACTICE ROOM
   ═══════════════════════════════════════════════ */
.lesson-item { gap:14px; }
.lesson-item__info { min-width:0; }.lesson-item__title { font-size:.86rem; }.lesson-item__duration { font-size:.7rem; }
.course-detail__sidebar .course-sidebar-card { position:static; }
.lesson-quiz-link { margin-left:auto; min-width:132px; min-height:46px; display:grid; grid-template-columns:26px 1fr; grid-template-rows:auto auto; align-items:center; column-gap:9px; padding:8px 11px; border:1px solid #DDD9F4; border-radius:13px; background:#F7F5FF; color:#6558E8; transition:.2s ease; }
.lesson-quiz-link:hover { transform:translateY(-2px); border-color:#BDB5F2; background:#EFECFF; box-shadow:0 8px 20px rgba(75,62,151,.12); }
.lesson-quiz-link svg { grid-row:1/3; width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.lesson-quiz-link span { align-self:end; font-size:.7rem; font-weight:900; line-height:1.1; }.lesson-quiz-link b { align-self:start; color:#9298A9; font-size:.58rem; line-height:1.2; }
.lesson-action-link { margin-left:auto; min-width:138px; min-height:48px; display:grid; grid-template-columns:27px 1fr; grid-template-rows:auto auto; align-items:center; column-gap:9px; padding:8px 11px; border:1px solid #DDE7EC; border-radius:13px; background:#F5FAFC; color:#327B9D; transition:.2s ease; }
.lesson-action-link:hover { transform:translateY(-2px); border-color:#AFCFDA; background:#ECF8FC; box-shadow:0 8px 20px rgba(44,113,143,.12); }.lesson-action-link svg { grid-row:1/3; width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }.lesson-action-link span { align-self:end; font-size:.7rem; font-weight:900; line-height:1.1; }.lesson-action-link b { align-self:start; color:#9199A8; font-size:.58rem; line-height:1.2; }
.lesson-item--exercise { margin-top:4px; border-top:2px solid #E7E1FF; border-radius:15px; background:linear-gradient(90deg,#F5F2FF,#FFFAF0); }.lesson-item--exercise .lesson-item__num { color:#6558E8; }.lesson-item--exercise .lesson-item__title { color:#51449D; }.chapter-quiz-link { border-color:#D8D1FA; background:#EFECFF; color:#6558E8; }.chapter-quiz-link:hover { border-color:#B8AEF4; background:#E7E2FF; box-shadow:0 8px 20px rgba(83,67,174,.15); }

body.quiz-mode { overflow-x:hidden; background:#F7F4ED; }
body.quiz-mode .site-header,body.quiz-mode .site-footer { display:none; }
body.quiz-mode #main-content { min-height:100vh; }
.quiz-page { min-height:100vh; padding-bottom:102px; color:#20263B; background:radial-gradient(circle at 8% 30%,rgba(255,184,77,.13),transparent 24%),radial-gradient(circle at 90% 40%,rgba(101,88,232,.13),transparent 25%),#F9F6EF; }
.quiz-topbar { position:sticky; z-index:50; top:0; min-height:92px; display:grid; grid-template-columns:180px minmax(320px,650px) 230px; align-items:center; justify-content:space-between; gap:28px; padding:15px max(28px,calc((100vw - 1340px)/2)); border-bottom:1px solid rgba(76,63,144,.11); background:rgba(255,255,255,.91); box-shadow:0 8px 30px rgba(40,34,83,.07); backdrop-filter:blur(14px); }
.quiz-exit { width:max-content; display:flex; align-items:center; gap:8px; color:#564A8C; font-size:.78rem; font-weight:900; }.quiz-exit:hover { color:#6558E8; }.quiz-exit svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
.quiz-progress-wrap > div:first-child { display:flex; justify-content:space-between; margin-bottom:8px; color:#4F466F; font-size:.68rem; }.quiz-progress-wrap span { font-weight:800; }
.quiz-progress { height:11px; overflow:hidden; border-radius:999px; background:#E7E4E1; }.quiz-progress i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#6558E8,#8D7FF5,#41C7A4); box-shadow:0 0 16px rgba(101,88,232,.28); transition:width .35s ease; }.quiz-progress i.progress-20 { width:20%; }.quiz-progress i.progress-40 { width:40%; }.quiz-progress i.progress-60 { width:60%; }.quiz-progress i.progress-80 { width:80%; }.quiz-progress i.progress-100 { width:100%; }
.quiz-rewards { display:flex; align-items:center; justify-content:flex-end; gap:10px; }.quiz-timer,.quiz-points { min-height:48px; display:flex; align-items:center; justify-content:center; gap:8px; border-radius:16px; font-size:.8rem; font-weight:900; }.quiz-timer { min-width:112px; padding:8px 13px; border:1px solid #FFD5B1; background:#FFF0E3; color:#B75817; }.quiz-timer svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }.quiz-points { min-width:82px; padding:8px 12px; border:1px solid #CDE0FF; background:#EAF3FF; color:#2866A8; }.quiz-points > b { width:25px; height:25px; display:grid; place-items:center; border-radius:50%; background:#2866A8; color:#fff; }

.quiz-workspace { width:min(1320px,calc(100% - 48px)); display:grid; grid-template-columns:265px minmax(0,1fr); gap:34px; margin:38px auto 0; }
.quiz-sidebar { min-width:0; width:100%; height:max-content; position:sticky; top:128px; padding:21px; border:1px solid rgba(71,59,137,.1); border-radius:25px; background:rgba(255,255,255,.88); box-shadow:0 18px 45px rgba(60,48,117,.09); backdrop-filter:blur(10px); }
.quiz-sidebar__brand { display:flex; align-items:center; gap:12px; padding-bottom:17px; border-bottom:1px dashed #DCD8E8; }.quiz-sidebar__brand > span { width:49px; height:49px; flex:0 0 auto; display:grid; place-items:center; border-radius:15px; background:var(--theme-soft,#F0EDFF); color:var(--theme-color,#6558E8); }.quiz-sidebar__brand svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.7; }.quiz-sidebar__brand div { min-width:0; display:flex; flex-direction:column; }.quiz-sidebar__brand small { color:#9197A8; font-size:.58rem; font-weight:900; letter-spacing:.8px; text-transform:uppercase; }.quiz-sidebar__brand strong { margin-top:3px; overflow:hidden; font-size:.75rem; line-height:1.35; text-overflow:ellipsis; }
.quiz-sidebar__meta { display:flex; align-items:center; gap:10px; padding:16px 0; }.quiz-sidebar__meta > span { width:36px; height:36px; flex:0 0 auto; display:grid; place-items:center; border-radius:12px; background:#6558E8; color:#fff; font-size:.68rem; font-weight:900; }.quiz-sidebar__meta p { color:#687087; font-size:.67rem; font-weight:800; line-height:1.35; }
.quiz-question-nav { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; }.quiz-question-nav button { aspect-ratio:1; display:grid; place-items:center; border:2px solid #E7E4E0; border-radius:50%; background:#F4F2EE; color:#74788A; font-size:.68rem; font-weight:900; transition:.2s ease; }.quiz-question-nav button:hover { border-color:#BFB7EF; }.quiz-question-nav button.active { border-color:#6558E8; background:#DDD7FF; color:#4F40A7; box-shadow:0 0 0 4px #F0EDFF; }.quiz-question-nav button.done { border-color:#41C7A4; background:#E0F8F1; color:#168A70; }.quiz-question-nav button.done::after { content:'✓'; position:absolute; }
.quiz-question-nav button { position:relative; }.quiz-question-nav button.done::after { right:-4px; top:-5px; width:15px; height:15px; display:grid; place-items:center; border-radius:50%; background:#20A985; color:#fff; font-size:.48rem; }
.quiz-tip { display:flex; gap:10px; margin-top:18px; padding:13px; border-radius:15px; background:#FFF7E6; }.quiz-tip > span { font-size:1.2rem; }.quiz-tip p { display:flex; flex-direction:column; }.quiz-tip strong { color:#75521A; font-size:.66rem; }.quiz-tip small { margin-top:3px; color:#8B795A; font-size:.58rem; line-height:1.45; }

.quiz-stage { position:relative; min-width:0; width:100%; min-height:540px; padding:8px 40px 40px; }
.quiz-stage__decor { position:absolute; inset:0; pointer-events:none; }.quiz-stage__decor i { position:absolute; width:20px; height:20px; border-radius:6px; background:#FFB84D; opacity:.35; transform:rotate(20deg); }.quiz-stage__decor i:first-child { left:0; top:45px; }.quiz-stage__decor i:nth-child(2) { right:1%; top:10px; width:43px; height:43px; border:8px solid #41C7A4; border-radius:50%; background:transparent; }.quiz-stage__decor i:last-child { right:5%; bottom:22%; background:#6558E8; }
.quiz-question-card { position:relative; z-index:2; min-width:0; width:100%; overflow:hidden; min-height:450px; padding:42px 48px; border:1px solid rgba(72,61,133,.13); border-radius:30px; background:rgba(255,255,255,.96); box-shadow:0 22px 60px rgba(64,48,111,.12); }
.quiz-question-card::before { content:''; position:absolute; width:150px; height:150px; right:-45px; top:-55px; border:30px solid rgba(101,88,232,.045); border-radius:50%; }
.quiz-question__head { position:relative; z-index:2; display:flex; align-items:center; gap:9px; }.quiz-question__head span,.quiz-question__head small { padding:6px 11px; border-radius:999px; font-size:.64rem; font-weight:900; }.quiz-question__head span { background:#6558E8; color:#fff; }.quiz-question__head small { border:1px solid #FFD1AE; background:#FFF4E9; color:#EA782A; }
.quiz-question__head em { padding:6px 11px; border-radius:999px; background:#E8F9F4; color:#168A70; font-size:.64rem; font-style:normal; font-weight:900; }
.quiz-question-card h1 { position:relative; z-index:2; max-width:860px; margin:22px 0 25px; font-size:clamp(1.55rem,2.8vw,2.35rem); line-height:1.28; letter-spacing:-.035em; }
.quiz-options { position:relative; z-index:2; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:28px; }.quiz-option { min-height:78px; display:grid; grid-template-columns:48px 1fr 26px; align-items:center; gap:15px; padding:13px 17px; border:2px solid #E9E5E0; border-radius:18px; background:#F8F5F0; color:#333544; text-align:left; box-shadow:0 4px 0 #E2DED8; transition:.2s ease; }.quiz-option:hover:not(:disabled) { transform:translateY(-2px); border-color:#BFB6F3; background:#F4F1FF; box-shadow:0 7px 0 #E1DCF6; }.quiz-option > b { width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:#E9E5E0; color:#555362; font-size:1rem; }.quiz-option > span { font-size:.86rem; font-weight:750; }.quiz-option > i { width:25px; height:25px; display:none; place-items:center; border-radius:50%; color:#fff; font-size:.7rem; font-style:normal; font-weight:900; }
.quiz-option.selected { border-color:#6558E8; background:#F0EDFF; box-shadow:0 4px 0 #CFC8F4; }.quiz-option.selected > b { background:#6558E8; color:#fff; }.quiz-option.correct { border-color:#41C7A4; background:#E9FAF5; box-shadow:0 4px 0 #B7EADD; }.quiz-option.correct > b,.quiz-option.correct > i { display:grid; background:#20A985; color:#fff; }.quiz-option.wrong { border-color:#EF7A70; background:#FFF0EE; box-shadow:0 4px 0 #F0C5C0; }.quiz-option.wrong > b { background:#E96358; color:#fff; }
.quiz-options.is-multiple .quiz-option>i{display:grid;border:2px solid #c9c1dc;border-radius:8px;background:#fff;color:transparent}.quiz-options.is-multiple .quiz-option.selected>i{border-color:#6558e8;background:#6558e8;color:#fff}.quiz-fill-answer{position:relative;z-index:2;max-width:760px;display:grid;gap:10px;margin-top:34px;padding:24px;border:2px solid #e5e0f0;border-radius:22px;background:linear-gradient(135deg,#faf8ff,#fff)}.quiz-fill-answer>label{color:#4f466f;font-size:1rem;font-weight:900}.quiz-fill-answer>div{display:grid;grid-template-columns:minmax(0,1fr) 54px;align-items:center;overflow:hidden;border:2px solid #cfc7ec;border-radius:16px;background:#fff;box-shadow:0 5px 0 #ebe6f7}.quiz-fill-answer input{width:100%;min-height:68px;padding:14px 18px;border:0;outline:0;background:transparent;color:#171d36;font:inherit;font-size:1.15rem;font-weight:800}.quiz-fill-answer>div:focus-within{border-color:#6558e8;box-shadow:0 5px 0 #d8d1f6}.quiz-fill-answer>div>span{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#eeeaff;color:#6558e8;font-size:1.25rem}.quiz-fill-answer>small{color:#7a7890;font-size:.82rem}.quiz-fill-answer>small b{color:#5c4ed7}
.quiz-sequence { display:flex; align-items:center; justify-content:center; gap:12px; margin:20px 0; }.quiz-sequence span { width:60px; height:60px; display:grid; place-items:center; border-radius:18px; background:#F2F0FF; color:#6558E8; font-size:1.25rem; font-weight:900; box-shadow:0 8px 20px rgba(82,66,167,.1); }.quiz-sequence i { color:#B4AFBF; font-style:normal; font-weight:900; }.quiz-sequence .is-missing { background:#6558E8; color:#fff; transform:rotate(5deg); }
.quiz-objects { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; max-width:720px; margin:16px auto; padding:16px; border-radius:18px; background:#FFF8E8; color:#F4AC2F; font-size:1.4rem; }.quiz-objects b { margin:0 8px; color:#6558E8; }.quiz-shapes { height:105px; display:flex; align-items:center; justify-content:center; gap:55px; }.quiz-shapes span { display:block; width:60px; height:60px; background:#41C7A4; opacity:.85; }.quiz-shapes .shape-circle { border-radius:50%; background:#3BB7E8; }.quiz-shapes .shape-triangle { width:0; height:0; border-left:38px solid transparent; border-right:38px solid transparent; border-bottom:66px solid #FF8A6E; background:transparent; }.quiz-number-orbit { display:flex; justify-content:center; gap:18px; margin:20px 0; }.quiz-number-orbit span { width:62px; height:62px; display:grid; place-items:center; border-radius:50%; background:#EEF7FF; color:#327DB5; font-size:1.1rem; font-weight:900; box-shadow:0 8px 18px rgba(55,122,175,.12); }.quiz-share { display:flex; justify-content:center; gap:15px; margin:18px 0; }.quiz-share div { display:flex; flex-direction:column; padding:11px 17px; border-radius:14px; background:#FFF3DE; color:#F09A2B; }.quiz-share small { margin-top:4px; color:#8A7356; text-align:center; font-size:.58rem; }
.quiz-feedback { position:relative; z-index:3; display:flex; align-items:flex-start; gap:12px; margin:18px 18px 0; padding:15px 18px; border-radius:17px; box-shadow:0 10px 25px rgba(40,38,70,.09); }.quiz-feedback[hidden] { display:none; }.quiz-feedback > span { width:36px; height:36px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; color:#fff; font-weight:900; }.quiz-feedback p { display:flex; flex-direction:column; }.quiz-feedback strong { font-size:.76rem; }.quiz-feedback small { margin-top:3px; font-size:.67rem; line-height:1.45; }.quiz-feedback.is-correct { border:1px solid #A9E3D4; background:#E9FAF5; color:#14775F; }.quiz-feedback.is-correct > span { background:#20A985; }.quiz-feedback.is-wrong { border:1px solid #F3C1BC; background:#FFF0EE; color:#A74740; }.quiz-feedback.is-wrong > span { background:#E96358; }

.quiz-actions { position:fixed; z-index:45; left:0; right:0; bottom:0; border-top:4px solid #6558E8; background:rgba(255,255,255,.96); box-shadow:0 -12px 35px rgba(52,43,100,.09); backdrop-filter:blur(12px); }.quiz-actions[hidden] { display:none; }.quiz-actions__inner { width:min(1100px,calc(100% - 48px)); min-height:84px; display:grid; grid-template-columns:180px 1fr 180px; align-items:center; gap:28px; margin:auto; }.quiz-actions .btn { min-height:52px; border-radius:14px; }.quiz-actions .btn svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }.quiz-actions__inner > p { display:flex; flex-direction:column; color:#555C70; text-align:center; }.quiz-actions__inner > p span { font-size:.72rem; font-weight:900; }.quiz-actions__inner > p small { margin-top:2px; color:#959AA8; font-size:.62rem; }

.quiz-result { position:relative; grid-column:1/-1; width:min(760px,100%); overflow:hidden; margin:15px auto 80px; padding:52px; border:1px solid rgba(75,62,145,.1); border-radius:33px; background:#fff; box-shadow:0 28px 75px rgba(55,44,116,.14); text-align:center; }.quiz-result::before { content:''; position:absolute; left:0; right:0; top:0; height:150px; background:radial-gradient(circle at 72% 10%,rgba(255,255,255,.18),transparent 26%),linear-gradient(135deg,#6558E8,#8C7BF2); }.quiz-result > * { position:relative; z-index:2; }.quiz-result__mascot { width:90px; height:90px; display:grid; place-items:center; margin:28px auto 30px; border:7px solid #fff; border-radius:27px; background:#FFCA61; color:#fff; box-shadow:0 14px 35px rgba(43,35,102,.24); font-size:2.6rem; transform:rotate(-5deg); }.quiz-result > small { color:#6558E8; font-size:.65rem; font-weight:900; letter-spacing:1px; text-transform:uppercase; }.quiz-result h1 { margin:7px 0; font-size:2.5rem; }.quiz-result > p { color:#747C90; font-size:.78rem; }.quiz-result__score { width:145px; height:145px; display:flex; flex-direction:column; align-items:center; justify-content:center; margin:28px auto; border:12px solid #E6E1FF; border-top-color:#6558E8; border-radius:50%; }.quiz-result__score strong { color:#6558E8; font-size:2rem; }.quiz-result__score span { color:#8C92A2; font-size:.58rem; }.quiz-result__stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.quiz-result__stats div { display:flex; flex-direction:column; padding:16px; border-radius:15px; background:#F7F5FF; }.quiz-result__stats b { color:#6558E8; font-size:1rem; }.quiz-result__stats span { margin-top:2px; color:#8B91A1; font-size:.6rem; }.quiz-result__actions { display:flex; justify-content:center; gap:12px; margin-top:28px; }.quiz-result__confetti i { position:absolute; z-index:3; width:12px; height:22px; border-radius:4px; background:#FFB84D; transform:rotate(20deg); }.quiz-result__confetti i:first-child { left:9%; top:22%; }.quiz-result__confetti i:nth-child(2) { right:11%; top:18%; background:#41C7A4; transform:rotate(-25deg); }.quiz-result__confetti i:nth-child(3) { left:18%; top:40%; background:#3BB7E8; }.quiz-result__confetti i:nth-child(4) { right:20%; top:42%; background:#FF7D67; }.quiz-result__confetti i:last-child { left:49%; top:17%; width:8px; height:8px; border-radius:50%; }

@media (max-width:1000px) {
  .quiz-topbar { grid-template-columns:110px minmax(280px,1fr) 190px; gap:18px; padding-inline:24px; }.quiz-workspace { grid-template-columns:1fr; }.quiz-sidebar { position:static; display:grid; grid-template-columns:1fr auto; align-items:center; gap:15px; }.quiz-sidebar__brand { padding:0; border:0; }.quiz-sidebar__meta,.quiz-tip { display:none; }.quiz-question-nav { min-width:250px; }.quiz-stage { padding-inline:12px; }
}
@media (max-width:700px) {
  .quiz-page { padding-bottom:94px; }.quiz-topbar { min-height:82px; grid-template-columns:44px 1fr auto; gap:11px; padding:12px 15px; }.quiz-exit span { display:none; }.quiz-progress-wrap > div:first-child span { display:none; }.quiz-rewards { gap:6px; }.quiz-timer { min-width:82px; min-height:42px; padding:6px 9px; }.quiz-timer svg { width:18px; }.quiz-points { display:none; }
  .quiz-workspace { width:calc(100% - 24px); gap:15px; margin-top:16px; }.quiz-sidebar { display:block; padding:14px; border-radius:19px; }.quiz-sidebar__brand > span { width:42px; height:42px; }.quiz-sidebar__brand strong { font-size:.72rem; }.quiz-question-nav { min-width:0; margin-top:13px; }.quiz-question-nav button { width:38px; justify-self:center; }
  .quiz-stage { min-height:0; padding:0; }.quiz-stage__decor { display:none; }.quiz-question-card { min-height:0; padding:24px 17px; border-radius:23px; }.quiz-question-card h1 { margin:18px 0; font-size:1.45rem; }.quiz-options { grid-template-columns:1fr; gap:11px; margin-top:20px; }.quiz-option { min-height:66px; grid-template-columns:42px 1fr 24px; padding:10px 12px; }.quiz-option > b { width:39px; height:39px; }.quiz-option > span { font-size:.82rem; }.quiz-fill-answer{margin-top:20px;padding:16px}.quiz-fill-answer input{min-height:58px;font-size:1rem}.quiz-feedback { margin:12px 0 0; }
  .quiz-sequence { gap:5px; overflow-x:auto; justify-content:flex-start; padding:8px 2px; }.quiz-sequence span { width:48px; height:48px; flex:0 0 auto; border-radius:14px; }.quiz-shapes { gap:27px; }.quiz-number-orbit { gap:8px; }.quiz-number-orbit span { width:53px; height:53px; }.quiz-share { gap:6px; }.quiz-share div { padding:9px; }
  .quiz-actions__inner { width:calc(100% - 24px); min-height:78px; grid-template-columns:50px 1fr 128px; gap:9px; }.quiz-actions__inner > p { text-align:left; }.quiz-actions__inner > p small { display:none; }.quiz-prev { min-width:0; width:50px; padding:0; font-size:0; }.quiz-prev svg { margin:0; }.quiz-check { padding-inline:14px; font-size:.75rem; }
  .quiz-result { margin:0 auto 30px; padding:35px 17px 28px; border-radius:25px; }.quiz-result__mascot { width:75px; height:75px; margin-top:34px; }.quiz-result h1 { font-size:2rem; }.quiz-result__stats { gap:7px; }.quiz-result__stats div { padding:12px 5px; }.quiz-result__actions { flex-direction:column; }.quiz-result__actions .btn { width:100%; }
  .lesson-item { align-items:flex-start; flex-wrap:wrap; }.lesson-item__num { padding-top:10px; }.lesson-item__info { width:calc(100% - 48px); }.lesson-quiz-link,.lesson-action-link { width:100%; margin:3px 0 0 42px; }
}

/* ═══════════════════════════════════════════════
   LESSON LEARNING PAGE
   ═══════════════════════════════════════════════ */
.lesson-page-header { min-height:150px; }
#main-content { view-transition-name:page-content; }
#main-content.lesson-route-pending .lesson-learning { pointer-events:none; cursor:progress; }
::view-transition-old(root),::view-transition-new(root) { animation:none; mix-blend-mode:normal; }
::view-transition-old(page-content) { animation:lesson-page-out .13s ease both; }
::view-transition-new(page-content) { animation:lesson-page-in .24s ease both; }
@keyframes lesson-page-out { to { opacity:.18; transform:translateY(-4px); } }
@keyframes lesson-page-in { from { opacity:.18; transform:translateY(7px); } to { opacity:1; transform:none; } }
.lesson-learning { padding:0 0 90px; background:radial-gradient(circle at 92% 15%,rgba(101,88,232,.1),transparent 22%),linear-gradient(180deg,#F8F5FF,#FFF9F0 54%,#fff); }
.lesson-learning__layout { display:grid; grid-template-columns:270px minmax(0,1fr); gap:35px; align-items:start; }
.lesson-outline { position:sticky; top:95px; z-index:5; margin-top:-48px; overflow:hidden; border:1px solid rgba(73,61,140,.1); border-radius:25px; background:rgba(255,255,255,.96); box-shadow:0 20px 55px rgba(53,42,111,.12); }
.lesson-outline__head { display:flex; align-items:center; gap:12px; padding:20px; background:linear-gradient(135deg,var(--theme-soft,#F1EEFF),#fff); }.lesson-outline__head > span { width:48px; height:48px; flex:0 0 auto; display:grid; place-items:center; border-radius:15px; background:#fff; color:var(--theme-color,#6558E8); box-shadow:0 8px 20px rgba(50,42,103,.1); }.lesson-outline__head svg { width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.7; }.lesson-outline__head div { display:flex; min-width:0; flex-direction:column; }.lesson-outline__head small { color:#8A91A4; font-size:.58rem; font-weight:900; letter-spacing:.8px; text-transform:uppercase; }.lesson-outline__head strong { margin-top:3px; font-size:.8rem; line-height:1.35; }
.lesson-outline nav { padding:10px; }.lesson-outline nav a { display:flex; align-items:center; gap:10px; min-height:58px; margin:4px 0; padding:9px 10px; border-radius:14px; color:#636B80; transition:.2s ease; }.lesson-outline nav a:hover { background:#F5F3FF; color:#6558E8; }.lesson-outline nav a > span { width:31px; height:31px; flex:0 0 auto; display:grid; place-items:center; border:2px solid #E2DFE9; border-radius:50%; font-size:.61rem; font-weight:900; }.lesson-outline nav a p { min-width:0; display:flex; flex-direction:column; }.lesson-outline nav a strong { font-size:.66rem; line-height:1.35; }.lesson-outline nav a small { margin-top:3px; color:#9AA0AF; font-size:.57rem; }.lesson-outline nav a.active { background:#6558E8; color:#fff; box-shadow:0 8px 20px rgba(101,88,232,.24); }.lesson-outline nav a.active > span { border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.18); }.lesson-outline nav a.active small { color:rgba(255,255,255,.72); }.lesson-outline nav .lesson-outline__quiz { margin-top:11px; border:1px dashed #F1B96D; background:#FFF7E8; color:#A76513; }.lesson-outline nav .lesson-outline__quiz > span { border-color:#F3C785; background:#fff; }
.lesson-content { min-width:0; margin-top:-48px; }.lesson-content__heading { position:relative; overflow:hidden; padding:31px 35px 33px; border:1px solid rgba(71,60,137,.09); border-radius:27px; background:#fff; box-shadow:0 17px 48px rgba(51,42,103,.1); }.lesson-content__heading::after { content:'✦'; position:absolute; right:28px; top:5px; color:var(--theme-color,#6558E8); opacity:.08; font-size:7rem; }.lesson-content__heading > div { position:relative; z-index:2; display:flex; gap:8px; }.lesson-content__tag,.lesson-content__time { padding:6px 10px; border-radius:9px; font-size:.63rem; font-weight:900; }.lesson-content__tag { background:#6558E8; color:#fff; }.lesson-content__time { background:#FFF1DD; color:#B66A1E; }.lesson-content__heading h1 { position:relative; z-index:2; max-width:760px; margin:14px 0 8px; font-size:clamp(1.8rem,3.3vw,3rem); line-height:1.1; letter-spacing:-.045em; }.lesson-content__heading p { position:relative; z-index:2; max-width:700px; color:#6E7689; font-size:.82rem; line-height:1.65; }
.lesson-board { margin-top:22px; padding:34px; border:1px solid rgba(101,70,32,.09); border-radius:27px; background:#fff; box-shadow:0 17px 48px rgba(82,57,27,.08); }.lesson-board__section { display:flex; gap:17px; align-items:flex-start; padding:6px 0 26px; }.lesson-board__section + .lesson-board__section { padding-top:26px; border-top:1px dashed rgba(95,84,145,.16); }.lesson-board__section > div { min-width:0; }.lesson-board__icon { width:46px; height:46px; flex:0 0 auto; display:grid; place-items:center; border-radius:14px; background:#FFF0DD; color:#D87519; font-weight:900; }.lesson-board__section h2 { margin:2px 0 9px; color:#9A4D12; font-size:1.26rem; }.lesson-board__section p { margin:0; color:#596278; font-size:1.06rem; line-height:1.72; }.lesson-board__section--concept .lesson-board__icon,.lesson-board__section--formula .lesson-board__icon{background:#eeeaff;color:#6654e8}.lesson-board__section--concept h2,.lesson-board__section--formula h2{color:#5544c6}.lesson-board__section--example .lesson-board__icon{background:#e8f8f3;color:#148f75}.lesson-board__section--example h2{color:#117760}.lesson-board__section--tip .lesson-board__icon,.lesson-board__section--practice .lesson-board__icon{background:#fff3cf;color:#c87500}.lesson-board__section--tip h2,.lesson-board__section--practice h2{color:#a85c00}
.lesson-board{display:grid;gap:18px;padding:0;border:0;background:transparent;box-shadow:none}.lesson-card{position:relative;overflow:hidden;padding:25px 27px;border:1px solid rgba(74,63,140,.1);border-radius:22px;background:#fff;box-shadow:0 13px 34px rgba(56,46,104,.075)}.lesson-card__head{display:flex;align-items:center;gap:13px;margin-bottom:15px}.lesson-card__icon{width:43px;height:43px;flex:0 0 auto;display:grid;place-items:center;border-radius:13px;background:#fff;font-size:1.2rem;box-shadow:0 7px 18px rgba(54,45,97,.1)}.lesson-card__head>div{min-width:0}.lesson-card__head small{display:block;margin-bottom:2px;color:#8b91a2;font-size:.62rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.lesson-card h2{margin:0;color:#202844;font-size:1.18rem;line-height:1.25}.lesson-card>p{max-width:900px;margin:0;color:#5f687c;font-size:.96rem;line-height:1.68}.lesson-card--paragraph{padding-left:30px;border-color:#f0dac2;background:linear-gradient(135deg,#fff8ed,#fff)}.lesson-card--paragraph::before{content:'';position:absolute;inset:0 auto 0 0;width:6px;background:#ff9f30}.lesson-card--concept{border-color:#dcd7fa;background:linear-gradient(135deg,#f7f5ff,#fff)}.lesson-card--example{border-color:#cfeee5;background:linear-gradient(135deg,#f0fbf7,#fff)}.lesson-card--formula{border:2px solid #d8d1f7;background:linear-gradient(135deg,#f4f1ff,#fffbf2)}.lesson-card--tip,.lesson-card--practice{border-color:#f0d9a4;background:linear-gradient(135deg,#fff8df,#fff)}.lesson-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin:0;padding:0;list-style:none}.lesson-steps li{min-width:0;display:flex;align-items:center;gap:10px;padding:14px;border-radius:15px;background:#fff;color:#566074;line-height:1.5;box-shadow:0 6px 18px rgba(64,51,126,.07)}.lesson-steps b{width:31px;height:31px;flex:0 0 auto;display:grid;place-items:center;border-radius:10px;background:#6658e8;color:#fff;font-size:.78rem}.lesson-steps span{font-size:.82rem}.lesson-card--visual{padding:27px;border-color:#cfe6f7;background:radial-gradient(circle at 88% 20%,rgba(65,199,164,.14),transparent 25%),linear-gradient(135deg,#f0f8ff,#fff)}.lesson-visual-sequence{display:flex;align-items:center;justify-content:center;gap:9px;overflow-x:auto;padding:14px 6px 17px}.lesson-visual-sequence span{width:64px;height:64px;flex:0 0 auto;display:grid;place-items:center;border:2px solid #e1dcfa;border-radius:19px;background:#fff;font-size:1.55rem;font-weight:900;color:#5547b8;box-shadow:0 9px 20px rgba(57,47,112,.1);transform:rotate(calc((var(--item-index) - 2) * .7deg))}.lesson-visual-sequence span.is-question{border-style:dashed;background:#fff7df;color:#d77813;animation:lesson-question-pulse 2s ease-in-out infinite}.lesson-visual-sequence i{color:#b3b1c1;font-style:normal;font-weight:900}.lesson-card--visual>p{text-align:center;color:#737b8d;font-size:.8rem}.lesson-practice-question{padding:17px 19px;border-radius:16px;background:#fff;color:#293149!important;font-size:1rem!important;font-weight:800}.lesson-card--practice details{margin-top:12px;border-radius:15px;background:#fff;box-shadow:0 6px 18px rgba(102,76,19,.08)}.lesson-card--practice summary{min-height:52px;display:flex;align-items:center;gap:9px;padding:12px 16px;color:#9d5a04;font-size:.78rem;font-weight:900;cursor:pointer}.lesson-card--practice details>div{display:grid;gap:8px;padding:0 16px 16px}.lesson-card--practice details p{display:grid;grid-template-columns:76px 1fr;gap:9px;margin:0;padding:11px 13px;border-radius:12px;background:#fff8e8;color:#666b78;font-size:.78rem;line-height:1.55}.lesson-card--practice details strong{color:#9a600c}.lesson-card--practice .lesson-practice-answer{background:#eaf9f4;color:#246e5d}.lesson-card--practice .lesson-practice-answer strong{color:#12866d}@keyframes lesson-question-pulse{50%{transform:translateY(-3px) scale(1.03);box-shadow:0 12px 24px rgba(215,120,19,.16)}}
.lesson-formula { display:flex; flex-direction:column; align-items:center; margin:25px 0; padding:23px; border:2px solid #DED8F5; border-radius:18px; background:linear-gradient(135deg,#F7F5FF,#FFFDF8); text-align:center; }.lesson-formula small { color:#9C91C8; font-size:.58rem; font-weight:900; letter-spacing:1px; text-transform:uppercase; }.lesson-formula strong { margin:8px 0 6px; color:#5B4B9A; font-size:1.05rem; }.lesson-formula strong b { margin:0 8px; color:#F19B36; }.lesson-formula span { color:#878D9C; font-size:.62rem; }
.lesson-example-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:17px; }.lesson-example-grid > div { padding:20px; border:1px solid #E5E1DD; border-radius:17px; background:#FBF8F3; }.lesson-example-grid small { color:#6558E8; font-size:.62rem; font-weight:900; }.lesson-example-grid p { margin-top:9px; color:#838897; font-size:.62rem; }.lesson-example-numbers { display:flex; align-items:center; gap:9px; margin-top:15px; }.lesson-example-numbers span { width:43px; height:43px; display:grid; place-items:center; border-radius:11px; background:#fff; color:#B75C18; font-size:.9rem; font-weight:900; box-shadow:0 6px 14px rgba(72,50,25,.08); }.lesson-example-numbers i { color:#9995A0; font-style:normal; font-weight:900; }.lesson-example-numbers .is-answer { background:#6558E8; color:#fff; }
.lesson-memory-tip { display:flex; gap:12px; margin-top:23px; padding:17px; border-left:4px solid #FF9F30; border-radius:0 15px 15px 0; background:#FFF6EB; }.lesson-memory-tip > span { font-size:1.35rem; }.lesson-memory-tip p { display:flex; flex-direction:column; }.lesson-memory-tip strong { color:#8C5016; font-size:.78rem; }.lesson-memory-tip small { margin-top:4px; color:#766A5D; font-size:.67rem; line-height:1.55; }
.lesson-practice-cta { position:relative; overflow:hidden; display:grid; grid-template-columns:1fr auto; align-items:center; gap:25px; margin-top:22px; padding:30px 32px; border:1px dashed #BFB5F0; border-radius:25px; background:linear-gradient(135deg,#F2EEFF,#FFF7E9); }.lesson-practice-cta > div:not(.lesson-practice-cta__art),.lesson-practice-cta > a { position:relative; z-index:2; }.lesson-practice-cta small { color:#6558E8; font-size:.6rem; font-weight:900; letter-spacing:.7px; text-transform:uppercase; }.lesson-practice-cta h2 { margin:5px 0; font-size:1.25rem; }.lesson-practice-cta p { color:#777F91; font-size:.68rem; }.lesson-practice-cta__art { position:absolute; inset:0; pointer-events:none; }.lesson-practice-cta__art span { position:absolute; right:23%; top:-29px; color:rgba(101,88,232,.08); font-size:8rem; font-weight:900; }.lesson-practice-cta__art i { position:absolute; width:17px; height:17px; border-radius:5px; background:#FFB84D; opacity:.4; transform:rotate(20deg); }.lesson-practice-cta__art i:first-of-type { right:42%; top:22px; }.lesson-practice-cta__art i:last-child { right:32%; bottom:14px; background:#41C7A4; border-radius:50%; }
.lesson-pager { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-top:22px; }.lesson-pager > a { display:flex; flex-direction:column; padding:16px 18px; border:1px solid #E5E2EB; border-radius:17px; background:#fff; color:#6C7385; }.lesson-pager > a:hover { border-color:#C8C0F1; color:#6558E8; }.lesson-pager span { font-size:.58rem; }.lesson-pager strong { margin-top:4px; font-size:.7rem; }.lesson-pager__next { text-align:right; }

@media (max-width:900px) {
  .lesson-learning__layout { grid-template-columns:1fr; gap:20px; }.lesson-outline { position:static; margin-top:-48px; }.lesson-outline nav { display:flex; overflow-x:auto; gap:7px; padding:10px; }.lesson-outline nav a { min-width:190px; }.lesson-outline__head { padding:15px 18px; }.lesson-content { margin-top:0; }
}
@media (max-width:620px) {
  .lesson-learning { padding-bottom:65px; }.lesson-learning__layout { padding-inline:14px; }.lesson-outline { border-radius:21px; }.lesson-outline nav a { min-width:175px; }.lesson-content__heading { padding:24px 19px; border-radius:22px; }.lesson-content__heading h1 { font-size:2rem; }.lesson-content__heading p { font-size:1rem; }.lesson-board { gap:13px; }.lesson-card { padding:20px 17px; border-radius:19px; }.lesson-card__head { align-items:flex-start; }.lesson-card h2 { font-size:1.08rem; }.lesson-card>p { font-size:.96rem; }.lesson-steps { grid-template-columns:1fr; }.lesson-visual-sequence { justify-content:flex-start; }.lesson-visual-sequence span { width:54px; height:54px; border-radius:16px; font-size:1.3rem; }.lesson-card--practice details p { grid-template-columns:1fr; }.lesson-formula { padding:18px 10px; }.lesson-formula strong { font-size:.86rem; }.lesson-example-grid { grid-template-columns:1fr; }.lesson-practice-cta { grid-template-columns:1fr; padding:25px 19px; }.lesson-practice-cta .btn { width:100%; }.lesson-pager { grid-template-columns:1fr; }.lesson-pager > span { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  ::view-transition-old(page-content),::view-transition-new(page-content) { animation:none; }
}

/* ═══════════════════════════════════════════════
   EXAM DETAIL — CLEAR, CHILD-FRIENDLY HIERARCHY
   ═══════════════════════════════════════════════ */
.exam-detail__layout { grid-template-columns:minmax(0,1fr) 350px; gap:30px; }
.exam-detail__main { min-width:0; }
.exam-detail__hero { padding:34px 36px; }
.exam-detail__hero h1 { max-width:740px; font-size:clamp(2rem,3vw,2.65rem); }
.exam-detail__hero p { max-width:760px; font-size:.92rem; line-height:1.72; }
.exam-detail__cat { align-items:center; }
.exam-detail__cat .category-badge,.exam-detail__cat .exam-status { font-size:.74rem; }

.exam-tabs { overflow:hidden; border-radius:27px; }
.exam-tabs .tab-nav { gap:8px; padding:9px; }
.exam-tabs .tab-btn { min-height:52px; padding:12px 20px; font-size:.88rem; }
.exam-tabs .tab-content { padding:31px; }
.exam-section-heading { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.exam-section-heading > span { width:43px; height:43px; flex:0 0 auto; display:grid; place-items:center; border-radius:14px; background:linear-gradient(135deg,#6558E8,#887AF2); color:#fff; box-shadow:0 8px 18px rgba(101,88,232,.24); font-size:.72rem; font-weight:900; }
.exam-section-heading > div { display:flex; flex-direction:column; }.exam-section-heading small { color:#8A91A3; font-size:.68rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; }.exam-section-heading h2 { margin-top:2px; font-size:1.35rem; }
.exam-section-heading--rules { margin-top:35px; padding-top:26px; border-top:1px dashed #DCD9E8; }.exam-section-heading--rules > span { background:linear-gradient(135deg,#FFAD42,#FF7B61); box-shadow:0 8px 18px rgba(238,128,65,.23); }

.exam-rules .info-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.exam-rules .info-item { min-width:0; min-height:112px; align-items:center; gap:12px; padding:15px; border:1px solid #E8E5EF; border-radius:17px; background:linear-gradient(145deg,#FBFAFF,#F7F5F1); }
.exam-rules .info-item__icon { width:46px; height:46px; flex:0 0 auto; display:grid; place-items:center; border-radius:14px; background:#EAE6FF; color:#6558E8; }
.exam-rules .info-item__icon svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.exam-rules .info-item__icon--orange { background:#FFF0DE; color:#C86A1A; }.exam-rules .info-item__icon--blue { background:#E6F4FF; color:#2175B5; }.exam-rules .info-item__icon--green { background:#E3F8F0; color:#18896E; }.exam-rules .info-item__icon--rose { background:#FFF0EF; color:#C75A52; }.exam-rules .info-item__icon--purple { background:#F3E9FF; color:#824DC2; }
.exam-rules .info-item > div { min-width:0; }.exam-rules .info-item strong { margin-bottom:5px; color:#343B53; font-size:.76rem; line-height:1.3; }.exam-rules .info-item > div > span { display:block; color:#667087; font-size:.92rem; font-weight:800; line-height:1.35; }

.exam-rules .rules-list { gap:0; }.exam-rules .rule { min-height:59px; align-items:center; gap:14px; padding:10px 2px; border-bottom:1px solid #EFEDF3; }.exam-rules .rule:last-child { border-bottom:0; }.exam-rules .rule__num { width:38px; height:38px; font-size:.8rem; }.exam-rules .rule div { padding:0; color:#596176; font-size:.86rem; line-height:1.55; }.exam-rules .rule strong { color:#242B43; }
.exam-tabs .leaderboard-table { font-size:.8rem; }.exam-tabs .leaderboard-table th,.exam-tabs .leaderboard-table td { padding:13px 14px; }

.exam-detail__sidebar { min-width:0; }
.exam-sidebar-card { top:95px; overflow:hidden; border-radius:27px; box-shadow:0 22px 58px rgba(47,39,98,.16); }
.exam-sidebar-card__top { position:relative; min-height:165px; justify-content:center; padding:25px; background:radial-gradient(circle at 85% 10%,rgba(255,255,255,.75),transparent 32%),linear-gradient(145deg,var(--theme-soft,#F0EDFF),#fff); }
.exam-sidebar-card__top::after { content:''; position:absolute; width:120px; height:120px; right:-48px; top:-48px; border:24px solid rgba(101,88,232,.05); border-radius:50%; }
.exam-sidebar-card__icon { width:76px; height:76px; border-radius:22px; box-shadow:0 14px 30px color-mix(in srgb,var(--theme-color,var(--primary)) 27%,transparent); transform:rotate(-4deg); }
.exam-sidebar-card__icon svg { width:42px; height:42px; }
.exam-sidebar-card__top .exam-status { position:absolute; left:50%; bottom:17px; transform:translateX(-50%); white-space:nowrap; font-size:.72rem; }
.exam-sidebar-card__spark { position:absolute; left:25px; top:24px; color:#FFB84D; font-size:1.2rem; }
.exam-sidebar-card__body { padding:27px; text-align:center; }
.exam-sidebar-card__eyebrow { display:block; color:#6558E8; font-size:.68rem; font-weight:900; letter-spacing:.8px; text-transform:uppercase; }
.exam-sidebar-card__body h2 { margin:7px 0 8px; font-size:1.38rem; }
.exam-sidebar-card__intro { max-width:280px; margin:0 auto 20px; color:#687086; font-size:.82rem; line-height:1.58; }
.exam-sidebar-card__body > .btn { min-height:58px; border-radius:15px; font-size:.96rem; box-shadow:0 8px 0 #453A91; }
.exam-sidebar-card__body > .btn:hover { transform:translateY(-2px); box-shadow:0 10px 0 #453A91; }
.exam-sidebar-card__checklist { display:flex; flex-direction:column; gap:9px; margin:20px 0; padding:16px 0; border-top:1px solid #ECE9F1; border-bottom:1px solid #ECE9F1; text-align:left; }.exam-sidebar-card__checklist span { display:flex; align-items:center; gap:8px; color:#60687C; font-size:.75rem; }.exam-sidebar-card__checklist b { width:22px; height:22px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; background:#E1F8F1; color:#17886D; font-size:.6rem; }
.exam-sidebar-card__meta { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.exam-sidebar-card__meta div { display:flex; flex-direction:column; padding:12px 6px; border-radius:13px; background:#F7F5FB; }.exam-sidebar-card__meta small { color:#8B91A1; font-size:.62rem; font-weight:800; text-transform:uppercase; }.exam-sidebar-card__meta strong { margin-top:4px; color:#343B53; font-size:.78rem; }

@media (max-width:1024px) {
  .exam-detail__layout { grid-template-columns:1fr; }.exam-detail__sidebar { order:2; }.exam-sidebar-card { position:static; display:grid; grid-template-columns:260px minmax(0,1fr); }.exam-sidebar-card__top { min-height:100%; }.exam-sidebar-card__body { text-align:left; }.exam-sidebar-card__intro { max-width:none; margin-inline:0; font-size:.88rem; }.exam-sidebar-card__checklist { display:grid; grid-template-columns:1fr 1fr; }.exam-sidebar-card__checklist span { font-size:.8rem; }.exam-sidebar-card__meta { max-width:380px; }
  .exam-rules .info-item strong { font-size:.82rem; }.exam-rules .info-item > div > span { font-size:1rem; }.exam-rules .rule div { font-size:.92rem; }
}
@media (max-width:760px) {
  .exam-rules .info-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.exam-tabs .tab-content { padding:24px; }
}
@media (max-width:560px) {
  .exam-detail__hero { padding:25px 20px; }.exam-detail__hero p { font-size:.9rem; }.exam-tabs .tab-content { padding:20px 15px; }.exam-section-heading h2 { font-size:1.18rem; }.exam-section-heading small { font-size:.65rem; }
  .exam-rules .info-grid { grid-template-columns:1fr; }.exam-rules .info-item { min-height:94px; }.exam-rules .info-item strong { font-size:.82rem; }.exam-rules .info-item > div > span { font-size:1rem; }.exam-rules .rule { align-items:flex-start; }.exam-rules .rule div { font-size:.9rem; }
  .exam-sidebar-card { display:block; }.exam-sidebar-card__top { min-height:155px; }.exam-sidebar-card__body { padding:24px 20px; text-align:center; }.exam-sidebar-card__intro { margin-inline:auto; }.exam-sidebar-card__checklist { display:flex; }.exam-sidebar-card__meta { max-width:none; }
}

/* ═══════════════════════════════════════════════
   COURSE SIDEBAR — LEARNING ACTION CARD
   ═══════════════════════════════════════════════ */
.course-detail__sidebar { min-width:0; }
.course-enroll-card { overflow:hidden; border-radius:27px; box-shadow:0 22px 58px rgba(47,39,98,.15); }
.course-enroll-card .course-sidebar-card__cover { position:relative; height:175px; display:flex; align-items:flex-start; justify-content:center; padding-top:29px; background:radial-gradient(circle at 82% 12%,rgba(255,255,255,.2),transparent 29%),linear-gradient(145deg,var(--theme-color,var(--primary)),color-mix(in srgb,var(--theme-color,var(--primary)) 72%,#263154)); }
.course-enroll-card .course-sidebar-card__cover::before { content:''; position:absolute; width:135px; height:135px; right:-42px; bottom:-56px; border:25px solid rgba(255,255,255,.1); border-radius:50%; }
.course-enroll-card .course-sidebar-card__cover::after { width:55px; height:55px; right:auto; left:-25px; top:25px; bottom:auto; border:11px solid rgba(255,255,255,.08); }
.course-enroll-card .course-sidebar-card__icon { width:78px; height:78px; position:relative; z-index:2; display:grid; place-items:center; border:1px solid rgba(255,255,255,.28); border-radius:23px; background:rgba(255,255,255,.16); box-shadow:0 14px 30px rgba(21,29,48,.2); transform:rotate(-4deg); backdrop-filter:blur(8px); }
.course-enroll-card .course-sidebar-card__icon svg { width:44px; height:44px; }
.course-enroll-card__status { position:absolute; z-index:2; left:50%; bottom:18px; transform:translateX(-50%); padding:7px 12px; border:1px solid rgba(255,255,255,.28); border-radius:999px; background:rgba(255,255,255,.9); color:var(--theme-color,var(--primary)); font-size:.7rem; font-weight:900; white-space:nowrap; box-shadow:0 7px 18px rgba(27,32,54,.13); }
.course-enroll-card__spark { position:absolute; left:25px; top:22px; color:#FFDB75; font-size:1.25rem; }
.course-enroll-card .course-sidebar-card__body { padding:28px; text-align:center; }
.course-enroll-card__eyebrow { display:block; color:#6558E8; font-size:.68rem; font-weight:900; letter-spacing:.8px; text-transform:uppercase; }
.course-enroll-card h2 { margin:7px 0 8px; font-size:1.4rem; }
.course-enroll-card__intro { max-width:290px; margin:0 auto 20px; color:#687086; font-size:.83rem; line-height:1.58; }
.course-enroll-card .btn { min-height:58px; border-radius:15px; font-size:.96rem; box-shadow:0 8px 0 #453A91; }.course-enroll-card .btn:hover { transform:translateY(-2px); box-shadow:0 10px 0 #453A91; }
.course-enroll-card__checklist { display:flex; flex-direction:column; gap:10px; margin:21px 0; padding:17px 0; border-top:1px solid #ECE9F1; border-bottom:1px solid #ECE9F1; text-align:left; }.course-enroll-card__checklist span { display:flex; align-items:center; gap:9px; color:#5E677B; font-size:.8rem; }.course-enroll-card__checklist b { width:23px; height:23px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; background:#E1F8F1; color:#17886D; font-size:.62rem; }
.course-enroll-card__meta { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.course-enroll-card__meta div { display:flex; flex-direction:column; padding:13px 8px; border-radius:13px; background:#F7F5FB; }.course-enroll-card__meta small { color:#8B91A1; font-size:.68rem; font-weight:800; text-transform:uppercase; }.course-enroll-card__meta strong { margin-top:4px; color:#343B53; font-size:.86rem; }

.course-related-card { position:relative; overflow:hidden; display:grid; grid-template-columns:52px 1fr; gap:13px; margin-top:18px; padding:22px; border:1px solid rgba(72,61,140,.09); border-radius:23px; background:linear-gradient(145deg,#fff,#F8F6FF); box-shadow:0 14px 38px rgba(48,39,106,.09); }.course-related-card::after { content:'✦'; position:absolute; right:16px; top:3px; color:var(--theme-color,var(--primary)); opacity:.08; font-size:4rem; }.course-related-card__icon { width:52px; height:52px; position:relative; z-index:2; display:grid; place-items:center; border-radius:16px; background:var(--theme-soft,#F0EDFF); color:var(--theme-color,var(--primary)); }.course-related-card__icon svg { width:29px; height:29px; fill:none; stroke:currentColor; stroke-width:1.7; }.course-related-card > div { position:relative; z-index:2; }.course-related-card small { color:#8C92A3; font-size:.64rem; font-weight:900; letter-spacing:.6px; text-transform:uppercase; }.course-related-card h3 { margin:3px 0 5px; font-size:1.1rem; }.course-related-card p { color:#727A8E; font-size:.8rem; line-height:1.5; }.course-related-card > a { grid-column:1/-1; min-height:46px; position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; margin-top:3px; padding:11px 13px; border-radius:13px; background:#F0EDFF; color:#6558E8; font-size:.8rem; font-weight:900; }.course-related-card > a:hover { background:#E7E2FF; }.course-related-card > a span { font-size:1rem; }

@media (max-width:1024px) {
  .course-detail__sidebar { order:2; }.course-enroll-card { display:grid; grid-template-columns:260px minmax(0,1fr); }.course-enroll-card .course-sidebar-card__cover { height:100%; min-height:410px; align-items:center; padding:0; }.course-enroll-card .course-sidebar-card__body { text-align:left; }.course-enroll-card__intro { max-width:none; margin-inline:0; font-size:.88rem; }.course-enroll-card__checklist { display:grid; grid-template-columns:1fr 1fr; }.course-enroll-card__checklist span { font-size:.8rem; }.course-enroll-card__meta { max-width:390px; }.course-related-card { grid-template-columns:52px 1fr auto; align-items:center; }.course-related-card > a { grid-column:auto; min-width:230px; margin:0; }
}
@media (max-width:620px) {
  .course-enroll-card { display:block; }.course-enroll-card .course-sidebar-card__cover { min-height:155px; height:155px; align-items:flex-start; padding-top:20px; }.course-enroll-card .course-sidebar-card__icon { width:68px; height:68px; }.course-enroll-card .course-sidebar-card__body { padding:24px 20px; text-align:center; }.course-enroll-card__intro { margin-inline:auto; }.course-enroll-card__checklist { display:flex; }.course-enroll-card__meta { max-width:none; }.course-related-card { grid-template-columns:48px 1fr; padding:19px; }.course-related-card > a { grid-column:1/-1; min-width:0; }.course-related-card p { font-size:.8rem; }
}

/* ═══════════════════════════════════════════════
   EXAM ROOM + RESULT
   ═══════════════════════════════════════════════ */
body.exam-focus-mode { background:#FAF7F1; }
body.exam-focus-mode .site-header,body.exam-focus-mode .site-footer { display:none; }
body.exam-focus-mode #main-content { min-height:100vh; }
.exam-room-page { min-height:100vh; padding-bottom:55px; color:#20263B; background:radial-gradient(circle at 7% 35%,rgba(255,184,77,.1),transparent 22%),radial-gradient(circle at 92% 25%,rgba(101,88,232,.1),transparent 24%),#FAF7F1; }
.exam-room-topbar { position:sticky; z-index:45; top:0; min-height:86px; display:flex; align-items:center; justify-content:space-between; gap:25px; padding:12px max(28px,calc((100vw - 1280px)/2)); border-bottom:1px solid #E7E2DA; background:rgba(255,255,255,.94); box-shadow:0 7px 25px rgba(56,45,101,.07); backdrop-filter:blur(13px); }
.exam-room-brand { min-width:0; display:flex; align-items:center; gap:12px; color:#51468A; }.exam-room-brand > span { width:50px; height:50px; flex:0 0 auto; display:grid; place-items:center; border-radius:15px; background:#6558E8; color:#fff; }.exam-room-brand svg { width:29px; height:29px; fill:none; stroke:currentColor; stroke-width:1.7; }.exam-room-brand div { min-width:0; display:flex; flex-direction:column; }.exam-room-brand small { color:#9298A7; font-size:.64rem; font-weight:900; letter-spacing:.7px; text-transform:uppercase; }.exam-room-brand strong { max-width:690px; overflow:hidden; margin-top:3px; font-size:1rem; text-overflow:ellipsis; white-space:nowrap; }
.exam-room-topbar__actions { display:flex; align-items:center; gap:13px; }.exam-room-timer { min-width:128px; min-height:52px; display:flex; align-items:center; justify-content:center; gap:8px; padding:8px 14px; border:2px solid #FFB16F; border-radius:16px; background:#FFF1E4; color:#A95415; }.exam-room-timer svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }.exam-room-timer b { font-size:.92rem; }.exam-submit-btn { min-width:130px; min-height:52px; padding:10px 18px; border-radius:15px; background:linear-gradient(135deg,#FFAD42,#FF7C61); color:#fff; box-shadow:0 7px 0 #D75D38; font-size:.84rem; font-weight:900; }.exam-submit-btn:hover { transform:translateY(-2px); box-shadow:0 9px 0 #D75D38; }.exam-submit-btn span { margin-left:7px; }
.exam-room-layout { width:min(1200px,calc(100% - 48px)); display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:28px; align-items:start; margin:34px auto 0; }
.exam-room-main { min-width:0; }.exam-question-card { min-height:590px; position:relative; overflow:hidden; padding:38px 42px; border:1px solid #E1DCD5; border-radius:29px; background:#fff; box-shadow:0 20px 55px rgba(59,45,101,.11); }.exam-question-card::after { content:attr(data-question); position:absolute; right:-12px; top:-45px; color:#F2F0ED; font-size:10rem; font-weight:900; }
.exam-question-card__top { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:15px; }.exam-question-card__top > div { display:flex; align-items:center; gap:9px; }.exam-question-card__top > div span,.exam-question-card__top > div i { padding:7px 12px; border-radius:999px; font-size:.68rem; font-style:normal; font-weight:900; }.exam-question-card__top > div span { background:#E6E1FF; color:#5143A3; }.exam-question-card__top > div i { border:1px solid #FFD3B1; background:#FFF3E8; color:#D76B1E; }.exam-read-question { display:flex; align-items:center; gap:7px; color:#665E7B; font-size:.72rem; font-weight:800; }.exam-read-question:hover { color:#6558E8; }.exam-read-question svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.exam-question-card h1 { position:relative; z-index:2; max-width:820px; margin:28px 0 27px; font-size:clamp(1.55rem,2.5vw,2.1rem); line-height:1.42; letter-spacing:-.025em; white-space:pre-line; }.exam-question-card h1.is-reading { color:#5547AF; text-decoration:underline dotted #BEB6F0; text-underline-offset:7px; }
.exam-answer-grid { position:relative; z-index:2; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; margin-top:30px; }.exam-answer-option { min-height:78px; display:grid; grid-template-columns:46px 1fr 25px; align-items:center; gap:14px; padding:13px 16px; border:2px solid #E8E3DC; border-radius:18px; background:#F9F6F1; color:#343544; text-align:left; box-shadow:0 4px 0 #E0DBD4; transition:.2s ease; }.exam-answer-option:hover { transform:translateY(-2px); border-color:#BFB7ED; background:#F4F1FF; }.exam-answer-option > b { width:43px; height:43px; display:grid; place-items:center; border:2px solid #D9D3E0; border-radius:12px; background:#fff; color:#5A5370; }.exam-answer-option > span { font-size:.9rem; font-weight:750; }.exam-answer-option > i { width:25px; height:25px; display:none; place-items:center; border-radius:50%; background:#fff; color:#6558E8; font-size:.7rem; font-style:normal; }.exam-answer-option.selected { border-color:#6558E8; background:#6558E8; color:#fff; box-shadow:0 5px 0 #463A91; }.exam-answer-option.selected > b { border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.13); color:#fff; }.exam-answer-option.selected > i { display:grid; }.exam-multiple-note { margin-top:13px; color:#818798; font-size:.72rem; text-align:right; }
.exam-fill-answer { max-width:620px; position:relative; z-index:2; margin:30px auto 0; padding:25px; border:1px solid #E2DCEB; border-radius:20px; background:#F8F5FF; }.exam-fill-answer label { margin-bottom:10px; font-size:.84rem; }.exam-fill-answer input { margin:0; min-height:62px; border-radius:15px; font-size:1.1rem; text-align:center; }.exam-fill-answer small { display:block; margin-top:9px; color:#858B9C; font-size:.7rem; text-align:center; }
.exam-visual { position:relative; z-index:2; display:flex; align-items:center; justify-content:center; margin:12px auto 0; }.exam-visual--sequence { gap:10px; padding:20px; border-radius:18px; background:#F6F3FF; }.exam-visual--sequence span { width:52px; height:52px; display:grid; place-items:center; border-radius:14px; background:#fff; color:#6558E8; font-size:1.05rem; font-weight:900; box-shadow:0 7px 16px rgba(74,59,154,.1); }.exam-visual--sequence span:last-child { background:#6558E8; color:#fff; }.exam-visual--sequence i { color:#AAA4B3; font-style:normal; }.exam-visual--rectangle { width:260px; height:145px; border:5px solid #6558E8; border-radius:12px; background:repeating-linear-gradient(0deg,transparent 0 33px,rgba(101,88,232,.08) 34px 35px),repeating-linear-gradient(90deg,transparent 0 33px,rgba(101,88,232,.08) 34px 35px); }.exam-visual--rectangle span { position:absolute; bottom:-28px; }.exam-visual--rectangle b { position:absolute; right:-55px; transform:rotate(90deg); }.exam-visual--triangles { width:190px; height:165px; clip-path:polygon(50% 0,100% 100%,0 100%); background:linear-gradient(30deg,#FFB84D 0 48%,#6558E8 49% 52%,#41C7A4 53%); }
.exam-hint-box { position:relative; z-index:3; display:flex; gap:11px; margin-top:22px; padding:15px 17px; border-left:4px solid #FF9D2E; border-radius:0 15px 15px 0; background:#FFF4E7; }.exam-hint-box[hidden] { display:none; }.exam-hint-box > span { font-size:1.2rem; }.exam-hint-box p { display:flex; flex-direction:column; }.exam-hint-box strong { color:#8C4D14; font-size:.76rem; }.exam-hint-box small { margin-top:3px; color:#716557; font-size:.69rem; }
.exam-room-controls { display:grid; grid-template-columns:1fr auto 1fr; gap:13px; align-items:center; margin-top:20px; }.exam-control-btn { min-height:54px; display:flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; border-radius:15px; font-size:.8rem; font-weight:900; }.exam-control-btn--ghost { justify-content:flex-start; color:#5C508F; }.exam-control-btn--ghost:disabled { opacity:.35; }.exam-control-btn--hint { background:#EEEAE4; color:#5C5866; }.exam-control-btn--hint small { padding:3px 6px; border-radius:7px; background:#fff; color:#8A8493; }.exam-control-btn--primary { justify-self:end; min-width:170px; background:#6558E8; color:#fff; box-shadow:0 6px 0 #463A91; }
.exam-room-navigator { position:sticky; top:112px; padding:23px; border:1px solid #E0DBD5; border-radius:25px; background:#fff; box-shadow:0 17px 42px rgba(57,45,98,.1); }.exam-room-navigator__head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:17px; border-bottom:1px dashed #DDD8D1; }.exam-room-navigator__head div { display:flex; flex-direction:column; }.exam-room-navigator__head small { color:#7E8493; font-size:.7rem; }.exam-room-navigator__head strong { margin-top:3px; font-size:.86rem; }.exam-room-navigator__head > span { padding:6px 9px; border-radius:9px; background:#E8F2FF; color:#2A6FA8; font-size:.68rem; font-weight:900; }
.exam-room-question-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:9px; margin:19px 0; }.exam-room-question-grid button { position:relative; aspect-ratio:1; display:grid; place-items:center; border:2px solid transparent; border-radius:11px; background:#F0EDE8; color:#55535B; font-size:.72rem; font-weight:900; }.exam-room-question-grid button:hover { border-color:#BFB7ED; }.exam-room-question-grid button.active { border-color:#6558E8; background:#fff; color:#5143A4; box-shadow:0 0 0 3px #ECE8FF; }.exam-room-question-grid button.answered { background:#6558E8; color:#fff; }.exam-room-question-grid button.flagged i { display:block; }.exam-room-question-grid button i { display:none; position:absolute; right:-3px; top:-6px; color:#E74F46; font-size:1.1rem; font-style:normal; }
.exam-flag-btn { width:100%; min-height:49px; display:flex; align-items:center; gap:9px; padding:10px 2px; border-top:1px solid #E8E4DE; border-bottom:1px solid #E8E4DE; color:#605C68; text-align:left; }.exam-flag-btn svg { width:24px; height:24px; fill:none; stroke:#E65A50; stroke-width:1.9; }.exam-flag-btn span { flex:1; font-size:.75rem; font-weight:800; }.exam-flag-btn > i { width:23px; height:23px; border:2px solid #A49EAA; border-radius:7px; }.exam-flag-btn.active > i { border-color:#E65A50; background:#E65A50; box-shadow:inset 0 0 0 5px #fff; }
.exam-room-progress-card { margin-top:17px; padding:15px; border-radius:16px; background:#F5F2ED; }.exam-room-progress-card > div:first-child { display:flex; justify-content:space-between; font-size:.7rem; }.exam-room-progress-card > div:first-child strong { color:#6558E8; }.exam-room-progress { height:10px; overflow:hidden; margin:10px 0; border-radius:999px; background:#E2DED8; }.exam-room-progress i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#6558E8,#41C7A4); transition:width .3s; }.exam-room-progress i.p-10 {width:10%}.exam-room-progress i.p-20 {width:20%}.exam-room-progress i.p-30 {width:30%}.exam-room-progress i.p-40 {width:40%}.exam-room-progress i.p-50 {width:50%}.exam-room-progress i.p-60 {width:60%}.exam-room-progress i.p-70 {width:70%}.exam-room-progress i.p-80 {width:80%}.exam-room-progress i.p-90 {width:90%}.exam-room-progress i.p-100 {width:100%}.exam-room-progress-card > small { display:flex; align-items:center; gap:5px; color:#8A8790; font-size:.58rem; }.exam-room-progress-card > small b { width:8px; height:8px; display:inline-block; border-radius:50%; }.answered-dot { background:#6558E8; }.flagged-dot { margin-left:8px; background:#E65A50; }
.exam-submit-modal { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:20px; }.exam-submit-modal[hidden] { display:none; }.exam-submit-modal__backdrop { position:absolute; inset:0; width:100%; height:100%; background:rgba(29,29,60,.62); backdrop-filter:blur(8px); }.exam-submit-modal__dialog { position:relative; z-index:2; width:min(470px,100%); padding:35px; border-radius:28px; background:#fff; box-shadow:0 30px 85px rgba(20,19,49,.3); text-align:center; }.exam-submit-modal__icon { width:72px; height:72px; display:grid; place-items:center; margin:0 auto 17px; border-radius:22px; background:#E4F8F1; color:#1C9D7C; font-size:1.8rem; font-weight:900; }.exam-submit-modal__dialog h2 { font-size:1.5rem; }.exam-submit-modal__dialog > p { margin:8px 0 20px; color:#747B8E; font-size:.8rem; line-height:1.55; }.exam-submit-modal__dialog > div { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; }.exam-submit-modal__dialog > div span { display:flex; flex-direction:column; padding:13px; border-radius:13px; background:#F5F3FA; color:#8A8F9E; font-size:.66rem; }.exam-submit-modal__dialog > div strong { margin-top:3px; color:#343A50; font-size:.9rem; }.exam-submit-cancel { margin-top:16px; color:#6558E8; font-size:.76rem; font-weight:900; }

/* Result */
.exam-result-page { min-height:100vh; padding-bottom:80px; background:radial-gradient(circle at 15% 18%,rgba(255,184,77,.12),transparent 23%),radial-gradient(circle at 88% 34%,rgba(101,88,232,.11),transparent 26%),#FAF7F1; }
.exam-result-topbar { min-height:74px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; padding:12px max(28px,calc((100vw - 1200px)/2)); border-bottom:1px solid #E8E3DC; background:#fff; }.exam-result-topbar a { color:#6558E8; font-size:.76rem; font-weight:900; }.exam-result-topbar a:last-child { text-align:right; }.exam-result-topbar strong { max-width:650px; overflow:hidden; font-size:.9rem; text-overflow:ellipsis; white-space:nowrap; }
.exam-result-main { width:min(1050px,calc(100% - 48px)); margin:38px auto 0; }.exam-result-summary { position:relative; overflow:hidden; width:min(680px,100%); margin:0 auto; padding:36px 45px; border-top:5px solid #FF8B35; border-radius:28px; background:#fff; box-shadow:0 24px 65px rgba(57,44,94,.14); text-align:center; }.exam-result-summary::after { content:'✦'; position:absolute; right:35px; top:20px; color:#FFB84D; opacity:.35; font-size:2rem; }.exam-result-ring { width:145px; height:145px; position:relative; margin:0 auto 19px; }.exam-result-ring svg { width:100%; transform:rotate(-90deg); }.exam-result-ring circle { fill:none; stroke:#E7E3DE; stroke-width:8; }.exam-result-ring circle.value { stroke:#6558E8; stroke-linecap:round; }.exam-result-ring > div { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }.exam-result-ring strong { color:#514390; font-size:1.8rem; }.exam-result-ring span { color:#777C8B; font-size:.6rem; font-weight:800; text-transform:uppercase; }.exam-result-summary > small { color:#6558E8; font-size:.65rem; font-weight:900; letter-spacing:.9px; text-transform:uppercase; }.exam-result-summary h1 { margin:4px 0; color:#554793; font-size:2.4rem; }.exam-result-summary > p { color:#70778A; font-size:.78rem; }.exam-result-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:24px 0 19px; padding-top:20px; border-top:1px solid #EBE7E0; }.exam-result-stats > div { display:flex; align-items:center; justify-content:center; gap:9px; }.exam-result-stats > div > span { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:#FFF0E2; color:#D46A1C; font-weight:900; }.exam-result-stats > div:nth-child(2) > span { background:#E5F4FF; color:#277AB7; }.exam-result-stats > div:nth-child(3) > span { background:#FFE9E7; color:#D64F47; }.exam-result-stats p { display:flex; flex-direction:column; text-align:left; }.exam-result-stats small { color:#8A8F9F; font-size:.58rem; text-transform:uppercase; }.exam-result-stats strong { font-size:.9rem; }.exam-result-rank { width:max-content; max-width:100%; margin:auto; padding:10px 17px; border-radius:999px; background:#FFE2CE; color:#8E4716; font-size:.72rem; font-weight:800; }
.exam-result-review { margin-top:42px; }.exam-result-tabs { display:flex; gap:10px; border-bottom:2px solid #DDD8D2; }.exam-result-tabs button { min-height:52px; position:relative; padding:12px 22px; color:#696573; font-size:.86rem; font-weight:900; }.exam-result-tabs button::after { content:''; position:absolute; left:0; right:0; bottom:-2px; height:4px; border-radius:4px; background:#6558E8; transform:scaleX(0); }.exam-result-tabs button.active { color:#514494; }.exam-result-tabs button.active::after { transform:scaleX(1); }.exam-result-panel { display:none; padding-top:23px; }.exam-result-panel.active { display:block; }
.exam-result-list { display:flex; flex-direction:column; gap:12px; }.exam-result-list article { min-width:0; overflow:hidden; display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:14px; padding:16px 18px; border:1px solid #E5E0D9; border-radius:17px; background:#fff; box-shadow:0 8px 22px rgba(59,47,96,.05); }.exam-result-list article > span { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; font-size:.68rem; font-weight:900; }.exam-result-list article > span.correct { background:#DCEBFF; color:#286DB1; }.exam-result-list article > span.wrong { background:#FFE1DE; color:#C7433C; }.exam-result-list article > span.unanswered { background:#FFF0D4; color:#9B631C; }.exam-result-list article > div { min-width:0; }.exam-result-list h2 { max-width:100%; overflow-wrap:anywhere; font-size:.88rem; line-height:1.45; white-space:normal; }.exam-result-list article div small { display:block; margin-top:4px; font-size:.65rem; }.exam-result-list article div small.correct { color:#37836A; }.exam-result-list article div small.wrong { color:#C7433C; }.exam-result-list article div small.unanswered { color:#9B631C; }.exam-result-list article button { min-width:104px; padding:9px 12px; border-radius:10px; background:#F1EEE8; color:#5E518E; font-size:.68rem; font-weight:900; white-space:nowrap; }.exam-result-list article > p { min-width:0; grid-column:2/-1; overflow-wrap:anywhere; padding:13px; border-radius:12px; background:#FFF8E9; color:#6D6252; font-size:.72rem; line-height:1.55; }.exam-result-map { display:grid; grid-template-columns:repeat(10,48px); justify-content:center; gap:14px; margin-top:22px; }.exam-result-map span { width:48px; height:48px; display:grid; place-items:center; border-radius:50%; font-size:.78rem; font-weight:900; line-height:1; }.exam-result-map span.correct { background:#D9E9FF; color:#2369AA; }.exam-result-map span.wrong { background:#FFDCD8; color:#C7463F; }.exam-result-map span.unanswered { background:#FFF0D4; color:#9B631C; }.exam-result-leaderboard { display:flex; flex-direction:column; gap:10px; }.exam-result-leaderboard > div { display:grid; grid-template-columns:45px 1fr auto; align-items:center; padding:14px 18px; border-radius:15px; background:#fff; box-shadow:0 7px 20px rgba(56,45,93,.06); }.exam-result-leaderboard strong { font-size:.82rem; }.exam-result-leaderboard b { color:#6558E8; font-size:.76rem; }

@media (max-width:900px) {
  .exam-room-layout { grid-template-columns:1fr; }.exam-room-navigator { position:static; order:-1; }.exam-room-question-grid { grid-template-columns:repeat(10,1fr); }.exam-room-navigator__head { padding-bottom:12px; }.exam-room-progress-card { display:none; }.exam-flag-btn { max-width:280px; margin-left:auto; }
}
@media (max-width:620px) {
  .exam-room-topbar { min-height:76px; padding:10px 14px; }.exam-room-brand > span { width:43px; height:43px; }.exam-room-brand div { display:none; }.exam-room-topbar__actions { gap:7px; }.exam-room-timer { min-width:91px; min-height:45px; padding:6px 9px; }.exam-room-timer b { font-size:.78rem; }.exam-submit-btn { min-width:91px; min-height:45px; padding:7px 10px; font-size:.72rem; }.exam-submit-btn span { display:none; }
  .exam-room-layout { width:calc(100% - 24px); gap:14px; margin-top:14px; }.exam-room-navigator { padding:15px; border-radius:19px; }.exam-room-question-grid { grid-template-columns:repeat(5,1fr); gap:7px; }.exam-flag-btn { max-width:none; }.exam-question-card { min-height:0; padding:23px 17px; border-radius:22px; }.exam-question-card__top { align-items:flex-start; }.exam-read-question { font-size:0; }.exam-question-card h1 { margin:21px 0; font-size:1.42rem; }.exam-answer-grid { grid-template-columns:1fr; gap:11px; margin-top:20px; }.exam-answer-option { min-height:68px; }.exam-answer-option > span { font-size:.86rem; }.exam-visual--rectangle { transform:scale(.78); margin-block:-5px; }.exam-room-controls { grid-template-columns:50px 1fr 125px; gap:8px; }.exam-control-btn { min-width:0; padding:8px; }.exam-control-btn--ghost { width:50px; font-size:0; }.exam-control-btn--hint { font-size:.68rem; }.exam-control-btn--primary { min-width:0; font-size:.72rem; }.exam-control-btn--primary span { display:none; }
  .exam-submit-modal__dialog { padding:28px 19px; }.exam-result-topbar { min-height:66px; grid-template-columns:1fr auto; padding:10px 15px; }.exam-result-topbar strong { display:none; }.exam-result-main { width:calc(100% - 24px); margin-top:20px; }.exam-result-summary { padding:28px 17px; border-radius:23px; }.exam-result-summary h1 { font-size:2rem; }.exam-result-stats { gap:5px; }.exam-result-stats > div { gap:5px; }.exam-result-stats > div > span { width:29px; height:29px; }.exam-result-list article { grid-template-columns:42px 1fr; padding:14px; }.exam-result-list article button { grid-column:2; justify-self:start; }.exam-result-list article > p { grid-column:1/-1; }.exam-result-list h2 { white-space:normal; font-size:.82rem; }.exam-result-map { grid-template-columns:repeat(5,44px); justify-content:space-between; gap:10px; }.exam-result-map span { width:44px; height:44px; font-size:.74rem; }.exam-result-tabs button { flex:1; padding-inline:8px; font-size:.78rem; }
}