/* =============================================================
   UEAH Next-Gen Design System
   Dark purple/neon aesthetic matching the NextGen UI mockups.
   Drop this file into assets/css/ and link it in index.html
   AFTER styles.css (it overrides the old pastel theme).
   ============================================================= */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ── Design Tokens ── */
:root {
  /* Core palette */
  --bg-deep:        #07071a;
  --bg-space:       #0d0d2b;
  --bg-card:        #11113a;
  --bg-card-hover:  #161650;
  --bg-glass:       rgba(255,255,255,0.05);
  --bg-glass-hover: rgba(255,255,255,0.09);

  /* Text */
  --text-primary:   #ffffff;
  --text-secondary: #b0b3d6;
  --text-muted:     #6a6d9a;

  /* Brand accent */
  --accent-purple:  #7c5cfc;
  --accent-blue:    #4fc3f7;
  --accent-cyan:    #00e5ff;
  --accent-pink:    #f472b6;
  --accent-orange:  #fb923c;
  --accent-yellow:  #fbbf24;
  --accent-green:   #34d399;

  /* Glow colours per card */
  --glow-green:   #34d399;
  --glow-yellow:  #fbbf24;
  --glow-blue:    #4fc3f7;
  --glow-orange:  #fb923c;
  --glow-pink:    #f472b6;
  --glow-purple:  #a78bfa;

  /* Nav */
  --nav-bg:       rgba(7,7,26,0.85);
  --nav-border:   rgba(124,92,252,0.15);
  --nav-active-bg: rgba(124,92,252,0.18);
  --nav-active-border: #7c5cfc;

  /* Border */
  --border-subtle: rgba(255,255,255,0.08);
  --border-glow:   rgba(124,92,252,0.3);

  /* Radius */
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill: 100px;

  /* Shadows */
  --shadow-card: 0 4px 32px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 24px rgba(124,92,252,0.35);

  /* Typography */
  --font-base: 'Inter', system-ui, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;

  /* Transitions */
  --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

@property --frame-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@keyframes frameOrbit {
  to { --frame-angle: 360deg; }
}

@keyframes frameSpin {
  to { transform: rotate(1turn); }
}

/* ── Reset / Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-base);
  background: var(--bg-deep);
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
}

/* Starfield / nebula background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%,   rgba(124,92,252,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 10%,  rgba(79,195,247,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 70% 40% at 50% 100%, rgba(244,114,182,0.10) 0%, transparent 60%),
    var(--bg-deep);
  pointer-events: none;
}

/* Subtle star dots */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 5%,  rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 25%, rgba(255,255,255,0.25)0%, transparent 100%),
    radial-gradient(1px 1px at 70% 8%,  rgba(255,255,255,0.35)0%, transparent 100%),
    radial-gradient(1px 1px at 90% 20%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 45%, rgba(255,255,255,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 60%, rgba(255,255,255,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 55%, rgba(255,255,255,0.25)0%, transparent 100%),
    radial-gradient(1px 1px at 25% 80%, rgba(255,255,255,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 65% 85%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 95%, rgba(255,255,255,0.2) 0%, transparent 100%);
  pointer-events: none;
}

/* All page content sits above the bg */
.site-header, .site-main, .site-footer, #app { position: relative; z-index: 1; }

/* ── Skip Link ── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--accent-purple);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  z-index: 9999;
  transition: top var(--transition);
}
.skip-link:focus { top: 1rem; }

/* ── Container ── */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ── HEADER / NAV ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--nav-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 68px;
  padding: 0.45rem 0;
}

/* Brand */
.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  flex-shrink: 0;
}

.brand-mark {
  font-size: 1.1rem;
}
.brand-mark::before { content: '💜'; }

.brand-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-primary);
  letter-spacing: 0.03em;
}

/* Nav */
.site-nav {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex: 1;
  justify-content: center;
  flex-wrap: wrap;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-pill);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--transition);
  border: 1px solid transparent;
  white-space: nowrap;
  position: relative;
}

.nav-link:hover {
  color: var(--text-primary);
  background: var(--bg-glass-hover);
  border-color: var(--border-subtle);
}

.nav-link.active,
.nav-link[aria-current="page"] {
  color: var(--text-primary);
  background: var(--nav-active-bg);
  border-color: var(--nav-active-border);
  box-shadow: 0 0 16px rgba(124,92,252,0.25);
}

.nav-link .emoji { font-size: 1rem; }

/* Favourites badge */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 100px;
  background: var(--accent-purple);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}
.nav-badge[hidden] { display: none; }

/* ── MAIN ── */
.site-main { padding: 2.5rem 0 3rem; min-height: calc(100vh - 68px - 56px); }

/* ── HERO (home page) ── */
.hero { padding: 1rem 0 2rem; }

.eyebrow {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
  letter-spacing: 0.02em;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.hero-title small { font-size: 0.7em; }

.hero-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  max-width: 600px;
  margin-bottom: 2.5rem;
  line-height: 1.7;
}

.home-made-with {
  margin-top: 2rem;
  font-size: 0.95rem;
  max-width: none;
}

/* ── HOME CARD GRID ── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 0.5rem;
}

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

/* ── CARD ── */
.card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.4rem;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  text-decoration: none;
  color: var(--text-primary);
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* Inner glow strip at bottom */
.card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glow-color, rgba(124,92,252,0.5)), transparent);
  opacity: 0;
  transition: opacity var(--transition);
}

.card:hover {
  background: var(--bg-card-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.4), 0 0 20px rgba(var(--glow-rgb, 124,92,252), 0.2);
  border-color: rgba(var(--glow-rgb, 124,92,252), 0.35);
}
.card:hover::after { opacity: 1; }

/* Glow variants */
.card[data-glow="green"]  { --glow-color: var(--glow-green);  --glow-rgb: 52,211,153; }
.card[data-glow="yellow"] { --glow-color: var(--glow-yellow); --glow-rgb: 251,191,36; }
.card[data-glow="blue"]   { --glow-color: var(--glow-blue);   --glow-rgb: 79,195,247; }
.card[data-glow="orange"] { --glow-color: var(--glow-orange); --glow-rgb: 251,146,60; }
.card[data-glow="pink"]   { --glow-color: var(--glow-pink);   --glow-rgb: 244,114,182; }
.card[data-glow="purple"] { --glow-color: var(--glow-purple); --glow-rgb: 167,139,250; }

/* Card icon wrapper */
.card-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.6rem;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
}

.card[data-glow="green"]  .card-icon { background: rgba(52,211,153,0.12);  border-color: rgba(52,211,153,0.25);  color: var(--glow-green);  }
.card[data-glow="yellow"] .card-icon { background: rgba(251,191,36,0.12);  border-color: rgba(251,191,36,0.25);  color: var(--glow-yellow); }
.card[data-glow="blue"]   .card-icon { background: rgba(79,195,247,0.12);  border-color: rgba(79,195,247,0.25);  color: var(--glow-blue);   }
.card[data-glow="orange"] .card-icon { background: rgba(251,146,60,0.12);  border-color: rgba(251,146,60,0.25);  color: var(--glow-orange); }
.card[data-glow="pink"]   .card-icon { background: rgba(244,114,182,0.12); border-color: rgba(244,114,182,0.25); color: var(--glow-pink);   }
.card[data-glow="purple"] .card-icon { background: rgba(167,139,250,0.12); border-color: rgba(167,139,250,0.25); color: var(--glow-purple); }

.card-body { flex: 1; min-width: 0; }

.card-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
  color: var(--text-primary);
}

.card-text {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.card-cta {
  font-size: 0.8rem;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color var(--transition);
}
.card:hover .card-cta { color: var(--text-secondary); }

/* Primary card accent border */
.card--primary {
  border-color: rgba(52,211,153,0.3);
  box-shadow: 0 0 0 1px rgba(52,211,153,0.08) inset;
}

/* ── NOTE ── */
.note {
  background: rgba(124,92,252,0.1);
  border: 1px solid rgba(124,92,252,0.25);
  border-radius: var(--radius-md);
  padding: 0.9rem 1.2rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 1.5rem;
}

/* ── SECTION HEADINGS ── */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 800;
  text-align: center;
  color: var(--text-primary);
  margin-bottom: 0.6rem;
}

.section-subtitle {
  text-align: center;
  color: var(--text-secondary);
  font-size: 1rem;
  margin-bottom: 2.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* ── RESOURCES INDEX — age group cards ── */
.age-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

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

.age-card {
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  padding: 0 0 1.5rem;
  text-align: center;
  text-decoration: none;
  color: var(--text-primary);
  transition: all var(--transition);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.age-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 48px rgba(0,0,0,0.5), var(--shadow-glow);
  border-color: var(--border-glow);
}

.age-card__img {
  width: 100%;
  aspect-ratio: 1 / 1.05;
  object-fit: cover;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: linear-gradient(135deg, #1a1a4e, #2a1a6e);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  padding: 1.5rem;
}

.age-card__label {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  margin: 1rem 0 0.5rem;
  padding: 0 1rem;
}

.age-card__desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  padding: 0 1rem;
  margin-bottom: 1rem;
  flex: 1;
}

.age-card__btn {
  display: inline-block;
  margin: 0 1rem;
  padding: 0.55rem 1.5rem;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.07);
  color: var(--text-primary);
  transition: all var(--transition);
  cursor: pointer;
}

.age-card:hover .age-card__btn,
.age-card__btn:hover {
  background: rgba(124,92,252,0.25);
  border-color: var(--accent-purple);
  box-shadow: 0 0 16px rgba(124,92,252,0.3);
}

/* Age colour accents */
.age-card[data-age="0-3"]  { border-top: 2px solid #fb923c; }
.age-card[data-age="4-7"]  { border-top: 2px solid #f472b6; }
.age-card[data-age="8-12"] { border-top: 2px solid #4fc3f7; }
.age-card[data-age="13+"]  { border-top: 2px solid #a78bfa; }

/* ── SKILL CARDS (reading/listening/writing/speaking) ── */
.skill-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
@media (max-width: 900px)  { .skill-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .skill-grid { grid-template-columns: 1fr; } }

.skill-card {
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  padding: 2.5rem 1.5rem 1.75rem;
  text-align: center;
  text-decoration: none;
  color: var(--text-primary);
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  aspect-ratio: 3 / 4;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
}

.skill-card__icon {
  font-size: 4.5rem;
  position: absolute;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 16px currentColor);
}

.skill-card__name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
}

.skill-card[data-skill="reading"]   { border-color: rgba(52,211,153,0.3);  }
.skill-card[data-skill="reading"]   .skill-card__name { color: var(--accent-green); }
.skill-card[data-skill="listening"] { border-color: rgba(79,195,247,0.3);  }
.skill-card[data-skill="listening"] .skill-card__name { color: var(--accent-blue); }
.skill-card[data-skill="writing"]   { border-color: rgba(251,146,60,0.3);  }
.skill-card[data-skill="writing"]   .skill-card__name { color: var(--accent-orange); }
.skill-card[data-skill="speaking"]  { border-color: rgba(167,139,250,0.3); }
.skill-card[data-skill="speaking"]  .skill-card__name { color: var(--accent-purple); }

.skill-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 48px rgba(0,0,0,0.5);
}

/* ── TESTS INDEX ── */
.test-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
@media (max-width: 900px)  { .test-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .test-grid { grid-template-columns: 1fr; } }

.test-card {
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  padding: 2.5rem 1.5rem 1.75rem;
  text-align: center;
  text-decoration: none;
  color: var(--text-primary);
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.test-card__icon { font-size: 3.5rem; margin-bottom: 0.5rem; }

.test-card__name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
}

.test-card__desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  flex: 1;
}

.test-card__btn {
  margin-top: 0.75rem;
  padding: 0.6rem 2rem;
  border-radius: var(--radius-pill);
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid currentColor;
  background: transparent;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  color: inherit;
  display: inline-block;
}

.test-card:nth-child(1) { border-color: rgba(79,195,247,0.35); }
.test-card:nth-child(1) .test-card__btn  { color: var(--accent-cyan); }
.test-card:nth-child(2) { border-color: rgba(251,146,60,0.35); }
.test-card:nth-child(2) .test-card__btn  { color: var(--accent-orange); }
.test-card:nth-child(3) { border-color: rgba(79,195,247,0.2); }
.test-card:nth-child(3) .test-card__btn  { color: var(--accent-blue); }
.test-card:nth-child(4) { border-color: rgba(255,255,255,0.12); }
.test-card:nth-child(4) .test-card__btn  { color: var(--text-secondary); }

.test-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 48px rgba(0,0,0,0.5);
}
.test-card:hover .test-card__btn {
  background: rgba(255,255,255,0.08);
}

/* ── GAMES ── */
.games-hero {
  text-align: center;
  padding: 1rem 0 2rem;
}

.games-age-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 700px) { .games-age-grid { grid-template-columns: 1fr; } }

.game-age-card {
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  padding: 1.5rem;
  text-decoration: none;
  color: var(--text-primary);
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}

.game-age-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  border-color: var(--border-glow);
}

.game-age-card__avatar {
  font-size: 3.5rem;
  margin-bottom: 0.75rem;
  display: block;
}

.game-age-card__range {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.game-age-card__name {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  margin: 0.2rem 0 0.5rem;
}

.game-age-card__desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* IELTS featured card */
.game-featured-card {
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(251,191,36,0.08), rgba(251,146,60,0.06));
  border: 1px solid rgba(251,191,36,0.35);
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: 0 0 40px rgba(251,191,36,0.1);
}

.game-featured-card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent-yellow);
  margin-bottom: 0.5rem;
}

.game-featured-card__desc {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-bottom: 1.25rem;
}

.btn-primary {
  display: inline-block;
  padding: 0.7rem 2rem;
  border-radius: var(--radius-pill);
  background: rgba(251,191,36,0.15);
  border: 1px solid rgba(251,191,36,0.4);
  color: var(--accent-yellow);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition);
}
.btn-primary:hover {
  background: rgba(251,191,36,0.25);
  box-shadow: 0 0 20px rgba(251,191,36,0.3);
}

/* Game stats section */
.game-stats-section { margin-top: 2rem; }

.game-stats-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.game-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 700px) { .game-stats-grid { grid-template-columns: 1fr; } }

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.stat-card__icon { font-size: 2.2rem; flex-shrink: 0; }

.stat-card__label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 0.3rem;
}

.stat-card__value {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
}

.stat-progress {
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.1);
  margin-top: 0.4rem;
  overflow: hidden;
}

.stat-progress__fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-purple), var(--accent-blue));
  transition: width 0.6s ease;
}

/* Badges */
.badges-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.badge-item__icon { font-size: 2.5rem; }

/* ── PROFILE PAGE ── */
.profile-layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 1.5rem;
}
@media (max-width: 800px) { .profile-layout { grid-template-columns: 1fr; } }

.profile-glass {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
}

.profile-avatar-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid var(--accent-purple);
  box-shadow: 0 0 24px rgba(124,92,252,0.4);
  object-fit: cover;
  font-size: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-space);
  overflow: hidden;
  flex-shrink: 0;
}

.profile-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 0.2rem;
}

.profile-meta-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.profile-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.profile-detail-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
}

.profile-detail-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.25rem;
}

.profile-detail-value {
  font-size: 0.9rem;
  font-weight: 600;
}

/* IELTS score ring */
.ielts-score-ring {
  text-align: center;
  margin-bottom: 1.5rem;
}

.score-ring {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: conic-gradient(
    from -90deg,
    var(--accent-purple) 0%,
    var(--accent-blue) 40%,
    var(--accent-cyan) 65%,
    var(--accent-yellow) 85%,
    rgba(255,255,255,0.1) 85%
  );
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  position: relative;
}

.score-ring::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: var(--bg-card);
}

.score-ring__value {
  position: relative;
  z-index: 1;
  text-align: center;
}

.score-ring__number {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  display: block;
}

.score-ring__label {
  font-size: 0.7rem;
  color: var(--text-secondary);
}

/* Achievements */
.achievements-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.achievement-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  min-width: 80px;
}
.achievement-badge__icon { font-size: 2rem; }

/* Progress bar */
.progress-bar-wrap {
  margin: 0.5rem 0;
}
.progress-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
}
.progress-bar {
  height: 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.progress-bar__fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan));
}

/* Profile action buttons */
.profile-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}

.btn-outline {
  flex: 1;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  background: rgba(255,255,255,0.05);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
}
.btn-outline:hover {
  background: rgba(124,92,252,0.15);
  border-color: var(--accent-purple);
}

/* ── SCORING PAGE ── */
.scoring-page { padding: 1rem 0 2rem; }

.scoring-page .page-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.scoring-page .page-subtitle {
  color: var(--text-secondary);
  margin-bottom: 2.5rem;
}

.scoring-path-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  align-items: center;
  position: relative;
}
@media (max-width: 900px)  { .scoring-path-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .scoring-path-grid { grid-template-columns: 1fr; } }

/* Connector line between cards */
.scoring-path-grid::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-green), var(--accent-blue), var(--accent-pink), var(--accent-yellow));
  opacity: 0.4;
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 900px) { .scoring-path-grid::before { display: none; } }

.scoring-level-card {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-xl);
  padding: 1.25rem;
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: all var(--transition);
  text-decoration: none;
  color: var(--text-primary);
}

.scoring-level-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}

.scoring-level-card__age {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.scoring-level-card__badge {
  width: 100px;
  height: 100px;
  border-radius: var(--radius-md);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  border: 2px solid currentColor;
}

.scoring-level-card:nth-child(1) .scoring-level-card__badge { color: var(--accent-green);  background: rgba(52,211,153,0.08);  }
.scoring-level-card:nth-child(2) .scoring-level-card__badge { color: var(--accent-blue);   background: rgba(79,195,247,0.08);  }
.scoring-level-card:nth-child(3) .scoring-level-card__badge { color: var(--accent-pink);   background: rgba(244,114,182,0.08); }
.scoring-level-card:nth-child(4) .scoring-level-card__badge { color: var(--accent-yellow); background: rgba(251,191,36,0.08);  }

.scoring-level-card:nth-child(1) { border-top: 2px solid var(--accent-green);  }
.scoring-level-card:nth-child(2) { border-top: 2px solid var(--accent-blue);   }
.scoring-level-card:nth-child(3) { border-top: 2px solid var(--accent-pink);   }
.scoring-level-card:nth-child(4) { border-top: 2px solid var(--accent-yellow); }

.scoring-level-card__desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

/* ── CONTACT PAGE ── */
.contact-layout {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
  padding: 1rem 0;
}

.contact-card {
  flex: 0 1 600px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
}

.contact-card__title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.contact-card__subtitle {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

/* Contact type toggle */
.contact-type-row {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.contact-type-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border-subtle);
  background: rgba(255,255,255,0.05);
  color: var(--text-secondary);
  transition: all var(--transition);
}
.contact-type-btn.active,
.contact-type-btn:hover { color: var(--text-primary); background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
.contact-type-btn--idea.active  { background: rgba(251,191,36,0.15); border-color: rgba(251,191,36,0.4); color: var(--accent-yellow); }
.contact-type-btn--bug.active   { background: rgba(244,114,182,0.15); border-color: rgba(244,114,182,0.4); color: var(--accent-pink); }
.contact-type-btn--question.active { background: rgba(79,195,247,0.15); border-color: rgba(79,195,247,0.4); color: var(--accent-blue); }

/* Form elements */
.form-group { margin-bottom: 1rem; }

.form-input,
.form-textarea {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  padding: 0.8rem 1rem;
  color: var(--text-primary);
  font-family: var(--font-base);
  font-size: 0.9rem;
  transition: all var(--transition);
  outline: none;
  resize: vertical;
}

.form-input::placeholder, .form-textarea::placeholder { color: var(--text-muted); }

.form-input:focus, .form-textarea:focus {
  border-color: var(--accent-purple);
  background: rgba(124,92,252,0.07);
  box-shadow: 0 0 0 3px rgba(124,92,252,0.15);
}

.form-textarea { min-height: 130px; }

.btn-send {
  padding: 0.75rem 2.5rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--accent-purple), rgba(79,195,247,0.8));
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: 0 4px 20px rgba(124,92,252,0.35);
}
.btn-send:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(124,92,252,0.45);
}

/* Contact decorative icon */
.contact-deco { display: flex; align-items: center; padding-top: 3rem; }
.contact-deco__icon { font-size: 8rem; filter: drop-shadow(0 0 40px rgba(124,92,252,0.4)); }

@media (max-width: 700px) { .contact-deco { display: none; } }

/* ── CERTIFICATE PAGE ── */
.certificate-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  padding: 2rem 0;
}

.certificate-card {
  width: 100%;
  max-width: 800px;
  background: linear-gradient(135deg, #1a0a3d, #2d1060, #1a0a3d);
  border: 1px solid rgba(124,92,252,0.3);
  border-radius: var(--radius-xl);
  padding: 3.5rem 3rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 80px rgba(124,92,252,0.2);
}

/* Constellation lines SVG overlay */
.certificate-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 15% 20%, rgba(124,92,252,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 15%, rgba(79,195,247,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 80%, rgba(244,114,182,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 85%, rgba(124,92,252,0.7) 0%, transparent 100%),
    radial-gradient(2px 2px at 10% 50%, rgba(79,195,247,0.5) 0%, transparent 100%),
    radial-gradient(2px 2px at 90% 50%, rgba(244,114,182,0.5) 0%, transparent 100%);
  pointer-events: none;
}

.certificate-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  margin-bottom: 1.5rem;
}

.certificate-type {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  margin-bottom: 0.5rem;
}

.certificate-presented { color: rgba(255,255,255,0.5); font-size: 0.9rem; margin-bottom: 0.5rem; }

.certificate-name {
  font-family: 'Georgia', serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: #fff;
  margin: 0.5rem 0 1rem;
  font-weight: 400;
}

.certificate-divider {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  margin: 1rem 0;
}

.certificate-achievement {
  color: rgba(255,255,255,0.75);
  font-size: 1rem;
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

.certificate-sig {
  font-family: 'Georgia', cursive;
  font-size: 1.4rem;
  color: rgba(255,255,255,0.6);
  border-bottom: 1px solid rgba(255,255,255,0.2);
  display: inline-block;
  padding-bottom: 0.25rem;
  margin-bottom: 1.5rem;
}

.certificate-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: var(--accent-purple);
  font-size: 0.85rem;
}

/* Corner decorations */
.certificate-star-tl, .certificate-star-tr,
.certificate-star-bl, .certificate-star-br {
  position: absolute;
  font-size: 2.5rem;
}
.certificate-star-tl { top: 1.25rem;  right: 1.75rem; }
.certificate-star-tr { bottom: 1.25rem; right: 1.75rem; }
.certificate-star-bl { top: 1.25rem;  left: 1.75rem; }
.certificate-star-br { bottom: 1.25rem; left: 1.75rem; }

/* ── FAVOURITES ── */
.favourites-empty {
  text-align: center;
  padding: 5rem 1rem;
  color: var(--text-secondary);
}
.favourites-empty__icon { font-size: 4rem; margin-bottom: 1rem; }
.favourites-empty__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

/* Resource list items */
.resource-list { display: flex; flex-direction: column; gap: 0.75rem; }

.resource-item {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: var(--text-primary);
  transition: all var(--transition);
}
.resource-item:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-glow);
  transform: translateX(3px);
}
.resource-item__icon { font-size: 1.5rem; flex-shrink: 0; }
.resource-item__title { font-weight: 600; font-size: 0.95rem; }
.resource-item__meta  { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.15rem; }
.resource-item__action { margin-left: auto; flex-shrink: 0; }

/* Fav button */
.fav-btn {
  background: none;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.75rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.fav-btn:hover, .fav-btn.active {
  background: rgba(244,114,182,0.12);
  border-color: rgba(244,114,182,0.35);
  color: var(--accent-pink);
}

/* ── 404 PAGE ── */
.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  text-align: center;
  padding: 2rem 1rem;
  gap: 0.5rem;
}

.error-page__num {
  font-family: var(--font-display);
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: 900;
  color: #fff;
  line-height: 1;
  text-shadow: 0 0 60px rgba(124,92,252,0.5);
}

.error-page__title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3vw, 2rem);
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.error-page__owl { font-size: clamp(6rem, 15vw, 10rem); margin: 1rem 0; display: block; }

.error-page__actions {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.btn-ghost {
  padding: 0.75rem 2rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(124,92,252,0.4);
  background: rgba(124,92,252,0.1);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  display: inline-block;
}
.btn-ghost:hover {
  background: rgba(124,92,252,0.2);
  border-color: var(--accent-purple);
  box-shadow: 0 0 20px rgba(124,92,252,0.25);
}

/* ── FOOTER ── */
.site-footer {
  border-top: 1px solid var(--border-subtle);
  padding: 1rem 0;
  background: rgba(7,7,26,0.8);
  backdrop-filter: blur(10px);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.footer-left { color: var(--text-muted); }

.footer-right a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition);
}
.footer-right a:hover { color: var(--text-secondary); }

/* ── GENERIC PAGE HEADER ── */
.page-header {
  text-align: center;
  padding: 1.5rem 0 2.5rem;
}

.page-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  margin-bottom: 0.6rem;
}

.page-subtitle {
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

/* ── UTILITY ── */
.text-center { text-align: center; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.gap-1 { gap: 0.5rem; }
.flex  { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ── BREADCRUMB ── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}
.breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.breadcrumb a:hover { color: var(--text-primary); }
.breadcrumb__sep { color: var(--text-muted); }

/* ── QUIZ / TEST RUNNER ── */
.quiz-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 2rem;
  max-width: 700px;
  margin: 0 auto;
}

.quiz-question {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.quiz-option {
  padding: 0.9rem 1.25rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  transition: all var(--transition);
  font-size: 0.95rem;
  text-align: left;
  color: var(--text-primary);
}
.quiz-option:hover     { background: rgba(124,92,252,0.1); border-color: var(--accent-purple); }
.quiz-option.selected  { background: rgba(124,92,252,0.2); border-color: var(--accent-purple); }
.quiz-option.correct   { background: rgba(52,211,153,0.15); border-color: var(--accent-green); }
.quiz-option.incorrect { background: rgba(244,114,182,0.15); border-color: var(--accent-pink); }

/* Score display */
.score-display {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 2rem;
  text-align: center;
  max-width: 500px;
  margin: 0 auto;
}

.score-display__num {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 900;
  color: var(--accent-purple);
}

.score-display__label { color: var(--text-secondary); margin-bottom: 1.5rem; }

/* ── LOADING SPINNER ── */
.loading-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(124,92,252,0.15);
  border-top-color: var(--accent-purple);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* ── ALERTS / TOASTS ── */
.alert {
  padding: 0.9rem 1.25rem;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.alert--success { background: rgba(52,211,153,0.1);  border: 1px solid rgba(52,211,153,0.3);  color: var(--accent-green);  }
.alert--error   { background: rgba(244,114,182,0.1); border: 1px solid rgba(244,114,182,0.3); color: var(--accent-pink);   }
.alert--info    { background: rgba(79,195,247,0.1);  border: 1px solid rgba(79,195,247,0.3);  color: var(--accent-blue);   }

/* ── NOSCRIPT ── */
.noscript {
  background: rgba(244,114,182,0.1);
  border: 1px solid rgba(244,114,182,0.3);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin-top: 2rem;
  text-align: center;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .header-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.7rem 0;
  }

  .site-nav {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.2rem;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .site-nav::-webkit-scrollbar {
    height: 6px;
  }

  .site-nav::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.14);
    border-radius: 999px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .games-hub-card::before,
  .games-featured-banner::before,
  .games-dashboard__panel::before,
  .games-badge-card::before,
  .games-skill-card::before,
  .games-list-card::before,
  .game-hero-card::before,
  .game-missing-card::before,
  .game-status-bar::before,
  .game-container::before,
  .game-tip-card::before,
  .game-side-card::before {
    animation: none;
  }
}

@media (max-width: 600px) {
  .container {
    padding: 0 1rem;
  }

  .nav-link {
    padding: 0.45rem 0.75rem;
    font-size: 0.8rem;
  }

  .site-main {
    padding: 1.5rem 0 2rem;
  }

  .page-title,
  .detail-title {
    line-height: 1.08;
    letter-spacing: -0.02em;
  }

  .page-subtitle {
    font-size: 0.96rem;
  }

  .contact-card { padding: 1.5rem; }
  .profile-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
  .nav-link .emoji { display: none; }
  .nav-link {
    padding: 0.44rem 0.68rem;
  }
}

/* ── PRINT (certificate) ── */
@media print {
  body::before, body::after { display: none; }
  .site-header, .site-footer, .breadcrumb { display: none; }
  .certificate-card { box-shadow: none; border: 2px solid #6200ea; }
}

/* =============================================================
   Compatibility bridge for the existing SPA component system.
   The routed views still inherit the original token names from
   assets/css/styles.css, so mirror the nextgen palette into them.
   ============================================================= */

:root {
  --bg: var(--bg-deep);
  --bg2: #0d0d2b;
  --surface: rgba(17, 17, 58, 0.84);
  --surface2: rgba(255, 255, 255, 0.06);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --border: rgba(255, 255, 255, 0.12);
  --shadow: 0 22px 52px rgba(0, 0, 0, 0.42);
  --shadow2: 0 12px 28px rgba(0, 0, 0, 0.28);
  --accent: var(--accent-purple);
  --accent2: var(--accent-blue);
  --focus: var(--accent-cyan);
  --test-glow: rgba(79, 195, 247, 0.34);
  --test-glow-border: rgba(79, 195, 247, 0.56);
  --test-glow-ring: rgba(79, 195, 247, 0.18);
  --profile-glow: rgba(251, 146, 60, 0.32);
  --profile-glow-border: rgba(251, 146, 60, 0.58);
  --profile-glow-ring: rgba(251, 146, 60, 0.18);
  --fav-glow: rgba(244, 114, 182, 0.32);
  --fav-glow-border: rgba(244, 114, 182, 0.58);
  --fav-glow-ring: rgba(244, 114, 182, 0.18);
  --danger: #ff6b8a;
  --success: #34d399;
  --warning: #fbbf24;
  --chip-bg: rgba(255, 255, 255, 0.08);
  --chip-bg-strong: rgba(255, 255, 255, 0.12);
  --status-bg: rgba(124, 92, 252, 0.12);
  --status-border: rgba(124, 92, 252, 0.24);
  --radius: 20px;
  --radius2: 28px;
  --max: 1280px;
  --gutter: 24px;
  --font: var(--font-base);
}

body {
  color-scheme: dark;
}

.page-title,
.detail-title,
.section-title,
.card-title,
.resource-title,
.game-tip-card__title,
.cta-title {
  font-family: var(--font-display);
}

.page-top {
  display: grid;
  gap: 1.15rem;
}

.actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.note {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.03);
  border-color: rgba(124, 92, 252, 0.24);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.78rem 1.15rem;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-primary);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition);
}

.btn:hover {
  transform: translateY(-1px);
  border-color: rgba(124, 92, 252, 0.26);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18), 0 0 18px rgba(124, 92, 252, 0.08);
}

.btn:focus-visible {
  outline: 3px solid rgba(79, 195, 247, 0.22);
  outline-offset: 2px;
}

.btn--small {
  min-height: 38px;
  padding: 0.6rem 0.95rem;
  font-size: 0.82rem;
}

.btn--primary {
  border-color: rgba(124, 92, 252, 0.38);
  background:
    linear-gradient(135deg, rgba(124, 92, 252, 0.30), rgba(79, 195, 247, 0.18)),
    rgba(255, 255, 255, 0.08);
}

.btn--primary:hover {
  border-color: rgba(79, 195, 247, 0.42);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.2), 0 0 22px rgba(79, 195, 247, 0.12);
}

.detail-card,
.resource-card,
.game-container,
.game-status-bar,
.game-tip-card,
.test-detail-shell,
.test-runner-shell {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.site-footer {
  background: rgba(7, 7, 26, 0.8);
}

/* =============================================================
   Landing home sections rendered by assets/js/views/home.js
   Scoped so the rest of the SPA keeps its own component rhythm.
   ============================================================= */

.landing-home {
  padding-bottom: 2rem;
}

.landing-home .hero {
  padding: 5.5rem 0 4.75rem;
}

.landing-home .hero-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
  align-items: center;
  gap: 2.5rem;
}

.landing-home .hero-copy {
  text-align: left;
}

.landing-home .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: rgba(124, 92, 252, 0.12);
  border: 1px solid rgba(124, 92, 252, 0.32);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-purple);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.landing-home .hero-title {
  font-size: clamp(2.8rem, 7vw, 5.4rem);
  font-weight: 900;
  line-height: 1.04;
  margin-bottom: 1.35rem;
  letter-spacing: -0.04em;
}

.landing-home .hero-title .grad {
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue) 50%, var(--accent-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.landing-home .hero-sub {
  max-width: 740px;
  margin: 0 auto 2.2rem;
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--text-secondary);
  line-height: 1.75;
}

.landing-home .hero-actions,
.landing-home .cta-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.landing-home .btn-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 54px;
  padding: 0.9rem 2rem;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition);
}

.landing-home .btn-hero--primary {
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue));
  color: #fff;
  box-shadow: 0 10px 38px rgba(124, 92, 252, 0.34);
}

.landing-home .btn-hero--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 44px rgba(124, 92, 252, 0.42);
}

.landing-home .btn-hero--outline {
  border: 1px solid rgba(124, 92, 252, 0.4);
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.03);
}

.landing-home .btn-hero--outline:hover {
  transform: translateY(-2px);
  background: rgba(124, 92, 252, 0.12);
  border-color: rgba(124, 92, 252, 0.6);
}

.landing-home .hero-note,
.landing-home .cta-note {
  margin-top: 0.9rem;
  font-size: 0.84rem;
  color: var(--text-muted);
}

.landing-home .hero-pills {
  display: flex;
  justify-content: flex-start;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 2.6rem;
}

.landing-home .hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.58rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.landing-home .hero-visual {
  position: relative;
  min-height: 520px;
}

.landing-home .hero-visual__halo,
.landing-home .hero-visual__spark {
  position: absolute;
  pointer-events: none;
}

.landing-home .hero-visual__halo {
  border-radius: 50%;
  filter: blur(22px);
  opacity: 0.88;
}

.landing-home .hero-visual__halo--one {
  top: 4%;
  left: 8%;
  width: 180px;
  height: 180px;
  background: rgba(124, 92, 252, 0.28);
}

.landing-home .hero-visual__halo--two {
  right: 6%;
  bottom: 8%;
  width: 220px;
  height: 220px;
  background: rgba(79, 195, 247, 0.22);
}

.landing-home .hero-visual__spark {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.55);
}

.landing-home .hero-visual__spark--one {
  top: 18%;
  right: 14%;
}

.landing-home .hero-visual__spark--two {
  left: 12%;
  bottom: 26%;
}

.landing-home .hero-visual__spark--three {
  right: 38%;
  top: 8%;
}

.landing-home .hero-visual__frame {
  position: absolute;
  inset: 36px 42px 34px 18px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(180px, 0.85fr);
  gap: 1rem;
  padding: 1.15rem;
  border-radius: 34px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
    radial-gradient(480px 220px at 0% 0%, rgba(124, 92, 252, 0.18), transparent 72%),
    radial-gradient(520px 260px at 100% 0%, rgba(79, 195, 247, 0.14), transparent 72%),
    rgba(10, 12, 30, 0.7);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.landing-home .hero-visual__card {
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
}

.landing-home .hero-visual__card--lead {
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.landing-home .hero-visual__eyebrow {
  color: var(--accent-cyan);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.landing-home .hero-visual__title {
  margin-top: 0.8rem;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.15;
}

.landing-home .hero-visual__mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.2rem;
}

.landing-home .hero-visual__mini-tile {
  min-height: 94px;
  padding: 0.95rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.landing-home .hero-visual__mini-tile strong {
  font-size: 1.25rem;
}

.landing-home .hero-visual__mini-tile span {
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 700;
}

.landing-home .hero-visual__stack {
  display: grid;
  gap: 0.9rem;
}

.landing-home .hero-visual__card--path,
.landing-home .hero-visual__card--score {
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.landing-home .hero-visual__card-icon {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 1.35rem;
}

.landing-home .hero-visual__card-label {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.landing-home .hero-visual__card-value {
  margin-top: 0.3rem;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.45;
}

.landing-home .hero-floating {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(11, 13, 34, 0.78);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.landing-home .hero-floating span {
  font-size: 1.2rem;
}

.landing-home .hero-floating strong,
.landing-home .hero-floating small {
  display: block;
}

.landing-home .hero-floating strong {
  font-size: 0.84rem;
}

.landing-home .hero-floating small {
  color: var(--text-muted);
  font-size: 0.72rem;
}

.landing-home .hero-floating--certificate {
  top: 4%;
  left: -2%;
}

.landing-home .hero-floating--favourites {
  right: 0;
  bottom: 3%;
}

.landing-home .stats-strip {
  padding: 2.6rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.landing-home .stats-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem;
  text-align: center;
}

.landing-home .stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.landing-home .stat-label {
  margin-top: 0.35rem;
  color: var(--text-secondary);
  font-size: 0.84rem;
}

.landing-home .features,
.landing-home .age-section,
.landing-home .how-section,
.landing-home .skills-section,
.landing-home .testimonials,
.landing-home .cta-section {
  padding: 5rem 0;
}

.landing-home .section-label {
  display: block;
  margin-bottom: 0.7rem;
  color: var(--accent-purple);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.landing-home .section-title {
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 0.85rem;
}

.landing-home .section-sub {
  max-width: 760px;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 2.6rem;
}

.landing-home .features-grid,
.landing-home .skills-grid,
.landing-home .testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.landing-home .feature-card,
.landing-home .testimonial-card,
.landing-home .skill-pill,
.landing-home .cta-card,
.landing-home .step,
.landing-home .age-path-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 24px;
}

.landing-home .feature-card,
.landing-home .testimonial-card,
.landing-home .skill-pill {
  padding: 1.7rem;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.landing-home .feature-card:hover,
.landing-home .testimonial-card:hover,
.landing-home .skill-pill:hover,
.landing-home .age-path-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.34);
  border-color: rgba(255, 255, 255, 0.15);
}

.landing-home .feature-card::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-color, var(--accent-purple)), transparent);
  opacity: 0;
  transition: opacity var(--transition);
}

.landing-home .feature-card:hover::before {
  opacity: 1;
}

.landing-home .feature-card[data-accent="green"] { --accent-color: var(--accent-green); }
.landing-home .feature-card[data-accent="yellow"] { --accent-color: var(--accent-yellow); }
.landing-home .feature-card[data-accent="blue"] { --accent-color: var(--accent-blue); }
.landing-home .feature-card[data-accent="orange"] { --accent-color: var(--accent-orange); }
.landing-home .feature-card[data-accent="pink"] { --accent-color: var(--accent-pink); }
.landing-home .feature-card[data-accent="purple"] { --accent-color: var(--accent-purple); }

.landing-home .feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-width: 78px;
  min-height: 62px;
  padding: 0 1rem;
  border-radius: 18px;
  margin-bottom: 1rem;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.landing-home .feature-icon__emoji {
  font-size: 1.2rem;
}

.landing-home .feature-title,
.landing-home .step__title,
.landing-home .skill-pill__name,
.landing-home .testimonial-name {
  font-family: var(--font-display);
}

.landing-home .feature-title {
  font-size: 1.08rem;
  font-weight: 700;
  margin-bottom: 0.45rem;
}

.landing-home .feature-desc,
.landing-home .step__desc,
.landing-home .skill-pill__desc,
.landing-home .testimonial-text {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.7;
}

.landing-home .age-paths-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.landing-home .age-path-card {
  overflow: hidden;
  text-decoration: none;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  min-height: 100%;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.landing-home .age-path-card__top {
  min-height: 148px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.landing-home .age-path-card__range {
  padding: 1.2rem 1.25rem 0.35rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
}

.landing-home .age-path-card__title {
  padding: 0 1.25rem;
  color: var(--text-secondary);
  font-size: 0.86rem;
  line-height: 1.65;
  flex: 1;
}

.landing-home .age-path-card__cta {
  margin: 1.1rem 1.25rem 1.25rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.84rem;
  font-weight: 700;
}

.landing-home .age-path-card[data-age="0-3"] .age-path-card__top {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.18), rgba(251, 191, 36, 0.08));
}

.landing-home .age-path-card[data-age="4-7"] .age-path-card__top {
  background: linear-gradient(135deg, rgba(244, 114, 182, 0.18), rgba(167, 139, 250, 0.08));
}

.landing-home .age-path-card[data-age="8-10"] .age-path-card__top {
  background: linear-gradient(135deg, rgba(79, 195, 247, 0.18), rgba(0, 229, 255, 0.08));
}

.landing-home .age-path-card[data-age="11-12"] .age-path-card__top {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.18), rgba(79, 195, 247, 0.08));
}

.landing-home .age-path-card[data-age="13-18"] .age-path-card__top {
  background: linear-gradient(135deg, rgba(124, 92, 252, 0.18), rgba(167, 139, 250, 0.08));
}

.landing-home .age-path-card[data-age="ielts"] .age-path-card__top {
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.16), rgba(124, 92, 252, 0.1));
}

.landing-home .steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  position: relative;
}

.landing-home .steps-grid::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-purple), var(--accent-blue), var(--accent-cyan));
  opacity: 0.22;
}

.landing-home .step {
  padding: 0 1rem;
  text-align: center;
  position: relative;
  z-index: 1;
  background: transparent;
  border: 0;
}

.landing-home .step__num {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue));
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 900;
  box-shadow: 0 0 24px rgba(124, 92, 252, 0.32);
}

.landing-home .step__title {
  font-size: 1.02rem;
  font-weight: 700;
  margin-bottom: 0.45rem;
}

.landing-home .skills-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.landing-home .skill-pill {
  text-align: center;
}

.landing-home .skill-pill__icon {
  display: block;
  margin-bottom: 0.9rem;
  font-size: 2.15rem;
}

.landing-home .skill-pill__name {
  font-size: 1.08rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.landing-home .skill-pill[data-skill="reading"] { border-top: 2px solid var(--accent-green); }
.landing-home .skill-pill[data-skill="listening"] { border-top: 2px solid var(--accent-blue); }
.landing-home .skill-pill[data-skill="writing"] { border-top: 2px solid var(--accent-orange); }
.landing-home .skill-pill[data-skill="speaking"] { border-top: 2px solid var(--accent-purple); }

.landing-home .testimonial-stars {
  margin-bottom: 0.75rem;
  color: var(--accent-yellow);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.landing-home .testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.landing-home .testimonial-avatar {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.88rem;
  font-weight: 800;
}

.landing-home .testimonial-role {
  color: var(--text-muted);
  font-size: 0.76rem;
}

.landing-home .cta-section {
  padding-bottom: 6rem;
}

.landing-home .cta-card {
  position: relative;
  padding: 4.5rem 2rem;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(135deg, rgba(124, 92, 252, 0.14), rgba(79, 195, 247, 0.08));
  border-color: rgba(124, 92, 252, 0.28);
}

.landing-home .cta-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 20% 50%, rgba(124, 92, 252, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 80% 50%, rgba(79, 195, 247, 0.08) 0%, transparent 60%);
  pointer-events: none;
}

.landing-home .cta-card > * {
  position: relative;
}

.landing-home .cta-sub {
  max-width: 620px;
  margin: 0 auto 2rem;
  color: var(--text-secondary);
  font-size: 1.06rem;
  line-height: 1.75;
}

.landing-home [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.landing-home [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 960px) {
  .landing-home .hero-shell {
    grid-template-columns: 1fr;
  }

  .landing-home .hero-copy {
    text-align: center;
  }

  .landing-home .hero-pills {
    justify-content: center;
  }

  .landing-home .features-grid,
  .landing-home .age-paths-grid,
  .landing-home .skills-grid,
  .landing-home .testimonials-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .landing-home .hero-visual {
    min-height: 440px;
  }

  .landing-home .hero-visual__frame {
    inset: 22px 8px 24px;
    grid-template-columns: 1fr;
  }

  .landing-home .hero-floating--certificate,
  .landing-home .hero-floating--favourites {
    position: static;
    margin-top: 0.9rem;
  }

  .landing-home .stats-inner,
  .landing-home .features-grid,
  .landing-home .age-paths-grid,
  .landing-home .skills-grid,
  .landing-home .testimonials-grid,
  .landing-home .steps-grid {
    grid-template-columns: 1fr;
  }

  .landing-home .steps-grid::before {
    display: none;
  }

  .landing-home .hero {
    padding-top: 4.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-home [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .landing-home .btn-hero,
  .landing-home .feature-card,
  .landing-home .testimonial-card,
  .landing-home .skill-pill,
  .landing-home .age-path-card {
    transition: none;
  }
}

/* =============================================================
   Resources index + profile next-gen passes
   ============================================================= */

@supports ((-webkit-mask: linear-gradient(#000 0 0)) or (mask: linear-gradient(#000 0 0))) {
  .resources-nextgen .resource-age-card,
  .age-nextgen .age-skill-card,
  .skill-nextgen__stat,
  .skill-nextgen .detail-card,
  .skill-nextgen__resource-card {
    --frame-rgb: 124,92,252;
    --frame-strength: 1;
    --frame-speed: 8s;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    animation: frameOrbit var(--frame-speed) linear infinite;
  }

  .resources-nextgen .resource-age-card::after,
  .age-nextgen .age-skill-card::after,
  .skill-nextgen__stat::after,
  .skill-nextgen .detail-card::after,
  .skill-nextgen__resource-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(
      from var(--frame-angle, 0deg),
      transparent 0deg,
      rgba(var(--frame-rgb), calc(0.16 * var(--frame-strength))) 34deg,
      rgba(79,195,247, calc(0.70 * var(--frame-strength))) 78deg,
      rgba(251,191,36, calc(0.76 * var(--frame-strength))) 116deg,
      rgba(244,114,182, calc(0.48 * var(--frame-strength))) 150deg,
      transparent 186deg,
      transparent 360deg
    );
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }

  .skill-nextgen__stat,
  .skill-nextgen .detail-card,
  .skill-nextgen__resource-card {
    --frame-strength: 0.68;
    --frame-speed: 11s;
  }
}

.resource-age-card[data-glow="orange"] { --frame-rgb: 251,146,60; }
.resource-age-card[data-glow="yellow"] { --frame-rgb: 251,191,36; }
.resource-age-card[data-glow="blue"] { --frame-rgb: 79,195,247; }
.resource-age-card[data-glow="pink"] { --frame-rgb: 244,114,182; }
.resource-age-card[data-glow="purple"] { --frame-rgb: 167,139,250; }

.age-skill-card[data-skill="reading"],
.skill-nextgen__resource-card[data-skill="reading"] { --frame-rgb: 52,211,153; }
.age-skill-card[data-skill="listening"],
.skill-nextgen__resource-card[data-skill="listening"] { --frame-rgb: 79,195,247; }
.age-skill-card[data-skill="writing"],
.skill-nextgen__resource-card[data-skill="writing"] { --frame-rgb: 251,146,60; }
.age-skill-card[data-skill="speaking"],
.skill-nextgen__resource-card[data-skill="speaking"] { --frame-rgb: 167,139,250; }

.skill-nextgen__stat:nth-child(1) { --frame-rgb: 79,195,247; }
.skill-nextgen__stat:nth-child(2) { --frame-rgb: 251,191,36; }
.skill-nextgen__stat:nth-child(3) { --frame-rgb: 167,139,250; }

@media (prefers-reduced-motion: reduce) {
  .resources-nextgen .resource-age-card,
  .age-nextgen .age-skill-card,
  .skill-nextgen__stat,
  .skill-nextgen .detail-card,
  .skill-nextgen__resource-card {
    animation: none;
  }
}

.resources-nextgen {
  padding-bottom: 2rem;
}

.resources-hero {
  padding: 2.5rem 0 1.25rem;
  text-align: center;
}

.resources-hero__label,
.profile-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  background: rgba(124, 92, 252, 0.12);
  border: 1px solid rgba(124, 92, 252, 0.26);
  color: var(--accent-purple);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.resources-hero__title {
  margin-top: 1.2rem;
  margin-bottom: 1rem;
  font-size: clamp(2.2rem, 5vw, 4rem);
  text-align: center;
}

.resources-hero__subtitle {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  font-size: clamp(1rem, 2vw, 1.25rem);
}

.resources-age-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
  margin-top: 2rem;
}

.resource-age-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 480px;
  border-radius: 32px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text-primary);
  background: linear-gradient(180deg, rgba(23, 17, 74, 0.96), rgba(13, 13, 43, 0.94));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 24px 60px rgba(0,0,0,0.34);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.resource-age-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.10), transparent 40%);
  pointer-events: none;
}

.resource-age-card:hover {
  transform: translateY(-6px);
}

.resource-age-card[data-glow="orange"]:hover { box-shadow: 0 28px 72px rgba(0,0,0,0.42), 0 0 40px rgba(251,146,60,0.18); border-color: rgba(251,146,60,0.45); }
.resource-age-card[data-glow="yellow"]:hover { box-shadow: 0 28px 72px rgba(0,0,0,0.42), 0 0 40px rgba(251,191,36,0.18); border-color: rgba(251,191,36,0.45); }
.resource-age-card[data-glow="blue"]:hover   { box-shadow: 0 28px 72px rgba(0,0,0,0.42), 0 0 40px rgba(79,195,247,0.18); border-color: rgba(79,195,247,0.45); }
.resource-age-card[data-glow="pink"]:hover   { box-shadow: 0 28px 72px rgba(0,0,0,0.42), 0 0 40px rgba(244,114,182,0.18); border-color: rgba(244,114,182,0.45); }
.resource-age-card[data-glow="purple"]:hover { box-shadow: 0 28px 72px rgba(0,0,0,0.42), 0 0 40px rgba(167,139,250,0.18); border-color: rgba(167,139,250,0.45); }

.resource-age-card__art {
  position: relative;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 25%, rgba(255,255,255,0.18), transparent 32%),
    radial-gradient(circle at 50% 120%, rgba(124,92,252,0.35), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0));
}

.resource-age-card__art[data-glow="orange"] { background-color: rgba(251,146,60,0.12); }
.resource-age-card__art[data-glow="yellow"] { background-color: rgba(251,191,36,0.10); }
.resource-age-card__art[data-glow="blue"]   { background-color: rgba(79,195,247,0.12); }
.resource-age-card__art[data-glow="pink"]   { background-color: rgba(244,114,182,0.12); }
.resource-age-card__art[data-glow="purple"] { background-color: rgba(167,139,250,0.12); }

.resource-age-card__emoji {
  position: relative;
  z-index: 2;
  font-size: 5rem;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,0.28));
}

.resource-age-card__orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(12px);
  opacity: 0.8;
}

.resource-age-card__orb--one {
  width: 120px;
  height: 120px;
  top: 18%;
  left: 16%;
  background: rgba(255,255,255,0.14);
}

.resource-age-card__orb--two {
  width: 160px;
  height: 160px;
  right: 12%;
  bottom: 8%;
  background: rgba(124,92,252,0.16);
}

.resource-age-card__body {
  position: relative;
  z-index: 1;
  padding: 1.4rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.resource-age-card__eyebrow {
  color: var(--text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.resource-age-card__title {
  margin-top: 0.7rem;
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1.05;
}

.resource-age-card__desc {
  margin-top: 0.9rem;
  color: var(--text-secondary);
  font-size: 0.98rem;
  line-height: 1.7;
  flex: 1;
}

.resource-age-card__cta {
  align-self: flex-start;
  margin-top: 1.2rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.22);
  font-weight: 700;
}

.resources-footer-note {
  margin-top: 1.5rem;
}

.profile-nextgen {
  padding-bottom: 2rem;
}

.profile-hero-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
  gap: 1.5rem;
  align-items: stretch;
}

.profile-panel {
  background: linear-gradient(180deg, rgba(20, 16, 62, 0.95), rgba(13, 13, 43, 0.92));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 28px;
  padding: 1.5rem;
  box-shadow: 0 24px 56px rgba(0,0,0,0.28);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.profile-panel + .profile-panel {
  margin-top: 1.5rem;
}

.profile-identity-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.profile-avatar-xl {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, rgba(124,92,252,0.9), rgba(79,195,247,0.9));
  box-shadow: 0 0 0 6px rgba(124,92,252,0.10), 0 18px 40px rgba(79,195,247,0.18);
}

.profile-nextgen__title {
  margin: 0.45rem 0 0.35rem;
}

.profile-nextgen__subtitle,
.profile-status-line {
  margin-top: 0.75rem;
  color: var(--text-secondary);
}

.profile-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.profile-form-grid__full {
  grid-column: 1 / -1;
}

.profile-actions-bar {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}

.profile-panel__header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.profile-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.1fr);
  gap: 1.25rem;
  align-items: center;
}

.profile-score-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
}

.profile-score-ring {
  --score-angle: 0deg;
  width: min(320px, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 18px;
  background: conic-gradient(
    from -90deg,
    var(--accent-cyan) 0deg,
    var(--accent-blue) calc(var(--score-angle) * 0.55),
    var(--accent-pink) calc(var(--score-angle) * 0.82),
    var(--accent-yellow) var(--score-angle),
    rgba(255,255,255,0.10) var(--score-angle),
    rgba(255,255,255,0.10) 360deg
  );
  box-shadow: 0 0 38px rgba(124,92,252,0.22), inset 0 0 32px rgba(255,255,255,0.05);
}

.profile-score-ring__inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(255,255,255,0.08), rgba(13,13,43,0.96));
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
}

.profile-score-ring__number {
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 6vw, 4.8rem);
  font-weight: 800;
  line-height: 1;
}

.profile-score-ring__label {
  margin-top: 0.7rem;
  max-width: 150px;
  color: var(--text-secondary);
}

.profile-achievements-block {
  display: grid;
  gap: 1rem;
}

.profile-stat-pills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.profile-stat-pill,
.profile-achievement-card,
.profile-quick-link,
.profile-skill-card,
.profile-overall-card,
.profile-progress-card,
.profile-cert-panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 22px;
}

.profile-stat-pill {
  padding: 1rem;
  text-align: center;
}

.profile-stat-pill__value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 800;
}

.profile-stat-pill__label {
  display: block;
  margin-top: 0.35rem;
  color: var(--text-secondary);
  font-size: 0.82rem;
}

.profile-achievements-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.profile-achievement-card,
.profile-quick-link {
  padding: 1rem 1.05rem;
}

.profile-achievement-card {
  display: flex;
  gap: 0.85rem;
  align-items: center;
}

.profile-achievement-card__icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  background: rgba(124,92,252,0.18);
  box-shadow: 0 0 24px rgba(124,92,252,0.18);
}

.profile-achievement-card[data-accent="blue"] .profile-achievement-card__icon {
  background: rgba(79,195,247,0.18);
  box-shadow: 0 0 24px rgba(79,195,247,0.18);
}

.profile-achievement-card[data-accent="pink"] .profile-achievement-card__icon {
  background: rgba(244,114,182,0.18);
  box-shadow: 0 0 24px rgba(244,114,182,0.18);
}

.profile-achievement-card__title {
  font-weight: 700;
}

.profile-achievement-card__text {
  margin-top: 0.25rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.profile-quick-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 700;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.profile-quick-link:hover {
  transform: translateY(-2px);
  border-color: rgba(124,92,252,0.35);
  box-shadow: 0 0 22px rgba(124,92,252,0.12);
}

.profile-progress-host,
.profile-progress-stack {
  display: grid;
  gap: 1rem;
}

.profile-cert-panel,
.profile-progress-card,
.profile-overall-card {
  padding: 1.15rem;
}

.profile-cert-panel__title,
.profile-overall-card__title,
.profile-progress-card__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
}

.profile-cert-panel__text,
.profile-progress-card__meta {
  margin-top: 0.45rem;
  color: var(--text-secondary);
}

.profile-cert-panel__meta {
  margin-top: 0.85rem;
}

.profile-progress-card__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.profile-progress-track {
  margin-top: 1rem;
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}

.profile-progress-track__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple), var(--accent-pink));
  box-shadow: 0 0 18px rgba(124,92,252,0.28);
}

.profile-skill-grid {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.9rem;
}

.profile-skill-card {
  padding: 1rem;
  display: grid;
  gap: 0.8rem;
}

.profile-skill-card__top {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
}

.profile-skill-card__title {
  font-weight: 800;
}

.profile-skill-card__score,
.profile-skill-card__meta,
.profile-cert-status,
.profile-overall-card .muted {
  margin-top: 0.35rem;
  color: var(--text-secondary);
}

.profile-skill-card__badge {
  flex-shrink: 0;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: rgba(52,211,153,0.14);
  border: 1px solid rgba(52,211,153,0.3);
  font-size: 0.78rem;
  font-weight: 700;
}

.profile-skill-card__badge--muted {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.14);
}

.profile-skill-card[data-state="perfect"] {
  border-color: rgba(52,211,153,0.34);
  box-shadow: inset 0 0 0 1px rgba(52,211,153,0.08), 0 0 20px rgba(52,211,153,0.08);
}

.profile-overall-card {
  margin-top: 1rem;
  display: grid;
  gap: 0.8rem;
}

.profile-cert-status--ok {
  color: #b6ffd8;
}

.profile-file-btn {
  position: relative;
  overflow: hidden;
}

.profile-file-btn input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

@media (max-width: 1100px) {
  .resources-age-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-hero-shell,
  .profile-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1280px) {
  .resources-age-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 700px) {
  .resources-age-grid,
  .profile-stat-pills,
  .profile-achievements-grid,
  .profile-form-grid,
  .skill-nextgen__stats {
    grid-template-columns: 1fr;
  }

  .resource-age-card {
    min-height: 420px;
  }

  .profile-panel,
  .profile-cert-panel,
  .profile-progress-card,
  .profile-overall-card {
    border-radius: 22px;
  }

  .profile-avatar-xl {
    width: 80px;
    height: 80px;
    font-size: 1.6rem;
  }
}

/* Tests next-gen */
.tests-nextgen {
  padding-bottom: 2rem;
}

.tests-hero {
  padding: 2.5rem 0 1.2rem;
  text-align: center;
}

.tests-hero__title {
  font-size: clamp(2.3rem, 5vw, 4rem);
}

.tests-hero__subtitle {
  max-width: 860px;
  font-size: clamp(1rem, 2vw, 1.2rem);
}

.tests-hero-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}

@supports ((-webkit-mask: linear-gradient(#000 0 0)) or (mask: linear-gradient(#000 0 0))) {
  .tests-hero-card,
  .tests-section--nextgen,
  .tests-section--nextgen .card {
    --frame-rgb: 124,92,252;
    --frame-strength: 0.78;
    --frame-speed: 10s;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    animation: frameOrbit var(--frame-speed) linear infinite;
  }

  .tests-hero-card::after,
  .tests-section--nextgen::after,
  .tests-section--nextgen .card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    height: auto;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    opacity: 1;
    background: conic-gradient(
      from var(--frame-angle, 0deg),
      transparent 0deg,
      rgba(var(--frame-rgb), calc(0.16 * var(--frame-strength))) 34deg,
      rgba(79,195,247, calc(0.70 * var(--frame-strength))) 78deg,
      rgba(251,191,36, calc(0.76 * var(--frame-strength))) 116deg,
      rgba(244,114,182, calc(0.48 * var(--frame-strength))) 150deg,
      transparent 186deg,
      transparent 360deg
    );
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    transition: none;
  }

  .tests-hero-card {
    --frame-strength: 1;
    --frame-speed: 8s;
  }

  .tests-section--nextgen {
    --frame-strength: 0.58;
    --frame-speed: 13s;
  }
}

.tests-hero-card[data-glow="blue"],
.tests-section--nextgen .card[data-glow="blue"] { --frame-rgb: 79,195,247; }
.tests-hero-card[data-glow="green"],
.tests-section--nextgen .card[data-glow="green"] { --frame-rgb: 52,211,153; }
.tests-hero-card[data-glow="orange"],
.tests-section--nextgen .card[data-glow="orange"] { --frame-rgb: 251,146,60; }
.tests-hero-card[data-glow="yellow"],
.tests-section--nextgen .card[data-glow="yellow"] { --frame-rgb: 251,191,36; }
.tests-hero-card[data-glow="pink"],
.tests-section--nextgen .card[data-glow="pink"] { --frame-rgb: 244,114,182; }
.tests-hero-card[data-glow="purple"],
.tests-section--nextgen .card[data-glow="purple"] { --frame-rgb: 167,139,250; }

@supports ((-webkit-mask: linear-gradient(#000 0 0)) or (mask: linear-gradient(#000 0 0))) {
  .resources-nextgen .resource-age-card,
  .age-nextgen .age-skill-card,
  .skill-nextgen__stat,
  .skill-nextgen .detail-card,
  .skill-nextgen__resource-card,
  .tests-hero-card,
  .tests-section--nextgen,
  .tests-section--nextgen .card {
    animation: none;
    background: transparent;
    border-color: transparent;
  }

  .resources-nextgen .resource-age-card {
    --frame-fill: linear-gradient(180deg, rgba(23, 17, 74, 0.96), rgba(13, 13, 43, 0.94));
  }

  .age-nextgen .age-skill-card {
    --frame-fill: var(--bg-card);
  }

  .skill-nextgen__stat {
    --frame-fill: rgba(255,255,255,0.05);
  }

  .skill-nextgen .detail-card,
  .skill-nextgen__resource-card,
  .tests-hero-card {
    --frame-fill: linear-gradient(180deg, rgba(20,16,62,0.96), rgba(13,13,43,0.92));
  }

  .tests-section--nextgen {
    --frame-fill:
      linear-gradient(180deg, rgba(24,18,74,0.78), rgba(13,13,43,0.62)),
      radial-gradient(circle at top, rgba(124,92,252,0.08), transparent 45%);
  }

  .tests-section--nextgen .card {
    --frame-fill: linear-gradient(180deg, rgba(26,20,78,0.96), rgba(18,16,60,0.92));
  }

  .resources-nextgen .resource-age-card::before,
  .age-nextgen .age-skill-card::before,
  .skill-nextgen__stat::before,
  .skill-nextgen .detail-card::before,
  .skill-nextgen__resource-card::before,
  .tests-hero-card::before,
  .tests-section--nextgen::before,
  .tests-section--nextgen .card::before {
    content: "";
    position: absolute;
    inset: -75%;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    background: conic-gradient(
      from 0deg,
      transparent 0deg,
      rgba(var(--frame-rgb), calc(0.18 * var(--frame-strength, 1))) 36deg,
      rgba(79,195,247, calc(0.74 * var(--frame-strength, 1))) 82deg,
      rgba(251,191,36, calc(0.80 * var(--frame-strength, 1))) 124deg,
      rgba(244,114,182, calc(0.52 * var(--frame-strength, 1))) 164deg,
      transparent 212deg,
      transparent 360deg
    );
    -webkit-mask: none;
    mask: none;
    animation: frameSpin var(--frame-speed, 8s) linear infinite;
  }

  .resources-nextgen .resource-age-card::after,
  .age-nextgen .age-skill-card::after,
  .skill-nextgen__stat::after,
  .skill-nextgen .detail-card::after,
  .skill-nextgen__resource-card::after,
  .tests-hero-card::after,
  .tests-section--nextgen::after,
  .tests-section--nextgen .card::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: 1;
    height: auto;
    padding: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 1;
    background: var(--frame-fill);
    -webkit-mask: none;
    mask: none;
    animation: none;
    transition: none;
  }

  .resources-nextgen .resource-age-card > *,
  .age-nextgen .age-skill-card > *,
  .skill-nextgen__stat > *,
  .skill-nextgen .detail-card > *,
  .skill-nextgen__resource-card > *,
  .tests-hero-card > *,
  .tests-section--nextgen > *,
  .tests-section--nextgen .card > * {
    position: relative;
    z-index: 2;
  }
}

/* Test visual redo: cleaner stage surfaces, no rotating/background line clutter. */
.tests-nextgen {
  --test-surface-strong: rgba(18, 16, 54, 0.94);
  --test-surface: rgba(20, 18, 62, 0.84);
  --test-surface-soft: rgba(255, 255, 255, 0.055);
}

.tests-hero-card,
.tests-section--nextgen,
.tests-section--nextgen .card {
  animation: none !important;
  isolation: isolate;
}

.tests-hero-card::before,
.tests-hero-card::after,
.tests-section--nextgen::before,
.tests-section--nextgen::after,
.tests-section--nextgen .card::before,
.tests-section--nextgen .card::after,
.test-detail-shell::before,
.test-runner-shell::before {
  content: none !important;
  animation: none !important;
  background: none !important;
}

.tests-hero-card {
  border-color: rgba(255, 255, 255, 0.13) !important;
  background:
    radial-gradient(420px 220px at 50% -8%, rgba(var(--frame-rgb, 124,92,252), 0.20), transparent 66%),
    linear-gradient(180deg, rgba(28, 23, 80, 0.98), rgba(12, 12, 38, 0.94)) !important;
}

.tests-hero-card__icon {
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.22), transparent 34%),
    linear-gradient(145deg, rgba(var(--frame-rgb, 124,92,252), 0.24), rgba(255,255,255,0.07));
  box-shadow: 0 18px 34px rgba(0,0,0,0.20), 0 0 24px rgba(var(--frame-rgb, 124,92,252), 0.14);
}

.tests-section--nextgen {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background:
    radial-gradient(720px 280px at 8% 0%, rgba(79,195,247,0.08), transparent 70%),
    radial-gradient(620px 260px at 94% 0%, rgba(244,114,182,0.07), transparent 70%),
    linear-gradient(180deg, rgba(21, 18, 66, 0.92), rgba(11, 11, 36, 0.82)) !important;
  box-shadow: 0 20px 54px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.08);
}

.tests-section--nextgen .card {
  border-color: rgba(255,255,255,0.115) !important;
  background:
    linear-gradient(135deg, rgba(var(--frame-rgb, 124,92,252), 0.12), rgba(255,255,255,0.035) 42%),
    linear-gradient(180deg, rgba(30, 25, 82, 0.96), rgba(17, 15, 54, 0.92)) !important;
  box-shadow: 0 16px 36px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.07) !important;
}

.tests-section--nextgen .card:hover {
  border-color: rgba(var(--frame-rgb, 124,92,252), 0.36) !important;
  box-shadow: 0 22px 48px rgba(0,0,0,0.28), 0 0 30px rgba(var(--frame-rgb, 124,92,252), 0.13) !important;
}

.test-hero {
  border-color: color-mix(in srgb, var(--test-accent) 30%, rgba(255,255,255,0.14));
  background:
    radial-gradient(520px 280px at 18% 4%, color-mix(in srgb, var(--test-accent) 22%, transparent), transparent 72%),
    radial-gradient(540px 260px at 92% 18%, color-mix(in srgb, var(--test-accent-2) 18%, transparent), transparent 72%),
    linear-gradient(145deg, rgba(32, 27, 88, 0.96), rgba(12, 12, 40, 0.92)) !important;
}

.test-hero__orb {
  opacity: 0.58;
  filter: blur(26px);
}

.test-hero__panel {
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,0.22), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.055)),
    rgba(16, 16, 48, 0.62);
  box-shadow: 0 24px 48px rgba(0,0,0,0.25), 0 0 30px color-mix(in srgb, var(--test-accent) 18%, transparent);
}

.test-detail-shell {
  background:
    radial-gradient(760px 300px at 0% 0%, color-mix(in srgb, var(--test-accent) 10%, transparent), transparent 70%),
    radial-gradient(760px 300px at 100% 0%, color-mix(in srgb, var(--test-accent-2) 9%, transparent), transparent 72%),
    linear-gradient(180deg, rgba(28, 24, 78, 0.94), rgba(12, 12, 40, 0.9)) !important;
  border-color: color-mix(in srgb, var(--test-accent) 28%, rgba(255,255,255,0.14)) !important;
}

.test-detail-shell__icon,
.test-stage-pill,
.test-chip,
.test-stat-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.045)),
    rgba(255,255,255,0.035) !important;
}

.test-runner-shell {
  position: relative;
  background:
    radial-gradient(720px 280px at 12% 0%, color-mix(in srgb, var(--test-accent) 11%, transparent), transparent 72%),
    radial-gradient(720px 280px at 88% 0%, color-mix(in srgb, var(--test-accent-2) 9%, transparent), transparent 72%),
    linear-gradient(180deg, rgba(34, 30, 86, 0.92), rgba(15, 14, 48, 0.88)) !important;
  border-color: color-mix(in srgb, var(--test-accent) 24%, rgba(255,255,255,0.14)) !important;
}

.tests-page [data-test-runner-root] .note,
.tests-page [data-test-runner-root] details,
.tests-page [data-test-runner-root] fieldset,
.tests-page [data-test-runner-root] form,
.tests-page [data-test-runner-root] table,
.test-runner-chrome,
.test-runner-stage__topbar {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.105), rgba(255,255,255,0.04)),
    rgba(255,255,255,0.045) !important;
  border-color: color-mix(in srgb, var(--test-accent) 20%, rgba(255,255,255,0.13)) !important;
}

.test-runner-stage__intro > .note:first-child,
.test-runner-stage__summary > .note:first-child,
.test-runner-stage__feedback > .note:first-child {
  background:
    radial-gradient(440px 180px at 100% 0%, color-mix(in srgb, var(--test-accent-2) 16%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.045)),
    rgba(255,255,255,0.045) !important;
}

.test-runner-stage__feedback--correct,
.tests-page [data-test-runner-root] .note.is-correct {
  border-color: rgba(52, 211, 153, 0.42) !important;
  background:
    radial-gradient(520px 220px at 100% 0%, rgba(52, 211, 153, 0.18), transparent 68%),
    linear-gradient(180deg, rgba(52, 211, 153, 0.18), rgba(52, 211, 153, 0.065)),
    rgba(10, 42, 34, 0.46) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 18px 40px rgba(0,0,0,0.18),
    0 0 34px rgba(52, 211, 153, 0.10) !important;
}

.test-runner-stage__feedback--correct strong:first-child,
.tests-page [data-test-runner-root] .note.is-correct strong:first-child {
  color: #b8ffe7 !important;
}

.test-runner-stage__feedback--incorrect {
  border-color: rgba(251, 191, 36, 0.38) !important;
  background:
    radial-gradient(520px 220px at 100% 0%, rgba(251, 146, 60, 0.16), transparent 68%),
    linear-gradient(180deg, rgba(251, 191, 36, 0.13), rgba(251, 146, 60, 0.055)),
    rgba(48, 31, 16, 0.38) !important;
}

.test-runner-stage__feedback--incorrect strong:first-child {
  color: #ffe0a3 !important;
}

.test-runner-stage__formwrap fieldset {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.105), rgba(255,255,255,0.035)),
    rgba(255,255,255,0.04) !important;
}

.tests-page [data-test-runner-root] label[for^="opt-"],
.tests-page [data-test-runner-root] [data-choice] {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.045)),
    rgba(255,255,255,0.04) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.tests-page [data-test-runner-root] label[for^="opt-"]:hover,
.tests-page [data-test-runner-root] [data-choice]:hover {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--test-accent) 14%, rgba(255,255,255,0.10)), rgba(255,255,255,0.055)),
    rgba(255,255,255,0.05) !important;
}

.test-detail-shell.is-test-complete {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 28px 70px rgba(0,0,0,0.28),
    0 0 44px color-mix(in srgb, var(--test-accent) 22%, transparent);
}

.test-confetti-layer {
  position: absolute;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.test-complete-burst {
  position: absolute;
  left: 50%;
  top: 18%;
  min-width: 150px;
  padding: 0.72rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.24);
  background: rgba(9, 9, 28, 0.72);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,0.28), 0 0 34px color-mix(in srgb, var(--test-accent) 28%, transparent);
  transform: translate(-50%, -50%) scale(0.86);
  opacity: 0;
  animation: testCompleteBurst 1600ms ease forwards;
}

.test-complete-burst[data-variant="correct"] {
  border-color: rgba(52, 211, 153, 0.34);
  background: rgba(7, 36, 30, 0.76);
  box-shadow: 0 20px 50px rgba(0,0,0,0.28), 0 0 34px rgba(52, 211, 153, 0.22);
}

.test-confetti-layer i {
  position: absolute;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
  animation: testConfettiFallback 1300ms ease-out forwards;
}

.confetti-particle {
  will-change: transform, opacity;
}

.confetti-shockwave {
  will-change: transform, opacity;
}

@keyframes confettiShockwave {
  0% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(0.25);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(18);
  }
}

@keyframes testCompleteBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -44%) scale(0.84);
  }
  18%, 62% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -68%) scale(0.96);
  }
}

@keyframes testConfettiFallback {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7) rotate(0deg);
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty) + 180px)) scale(0.96) rotate(var(--rot));
  }
}

@media (max-width: 640px) {
  .test-complete-burst {
    top: 14%;
    min-width: 128px;
    font-size: 0.9rem;
  }
}

.tests-hero-card {
  display: flex;
  flex-direction: column;
  min-height: 400px;
  padding: 1.5rem;
  border-radius: 30px;
  text-decoration: none;
  color: var(--text-primary);
  background: linear-gradient(180deg, rgba(20,16,62,0.96), rgba(13,13,43,0.92));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 24px 60px rgba(0,0,0,0.32);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.tests-hero-card:hover {
  transform: translateY(-6px);
}

.tests-hero-card[data-glow="blue"]:hover { border-color: rgba(79,195,247,0.42); box-shadow: 0 28px 70px rgba(0,0,0,0.38), 0 0 40px rgba(79,195,247,0.18); }
.tests-hero-card[data-glow="orange"]:hover { border-color: rgba(251,146,60,0.42); box-shadow: 0 28px 70px rgba(0,0,0,0.38), 0 0 40px rgba(251,146,60,0.18); }
.tests-hero-card[data-glow="yellow"]:hover { border-color: rgba(251,191,36,0.42); box-shadow: 0 28px 70px rgba(0,0,0,0.38), 0 0 40px rgba(251,191,36,0.18); }
.tests-hero-card[data-glow="purple"]:hover { border-color: rgba(167,139,250,0.42); box-shadow: 0 28px 70px rgba(0,0,0,0.38), 0 0 40px rgba(167,139,250,0.18); }

.tests-hero-card__icon {
  width: 88px;
  height: 88px;
  margin: 0 auto 1.3rem;
  border-radius: 24px;
  display: grid;
  place-items: center;
  font-size: 2.7rem;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.18), rgba(124,92,252,0.14));
  border: 1px solid rgba(255,255,255,0.12);
}

.tests-hero-card__title {
  text-align: center;
  font-family: var(--font-display);
  font-size: 2rem;
}

.tests-hero-card__desc {
  margin-top: 1rem;
  text-align: center;
  color: var(--text-secondary);
  line-height: 1.7;
  flex: 1;
}

.tests-hero-card__footer {
  display: grid;
  gap: 0.9rem;
}

.tests-hero-card__count {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.tests-hero-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.95rem 1.2rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
  font-weight: 700;
}

.tests-sections-wrap {
  display: grid;
  gap: 1.4rem;
  margin-top: 2rem;
}

.tests-section--nextgen {
  padding: 1.35rem;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(24,18,74,0.78), rgba(13,13,43,0.62)),
    radial-gradient(circle at top, rgba(124,92,252,0.08), transparent 45%);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 18px 44px rgba(0,0,0,0.18);
}

.tests-section--nextgen .card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.95rem;
}

.tests-section--nextgen .card {
  position: relative;
  align-items: flex-start;
  gap: 0.9rem;
  min-height: 132px;
  padding: 1.15rem 1.2rem;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(26,20,78,0.96), rgba(18,16,60,0.92));
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 14px 34px rgba(0,0,0,0.18);
}

.tests-section--nextgen .card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 36%);
  pointer-events: none;
}

.tests-section--nextgen .card:hover {
  transform: translateY(-4px) scale(1.01);
}

.tests-section--nextgen .card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
}

.tests-section--nextgen .card-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  margin-top: 0.1rem;
}

.tests-section--nextgen .card-title {
  font-size: 1.05rem;
  line-height: 1.3;
  margin-bottom: 0;
}

.tests-section--nextgen .card-text {
  font-size: 0.92rem;
  line-height: 1.5;
}

.tests-section--nextgen .card-cta {
  align-self: center;
  margin-left: auto;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.78);
}

.tests-section--nextgen .card[data-glow="blue"] {
  box-shadow: 0 14px 34px rgba(0,0,0,0.18), inset 0 1px 0 rgba(79,195,247,0.06);
}

.tests-section--nextgen .card[data-glow="green"] {
  box-shadow: 0 14px 34px rgba(0,0,0,0.18), inset 0 1px 0 rgba(52,211,153,0.06);
}

.tests-section--nextgen .card[data-glow="pink"] {
  box-shadow: 0 14px 34px rgba(0,0,0,0.18), inset 0 1px 0 rgba(244,114,182,0.06);
}

.tests-section--nextgen .card[data-glow="purple"] {
  box-shadow: 0 14px 34px rgba(0,0,0,0.18), inset 0 1px 0 rgba(167,139,250,0.06);
}

.tests-section__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.tests-section__meta {
  color: var(--text-secondary);
}

@media (max-width: 1120px) {
  .tests-section--nextgen .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .tests-section--nextgen .card-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tests-hero-card,
  .tests-section--nextgen,
  .tests-section--nextgen .card {
    animation: none;
  }
}

/* Test detail + runner refresh */
.test-detail-page {
  gap: 1.3rem;
}

.test-detail-page .breadcrumbs {
  margin-bottom: 0.25rem;
}

.test-hero {
  gap: 2rem;
  padding: 32px;
  border-radius: 34px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 30px 70px rgba(0,0,0,0.24),
    0 0 0 1px rgba(255,255,255,0.03);
}

.test-hero__title {
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.test-hero__subtitle {
  margin-top: 0.7rem;
  font-size: 1.04rem;
}

.test-chip {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.test-stat-card {
  min-height: 116px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.test-stat-card strong {
  font-size: 1.02rem;
}

.test-detail-shell {
  margin-top: 0;
  padding: 24px;
  border-radius: 30px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 24px 56px rgba(0,0,0,0.22);
}

.test-detail-shell__header {
  align-items: center;
  padding-bottom: 0.25rem;
}

.test-stage-pill {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 10px 24px rgba(0,0,0,0.12);
}

.test-audio-panel {
  border-radius: 26px !important;
  padding: 20px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 14px 34px rgba(0,0,0,0.12);
}

.test-audio-panel label {
  font-weight: 800;
  color: var(--text-primary);
}

.test-audio-panel small {
  color: var(--text-secondary);
  line-height: 1.55;
}

.test-audio-panel select,
.test-audio-panel input[type="range"] {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.test-audio-panel select:focus-visible,
.test-audio-panel input[type="range"]:focus-visible {
  outline: 3px solid rgba(79,195,247,0.24);
  outline-offset: 2px;
}

.test-runner-shell {
  margin-top: 20px;
  min-height: 360px;
  padding: 22px;
  border-radius: 30px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 22px 48px rgba(0,0,0,0.18);
}

.tests-page [data-ueah-test] {
  position: relative;
}

.tests-page [data-stage] {
  display: grid;
  gap: 1rem;
}

.tests-page [data-test-runner-root] .note,
.tests-page [data-test-runner-root] details,
.tests-page [data-test-runner-root] fieldset,
.tests-page [data-test-runner-root] form,
.tests-page [data-test-runner-root] table {
  border-radius: 22px;
}

.tests-page [data-test-runner-root] .note {
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--test-accent) 20%, var(--border));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 28px rgba(0,0,0,0.1);
}

.tests-page [data-test-runner-root] .note strong:first-child {
  display: inline-block;
  margin-bottom: 0.2rem;
  font-size: 1.02rem;
}

.tests-page [data-test-runner-root] .actions {
  gap: 0.75rem;
}

.tests-page [data-test-runner-root] .btn {
  min-height: 46px;
}

.tests-page [data-test-runner-root] .btn--primary {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--test-accent) 34%, rgba(255,255,255,0.08)), color-mix(in srgb, var(--test-accent-2) 26%, rgba(255,255,255,0.06))),
    rgba(255,255,255,0.08);
}

.tests-page [data-test-runner-root] details {
  border: 1px solid color-mix(in srgb, var(--test-accent) 18%, var(--border));
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)),
    var(--surface2);
  padding: 0.5rem 1rem 1rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.tests-page [data-test-runner-root] summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.8rem 0 0.4rem;
  font-weight: 900;
  cursor: pointer;
}

.tests-page [data-test-runner-root] summary::-webkit-details-marker {
  display: none;
}

.tests-page [data-test-runner-root] summary::after {
  content: '▾';
  color: var(--text-secondary);
  transition: transform var(--transition);
}

.tests-page [data-test-runner-root] details[open] summary::after {
  transform: rotate(180deg);
}

.tests-page [data-test-runner-root] input:not([type="radio"]):not([type="checkbox"]):not([type="range"]),
.tests-page [data-test-runner-root] textarea,
.tests-page [data-test-runner-root] select {
  width: 100%;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--test-accent) 18%, var(--border));
  background: rgba(255,255,255,0.08);
  color: var(--text-primary);
  padding: 0.85rem 1rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.tests-page [data-test-runner-root] textarea {
  min-height: 160px;
  resize: vertical;
}

.tests-page [data-test-runner-root] input:focus-visible,
.tests-page [data-test-runner-root] textarea:focus-visible,
.tests-page [data-test-runner-root] select:focus-visible,
.tests-page [data-test-runner-root] button:focus-visible,
.tests-page [data-test-runner-root] summary:focus-visible {
  outline: 3px solid rgba(79,195,247,0.2);
  outline-offset: 2px;
}

.tests-page [data-test-runner-root] label[for^="opt-"] {
  border-width: 1px;
  border-radius: 18px;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.tests-page [data-test-runner-root] label[for^="opt-"]:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--test-accent) 32%, var(--border));
  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}

.tests-page [data-test-runner-root] progress {
  height: 12px;
  border-color: color-mix(in srgb, var(--test-accent) 20%, var(--border));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.tests-page [data-test-runner-root] table {
  width: 100%;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid color-mix(in srgb, var(--test-accent) 18%, var(--border));
  background: rgba(255,255,255,0.04);
}

.tests-page [data-test-runner-root] th,
.tests-page [data-test-runner-root] td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  text-align: left;
  vertical-align: top;
}

.tests-page [data-test-runner-root] th {
  background: rgba(255,255,255,0.07);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.tests-page [data-test-runner-root] tr:last-child td {
  border-bottom: 0;
}

.tests-page [data-test-runner-root] [role="status"],
.tests-page [data-test-runner-root] [aria-live] {
  border-radius: 18px;
}

@media (max-width: 900px) {
  .test-hero {
    padding: 24px;
  }

  .test-detail-shell,
  .test-runner-shell {
    padding: 20px;
  }
}

@media (max-width: 640px) {
  .test-hero,
  .test-detail-shell,
  .test-runner-shell {
    border-radius: 24px;
  }

  .test-audio-panel,
  .tests-page [data-test-runner-root] .note,
  .tests-page [data-test-runner-root] details,
  .tests-page [data-test-runner-root] fieldset,
  .tests-page [data-test-runner-root] form,
  .tests-page [data-test-runner-root] table {
    border-radius: 18px;
  }

  .tests-page [data-test-runner-root] th,
  .tests-page [data-test-runner-root] td {
    padding: 0.75rem 0.8rem;
  }
}

.tests-page [data-test-runner-root] [data-action="start"] {
  min-width: 180px;
}

.tests-page [data-test-runner-root] [data-action="play"],
.tests-page [data-test-runner-root] [data-action="stop"],
.tests-page [data-test-runner-root] [data-action="restart"],
.tests-page [data-test-runner-root] [data-action="toggleTranscript"],
.tests-page [data-test-runner-root] [data-action="retry"],
.tests-page [data-test-runner-root] [data-action="save-score"] {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.tests-page [data-test-runner-root] [style*="border:1px solid var(--border)"],
.tests-page [data-test-runner-root] [style*="border: 1px solid var(--border)"] {
  border-color: color-mix(in srgb, var(--test-accent) 18%, var(--border)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 28px rgba(0,0,0,0.1);
}

.tests-page [data-test-runner-root] [style*="background: var(--surface2)"],
.tests-page [data-test-runner-root] [style*="background:var(--surface2)"],
.tests-page [data-test-runner-root] [style*="background: var(--surface)"],
.tests-page [data-test-runner-root] [style*="background:var(--surface)"] {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)),
    var(--surface2) !important;
}

.tests-page [data-test-runner-root] [style*="font-weight:900; font-size:18px"],
.tests-page [data-test-runner-root] legend {
  letter-spacing: -0.02em;
}

.tests-page [data-test-runner-root] [style*="font-size:26px; font-weight:900"],
.tests-page [data-test-runner-root] [style*="font-size:52px"],
.tests-page [data-test-runner-root] [style*="font-size:28px"] {
  text-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

.tests-page [data-test-runner-root] [data-choice],
.tests-page [data-test-runner-root] label[for^="opt-"] {
  position: relative;
  overflow: hidden;
}

.tests-page [data-test-runner-root] [data-choice]::before,
.tests-page [data-test-runner-root] label[for^="opt-"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent 40%);
  pointer-events: none;
}

.tests-page [data-test-runner-root] [data-choice]:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--test-accent) 30%, var(--border));
  box-shadow: 0 14px 28px rgba(0,0,0,0.14);
}

.tests-page [data-test-runner-root] [data-action="start"]::after,
.tests-page [data-test-runner-root] .btn--primary[type="submit"]::after {
  content: ' →';
}

.tests-page [data-test-runner-root] [data-action="mark"] {
  min-width: 140px;
}

.tests-page [data-test-runner-root] [data-action="mark"][data-mark="said"] {
  border-color: rgba(52,211,153,0.28);
}

.tests-page [data-test-runner-root] [data-action="mark"][data-mark="again"] {
  border-color: rgba(251,191,36,0.28);
}

.tests-page [data-test-runner-root] [data-action="mark"][data-mark="skip"],
.tests-page [data-test-runner-root] [data-action="skip"] {
  border-color: rgba(255,255,255,0.18);
}

.tests-page [data-test-runner-root] [data-action="mark"]:hover,
.tests-page [data-test-runner-root] [data-action="skip"]:hover,
.tests-page [data-test-runner-root] [data-action="toggleTranscript"]:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.12);
}

.tests-page [data-test-runner-root] ul,
.tests-page [data-test-runner-root] ol {
  color: var(--text-secondary);
}

.tests-page [data-test-runner-root] li::marker {
  color: color-mix(in srgb, var(--test-accent) 70%, white);
}

.tests-page [data-test-runner-root] [data-word-count] {
  color: var(--text-primary);
  font-weight: 900;
}

.tests-page [data-test-runner-root] [aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--test-accent) 40%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--test-accent) 18%, rgba(255,255,255,0.08)), rgba(255,255,255,0.08)),
    rgba(255,255,255,0.08);
}

.tests-page [data-test-runner-root] [disabled] {
  opacity: 0.58;
  cursor: not-allowed;
}

.tests-page [data-test-runner-root] .muted,
.tests-page [data-test-runner-root] [style*="color: var(--muted)"],
.tests-page [data-test-runner-root] [style*="color:var(--muted)"] {
  color: var(--text-secondary) !important;
}

.tests-page [data-test-runner-root] [style*="font-weight:800; color: var(--muted)"],
.tests-page [data-test-runner-root] [style*="font-weight:900; color: var(--muted)"],
.tests-page [data-test-runner-root] [style*="font-weight:800; color:var(--muted)"],
.tests-page [data-test-runner-root] [style*="font-weight:900; color:var(--muted)"] {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
}

.test-runner-chrome {
  display: grid;
  gap: 0.9rem;
  margin-bottom: 1rem;
  padding: 1rem 1.1rem;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--test-accent) 18%, var(--border));
  background:
    linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)),
    color-mix(in srgb, var(--test-accent-soft) 42%, var(--surface2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 14px 32px rgba(0,0,0,0.12);
}

.test-runner-chrome__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

.test-runner-chrome__eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.test-runner-chrome__title {
  margin-top: 0.45rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.2;
}

.test-runner-chrome__badge {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--test-accent-2) 26%, rgba(255,255,255,0.16));
  background: rgba(255,255,255,0.08);
  color: var(--text-primary);
  font-size: 0.82rem;
  font-weight: 800;
}

.test-runner-chrome__progress {
  display: grid;
  gap: 0.45rem;
}

.test-runner-chrome__progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  color: var(--text-secondary);
  font-size: 0.82rem;
}

.test-runner-chrome__progress-meta strong {
  color: var(--text-primary);
  font-size: 0.88rem;
}

.test-runner-chrome__progress-bar {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
}

.test-runner-chrome__progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--test-accent), var(--test-accent-2));
  box-shadow: 0 0 18px color-mix(in srgb, var(--test-accent) 36%, transparent);
}

@media (max-width: 640px) {
  .test-runner-chrome {
    padding: 0.9rem;
    border-radius: 18px;
  }

  .test-runner-chrome__title {
    font-size: 1.02rem;
  }
}

.test-runner-stage__topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  padding: 0.9rem 1rem;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.test-runner-stage__topbar > :first-child {
  font-weight: 900;
  color: var(--text-primary);
}

.test-runner-stage__panel {
  border-radius: 24px;
}

.test-runner-stage__intro,
.test-runner-stage__summary,
.test-runner-stage__feedback {
  display: grid;
  gap: 0.9rem;
}

.test-runner-stage__intro > .note:first-child,
.test-runner-stage__summary > .note:first-child,
.test-runner-stage__feedback > .note:first-child {
  padding: 22px 22px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--test-accent) 14%, transparent), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04)),
    var(--surface2);
}

.test-runner-stage__intro > .note:first-child strong:first-child,
.test-runner-stage__summary > .note:first-child strong:first-child,
.test-runner-stage__feedback > .note:first-child strong:first-child {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
}

.test-runner-stage__intro .actions,
.test-runner-stage__summary .actions,
.test-runner-stage__feedback .actions {
  margin-top: 0 !important;
}

.test-runner-stage__intro [data-action="start"] {
  min-width: 220px;
}

.test-runner-stage__summary details {
  margin-top: 0 !important;
}

.test-runner-stage__summary ul li,
.test-runner-stage__summary ol li {
  color: var(--text-primary);
}

.test-runner-stage__panel[style] {
  padding: 0;
}

.test-runner-stage__panel > [style*="border:1px solid var(--border)"],
.test-runner-stage__panel > [style*="border: 1px solid var(--border)"] {
  border-radius: 24px !important;
}

.test-runner-stage__formwrap fieldset {
  padding: 18px !important;
  border-radius: 24px !important;
}

.test-runner-stage__formwrap legend {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.22rem);
  font-weight: 800;
}

.test-runner-stage__formwrap [role="radiogroup"],
.test-runner-stage__formwrap [role="group"] {
  gap: 0.85rem !important;
}

.test-runner-stage__formwrap .btn[type="submit"],
.test-runner-stage__formwrap [data-choice] {
  min-height: 52px;
}

.test-runner-stage__formwrap textarea,
.test-runner-stage__formwrap input[type="text"] {
  font-size: 1rem;
  line-height: 1.55;
}

.reading-passage-card {
  border-color: color-mix(in srgb, var(--test-accent) 24%, rgba(255,255,255,0.14)) !important;
}

.reading-passage-card > strong:first-child {
  display: block;
  margin-bottom: 0.85rem !important;
  color: #eef0ff;
  font-family: var(--font-display);
  font-size: 1.04rem !important;
  line-height: 1.25;
}

.reading-passage-card__body {
  display: grid;
  gap: 0.85rem;
}

.reading-passage-card__body p {
  margin: 0 !important;
  padding: 0.9rem 1rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.045);
  color: var(--text-secondary);
  line-height: 1.72;
}

@media (max-width: 640px) {
  .test-runner-stage__topbar,
  .test-runner-stage__formwrap fieldset,
  .test-runner-stage__intro > .note:first-child,
  .test-runner-stage__summary > .note:first-child,
  .test-runner-stage__feedback > .note:first-child {
    border-radius: 18px;
  }
}

/* Final feedback color pass: keep result panels obvious despite runner inline styles. */
.tests-page [data-test-runner-root] .test-runner-stage__feedback--correct,
.tests-page [data-test-runner-root] .test-runner-stage__feedback--correct[style],
.tests-page [data-test-runner-root] .note.is-correct,
.tests-page [data-test-runner-root] .note.is-correct[style] {
  border-color: rgba(52, 211, 153, 0.48) !important;
  background:
    radial-gradient(520px 220px at 100% 0%, rgba(52, 211, 153, 0.20), transparent 68%),
    linear-gradient(180deg, rgba(52, 211, 153, 0.20), rgba(52, 211, 153, 0.075)),
    rgba(10, 42, 34, 0.52) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 18px 42px rgba(0,0,0,0.20),
    0 0 36px rgba(52, 211, 153, 0.13) !important;
}

.tests-page [data-test-runner-root] .test-runner-stage__feedback--correct strong:first-child,
.tests-page [data-test-runner-root] .note.is-correct strong:first-child {
  color: #b8ffe7 !important;
}

.tests-page [data-test-runner-root] .test-runner-stage__feedback--incorrect,
.tests-page [data-test-runner-root] .test-runner-stage__feedback--incorrect[style] {
  border-color: rgba(251, 191, 36, 0.42) !important;
  background:
    radial-gradient(520px 220px at 100% 0%, rgba(251, 146, 60, 0.17), transparent 68%),
    linear-gradient(180deg, rgba(251, 191, 36, 0.14), rgba(251, 146, 60, 0.06)),
    rgba(48, 31, 16, 0.42) !important;
}

.tests-page [data-test-runner-root] .test-runner-stage__feedback--incorrect strong:first-child {
  color: #ffe0a3 !important;
}

/* Scoring next-gen */
.scoring-nextgen__hero {
  padding: 2rem 0 1.1rem;
}

.scoring-nextgen__title {
  font-size: clamp(2.3rem, 5vw, 4.4rem) !important;
  margin-bottom: 0.8rem;
}

.scoring-nextgen__subtitle {
  max-width: 920px;
  margin-left: 0;
  font-size: clamp(1rem, 2vw, 1.2rem);
}

.scoring-showcase-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 2rem 0;
  position: relative;
}

.scoring-showcase-grid::before {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, rgba(52,211,153,0.55), rgba(79,195,247,0.55), rgba(244,114,182,0.55), rgba(251,191,36,0.55));
  opacity: 0.75;
  pointer-events: none;
}

.scoring-showcase-card {
  position: relative;
  z-index: 1;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.35rem;
  border-radius: 28px;
  text-decoration: none;
  color: var(--text-primary);
  background: linear-gradient(180deg, rgba(20,16,62,0.95), rgba(13,13,43,0.9));
  border: 1px solid rgba(255,255,255,0.12);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.scoring-showcase-card:hover {
  transform: translateY(-6px);
}

.scoring-showcase-card[data-glow="green"]:hover { border-color: rgba(52,211,153,0.4); box-shadow: 0 26px 60px rgba(0,0,0,0.36), 0 0 38px rgba(52,211,153,0.15); }
.scoring-showcase-card[data-glow="blue"]:hover { border-color: rgba(79,195,247,0.4); box-shadow: 0 26px 60px rgba(0,0,0,0.36), 0 0 38px rgba(79,195,247,0.15); }
.scoring-showcase-card[data-glow="pink"]:hover { border-color: rgba(244,114,182,0.4); box-shadow: 0 26px 60px rgba(0,0,0,0.36), 0 0 38px rgba(244,114,182,0.15); }
.scoring-showcase-card[data-glow="yellow"]:hover { border-color: rgba(251,191,36,0.4); box-shadow: 0 26px 60px rgba(0,0,0,0.36), 0 0 38px rgba(251,191,36,0.15); }
.scoring-showcase-card[data-glow="purple"]:hover { border-color: rgba(167,139,250,0.4); box-shadow: 0 26px 60px rgba(0,0,0,0.36), 0 0 38px rgba(167,139,250,0.15); }

.scoring-showcase-card__age {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
}

.scoring-showcase-card__badge {
  min-height: 132px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  border: 2px solid currentColor;
  color: #fff;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
}

.scoring-showcase-card__desc {
  color: var(--text-secondary);
  line-height: 1.65;
}

/* Contact next-gen */
.contact-nextgen__shell {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.45fr);
  gap: 1.75rem;
  align-items: center;
  max-width: 1100px;
  margin: 2rem auto 0;
}

.contact-nextgen__card {
  padding: 2.25rem;
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(20,16,62,0.96), rgba(13,13,43,0.92));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 26px 64px rgba(0,0,0,0.36), 0 0 44px rgba(79,195,247,0.08);
}

.contact-nextgen__title {
  font-size: clamp(2rem, 4vw, 3.3rem);
}

.contact-nextgen__subtitle {
  margin-left: 0;
  margin-bottom: 1.6rem;
  max-width: 720px;
  text-align: left;
}

.contact-nextgen__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 1.35rem;
}

.contact-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1.25rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--text-primary);
  background: rgba(255,255,255,0.06);
  cursor: pointer;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.contact-pill:hover,
.contact-pill[aria-pressed="true"] {
  transform: translateY(-1px);
}

.contact-pill--idea[aria-pressed="true"] { background: rgba(251,146,60,0.16); border-color: rgba(251,146,60,0.4); box-shadow: 0 0 24px rgba(251,146,60,0.16); }
.contact-pill--bug[aria-pressed="true"] { background: rgba(244,114,182,0.16); border-color: rgba(244,114,182,0.4); box-shadow: 0 0 24px rgba(244,114,182,0.16); }
.contact-pill--question[aria-pressed="true"] { background: rgba(79,195,247,0.16); border-color: rgba(79,195,247,0.4); box-shadow: 0 0 24px rgba(79,195,247,0.16); }

.contact-nextgen__form {
  display: grid;
  gap: 1rem;
}

.contact-nextgen__full {
  grid-column: 1 / -1;
}

.contact-nextgen__input,
.contact-nextgen__textarea {
  background: rgba(16, 18, 62, 0.78);
  border: 1px solid rgba(95, 101, 255, 0.32);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02), 0 0 22px rgba(79,195,247,0.04);
}

.contact-nextgen__input:focus,
.contact-nextgen__textarea:focus {
  border-color: rgba(79,195,247,0.58);
  box-shadow: 0 0 0 3px rgba(79,195,247,0.14), 0 0 26px rgba(79,195,247,0.12);
}

.contact-nextgen__textarea {
  min-height: 160px;
}

.contact-nextgen__actions {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 1.4rem;
}

.contact-nextgen__send {
  min-width: 230px;
  padding: 0.95rem 2rem;
  border-radius: 999px;
  border: 1px solid rgba(124,92,252,0.44);
  background: linear-gradient(135deg, rgba(124,92,252,0.8), rgba(79,195,247,0.72));
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  box-shadow: 0 12px 30px rgba(79,195,247,0.18);
  cursor: pointer;
}

.contact-nextgen__art {
  font-size: clamp(6rem, 14vw, 11rem);
  text-align: center;
  filter: drop-shadow(0 0 38px rgba(79,195,247,0.22));
}

@media (max-width: 1100px) {
  .tests-hero-grid,
  .scoring-showcase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-nextgen__shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .tests-hero-grid,
  .scoring-showcase-grid {
    grid-template-columns: 1fr;
  }

  .scoring-showcase-grid::before,
  .contact-nextgen__art {
    display: none;
  }

  .tests-hero-card,
  .scoring-showcase-card,
  .contact-nextgen__card {
    border-radius: 24px;
  }
}

/* Shared subpage polish */
.subpage-hero {
  padding: 1.5rem 0 1rem;
  text-align: center;
}

.subpage-hero--left {
  text-align: left;
  padding: 0;
}

.age-nextgen,
.games-nextgen,
.skill-nextgen,
.favourites-nextgen,
.resource-detail-nextgen {
  padding-bottom: 2rem;
}

.age-nextgen .card-grid,
.games-nextgen .card-grid,
.skill-nextgen .resource-grid,
.favourites-nextgen .resource-grid {
  margin-top: 1.25rem;
}

.favourites-sync-card,
.resource-detail-nextgen__card,
.skill-nextgen .detail-card {
  background: linear-gradient(180deg, rgba(20,16,62,0.95), rgba(13,13,43,0.92));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 24px 60px rgba(0,0,0,0.28);
}

.resource-detail-nextgen__card .detail-section,
.skill-nextgen .detail-section {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 1rem 1.1rem;
  margin-top: 1rem;
}

.skill-nextgen .detail-section ul,
.skill-nextgen .overview-list {
  list-style: none;
  padding-left: 0;
}

.friendly-point {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.55rem;
  line-height: 1.7;
}

.friendly-point > span[aria-hidden="true"] {
  flex-shrink: 0;
  display: inline-flex;
  width: 1.4rem;
  justify-content: center;
}

.skill-nextgen__hero {
  max-width: 900px;
  margin: 0 auto;
}

.skill-nextgen__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1rem;
}

.skill-nextgen__stat {
  display: grid;
  gap: 0.25rem;
  padding: 0.9rem 1rem;
  border-radius: 18px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
}

.skill-nextgen__stat strong {
  font-family: var(--font-display);
  font-size: 1.1rem;
}

.skill-nextgen__stat span {
  color: var(--text-secondary);
  font-size: 0.82rem;
}

.skill-nextgen__section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.skill-nextgen__resource {
  gap: 0.85rem;
}

.skill-nextgen__resource-card {
  background: linear-gradient(180deg, rgba(20,16,62,0.96), rgba(13,13,43,0.92));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 20px 52px rgba(0,0,0,0.24);
}

.skill-nextgen__resource-card:hover {
  border-color: rgba(124,92,252,0.28);
  box-shadow: 0 24px 60px rgba(0,0,0,0.28), 0 0 24px rgba(124,92,252,0.08);
}

.skill-nextgen__resource-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.9rem;
  flex-wrap: wrap;
}

.skill-nextgen__resource-skill,
.skill-nextgen__resource-featured {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.38rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
}

.skill-nextgen__resource-skill {
  background: rgba(124,92,252,0.12);
  border: 1px solid rgba(124,92,252,0.24);
  color: #d7d3ff;
}

.skill-nextgen__resource-featured {
  background: rgba(251,191,36,0.14);
  border: 1px solid rgba(251,191,36,0.24);
  color: #ffe49f;
}

.skill-nextgen__resource-link {
  display: inline-flex;
  margin-top: 1rem;
  color: #d8d2ff;
  font-weight: 700;
}

.skill-nextgen__resource-actions {
  gap: 0.7rem;
}

.age-nextgen__hero {
  max-width: 820px;
  margin: 0 auto;
}

.age-nextgen__grid {
  margin-top: 1.35rem;
}

.age-skill-card {
  min-height: 320px;
  padding: 2rem 1.35rem 1.35rem;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
}

.age-skill-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 20%, rgba(255,255,255,0.08), transparent 36%);
  pointer-events: none;
}

.age-skill-card .skill-card__icon {
  top: 1.3rem;
  width: 108px;
  height: 108px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  padding: 1.05rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 18px 40px rgba(0,0,0,0.22);
}

.age-skill-card .skill-card__icon svg {
  width: 58px;
  height: 58px;
}

.age-skill-card[data-skill="reading"] .skill-card__icon {
  color: var(--accent-green);
  background: radial-gradient(circle at 50% 35%, rgba(52,211,153,0.22), rgba(52,211,153,0.08));
  box-shadow: 0 0 28px rgba(52,211,153,0.16), inset 0 1px 0 rgba(255,255,255,0.06);
}

.age-skill-card[data-skill="listening"] .skill-card__icon {
  color: var(--accent-blue);
  background: radial-gradient(circle at 50% 35%, rgba(79,195,247,0.22), rgba(79,195,247,0.08));
  box-shadow: 0 0 28px rgba(79,195,247,0.16), inset 0 1px 0 rgba(255,255,255,0.06);
}

.age-skill-card[data-skill="writing"] .skill-card__icon {
  color: var(--accent-orange);
  background: radial-gradient(circle at 50% 35%, rgba(251,146,60,0.22), rgba(251,146,60,0.08));
  box-shadow: 0 0 28px rgba(251,146,60,0.16), inset 0 1px 0 rgba(255,255,255,0.06);
}

.age-skill-card[data-skill="speaking"] .skill-card__icon {
  color: var(--accent-purple);
  background: radial-gradient(circle at 50% 35%, rgba(167,139,250,0.22), rgba(167,139,250,0.08));
  box-shadow: 0 0 28px rgba(167,139,250,0.16), inset 0 1px 0 rgba(255,255,255,0.06);
}

.age-skill-card__body {
  display: grid;
  gap: 0.8rem;
  justify-items: center;
  position: relative;
  z-index: 1;
}

.age-skill-card__desc {
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 24ch;
}

.age-skill-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.72rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  font-weight: 700;
}

/* Games next-gen */
.game-play-page {
  padding-bottom: 2rem;
}

.game-play-page[data-game-age-theme="0-3"] {
  --game-accent: rgba(52,211,153,0.72);
  --game-accent-soft: rgba(52,211,153,0.14);
}

.game-play-page[data-game-age-theme="4-7"] {
  --game-accent: rgba(251,191,36,0.72);
  --game-accent-soft: rgba(251,191,36,0.14);
}

.game-play-page[data-game-age-theme="8-10"] {
  --game-accent: rgba(79,195,247,0.72);
  --game-accent-soft: rgba(79,195,247,0.14);
}

.game-play-page[data-game-age-theme="11-12"] {
  --game-accent: rgba(167,139,250,0.72);
  --game-accent-soft: rgba(167,139,250,0.14);
}

.game-play-page[data-game-age-theme="13-18"],
.game-play-page[data-game-age-theme="featured"] {
  --game-accent: rgba(244,114,182,0.72);
  --game-accent-soft: rgba(244,114,182,0.14);
}

.game-hero-card,
.game-missing-card,
.game-status-bar,
.game-container,
.game-tip-card,
.game-side-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)),
    radial-gradient(540px 240px at 0% 0%, var(--game-accent-soft, rgba(124,92,252,0.14)), transparent 72%),
    rgba(12, 14, 38, 0.78);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 24px 56px rgba(0,0,0,0.28);
}

.game-hero-card {
  position: relative;
  overflow: hidden;
  padding: 1.6rem;
  border-radius: 32px;
}

.game-hero-card::after {
  content: '';
  position: absolute;
  inset: auto -8% -32% 45%;
  height: 220px;
  border-radius: 50%;
  background: var(--game-accent-soft, rgba(124,92,252,0.12));
  filter: blur(28px);
  pointer-events: none;
}

.game-header {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.52fr);
  gap: 1rem;
  align-items: start;
}

.game-title-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.game-emoji-large {
  width: 96px;
  height: 96px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 3rem;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.18), var(--game-accent-soft, rgba(124,92,252,0.16)));
  border: 1px solid rgba(255,255,255,0.14);
}

.game-kicker,
.game-tip-card__eyebrow,
.game-side-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.game-description {
  max-width: 760px;
  margin-top: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.75;
}

.game-header-side {
  display: grid;
  gap: 0.85rem;
}

.game-high-score,
.game-difficulty-badge {
  padding: 1rem 1.1rem;
  border-radius: 22px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
}

.game-high-score strong,
.game-difficulty-badge strong {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
}

.game-high-score.is-muted {
  color: var(--text-secondary);
}

.game-meta-chips {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.2rem;
}

.game-meta-chip,
.game-status-mini {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 700;
}

.game-quick-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.game-quick-stat {
  padding: 1rem 1.05rem;
  border-radius: 22px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
}

.game-quick-stat__label,
.game-status-detail,
.game-tip-card__text,
.game-tip-fact__label,
.game-checklist,
.game-side-card__links {
  color: var(--text-secondary);
}

.game-quick-stat strong {
  display: block;
  margin-top: 0.45rem;
  line-height: 1.6;
}

.game-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.55fr);
  gap: 1.2rem;
  align-items: start;
}

.game-stage__main {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1rem;
}

.game-stage__backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.game-stage__orb,
.game-stage__spark {
  position: absolute;
  border-radius: 50%;
}

.game-stage__orb {
  filter: blur(18px);
  opacity: 0.65;
}

.game-stage__orb--one {
  width: 160px;
  height: 160px;
  top: 8%;
  left: 3%;
  background: var(--game-accent-soft, rgba(124,92,252,0.16));
}

.game-stage__orb--two {
  width: 220px;
  height: 220px;
  right: 18%;
  bottom: 4%;
  background: rgba(79,195,247,0.12);
}

.game-stage__orb--three {
  width: 110px;
  height: 110px;
  right: 2%;
  top: 24%;
  background: rgba(255,255,255,0.07);
}

.game-stage__spark {
  width: 9px;
  height: 9px;
  background: rgba(255,255,255,0.8);
  box-shadow: 0 0 20px rgba(255,255,255,0.4);
}

.game-stage__spark--one { top: 16%; right: 14%; }
.game-stage__spark--two { top: 52%; left: 26%; }
.game-stage__spark--three { bottom: 12%; right: 26%; }

.game-status-bar {
  position: relative;
  z-index: 1;
  border-radius: 24px;
  padding: 1rem 1.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.game-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.48rem 0.8rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
}

.game-status-pill[data-kind="loading"] { color: var(--accent-cyan); border-color: rgba(79,195,247,0.3); background: rgba(79,195,247,0.1); }
.game-status-pill[data-kind="ready"] { color: #c5b8ff; border-color: rgba(167,139,250,0.3); background: rgba(167,139,250,0.1); }
.game-status-pill[data-kind="active"] { color: #c8ffe0; border-color: rgba(52,211,153,0.3); background: rgba(52,211,153,0.1); }
.game-status-pill[data-kind="error"] { color: #ffc7d7; border-color: rgba(244,114,182,0.3); background: rgba(244,114,182,0.1); }

.game-status-detail {
  margin: 0.7rem 0 0;
  line-height: 1.6;
}

.game-status-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.game-container {
  position: relative;
  z-index: 1;
  min-height: 560px;
  padding: 1.1rem;
  border-radius: 30px;
  overflow: hidden;
}

.game-controls {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.game-tip-stack {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1rem;
}

.game-tip-card,
.game-side-card,
.game-missing-card {
  border-radius: 28px;
  padding: 1.25rem;
}

.game-tip-card__title,
.game-side-card__title {
  margin-top: 0.9rem;
  font-size: 1.4rem;
}

.game-tip-card__text {
  margin-top: 0.7rem;
  line-height: 1.75;
}

.game-tip-card__facts {
  display: grid;
  gap: 0.8rem;
  margin-top: 1rem;
}

.game-tip-fact {
  padding: 0.85rem 0.95rem;
  border-radius: 18px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}

.game-tip-fact strong {
  display: block;
  margin-top: 0.25rem;
}

.game-mic-note {
  margin-top: 1rem;
}

.game-checklist {
  margin: 0.85rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.7rem;
  line-height: 1.65;
}

.game-side-card__links {
  display: grid;
  gap: 0.7rem;
  margin-top: 1rem;
}

.game-loading,
.game-error,
.game-missing-card {
  min-height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
}

.game-loading {
  gap: 0.9rem;
}

.game-loading-spinner {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.12);
  border-top-color: var(--game-accent, var(--accent-purple));
  animation: spin 0.8s linear infinite;
}

.game-error {
  gap: 0.7rem;
  color: var(--text-secondary);
}

.game-missing-card {
  min-height: 420px;
  gap: 1rem;
}

.game-missing-card__icon {
  width: 110px;
  height: 110px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  font-size: 3rem;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.18), var(--game-accent-soft, rgba(124,92,252,0.16)));
  border: 1px solid rgba(255,255,255,0.14);
}

.game-missing-card__actions {
  justify-content: center;
}

.games-hub__hero,
.games-age-nextgen__hero,
.games-skill-nextgen__hero {
  max-width: 860px;
  margin: 0 auto;
}

.games-hub-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, 1fr);
  gap: 1.4rem;
  align-items: stretch;
}

.games-hub-grid__ages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.games-hub-grid__featured {
  min-width: 0;
  display: flex;
}

.games-hub-card,
.games-featured-banner,
.games-skill-card,
.games-list-card {
  text-decoration: none;
  color: var(--text-primary);
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(20,16,62,0.96), rgba(13,13,43,0.92));
  box-shadow: 0 24px 60px rgba(0,0,0,0.28);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.games-hub-card:hover,
.games-featured-banner:hover,
.games-skill-card:hover,
.games-list-card:hover {
  transform: translateY(-5px);
}

.games-hub-card {
  min-height: 280px;
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
}

.games-hub-card[data-glow="green"]:hover { border-color: rgba(52,211,153,0.35); box-shadow: 0 26px 60px rgba(0,0,0,0.32), 0 0 30px rgba(52,211,153,0.12); }
.games-hub-card[data-glow="yellow"]:hover { border-color: rgba(251,191,36,0.35); box-shadow: 0 26px 60px rgba(0,0,0,0.32), 0 0 30px rgba(251,191,36,0.12); }
.games-hub-card[data-glow="blue"]:hover { border-color: rgba(79,195,247,0.35); box-shadow: 0 26px 60px rgba(0,0,0,0.32), 0 0 30px rgba(79,195,247,0.12); }
.games-hub-card[data-glow="purple"]:hover { border-color: rgba(167,139,250,0.35); box-shadow: 0 26px 60px rgba(0,0,0,0.32), 0 0 30px rgba(167,139,250,0.12); }
.games-hub-card[data-glow="pink"]:hover { border-color: rgba(244,114,182,0.35); box-shadow: 0 26px 60px rgba(0,0,0,0.32), 0 0 30px rgba(244,114,182,0.12); }

.games-hub-card__avatar {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 3rem;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.16), rgba(124,92,252,0.12));
  border: 1px solid rgba(255,255,255,0.12);
}

.games-hub-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
}

.games-hub-card__range,
.games-hub-card__badge {
  color: var(--text-secondary);
  font-weight: 700;
}

.games-hub-card__title,
.games-skill-card__title,
.games-list-card__title {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 800;
}

.games-hub-card__desc,
.games-skill-card__desc,
.games-list-card__desc {
  margin-top: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.games-featured-banner {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 100%;
  min-height: 576px;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  border-color: rgba(251,191,36,0.35);
  background:
    radial-gradient(circle at top, rgba(251,191,36,0.16), transparent 42%),
    linear-gradient(180deg, rgba(68,36,14,0.36), rgba(32,18,58,0.92));
}

.games-featured-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 26%),
    radial-gradient(circle at 50% 18%, rgba(255,255,255,0.08), transparent 22%);
  pointer-events: none;
}

.games-featured-banner__scroll {
  position: absolute;
  inset: 1.1rem;
  border-radius: 24px;
  border: 1px solid rgba(251,191,36,0.28);
  box-shadow: inset 0 0 40px rgba(251,191,36,0.06), 0 0 28px rgba(251,191,36,0.08);
}

.games-featured-banner__scroll::before,
.games-featured-banner__scroll::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 66px;
  border-radius: 999px;
  border: 2px solid var(--accent-cyan);
  box-shadow: 0 0 0 6px rgba(0,0,0,0.18), 0 0 18px rgba(0,229,255,0.2);
  background: linear-gradient(180deg, rgba(24,14,44,0.95), rgba(68,36,14,0.55));
}

.games-featured-banner__scroll::before {
  top: -6px;
}

.games-featured-banner__scroll::after {
  bottom: -6px;
}

.games-featured-banner__content {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.games-featured-banner__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
}

.games-featured-banner__desc {
  margin-top: 1rem;
  color: var(--text-secondary);
  max-width: 22ch;
}

.games-featured-banner__cta,
.games-skill-card__cta,
.games-list-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.25rem;
  padding: 0.88rem 1.4rem;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  font-weight: 800;
}

.games-dashboard {
  margin-top: 1.2rem;
}

.games-dashboard__title {
  font-family: var(--font-display);
  font-size: 1.9rem;
  margin-bottom: 1rem;
}

.games-dashboard__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: stretch;
}

.games-dashboard__panel {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(20,16,62,0.96), rgba(13,13,43,0.92));
}

.games-dashboard__panel--violet { box-shadow: 0 0 30px rgba(167,139,250,0.08); }
.games-dashboard__panel--gold { box-shadow: 0 0 30px rgba(251,191,36,0.08); }

.games-dashboard__ring {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 2rem;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.12), rgba(124,92,252,0.08));
}

.games-dashboard__content {
  flex: 1;
}

.games-dashboard__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}

.games-dashboard__bar {
  margin-top: 0.9rem;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}

.games-dashboard__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-purple), var(--accent-blue));
}

.games-dashboard__achievements {
  display: flex;
  gap: 0.75rem;
  align-items: end;
}

.games-badge-card {
  min-width: 120px;
  padding: 1rem 0.9rem;
  border-radius: 20px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(20,16,62,0.96), rgba(13,13,43,0.92));
}

.games-badge-card span {
  display: block;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.games-skill-grid,
.games-list-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.games-skill-card,
.games-list-card {
  padding: 1.3rem;
  display: flex;
  flex-direction: column;
}

.games-skill-card__icon,
.games-list-card__icon {
  width: 82px;
  height: 82px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  font-size: 2.2rem;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.14), rgba(124,92,252,0.10));
  border: 1px solid rgba(255,255,255,0.12);
}

.games-skill-card__count,
.games-list-card__score,
.games-list-card__difficulty {
  margin-top: 0.8rem;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.games-list-card__top,
.games-list-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  justify-content: space-between;
}

.games-list-card__chips {
  justify-content: flex-start;
  margin-top: 0.9rem;
}

.games-list-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 0.76rem;
  color: var(--text-secondary);
}

@media (max-width: 1100px) {
  .game-header,
  .game-stage,
  .games-hub-grid,
  .games-dashboard__grid {
    grid-template-columns: 1fr;
  }

  .games-featured-banner {
    min-height: 360px;
  }

  .games-hub-grid__ages,
  .games-skill-grid,
  .games-list-grid,
  .game-quick-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .games-dashboard__achievements {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 700px) {
  .games-hub-grid__ages,
  .games-skill-grid,
  .games-list-grid,
  .game-quick-stats {
    grid-template-columns: 1fr;
  }

  .games-featured-banner {
    min-height: 300px;
    padding: 1.15rem;
  }

  .games-featured-banner__scroll {
    inset: 0.8rem;
  }

  .games-featured-banner__scroll::before,
  .games-featured-banner__scroll::after {
    width: 24px;
    height: 52px;
  }

  .game-title-row,
  .game-status-bar {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: flex-start;
  }

  .game-container {
    min-height: 440px;
  }

  .game-controls {
    flex-direction: column;
  }

  .game-controls .btn {
    width: 100%;
  }
}

/* Certificates next-gen */
.certificates-nextgen {
  padding-bottom: 2rem;
}

.certificates-nextgen__hero {
  text-align: center;
  padding: 1.8rem 0 0.8rem;
}

.certificates-nextgen .page-subtitle {
  text-align: center;
}

.certificates-nextgen .actions {
  justify-content: center;
}

.certificates-nextgen .ueah-certificate-wrap {
  gap: 1.25rem;
}

.certificates-nextgen .ueah-certificate-sheet {
  padding: 14px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(20,16,62,0.96), rgba(13,13,43,0.92));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 28px 68px rgba(0,0,0,0.36), 0 0 48px rgba(124,92,252,0.10);
}

.certificates-nextgen .ueah-certificate-svg {
  border-radius: 20px;
  background: #0b0824;
}

.certificates-nextgen--locked {
  max-width: 980px;
  margin: 0 auto;
}

/* Error next-gen */
.error-nextgen {
  min-height: 78vh;
  display: flex;
  align-items: center;
}

.error-nextgen__shell {
  width: 100%;
  text-align: center;
  padding: 2rem 1rem 3rem;
}

.error-nextgen__code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 16vw, 8rem);
  font-weight: 900;
  line-height: 1;
  color: #eef0ff;
  text-shadow: 0 0 30px rgba(124,92,252,0.35), 0 0 70px rgba(79,195,247,0.18);
}

.error-nextgen__title {
  margin-top: 0.75rem;
  font-size: clamp(2rem, 5vw, 4rem);
}

.error-nextgen__subtitle {
  margin-top: 0.8rem;
  text-align: center;
  max-width: 720px;
}

.error-nextgen__owl {
  margin: 2rem auto 1.5rem;
  font-size: clamp(7rem, 18vw, 12rem);
  filter: drop-shadow(0 0 36px rgba(124,92,252,0.3));
}

.error-nextgen__actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.error-nextgen__btn {
  min-width: 220px;
}

/* Final games frame-motion override: keep games frames above older static highlights. */
@supports ((-webkit-mask: linear-gradient(#000 0 0)) or (mask: linear-gradient(#000 0 0))) {
  .games-hub-card,
  .games-featured-banner,
  .games-dashboard__panel,
  .games-badge-card,
  .games-skill-card,
  .games-list-card,
  .game-hero-card,
  .game-missing-card,
  .game-status-bar,
  .game-container,
  .game-tip-card,
  .game-side-card {
    --frame-fill: linear-gradient(180deg, rgba(20,16,62,0.96), rgba(13,13,43,0.92));
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: transparent;
    border-color: transparent;
  }

  .games-featured-banner {
    --frame-rgb: 251,191,36;
    --frame-strength: 1;
    --frame-speed: 8s;
    --frame-fill:
      radial-gradient(circle at top, rgba(251,191,36,0.16), transparent 42%),
      linear-gradient(180deg, rgba(68,36,14,0.36), rgba(32,18,58,0.92));
  }

  .game-hero-card,
  .game-missing-card,
  .game-status-bar,
  .game-container,
  .game-tip-card,
  .game-side-card {
    --frame-fill:
      linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)),
      radial-gradient(540px 240px at 0% 0%, var(--game-accent-soft, rgba(124,92,252,0.14)), transparent 72%),
      rgba(12, 14, 38, 0.78);
  }

  .game-container {
    --frame-strength: 0.5;
    --frame-speed: 14s;
  }

  .games-dashboard__panel,
  .games-badge-card,
  .game-status-bar,
  .game-tip-card,
  .game-side-card {
    --frame-strength: 0.62;
    --frame-speed: 12s;
  }

  .games-hub-card[data-glow="green"],
  .games-skill-card[data-glow="green"],
  .games-list-card[data-glow="green"] { --frame-rgb: 52,211,153; }
  .games-hub-card[data-glow="yellow"],
  .games-skill-card[data-glow="yellow"],
  .games-list-card[data-glow="yellow"] { --frame-rgb: 251,191,36; }
  .games-hub-card[data-glow="blue"],
  .games-skill-card[data-glow="blue"],
  .games-list-card[data-glow="blue"] { --frame-rgb: 79,195,247; }
  .games-hub-card[data-glow="purple"],
  .games-skill-card[data-glow="purple"],
  .games-list-card[data-glow="purple"] { --frame-rgb: 167,139,250; }
  .games-hub-card[data-glow="pink"],
  .games-skill-card[data-glow="pink"],
  .games-list-card[data-glow="pink"] { --frame-rgb: 244,114,182; }
  .games-skill-card[data-glow="red"],
  .games-list-card[data-glow="red"] { --frame-rgb: 255,86,120; }

  .games-dashboard__panel--violet { --frame-rgb: 167,139,250; }
  .games-dashboard__panel--gold,
  .games-badge-card { --frame-rgb: 251,191,36; }

  .game-play-page[data-game-age-theme="0-3"] { --frame-rgb: 52,211,153; }
  .game-play-page[data-game-age-theme="4-7"] { --frame-rgb: 251,191,36; }
  .game-play-page[data-game-age-theme="8-10"] { --frame-rgb: 79,195,247; }
  .game-play-page[data-game-age-theme="11-12"] { --frame-rgb: 167,139,250; }
  .game-play-page[data-game-age-theme="13-18"],
  .game-play-page[data-game-age-theme="featured"] { --frame-rgb: 244,114,182; }

  .games-hub-card::before,
  .games-featured-banner::before,
  .games-dashboard__panel::before,
  .games-badge-card::before,
  .games-skill-card::before,
  .games-list-card::before,
  .game-hero-card::before,
  .game-missing-card::before,
  .game-status-bar::before,
  .game-container::before,
  .game-tip-card::before,
  .game-side-card::before {
    content: "";
    position: absolute;
    inset: -75%;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    background: conic-gradient(
      from 0deg,
      transparent 0deg,
      rgba(var(--frame-rgb, 124,92,252), calc(0.18 * var(--frame-strength, 1))) 36deg,
      rgba(79,195,247, calc(0.74 * var(--frame-strength, 1))) 82deg,
      rgba(251,191,36, calc(0.80 * var(--frame-strength, 1))) 124deg,
      rgba(244,114,182, calc(0.52 * var(--frame-strength, 1))) 164deg,
      transparent 212deg,
      transparent 360deg
    );
    -webkit-mask: none;
    mask: none;
    animation: frameSpin var(--frame-speed, 8s) linear infinite;
  }

  .games-hub-card::after,
  .games-featured-banner::after,
  .games-dashboard__panel::after,
  .games-badge-card::after,
  .games-skill-card::after,
  .games-list-card::after,
  .game-hero-card::after,
  .game-missing-card::after,
  .game-status-bar::after,
  .game-container::after,
  .game-tip-card::after,
  .game-side-card::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: 1;
    height: auto;
    padding: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 1;
    background: var(--frame-fill);
    filter: none;
    -webkit-mask: none;
    mask: none;
    animation: none;
    transition: none;
  }

  .games-hub-card > *,
  .games-featured-banner > *,
  .games-dashboard__panel > *,
  .games-badge-card > *,
  .games-skill-card > *,
  .games-list-card > *,
  .game-hero-card > *,
  .game-missing-card > *,
  .game-status-bar > *,
  .game-container > *,
  .game-tip-card > *,
  .game-side-card > * {
    position: relative;
    z-index: 2;
  }
}

/* Final frame-motion override: keep the rotating layer above older static highlights. */
@supports ((-webkit-mask: linear-gradient(#000 0 0)) or (mask: linear-gradient(#000 0 0))) {
  .resources-nextgen .resource-age-card::before,
  .age-nextgen .age-skill-card::before,
  .skill-nextgen__stat::before,
  .skill-nextgen .detail-card::before,
  .skill-nextgen__resource-card::before,
  .tests-hero-card::before,
  .tests-section--nextgen::before,
  .tests-section--nextgen .card::before {
    content: "";
    position: absolute;
    inset: -75%;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    background: conic-gradient(
      from 0deg,
      transparent 0deg,
      rgba(var(--frame-rgb), calc(0.18 * var(--frame-strength, 1))) 36deg,
      rgba(79,195,247, calc(0.74 * var(--frame-strength, 1))) 82deg,
      rgba(251,191,36, calc(0.80 * var(--frame-strength, 1))) 124deg,
      rgba(244,114,182, calc(0.52 * var(--frame-strength, 1))) 164deg,
      transparent 212deg,
      transparent 360deg
    );
    -webkit-mask: none;
    mask: none;
    animation: frameSpin var(--frame-speed, 8s) linear infinite;
  }

  .resources-nextgen .resource-age-card::after,
  .age-nextgen .age-skill-card::after,
  .skill-nextgen__stat::after,
  .skill-nextgen .detail-card::after,
  .skill-nextgen__resource-card::after,
  .tests-hero-card::after,
  .tests-section--nextgen::after,
  .tests-section--nextgen .card::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: 1;
    height: auto;
    padding: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 1;
    background: var(--frame-fill);
    -webkit-mask: none;
    mask: none;
    animation: none;
    transition: none;
  }

  .resources-nextgen .resource-age-card > *,
  .age-nextgen .age-skill-card > *,
  .skill-nextgen__stat > *,
  .skill-nextgen .detail-card > *,
  .skill-nextgen__resource-card > *,
  .tests-hero-card > *,
  .tests-section--nextgen > *,
  .tests-section--nextgen .card > * {
    position: relative;
    z-index: 2;
  }
}