:root {
  color-scheme: dark;
  --bg: #111316;
  --panel: #1b2026;
  --panel-2: #242a31;
  --ink: #f4efe6;
  --muted: #aeb7bc;
  --line: #3a424b;
  --gold: #f2bd4b;
  --red: #e85d5d;
  --teal: #40c9b2;
  --blue: #67a7ff;
  --green: #89cf6f;
  --violet: #b289ff;
  --shadow: rgba(0, 0, 0, 0.35);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.preview-access-banner {
  position: fixed;
  z-index: 12000;
  left: 50%;
  top: 10px;
  width: min(760px, calc(100% - 24px));
  min-height: 46px;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #111418;
  background: rgba(242, 189, 75, 0.96);
  border: 1px solid #fff0b4;
  border-radius: 8px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
  transform: translateX(-50%);
  backdrop-filter: blur(8px);
}

.preview-access-banner strong {
  white-space: nowrap;
}

.preview-access-banner span {
  font-size: 0.8rem;
}

.preview-access-banner.is-alerting {
  color: #fff;
  background: rgba(150, 39, 47, 0.97);
  border-color: #ff9aa2;
}

body.preview-account::after {
  content: "KEYBOARD HERO · RESTRICTED PREVIEW";
  pointer-events: none;
  position: fixed;
  z-index: 11000;
  left: 50%;
  top: 50%;
  width: 100vw;
  color: rgba(242, 189, 75, 0.1);
  font-size: clamp(2rem, 5vw, 5.5rem);
  font-weight: 950;
  letter-spacing: 0.08em;
  text-align: center;
  transform: translate(-50%, -50%) rotate(-24deg);
}

@media (max-width: 680px) {
  .preview-access-banner {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .preview-access-banner strong {
    white-space: normal;
  }
}

@media print {
  body.preview-account > * {
    display: none !important;
  }

  body.preview-account::before {
    content: "Printing is disabled for the Keyboard Hero preview account.";
    display: block !important;
    padding: 48px;
    color: #111;
    font: 700 18pt Arial, sans-serif;
  }

  body.preview-account::after {
    display: none !important;
  }
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    linear-gradient(120deg, rgba(232, 93, 93, 0.08), transparent 32%),
    linear-gradient(300deg, rgba(64, 201, 178, 0.08), transparent 36%),
    #0d1014;
  color: var(--ink);
}

button,
select,
input {
  font: inherit;
}

.password-visibility-field {
  position: relative;
}

.password-visibility-field > input[type="password"],
.password-visibility-field > input[type="text"][data-visibility-ready="true"] {
  padding-right: 68px;
}

.password-visibility-toggle {
  position: absolute;
  right: 9px;
  bottom: 8px;
  z-index: 2;
  min-width: 48px;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid rgba(78, 207, 231, 0.36);
  border-radius: 5px;
  background: #101922;
  color: var(--teal);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
}

.password-visibility-toggle:hover,
.password-visibility-toggle:focus-visible {
  border-color: var(--teal);
  color: #fff;
}

.is-hidden {
  display: none !important;
}

.main-menu,
.class-view {
  min-height: 100dvh;
  width: 100%;
  display: block;
  overflow: auto;
}

.class-view {
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 32px);
}

.main-menu {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px) center / 72px 72px,
    linear-gradient(0deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px) center / 72px 72px;
}

.main-menu::before,
.main-menu::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
}

.main-menu::before {
  inset: 0;
  background:
    linear-gradient(112deg, transparent 0 14%, rgba(242, 189, 75, 0.035) 14.2% 14.5%, transparent 14.7% 100%),
    linear-gradient(72deg, transparent 0 72%, rgba(64, 201, 178, 0.04) 72.2% 72.55%, transparent 72.8% 100%);
}

.main-menu::after {
  inset: 0;
  opacity: 0.22;
  background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(255, 255, 255, 0.015) 5px 6px);
}

.menu-panel,
.class-panel {
  position: relative;
  width: min(1440px, 100%);
  margin: 0 auto;
}

.menu-panel {
  display: grid;
  gap: 0;
  overflow: visible;
  padding: 0 clamp(20px, 4vw, 64px) clamp(60px, 8vw, 110px);
}

.landing-nav {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid rgba(174, 183, 188, 0.18);
}

.landing-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
}

.brand-mark {
  position: relative;
  width: 54px;
  height: 42px;
  flex: 0 0 auto;
}

.brand-mark span {
  position: absolute;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold);
  border-bottom-width: 4px;
  border-radius: 6px;
  color: var(--gold);
  background: #101317;
  font-size: 0.78rem;
  font-weight: 900;
  box-shadow: 0 0 18px rgba(242, 189, 75, 0.22);
}

.brand-mark span:last-child {
  right: 0;
  bottom: 0;
  color: #0d1415;
  background: var(--teal);
  border-color: var(--teal);
  box-shadow: 0 0 18px rgba(64, 201, 178, 0.32);
}

.brand-copy {
  display: grid;
  gap: 1px;
}

.brand-copy strong {
  font-size: 1rem;
  line-height: 1.1;
}

.brand-copy small {
  color: var(--muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.landing-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.landing-links a,
.landing-links .public-nav-button,
.landing-links .support-nav-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 700;
}

.landing-links .public-nav-button,
.landing-links .support-nav-button {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.landing-links a:hover,
.landing-links a:focus-visible,
.landing-links .public-nav-button:hover,
.landing-links .public-nav-button:focus-visible,
.landing-links .support-nav-button:hover,
.landing-links .support-nav-button:focus-visible {
  color: var(--ink);
}

.landing-links .admin-login-link,
.admin-home-link {
  min-height: 34px;
  padding: 0 10px;
  color: #c9d9e8;
  background: rgba(103, 167, 255, 0.08);
  border: 1px solid rgba(103, 167, 255, 0.38);
  border-radius: 5px;
  font-size: 0.75rem;
}

.landing-links button {
  min-height: 42px;
}

.landing-links .faq-nav-button {
  padding-inline: 13px;
  color: #d9d3ff;
  border-color: rgba(178, 137, 255, 0.42);
  background: rgba(178, 137, 255, 0.08);
}

.landing-links .faq-nav-button:hover,
.landing-links .faq-nav-button:focus-visible {
  color: #111419;
  border-color: var(--violet);
  background: var(--violet);
}

.landing-hero {
  position: relative;
  min-height: min(720px, calc(100dvh - 92px));
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(520px, 1.08fr);
  align-items: center;
  gap: clamp(40px, 6vw, 94px);
  padding: 64px 0;
}

.menu-hero {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 18px;
  max-width: 660px;
}

.menu-hero h1 {
  max-width: 13ch;
  font-size: 5rem;
  line-height: 0.96;
  text-shadow:
    0 0 24px rgba(242, 189, 75, 0.14),
    0 0 48px rgba(64, 201, 178, 0.08);
}

.menu-hero > p:not(.eyebrow) {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1.65;
}

.menu-hero .eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 12px var(--teal);
  animation: status-pulse 1.8s ease-in-out infinite;
}

.hero-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  gap: 14px;
  margin-top: 10px;
}

.hero-price-callout {
  width: min(100%, 510px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 18px;
  padding: 14px 16px;
  color: #fff8e7;
  background: linear-gradient(135deg, rgba(242, 189, 75, 0.15), rgba(64, 201, 178, 0.08));
  border: 1px solid rgba(242, 189, 75, 0.42);
  border-left: 4px solid var(--gold);
  border-radius: 7px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
}

.hero-price-callout span {
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero-price-callout strong {
  grid-row: 1 / 3;
  grid-column: 2;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
}

.hero-price-callout small {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.4;
}

@media (max-width: 520px) {
  .hero-price-callout {
    grid-template-columns: 1fr;
  }

  .hero-price-callout strong {
    grid-row: auto;
    grid-column: auto;
  }
}

.hero-actions button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 88px;
  padding: 16px 18px;
  border: 2px solid transparent;
  font-weight: 800;
  text-align: left;
}

.hero-actions button strong { display: block; font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.2; }
.hero-actions button small { display: block; margin-top: 7px; font-size: .76rem; font-weight: 600; line-height: 1.4; text-transform: none; }
.hero-actions .hero-parent-login { color: #071b19; background: #60dfce; border-color: #92f3e5; box-shadow: 0 10px 30px rgba(64,201,178,.18); }
.hero-actions .hero-parent-login:hover { background: #91f2e4; }
.hero-actions button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
@media (max-width: 600px) { .hero-actions { grid-template-columns: minmax(0, 1fr); } }

.hero-actions .hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 34px rgba(242, 189, 75, 0.2);
}

.family-promises {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 4px;
}

.family-promises span {
  position: relative;
  padding-left: 16px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.family-promises span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.34em;
  width: 7px;
  height: 7px;
  border: 1px solid var(--teal);
  transform: rotate(45deg);
  box-shadow: 0 0 8px rgba(64, 201, 178, 0.45);
}

.curriculum-video {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 12px;
  overflow: hidden;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018));
  border: 1px solid rgba(174, 183, 188, 0.34);
  border-radius: 8px;
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.48),
    0 0 80px rgba(64, 201, 178, 0.07);
}

.curriculum-video::before {
  content: "";
  position: absolute;
  inset: -50% 52% -50% -28%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(242, 189, 75, 0.08), transparent);
  transform: rotate(18deg);
  animation: preview-sheen 7s linear infinite;
}

.video-frame-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-left: 2px solid rgba(242, 189, 75, 0.55);
  border-right: 2px solid rgba(64, 201, 178, 0.5);
  opacity: 0.72;
}

.video-topline,
.video-caption,
.video-hud {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.video-topline {
  min-height: 66px;
  padding: 2px 8px 10px;
}

.video-topline > div:first-child {
  display: grid;
  gap: 7px;
}

.video-topline > div:first-child > strong {
  font-size: 1.2rem;
}

.live-pill {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--teal);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.live-pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 9px currentColor;
  animation: status-pulse 1.2s ease-in-out infinite;
}

.video-level {
  display: grid;
  justify-items: end;
  gap: 3px;
}

.video-level span {
  color: var(--red);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.video-level strong {
  font-size: 0.86rem;
}

.video-hud {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0 8px 10px;
}

.video-hud span {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 7px;
  padding: 8px 10px;
  color: var(--muted);
  background: #0d1116;
  border: 1px solid rgba(174, 183, 188, 0.18);
  font-size: 0.68rem;
}

.video-hud strong {
  color: var(--ink);
  font-size: 0.82rem;
}

.video-stage {
  --preview-stage: clamp(300px, 40dvh, 430px);
  position: relative;
  height: var(--preview-stage);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(64, 201, 178, 0.075), transparent 34%),
    repeating-linear-gradient(0deg, transparent 0 58px, rgba(242, 189, 75, 0.075) 59px 60px),
    #090c10;
  border: 1px solid rgba(174, 183, 188, 0.22);
}

.video-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 40%, rgba(242, 189, 75, 0.08));
  mix-blend-mode: screen;
}

.video-lanes {
  position: absolute;
  inset: 0 4% 0;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  perspective: 600px;
}

.video-lanes i {
  border-left: 1px solid rgba(174, 183, 188, 0.16);
  transform-origin: center bottom;
}

.video-lanes i:last-child {
  border-right: 1px solid rgba(174, 183, 188, 0.16);
}

.lane-note {
  --lane-color: var(--gold);
  position: absolute;
  z-index: 5;
  top: -42px;
  width: clamp(34px, 5vw, 48px);
  height: clamp(30px, 4vw, 42px);
  display: grid;
  place-items: center;
  color: #080b0e;
  background: var(--lane-color);
  border: 2px solid color-mix(in srgb, var(--lane-color) 76%, white);
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 1000;
  box-shadow:
    0 0 13px color-mix(in srgb, var(--lane-color) 68%, transparent),
    0 9px 28px rgba(0, 0, 0, 0.5);
  animation: preview-note 3.35s linear infinite;
}

.lane-note-a { --lane-color: var(--red); left: 7.5%; animation-delay: -2.75s; }
.lane-note-b { --lane-color: var(--blue); left: 55%; animation-delay: -1.85s; }
.lane-note-c { --lane-color: var(--violet); left: 68%; animation-delay: -0.7s; }
.lane-note-d { --lane-color: var(--gold); left: 39%; width: 92px; animation-delay: -2.2s; }
.lane-note-e { --lane-color: var(--green); left: 31.5%; animation-delay: -1.22s; }
.lane-note-f { --lane-color: var(--teal); left: 44%; animation-delay: -0.12s; }

.video-hitline {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 62px;
  height: 3px;
  background: var(--gold);
  box-shadow: 0 0 13px rgba(242, 189, 75, 0.82);
}

.video-keys {
  position: absolute;
  z-index: 6;
  left: 3%;
  right: 3%;
  bottom: 21px;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
}

.video-keys kbd {
  min-width: 0;
  min-height: 44px;
  border-color: rgba(242, 189, 75, 0.8);
  box-shadow: 0 0 14px rgba(242, 189, 75, 0.17);
  animation: preview-key 3.35s ease-in-out infinite;
}

.video-keys kbd:nth-child(2n) {
  border-color: rgba(64, 201, 178, 0.76);
  animation-delay: -1.1s;
}

.video-keys kbd:nth-child(3n) {
  border-color: rgba(103, 167, 255, 0.8);
  animation-delay: -2.15s;
}

.video-reward {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 35%;
  display: grid;
  place-items: center;
  gap: 2px;
  color: var(--teal);
  transform: translate(-50%, -50%);
  text-align: center;
  text-shadow:
    0 0 8px rgba(64, 201, 178, 0.95),
    0 0 24px rgba(64, 201, 178, 0.72),
    0 0 44px rgba(242, 189, 75, 0.4);
  animation: preview-reward 3.2s ease-in-out infinite;
}

.video-reward strong {
  font-size: 2.5rem;
  line-height: 1;
}

.video-reward span {
  color: var(--gold);
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.video-sparks {
  position: absolute;
  z-index: 7;
  left: 53%;
  bottom: 54px;
  width: 90px;
  height: 70px;
  pointer-events: none;
}

.video-sparks i {
  --spark-color: var(--teal);
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 4px;
  height: 20px;
  background: var(--spark-color);
  box-shadow: 0 0 9px var(--spark-color);
  transform-origin: center bottom;
  animation: preview-spark 1.2s ease-out infinite;
}

.video-sparks i:nth-child(2) { --spark-color: var(--gold); transform: rotate(45deg); animation-delay: -0.2s; }
.video-sparks i:nth-child(3) { --spark-color: var(--blue); transform: rotate(-48deg); animation-delay: -0.45s; }
.video-sparks i:nth-child(4) { --spark-color: var(--red); transform: rotate(74deg); animation-delay: -0.72s; }
.video-sparks i:nth-child(5) { --spark-color: var(--violet); transform: rotate(-78deg); animation-delay: -0.95s; }

.video-caption {
  min-height: 58px;
  padding: 10px 8px 0;
}

.preview-power {
  width: min(300px, 78%);
  display: grid;
  gap: 5px;
}

.preview-power > span {
  height: 8px;
  overflow: hidden;
  background: #090c10;
  border: 1px solid rgba(174, 183, 188, 0.25);
  border-radius: 999px;
}

.preview-power > span i {
  width: 84%;
  height: 100%;
  display: block;
  background: linear-gradient(90deg, var(--blue), var(--teal), var(--gold), var(--red));
  box-shadow: 0 0 16px rgba(64, 201, 178, 0.52);
  animation: preview-power 2.6s ease-in-out infinite;
}

.preview-power small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.preview-toggle {
  width: 38px;
  min-height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 0.75rem;
  font-weight: 900;
}

.curriculum-video.is-paused *,
.curriculum-video.is-paused *::before,
.curriculum-video.is-paused *::after {
  animation-play-state: paused !important;
}

.landing-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(174, 183, 188, 0.2);
  border-bottom: 1px solid rgba(174, 183, 188, 0.2);
}

.landing-stats div {
  min-height: 126px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 24px clamp(14px, 2vw, 28px);
  border-right: 1px solid rgba(174, 183, 188, 0.16);
}

.landing-stats div:last-child {
  border-right: 0;
}

.landing-stats span {
  color: var(--gold);
  font-size: 2.1rem;
  font-weight: 900;
}

.landing-stats p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

.curriculum-showcase {
  display: grid;
  gap: clamp(28px, 4vw, 50px);
  padding: clamp(78px, 9vw, 126px) 0;
  scroll-margin-top: 22px;
}

.showcase-heading {
  max-width: 820px;
  display: grid;
  gap: 14px;
}

.showcase-heading h2 {
  max-width: 18ch;
  font-size: 4.1rem;
  line-height: 1.02;
}

.showcase-heading > p:last-child {
  max-width: 650px;
  margin: 0;
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.6;
}

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.showcase-card {
  --showcase-accent: var(--gold);
  position: relative;
  min-height: 430px;
  display: grid;
  align-content: end;
  gap: 12px;
  overflow: hidden;
  padding: clamp(22px, 3vw, 34px);
  background:
    linear-gradient(180deg, transparent 0 36%, rgba(10, 13, 17, 0.86) 72%),
    linear-gradient(145deg, color-mix(in srgb, var(--showcase-accent) 12%, transparent), transparent 58%),
    #171c22;
  border: 1px solid rgba(174, 183, 188, 0.22);
  border-bottom: 4px solid var(--showcase-accent);
  border-radius: 8px;
  transition: transform 180ms ease, border-color 180ms ease;
}

.showcase-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--showcase-accent) 65%, var(--line));
}

.showcase-card[role="button"] {
  cursor: pointer;
}

.showcase-card[role="button"]:focus-visible {
  outline: 3px solid var(--showcase-accent);
  outline-offset: 4px;
  transform: translateY(-4px);
}

.typing-showcase { --showcase-accent: var(--gold); }
.safety-showcase { --showcase-accent: var(--teal); }
.digital-showcase { --showcase-accent: var(--blue); }

.showcase-number {
  position: absolute;
  right: 22px;
  top: 16px;
  color: color-mix(in srgb, var(--showcase-accent) 18%, transparent);
  font-size: 6.4rem;
  font-weight: 1000;
  line-height: 1;
}

.showcase-visual {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 48%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.typing-visual {
  perspective: 500px;
  transform: rotate(-4deg);
}

.typing-visual kbd {
  min-width: 54px;
  min-height: 54px;
  color: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 12px 0 #0b0e12, 0 0 24px rgba(242, 189, 75, 0.22);
  transform: rotateX(18deg);
}

.shield-visual span {
  width: 112px;
  height: 132px;
  display: grid;
  place-items: center;
  color: #071210;
  background: linear-gradient(145deg, var(--teal), #8beddc);
  clip-path: polygon(50% 0, 92% 18%, 84% 72%, 50% 100%, 16% 72%, 8% 18%);
  font-size: 0.82rem;
  font-weight: 1000;
  box-shadow: 0 0 32px rgba(64, 201, 178, 0.32);
}

.pc-visual span {
  width: 150px;
  height: 104px;
  display: grid;
  place-items: center;
  color: var(--blue);
  background: #0b0f14;
  border: 3px solid var(--blue);
  border-bottom-width: 9px;
  border-radius: 8px;
  font-size: 2rem;
  font-weight: 900;
  box-shadow: 0 0 30px rgba(103, 167, 255, 0.24);
}

.pc-visual span::after {
  content: "";
  width: 58px;
  height: 11px;
  position: absolute;
  bottom: 36px;
  background: var(--blue);
  clip-path: polygon(40% 0, 60% 0, 70% 75%, 100% 75%, 100% 100%, 0 100%, 0 75%, 30% 75%);
}

.showcase-card h3 {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: 2.15rem;
  line-height: 1.05;
}

.showcase-card > p:not(.eyebrow) {
  position: relative;
  z-index: 2;
  min-height: 5.1em;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.showcase-outcome {
  position: relative;
  z-index: 2;
  width: max-content;
  max-width: 100%;
  padding-top: 11px;
  color: var(--showcase-accent);
  border-top: 1px solid color-mix(in srgb, var(--showcase-accent) 40%, transparent);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.showcase-action {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: 100%;
  color: #f6f2eb;
  font-weight: 850;
  font-size: 0.88rem;
}

.showcase-action span {
  color: var(--showcase-accent);
  font-size: 1.2rem;
  transition: transform 180ms ease;
}

.showcase-card:hover .showcase-action span,
.showcase-card:focus-visible .showcase-action span {
  transform: translateX(5px);
}

.curriculum-outline-modal {
  --outline-accent: var(--gold);
  position: fixed;
  inset: 0;
  z-index: 34;
  display: none;
  place-items: center;
  padding: clamp(10px, 2vw, 24px);
  background: rgba(4, 7, 10, 0.88);
  backdrop-filter: blur(12px);
}

.curriculum-outline-modal.is-open {
  display: grid;
}

.curriculum-outline-modal.outline-teal { --outline-accent: var(--teal); }
.curriculum-outline-modal.outline-blue { --outline-accent: var(--blue); }

.curriculum-outline-card {
  width: min(1240px, 100%);
  max-height: calc(100dvh - 32px);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: #151a20;
  border: 1px solid color-mix(in srgb, var(--outline-accent) 64%, var(--line));
  border-top: 4px solid var(--outline-accent);
  border-radius: 8px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.62);
}

.curriculum-outline-head {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px clamp(18px, 3vw, 34px);
  background: #1b2128;
  border-bottom: 1px solid var(--line);
}

.curriculum-outline-head h2 {
  margin: 3px 0 0;
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  letter-spacing: 0;
}

.curriculum-outline-head button {
  flex: 0 0 auto;
}

.curriculum-outline-content {
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.faq-modal {
  position: fixed;
  inset: 0;
  z-index: 36;
  display: none;
  place-items: center;
  padding: clamp(10px, 2vw, 24px);
  background: rgba(4, 7, 10, 0.9);
  backdrop-filter: blur(13px);
}

.faq-modal.is-open { display: grid; }

.faq-card {
  width: min(1180px, 100%);
  max-height: calc(100dvh - 32px);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  color: var(--ink);
  border: 1px solid rgba(178, 137, 255, 0.55);
  border-top: 4px solid var(--violet);
  border-radius: 9px;
  background: #151a20;
  box-shadow: 0 30px 95px rgba(0, 0, 0, 0.68), 0 0 40px rgba(178, 137, 255, 0.1);
}

.faq-head {
  min-height: 106px;
  padding: 18px clamp(18px, 3vw, 34px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 84% 0, rgba(178, 137, 255, 0.12), transparent 32%),
    #1b2128;
}

.faq-head h2 {
  margin: 3px 0 4px;
  font-size: clamp(1.55rem, 3vw, 2.5rem);
  letter-spacing: 0;
}

.faq-head p:last-child {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.faq-head > button { flex: 0 0 auto; }

.faq-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
}

.faq-topic-nav {
  min-height: 0;
  padding: 18px 14px;
  display: grid;
  align-content: start;
  gap: 7px;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: #10151a;
}

.faq-toc-label {
  padding: 4px 8px 12px;
  display: grid;
  gap: 3px;
  border-bottom: 1px solid var(--line);
}

.faq-toc-label span {
  color: var(--violet);
  font-size: 0.71rem;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.faq-toc-label small { color: var(--muted); }

.faq-topic-nav > button {
  min-height: 62px;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 1px 9px;
  color: var(--ink);
  text-align: left;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.faq-topic-nav > button > span {
  grid-row: 1 / 3;
  width: 32px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: var(--violet);
  font-size: 0.67rem;
  font-weight: 950;
  border: 1px solid rgba(178, 137, 255, 0.42);
  border-radius: 50%;
}

.faq-topic-nav > button > strong { font-size: 0.85rem; }
.faq-topic-nav > button > small { color: var(--muted); font-size: 0.67rem; }

.faq-topic-nav > button:hover,
.faq-topic-nav > button:focus-visible {
  border-color: rgba(178, 137, 255, 0.4);
  background: rgba(178, 137, 255, 0.07);
}

.faq-topic-nav > button.is-selected {
  color: #111419;
  border-color: var(--violet);
  background: var(--violet);
  box-shadow: 0 0 18px rgba(178, 137, 255, 0.16);
}

.faq-topic-nav > button.is-selected > span {
  color: #111419;
  border-color: rgba(17, 20, 25, 0.5);
}

.faq-topic-nav > button.is-selected > small { color: rgba(17, 20, 25, 0.72); }

.faq-content {
  min-width: 0;
  min-height: 0;
  padding: clamp(22px, 4vw, 42px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    linear-gradient(rgba(178, 137, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(178, 137, 255, 0.025) 1px, transparent 1px),
    #171c22;
  background-size: 28px 28px;
}

.faq-topic-head {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.faq-topic-head h3 {
  margin: 5px 0 8px;
  font-size: clamp(1.75rem, 4vw, 3rem);
  letter-spacing: -0.025em;
}

.faq-topic-head > p:last-child {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.faq-question-list {
  display: grid;
  gap: 9px;
}

.faq-question-list details {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(12, 16, 21, 0.9);
}

.faq-question-list details[open] {
  border-color: rgba(178, 137, 255, 0.58);
  box-shadow: inset 3px 0 var(--violet), 0 10px 26px rgba(0, 0, 0, 0.16);
}

.faq-question-list summary {
  min-height: 64px;
  padding: 13px 16px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 11px;
  list-style: none;
  cursor: pointer;
}

.faq-question-list summary::-webkit-details-marker { display: none; }

.faq-question-list summary > span {
  color: var(--violet);
  font-size: 0.69rem;
  font-weight: 950;
}

.faq-question-list summary > strong {
  font-size: 0.94rem;
  line-height: 1.35;
}

.faq-question-list summary > i {
  position: relative;
  width: 18px;
  height: 18px;
}

.faq-question-list summary > i::before,
.faq-question-list summary > i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  translate: -50% -50%;
  background: var(--violet);
  transition: rotate 160ms ease;
}

.faq-question-list summary > i::after { rotate: 90deg; }
.faq-question-list details[open] summary > i::after { rotate: 0deg; }

.faq-answer {
  padding: 0 20px 18px 61px;
}

.faq-answer p {
  margin: 0;
  color: #c5d0da;
  line-height: 1.65;
}

@media (max-width: 820px) {
  .faq-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .faq-topic-nav {
    padding: 10px;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .faq-topic-nav::-webkit-scrollbar { display: none; }

  .faq-toc-label {
    min-width: 148px;
    justify-content: center;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .faq-topic-nav > button {
    min-width: 170px;
  }
}

@media (max-width: 600px) {
  .faq-modal { padding: 0; }

  .faq-card {
    width: 100%;
    min-height: 100dvh;
    max-height: 100dvh;
    border-inline: 0;
    border-bottom: 0;
    border-radius: 0;
  }

  .faq-head {
    min-height: 74px;
    padding: 11px 14px;
  }

  .faq-head h2 { font-size: 1.25rem; }
  .faq-head p:last-child { display: none; }
  .faq-head > button { min-width: 66px; padding-inline: 10px; }
  .faq-topic-nav { padding: 7px; }
  .faq-toc-label { display: none; }
  .faq-topic-nav > button { min-width: 152px; min-height: 54px; }
  .faq-content { padding: 22px 14px 34px; }
  .faq-topic-head { margin-bottom: 16px; padding-bottom: 15px; }
  .faq-topic-head h3 { font-size: 1.8rem; }
  .faq-question-list summary { grid-template-columns: 28px minmax(0, 1fr) 18px; padding-inline: 12px; }
  .faq-answer { padding: 0 14px 16px 51px; }
}

.outline-hero {
  min-height: 310px;
  display: grid;
  grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.4fr);
  background: #11161b;
  border-bottom: 1px solid var(--line);
}

.outline-hero.has-wide-media {
  grid-template-columns: minmax(0, 1.35fr) minmax(420px, 1fr);
}

.outline-hero-media {
  width: 100%;
  background: #05090d;
}

.outline-hero > img {
  height: 100%;
  min-height: 310px;
  object-fit: cover;
}

.outline-hero > video {
  display: block;
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  align-self: center;
}

.outline-hero > img.is-contained {
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  align-self: center;
}

.outline-hero-copy {
  align-self: center;
  min-width: 0;
  padding: clamp(24px, 5vw, 54px);
}

.outline-hero-copy h3 {
  margin: 8px 0 13px;
  font-size: clamp(2rem, 5vw, 4.2rem);
  line-height: 0.98;
  letter-spacing: 0;
}

.outline-hero-copy > p:not(.eyebrow) {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.65;
}

.outline-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 27px;
  border-block: 1px solid rgba(174, 183, 188, 0.2);
}

.outline-metrics span {
  min-width: 0;
  padding: 15px 12px;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  font-weight: 800;
}

.outline-metrics span + span {
  border-left: 1px solid rgba(174, 183, 188, 0.2);
}

.outline-metrics strong {
  display: block;
  margin-bottom: 3px;
  color: var(--outline-accent);
  font-size: 1.45rem;
}

.outline-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.8fr);
  align-items: start;
}

.outline-lessons {
  min-width: 0;
  padding: clamp(24px, 4vw, 48px);
  border-right: 1px solid var(--line);
}

.outline-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.outline-section-head h3,
.outline-rail h3 {
  margin: 5px 0 0;
  font-size: 1.45rem;
  letter-spacing: 0;
}

.outline-section-head > span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.outline-week-list {
  border-top: 1px solid var(--line);
}

.outline-week-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.outline-week-label {
  width: 66px;
  height: 66px;
  display: grid;
  place-content: center;
  text-align: center;
  background: color-mix(in srgb, var(--outline-accent) 12%, #11161b);
  border: 1px solid color-mix(in srgb, var(--outline-accent) 48%, var(--line));
  border-radius: 6px;
}

.outline-week-label span {
  color: var(--muted);
  font-size: 0.66rem;
  text-transform: uppercase;
  font-weight: 800;
}

.outline-week-label strong {
  color: var(--outline-accent);
  font-size: 1.65rem;
}

.outline-week-lessons {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.outline-week-lessons article + article {
  padding-top: 16px;
  border-top: 1px dashed rgba(174, 183, 188, 0.24);
}

.outline-week-lessons span,
.outline-rail li span {
  color: var(--outline-accent);
  font-size: 0.7rem;
  font-weight: 850;
  text-transform: uppercase;
}

.outline-week-lessons h4 {
  margin: 4px 0 6px;
  font-size: 1.08rem;
  letter-spacing: 0;
}

.outline-week-lessons p,
.outline-week-lessons small,
.outline-rail small,
.outline-empty {
  overflow-wrap: anywhere;
}

.outline-week-lessons p {
  margin: 0 0 7px;
  color: #d7dde1;
  line-height: 1.45;
}

.outline-week-lessons small {
  color: var(--muted);
  line-height: 1.45;
}

.outline-rail {
  min-width: 0;
  background: #11161b;
}

.outline-rail > section {
  padding: clamp(24px, 3vw, 34px);
  border-bottom: 1px solid var(--line);
}

.outline-rail ul,
.outline-rail ol {
  margin: 19px 0 0;
  padding: 0;
  list-style: none;
}

.outline-rail ul li {
  position: relative;
  padding: 10px 0 10px 23px;
  color: #d7dde1;
  line-height: 1.45;
  border-top: 1px solid rgba(174, 183, 188, 0.14);
}

.outline-rail ul li::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 2px;
  width: 8px;
  height: 8px;
  background: var(--outline-accent);
  transform: rotate(45deg);
}

.outline-rail ol li {
  display: grid;
  gap: 5px;
  padding: 14px 0;
  border-top: 1px solid rgba(174, 183, 188, 0.14);
}

.outline-rail li strong {
  color: #f6f2eb;
  line-height: 1.3;
}

.outline-rail li small,
.outline-empty {
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .outline-hero,
  .outline-layout {
    grid-template-columns: 1fr;
  }

  .outline-hero > img {
    min-height: 230px;
    max-height: 300px;
  }

  .outline-lessons {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 600px) {
  .curriculum-outline-modal {
    padding: 0;
  }

  .curriculum-outline-card {
    width: 100%;
    max-height: 100dvh;
    min-height: 100dvh;
    border-inline: 0;
    border-bottom: 0;
    border-radius: 0;
  }

  .curriculum-outline-head {
    min-height: 70px;
    padding: 12px 15px;
  }

  .curriculum-outline-head h2 {
    font-size: 1.25rem;
  }

  .curriculum-outline-head button {
    min-width: 68px;
    padding-inline: 12px;
  }

  .outline-hero {
    min-height: 0;
  }

  .outline-hero > img {
    min-height: 180px;
    max-height: 205px;
  }

  .outline-hero-copy {
    padding: 25px 18px;
  }

  .outline-hero-copy h3 {
    font-size: 2.35rem;
  }

  .outline-metrics span {
    padding: 12px 7px;
    font-size: 0.63rem;
  }

  .outline-metrics strong {
    font-size: 1.2rem;
  }

  .outline-lessons,
  .outline-rail > section {
    padding: 25px 18px;
  }

  .outline-section-head {
    align-items: start;
    flex-direction: column;
    gap: 7px;
  }

  .outline-week-row {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 13px;
  }

  .outline-week-label {
    width: 50px;
    height: 55px;
  }

  .outline-week-label strong {
    font-size: 1.3rem;
  }
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr);
  align-items: end;
  gap: 30px;
  margin-bottom: 28px;
  padding-top: clamp(70px, 8vw, 110px);
  border-top: 1px solid rgba(174, 183, 188, 0.2);
  scroll-margin-top: 20px;
}

.section-heading h2 {
  max-width: 18ch;
  font-size: 3.75rem;
  line-height: 1.04;
}

.section-heading > p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

@keyframes status-pulse {
  0%, 100% { opacity: 0.5; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.12); }
}

@keyframes preview-note {
  0% { transform: translateY(-54px) scale(0.72); opacity: 0; }
  8% { opacity: 1; }
  88% { transform: translateY(calc(var(--preview-stage) - 102px)) scale(1); opacity: 1; }
  94% { transform: translateY(calc(var(--preview-stage) - 91px)) scale(1.28); opacity: 1; filter: brightness(1.8); }
  100% { transform: translateY(calc(var(--preview-stage) - 74px)) scale(0.6); opacity: 0; }
}

@keyframes preview-key {
  0%, 82%, 100% { transform: scale(1); filter: brightness(1); }
  91% { transform: scale(1.08); filter: brightness(1.9); }
}

@keyframes preview-reward {
  0%, 18% { opacity: 0; transform: translate(-50%, -50%) scale(0.72); }
  30%, 67% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  46% { transform: translate(-50%, -50%) scale(1.16); }
  78%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.88); }
}

@keyframes preview-spark {
  0% { opacity: 0; translate: 0 8px; scale: 0.5; }
  22% { opacity: 1; }
  100% { opacity: 0; translate: 0 -54px; scale: 1.1; }
}

@keyframes preview-power {
  0%, 100% { width: 68%; filter: brightness(1); }
  50% { width: 100%; filter: brightness(1.7); }
}

@keyframes preview-sheen {
  from { transform: translateX(-140%) rotate(18deg); }
  to { transform: translateX(280%) rotate(18deg); }
}

.menu-grid,
.setup-grid,
.hub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 16px);
}

.setup-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hub-grid {
  grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr);
}

.account-gate {
  padding-bottom: clamp(12px, 4vw, 48px);
}

.account-form-card {
  min-height: 360px;
  align-content: start;
  padding: clamp(22px, 3vw, 34px);
  background:
    linear-gradient(145deg, rgba(242, 189, 75, 0.065), transparent 48%),
    #171c22;
}

.account-form-card:nth-child(2) {
  background:
    linear-gradient(145deg, rgba(64, 201, 178, 0.065), transparent 48%),
    #171c22;
  border-bottom: 4px solid var(--teal);
}

.account-form-card:first-child {
  border-bottom: 4px solid var(--gold);
}

.account-form-card h2 {
  margin-bottom: 10px;
  font-size: 1.8rem;
}

.account-form-card input {
  min-height: 48px;
}

.account-form-card button {
  min-height: 48px;
  margin-top: 3px;
}

.main-menu.student-mode .landing-hero,
.main-menu.student-mode .landing-stats,
.main-menu.student-mode .curriculum-showcase,
.main-menu.student-mode .account-gate,
.main-menu.parent-mode .landing-hero,
.main-menu.parent-mode .landing-stats,
.main-menu.parent-mode .curriculum-showcase,
.main-menu.parent-mode .account-gate {
  display: none;
}

.main-menu.student-mode .student-hub,
.main-menu.parent-mode .parent-hub {
  padding: clamp(42px, 6vw, 84px) 0 20px;
}

.main-menu.student-mode .landing-links [data-public-nav],
.main-menu.parent-mode .landing-links [data-public-nav],
.main-menu.student-mode .admin-login-link,
.main-menu.parent-mode .admin-login-link {
  display: none;
}

.parent-hub {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
}

.parent-command-head,
.parent-section-head,
.billing-head,
.payment-history-head,
.parent-actions,
.student-card-top,
.student-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.parent-command-head {
  align-items: flex-start;
  padding: 24px;
  background:
    linear-gradient(110deg, rgba(242, 189, 75, 0.09), transparent 42%),
    var(--panel-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 8px;
}

.parent-command-head h2 {
  margin-bottom: 6px;
  font-size: 2rem;
}

.parent-command-head p:last-child,
.parent-section-head > span {
  margin: 0;
  color: var(--muted);
}

.parent-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.parent-summary-tile {
  min-height: 112px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 18px;
  background: #14191f;
  border: 1px solid var(--line);
  border-bottom: 3px solid var(--summary-accent, var(--gold));
  border-radius: 8px;
}

.parent-summary-tile span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.parent-summary-tile strong {
  font-size: 1.75rem;
}

.parent-summary-tile small {
  color: var(--muted);
  line-height: 1.35;
}

.parent-student-section,
.parent-monitor,
.billing-panel {
  padding: 22px;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.student-paywall {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 18px 0;
  padding: 22px;
  background: linear-gradient(135deg, rgba(242, 189, 75, 0.13), rgba(12, 15, 20, 0.96));
  border: 1px solid rgba(242, 189, 75, 0.55);
  border-left: 5px solid var(--gold);
  border-radius: 8px;
}

.student-paywall.is-hidden { display: none; }
.student-paywall h2, .student-paywall p { margin: 0; }
.student-paywall div { display: grid; gap: 7px; }
.student-paywall div > p:last-child { color: var(--muted); line-height: 1.5; }
.student-paywall > strong { max-width: 240px; color: var(--gold); text-align: right; }
.class-card.is-paywall-locked { opacity: 0.48; cursor: not-allowed; }

.parent-section-head {
  align-items: flex-end;
  margin-bottom: 18px;
}

.parent-section-head h2 {
  font-size: 1.45rem;
}

.parent-student-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.parent-student-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  background:
    linear-gradient(145deg, rgba(64, 201, 178, 0.06), transparent 52%),
    #11161b;
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.parent-student-card.is-selected {
  border-color: var(--gold);
  box-shadow: 0 0 24px rgba(242, 189, 75, 0.12);
}

.parent-student-card:hover {
  transform: translateY(-2px);
  border-color: var(--teal);
}

.student-card-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.student-card-avatar {
  width: 48px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: #0c1115;
  background: linear-gradient(135deg, var(--gold), var(--teal));
  border-radius: 7px;
  font-size: 0.72rem;
  font-weight: 1000;
}

.student-card-identity strong,
.student-card-identity small {
  display: block;
}

.student-card-identity strong {
  overflow-wrap: anywhere;
  font-size: 1.08rem;
}

.student-card-identity small,
.student-last-active {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.76rem;
}

.student-health {
  color: var(--teal);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.student-mini-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.student-mini-stats div {
  min-width: 0;
  padding: 9px;
  background: #0c1014;
  border: 1px solid rgba(174, 183, 188, 0.16);
}

.student-mini-stats span,
.student-mini-stats strong {
  display: block;
}

.student-mini-stats span {
  color: var(--muted);
  font-size: 0.62rem;
  text-transform: uppercase;
}

.student-mini-stats strong {
  margin-top: 3px;
  overflow-wrap: anywhere;
  font-size: 0.92rem;
}

.student-path-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.student-path-strip span {
  height: 5px;
  overflow: hidden;
  background: #090d10;
  border-radius: 999px;
}

.student-path-strip i {
  display: block;
  width: var(--path-progress, 0%);
  height: 100%;
  background: var(--path-color, var(--gold));
  box-shadow: 0 0 8px var(--path-color, var(--gold));
}

.student-card-footer button {
  min-height: 36px;
  margin-left: auto;
}

.parent-student-music {
  display: grid;
  grid-template-columns: auto minmax(140px, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  color: var(--ink);
  background: rgba(52, 133, 255, 0.08);
  border: 1px solid rgba(52, 133, 255, 0.28);
  border-radius: 7px;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.parent-student-music select {
  min-height: 38px;
  padding: 0 10px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  text-transform: none;
}

.parent-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.parent-monitor {
  min-width: 0;
}

.parent-typing-history { min-width: 0; border: 1px solid var(--line); border-radius: 6px; background: #0d1217; }
.parent-typing-history > summary { display: flex; align-items: center; gap: 12px; padding: 14px; cursor: pointer; font-size: .84rem; font-weight: 900; }
.parent-typing-history > summary::before { content: "▸"; color: var(--gold); }
.parent-typing-history[open] > summary::before { content: "▾"; }
.parent-typing-history > summary span { margin-left: auto; color: var(--muted); font-size: .72rem; text-align: right; }
.parent-typing-history > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }

.monitor-head {
  align-items: center;
}

.student-reset-control {
  max-width: 320px;
  display: grid;
  justify-items: end;
  gap: 7px;
  text-align: right;
}

.student-reset-control small {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.35;
}

.student-reset-control button {
  min-height: 42px;
}

.student-reset-control button.is-purchase {
  color: #0b1014;
  background: var(--gold);
  border-color: var(--gold);
}

.parent-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}

.parent-metric-grid div {
  min-width: 0;
  padding: 13px;
  background: #0d1116;
  border: 1px solid rgba(174, 183, 188, 0.18);
}

.parent-metric-grid span,
.parent-metric-grid strong {
  display: block;
}

.parent-metric-grid span {
  color: var(--muted);
  font-size: 0.68rem;
  text-transform: uppercase;
}

.parent-metric-grid strong {
  margin-top: 4px;
  overflow-wrap: anywhere;
  font-size: 1.15rem;
}

.skill-progress-list {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
}

.skill-progress-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 12px;
}

.skill-progress-row > span {
  font-size: 0.84rem;
  font-weight: 800;
}

.skill-progress-track {
  height: 9px;
  overflow: hidden;
  background: #090d10;
  border: 1px solid rgba(174, 183, 188, 0.2);
  border-radius: 999px;
}

.skill-progress-track i {
  display: block;
  width: var(--skill-progress, 0%);
  height: 100%;
  background: var(--skill-color, var(--gold));
  box-shadow: 0 0 11px color-mix(in srgb, var(--skill-color, var(--gold)) 60%, transparent);
}

.skill-progress-row strong {
  color: var(--muted);
  font-size: 0.75rem;
  text-align: right;
}

.trend-panel {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
  padding: 14px;
  background: #0d1116;
  border: 1px solid rgba(174, 183, 188, 0.18);
}

.trend-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.trend-panel-head h3 {
  margin: 0;
  font-size: 0.95rem;
}

.trend-panel-head span {
  color: var(--muted);
  font-size: 0.72rem;
}

.wpm-trend {
  height: 112px;
  display: flex;
  align-items: end;
  gap: 7px;
  padding-top: 8px;
  border-bottom: 1px solid rgba(174, 183, 188, 0.25);
}

.wpm-trend span {
  position: relative;
  min-width: 8px;
  flex: 1;
  height: max(8px, var(--trend-height, 8%));
  background: linear-gradient(180deg, var(--teal), var(--blue));
  box-shadow: 0 0 10px rgba(64, 201, 178, 0.25);
}

.wpm-trend span::after {
  content: attr(data-wpm);
  position: absolute;
  left: 50%;
  top: -18px;
  translate: -50% 0;
  color: var(--muted);
  font-size: 0.6rem;
}

.parent-activity-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(174, 183, 188, 0.18);
}

.parent-activity-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.parent-activity-table th {
  position: static;
  background: #11161b;
  color: var(--muted);
  font-size: 0.66rem;
  text-transform: uppercase;
}

.parent-curriculum-records {
  display: grid;
  gap: 14px;
  margin: 0 0 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(174, 183, 188, 0.18);
}

.parent-records-head,
.parent-records-head > div,
.parent-curriculum-records details {
  min-width: 0;
}

.parent-records-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}

.parent-records-head h3 {
  margin: 2px 0 0;
  font-size: 1.05rem;
}

.parent-records-head > span,
.parent-curriculum-records summary span {
  color: var(--muted);
  font-size: 0.72rem;
}

.parent-certificate-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.parent-certificate-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  background: #0d1217;
  border: 1px solid rgba(174, 183, 188, 0.18);
  border-radius: 6px;
}

.parent-certificate-card.is-earned {
  border-color: rgba(137, 207, 111, 0.65);
  box-shadow: inset 0 3px var(--green);
}

.parent-certificate-card span {
  color: var(--gold);
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
}

.parent-certificate-card strong,
.parent-certificate-card small {
  overflow-wrap: anywhere;
}

.parent-certificate-card strong {
  font-size: 0.82rem;
}

.parent-certificate-card small {
  color: var(--muted);
  line-height: 1.35;
}

.parent-curriculum-records details {
  background: #0d1217;
  border: 1px solid rgba(174, 183, 188, 0.18);
  border-radius: 6px;
}

.parent-curriculum-records summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  font-size: 0.84rem;
  font-weight: 900;
  cursor: pointer;
}

.parent-curriculum-records summary::before { content: "▸"; color: var(--gold); flex: 0 0 auto; }
.parent-curriculum-records details[open] > summary::before { content: "▾"; }
.parent-curriculum-records summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
.parent-curriculum-records summary > :first-child { flex: 1; min-width: 0; }
.parent-week-review-group > summary { background: #1a252d; color: var(--gold); }
.parent-week-review-group > summary small { color: var(--muted); text-align: right; }

.parent-record-table-wrap {
  max-height: 460px;
  overflow: auto;
  border-top: 1px solid rgba(174, 183, 188, 0.18);
}

.parent-record-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.72rem;
}

.parent-record-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #151b21;
  color: var(--muted);
  font-size: 0.62rem;
  text-transform: uppercase;
}

.parent-record-table th:nth-child(2) { width: 22%; }

.parent-record-table th,
.parent-record-table td {
  padding: 10px;
  border-bottom: 1px solid rgba(174, 183, 188, 0.12);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.parent-record-table td strong,
.parent-record-table td small {
  display: block;
}

.parent-record-table td small {
  margin-top: 4px;
  color: var(--muted);
}

.parent-evidence-cell {
  min-width: 0;
  max-width: 340px;
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.parent-task-status,
.parent-track-dot {
  display: inline-block;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 900;
}

.parent-task-status {
  color: var(--muted);
  background: #151b21;
  border: 1px solid rgba(174, 183, 188, 0.2);
}

.parent-task-status.is-complete {
  color: #07120f;
  background: var(--green);
  border-color: var(--green);
}

.parent-track-dot.track-typing { color: var(--gold); }
.parent-track-dot.track-safety { color: var(--teal); }
.parent-track-dot.track-digital { color: var(--blue); }

.parent-report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.parent-lesson-review-list,
.parent-topic-review-list {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.parent-lesson-review-group {
  overflow: hidden;
}

.parent-lesson-review-group > summary {
  background: #12181e;
}

.parent-lesson-review-group > summary small {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  color: var(--muted);
  text-align: right;
}

.parent-lesson-review-group.has-awaiting-approval {
  border-color: rgba(255, 210, 69, 0.92);
  box-shadow: 0 0 0 1px rgba(255, 210, 69, 0.24), 0 0 20px rgba(255, 191, 40, 0.2);
}

.parent-lesson-review-group.has-awaiting-approval > summary {
  background: linear-gradient(90deg, rgba(255, 193, 44, 0.24), rgba(18, 24, 30, 0.98) 58%);
  box-shadow: inset 5px 0 #ffd245;
}

.parent-lesson-review-group.has-awaiting-approval > summary > span {
  color: #fff3bd;
}

.parent-lesson-review-group.has-awaiting-approval > summary small b {
  display: inline-block;
  padding: 4px 7px;
  color: #171006;
  background: #ffd245;
  border: 1px solid #fff0a1;
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(255, 210, 69, 0.48);
  font-size: 0.63rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.parent-topic-review {
  overflow: hidden;
  background: #090e13;
  border: 1px solid rgba(174, 183, 188, 0.2);
  border-radius: 6px;
}

.parent-topic-review.is-approved {
  border-color: rgba(137, 207, 111, 0.72);
  box-shadow: inset 3px 0 var(--green);
}

.parent-topic-review.is-awaiting-approval {
  border-color: rgba(255, 210, 69, 0.92);
  box-shadow: inset 4px 0 #ffd245, 0 0 18px rgba(255, 191, 40, 0.18);
}

.parent-topic-review.is-awaiting-approval > header {
  background: linear-gradient(90deg, rgba(255, 193, 44, 0.2), #10161c 66%);
}

.parent-topic-review.is-awaiting-approval > header span,
.parent-topic-review.is-awaiting-approval > header > strong {
  color: #ffe371;
}

.parent-topic-review > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  background: #10161c;
  border-bottom: 1px solid rgba(174, 183, 188, 0.14);
}

.parent-topic-review > header span {
  color: var(--blue);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.parent-topic-review > header h4 {
  margin: 3px 0 0;
  font-size: 0.92rem;
}

.parent-topic-review > header > strong {
  color: var(--muted);
  font-size: 0.7rem;
  text-align: right;
}

.parent-topic-review.is-approved > header > strong {
  color: var(--green);
}

.parent-review-answers {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.parent-review-answers article {
  min-width: 0;
  padding: 11px;
  background: #10161c;
  border: 1px solid rgba(174, 183, 188, 0.14);
  border-radius: 5px;
}

.parent-review-answers article > span {
  display: block;
  margin-bottom: 5px;
  color: var(--blue);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.parent-review-answers article > strong,
.parent-review-answers article > p {
  display: block;
  overflow-wrap: anywhere;
}

.parent-review-answers article > strong {
  font-size: 0.78rem;
  line-height: 1.4;
}

.parent-review-answers article > p,
.parent-review-answers details p {
  margin: 7px 0 0;
  color: #c4d0da;
  font-size: 0.76rem;
  line-height: 1.55;
}

.parent-review-answers details {
  margin-top: 7px;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.parent-review-answers details summary {
  justify-content: flex-start;
  padding: 5px 0;
  color: var(--muted);
  font-size: 0.62rem;
}

.parent-review-empty {
  margin: 0;
  padding: 18px;
  color: var(--muted);
  background: #10161c;
  border: 1px dashed rgba(174, 183, 188, 0.24);
  border-radius: 5px;
  text-align: center;
}

.parent-review-controls {
  display: grid;
  grid-template-columns: minmax(100px, 140px) minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border-top: 1px solid rgba(174, 183, 188, 0.14);
}

.parent-review-controls label,
.parent-lesson-certification label {
  display: grid;
  gap: 5px;
}

.parent-review-controls label span,
.parent-lesson-certification label span {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.parent-review-controls input,
.parent-review-controls textarea,
.parent-lesson-certification input {
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  color: var(--ink);
  background: #070c10;
  border: 1px solid rgba(174, 183, 188, 0.25);
  border-radius: 4px;
  font: inherit;
}

.parent-review-controls textarea {
  resize: vertical;
}

.parent-review-controls input:focus,
.parent-review-controls textarea:focus,
.parent-lesson-certification input:focus {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

.parent-topic-review > footer {
  padding: 8px 12px;
  color: var(--green);
  background: rgba(137, 207, 111, 0.06);
  border-top: 1px solid rgba(137, 207, 111, 0.28);
  font-size: 0.66rem;
  font-weight: 800;
}

.parent-lesson-certification {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 280px) auto;
  gap: 12px;
  align-items: end;
  margin: 0 12px 12px;
  padding: 12px;
  background: #10161c;
  border: 1px solid rgba(174, 183, 188, 0.2);
  border-radius: 6px;
}

.parent-lesson-certification > div {
  display: grid;
  gap: 4px;
}

.parent-lesson-certification small {
  color: var(--muted);
  line-height: 1.4;
}

.parent-lesson-certification.is-certified {
  border-color: rgba(137, 207, 111, 0.72);
  box-shadow: inset 3px 0 var(--green);
}

.parent-empty-state {
  min-height: 250px;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.billing-panel {
  display: grid;
  gap: 16px;
  border-top: 3px solid var(--teal);
}

.billing-status {
  padding: 5px 8px;
  color: var(--gold);
  background: rgba(242, 189, 75, 0.08);
  border: 1px solid rgba(242, 189, 75, 0.35);
  border-radius: 5px;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.billing-status.is-current {
  color: var(--teal);
  background: rgba(64, 201, 178, 0.08);
  border-color: rgba(64, 201, 178, 0.38);
}

.billing-plan {
  display: grid;
  gap: 4px;
  padding: 16px;
  background: #0d1116;
  border: 1px solid rgba(174, 183, 188, 0.18);
}

.billing-plan span {
  color: var(--muted);
  font-size: 0.76rem;
}

.billing-plan strong {
  font-size: 2rem;
}

.billing-plan small {
  color: var(--muted);
}

.soundtrack-offer {
  display: grid;
  gap: 10px;
  padding: 16px;
  background:
    radial-gradient(circle at 100% 0, rgba(178, 137, 255, 0.2), transparent 40%),
    linear-gradient(145deg, rgba(52, 133, 255, 0.1), transparent 58%),
    #0d1116;
  border: 1px solid rgba(178, 137, 255, 0.48);
  border-top: 3px solid var(--violet);
  border-radius: 8px;
}

.soundtrack-offer.is-owned {
  border-color: rgba(64, 201, 178, 0.58);
  border-top-color: var(--teal);
  box-shadow: 0 0 24px rgba(64, 201, 178, 0.1);
}

.soundtrack-offer h3 {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.15;
}

.soundtrack-offer > p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.soundtrack-offer-action {
  display: flex;
  align-items: center;
  gap: 10px;
}

.soundtrack-offer-action strong {
  flex: 0 0 auto;
  color: var(--gold);
  font-size: 1.55rem;
}

.soundtrack-offer.is-owned .soundtrack-offer-action strong {
  color: var(--teal);
}

.soundtrack-offer-action button {
  flex: 1 1 auto;
  min-height: 42px;
  padding-inline: 12px;
}

.soundtrack-offer > small {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.4;
}

.student-reset-offer {
  display: grid;
  gap: 10px;
  padding: 16px;
  background:
    radial-gradient(circle at 100% 0, rgba(242, 189, 75, 0.18), transparent 42%),
    linear-gradient(145deg, rgba(64, 201, 178, 0.07), transparent 58%),
    #0d1116;
  border: 1px solid rgba(242, 189, 75, 0.48);
  border-top: 3px solid var(--gold);
  border-radius: 8px;
}

.student-reset-offer h3 {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.15;
}

.student-reset-offer > p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.student-reset-purchase-field {
  display: grid;
  gap: 5px;
}

.student-reset-purchase-field span,
.student-reset-offer > small {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.4;
}

.student-reset-purchase-field select {
  width: 100%;
  min-height: 42px;
  padding: 0 10px;
  color: var(--ink);
  background: #171d23;
  border: 1px solid var(--line);
  border-radius: 5px;
}

.student-reset-offer-action {
  display: flex;
  align-items: center;
  gap: 10px;
}

.student-reset-offer-action strong {
  flex: 0 0 auto;
  color: var(--gold);
  font-size: 1.55rem;
}

.student-reset-offer-action button {
  flex: 1 1 auto;
  min-height: 42px;
  padding-inline: 12px;
}

.student-reset-offer-action button:disabled {
  opacity: 0.68;
  cursor: not-allowed;
}

.payment-history {
  display: grid;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}

.payment-history-head h3 {
  margin: 0;
  font-size: 0.9rem;
}

.payment-history-head span {
  color: var(--muted);
  font-size: 0.7rem;
}

.payment-history-list {
  display: grid;
  gap: 7px;
}

.payment-history-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  padding: 10px;
  background: #0d1116;
  border-left: 2px solid var(--teal);
}

.payment-history-item strong,
.payment-history-item small {
  overflow-wrap: anywhere;
}

.payment-history-item small {
  color: var(--muted);
  font-size: 0.68rem;
}

.payment-history-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.admin-payment-history {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.admin-payment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  background: #0d1116;
  border-left: 3px solid var(--gold);
}

.admin-payment-row > div { display: grid; gap: 3px; }
.admin-payment-row span, .admin-payment-row small { color: var(--muted); overflow-wrap: anywhere; }
.admin-payment-row button { min-width: 130px; }

.menu-card,
.class-card {
  position: relative;
  overflow: hidden;
  min-height: 190px;
  padding: clamp(14px, 2vw, 20px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
    var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.menu-card::before,
.class-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(110deg, transparent 0 34%, rgba(255, 255, 255, 0.08) 48%, transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent);
  transform: translateX(-120%);
  transition: transform 520ms ease;
}

.menu-card:hover::before,
.class-card:hover::before,
.class-card:focus-visible::before {
  transform: translateX(120%);
}

.account-gate,
.student-hub {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(10px, 1.4vw, 16px);
}

.account-tabs {
  display: flex;
  gap: 8px;
}

.account-tabs button {
  flex: 1;
}

.account-tabs button.is-selected,
.pet-option.is-selected {
  color: #17120a;
  background: var(--gold);
  border-color: var(--gold);
  font-weight: 900;
}

.account-view {
  display: none;
}

.account-view.is-active {
  display: block;
}

.account-form-card,
.login-card {
  display: grid;
  gap: 9px;
  min-height: 0;
}

.account-form-card input,
.login-card input {
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--ink);
  background: #101317;
}

.account-form-card p,
.login-card p,
.pet-card p,
.student-progress-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.login-card {
  min-height: 0;
  padding: clamp(12px, 1.5vw, 16px);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.login-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}

.pet-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.pet-option {
  min-height: 128px;
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 10px;
}

.pet-option small {
  color: inherit;
  opacity: 0.76;
  text-align: center;
  line-height: 1.35;
}

.pet-avatar,
.pet-large {
  display: grid;
  place-items: center;
  color: #101317;
  background: linear-gradient(135deg, var(--gold), var(--teal));
  border-radius: 8px;
  font-weight: 900;
  box-shadow: 0 0 24px rgba(64, 201, 178, 0.28);
}

.pet-avatar {
  width: 44px;
  height: 34px;
  font-size: 0.72rem;
}

.pet-large {
  width: 104px;
  height: 84px;
  margin: 8px 0 10px;
  font-size: 1.55rem;
  animation: pet-bob 2.8s ease-in-out infinite;
}

.student-head,
.progress-card-head,
.student-actions {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.student-head {
  padding: clamp(14px, 2vw, 20px);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.student-actions {
  align-items: center;
}

.student-music-card {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(420px, 1.45fr);
  gap: 18px 26px;
  margin-top: 14px;
  padding: clamp(18px, 3vw, 28px);
  background:
    radial-gradient(circle at 92% 8%, rgba(52, 133, 255, 0.2), transparent 34%),
    linear-gradient(145deg, rgba(64, 201, 178, 0.1), transparent 52%),
    #11171d;
  border: 2px solid rgba(64, 201, 178, 0.62);
  border-radius: 8px;
  box-shadow: 0 0 34px rgba(64, 201, 178, 0.1);
}

.student-music-intro h2 {
  margin: 5px 0 8px;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.student-music-intro > p:last-child {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.student-genre-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.student-genre-options button {
  min-height: 92px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 12px 10px;
  color: var(--ink);
  text-align: left;
  background: rgba(8, 13, 18, 0.86);
  border: 1px solid var(--line);
  border-top: 3px solid var(--genre-accent, var(--teal));
  border-radius: 7px;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.student-genre-options button:nth-child(1) { --genre-accent: #ff5ea8; }
.student-genre-options button:nth-child(2) { --genre-accent: var(--gold); }
.student-genre-options button:nth-child(3) { --genre-accent: var(--blue); }
.student-genre-options button:nth-child(4) { --genre-accent: var(--violet); }

.student-genre-options button:hover {
  transform: translateY(-2px);
  border-color: var(--genre-accent);
}

.student-genre-options button.is-selected {
  background: color-mix(in srgb, var(--genre-accent) 18%, #0b1015);
  border-color: var(--genre-accent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--genre-accent) 30%, transparent);
}

.student-genre-options strong,
.student-genre-options span {
  display: block;
}

.student-genre-options strong {
  font-size: 1rem;
}

.student-genre-options span {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.3;
}

.student-music-footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.student-music-footer > strong {
  color: var(--muted);
  font-size: 0.78rem;
}

.student-music-footer > button {
  min-width: 130px;
}

.student-music-footer > button.is-muted {
  color: #0c1115;
  background: var(--gold);
  border-color: var(--gold);
}

.pet-card {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 8px;
}

.student-progress-card {
  min-height: 0;
}

.achievement-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.achievement-section {
  padding: 10px;
  background: #101317;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.achievement-section h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.badge-list {
  display: grid;
  gap: 6px;
}

.badge-pill {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  color: var(--muted);
  background: #151a20;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.badge-pill:hover,
.badge-pill:focus-visible {
  transform: translateY(-1px);
  border-color: var(--achievement-accent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--achievement-accent) 26%, transparent);
  outline: none;
}

.badge-pill.is-earned {
  color: var(--ink);
  border-color: var(--achievement-accent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--achievement-accent) 20%, transparent);
}

.badge-pill-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.badge-pill-copy strong {
  color: var(--ink);
  font-size: 0.84rem;
}

.badge-pill-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge-pill-status {
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.badge-pill.is-earned .badge-pill-status {
  color: var(--achievement-accent);
}

.achievement-emblem {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  color: #061014;
  background: linear-gradient(145deg, #fff 0 8%, var(--achievement-accent) 34%, color-mix(in srgb, var(--achievement-accent) 55%, #071014));
  border: 2px solid color-mix(in srgb, var(--achievement-accent) 72%, white);
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px rgba(5, 11, 16, 0.3), 0 0 16px color-mix(in srgb, var(--achievement-accent) 35%, transparent);
}

.achievement-emblem::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 50%;
}

.achievement-emblem::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 18%;
  z-index: -2;
  width: 64%;
  height: 18px;
  background: var(--achievement-accent);
  clip-path: polygon(0 0, 45% 0, 50% 100%, 55% 0, 100% 0, 82% 100%, 50% 72%, 18% 100%);
}

.achievement-emblem > span {
  max-width: 82%;
  overflow: hidden;
  font-family: "Arial Black", Impact, sans-serif;
  font-weight: 1000;
  letter-spacing: -0.07em;
  line-height: 1;
  text-align: center;
  text-overflow: clip;
}

.achievement-emblem-small {
  width: 38px;
  height: 38px;
}

.achievement-emblem-small > span {
  font-size: 0.62rem;
}

.badge-pill.is-locked .achievement-emblem {
  filter: grayscale(0.9);
  opacity: 0.68;
}

.class-menu-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pet-modal,
.achievement-modal,
.login-modal,
.billing-modal,
.email-recovery-modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.68);
}

.pet-modal.is-open,
.achievement-modal.is-open,
.login-modal.is-open,
.billing-modal.is-open,
.email-recovery-modal.is-open {
  display: grid;
}

.achievement-modal {
  z-index: 30;
}

.achievement-detail-card {
  position: relative;
  width: min(520px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 36px clamp(22px, 5vw, 44px) 30px;
  text-align: center;
  background: radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--achievement-accent) 14%, transparent), transparent 34%), var(--panel);
  border: 1px solid color-mix(in srgb, var(--achievement-accent) 65%, var(--line));
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.72), 0 0 34px color-mix(in srgb, var(--achievement-accent) 20%, transparent);
}

.achievement-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  min-height: 34px;
  padding: 6px 11px;
  color: var(--ink);
  background: #11171d;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.achievement-modal-close:hover,
.achievement-modal-close:focus-visible {
  border-color: var(--achievement-accent);
  outline: none;
}

.achievement-detail-status,
.achievement-detail-track,
.achievement-detail-reward,
.achievement-detail-explanation {
  margin: 0;
}

.achievement-detail-status {
  color: var(--achievement-accent);
  font-size: 0.76rem;
  font-weight: 1000;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.achievement-modal.is-locked .achievement-detail-status {
  color: var(--muted);
}

.achievement-emblem-large {
  width: 142px;
  height: 142px;
  margin: 12px 0 8px;
}

.achievement-emblem-large > span {
  font-size: clamp(1.45rem, 7vw, 2.4rem);
}

.achievement-modal.is-locked .achievement-emblem-large {
  filter: grayscale(0.86);
  opacity: 0.72;
}

.achievement-detail-track {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.achievement-detail-card h2 {
  margin: 0;
  font-size: clamp(1.8rem, 5vw, 2.65rem);
}

.achievement-detail-reward {
  color: var(--achievement-accent);
  font-weight: 1000;
}

.achievement-detail-explanation {
  max-width: 42ch;
  color: var(--muted);
  line-height: 1.6;
}

.achievement-detail-meta {
  width: 100%;
  display: grid;
  gap: 5px;
  margin-top: 8px;
  padding: 13px;
  background: #11171d;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.achievement-detail-meta strong {
  color: var(--ink);
}

.achievement-detail-meta span {
  color: var(--muted);
  font-size: 0.82rem;
}

.pet-menu-card {
  width: min(1080px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  display: grid;
  gap: 16px;
  padding: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

/* Custom student companions */
.pet-large {
  width: min(170px, 100%);
  height: 145px;
  margin: 2px 0 4px;
  color: inherit;
  background: transparent;
  box-shadow: none;
  animation: none;
}

.student-card-avatar {
  overflow: visible;
  color: inherit;
  background: transparent;
}

.pet-character {
  position: relative;
  width: 112px;
  height: 104px;
  flex: 0 0 auto;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.34));
  animation: pet-companion-float 3.2s ease-in-out infinite;
  transform-origin: center bottom;
}

.pet-character-model {
  isolation: isolate;
  overflow: visible;
}

.pet-character-model .pet-model-image {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  display: block;
  object-fit: contain;
  object-position: center center;
  filter: var(--pet-model-filter, none);
}

.pet-character .pet-model-accessory-image,
.pet-character .pet-accessory {
  display: none !important;
}

/* Briefly keep a retired canvas renderer correctly sized if an older script is
   restored from a browser/proxy cache. character-renderer-guard.js replaces it
   with the complete standalone frame as soon as it enters the page. */
.pet-character-model .pet-model-canvas {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.pet-character-model .pet-model-accessory {
  display: none !important;
}

.pet-size-large { width: 142px; height: 132px; }
.pet-size-small { width: 70px; height: 64px; }
.pet-size-game { width: 54px; height: 50px; }
.pet-size-mini { width: 58px; height: 54px; }
.pet-size-micro { width: 46px; height: 42px; }

.pet-body,
.pet-antenna,
.pet-ear,
.pet-arm,
.pet-foot,
.pet-stand,
.pet-base {
  position: absolute;
  display: block;
}

.pet-body {
  z-index: 3;
  left: 17%;
  top: 23%;
  width: 66%;
  height: 58%;
  overflow: hidden;
  background: linear-gradient(145deg, color-mix(in srgb, var(--pet-primary) 84%, white), var(--pet-primary) 55%, var(--pet-dark));
  border: max(2px, 0.025em) solid color-mix(in srgb, var(--pet-primary) 75%, white);
  border-radius: 18% 18% 25% 25%;
  box-shadow: inset 0 -10px 16px rgba(0, 0, 0, 0.2), 0 0 18px color-mix(in srgb, var(--pet-primary) 42%, transparent);
}

.pet-shine {
  position: absolute;
  inset: 8% 48% 58% 10%;
  background: rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  rotate: -18deg;
}

.pet-face {
  position: absolute;
  inset: 0;
  color: #0a1115;
}

.pet-eye {
  position: absolute;
  top: 36%;
  width: 10%;
  height: 16%;
  background: currentColor;
  border-radius: 999px;
  animation: pet-companion-blink 5.2s infinite;
  transform-origin: center;
}

.pet-eye-left { left: 28%; }
.pet-eye-right { right: 28%; }

.pet-mouth {
  position: absolute;
  left: 37%;
  top: 59%;
  width: 26%;
  height: 13%;
  border-bottom: max(2px, 0.025em) solid currentColor;
  border-radius: 0 0 999px 999px;
}

.pet-face-excited .pet-eye {
  height: 20%;
  border-radius: 50%;
}

.pet-face-excited .pet-mouth {
  left: 41%;
  width: 18%;
  height: 18%;
  background: currentColor;
  border: 0;
  border-radius: 50%;
}

.pet-face-curious .pet-eye-left { height: 20%; }
.pet-face-curious .pet-eye-right { top: 39%; height: 11%; }
.pet-face-curious .pet-mouth { left: 45%; width: 17%; rotate: -10deg; }

.pet-face-focused .pet-eye-left { rotate: 18deg; border-radius: 1px; }
.pet-face-focused .pet-eye-right { rotate: -18deg; border-radius: 1px; }
.pet-face-focused .pet-mouth { left: 41%; width: 18%; height: 1px; border-radius: 0; }

.pet-antenna {
  z-index: 2;
  left: 48%;
  top: 5%;
  width: 4%;
  height: 23%;
  background: var(--pet-dark);
  border-radius: 999px;
  transform-origin: center bottom;
  animation: pet-antenna-sway 2.4s ease-in-out infinite;
}

.pet-antenna i {
  position: absolute;
  left: 50%;
  top: -18%;
  width: 280%;
  aspect-ratio: 1;
  translate: -50% 0;
  background: var(--pet-accent);
  border: 2px solid color-mix(in srgb, var(--pet-accent) 55%, white);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--pet-accent);
}

.pet-ear {
  z-index: 2;
  top: 40%;
  width: 13%;
  height: 25%;
  background: var(--pet-accent);
  border: 2px solid var(--pet-dark);
  border-radius: 45%;
}

.pet-ear-left { left: 8%; rotate: -8deg; }
.pet-ear-right { right: 8%; rotate: 8deg; }

.pet-arm {
  z-index: 2;
  top: 55%;
  width: 8%;
  height: 30%;
  background: var(--pet-primary);
  border: 2px solid var(--pet-dark);
  border-radius: 999px;
  transform-origin: center top;
}

.pet-arm-left { left: 9%; rotate: 16deg; }
.pet-arm-right { right: 9%; rotate: -16deg; animation: pet-small-wave 4.8s ease-in-out infinite; }

.pet-foot {
  z-index: 2;
  bottom: 5%;
  width: 24%;
  height: 12%;
  background: var(--pet-dark);
  border-radius: 999px 999px 35% 35%;
}

.pet-foot-left { left: 20%; }
.pet-foot-right { right: 20%; }

.pet-stand,
.pet-base {
  display: none;
}

.pet-type-alien .pet-body {
  left: 10%;
  top: 17%;
  width: 80%;
  height: 70%;
  border-radius: 49% 51% 44% 46%;
  clip-path: polygon(50% 0, 58% 5%, 68% 2%, 75% 10%, 86% 11%, 88% 23%, 98% 30%, 92% 42%, 100% 52%, 91% 61%, 94% 74%, 82% 79%, 77% 91%, 64% 90%, 55% 100%, 45% 94%, 34% 100%, 26% 89%, 13% 86%, 12% 73%, 2% 65%, 8% 53%, 0 43%, 10% 34%, 8% 21%, 21% 17%, 28% 6%, 40% 8%);
}

.pet-type-alien .pet-antenna { left: 42%; top: 2%; rotate: -14deg; }
.pet-type-alien .pet-ear { display: none; }
.pet-type-alien .pet-arm { top: 51%; }
.pet-type-alien .pet-foot { bottom: 1%; background: var(--pet-primary); }

.pet-type-pc .pet-body {
  left: 7%;
  top: 12%;
  width: 86%;
  height: 61%;
  background: #0b1116;
  border: max(4px, 0.045em) solid var(--pet-primary);
  border-bottom-width: max(7px, 0.07em);
  border-radius: 9%;
  box-shadow: inset 0 0 20px color-mix(in srgb, var(--pet-accent) 18%, transparent), 0 0 18px color-mix(in srgb, var(--pet-primary) 46%, transparent);
}

.pet-type-pc .pet-face { color: var(--pet-primary); }
.pet-type-pc .pet-antenna,
.pet-type-pc .pet-ear,
.pet-type-pc .pet-arm,
.pet-type-pc .pet-foot { display: none; }

.pet-type-pc .pet-stand {
  z-index: 2;
  display: block;
  left: 45%;
  top: 69%;
  width: 10%;
  height: 18%;
  background: var(--pet-primary);
}

.pet-type-pc .pet-base {
  z-index: 2;
  display: block;
  left: 27%;
  bottom: 8%;
  width: 46%;
  height: 8%;
  background: var(--pet-primary);
  border-radius: 999px 999px 3px 3px;
}

.pet-character:hover .pet-arm-right,
.is-cheering .pet-arm-right {
  animation: pet-cheer-wave 520ms ease-in-out 3;
}

.is-cheering .pet-character {
  animation: pet-cheer-bounce 420ms ease-in-out 3;
}

.pet-customizer {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.pet-preview-panel {
  position: sticky;
  top: 0;
  min-width: 0;
  padding: 20px;
  text-align: center;
  background: #0d1217;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.pet-preview-stage {
  position: relative;
  min-height: 260px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 36px 36px,
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 36px 36px,
    #10161c;
  border: 1px solid rgba(64, 201, 178, 0.28);
  border-radius: 6px;
}

.pet-preview-stage::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 34px;
  height: 12px;
  background: rgba(0, 0, 0, 0.32);
  border-radius: 50%;
  filter: blur(5px);
}

.pet-preview-stage > div {
  position: relative;
  z-index: 1;
}

/* Give full-body designs room for readable faces without hiding their feet. */
#petPreviewAvatar .pet-model-age-teen,
#petPreviewAvatar .pet-model-age-senior { width: 220px; height: 220px; max-width: 100%; }

.pet-preview-panel h3 {
  margin: 3px 0 8px;
  font-size: 1.5rem;
}

.pet-preview-panel > p:last-child {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.pet-controls {
  display: grid;
  gap: 15px;
  min-width: 0;
}

.pet-name-field {
  display: grid;
  gap: 7px;
}

.pet-name-field span,
.pet-choice-group legend {
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 900;
}

.pet-name-field input {
  min-height: 46px;
  padding: 0 12px;
  color: var(--ink);
  background: #0d1217;
  border: 1px solid var(--line);
  border-radius: 5px;
  font: inherit;
}

.pet-name-field input:focus {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}

.pet-choice-group {
  min-width: 0;
  margin: 0;
  padding: 12px;
  background: #11171c;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.pet-choice-group legend {
  padding: 0 7px;
}

.pet-type-picker,
.pet-model-age-picker,
.pet-face-picker,
.pet-color-picker {
  display: grid;
  gap: 8px;
}

.pet-type-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pet-model-age-picker { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.pet-face-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#petAccessoryPicker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#petAccessoryPicker button:disabled { opacity: .45; cursor: not-allowed; }
.pet-color-picker { grid-template-columns: repeat(6, 44px); }

.pet-type-picker button,
.pet-model-age-picker button,
.pet-face-picker button,
.pet-color-picker button {
  min-width: 0;
  min-height: 42px;
  padding: 7px;
  border-radius: 5px;
}

.pet-type-picker button {
  min-height: 112px;
  display: grid;
  place-items: center;
  gap: 3px;
}

.pet-model-age-picker button {
  min-height: 112px;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  text-align: left;
}

.pet-model-age-picker button strong { align-self: end; }
.pet-model-age-picker button small { align-self: start; color: var(--muted); }

.pet-age-choice-avatar {
  grid-row: 1 / 3;
  width: 72px;
  height: 66px;
  display: grid;
  place-items: center;
}

.pet-type-picker button strong,
.pet-type-picker button small {
  overflow-wrap: anywhere;
}

.pet-type-picker button small {
  color: var(--muted);
  font-size: 0.66rem;
}

.pet-choice-avatar {
  width: 62px;
  height: 56px;
  display: grid;
  place-items: center;
}

.pet-color-picker button {
  width: 44px;
  aspect-ratio: 1;
  padding: 5px;
}

.pet-color-picker button span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--swatch);
  border: 2px solid color-mix(in srgb, var(--swatch) 55%, white);
  border-radius: 4px;
}

.pet-type-picker button.is-selected,
.pet-model-age-picker button.is-selected,
.pet-face-picker button.is-selected,
.pet-color-picker button.is-selected {
  color: var(--ink);
  background: color-mix(in srgb, var(--teal) 15%, #171d23);
  border-color: var(--teal);
  box-shadow: inset 0 0 0 1px var(--teal), 0 0 14px rgba(64, 201, 178, 0.15);
}

.pet-face-picker button {
  display: grid;
  place-items: center;
  gap: 5px;
  font-size: 0.72rem;
}

.face-choice {
  position: relative;
  width: 34px;
  height: 28px;
  background: var(--gold);
  border-radius: 7px;
}

.face-choice i,
.face-choice b {
  position: absolute;
  display: block;
  background: #0b1115;
}

.face-choice i {
  top: 8px;
  width: 4px;
  height: 6px;
  border-radius: 999px;
}

.face-choice i:first-child { left: 9px; }
.face-choice i:nth-child(2) { right: 9px; }
.face-choice b { left: 12px; bottom: 6px; width: 10px; height: 2px; border-radius: 0 0 999px 999px; }
.face-choice.face-excited b { left: 14px; bottom: 4px; width: 7px; height: 7px; border-radius: 50%; }
.face-choice.face-curious i:nth-child(2) { height: 3px; }
.face-choice.face-curious b { rotate: -10deg; }
.face-choice.face-focused i:first-child { rotate: 18deg; border-radius: 0; }
.face-choice.face-focused i:nth-child(2) { rotate: -18deg; border-radius: 0; }

.pet-save-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 4px;
}

.pet-save-row p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.pet-save-row button {
  flex: 0 0 auto;
}

.pet-card-actions {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
  margin-top: 4px;
}

.companion-tip-button {
  width: 40px;
  min-height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #07120f;
  background: var(--teal);
  border-color: var(--teal);
  border-radius: 50%;
  font-weight: 1000;
}

.class-companion,
.game-companion {
  min-width: 0;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 12px;
  background: #11171c;
  border: 1px solid rgba(64, 201, 178, 0.26);
  border-radius: 7px;
}

.class-companion {
  margin: 0 0 clamp(18px, 3vw, 28px);
  padding: 9px 13px;
}

.class-companion.is-cheering {
  border-color: var(--teal);
  box-shadow: 0 0 22px rgba(64, 201, 178, 0.2);
}

#classView .class-head {
  margin-bottom: 10px;
}

.game-companion {
  grid-template-columns: 56px minmax(0, 1fr) 34px;
  gap: 8px;
  min-height: 62px;
  padding: 7px 0 0;
  background: transparent;
  border-width: 1px 0 0;
  border-radius: 0;
}

.companion-avatar {
  display: grid;
  place-items: center;
  overflow: visible;
}

.companion-avatar-small { width: 70px; height: 64px; }
.companion-avatar-game { width: 54px; height: 50px; }

.companion-copy {
  min-width: 0;
}

.companion-copy strong,
.companion-copy p {
  display: block;
  margin: 0;
  overflow-wrap: anywhere;
}

.companion-copy strong {
  margin-bottom: 3px;
  color: var(--teal);
  font-size: 0.78rem;
}

.companion-copy p {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.game-companion .companion-tip-button {
  width: 32px;
  min-height: 32px;
}

/* Keep the compact in-game helper steady while the note lane and recorded
   soundtrack are active. Its layered CSS animations can otherwise shimmer
   as the gameplay canvas repaints. */
.game-companion .pet-character,
.game-companion .pet-eye,
.game-companion .pet-antenna,
.game-companion .pet-arm-right,
.game-companion.is-cheering .pet-character,
.game-companion.is-cheering .pet-arm-right {
  animation: none;
}

.game-companion .pet-character {
  transform: none;
  backface-visibility: hidden;
}

@keyframes pet-companion-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-5%) rotate(1deg); }
}

@keyframes pet-companion-blink {
  0%, 44%, 48%, 100% { transform: scaleY(1); }
  46% { transform: scaleY(0.08); }
}

@keyframes pet-antenna-sway {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(7deg); }
}

@keyframes pet-small-wave {
  0%, 78%, 100% { transform: rotate(-16deg); }
  84% { transform: rotate(-48deg); }
  90% { transform: rotate(-12deg); }
}

@keyframes pet-cheer-wave {
  0%, 100% { transform: rotate(-16deg); }
  50% { transform: rotate(-65deg); }
}

@keyframes pet-cheer-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10%) scale(1.05); }
}

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

  .pet-preview-panel {
    position: static;
    display: grid;
    grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    text-align: left;
  }

  .pet-preview-stage {
    min-height: 210px;
    margin: 0;
  }
}

@media (max-width: 620px) {
  .pet-menu-card {
    padding: 16px;
  }

  .pet-preview-panel {
    display: block;
    text-align: center;
  }

  .pet-preview-stage {
    min-height: 190px;
    margin-bottom: 14px;
  }

  .pet-type-picker,
  .pet-face-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pet-color-picker {
    grid-template-columns: repeat(6, minmax(36px, 44px));
  }

  .pet-save-row {
    align-items: stretch;
    flex-direction: column;
  }

  .pet-save-row button {
    width: 100%;
  }

  .class-companion {
    grid-template-columns: 58px minmax(0, 1fr) 38px;
    gap: 8px;
    padding-inline: 9px;
  }

  .companion-avatar-small {
    width: 56px;
    height: 52px;
  }
}

@media (max-width: 410px) {
  .pet-color-picker {
    grid-template-columns: repeat(3, 44px);
  }

  .class-companion {
    grid-template-columns: 50px minmax(0, 1fr) 34px;
  }

  .companion-avatar-small {
    width: 48px;
    height: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pet-character,
  .pet-eye,
  .pet-antenna,
  .pet-arm-right,
  .is-cheering .pet-character,
  .is-cheering .pet-arm-right {
    animation: none !important;
  }
}

.compact-login-card {
  width: min(720px, 100%);
  padding: clamp(20px, 3vw, 30px);
  border-color: rgba(242, 189, 75, 0.48);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.7),
    0 0 40px rgba(242, 189, 75, 0.1);
}

.compact-login-card .login-row {
  margin-top: 8px;
}

.compact-login-card h2 {
  font-size: 2.05rem;
}

.compact-login-card input,
.compact-login-card .primary {
  min-height: 48px;
}

.remember-login-option {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d5dde0;
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.35;
}

.compact-login-card .remember-login-option input {
  width: 18px;
  height: 18px;
  min-height: 18px;
  flex: 0 0 18px;
  accent-color: var(--gold);
}

.login-recovery-button {
  min-height: 42px;
  color: #c9d9e8;
  background: rgba(103, 167, 255, 0.07);
  border-color: rgba(103, 167, 255, 0.34);
}

.login-recovery-button.is-recommended {
  color: #111316;
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(242, 189, 75, 0.16);
}

.email-recovery-card {
  display: grid;
  gap: 14px;
  width: min(520px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: clamp(20px, 3vw, 30px);
  background: #20262d;
  border: 1px solid rgba(103, 167, 255, 0.58);
  border-top: 4px solid var(--blue);
  border-radius: 8px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7);
}

.recovery-step {
  display: grid;
  gap: 14px;
}

.recovery-step.is-hidden {
  display: none;
}

.recovery-step > p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.recovery-step > button.primary {
  min-height: 48px;
  color: #0d1415;
  background: var(--blue);
  border-color: var(--blue);
  font-weight: 850;
}

.support-card {
  border-color: rgba(64, 201, 178, 0.58);
  border-top-color: var(--teal);
}

.support-card .eyebrow { color: var(--teal); }

.support-card > button.primary {
  color: #0d1415;
  background: var(--teal);
  border-color: var(--teal);
}

.login-field select,
.login-field textarea {
  width: 100%;
  min-width: 0;
  padding: 11px 12px;
  color: var(--ink);
  background: #10151a;
  border: 1px solid var(--line);
  border-radius: 5px;
  outline: none;
}

.login-field textarea {
  resize: vertical;
  line-height: 1.45;
}

.login-field select:focus,
.login-field textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(64, 201, 178, 0.12);
}

.support-honeypot {
  position: fixed;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.billing-card {
  width: min(620px, 100%);
  display: grid;
  gap: 16px;
  padding: 24px;
  background: var(--panel);
  border: 1px solid rgba(64, 201, 178, 0.48);
  border-radius: 8px;
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.7),
    0 0 40px rgba(64, 201, 178, 0.1);
}

.billing-card h2 {
  font-size: 2rem;
}

.billing-preview-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(242, 189, 75, 0.07);
  border: 1px solid rgba(242, 189, 75, 0.28);
}

.billing-preview-banner span {
  padding: 5px 7px;
  color: #17120a;
  background: var(--gold);
  border-radius: 4px;
  font-size: 0.66rem;
  font-weight: 1000;
  text-transform: uppercase;
}

.billing-preview-banner p,
.billing-security,
#billingFormStatus {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.billing-field {
  display: grid;
  gap: 7px;
}

.billing-field > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.billing-field select {
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  color: var(--ink);
  background: #0d1116;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.checkout-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  background: #0d1116;
  border: 1px solid rgba(174, 183, 188, 0.2);
}

.checkout-summary span {
  color: var(--muted);
}

.checkout-summary strong {
  color: var(--gold);
  font-size: 1.8rem;
}

.billing-card > .primary {
  min-height: 50px;
}

@keyframes pet-bob {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes orbit-turn {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ambient-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(4vw, 2vw, 0) scale(1.08);
  }
}

.account-menu-card {
  grid-column: 1 / -1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) minmax(360px, 1fr) minmax(220px, 0.8fr);
  align-items: center;
  gap: 16px;
}

.account-menu-card .eyebrow {
  grid-column: 1;
  grid-row: 1;
}

.account-menu-card h2 {
  grid-column: 1;
  grid-row: 2;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
}

.account-menu-card .profile-row {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 100%;
}

#menuAccountStatus {
  grid-column: 3;
  grid-row: 1 / span 2;
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  justify-self: end;
  text-align: right;
}

.class-card {
  display: grid;
  align-content: start;
  gap: 10px;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.class-card strong {
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1.05;
}

.class-card span:last-child {
  color: var(--muted);
  line-height: 1.45;
}

.class-card:hover,
.class-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 0 28px rgba(242, 189, 75, 0.18);
}

.keyboard-card {
  box-shadow:
    inset 0 -4px 0 var(--gold),
    0 0 26px rgba(242, 189, 75, 0.08);
}

.safety-card {
  box-shadow:
    inset 0 -4px 0 var(--teal),
    0 0 26px rgba(64, 201, 178, 0.08);
}

.digital-card {
  box-shadow:
    inset 0 -4px 0 var(--blue),
    0 0 26px rgba(103, 167, 255, 0.08);
}

.class-panel {
  padding: clamp(18px, 3vw, 32px);
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(242, 189, 75, 0.06), transparent 34%),
    linear-gradient(315deg, rgba(103, 167, 255, 0.08), transparent 42%),
    color-mix(in srgb, var(--panel) 92%, transparent);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 24px 70px var(--shadow);
}

.class-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(18px, 3vw, 28px);
}

.screen-nav,
.admin-command-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.screen-nav button {
  min-height: 40px;
}

.class-content {
  display: block;
}

.lesson-card {
  min-height: 190px;
  padding: clamp(14px, 2vw, 20px);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.lesson-card h2 {
  margin-bottom: 10px;
}

.lesson-card p,
.lesson-card li {
  color: var(--muted);
  line-height: 1.5;
}

.lesson-card ul {
  margin: 0;
  padding-left: 20px;
}

.curriculum-shell {
  --track-accent: var(--gold);
  --track-glow: rgba(242, 189, 75, 0.2);
  display: grid;
  gap: 18px;
  min-width: 0;
}

.curriculum-shell.track-teal {
  --track-accent: var(--teal);
  --track-glow: rgba(64, 201, 178, 0.22);
}

.curriculum-shell.track-blue {
  --track-accent: var(--blue);
  --track-glow: rgba(103, 167, 255, 0.22);
}

.curriculum-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  padding: 5px;
  background: #10151a;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.curriculum-tabs button {
  min-height: 40px;
  padding: 0 18px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}

.curriculum-tabs button.is-selected {
  color: #0c1115;
  font-weight: 900;
  background: var(--track-accent);
  box-shadow: 0 0 18px var(--track-glow);
}

.curriculum-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(330px, 35vw, 440px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--track-accent) 60%, var(--line));
  border-radius: 8px;
  background: #0e1318;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28), 0 0 32px var(--track-glow);
}

.curriculum-hero > img,
.lesson-detail-hero > img,
.quiz-detail-hero > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.curriculum-hero > img {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.curriculum-hero-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(8, 11, 15, 0.96) 0 34%, rgba(8, 11, 15, 0.68) 54%, rgba(8, 11, 15, 0.1) 80%), linear-gradient(0deg, rgba(8, 11, 15, 0.85), transparent 45%);
}

.curriculum-hero-copy {
  width: min(580px, 58%);
  padding: clamp(28px, 5vw, 64px);
}

.curriculum-hero-copy h2 {
  max-width: 12ch;
  margin: 0 0 14px;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 0.98;
  letter-spacing: 0;
}

.curriculum-hero-copy > p:not(.eyebrow) {
  max-width: 52ch;
  margin: 0;
  color: #d8dfe1;
  font-size: 17px;
  line-height: 1.6;
}

.curriculum-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.curriculum-hero-actions button,
.curriculum-back,
.curriculum-project-card button,
.quiz-submit-row button,
.lesson-action-panel button,
.certificate-status-panel button {
  min-height: 44px;
  padding: 0 18px;
  color: var(--ink);
  background: #20272e;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-weight: 850;
  cursor: pointer;
}

.curriculum-hero-actions .primary,
.quiz-submit-row .primary,
.lesson-action-panel .primary,
.certificate-status-panel .primary {
  color: #0d1216;
  background: var(--track-accent);
  border-color: var(--track-accent);
}

.curriculum-hero-stats {
  position: absolute;
  right: clamp(18px, 3vw, 38px);
  bottom: 24px;
  left: clamp(18px, 3vw, 38px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 620px;
  margin-left: auto;
  background: rgba(12, 16, 20, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  backdrop-filter: blur(12px);
}

.curriculum-hero-stats div {
  min-width: 0;
  padding: 14px 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.curriculum-hero-stats div:first-child {
  border-left: 0;
}

.curriculum-hero-stats strong,
.curriculum-hero-stats span {
  display: block;
}

.curriculum-hero-stats strong {
  color: var(--track-accent);
  font-size: 22px;
}

.curriculum-hero-stats span {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 12px;
}

.curriculum-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: clamp(22px, 3vw, 40px);
  align-items: start;
  padding-top: 12px;
}

.curriculum-main,
.curriculum-rail,
.curriculum-week-list,
.curriculum-quiz-list,
.curriculum-project-list {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.curriculum-section-head,
.rail-panel-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}

.curriculum-section-head h2,
.rail-panel-head h2 {
  margin: 0;
  font-size: 25px;
}

.curriculum-section-head > span {
  color: var(--muted);
  font-size: 13px;
}

.curriculum-week {
  display: grid;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.curriculum-week > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.curriculum-week > header span {
  color: var(--track-accent);
  font-weight: 900;
  text-transform: uppercase;
}

.curriculum-week > header i {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.curriculum-lesson-grid {
  display: grid;
  gap: 9px;
}

.curriculum-lesson-card {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr) 22px;
  gap: 16px;
  align-items: center;
  width: 100%;
  min-height: 105px;
  padding: 0 16px 0 0;
  overflow: hidden;
  color: var(--ink);
  text-align: left;
  background: #20262d;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.curriculum-lesson-card:hover {
  transform: translateY(-2px);
  border-color: var(--track-accent);
  background: #242c33;
}

.curriculum-lesson-card.is-complete {
  border-color: color-mix(in srgb, var(--track-accent) 58%, var(--line));
}

.lesson-thumb {
  position: relative;
  align-self: stretch;
  min-height: 104px;
  overflow: hidden;
}

.lesson-thumb::after,
.quiz-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(10, 14, 18, 0.35));
}

.lesson-thumb img,
.quiz-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lesson-thumb i,
.quiz-art i {
  position: absolute;
  z-index: 1;
  right: 7px;
  bottom: 7px;
  padding: 4px 6px;
  color: #081014;
  background: var(--track-accent);
  border-radius: 3px;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
}

.lesson-card-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.lesson-card-copy small,
.lesson-card-copy strong,
.lesson-card-copy > span {
  display: block;
  overflow-wrap: anywhere;
}

.lesson-card-copy small {
  color: var(--track-accent);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.lesson-card-copy strong {
  font-size: 17px;
}

.lesson-card-copy > span {
  color: var(--muted);
  font-size: 13px;
}

.lesson-card-arrow {
  color: var(--track-accent);
  font-size: 28px;
}

.curriculum-rail {
  position: sticky;
  top: 18px;
}

.curriculum-rail-panel {
  display: grid;
  gap: 12px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.curriculum-quiz-card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 78px;
  padding: 0 12px 0 0;
  overflow: hidden;
  color: var(--ink);
  text-align: left;
  background: #20262d;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}

.curriculum-quiz-card:hover,
.curriculum-quiz-card.is-complete {
  border-color: var(--track-accent);
}

.quiz-art {
  position: relative;
  align-self: stretch;
  min-height: 76px;
  overflow: hidden;
}

.curriculum-quiz-card > span:last-child {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.curriculum-quiz-card strong,
.curriculum-quiz-card small {
  overflow-wrap: anywhere;
}

.curriculum-quiz-card small,
.curriculum-empty {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.curriculum-project-card {
  padding: 14px;
  background: #20262d;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.curriculum-project-card.is-complete {
  border-color: var(--track-accent);
  box-shadow: inset 4px 0 var(--track-accent);
}

.curriculum-project-card > span {
  color: var(--track-accent);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.curriculum-project-card h3 {
  margin: 5px 0 7px;
  font-size: 17px;
}

.curriculum-project-card p,
.course-progress-panel > p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.curriculum-project-card button {
  width: 100%;
  min-height: 38px;
  color: #0d1216;
  background: var(--track-accent);
  border-color: var(--track-accent);
}

.curriculum-project-card button:disabled,
.lesson-action-panel button:disabled,
.certificate-status-panel button:disabled {
  color: var(--muted);
  background: #151a1f;
  border-color: var(--line);
  cursor: default;
}

.course-progress-ring {
  display: grid;
  place-content: center;
  width: 150px;
  aspect-ratio: 1;
  margin: 8px auto;
  text-align: center;
  border-radius: 50%;
  background: radial-gradient(circle at center, #151a20 0 56%, transparent 57%), conic-gradient(var(--track-accent) var(--course-progress), #303840 0);
}

.course-progress-ring strong,
.course-progress-ring span {
  display: block;
}

.course-progress-ring strong {
  font-size: 28px;
}

.course-progress-ring span {
  color: var(--muted);
  font-size: 11px;
}

.curriculum-back {
  width: fit-content;
  color: var(--track-accent);
  background: transparent;
}

.lesson-detail,
.quiz-detail {
  overflow: hidden;
  background: #171d23;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.lesson-detail-hero,
.quiz-detail-hero {
  display: grid;
  grid-template-columns: minmax(280px, 42%) minmax(0, 1fr);
  min-height: 320px;
  background: #10151a;
}

.lesson-detail-hero > img,
.quiz-detail-hero > img {
  min-height: 320px;
}

.lesson-detail-hero > div,
.quiz-detail-hero > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(26px, 5vw, 58px);
}

.lesson-detail-hero h2,
.quiz-detail-hero h2 {
  margin: 0 0 12px;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1;
}

.lesson-detail-hero p:last-child,
.quiz-detail-hero p {
  color: var(--muted);
  line-height: 1.55;
}

.lesson-overview-infographic {
  margin: 0;
  padding: clamp(18px, 3vw, 34px);
  background: #0b1117;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.lesson-overview-crop {
  position: relative;
  width: min(100%, 560px);
  aspect-ratio: 1 / 2;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(103, 167, 255, 0.38);
  border-radius: 6px;
  background: #070c11;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.38);
}

.lesson-overview-crop img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 300%;
  max-width: none;
  height: 100%;
}

.lesson-overview-crop.panel-1 img {
  left: -100%;
}

.lesson-overview-crop.panel-2 img {
  left: -200%;
}

.lesson-overview-crop.is-full {
  width: min(100%, 820px);
  aspect-ratio: auto;
}

.lesson-overview-crop.is-full img {
  position: static;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.lesson-overview-infographic figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.72rem;
  text-align: center;
}

.lesson-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lesson-detail-grid > section {
  min-width: 0;
  padding: clamp(22px, 3vw, 34px);
  border-top: 1px solid var(--line);
}

.lesson-detail-grid > section:nth-child(even) {
  border-left: 1px solid var(--line);
}

.lesson-detail-grid h3,
.lesson-action-panel h3 {
  margin: 0 0 12px;
  font-size: 20px;
}

.lesson-detail-grid ul {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.65;
}

.lesson-topic-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lesson-topic-heading h3 {
  margin: 0;
}

.lesson-topic-heading span {
  flex: 0 0 auto;
  color: var(--track-accent);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.lesson-topic-intro {
  margin: 7px 0 14px;
  color: var(--muted);
  font-size: 0.82rem;
}

.lesson-topic-list {
  display: grid;
  gap: 7px;
}

.topic-nav-button {
  width: 100%;
  min-width: 0;
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 11px;
  color: var(--ink);
  background: #10161b;
  border: 1px solid var(--line);
  border-radius: 5px;
  text-align: left;
}

.topic-nav-button:hover,
.topic-nav-button:focus-visible,
.topic-nav-button.is-active {
  background: color-mix(in srgb, var(--track-accent) 9%, #10161b);
  border-color: var(--track-accent);
}

.topic-nav-button span,
.topic-nav-button strong,
.topic-nav-button i {
  min-width: 0;
  display: block;
}

.topic-nav-button i {
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 850;
  text-transform: uppercase;
}

.topic-nav-button strong {
  overflow-wrap: anywhere;
  font-size: 0.84rem;
  line-height: 1.25;
}

.topic-nav-button b {
  color: var(--track-accent);
  font-size: 0.68rem;
  text-transform: uppercase;
}

.topic-nav-button.is-complete b {
  color: var(--green);
}

.topic-reader {
  overflow: hidden;
  background: #151b20;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.topic-reader-hero {
  min-height: 330px;
  display: grid;
  grid-template-columns: minmax(280px, 38%) minmax(0, 1fr);
  background: #0e1419;
  border-bottom: 1px solid var(--line);
}

.topic-reader-hero > img {
  width: 100%;
  height: 100%;
  min-height: 330px;
  object-fit: cover;
}

.topic-reader-hero > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(28px, 5vw, 62px);
}

.topic-reader-hero h2 {
  max-width: 850px;
  margin: 2px 0 14px;
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1.02;
}

.topic-reader-hero p:not(.eyebrow) {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}

.topic-read-status {
  margin-top: 18px;
  padding: 7px 9px;
  color: var(--track-accent);
  background: color-mix(in srgb, var(--track-accent) 8%, #10151a);
  border: 1px solid color-mix(in srgb, var(--track-accent) 42%, transparent);
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 900;
}

.topic-read-status.is-complete {
  color: #07120f;
  background: var(--green);
  border-color: var(--green);
}

.topic-reader-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 330px);
  align-items: start;
}

.topic-reading-body {
  min-width: 0;
  border-right: 1px solid var(--line);
}

.topic-infographic {
  margin: 0;
  padding: clamp(18px, 3vw, 34px);
  background: #0b1117;
  border-bottom: 1px solid var(--line);
}

.topic-infographic img {
  width: min(100%, 820px);
  height: auto;
  display: block;
  margin: 0 auto;
  border: 1px solid rgba(103, 167, 255, 0.38);
  border-radius: 6px;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.38);
}

.topic-infographic figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.72rem;
  text-align: center;
}

.topic-reading-section,
.topic-practice-callout {
  padding: clamp(24px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
}

.topic-reading-section h3,
.topic-practice-callout h3,
.topic-reader-rail h3 {
  margin: 4px 0 15px;
  font-size: clamp(1.25rem, 2.4vw, 1.8rem);
}

.topic-reading-section > p:not(.eyebrow),
.topic-practice-callout p:not(.eyebrow) {
  max-width: 820px;
  margin: 0 0 15px;
  color: #c4d0da;
  font-size: 0.98rem;
  line-height: 1.78;
}

.topic-reading-section > p:last-child,
.topic-practice-callout p:last-child {
  margin-bottom: 0;
}

.topic-review-form {
  max-width: 900px;
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.topic-review-lock-notice {
  max-width: 900px;
  padding: 12px 14px;
  color: #f3d793 !important;
  background: rgba(247, 190, 65, 0.08);
  border: 1px solid rgba(247, 190, 65, 0.38);
  border-radius: 6px;
  font-size: 0.82rem !important;
  line-height: 1.55 !important;
}

.topic-review-lock-notice.is-locked {
  color: #c4d0da !important;
  background: rgba(174, 183, 188, 0.07);
  border-color: rgba(174, 183, 188, 0.3);
}

.topic-review-lock-notice.is-unlocked {
  color: #bce9a9 !important;
  background: rgba(137, 207, 111, 0.08);
  border-color: rgba(137, 207, 111, 0.38);
}

.topic-review-question {
  display: grid;
  gap: 11px;
  padding: 16px;
  background: #0d1319;
  border: 1px solid color-mix(in srgb, var(--track-accent) 28%, var(--line));
  border-radius: 6px;
}

.topic-review-question > span {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.topic-review-question b {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  color: var(--track-accent);
  border: 1px solid var(--track-accent);
  border-radius: 50%;
  font-size: 0.72rem;
}

.topic-review-question strong {
  padding-top: 3px;
  line-height: 1.45;
}

.topic-review-question textarea {
  width: 100%;
  min-height: 105px;
  resize: vertical;
  padding: 12px;
  color: var(--ink);
  background: #080d12;
  border: 1px solid rgba(174, 183, 188, 0.28);
  border-radius: 4px;
  font: inherit;
  line-height: 1.5;
}

.topic-review-question textarea:focus {
  outline: 2px solid var(--track-accent);
  outline-offset: 1px;
}

.topic-review-question.is-locked {
  border-color: rgba(174, 183, 188, 0.2);
}

.topic-review-question textarea[readonly] {
  color: #b4c0ca;
  background: #10161c;
  cursor: not-allowed;
  resize: none;
}

.topic-review-submit-row button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.35);
  opacity: 0.68;
}

.topic-review-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  background: color-mix(in srgb, var(--track-accent) 8%, #10161b);
  border: 1px solid color-mix(in srgb, var(--track-accent) 32%, transparent);
  border-radius: 6px;
}

.topic-review-submit-row > div {
  display: grid;
  gap: 4px;
}

.topic-review-submit-row small {
  color: var(--muted);
  line-height: 1.4;
}

.topic-step-section ol {
  max-width: 820px;
  display: grid;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  counter-reset: topic-step;
  list-style: none;
}

.topic-step-section li {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  color: #c4d0da;
  line-height: 1.5;
  counter-increment: topic-step;
}

.topic-step-section li::before {
  content: counter(topic-step);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #07120f;
  background: var(--track-accent);
  border-radius: 4px;
  font-weight: 950;
}

.topic-practice-callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 0.65fr);
  gap: 28px;
  align-items: center;
  background: color-mix(in srgb, var(--track-accent) 7%, #10161b);
}

.topic-practice-callout strong {
  display: block;
  padding: 18px;
  color: var(--ink);
  background: #10161b;
  border-left: 3px solid var(--track-accent);
  line-height: 1.55;
}

.topic-self-check {
  max-width: 820px;
  display: grid;
  gap: 8px;
}

.topic-self-check details {
  background: #10161b;
  border: 1px solid var(--line);
  border-radius: 5px;
}

.topic-self-check summary {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 13px;
  cursor: pointer;
  font-weight: 850;
  list-style: none;
}

.topic-self-check summary::-webkit-details-marker {
  display: none;
}

.topic-self-check summary span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--track-accent);
  border: 1px solid var(--track-accent);
  border-radius: 50%;
  font-size: 0.78rem;
}

.topic-self-check details p {
  margin: 0;
  padding: 0 16px 16px 53px;
  color: var(--muted);
  line-height: 1.6;
}

.topic-reader-rail {
  position: sticky;
  top: 16px;
  display: grid;
  gap: 12px;
  padding: 20px;
}

.topic-reader-rail > div > p:last-child,
.topic-reader-rail > small {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.5;
}

.topic-reader-rail nav {
  display: grid;
  gap: 7px;
}

.topic-complete-button {
  width: 100%;
  min-height: 46px;
}

.topic-reader-footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 18px;
  background: #0e1419;
  border-top: 1px solid var(--line);
}

.topic-reader-footer button {
  min-width: 0;
  min-height: 44px;
  padding: 8px 13px;
  overflow-wrap: anywhere;
}

.topic-reader-footer button:last-child {
  justify-self: end;
}

@media (max-width: 950px) {
  .topic-reader-layout {
    grid-template-columns: 1fr;
  }

  .topic-reading-body {
    border-right: 0;
  }

  .topic-reader-rail {
    position: static;
    border-top: 1px solid var(--line);
  }

  .topic-reader-rail nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .topic-reader-hero {
    grid-template-columns: 1fr;
  }

  .topic-reader-hero > img {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .topic-reader-hero > div {
    padding: 24px 19px 28px;
  }

  .topic-practice-callout,
  .topic-reader-rail nav {
    grid-template-columns: 1fr;
  }

  .topic-reading-section,
  .topic-practice-callout {
    padding: 24px 19px;
  }

  .topic-infographic {
    padding: 12px;
  }

  .topic-reader-footer {
    grid-template-columns: 1fr;
  }

  .topic-reader-footer span {
    display: none;
  }

  .topic-reader-footer button,
  .topic-reader-footer button:last-child {
    width: 100%;
    justify-self: stretch;
  }
}

.lesson-action-panel p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.6;
}

.lesson-action-panel h3:nth-of-type(2) {
  margin-top: 22px;
}

.lesson-action-panel button {
  margin-top: 12px;
}

.lesson-progress-badge {
  width: fit-content;
  margin-top: 12px;
  padding: 7px 9px;
  color: var(--track-accent);
  background: color-mix(in srgb, var(--track-accent) 8%, #10151a);
  border: 1px solid color-mix(in srgb, var(--track-accent) 45%, transparent);
  border-radius: 4px;
  font-size: 0.74rem;
  font-weight: 900;
}

.lesson-progress-badge.is-complete {
  color: #07120f;
  background: var(--green);
  border-color: var(--green);
}

.lesson-task-links,
.certificate-scope-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px clamp(18px, 3vw, 34px);
  background: #11171c;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.lesson-task-links button,
.certificate-scope-tabs button {
  min-height: 38px;
  padding: 0 13px;
  color: var(--muted);
  background: #1b2229;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-weight: 850;
  cursor: pointer;
}

.lesson-task-links button:hover,
.certificate-scope-tabs button:hover,
.certificate-scope-tabs button.is-selected {
  color: var(--ink);
  border-color: var(--track-accent, var(--gold));
}

.certificate-scope-tabs {
  margin-bottom: 18px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.lesson-task-workspace {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: clamp(18px, 3vw, 34px);
  background: #0f1419;
  border-top: 1px solid var(--line);
}

.lesson-task-card,
.project-submission-panel {
  min-width: 0;
  padding: clamp(18px, 2.5vw, 28px);
  background: #171d23;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.lesson-task-card:nth-child(2) {
  grid-row: span 2;
}

.lesson-task-card.is-complete,
.project-submission-panel.is-complete {
  border-color: rgba(137, 207, 111, 0.65);
  box-shadow: inset 0 3px var(--green);
}

.lesson-task-card > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.lesson-task-card h3,
.project-submission-panel h3 {
  margin: 2px 0 0;
  font-size: 1.12rem;
}

.lesson-task-card > header > span {
  padding: 5px 7px;
  color: var(--track-accent);
  background: #0f1419;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 900;
  text-transform: uppercase;
}

.lesson-task-card > p:not(.eyebrow),
.project-submission-panel > p,
.lesson-task-card ol {
  color: var(--muted);
  line-height: 1.55;
}

.lesson-task-card ol {
  padding-left: 20px;
}

.lesson-task-checklist {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}

.lesson-task-checklist label,
.skill-check-confirm {
  display: flex;
  align-items: start;
  gap: 10px;
  padding: 11px;
  color: var(--muted);
  background: #10151a;
  border: 1px solid rgba(174, 183, 188, 0.16);
  border-radius: 5px;
  line-height: 1.45;
  cursor: pointer;
}

.lesson-task-checklist input,
.skill-check-confirm input {
  flex: 0 0 auto;
  margin-top: 3px;
  accent-color: var(--track-accent);
}

.assignment-evidence-label,
.assignment-evidence-label > span {
  display: grid;
  gap: 7px;
}

.assignment-evidence-label > span {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 900;
}

.assignment-evidence-label textarea {
  width: 100%;
  min-height: 112px;
  resize: vertical;
  padding: 12px;
  color: var(--ink);
  background: #0c1115;
  border: 1px solid var(--line);
  border-radius: 5px;
  font: inherit;
  line-height: 1.45;
}

.assignment-evidence-label textarea:focus {
  outline: 2px solid var(--track-accent);
  outline-offset: 1px;
}

.assignment-evidence-label textarea:disabled {
  opacity: 0.85;
}

.lesson-task-card > button,
.project-submission-panel > button {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 5px;
}

.lesson-task-message {
  min-height: 22px;
  margin: 12px 0;
  font-size: 0.76rem;
}

.lesson-task-message.is-warning {
  color: var(--red) !important;
}

.lesson-completion-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px clamp(22px, 3vw, 34px);
  background: #11171c;
  border-top: 1px solid var(--line);
}

.lesson-completion-banner strong {
  color: var(--track-accent);
}

.lesson-completion-banner span {
  color: var(--muted);
  font-size: 0.82rem;
  text-align: right;
}

.lesson-completion-banner.is-complete strong {
  color: var(--green);
}

.project-detail {
  display: grid;
  gap: 16px;
}

.project-submission-panel {
  width: min(880px, 100%);
  margin: 0 auto;
}

.level-guidance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
}

.level-guidance article {
  padding: 24px;
  background: #13191e;
}

.level-guidance span,
.level-guidance strong,
.level-guidance small {
  display: block;
}

.level-guidance span {
  color: var(--track-accent);
  font-weight: 900;
}

.level-guidance strong {
  margin: 4px 0 10px;
}

.level-guidance p,
.level-guidance small {
  color: var(--muted);
  line-height: 1.45;
}

.quiz-result-badge,
.quiz-attempt-message {
  width: fit-content;
  padding: 8px 10px;
  color: #07120f;
  background: var(--track-accent);
  border-radius: 4px;
  font-weight: 900;
}

.quiz-attempt-message {
  margin: 10px 0 0;
  background: var(--red);
}

.quiz-attempt-message.is-pass {
  background: var(--green);
}

.quiz-question-list {
  display: grid;
  gap: 18px;
  padding: clamp(22px, 4vw, 48px);
}

.quiz-question-list fieldset {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 18px;
  background: #20262d;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.quiz-question-list legend {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
  font-size: 17px;
  font-weight: 850;
}

.quiz-question-list legend span {
  display: grid;
  place-items: center;
  width: 28px;
  aspect-ratio: 1;
  color: #0b1115;
  background: var(--track-accent);
  border-radius: 50%;
}

.quiz-question-list label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  color: var(--muted);
  background: #171c22;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}

.quiz-question-list label:has(input:checked) {
  color: var(--ink);
  border-color: var(--track-accent);
}

.quiz-question-list input {
  accent-color: var(--track-accent);
}

.quiz-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px clamp(22px, 4vw, 48px);
  background: #11171c;
  border-top: 1px solid var(--line);
}

.quiz-submit-row p {
  margin: 0;
  color: var(--muted);
}

.quiz-submit-row p.is-warning {
  color: var(--red);
}

.certificate-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 22px;
  align-items: start;
}

.certificate-sheet {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #101316 var(--certificate-art) center / cover no-repeat;
  border: 1px solid rgba(242, 189, 75, 0.65);
  border-radius: 4px;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.42);
}

.certificate-copy {
  position: absolute;
  inset: 11% 13% 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.certificate-brand {
  margin: 0 0 10px;
  color: var(--teal);
  font-size: clamp(10px, 1.2vw, 16px);
  font-weight: 950;
  text-transform: uppercase;
}

.certificate-copy h2 {
  margin: 0 0 8px;
  color: var(--gold);
  font-family: Georgia, serif;
  font-size: clamp(25px, 3.2vw, 50px);
  letter-spacing: 0;
}

.certificate-copy > p:not(.certificate-brand) {
  margin: 4px 0;
  color: #d8d6ce;
  font-family: Georgia, serif;
  font-size: clamp(10px, 1.25vw, 17px);
}

.certificate-copy > strong {
  padding: 5px 26px;
  color: #fff;
  border-bottom: 1px solid var(--gold);
  font-family: Georgia, serif;
  font-size: clamp(22px, 3.4vw, 52px);
  overflow-wrap: anywhere;
}

.certificate-copy h3 {
  max-width: 29ch;
  margin: 5px auto 12px;
  color: #fff;
  font-family: Georgia, serif;
  font-size: clamp(14px, 1.7vw, 25px);
}

.certificate-areas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 10px;
  max-width: 680px;
  color: #aebac0;
  font-size: clamp(7px, 0.8vw, 12px);
}

.certificate-signatures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(25px, 8vw, 100px);
  width: min(540px, 78%);
  margin-top: clamp(12px, 2vw, 28px);
}

.certificate-signatures span,
.certificate-signatures i {
  display: block;
}

.certificate-signatures span {
  color: #87949a;
  font-size: clamp(7px, 0.75vw, 11px);
}

.certificate-signatures i {
  min-height: 22px;
  margin-bottom: 3px;
  color: #e9e7df;
  border-bottom: 1px solid #7d764e;
  font-family: Georgia, serif;
  font-style: normal;
  font-size: clamp(8px, 0.95vw, 13px);
}

.certificate-preview-mark {
  position: absolute;
  top: 46%;
  left: 50%;
  padding: 8px 18px;
  color: rgba(232, 93, 93, 0.72);
  border: 2px solid rgba(232, 93, 93, 0.52);
  font-size: clamp(17px, 2vw, 32px);
  transform: translate(-50%, -50%) rotate(-8deg);
}

.certificate-status-panel {
  position: sticky;
  top: 18px;
  padding: 22px;
  background: #20262d;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.certificate-status-panel h2 {
  margin: 0 0 8px;
}

.certificate-status-panel > p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.55;
}

.certificate-checklist {
  display: grid;
  gap: 8px;
  margin: 20px 0;
}

.certificate-checklist > div {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  background: #151a20;
  border-left: 3px solid var(--red);
}

.certificate-checklist > div.is-met {
  border-left-color: var(--green);
}

.certificate-checklist span {
  color: var(--red);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.certificate-checklist .is-met span {
  color: var(--green);
}

.certificate-checklist p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.certificate-status-panel button {
  width: 100%;
}

.course-guide-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(380px, 0.75fr);
  gap: 28px;
  align-items: end;
  padding: clamp(26px, 5vw, 58px);
  background: linear-gradient(115deg, rgba(103, 167, 255, 0.12), transparent 52%), #141a20;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.course-guide-head h2 {
  max-width: 20ch;
  margin: 0 0 14px;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1;
}

.course-guide-head > div:first-child > p:last-child {
  max-width: 62ch;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.course-format-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.course-format-stats span {
  display: grid;
  padding: 16px;
  color: var(--muted);
  background: #0f1419;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 11px;
  text-transform: uppercase;
}

.course-format-stats strong {
  color: var(--blue);
  font-size: 24px;
}

.course-guide-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: clamp(24px, 4vw, 46px);
  align-items: start;
}

.course-guide-main,
.course-guide-rail,
.guide-section {
  display: grid;
  gap: 16px;
}

.guide-section {
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.guide-section h2,
.course-guide-rail h2 {
  margin: 0;
}

.semester-map {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.semester-map article {
  padding: 14px;
  background: #20262d;
  border: 1px solid var(--line);
  border-radius: 5px;
}

.semester-map article > span {
  color: var(--blue);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.semester-map p {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  margin: 10px 0 0;
  color: #d9dfe2;
  font-size: 13px;
  line-height: 1.4;
}

.semester-map i {
  padding: 3px 5px;
  color: #0b1115;
  background: var(--blue);
  border-radius: 3px;
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
  text-align: center;
  text-transform: uppercase;
}

.semester-map .category-typing {
  background: var(--gold);
}

.semester-map .category-safety {
  background: var(--teal);
}

.guide-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 20px;
}

.guide-check-grid p {
  position: relative;
  margin: 0;
  padding: 10px 10px 10px 25px;
  color: var(--muted);
  border-bottom: 1px solid rgba(58, 66, 75, 0.65);
  line-height: 1.45;
}

.guide-check-grid p::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 4px;
  width: 8px;
  height: 4px;
  border-bottom: 2px solid var(--teal);
  border-left: 2px solid var(--teal);
  transform: rotate(-45deg);
}

.age-level-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.age-level-grid article {
  padding: 18px;
  background: #20262d;
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  border-radius: 5px;
}

.age-level-grid article > span {
  color: var(--blue);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.age-level-grid h3 {
  margin: 6px 0;
}

.age-level-grid strong,
.age-level-grid small {
  color: #dce4e7;
  font-size: 12px;
  line-height: 1.5;
}

.age-level-grid p,
.age-level-grid small {
  color: var(--muted);
  line-height: 1.5;
}

.course-guide-rail {
  position: sticky;
  top: 18px;
}

.course-guide-rail > section {
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.course-guide-rail ol,
.course-guide-rail ul {
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.6;
}

.guide-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.grade-list {
  display: grid;
  gap: 6px;
  margin-top: 14px;
}

.grade-list p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 9px 0;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}

.grade-list strong {
  color: var(--gold);
}

.shell {
  width: min(1520px, 100%);
  height: 100dvh;
  margin: 0 auto;
  padding: clamp(10px, 1.7vw, 24px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: clamp(10px, 1.2vw, 18px);
  overflow: hidden;
}

.stage,
.control-panel {
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 50px var(--shadow);
}

.stage {
  min-width: 0;
  min-height: 0;
  padding: clamp(10px, 1.2vw, 18px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(8px, 1vw, 14px);
}

.topbar,
.track-head,
.level-option,
.buttons,
.keys,
.profile-row,
.category-tabs,
.report-actions,
.speed-panel label,
.power-head {
  display: flex;
  align-items: center;
}

.topbar {
  justify-content: space-between;
  gap: 18px;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 700;
}

h1,
h2 {
  margin: 0;
  font-weight: 800;
  letter-spacing: 0;
}

h1 {
  font-size: clamp(1.35rem, 3vw, 2.6rem);
}

h2 {
  font-size: 1.35rem;
}

.meter-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(78px, 1fr));
  gap: 8px;
  min-width: min(520px, 100%);
}

.meter {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}

.meter span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}

.meter strong {
  display: block;
  margin-top: 2px;
  font-size: 1.18rem;
}

.game-wrap {
  position: relative;
  min-height: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 16.66% 100%,
    linear-gradient(180deg, rgba(242, 189, 75, 0.08), rgba(64, 201, 178, 0.08)),
    #101317;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.warrior-screen-guide{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px;background:rgba(7,19,28,.94);color:#f8f3e6;text-align:center;pointer-events:none}
.warrior-screen-guide.is-hidden{display:none}
.warrior-screen-guide>strong{font-size:clamp(1.2rem,2.6vw,2.4rem);line-height:1.1}
.warrior-screen-guide>img{width:min(90%,800px);min-height:0;max-height:55%;object-fit:contain}
.warrior-screen-guide>span{font-size:clamp(.7rem,1.2vw,1rem);line-height:1.4}
.warrior-screen-guide>b{color:#ffd36d;font-size:clamp(.85rem,1.6vw,1.3rem)}
.warrior-flash-warning{flex-shrink:0;max-width:660px;margin:0;padding:7px 12px;border:1px solid #b88b39;border-radius:8px;background:#292315;color:#fff0cd;font-size:clamp(.7rem,1.05vw,.9rem);line-height:1.35}
.warrior-flash-warning strong{color:#ffd36d}
.warrior-pause{background:rgba(7,19,28,.84);gap:20px}
.warrior-pause>strong{font-size:clamp(2.5rem,8vw,7rem);letter-spacing:.1em;color:#ffd36d}
.warrior-key-help{margin:8px 0;color:var(--muted);font-size:.8rem;line-height:1.4}
.warrior-key-help kbd{color:var(--ink);font-weight:700}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.countdown,
.feedback {
  pointer-events: none;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink);
  text-shadow: 0 3px 20px rgba(0, 0, 0, 0.65);
  font-weight: 900;
}

.countdown {
  font-size: clamp(4rem, 12vw, 9rem);
}

.feedback {
  align-items: start;
  padding-top: 8%;
  font-size: clamp(1.4rem, 4vw, 3rem);
  transform-origin: center;
}

.feedback-stack {
  display: grid;
  place-items: center;
  gap: 10px;
}

.feedback-score {
  color: var(--ink);
  font-size: clamp(1rem, 2.2vw, 1.7rem);
  text-shadow:
    0 0 8px rgba(242, 189, 75, 0.95),
    0 0 20px rgba(242, 189, 75, 0.55),
    0 3px 16px rgba(0, 0, 0, 0.75);
}

.shift-ready {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: grid;
  place-items: center;
  color: var(--gold);
  font-size: clamp(2.4rem, 8vw, 7rem);
  font-weight: 900;
  text-shadow:
    0 0 10px rgba(242, 189, 75, 0.95),
    0 0 28px rgba(242, 189, 75, 0.72),
    0 0 60px rgba(64, 201, 178, 0.42);
  animation: shift-ready-pulse 780ms ease-in-out infinite;
}

@keyframes shift-ready-pulse {
  0%,
  100% {
    transform: scale(0.96);
    opacity: 0.78;
  }

  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

.feedback.hit {
  color: var(--teal);
  animation: neon-feedback 420ms ease-out both;
  text-shadow:
    0 0 8px rgba(64, 201, 178, 0.95),
    0 0 18px rgba(64, 201, 178, 0.85),
    0 0 38px rgba(242, 189, 75, 0.55),
    0 4px 22px rgba(0, 0, 0, 0.8);
}

.feedback.miss {
  color: var(--red);
}

@keyframes neon-feedback {
  0% {
    transform: scale(0.82);
    filter: brightness(1.35);
    opacity: 0;
  }

  28% {
    transform: scale(1.22);
    filter: brightness(1.8);
    opacity: 1;
  }

  55% {
    transform: scale(0.94);
  }

  78% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
    filter: brightness(1.1);
    opacity: 0.96;
  }
}

.prompt-strip {
  min-height: 0;
  max-height: 5.1rem;
  padding: clamp(8px, 1vw, 14px) 16px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  line-height: 1.45;
  overflow-wrap: anywhere;
  overflow: hidden;
}

#typedText {
  color: var(--green);
}

#nextText {
  color: var(--ink);
}

.prompt-space {
  display: inline-grid;
  place-items: center;
  min-width: 4.8em;
  margin: 0 0.18em;
  padding: 0.08em 0.45em;
  border: 1px solid currentColor;
  border-radius: 6px;
  font-size: 0.72em;
  font-weight: 900;
  vertical-align: 0.12em;
  letter-spacing: 0;
  opacity: 0.95;
}

.control-panel {
  min-height: 0;
  padding: clamp(10px, 1.2vw, 18px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vw, 16px);
  overflow: hidden;
}

.levels {
  display: grid;
  gap: clamp(5px, 0.7vw, 8px);
}

.category-tabs,
.report-actions {
  gap: 8px;
}

.report-actions small {
  flex: 1.6;
  color: var(--muted);
  font-size: 0.65rem;
  line-height: 1.35;
}

.category-tabs button,
.report-actions button {
  flex: 1;
  min-height: 36px;
  padding: 0 10px;
}

.category-tabs button.is-selected {
  color: #17120a;
  background: var(--gold);
  border-color: var(--gold);
  font-weight: 800;
}

.level-option {
  width: 100%;
  justify-content: space-between;
  gap: 12px;
  min-height: 0;
  padding: clamp(8px, 0.8vw, 12px);
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}

.level-option[aria-selected="true"] {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold);
}

.level-option span {
  color: var(--muted);
  font-size: 0.84rem;
}

.buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.buttons button {
  min-width: 0;
  padding-inline: 7px;
  font-size: 0.76rem;
}

#musicToggleButton.is-muted {
  color: var(--gold);
  border-color: rgba(242, 189, 75, 0.65);
  background: rgba(242, 189, 75, 0.08);
}

.music-genre-panel {
  display: grid;
  gap: 5px;
  padding: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.music-genre-panel label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
}

.music-genre-panel select,
.quest-live-controls select,
.quest-setup-panel select {
  min-height: 34px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
}

.music-genre-panel small {
  color: var(--muted);
}

button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 16px;
  color: var(--ink);
  background: var(--panel-2);
  cursor: pointer;
}

button.primary {
  background: var(--gold);
  color: #17120a;
  border-color: var(--gold);
  font-weight: 800;
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.track-panel,
.lesson-panel,
.account-panel,
.speed-panel,
.power-panel {
  margin-top: auto;
  padding-top: clamp(8px, 0.9vw, 14px);
  border-top: 1px solid var(--line);
}

.speed-panel,
.lesson-panel,
.account-panel,
.power-panel {
  position: relative;
  margin-top: 0;
}

.speed-panel label {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.speed-panel span,
.power-head span,
.profile-stats span {
  color: var(--muted);
  font-size: 0.84rem;
}

.power-head {
  justify-content: space-between;
  gap: 12px;
}

.power-bar {
  height: 14px;
  margin: 9px 0 7px;
  background: #101317;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.power-bar span {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--teal), var(--gold));
  box-shadow: 0 0 18px rgba(64, 201, 178, 0.45);
  transition: width 160ms ease;
}

#powerStatus {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.35;
}

.power-panel.is-ready .power-bar {
  animation: power-ready-pulse 780ms ease-in-out infinite;
  box-shadow:
    0 0 16px rgba(242, 189, 75, 0.45),
    0 0 34px rgba(64, 201, 178, 0.28);
}

.power-panel.is-ready::after {
  content: "";
  pointer-events: none;
  position: absolute;
  right: 8px;
  top: 24px;
  width: 120px;
  height: 44px;
  background:
    radial-gradient(circle, rgba(242, 189, 75, 0.95) 0 2px, transparent 3px) 8% 52% / 24px 18px,
    radial-gradient(circle, rgba(64, 201, 178, 0.95) 0 2px, transparent 3px) 42% 18% / 28px 24px,
    radial-gradient(circle, rgba(178, 137, 255, 0.95) 0 2px, transparent 3px) 72% 62% / 24px 18px;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 8px rgba(242, 189, 75, 0.7));
  animation: power-sparks 520ms linear infinite;
}

.power-panel.is-warrior .power-bar span {
  background: linear-gradient(90deg, var(--gold), var(--red), var(--violet), var(--teal));
}

@keyframes power-ready-pulse {
  0%,
  100% {
    transform: scaleX(1);
    filter: brightness(1.05);
  }

  50% {
    transform: scaleX(1.015);
    filter: brightness(1.65);
  }
}

@keyframes power-sparks {
  0% {
    transform: translateY(8px) scale(0.85);
    opacity: 0;
  }

  35% {
    opacity: 1;
  }

  100% {
    transform: translateY(-18px) scale(1.12);
    opacity: 0;
  }
}

input[type="range"] {
  width: 100%;
  accent-color: var(--gold);
}

.track-head {
  justify-content: space-between;
  gap: 10px;
}

.track-head span {
  font-weight: 800;
}

.progress {
  height: 10px;
  margin: 12px 0;
  background: #101317;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.progress span {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--gold), var(--red));
}

#levelDescription {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

#lessonTip,
#lastSession {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  font-size: 0.92rem;
}

.keys {
  flex-wrap: wrap;
  gap: 8px;
}

kbd {
  min-width: 42px;
  min-height: 38px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-bottom-width: 3px;
  border-radius: 6px;
  background: #101317;
  color: var(--ink);
  font-weight: 800;
}

.profile-row {
  gap: 8px;
  align-items: stretch;
}

.profile-row input {
  min-width: 0;
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--ink);
  background: #101317;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0;
}

.profile-stats div {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
}

.profile-stats strong {
  display: block;
  margin-top: 2px;
}

.report-modal,
.pet-modal,
.tutorial-modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.68);
}

.report-modal.is-open,
.pet-modal.is-open,
.tutorial-modal.is-open {
  display: grid;
}

.report-card,
.tutorial-card {
  width: min(960px, 100%);
  max-height: min(760px, calc(100dvh - 40px));
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

.report-card-head,
.tutorial-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.tutorial-card {
  width: min(900px, 100%);
}

.tutorial-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.6fr);
  gap: 18px;
  align-items: center;
}

.tutorial-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.tutorial-tabs button {
  flex: 1;
  min-height: 38px;
}

.tutorial-tabs button.is-selected {
  color: #17120a;
  background: var(--gold);
  border-color: var(--gold);
  font-weight: 800;
}

.tutorial-keyboard {
  position: relative;
  min-height: 360px;
  display: grid;
  align-content: end;
  gap: 28px;
  padding: 34px 28px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 12.5% 100%,
    #101317;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.tutorial-view,
.tutorial-copy {
  display: none;
}

.tutorial-view.is-active {
  display: grid;
}

.tutorial-copy.is-active {
  display: block;
}

.tutorial-row,
.tutorial-space {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.tutorial-row kbd,
.tutorial-space kbd {
  min-width: 58px;
  min-height: 50px;
  border-color: var(--gold);
  color: var(--ink);
  box-shadow: 0 0 18px rgba(242, 189, 75, 0.28);
}

.tutorial-row kbd:nth-child(-n + 4) {
  border-color: var(--teal);
  box-shadow: 0 0 18px rgba(64, 201, 178, 0.35);
}

.tutorial-row kbd:nth-child(n + 5) {
  border-color: var(--blue);
  box-shadow: 0 0 18px rgba(103, 167, 255, 0.35);
}

.tutorial-space {
  align-items: center;
}

.tutorial-space kbd {
  min-width: 240px;
  border-color: var(--gold);
}

.tutorial-finger-row {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 186px;
  display: grid;
  grid-template-columns: repeat(8, minmax(58px, 1fr));
  gap: 10px;
  pointer-events: none;
}

.tutorial-finger-row span {
  min-height: 78px;
  display: grid;
  place-items: end center;
  padding-bottom: 8px;
  border-radius: 999px 999px 16px 16px;
  color: #101317;
  background: linear-gradient(180deg, var(--ink), var(--gold));
  font-size: 0.62rem;
  font-weight: 900;
  animation: finger-place 4.8s ease-in-out infinite;
  animation-delay: calc(var(--finger) * 140ms);
  box-shadow: 0 0 20px rgba(242, 189, 75, 0.32);
}

.left-finger {
  background: linear-gradient(180deg, var(--ink), var(--teal));
}

.right-finger {
  background: linear-gradient(180deg, var(--ink), var(--blue));
}

.thumb-mark {
  width: 86px;
  min-height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #101317;
  background: var(--gold);
  font-size: 0.72rem;
  font-weight: 900;
  animation: thumb-tap 2.4s ease-in-out infinite;
  box-shadow: 0 0 18px rgba(242, 189, 75, 0.5);
}

.right-thumb {
  animation-delay: 1.2s;
}

.tutorial-steps {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.65;
}

.tutorial-steps strong {
  color: var(--ink);
}

.reach-view {
  align-content: center;
}

.show-me-button {
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 2;
  min-height: 36px;
  color: #17120a;
  background: var(--gold);
  border-color: var(--gold);
  font-weight: 900;
}

.reach-board {
  display: grid;
  grid-template-columns: repeat(8, minmax(58px, 1fr));
  gap: 10px;
  align-items: center;
}

.reach-board kbd,
.reach-finger {
  min-height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-weight: 900;
}

.reach-board kbd {
  border: 1px solid var(--line);
  background: #101317;
}

.reach-board kbd:nth-of-type(8n + 1),
.reach-board kbd:nth-of-type(8n + 2),
.reach-board kbd:nth-of-type(8n + 3),
.reach-board kbd:nth-of-type(8n + 4) {
  border-color: var(--teal);
  box-shadow: 0 0 14px rgba(64, 201, 178, 0.24);
}

.reach-board kbd:nth-of-type(8n + 5),
.reach-board kbd:nth-of-type(8n + 6),
.reach-board kbd:nth-of-type(8n + 7),
.reach-board kbd:nth-of-type(8n + 8) {
  border-color: var(--blue);
  box-shadow: 0 0 14px rgba(103, 167, 255, 0.24);
}

.reach-finger {
  min-height: 54px;
  color: #101317;
  font-size: 0.72rem;
  animation: reach-pulse 3.2s ease-in-out infinite;
}

.reach-finger.left-finger {
  background: linear-gradient(180deg, var(--ink), var(--teal));
}

.reach-finger.right-finger {
  background: linear-gradient(180deg, var(--ink), var(--blue));
}

.reach-view.is-showing .reach-board .reach-finger:first-child {
  position: relative;
  z-index: 3;
  animation: pinky-reach-qz 7.2s ease-in-out 1;
  box-shadow:
    0 0 18px rgba(64, 201, 178, 0.75),
    0 0 34px rgba(242, 189, 75, 0.42);
}

.reach-view.is-showing .reach-board kbd:nth-of-type(1),
.reach-view.is-showing .reach-board kbd:nth-of-type(9),
.reach-view.is-showing .reach-board kbd:nth-of-type(17) {
  animation: reach-key-glow 7.2s ease-in-out 1;
}

@keyframes reach-pulse {
  0%,
  100% {
    transform: translateY(0);
    filter: brightness(1);
  }

  50% {
    transform: translateY(-6px);
    filter: brightness(1.35);
  }
}

@keyframes pinky-reach-qz {
  0% {
    transform: translateY(0);
  }

  10%,
  22% {
    transform: translateY(62px);
  }

  35%,
  47% {
    transform: translateY(0);
  }

  60%,
  72% {
    transform: translateY(62px);
  }

  85%,
  95% {
    transform: translateY(124px);
  }

  100% {
    transform: translateY(62px);
  }
}

@keyframes reach-key-glow {
  0%,
  100% {
    filter: brightness(1);
  }

  10%,
  22%,
  35%,
  47%,
  60%,
  72%,
  85%,
  95% {
    filter: brightness(1.75);
    box-shadow: 0 0 24px rgba(242, 189, 75, 0.65);
  }
}

@keyframes finger-place {
  0%,
  100% {
    transform: translateY(-48px);
    opacity: 0.62;
  }

  35%,
  72% {
    transform: translateY(92px);
    opacity: 1;
  }
}

@keyframes thumb-tap {
  0%,
  100% {
    transform: translateY(-8px) scale(0.96);
  }

  50% {
    transform: translateY(8px) scale(1.04);
  }
}

.report-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.report-summary div {
  padding: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.report-summary span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}

.report-summary strong {
  display: block;
  margin-top: 2px;
}

.report-table-wrap {
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

th,
td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

th {
  position: sticky;
  top: 0;
  background: var(--panel-2);
}

@media (max-width: 980px) {
  html,
  body {
    height: auto;
    overflow: auto;
  }

  .menu-panel {
    padding-inline: 28px;
  }

  .student-music-card {
    grid-template-columns: 1fr;
  }

  .student-music-footer {
    grid-column: 1;
  }

  .landing-nav {
    min-height: 82px;
  }

  .landing-links [data-public-nav] {
    display: none;
  }

  .landing-hero {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 44px;
    padding: 72px 0 82px;
  }

  .menu-hero {
    max-width: 760px;
  }

  .menu-hero h1 {
    max-width: 14ch;
    font-size: 4.25rem;
  }

  .curriculum-video {
    width: min(760px, 100%);
  }

  .video-stage {
    height: 420px;
  }

  .lane-note {
    animation-name: preview-note-tablet;
  }

  .showcase-grid {
    grid-template-columns: 1fr;
  }

  .showcase-card {
    min-height: 390px;
  }

  .showcase-heading h2,
  .section-heading h2 {
    font-size: 3.35rem;
  }

  .section-heading {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 16px;
  }

  .section-heading > p {
    max-width: 650px;
  }

  .menu-grid {
    grid-template-columns: 1fr;
  }

  .setup-grid,
  .hub-grid,
  .achievement-grid,
  .class-menu-grid {
    grid-template-columns: 1fr;
  }

  .parent-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .parent-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .login-row {
    grid-template-columns: 1fr;
  }

  .account-menu-card {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .account-menu-card .eyebrow,
  .account-menu-card h2,
  .account-menu-card .profile-row,
  #menuAccountStatus {
    grid-column: 1;
    grid-row: auto;
  }

  #menuAccountStatus {
    justify-self: start;
    text-align: left;
  }

  .class-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shell {
    height: auto;
    min-height: 100dvh;
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .control-panel {
    order: -1;
    overflow: visible;
  }

  .game-wrap,
  canvas {
    min-height: 360px;
  }
}

@media (max-width: 680px) {
  .main-menu,
  .class-view {
    align-items: start;
  }

  .menu-panel {
    padding-inline: 16px;
    padding-bottom: 60px;
  }

  .landing-nav {
    min-height: 76px;
  }

  .brand-mark {
    width: 47px;
    height: 38px;
  }

  .brand-mark span {
    width: 31px;
    height: 31px;
  }

  .brand-copy small {
    display: none;
  }

  .landing-links {
    gap: 5px;
  }

  .landing-links [data-public-nav] {
    display: none;
  }

  .landing-links button {
    min-height: 38px;
    padding: 0 10px;
    font-size: 0.78rem;
  }

  .landing-links #setupAccountTab {
    display: none;
  }

  .landing-hero {
    gap: 36px;
    padding: 54px 0 62px;
  }

  .menu-hero {
    gap: 15px;
  }

  .menu-hero h1 {
    font-size: 3.2rem;
    line-height: 0.98;
  }

  .menu-hero > p:not(.eyebrow) {
    font-size: 1rem;
    line-height: 1.55;
  }

  .hero-actions {
    display: grid;
  }

  .hero-actions button {
    width: 100%;
  }

  .family-promises {
    gap: 8px 14px;
  }

  .curriculum-video {
    padding: 8px;
  }

  .video-topline {
    min-height: 58px;
  }

  .video-hud span {
    display: grid;
    gap: 3px;
  }

  .video-stage {
    height: 330px;
  }

  .lane-note {
    width: 32px;
    height: 30px;
    animation-name: preview-note-mobile;
  }

  .lane-note-d {
    width: 70px;
    left: 36%;
    font-size: 0.66rem;
  }

  .video-reward strong {
    font-size: 1.5rem;
  }

  .video-keys {
    gap: 3px;
  }

  .video-keys kbd {
    min-height: 38px;
    font-size: 0.72rem;
  }

  .landing-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing-stats div {
    min-height: 108px;
    border-bottom: 1px solid rgba(174, 183, 188, 0.16);
  }

  .landing-stats div:nth-child(2n) {
    border-right: 0;
  }

  .curriculum-showcase {
    padding: 72px 0;
  }

  .showcase-heading h2,
  .section-heading h2 {
    font-size: 2.55rem;
  }

  .showcase-card {
    min-height: 400px;
  }

  .typing-visual kbd {
    min-width: 44px;
    min-height: 44px;
  }

  .setup-grid {
    gap: 12px;
  }

  .account-form-card {
    min-height: 0;
  }

  .menu-grid,
  .setup-grid,
  .hub-grid,
  .achievement-grid,
  .class-content {
    grid-template-columns: 1fr;
  }

  .student-head,
  .progress-card-head,
  .student-actions,
  .parent-command-head,
  .parent-section-head,
  .parent-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .student-reset-control {
    max-width: none;
    justify-items: stretch;
    text-align: left;
  }

  .parent-student-grid {
    grid-template-columns: 1fr;
  }

  .student-genre-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .student-music-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .student-music-footer > button {
    width: 100%;
  }

  .parent-command-head,
  .parent-student-section,
  .parent-monitor,
  .billing-panel {
    padding: 16px;
  }

  .parent-command-head h2 {
    font-size: 1.65rem;
  }

  .parent-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .parent-summary-tile {
    min-height: 100px;
    padding: 13px;
  }

  .student-mini-stats,
  .parent-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .skill-progress-row {
    grid-template-columns: 110px minmax(0, 1fr) 42px;
    gap: 8px;
  }

  .billing-preview-banner {
    grid-template-columns: 1fr;
  }

  .pet-picker {
    grid-template-columns: 1fr;
  }

  .menu-card,
  .class-card {
    min-height: 0;
  }

  .class-head {
    flex-direction: column;
  }

  .shell {
    padding: 12px;
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .meter-row {
    min-width: 0;
    grid-template-columns: repeat(2, 1fr);
  }

  .meter {
    padding: 8px;
  }

  .meter strong {
    font-size: 1rem;
  }

  .tutorial-stage {
    grid-template-columns: 1fr;
  }

  .tutorial-keyboard {
    min-height: 320px;
    padding: 26px 12px;
  }

  .tutorial-finger-row {
    left: 12px;
    right: 12px;
    bottom: 176px;
    grid-template-columns: repeat(8, minmax(36px, 1fr));
    gap: 5px;
  }

  .tutorial-finger-row span {
    min-height: 68px;
    font-size: 0.52rem;
  }

  .tutorial-row kbd {
    min-width: 36px;
  }

  .tutorial-space kbd {
    min-width: 150px;
  }

  .reach-board {
    grid-template-columns: repeat(4, minmax(48px, 1fr));
  }
}

@media (max-width: 430px) {
  .student-genre-options {
    grid-template-columns: 1fr;
  }

  .brand-copy strong {
    max-width: 9ch;
    line-height: 1;
  }

  .menu-hero h1 {
    font-size: 2.65rem;
    line-height: 0.94;
  }

  .menu-hero .eyebrow {
    font-size: 0.64rem;
  }

  .video-hud span {
    padding: 6px;
  }

  .family-promises span:last-child {
    flex-basis: 100%;
  }

  .landing-hero {
    gap: 14px;
    padding: 20px 0 16px;
  }

  .menu-hero > p:not(.eyebrow) {
    line-height: 1.45;
  }

  .family-promises {
    display: none;
  }

  .curriculum-video {
    height: 212px;
    padding: 7px;
  }

  .video-topline {
    position: absolute;
    z-index: 10;
    top: 8px;
    left: 12px;
    right: 12px;
    min-height: 52px;
    padding: 6px 8px;
    background: rgba(9, 12, 16, 0.8);
    border-bottom: 1px solid rgba(174, 183, 188, 0.16);
  }

  .video-hud,
  .video-caption {
    display: none;
  }

  .video-stage {
    height: 196px;
  }

  .lane-note {
    animation-name: preview-note-phone;
  }

  .video-reward {
    top: 43%;
  }
}

@keyframes preview-note-tablet {
  0% { transform: translateY(-54px) scale(0.72); opacity: 0; }
  8% { opacity: 1; }
  88% { transform: translateY(318px) scale(1); opacity: 1; }
  94% { transform: translateY(329px) scale(1.28); opacity: 1; filter: brightness(1.8); }
  100% { transform: translateY(346px) scale(0.6); opacity: 0; }
}

@keyframes preview-note-mobile {
  0% { transform: translateY(-44px) scale(0.72); opacity: 0; }
  8% { opacity: 1; }
  88% { transform: translateY(235px) scale(1); opacity: 1; }
  94% { transform: translateY(246px) scale(1.25); opacity: 1; filter: brightness(1.8); }
  100% { transform: translateY(262px) scale(0.6); opacity: 0; }
}

@keyframes preview-note-phone {
  0% { transform: translateY(-44px) scale(0.72); opacity: 0; }
  8% { opacity: 1; }
  88% { transform: translateY(94px) scale(1); opacity: 1; }
  94% { transform: translateY(105px) scale(1.25); opacity: 1; filter: brightness(1.8); }
  100% { transform: translateY(122px) scale(0.6); opacity: 0; }
}

@media (max-height: 900px) and (min-width: 981px) {
  .landing-hero {
    min-height: 0;
    padding: 42px 0;
  }

  .video-stage {
    --preview-stage: 280px;
  }

  .curriculum-video {
    max-width: 620px;
    justify-self: end;
  }

  .eyebrow {
    font-size: 0.7rem;
    margin-bottom: 2px;
  }

  .control-panel {
    gap: 6px;
    padding: 10px;
  }

  .level-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }

  .level-header .eyebrow {
    margin: 0;
  }

  h2 {
    font-size: 1.12rem;
  }

  .meter {
    padding: 7px 9px;
  }

  .meter strong {
    font-size: 1rem;
  }

  .buttons button {
    min-height: 32px;
  }

  .category-tabs button {
    min-height: 34px;
  }

  .levels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  .levels .level-option:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .level-option {
    min-height: 36px;
    padding: 6px 9px;
  }

  .level-option strong {
    font-size: 0.86rem;
  }

  .level-option span {
    font-size: 0.72rem;
  }

  .speed-panel,
  .power-panel {
    padding-top: 6px;
  }

  .speed-panel label {
    margin-bottom: 3px;
  }

  .power-bar {
    height: 10px;
    margin: 4px 0;
  }

  #powerStatus {
    font-size: 0.76rem;
    line-height: 1.2;
  }

  .music-genre-panel {
    gap: 2px;
    padding: 7px 9px;
  }

  .music-genre-panel select {
    min-height: 30px;
  }

  .music-genre-panel small {
    font-size: 0.72rem;
  }

  .buttons {
    gap: 5px;
  }

  .track-panel,
  .lesson-panel,
  .control-panel > .keys,
  .account-panel {
    display: none;
  }

  .keys {
    gap: 5px;
  }

  kbd {
    min-width: 34px;
    min-height: 30px;
  }

  .profile-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .profile-stats span {
    font-size: 0.72rem;
  }

  #lessonTip,
  #levelDescription,
  #lastSession {
    font-size: 0.82rem;
    line-height: 1.3;
  }
}

@media (max-width: 1050px) {
  .curriculum-dashboard,
  .certificate-layout,
  .course-guide-head,
  .course-guide-grid {
    grid-template-columns: 1fr;
  }

  .curriculum-rail,
  .certificate-status-panel,
  .course-guide-rail {
    position: static;
  }

  .curriculum-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .course-progress-panel {
    grid-column: 1 / -1;
  }

  .age-level-grid {
    grid-template-columns: 1fr;
  }

  .lesson-task-workspace {
    grid-template-columns: 1fr;
  }

  .lesson-task-card:nth-child(2) {
    grid-row: auto;
  }

  .parent-certificate-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .curriculum-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .curriculum-tabs button {
    min-width: 0;
    padding: 0 8px;
    font-size: 12px;
    overflow-wrap: anywhere;
  }

  .curriculum-hero {
    min-height: 520px;
  }

  .curriculum-hero-shade {
    background: linear-gradient(0deg, rgba(8, 11, 15, 0.98) 0 50%, rgba(8, 11, 15, 0.25) 100%);
  }

  .curriculum-hero-copy {
    position: absolute;
    right: 0;
    bottom: 118px;
    left: 0;
    width: auto;
    padding: 22px;
  }

  .curriculum-hero-copy h2 {
    max-width: none;
    font-size: 34px;
  }

  .curriculum-hero-copy > p:not(.eyebrow) {
    font-size: 14px;
  }

  .curriculum-hero-stats {
    right: 14px;
    bottom: 14px;
    left: 14px;
  }

  .curriculum-hero-stats div {
    padding: 11px 8px;
  }

  .curriculum-section-head,
  .rail-panel-head,
  .quiz-submit-row {
    align-items: stretch;
    flex-direction: column;
  }

  .curriculum-rail {
    grid-template-columns: 1fr;
  }

  .course-progress-panel {
    grid-column: auto;
  }

  .curriculum-lesson-card {
    grid-template-columns: 82px minmax(0, 1fr) 14px;
    gap: 10px;
    min-height: 112px;
    padding-right: 10px;
  }

  .lesson-thumb {
    min-height: 110px;
  }

  .lesson-card-copy > span {
    display: none;
  }

  .lesson-detail-hero,
  .quiz-detail-hero {
    grid-template-columns: 1fr;
  }

  .lesson-detail-hero > img,
  .quiz-detail-hero > img {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .lesson-detail-grid,
  .level-guidance {
    grid-template-columns: 1fr;
  }

  .lesson-detail-grid > section:nth-child(even) {
    border-left: 0;
  }

  .quiz-submit-row button {
    width: 100%;
  }

  .lesson-task-links,
  .certificate-scope-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lesson-task-links button,
  .certificate-scope-tabs button {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .lesson-completion-banner,
  .parent-records-head {
    align-items: stretch;
    flex-direction: column;
  }

  .lesson-completion-banner span {
    text-align: left;
  }

  .parent-certificate-grid {
    grid-template-columns: 1fr;
  }

  .certificate-copy {
    inset: 8% 11%;
  }

  .certificate-areas {
    display: none;
  }

  .semester-map,
  .guide-check-grid,
  .course-format-stats {
    grid-template-columns: 1fr;
  }

  .course-guide-head {
    padding: 22px;
  }

  .course-guide-head h2 {
    font-size: 32px;
  }
}

/* Character Arcade */
.character-arcade-panel {
  margin-top: 28px;
  padding: clamp(20px, 3vw, 30px);
  overflow: hidden;
  border: 1px solid rgba(43, 208, 190, 0.45);
  border-radius: 24px;
  background:
    radial-gradient(circle at 90% 10%, rgba(43, 208, 190, 0.14), transparent 30%),
    linear-gradient(145deg, rgba(24, 32, 40, 0.98), rgba(13, 19, 25, 0.98));
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.28);
}

.arcade-panel-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.arcade-panel-intro h2,
.parent-arcade-head h3 {
  margin: 4px 0 8px;
}

.arcade-panel-intro p,
.parent-arcade-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.arcade-panel-character {
  min-width: 210px;
  padding: 14px 18px;
  display: grid;
  justify-items: center;
  gap: 6px;
  border: 1px solid rgba(103, 167, 255, 0.28);
  border-radius: 18px;
  background: rgba(5, 10, 15, 0.62);
}

.arcade-panel-character strong {
  text-align: center;
}

.pet-size-arcade {
  width: 124px;
  height: 118px;
}

.arcade-game-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.arcade-card {
  --arcade-accent: var(--gold);
  min-height: 165px;
  padding: 17px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
  gap: 12px;
  color: var(--ink);
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--arcade-accent) 55%, transparent);
  border-radius: 18px;
  background: rgba(7, 12, 18, 0.76);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.arcade-card:hover,
.arcade-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--arcade-accent);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--arcade-accent) 18%, transparent);
}

.arcade-card-typing { --arcade-accent: var(--gold); }
.arcade-card-safety { --arcade-accent: var(--teal); }
.arcade-card-digital { --arcade-accent: var(--blue); }

.arcade-card-icon {
  font-size: 2rem;
  line-height: 1;
}

.arcade-card > span:nth-child(2) {
  display: grid;
  align-content: start;
  gap: 6px;
}

.arcade-card strong {
  font-size: 1.05rem;
}

.arcade-card small {
  color: var(--muted);
  line-height: 1.45;
}

.arcade-card em {
  color: var(--arcade-accent);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.arcade-card b {
  grid-column: 1 / -1;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--arcade-accent);
  font-size: 0.82rem;
}

.arcade-shell {
  min-height: 100vh;
  padding: 24px;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 8%, rgba(103, 167, 255, 0.13), transparent 28%),
    radial-gradient(circle at 86% 22%, rgba(43, 208, 190, 0.12), transparent 24%),
    var(--bg);
}

.arcade-topbar,
.arcade-layout {
  width: min(1500px, 100%);
  margin-inline: auto;
}

.arcade-topbar {
  margin-bottom: 22px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(17, 24, 31, 0.94);
}

.arcade-identity {
  display: flex;
  align-items: center;
  gap: 16px;
}

.arcade-identity-copy {
  display: grid;
  gap: 3px;
}

.arcade-identity-copy span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.arcade-identity-copy strong {
  font-size: 1.15rem;
}

.arcade-layout {
  display: grid;
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
  gap: 22px;
}

.arcade-picker,
.arcade-stage {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(17, 24, 31, 0.95);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.25);
}

.arcade-picker {
  padding: 16px;
  display: grid;
  align-content: start;
  gap: 10px;
}

.arcade-picker > button {
  min-height: 52px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #111820;
  cursor: pointer;
}

.arcade-picker > button.is-active {
  color: #071111;
  border-color: var(--teal);
  background: var(--teal);
}

.arcade-progress-list {
  margin-top: 8px;
  display: grid;
  gap: 8px;
}

.arcade-progress-card {
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(5, 10, 15, 0.45);
}

.arcade-progress-card > span {
  font-size: 1.35rem;
}

.arcade-progress-card div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.arcade-progress-card small {
  color: var(--muted);
  line-height: 1.35;
}

.arcade-stage {
  min-height: 650px;
  padding: clamp(20px, 4vw, 38px);
}

.arcade-stage h2 {
  margin: 4px 0 8px;
  font-size: clamp(2rem, 5vw, 3.7rem);
}

.arcade-description {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.55;
}

.arcade-hud {
  margin: 20px 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.arcade-hud div {
  padding: 10px 12px;
  display: grid;
  gap: 3px;
  border: 1px solid rgba(103, 167, 255, 0.24);
  border-radius: 12px;
  background: rgba(5, 10, 15, 0.55);
  font-weight: 850;
}

.arcade-hud div > span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.arcade-scene {
  min-height: 210px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  border: 1px solid rgba(43, 208, 190, 0.35);
  border-radius: 20px;
  background:
    linear-gradient(rgba(43, 208, 190, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 208, 190, 0.04) 1px, transparent 1px),
    radial-gradient(circle, rgba(43, 208, 190, 0.11), rgba(4, 9, 14, 0.82));
  background-size: 24px 24px, 24px 24px, auto;
}

.keyboard-quest-cockpit {
  position: relative;
  width: 100%;
  min-height: 680px;
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(520px, 1fr) 148px;
  color: #eefbff;
  border: 2px solid color-mix(in srgb, var(--quest-accent) 60%, #0a1822);
  border-radius: 20px;
  background: #050b12;
  box-shadow: inset 0 0 45px rgba(0, 0, 0, 0.84), 0 0 30px color-mix(in srgb, var(--quest-accent) 18%, transparent);
  isolation: isolate;
}

.quest-viewport {
  position: relative;
  min-height: 520px;
  overflow: hidden;
  border-bottom: 5px solid #172735;
  background:
    radial-gradient(circle at 50% 115%, color-mix(in srgb, var(--quest-accent) 18%, transparent), transparent 43%),
    linear-gradient(#02050b, #06111d 70%, #0a1d2b);
  perspective: 900px;
}

.quest-viewport::before,
.quest-viewport::after {
  content: "";
  position: absolute;
  z-index: 12;
  pointer-events: none;
}

.quest-viewport::before {
  inset: 0;
  border: 18px solid #111d27;
  border-width: 15px 24px 10px;
  clip-path: polygon(0 0, 100% 0, 96% 100%, 4% 100%);
  box-shadow: inset 0 0 16px #000;
}

.quest-viewport::after {
  left: 50%;
  bottom: -58px;
  width: 70%;
  height: 110px;
  translate: -50% 0;
  border-radius: 50%;
  background: #172632;
  box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.8);
}

.quest-stars {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.quest-deep-space {
  position: absolute;
  inset: -35%;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 4%, rgba(48, 120, 180, 0.08) 18%, transparent 42%),
    radial-gradient(ellipse at 20% 75%, rgba(76, 42, 131, 0.22), transparent 28%),
    radial-gradient(ellipse at 80% 18%, rgba(20, 104, 144, 0.18), transparent 24%),
    #01040a;
}

.quest-deep-space i {
  position: absolute;
  inset: 0;
  opacity: 0.6;
  background-image:
    radial-gradient(circle, #fff 0 1px, transparent 1.8px),
    radial-gradient(circle, #a6dfff 0 1px, transparent 1.7px),
    radial-gradient(circle, #fff 0 0.7px, transparent 1.4px);
  background-position: 11px 17px, 67px 93px, 131px 42px;
  background-size: 143px 167px, 211px 197px, 97px 131px;
}

.quest-deep-space i:nth-child(2) {
  opacity: 0.4;
  rotate: 37deg;
  scale: 1.35;
}

.quest-deep-space i:nth-child(3) {
  opacity: 0.28;
  rotate: -28deg;
  scale: 1.8;
}

.quest-deep-space.is-flying i:nth-child(1) { animation: quest-space-rush 3.8s -2.4s linear infinite; }
.quest-deep-space.is-flying i:nth-child(2) { animation: quest-space-rush 5.2s -1.1s linear infinite; }
.quest-deep-space.is-flying i:nth-child(3) { animation: quest-space-rush 6.8s -4.6s linear infinite; }

.quest-stars i {
  position: absolute;
  left: var(--star-x);
  top: var(--star-y);
  width: var(--star-size);
  height: var(--star-size);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px #9ddcff;
  animation: quest-star-twinkle 2.8s var(--star-delay) ease-in-out infinite;
}

.quest-stars.is-warping i {
  height: calc(var(--star-size) * 12);
  border-radius: 999px;
  opacity: 0.78;
  transform-origin: center top;
  animation: quest-star-flight 1.45s var(--star-delay) linear infinite;
}

.quest-nebula {
  position: absolute;
  inset: 5% 8% 20%;
  opacity: 0.5;
  filter: blur(18px);
  background:
    radial-gradient(ellipse at 18% 45%, color-mix(in srgb, var(--quest-accent) 32%, transparent), transparent 35%),
    radial-gradient(ellipse at 76% 24%, rgba(113, 81, 211, 0.22), transparent 30%);
  animation: quest-nebula-drift 9s ease-in-out infinite alternate;
}

.quest-planet {
  position: absolute;
  right: 6%;
  bottom: 7%;
  width: clamp(150px, 21vw, 285px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.92;
  background:
    radial-gradient(circle at 32% 27%, rgba(255, 255, 255, 0.7), transparent 5%),
    repeating-linear-gradient(171deg, transparent 0 14%, rgba(255, 255, 255, 0.1) 15% 18%, transparent 20% 27%),
    linear-gradient(145deg, color-mix(in srgb, var(--quest-accent) 75%, white), color-mix(in srgb, var(--quest-accent) 48%, #07101a) 60%, #03080d);
  box-shadow: inset -48px -28px 58px rgba(0, 0, 0, 0.78), inset 16px 12px 24px rgba(255, 255, 255, 0.14), 0 0 44px color-mix(in srgb, var(--quest-accent) 32%, transparent);
  animation: quest-planet-drift 18s ease-in-out infinite alternate;
}

.quest-planet::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -33%;
  top: 42%;
  width: 166%;
  height: 23%;
  border: clamp(7px, 1.4vw, 17px) solid rgba(177, 212, 225, 0.48);
  border-left-color: transparent;
  border-right-color: transparent;
  border-radius: 50%;
  rotate: -12deg;
  box-shadow: 0 0 14px rgba(137, 205, 235, 0.3);
}

.quest-planet i,
.quest-planet b {
  position: absolute;
  border-radius: 50%;
  background: rgba(18, 47, 64, 0.3);
  box-shadow: inset 3px 3px 5px rgba(255, 255, 255, 0.08);
}

.quest-planet i { left: 19%; top: 23%; width: 19%; height: 12%; rotate: -18deg; }
.quest-planet b { right: 21%; top: 57%; width: 27%; height: 9%; rotate: 12deg; }

.quest-moon {
  position: absolute;
  left: 10%;
  top: 18%;
  width: clamp(34px, 5vw, 68px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.8;
  background:
    radial-gradient(circle at 28% 36%, rgba(0, 0, 0, 0.36) 0 9%, transparent 10%),
    radial-gradient(circle at 64% 62%, rgba(0, 0, 0, 0.28) 0 13%, transparent 14%),
    linear-gradient(135deg, #d8e4e8, #61717a 60%, #151d22);
  box-shadow: inset -12px -9px 16px rgba(0, 0, 0, 0.55), 0 0 18px rgba(193, 227, 242, 0.24);
}

.keyboard-quest-cockpit.is-flying .quest-planet { animation: quest-planet-flight 16s linear infinite; }
.keyboard-quest-cockpit.is-flying .quest-moon { animation: quest-moon-flight 11s linear infinite; }

.quest-scanlines {
  position: absolute;
  z-index: 11;
  inset: 0;
  pointer-events: none;
  opacity: 0.24;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(122, 224, 255, 0.12) 3px 4px);
}

.quest-briefing-card,
.quest-result-message {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 48%;
  width: min(520px, calc(100% - 80px));
  translate: -50% -50%;
  padding: 22px 26px;
  display: grid;
  gap: 7px;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--quest-accent) 68%, transparent);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  background: rgba(3, 11, 18, 0.82);
  box-shadow: inset 0 0 24px color-mix(in srgb, var(--quest-accent) 10%, transparent), 0 0 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
}

.quest-briefing-card > span,
.quest-result-message > span {
  color: var(--quest-accent);
  font-size: 0.72rem;
  font-weight: 1000;
  letter-spacing: 0.2em;
}

.quest-briefing-card strong,
.quest-result-message strong {
  font-size: clamp(1.35rem, 4vw, 2.3rem);
  text-transform: uppercase;
}

.quest-briefing-card small,
.quest-result-message small {
  color: #9fc1d2;
  font-weight: 800;
}

.quest-briefing-card p {
  margin: 7px 0 0;
  color: #d2e3eb;
  line-height: 1.5;
}

.quest-console {
  position: relative;
  z-index: 18;
  min-height: 148px;
  padding: 12px clamp(14px, 3vw, 28px);
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 112px;
  align-items: center;
  gap: 18px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.03), transparent),
    linear-gradient(#1c2d38, #0c151d 72%);
  box-shadow: inset 0 8px 14px rgba(255, 255, 255, 0.04), inset 0 -10px 20px #03070a;
}

.quest-pilot {
  height: 108px;
  display: grid;
  place-items: end center;
  position: relative;
}

.quest-pilot::before {
  content: "";
  position: absolute;
  inset: 34px 10px 0;
  border: 2px solid #2a4859;
  border-radius: 42% 42% 12px 12px;
  background: linear-gradient(#182b39, #071019);
  box-shadow: inset 0 0 18px #000;
}

.quest-pilot-avatar {
  position: relative;
  z-index: 2;
  height: 86px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.quest-pilot-avatar .pet-character {
  scale: 0.84;
  transform-origin: center bottom;
}

.quest-pilot > span {
  position: absolute;
  z-index: 3;
  bottom: 3px;
  padding: 2px 7px;
  color: var(--quest-accent);
  font-size: 0.65rem;
  font-weight: 950;
  border-radius: 999px;
  background: #071018;
}

.quest-control-bank {
  min-height: 92px;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: repeat(3, 12px) minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 5px 8px;
  border: 1px solid #325264;
  clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%, 0 11px);
  background:
    linear-gradient(rgba(64, 201, 178, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(64, 201, 178, 0.04) 1px, transparent 1px),
    #071019;
  background-size: 14px 14px;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.7);
}

.quest-control-bank i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--quest-accent);
  box-shadow: 0 0 8px var(--quest-accent);
  animation: quest-console-light 1.5s ease-in-out infinite alternate;
}

.quest-control-bank i:nth-child(2) { animation-delay: -0.5s; }
.quest-control-bank i:nth-child(3) { animation-delay: -1s; }

.quest-control-bank strong,
.quest-control-bank small {
  grid-column: 4;
}

.quest-control-bank strong {
  color: var(--quest-accent);
  letter-spacing: 0.08em;
}

.quest-control-bank small {
  color: #91aeba;
}

.quest-radar {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  position: relative;
  border: 2px solid color-mix(in srgb, var(--quest-accent) 65%, #203947);
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 12px, rgba(64, 201, 178, 0.12) 13px 14px), #071019;
  box-shadow: inset 0 0 18px #000, 0 0 14px color-mix(in srgb, var(--quest-accent) 15%, transparent);
}

.quest-radar b {
  position: absolute;
  inset: 7px 48% 48% 7px;
  transform-origin: 100% 100%;
  border-radius: 100% 0 0;
  background: linear-gradient(45deg, transparent, color-mix(in srgb, var(--quest-accent) 60%, transparent));
  animation: quest-radar-sweep 2.1s linear infinite;
}

.quest-radar span {
  position: relative;
  z-index: 2;
  padding: 3px 5px;
  color: var(--quest-accent);
  font-size: 0.61rem;
  font-weight: 1000;
  background: rgba(3, 9, 14, 0.82);
}

.quest-flight-hud {
  position: absolute;
  z-index: 8;
  inset: 24px 34px auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  color: #9fe9ff;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.quest-flight-hud > strong { color: #fff; }

.quest-shields {
  display: flex;
  justify-content: end;
  gap: 6px;
}

.quest-shields i {
  width: 23px;
  height: 27px;
  clip-path: polygon(50% 0, 95% 18%, 83% 77%, 50% 100%, 17% 77%, 5% 18%);
  background: #5af2ff;
  box-shadow: 0 0 10px #5af2ff;
  transition: opacity 180ms ease, filter 180ms ease;
}

.quest-shields i.is-lost {
  opacity: 0.16;
  filter: grayscale(1);
}

.quest-reticle {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 49%;
  width: 150px;
  height: 150px;
  translate: -50% -50%;
  border: 1px solid rgba(90, 242, 255, 0.3);
  border-radius: 50%;
  animation: quest-reticle-spin 8s linear infinite;
}

.quest-reticle::before,
.quest-reticle::after {
  content: "";
  position: absolute;
  background: rgba(90, 242, 255, 0.42);
}

.quest-reticle::before { left: 50%; top: -15px; width: 1px; height: 180px; }
.quest-reticle::after { top: 50%; left: -15px; height: 1px; width: 180px; }

.quest-reticle i {
  position: absolute;
  width: 25px;
  height: 25px;
  border-color: #5af2ff;
}

.quest-reticle i:nth-child(1) { left: -1px; top: -1px; border-left: 3px solid; border-top: 3px solid; }
.quest-reticle i:nth-child(2) { right: -1px; top: -1px; border-right: 3px solid; border-top: 3px solid; }
.quest-reticle i:nth-child(3) { left: -1px; bottom: -1px; border-left: 3px solid; border-bottom: 3px solid; }
.quest-reticle i:nth-child(4) { right: -1px; bottom: -1px; border-right: 3px solid; border-bottom: 3px solid; }

.quest-asteroid {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 47%;
  width: 112px;
  height: 104px;
  translate: -50% -50%;
  opacity: 0;
  transform: translateZ(-580px) rotate(-18deg) scale(0.18);
}

.quest-asteroid.is-approaching {
  animation: quest-asteroid-approach var(--approach-duration) linear forwards;
}

.quest-asteroid.is-destroyed { animation-play-state: paused; opacity: 0; transition: opacity 100ms ease; }
.quest-asteroid.is-impacting { animation: quest-asteroid-impact 520ms ease-in forwards; }
.quest-asteroid.is-boss {
  width: 178px;
  height: 166px;
  filter: drop-shadow(0 0 18px rgba(255, 79, 52, 0.5));
}

.quest-asteroid.is-boss-engaged {
  animation-play-state: paused;
}

.quest-asteroid.is-boss .quest-asteroid-rock {
  clip-path: polygon(9% 13%, 25% 2%, 43% 6%, 58% 0, 78% 8%, 94% 24%, 91% 42%, 100% 59%, 88% 80%, 70% 91%, 53% 87%, 34% 100%, 17% 91%, 3% 70%, 8% 49%, 0 31%);
  background:
    radial-gradient(circle at 50% 49%, rgba(255, 77, 44, 0.35), transparent 29%),
    radial-gradient(ellipse at 28% 22%, rgba(255, 255, 255, 0.2), transparent 18%),
    linear-gradient(145deg, #72584a, #332520 48%, #160f0d 82%);
  box-shadow: inset -26px -21px 38px rgba(0, 0, 0, 0.78), inset 10px 8px 14px rgba(255, 220, 180, 0.12), 0 0 28px rgba(255, 70, 45, 0.48);
}

.quest-asteroid.is-boss.is-boss-hit .quest-asteroid-rock {
  filter: brightness(2.2);
}

.quest-asteroid.is-boss.boss-damage-1 .quest-asteroid-rock {
  clip-path: polygon(9% 13%, 25% 2%, 43% 6%, 58% 0, 78% 8%, 89% 27%, 82% 43%, 91% 61%, 83% 79%, 66% 89%, 51% 84%, 34% 100%, 17% 91%, 3% 70%, 8% 49%, 0 31%);
}

.quest-asteroid.is-boss.boss-damage-2 .quest-asteroid-rock {
  clip-path: polygon(17% 17%, 31% 7%, 45% 11%, 58% 3%, 76% 11%, 84% 28%, 77% 44%, 86% 60%, 76% 75%, 61% 84%, 49% 79%, 35% 91%, 22% 82%, 11% 66%, 15% 49%, 8% 34%);
}

.quest-asteroid.is-boss.boss-damage-3 .quest-asteroid-rock {
  clip-path: polygon(25% 21%, 39% 13%, 52% 17%, 65% 11%, 79% 25%, 75% 42%, 82% 56%, 70% 70%, 57% 76%, 45% 70%, 33% 79%, 20% 64%, 26% 49%, 18% 36%);
}

.quest-asteroid.is-boss.boss-damage-4 .quest-asteroid-rock {
  clip-path: polygon(32% 28%, 44% 20%, 56% 24%, 67% 19%, 76% 33%, 70% 45%, 77% 57%, 64% 68%, 53% 64%, 42% 72%, 29% 59%, 36% 48%, 27% 38%);
}

.quest-asteroid-rock {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  position: relative;
  border: 0;
  clip-path: polygon(16% 5%, 36% 0, 51% 7%, 70% 3%, 91% 20%, 96% 42%, 88% 59%, 93% 78%, 74% 94%, 55% 91%, 37% 100%, 17% 89%, 3% 67%, 8% 48%, 0 30%);
  background:
    radial-gradient(ellipse at 30% 24%, rgba(255, 255, 255, 0.18), transparent 20%),
    radial-gradient(circle at 25% 28%, #3c332e 0 8%, transparent 9%),
    radial-gradient(circle at 69% 62%, #302925 0 12%, transparent 13%),
    linear-gradient(145deg, #aa9279, #5b4a3f 48%, #241d1a 82%);
  box-shadow: inset -18px -15px 26px rgba(0, 0, 0, 0.68), inset 8px 7px 13px rgba(255, 230, 190, 0.12), 0 0 24px rgba(255, 154, 83, 0.22);
  animation: quest-rock-tumble 2.8s linear infinite;
}

.rock-variant-2 .quest-asteroid-rock { clip-path: polygon(10% 13%, 30% 2%, 50% 8%, 68% 0, 88% 15%, 100% 38%, 91% 56%, 96% 79%, 75% 91%, 52% 100%, 35% 91%, 13% 96%, 1% 72%, 7% 51%, 0 29%); }
.rock-variant-3 .quest-asteroid-rock { clip-path: polygon(19% 0, 39% 6%, 57% 1%, 79% 10%, 91% 29%, 86% 47%, 100% 66%, 84% 88%, 61% 93%, 42% 100%, 20% 90%, 8% 72%, 0 51%, 9% 34%); }
.rock-variant-4 .quest-asteroid-rock { clip-path: polygon(8% 18%, 26% 3%, 48% 0, 63% 9%, 85% 7%, 98% 29%, 92% 49%, 100% 70%, 81% 91%, 57% 88%, 36% 100%, 15% 86%, 0 62%, 7% 43%); }

.quest-crater {
  position: absolute;
  z-index: 1;
  display: block;
  border-radius: 50%;
  background: radial-gradient(circle at 65% 65%, #55463b, #211b18 72%);
  box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.72), 2px 2px 3px rgba(255, 226, 181, 0.1);
}

.quest-crater.crater-one { left: 17%; top: 18%; width: 20%; height: 17%; }
.quest-crater.crater-two { right: 13%; top: 25%; width: 13%; height: 15%; }
.quest-crater.crater-three { left: 24%; bottom: 15%; width: 11%; height: 12%; }

.quest-boss-fragment {
  position: absolute;
  z-index: 4;
  display: none;
  width: 35%;
  height: 30%;
  text-decoration: none;
  opacity: 0;
  background: linear-gradient(145deg, #785e4d, #2a1e1a 72%);
  box-shadow: inset -7px -6px 10px rgba(0, 0, 0, 0.62), 0 0 10px rgba(255, 91, 52, 0.48);
}

.quest-asteroid.is-boss .quest-boss-fragment { display: block; }
.quest-boss-fragment.fragment-one { right: 0; top: 13%; clip-path: polygon(0 0, 100% 18%, 83% 100%, 23% 77%); }
.quest-boss-fragment.fragment-two { left: 0; bottom: 4%; clip-path: polygon(12% 5%, 100% 17%, 76% 100%, 0 76%); }
.quest-boss-fragment.fragment-three { right: 5%; bottom: 0; clip-path: polygon(18% 0, 100% 25%, 76% 100%, 0 70%); }
.quest-boss-fragment.fragment-four { left: 21%; top: 0; clip-path: polygon(0 22%, 74% 0, 100% 84%, 28% 100%); }

.quest-asteroid.boss-damage-1 .fragment-one { animation: quest-boss-fragment-right 700ms ease-out forwards; }
.quest-asteroid.boss-damage-2 .fragment-two { animation: quest-boss-fragment-left 700ms ease-out forwards; }
.quest-asteroid.boss-damage-3 .fragment-three { animation: quest-boss-fragment-right 700ms ease-out forwards; }
.quest-asteroid.boss-damage-4 .fragment-four { animation: quest-boss-fragment-left 700ms ease-out forwards; }

.quest-asteroid-rock > em {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: calc(50% + 34px);
  translate: -50% 0;
  display: none;
  width: max-content;
  color: #ffad91;
  font-size: 0.53rem;
  font-style: normal;
  font-weight: 1000;
  letter-spacing: 0.12em;
  text-shadow: 0 0 8px #ff3e25;
}

.quest-asteroid.is-boss .quest-asteroid-rock > em { display: block; }

.quest-asteroid-rock > span {
  position: relative;
  z-index: 2;
  min-width: 58px;
  padding: 6px;
  display: flex;
  justify-content: center;
  gap: 1px;
  color: #eaffff;
  font-size: 1.38rem;
  font-weight: 1000;
  letter-spacing: 0.05em;
  border: 0;
  background: transparent;
  text-shadow: 0 0 3px #fff, 0 0 9px #5be7ff, 0 0 18px #28aacc, 2px 2px 2px #13100e;
}

.quest-asteroid-rock b { font: inherit; }
.quest-asteroid-rock b.is-typed { color: #63ffb2; text-shadow: 0 0 5px #fff, 0 0 14px #20f59a; }

.quest-laser {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: 1%;
  width: 7px;
  height: 55%;
  opacity: 0;
  transform-origin: center bottom;
  background: linear-gradient(transparent, #fff 12%, #55f5ff 60%, transparent);
  box-shadow: 0 0 10px #55f5ff, 0 0 24px #2fb5ff;
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
}

.quest-laser.is-firing { animation: quest-laser-fire 180ms ease-out; }

.quest-explosion {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 47%;
  width: 30px;
  height: 30px;
  translate: -50% -50%;
  opacity: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 20px 8px #fff, 0 0 45px 20px #ffb13c, 0 0 80px 34px #ff4d2d;
}

.quest-explosion.is-active { animation: quest-explosion-burst 520ms ease-out; }

.quest-impact-flash {
  position: absolute;
  z-index: 13;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, transparent, rgba(255, 61, 61, 0.82));
}

.quest-impact-flash.is-active { animation: quest-shield-flash 580ms ease-out; }

.quest-setup-panel {
  display: grid;
  gap: 18px;
}

.quest-setup-panel section { display: grid; gap: 8px; }

.quest-setup-label {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.quest-difficulty-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.quest-difficulty-grid button,
.quest-chapter-grid button {
  padding: 10px;
  display: grid;
  gap: 3px;
  color: var(--ink);
  text-align: left;
  border: 1px solid #284252;
  border-radius: 10px;
  background: #0a131b;
  cursor: pointer;
}

.quest-difficulty-grid button.is-selected,
.quest-chapter-grid button.is-selected {
  color: #061014;
  border-color: var(--teal);
  background: var(--teal);
  box-shadow: 0 0 16px rgba(64, 201, 178, 0.22);
}

.quest-difficulty-grid small,
.quest-chapter-grid small { color: inherit; opacity: 0.72; font-size: 0.68rem; line-height: 1.25; }

.quest-chapter-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.quest-chapter-grid button > span {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  color: var(--teal);
  font-size: 0.68rem;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.quest-chapter-grid button.is-selected > span { color: #061014; }
.quest-chapter-grid button.is-complete:not(.is-selected) { border-color: rgba(64, 201, 178, 0.55); }
.quest-chapter-grid button:disabled { opacity: 0.42; cursor: not-allowed; }

.quest-launch-button { min-height: 54px; font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase; }

.quest-live-controls {
  padding: 12px;
  display: grid;
  grid-template-columns: 0.8fr 0.8fr minmax(170px, 1.25fr) auto auto;
  align-items: stretch;
  gap: 9px;
  border: 1px solid rgba(64, 201, 178, 0.28);
  border-radius: 12px;
  background: #081119;
}

.quest-live-controls > div {
  padding: 8px 12px;
  display: grid;
  gap: 3px;
  border: 1px solid #253e4d;
  border-radius: 8px;
  background: #050c12;
}

.quest-live-controls span { color: var(--muted); font-size: 0.68rem; text-transform: uppercase; }
.quest-live-controls strong { color: var(--teal); font-size: 1.25rem; letter-spacing: 0.12em; }

.quest-live-controls .quest-music-readout strong {
  overflow: hidden;
  color: #b9d7ff;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quest-live-controls [data-quest-music-toggle].is-muted {
  color: #ffb3ab;
  border-color: rgba(255, 112, 96, 0.56);
}

.quest-result-screen .quest-viewport { min-height: 520px; }
.quest-result-screen.is-victory .quest-result-message { border-color: var(--teal); }
.quest-result-screen.is-defeat .quest-result-message { border-color: #ff7060; }
.quest-result-controls { display: flex; }

@keyframes quest-star-twinkle {
  0%, 100% { opacity: 0.25; scale: 0.7; }
  50% { opacity: 1; scale: 1.2; }
}

@keyframes quest-star-flight {
  0% { translate: 0 -30px; scale: 0.35 0.15; opacity: 0; filter: blur(0); }
  16% { opacity: 0.9; }
  100% { translate: 0 230px; scale: 1.25 2.8; opacity: 0; filter: blur(0.7px); }
}

@keyframes quest-space-rush {
  0% { scale: 0.38; opacity: 0; }
  18% { opacity: 0.62; }
  100% { scale: 1.5; opacity: 0; }
}

@keyframes quest-nebula-drift {
  from { translate: -2% 0; scale: 0.96; }
  to { translate: 3% -2%; scale: 1.06; }
}

@keyframes quest-planet-drift {
  from { translate: 0 2%; rotate: -2deg; }
  to { translate: -5% -3%; rotate: 2deg; }
}

@keyframes quest-planet-flight {
  0% { translate: 32% -10%; scale: 0.66; rotate: -5deg; }
  50% { translate: 0 0; scale: 1; rotate: 0deg; }
  100% { translate: -25% 12%; scale: 1.35; rotate: 5deg; }
}

@keyframes quest-moon-flight {
  0% { translate: -50% -15%; scale: 0.65; opacity: 0.25; }
  55% { opacity: 0.82; }
  100% { translate: 95% 80%; scale: 1.45; opacity: 0.15; }
}

@keyframes quest-console-light { to { opacity: 0.35; } }
@keyframes quest-radar-sweep { to { rotate: 360deg; } }
@keyframes quest-reticle-spin { to { rotate: 360deg; } }

@keyframes quest-asteroid-approach {
  0% { opacity: 0.2; transform: translateZ(-580px) rotate(-20deg) scale(0.18); }
  12% { opacity: 1; }
  100% { opacity: 1; transform: translateZ(180px) rotate(24deg) scale(2.8); }
}

@keyframes quest-rock-tumble {
  0% { rotate: -6deg; }
  50% { rotate: 6deg; }
  100% { rotate: -6deg; }
}

@keyframes quest-asteroid-impact {
  to { opacity: 0; transform: translateZ(250px) scale(4.2); }
}

@keyframes quest-laser-fire {
  0% { opacity: 0; scale: 0 0; }
  30% { opacity: 1; scale: 1 1; }
  100% { opacity: 0; scale: 0.15 1; }
}

@keyframes quest-explosion-burst {
  0% { opacity: 0; scale: 0.1; }
  25% { opacity: 1; }
  100% { opacity: 0; scale: 3.6; }
}

@keyframes quest-boss-fragment-right {
  0% { opacity: 1; translate: 0 0; rotate: 0; scale: 1; }
  100% { opacity: 0; translate: 130px -70px; rotate: 150deg; scale: 0.35; }
}

@keyframes quest-boss-fragment-left {
  0% { opacity: 1; translate: 0 0; rotate: 0; scale: 1; }
  100% { opacity: 0; translate: -130px 75px; rotate: -170deg; scale: 0.3; }
}

@keyframes quest-shield-flash {
  0%, 100% { opacity: 0; }
  22% { opacity: 1; }
  50% { opacity: 0.35; }
}

.arcade-avatar-pad,
.arcade-result-avatar {
  width: 170px;
  min-height: 170px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(103, 167, 255, 0.38);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(103, 167, 255, 0.17), rgba(5, 10, 15, 0.76));
  box-shadow: 0 0 34px rgba(103, 167, 255, 0.14);
}

.arcade-scene-copy {
  max-width: 380px;
  display: grid;
  gap: 7px;
}

.arcade-scene-copy > span {
  font-size: 3rem;
  line-height: 1;
}

.arcade-scene-copy strong {
  font-size: 1.25rem;
}

.arcade-scene-copy small {
  color: var(--muted);
  line-height: 1.45;
}

.arcade-prompt {
  margin: 20px 0 14px;
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.45;
}

.arcade-answer-form {
  display: grid;
  gap: 8px;
}

.arcade-answer-form label {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.arcade-answer-form > div {
  display: flex;
  gap: 10px;
}

.arcade-answer-input {
  min-width: 0;
  flex: 1;
  padding: 14px 16px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #090f15;
  font: inherit;
}

.arcade-answer-input:focus {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.arcade-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.arcade-choice-grid button {
  min-height: 54px;
  padding: 12px;
  color: var(--ink);
  border: 1px solid rgba(103, 167, 255, 0.36);
  border-radius: 12px;
  background: #101821;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.arcade-choice-grid button:hover,
.arcade-choice-grid button:focus-visible {
  border-color: var(--teal);
  background: rgba(43, 208, 190, 0.12);
}

.arcade-feedback {
  min-height: 56px;
  margin-top: 14px;
  display: grid;
  gap: 4px;
  border-radius: 12px;
}

.arcade-feedback.is-correct,
.arcade-feedback.is-wrong {
  padding: 12px 14px;
  border: 1px solid rgba(43, 208, 190, 0.42);
  background: rgba(43, 208, 190, 0.09);
}

.arcade-feedback.is-wrong {
  border-color: rgba(255, 112, 96, 0.48);
  background: rgba(255, 112, 96, 0.09);
}

.arcade-feedback span {
  color: var(--muted);
}

.arcade-next-button {
  margin-top: 12px;
}

.arcade-result {
  padding: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.arcade-result > span {
  font-size: 4rem;
}

.arcade-result-copy {
  display: grid;
  gap: 6px;
}

.arcade-result-copy strong {
  font-size: 1.35rem;
}

.parent-arcade-records {
  margin: 18px 0;
  padding: 20px;
  border: 1px solid rgba(43, 208, 190, 0.34);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(43, 208, 190, 0.06), rgba(9, 15, 21, 0.72));
}

.parent-arcade-head {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.parent-arcade-avatar {
  width: 118px;
  min-height: 105px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(103, 167, 255, 0.28);
  border-radius: 16px;
  background: rgba(5, 10, 15, 0.58);
}

.parent-arcade-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.parent-arcade-card {
  padding: 14px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  opacity: 0.72;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(7, 12, 18, 0.72);
}

.parent-arcade-card.has-record {
  opacity: 1;
  border-color: rgba(252, 188, 66, 0.54);
  background: rgba(252, 188, 66, 0.06);
}

.parent-arcade-icon {
  font-size: 1.6rem;
}

.parent-arcade-card > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.parent-arcade-card small {
  color: var(--muted);
}

.parent-arcade-card dl {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.parent-arcade-card dl div {
  padding: 7px;
  display: grid;
  gap: 2px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.parent-arcade-card dt {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.parent-arcade-card dd {
  margin: 0;
  font-weight: 900;
}

@media (max-width: 900px) {
  .arcade-game-grid,
  .parent-arcade-grid {
    grid-template-columns: 1fr;
  }

  .arcade-layout {
    grid-template-columns: 1fr;
  }

  .arcade-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .arcade-progress-list {
    grid-column: 1 / -1;
  }

  .quest-difficulty-grid,
  .quest-chapter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .arcade-shell {
    padding: 12px;
  }

  .arcade-panel-intro,
  .arcade-topbar,
  .parent-arcade-head,
  .arcade-scene {
    align-items: stretch;
    flex-direction: column;
  }

  .arcade-panel-character,
  .parent-arcade-avatar {
    width: 100%;
  }

  .arcade-picker,
  .arcade-hud,
  .arcade-choice-grid {
    grid-template-columns: 1fr;
  }

  .arcade-answer-form > div {
    display: grid;
  }

  .arcade-avatar-pad,
  .arcade-result-avatar {
    width: 100%;
    border-radius: 18px;
  }

  .parent-arcade-card dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .arcade-stage {
    padding: 14px;
  }

  .arcade-scene {
    padding: 8px;
  }

  .keyboard-quest-cockpit {
    min-height: 620px;
    grid-template-rows: minmax(430px, 1fr) 176px;
  }

  .quest-viewport,
  .quest-result-screen .quest-viewport { min-height: 430px; }

  .quest-planet { width: clamp(120px, 35vw, 190px); }

  .quest-console {
    grid-template-columns: 88px minmax(0, 1fr) 74px;
    gap: 7px;
    padding-inline: 8px;
  }

  .quest-radar {
    width: 68px;
    height: 68px;
  }

  .quest-flight-hud {
    inset-inline: 22px;
    grid-template-columns: 1fr auto;
  }

  .quest-flight-hud > span { display: none; }
  .quest-shields { grid-column: 2; grid-row: 1; }
  .quest-briefing-card,
  .quest-result-message { width: calc(100% - 52px); padding: 18px; }
  .quest-live-controls { grid-template-columns: 1fr 1fr; }
  .quest-live-controls .quest-music-readout { grid-column: 1 / -1; }
  .quest-live-controls button { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .curriculum-hero-actions {
    display: grid;
  }

  .curriculum-hero-actions button {
    width: 100%;
  }

  .curriculum-hero-stats strong {
    font-size: 18px;
  }

  .curriculum-hero-stats span {
    font-size: 9px;
  }

  .curriculum-lesson-card {
    grid-template-columns: 68px minmax(0, 1fr) 12px;
  }

  .lesson-card-copy small {
    font-size: 9px;
  }

  .lesson-card-copy strong {
    font-size: 14px;
  }

  .certificate-sheet {
    min-width: 540px;
  }

  .certificate-layout {
    overflow-x: auto;
  }
}

@media print {
  body.printing-certificate {
    background: #fff;
  }

  body.printing-certificate > *:not(.class-view),
  body.printing-certificate .class-head,
  body.printing-certificate .curriculum-tabs,
  body.printing-certificate .curriculum-back,
  body.printing-certificate .certificate-status-panel {
    display: none !important;
  }

  body.printing-certificate .class-view,
  body.printing-certificate .class-panel,
  body.printing-certificate .class-content,
  body.printing-certificate .curriculum-shell,
  body.printing-certificate .certificate-layout {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.printing-certificate .certificate-sheet {
    width: 100%;
    break-inside: avoid;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  @page {
    size: landscape;
    margin: 0.25in;
  }
}

/* Traditional account creation and administrator console */
.account-modal,
.admin-reset-modal {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: none;
  place-items: center;
  padding: clamp(12px, 3vw, 28px);
  background: rgba(5, 8, 11, 0.82);
  backdrop-filter: blur(10px);
}

.account-modal.is-open,
.admin-reset-modal.is-open {
  display: grid;
}

.account-creation-card {
  width: min(1120px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  background: #171c22;
  border: 1px solid rgba(242, 189, 75, 0.55);
  border-radius: 8px;
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.72), 0 0 44px rgba(242, 189, 75, 0.08);
}

.account-creation-head,
.account-setup-footer,
.admin-command-head,
.admin-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.account-creation-head {
  padding: clamp(20px, 3vw, 34px);
  border-bottom: 1px solid var(--line);
}

.account-creation-head h2,
.admin-command-head h2,
.admin-section-head h2 {
  margin: 0;
}

.account-creation-head > div > p:last-child,
.account-setup-footer p,
.admin-command-head > div > p:last-child {
  margin: 7px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.account-creation-head > button,
.account-setup-footer button,
.admin-command-head > button,
.admin-reset-card button,
.admin-account-actions button,
.admin-wide-action,
.admin-inspector-actions button {
  min-height: 42px;
  padding: 0 16px;
  color: var(--ink);
  background: #242b32;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-weight: 800;
  cursor: pointer;
}

.account-creation-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  padding: 8px;
  background: #0f1419;
  border-bottom: 1px solid var(--line);
}

.account-creation-tabs button {
  min-height: 44px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  font-weight: 850;
  cursor: pointer;
}

.account-creation-tabs button.is-selected {
  color: #11161a;
  background: var(--gold);
  border-color: var(--gold);
}

.account-setup-view {
  display: none;
  padding: clamp(18px, 3vw, 30px);
}

.account-setup-view.is-active {
  display: grid;
  gap: 18px;
}

.traditional-account-form {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: clamp(18px, 2.4vw, 28px);
  background: #20262d;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.parent-registration {
  border-top: 3px solid var(--gold);
}

.child-account-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.child-slot-card {
  border-top: 3px solid var(--teal);
}

.child-slot-card.is-occupied {
  box-shadow: inset 0 0 0 1px rgba(64, 201, 178, 0.26), 0 0 22px rgba(64, 201, 178, 0.07);
}

.admin-registration {
  width: min(700px, 100%);
  margin: 0 auto;
  border-top: 3px solid var(--blue);
}

.account-form-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.account-form-heading > span {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  aspect-ratio: 1;
  color: #11161a;
  background: var(--gold);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 950;
}

.child-slot-card .account-form-heading > span {
  background: var(--teal);
}

.admin-registration .account-form-heading > span {
  background: var(--blue);
}

.account-form-heading h3 {
  margin: 0;
  font-size: 20px;
}

.traditional-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.traditional-account-form label,
.login-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.traditional-account-form label > span,
.login-field > span {
  color: #d5dde0;
  font-size: 12px;
  font-weight: 800;
}

.traditional-account-form input,
.login-field input {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 0 12px;
  color: var(--ink);
  background: #10151a;
  border: 1px solid var(--line);
  border-radius: 5px;
  outline: none;
}

.traditional-account-form input:focus,
.login-field input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(242, 189, 75, 0.12);
}

.traditional-account-form input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.field-span-two {
  grid-column: 1 / -1;
}

.account-save-button,
.traditional-account-form > button.primary {
  min-height: 46px;
  color: #11161a;
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 5px;
  font-weight: 900;
  cursor: pointer;
}

.child-slot-card > button.primary {
  background: var(--teal);
  border-color: var(--teal);
}

.admin-registration > button.primary {
  background: var(--blue);
  border-color: var(--blue);
}

.traditional-account-form > button:disabled {
  color: #778086;
  background: #151a1f;
  border-color: var(--line);
  cursor: not-allowed;
}

.account-form-status {
  min-height: 38px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.account-setup-footer {
  padding: 16px 2px 0;
  border-top: 1px solid var(--line);
}

.admin-setup-notice {
  padding: 12px;
  color: #c9d9e8;
  background: rgba(103, 167, 255, 0.08);
  border-left: 3px solid var(--blue);
  font-size: 12px;
  line-height: 1.5;
}

.compact-login-card {
  width: min(480px, 100%);
  gap: 15px;
}

.login-intro,
.login-help {
  color: var(--muted);
  line-height: 1.5;
}

.login-submit {
  min-height: 48px;
}

.admin-reset-card {
  display: grid;
  gap: 14px;
  width: min(470px, 100%);
  padding: clamp(20px, 3vw, 30px);
  background: #20262d;
  border: 1px solid rgba(232, 93, 93, 0.6);
  border-radius: 8px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.7);
}

.admin-reset-card > p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.admin-reset-card > button.primary {
  color: #11161a;
  background: var(--gold);
  border-color: var(--gold);
}

.main-menu.admin-mode .landing-hero,
.main-menu.admin-mode .landing-stats,
.main-menu.admin-mode .curriculum-showcase {
  display: none;
}

.main-menu.admin-mode .landing-links {
  display: none;
}

.admin-hub {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
  padding: clamp(42px, 6vw, 84px) 0 20px;
}

.admin-command-head {
  padding: clamp(22px, 3vw, 34px);
  background: linear-gradient(110deg, rgba(103, 167, 255, 0.11), transparent 44%), #20262d;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: 8px;
}

.admin-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-overview > div {
  display: grid;
  gap: 4px;
  min-height: 118px;
  padding: 18px;
  background: #171d23;
  border: 1px solid var(--line);
  border-bottom: 3px solid var(--admin-accent);
  border-radius: 6px;
}

.admin-overview span,
.admin-overview small {
  color: var(--muted);
  font-size: 11px;
}

.admin-overview span {
  font-weight: 850;
  text-transform: uppercase;
}

.admin-overview strong {
  font-size: 27px;
}

.admin-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.8fr) minmax(0, 1.2fr);
  gap: 16px;
  align-items: start;
}

.admin-directory,
.admin-inspector {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 20px;
  background: #1b2127;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.admin-inspector {
  position: sticky;
  top: 18px;
}

.admin-section-head > span {
  color: var(--muted);
  font-size: 12px;
}

.admin-family-card,
.admin-child-directory {
  display: grid;
  gap: 8px;
}

.admin-password-reset {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid rgba(103, 167, 255, 0.28);
  border-radius: 8px;
  background: #12171c;
  display: grid;
  gap: 0.8rem;
}

.admin-password-reset > div p:last-child,
.admin-password-reset > p {
  margin: 0.3rem 0 0;
  color: var(--muted);
}

.admin-password-reset h3 {
  margin: 0.15rem 0;
}

#passwordAccountSelect {
  width: 100%;
}

.admin-child-directory {
  padding-left: 22px;
  border-left: 1px solid var(--line);
}

.admin-account-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  background: #12171c;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.admin-account-row.is-selected {
  border-color: var(--blue);
  box-shadow: inset 3px 0 var(--blue);
}

.admin-account-avatar {
  display: grid;
  place-items: center;
  width: 44px;
  aspect-ratio: 1;
  color: #11161a;
  background: var(--gold);
  border-radius: 5px;
  font-weight: 950;
}

.child-account-row .admin-account-avatar {
  background: var(--teal);
}

.admin-account-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-account-copy small {
  color: var(--blue);
  font-weight: 850;
  text-transform: uppercase;
}

.admin-account-copy strong,
.admin-account-copy span {
  overflow-wrap: anywhere;
}

.admin-account-copy span {
  color: var(--muted);
  font-size: 12px;
}

.admin-account-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.admin-account-actions button {
  min-height: 36px;
  padding-inline: 11px;
  font-size: 11px;
}

.danger-action {
  color: #ffd9d9 !important;
  border-color: rgba(232, 93, 93, 0.62) !important;
  background: rgba(232, 93, 93, 0.1) !important;
}

.admin-detail-banner {
  padding: 18px;
  background: linear-gradient(110deg, rgba(103, 167, 255, 0.1), transparent), #12171c;
  border-left: 3px solid var(--blue);
}

.admin-detail-banner span,
.admin-detail-banner strong,
.admin-detail-banner p {
  display: block;
}

.admin-detail-banner span {
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-detail-banner strong {
  margin-top: 5px;
  font-size: 23px;
}

.admin-detail-banner p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.admin-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.admin-detail-grid > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  background: #12171c;
  border: 1px solid var(--line);
}

.admin-detail-grid span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.admin-detail-grid strong {
  overflow-wrap: anywhere;
  font-size: 14px;
}

.admin-wide-action {
  width: 100%;
  margin-top: 10px;
}

.admin-path-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.admin-path-list > div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 40px;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}

.admin-path-list i {
  height: 7px;
  overflow: hidden;
  background: #0d1216;
  border-radius: 4px;
}

.admin-path-list b {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--blue));
}

.admin-inspector-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.admin-activity-table {
  margin-top: 14px;
  overflow-x: auto;
}

.admin-activity-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.admin-empty {
  margin: 0;
  padding: 18px;
  color: var(--muted);
  background: #12171c;
  border: 1px dashed var(--line);
  line-height: 1.5;
}

@media (max-width: 1050px) {
  .admin-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .admin-inspector {
    position: static;
  }
}

@media (max-width: 760px) {
  .account-creation-head,
  .account-setup-footer,
  .admin-command-head,
  .admin-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .child-account-slots,
  .traditional-field-grid,
  .admin-overview,
  .admin-detail-grid,
  .admin-inspector-actions {
    grid-template-columns: 1fr;
  }

  .field-span-two {
    grid-column: auto;
  }

  .account-creation-tabs button {
    padding-inline: 8px;
    font-size: 12px;
  }

  .admin-child-directory {
    padding-left: 8px;
  }
}

/* Separate administrator page */
.admin-page-body {
  min-height: 100dvh;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px) center / 72px 72px,
    linear-gradient(0deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px) center / 72px 72px,
    linear-gradient(125deg, rgba(103, 167, 255, 0.08), transparent 42%),
    #0d1014;
}

.admin-page-frame {
  width: min(1440px, 100%);
  min-height: 100dvh;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 64px) clamp(48px, 7vw, 90px);
}

.admin-page-nav .admin-home-link {
  display: inline-flex;
  align-items: center;
  color: #c9d9e8;
  text-decoration: none;
  font-weight: 800;
}

.admin-page-main {
  padding-top: clamp(28px, 5vw, 70px);
}

.admin-login-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 480px);
  gap: clamp(30px, 7vw, 100px);
  align-items: center;
  min-height: calc(100dvh - 210px);
}

.admin-login-copy {
  max-width: 690px;
}

.admin-login-copy h1 {
  max-width: 620px;
  font-size: clamp(2.5rem, 6vw, 5.4rem);
  line-height: 0.98;
}

.admin-login-copy > p:last-child {
  max-width: 570px;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.65;
}

.admin-page-login-card {
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(103, 167, 255, 0.48);
  border-top: 4px solid var(--blue);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42);
}

.admin-page-login-card .primary {
  color: #0d1415;
  background: var(--blue);
  border-color: var(--blue);
}

.admin-page-dashboard {
  display: grid;
  gap: 16px;
}

.admin-visitor-tracker {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 2.4vw, 28px);
  background: linear-gradient(145deg, rgba(64, 201, 178, 0.08), rgba(103, 167, 255, 0.06)), var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--teal);
  border-radius: 8px;
}

.admin-visitor-tracker .admin-section-head {
  align-items: center;
}

.admin-visitor-tracker .admin-section-head button {
  min-height: 40px;
  padding: 0 14px;
  color: var(--ink);
  background: #252c34;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-weight: 850;
  cursor: pointer;
}

.admin-visitor-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.admin-visitor-summary > div {
  display: grid;
  gap: 4px;
  min-height: 104px;
  padding: 16px;
  background: #12171c;
  border: 1px solid var(--line);
  border-bottom: 3px solid var(--teal);
  border-radius: 7px;
}

.admin-visitor-summary span,
.admin-visitor-summary small,
.admin-visitor-subhead span,
.admin-visitor-day small,
.admin-visitor-source span,
.admin-visitor-recent small {
  color: var(--muted);
  font-size: 0.7rem;
}

.admin-visitor-summary span {
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-visitor-summary strong {
  font-size: 1.65rem;
}

.admin-visitor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.7fr);
  gap: 12px;
}

.admin-visitor-grid > section,
.admin-visitor-recent-wrap {
  min-width: 0;
  padding: 15px;
  background: #12171c;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.admin-visitor-subhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.admin-visitor-subhead h3 {
  margin: 0;
  font-size: 0.95rem;
}

.admin-visitor-trend {
  min-height: 170px;
  display: grid;
  grid-template-columns: repeat(14, minmax(22px, 1fr));
  align-items: end;
  gap: 5px;
}

.admin-visitor-day {
  min-width: 0;
  display: grid;
  gap: 4px;
  text-align: center;
  padding: 4px 0;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.admin-visitor-day:hover,
.admin-visitor-day[aria-expanded="true"] { border-color: var(--teal); background: rgba(64,201,178,.08); }
.admin-visitor-day { -webkit-tap-highlight-color: transparent; }
.admin-visitor-day:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.admin-visitor-trend-help { margin: -4px 0 12px; color: var(--muted); font-size: .75rem; line-height: 1.5; }
.admin-visitor-day-details { position: fixed; z-index: 1500; box-sizing: border-box; max-height: calc(100dvh - 24px); overflow-y: auto; padding: 18px; border: 1px solid var(--teal); border-top: 3px solid var(--gold); border-radius: 12px; background: #11212b; color: var(--ink); box-shadow: 0 18px 60px #0009; }
.admin-visitor-day-details[hidden] { display: none; }
.admin-visitor-day-details header { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.admin-visitor-day-details header p { margin: 0 0 4px; color: var(--teal); font-size: .72rem; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.admin-visitor-day-details h4 { margin: 0; font-size: 1rem; }
.admin-visitor-day-details h4 small { color: var(--muted); font-size: .72rem; }
.admin-visitor-day-details header button { flex: 0 0 36px; min-height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); color: var(--ink); font-size: 1.5rem; cursor: pointer; }
.admin-visitor-day-total { margin: 12px 0; color: var(--gold); font-size: .83rem; font-weight: 750; }
.admin-visitor-day-location-list { max-height: min(320px, 43dvh); overflow-y: auto; overscroll-behavior: contain; padding: 0 10px 0 0; margin: 0; list-style: none; scrollbar-gutter: stable; }
.admin-visitor-day-location-list li { border-top: 1px solid var(--line); padding: 10px 0; overflow-wrap: anywhere; line-height: 1.5; }
.admin-visitor-day-location-list strong { display: block; font-size: .85rem; }
.admin-visitor-day-location-list span { color: var(--muted); font-size: .75rem; }
.admin-visitor-day-location-list p { margin: 3px 0 0; color: #9af4e8; font-size: .75rem; }
.admin-visitor-day-note, .admin-visitor-day-empty { color: var(--muted); font-size: .72rem; line-height: 1.5; margin: 12px 0 0; }
.admin-visitor-day-details button:focus-visible, .admin-visitor-day-location-list:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.admin-visitor-bar-track {
  height: 112px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: rgba(64, 201, 178, 0.06);
  border-radius: 3px 3px 0 0;
}

.admin-visitor-bar-track span {
  width: 100%;
  min-height: 2px;
  background: linear-gradient(180deg, var(--teal), var(--blue));
  border-radius: 3px 3px 0 0;
}

.admin-visitor-day strong {
  font-size: 0.7rem;
}

.admin-visitor-day small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-visitor-sources {
  display: grid;
  gap: 12px;
}

.admin-location-subhead {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.admin-visitor-locations {
  display: grid;
  gap: 8px;
}

.admin-visitor-location {
  min-width: 0;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  background: #171d23;
  border: 1px solid var(--line);
  border-radius: 5px;
}

.admin-visitor-location > div:not(.admin-source-meter) {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.admin-visitor-location strong,
.admin-visitor-location small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-visitor-location strong {
  font-size: 0.76rem;
}

.admin-visitor-location small,
.admin-visitor-location > span:not(.admin-location-marker) {
  color: var(--muted);
  font-size: 0.65rem;
}

.admin-location-marker {
  color: var(--gold);
  font-size: 0.7rem;
}

.admin-visitor-location .admin-source-meter {
  grid-column: 2 / -1;
  width: 100%;
}

.admin-visitor-source {
  display: grid;
  gap: 6px;
}

.admin-visitor-source > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.admin-visitor-source strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
}

.admin-source-meter {
  height: 6px;
  overflow: hidden;
  background: #252c34;
  border-radius: 999px;
}

.admin-source-meter span {
  display: block;
  height: 100%;
  background: var(--teal);
  border-radius: inherit;
}

.admin-visitor-recent {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.admin-visitor-recent article {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 11px;
  background: #171d23;
  border: 1px solid var(--line);
  border-radius: 5px;
}

.admin-visitor-recent article > span {
  width: max-content;
  padding: 3px 7px;
  color: #0d1415;
  background: var(--teal);
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-visitor-recent article > span.is-returning {
  background: var(--blue);
}

.admin-visitor-recent strong,
.admin-visitor-recent small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .admin-visitor-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-visitor-grid {
    grid-template-columns: 1fr;
  }

  .admin-visitor-recent {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .admin-visitor-summary,
  .admin-visitor-recent {
    grid-template-columns: 1fr;
  }

  .admin-visitor-tracker .admin-section-head,
  .admin-visitor-subhead {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-visitor-trend {
    grid-template-columns: repeat(7, minmax(28px, 1fr));
    overflow-x: visible;
  }

  .admin-visitor-day:nth-child(-n + 7) {
    display: grid;
  }
}

.admin-preview-program {
  display: grid;
  gap: 16px;
  padding: clamp(18px, 2.4vw, 28px);
  background: linear-gradient(145deg, rgba(242, 189, 75, 0.08), rgba(103, 167, 255, 0.06)), var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: 8px;
}

.admin-preview-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.admin-preview-summary > div,
.admin-preview-password {
  display: grid;
  gap: 5px;
  padding: 13px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 7px;
}

.admin-preview-summary span,
.admin-preview-password span,
.admin-preview-password small,
.admin-preview-email-actions p,
.admin-preview-restrictions span {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

.admin-preview-summary strong,
.admin-preview-password strong {
  overflow-wrap: anywhere;
}

.admin-preview-restrictions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  background: rgba(64, 201, 178, 0.07);
  border: 1px solid rgba(64, 201, 178, 0.3);
  border-radius: 7px;
}

.admin-preview-restrictions strong {
  color: var(--teal);
  white-space: nowrap;
}

.admin-preview-passwords {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.admin-preview-password.is-active {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(242, 189, 75, 0.35);
}

.admin-preview-password.is-retired {
  opacity: 0.58;
}

.admin-preview-email-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.admin-preview-email-actions p {
  margin: 0;
}

@media (max-width: 900px) {
  .admin-preview-summary,
  .admin-preview-passwords {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .admin-preview-summary,
  .admin-preview-passwords {
    grid-template-columns: 1fr;
  }

  .admin-preview-restrictions,
  .admin-preview-email-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-preview-restrictions strong {
    white-space: normal;
  }
}

.admin-music-library {
  min-width: 0;
  padding: clamp(18px, 3vw, 26px);
  display: grid;
  gap: 16px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--violet);
  border-radius: 8px;
  background:
    radial-gradient(circle at 88% 0, rgba(178, 137, 255, 0.11), transparent 28%),
    #1b2127;
}

.admin-audio-console {
  min-width: 0;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(280px, 1.2fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(178, 137, 255, 0.32);
  border-radius: 7px;
  background: #10151a;
  box-shadow: inset 3px 0 var(--violet);
}

.admin-now-playing {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.admin-now-playing > span {
  color: var(--violet);
  font-size: 0.67rem;
  font-weight: 950;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.admin-now-playing > strong,
.admin-now-playing > small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-now-playing > small {
  color: var(--muted);
  font-size: 0.72rem;
}

.admin-audio-console audio {
  width: 100%;
  min-width: 0;
  height: 42px;
  color-scheme: dark;
}

.admin-audio-console > button,
.admin-music-row > button {
  min-height: 40px;
  padding: 0 15px;
  color: var(--ink);
  font-weight: 900;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #252c34;
  cursor: pointer;
}

.admin-music-row > button:hover,
.admin-music-row > button:focus-visible {
  color: #111418;
  border-color: var(--violet);
  background: var(--violet);
}

.admin-music-list {
  max-height: 480px;
  padding-right: 6px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  overflow-y: auto;
  scrollbar-color: var(--violet) #10151a;
}

.admin-music-row {
  min-width: 0;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #12171c;
  transition: border-color 160ms ease, background 160ms ease;
}

.admin-music-row.is-playing {
  border-color: var(--violet);
  background: rgba(178, 137, 255, 0.09);
  box-shadow: inset 3px 0 var(--violet);
}

.admin-music-row.is-playing > button {
  color: #111418;
  border-color: var(--violet);
  background: var(--violet);
}

.admin-track-number {
  color: var(--violet);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.admin-track-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.admin-track-copy strong,
.admin-track-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-track-copy span {
  color: var(--muted);
  font-size: 0.68rem;
  text-transform: uppercase;
}

.admin-page-dashboard .admin-command-head {
  padding: clamp(22px, 3vw, 34px);
}

.admin-command-head h1 {
  font-size: clamp(1.9rem, 4vw, 3.4rem);
}

.admin-command-actions a,
.admin-command-actions button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  color: var(--ink);
  background: #242b32;
  border: 1px solid var(--line);
  border-radius: 5px;
  text-decoration: none;
  font-weight: 800;
}

@media (max-width: 820px) {
  .admin-login-panel {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .admin-login-copy h1 {
    font-size: 3rem;
  }

  .admin-audio-console {
    grid-template-columns: 1fr auto;
  }

  .admin-now-playing {
    grid-column: 1 / -1;
  }

  .admin-music-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .admin-page-frame {
    padding-inline: 16px;
  }

  .admin-page-nav {
    align-items: center;
  }

  .admin-login-copy h1 {
    font-size: 2.35rem;
  }

  .admin-audio-console {
    grid-template-columns: 1fr;
  }

  .admin-audio-console > button {
    width: 100%;
  }

  .admin-music-row {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .admin-music-row > button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .parent-report-actions,
  .topic-review-submit-row {
    display: grid;
  }

  .parent-report-actions button,
  .topic-review-submit-row button {
    width: 100%;
  }

  .parent-topic-review > header {
    display: grid;
    align-items: start;
  }

  .parent-topic-review > header > strong {
    text-align: left;
  }

  .parent-review-controls,
  .parent-lesson-certification {
    grid-template-columns: 1fr;
  }
}

/* Recorded game artwork keeps the landing preview in sync with gameplay. */
.curriculum-video.gameplay-video-preview { height: auto; }
.gameplay-video-preview .video-topline { position: relative; inset: auto; }
.landing-game-video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 6px; background: #070c17; }
.gameplay-video-preview .video-caption { display: flex; gap: 12px; justify-content: space-between; }
.gameplay-video-preview .video-caption small { color: var(--muted); font-size: .72rem; }
.gameplay-video-preview .preview-toggle { flex-shrink: 0; }
@media (max-width: 980px) {
  .menu-panel { grid-template-columns: minmax(0, 1fr); }
  .landing-hero { grid-template-columns: minmax(0, 1fr); }
  .landing-hero > * { min-width: 0; }
  .curriculum-video.gameplay-video-preview { max-width: 100%; }
}